/* ═══════════════════════════════════════════════════════════
   Блоки страницы
   ═══════════════════════════════════════════════════════════ */

/* ── Шапка ───────────────────────────────────────────────── */

.hdr {
  position: fixed; inset: 0 0 auto; z-index: 100;
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--fast);
}
.hdr.stuck { border-bottom-color: var(--line); }

.hdr__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; height: 7.6rem;
}

/* Логотип: значок ячейки (на CSS, без SVG) + формула с подстрочной «4»
   и подписью. Значок повторяет силуэт банки 33140 с клеммой. */
.logo { display: inline-flex; align-items: center; gap: 1.1rem; line-height: 1; }

.logo__cell {
  position: relative;
  flex: none;
  width: 2.2rem; height: 3.2rem;
  border: 2.5px solid currentColor;
  border-radius: .7rem;
  display: flex; flex-direction: column;
  justify-content: center; gap: .28rem;
  padding: 0 .38rem;
}
/* клемма сверху */
.logo__cell::before {
  content: "";
  position: absolute; top: -.62rem; left: 50%; transform: translateX(-50%);
  width: .9rem; height: .48rem;
  background: currentColor; border-radius: .2rem .2rem 0 0;
}
/* уровень заряда внутри */
.logo__cell i {
  display: block; height: .34rem; border-radius: .2rem;
  background: currentColor;
}
.logo__cell i:last-child { background: var(--acc); }


.logo__m {
  display: block;
  font-family: "Unbounded", sans-serif;
  font-weight: 700; font-size: 1.9rem;
  letter-spacing: -.055em;
}
/* LAB — акцентным цветом, без декора */
.logo__m b { font-weight: inherit; color: var(--acc-deep); }

.logo__m sup {
  font-size: .58em; vertical-align: super;
  color: var(--acc-deep); margin-left: .02em;
}


/* на тёмном фоне */
.sect--dark .logo__m sup, .sect--dark .logo__m b { color: var(--acc); }

.nav { display: flex; gap: 3.6rem; }
.nav a { position: relative; font-size: 1.6rem; color: var(--gray); transition: color var(--fast); }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -.6rem;
  height: 1.5px; background: var(--acc); transition: right var(--fast);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { right: 0; }

.hdr__btn { padding: 1.4ex 2.6ch; font-size: 1.5rem; }

.burger { display: none; width: 4.4rem; height: 4.4rem; border: 0; background: none; cursor: pointer; }
.burger span { display: block; width: 2.4rem; height: 1.5px; margin: .6rem auto; background: var(--ink); transition: transform var(--fast); }
.burger.on span:nth-child(1) { transform: translateY(.38rem) rotate(45deg); }
.burger.on span:nth-child(2) { transform: translateY(-.38rem) rotate(-45deg); }

@media (max-width: 980px) {
  .nav, .hdr__btn { display: none; }
  .burger { display: block; }
  .nav--open {
    display: flex; flex-direction: column; gap: 2.4rem;
    position: fixed; inset: 7.6rem 0 auto;
    padding: 3.2rem var(--gut) 4rem;
    background: var(--paper); border-bottom: 1px solid var(--line);
  }
  .nav--open a { font-size: 2.4rem; color: var(--ink); }
}

/* ── Герой ───────────────────────────────────────────────── */

.hero { position: relative; overflow: hidden; min-height: 100svh; display: flex; flex-direction: column; }

/* схема — фон всего экрана */
.circuit {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* под текстом плату приглушаем, справа показываем в полную силу */
  -webkit-mask-image: linear-gradient(105deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.32) 34%, #000 62%, #000 100%);
  mask-image: linear-gradient(105deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.32) 34%, #000 62%, #000 100%);
}
.circuit canvas { display: block; width: 100%; height: 100%; }

/* Герой в две колонки: слева текст, справа сцена с моделью. */
.hero__in {
  position: relative; z-index: 1;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: clamp(3rem, 5vw, 7rem);
  align-items: center;
  padding-block: 8rem 3rem;
}
.hero__text { display: flex; flex-direction: column; align-items: flex-start; }

@media (max-width: 1100px) {
  .hero__in { grid-template-columns: 1fr; }
  .hero__stage { display: none; }
}

.hero__tag { color: var(--acc-deep); margin-bottom: 3.2rem; }

.hero__h { margin-bottom: clamp(3.2rem, 5vw, 6rem); }
.hero__h em { font-style: normal; color: var(--acc); }

/* Лид и кнопки — одной колонкой: в узкой левой части героя
   две колонки рвали текст на короткие строки. */
.hero__bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3.2rem;
}

.hero__act { display: flex; flex-wrap: wrap; gap: 1.2rem; }

/* бегущая строка внизу героя */
.ticker {
  position: relative; z-index: 1;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  background: color-mix(in srgb, var(--paper) 70%, transparent);
}
.ticker__row {
  display: flex; gap: 4rem; width: max-content;
  padding: 1.6rem 0;
  animation: slide 38s linear infinite;
}
.ticker__row span {
  font: 500 1.4rem/1 "JetBrains Mono", monospace;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gray);
  white-space: nowrap;
}
.ticker__row i { color: var(--acc); font-style: normal; }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__row { animation: none; } }

/* ── Применения ──────────────────────────────────────────── */

.apps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }

.app {
  position: relative;
  display: grid;
  grid-template-columns: 6ch minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 0 4rem; align-items: center;
  padding: clamp(2.6rem, 3vw, 3.8rem) 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left var(--fast);
}
.app::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 0; z-index: -1;
  background: var(--acc-lite); transition: width var(--fast);
}
.app:hover { padding-left: 2.4rem; }
.app:hover::before { width: 100%; }

.app__n { color: var(--acc-deep); }
.app__t { letter-spacing: -.035em; }
.app__d { font-size: 1.65rem; color: var(--gray); max-width: 44ch; }
.app__m { color: var(--gray-2); white-space: nowrap; }

@media (max-width: 900px) {
  .app { grid-template-columns: 6ch 1fr; gap: .8rem 2rem; align-items: start; }
  .app__d, .app__m { grid-column: 2; }
}

/* ── Процесс ─────────────────────────────────────────────── */

.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(3rem, 4vw, 6rem) clamp(3rem, 5vw, 9rem);
}
@media (max-width: 720px) { .steps { grid-template-columns: 1fr; } }

.step { position: relative; padding-top: 4rem; border-top: 2px solid var(--ink); }
.step__n {
  position: absolute; top: -1.4rem; left: 0;
  padding-right: 1.2rem; background: var(--paper-2);
  font: 500 1.3rem/1 "JetBrains Mono", monospace;
  letter-spacing: .12em; color: var(--acc-deep);
}
.step h3 { margin-bottom: 1.2rem; font-size: clamp(2.2rem, 2.8vw, 3.4rem); }
.step p { font-size: 1.75rem; color: var(--gray); max-width: 46ch; }

/* ── Отзывы ──────────────────────────────────────────────── */

.rev-head {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 3rem;
}

.rev-score {
  display: flex; align-items: center; gap: 1.6rem;
  padding: 1.6rem 2.4rem;
  border: 1px solid var(--line); border-radius: 100px;
  transition: border-color var(--fast), transform var(--fast);
}
.rev-score:hover { border-color: var(--ink); transform: translateY(-.4rem); }
.rev-score__v {
  font-family: "Unbounded", sans-serif; font-weight: 700;
  font-size: 3.6rem; letter-spacing: -.05em; line-height: 1;
}
.rev-score__t { font-size: 1.4rem; line-height: 1.3; color: var(--gray); }

/* Плитка отзывов: колоночная раскладка заполняет высоту плотно,
   без дыр, которые оставляет grid при карточках разной высоты. */
.revs { columns: 3; column-gap: 2.8rem; }
@media (max-width: 1240px) { .revs { columns: 2; } }
@media (max-width: 760px)  { .revs { columns: 1; } }

.rev {
  position: relative;
  break-inside: avoid;
  display: flex; flex-direction: column; gap: 2.2rem;
  margin-bottom: 2.8rem;
  padding: 3.8rem;
  border: 1px solid var(--line); border-radius: 2.8rem;
  background: var(--paper);
  overflow: hidden;
  transition: transform var(--fast), box-shadow var(--fast), border-color var(--fast);
}
.rev::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--acc); transform: scaleY(0); transform-origin: bottom;
  transition: transform var(--fast);
}
.rev:hover {
  transform: translateY(-.6rem); border-color: transparent;
  box-shadow: 0 3rem 6rem -2.6rem rgba(16,16,16,.3);
}
.rev:hover::before { transform: scaleY(1); transform-origin: top; }

.rev--dark { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.rev--dark .rev__meta { color: var(--gray-2); }
.rev--acc  { background: var(--acc-lite); border-color: transparent; }
.rev--lg p { font-size: clamp(1.9rem, 1.5vw, 2.2rem); line-height: 1.38; font-weight: 500; }

.rev__st { display: flex; gap: .4rem; color: var(--acc); }
.rev__st svg { width: 1.9rem; height: 1.9rem; }
.rev--dark .rev__st { color: var(--acc); }

.rev p { font-size: 1.85rem; line-height: 1.55; }

.rev__who { display: flex; align-items: center; gap: 1.5rem; margin-top: auto; padding-top: .6rem; }
.rev__ava {
  flex: none; width: 4.8rem; height: 4.8rem; border-radius: 1.5rem;
  display: grid; place-items: center;
  font: 700 1.9rem/1 "Manrope", sans-serif; color: #fff;
}
.rev__name { font-weight: 600; font-size: 1.7rem; }
.rev__meta { font-size: 1.45rem; color: var(--gray-2); }

.rev__img { margin: .6rem -3.8rem -3.8rem; aspect-ratio: 4/3; overflow: hidden; background: var(--paper-2); }
.rev__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--spring); }
.rev:hover .rev__img img { transform: scale(1.05); }

/* ── CTA ─────────────────────────────────────────────────── */

.cta { display: grid; gap: 2.4rem; justify-items: start; }
.cta__h em { font-style: normal; color: var(--acc); }
.cta__p { max-width: 52ch; color: var(--ink-2); }

/* ── Подвал ──────────────────────────────────────────────── */

.ftr { padding-block: 6rem 3.2rem; border-top: 1px solid var(--line); }
.ftr__top {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 2.4rem;
  padding-bottom: 4rem;
}
.ftr__nav { display: flex; flex-wrap: wrap; gap: 2.8rem; }
.ftr__nav a { font-size: 1.6rem; color: var(--gray); transition: color var(--fast); }
.ftr__nav a:hover { color: var(--ink); }
.ftr__bottom {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1.2rem 2.4rem;
  padding-top: 2.4rem; border-top: 1px solid var(--line);
  font-size: 1.4rem; color: var(--gray-2);
}

/* Справа висит кнопка чата - оставляем ей место, иначе она
   накрывает подпись разработчика. */
@media (min-width: 621px) {
  .ftr__bottom { padding-right: 15rem; }
}

/* подпись разработчика */
.by {
  display: inline-flex; align-items: center; gap: 1rem;
  color: var(--gray-2); text-decoration: none;
  transition: color var(--fast), opacity var(--fast);
}
.by img {
  display: block; height: 1.4rem; width: auto;
  opacity: .72;
  transition: opacity var(--fast);
}
.by:hover { color: var(--ink); }
.by:hover img { opacity: 1; }

/* ── Внутренние страницы ─────────────────────────────────── */

.page-top { padding-top: clamp(14rem, 18vh, 20rem); }
.page-top .head__tag { margin-bottom: 2rem; }
.page-top h1 { margin-bottom: 2.8rem; }
.page-top__lead { max-width: 56ch; }
.page-top__stats { margin-top: clamp(4rem, 6vw, 7rem); }

.page-cta { display: flex; justify-content: center; margin-top: clamp(4rem, 6vw, 7rem); }

/* ── Статистика ──────────────────────────────────────────── */

.stats { display: flex; flex-wrap: wrap; gap: clamp(3rem, 5vw, 7rem); }
.stat__v {
  font-family: "Unbounded", sans-serif;
  font-weight: 700;
  font-size: clamp(3rem, 4vw, 5rem);
  letter-spacing: -.045em; line-height: 1;
}
.stat__l { margin-top: .9rem; font-size: 1.5rem; color: var(--gray); }
.stat__u { font-size: .5em; color: var(--gray-2); letter-spacing: 0; }

.hero__lead { max-width: 48ch; }
.logo--ftr 
/* ── Витрина 3D-сборок ───────────────────────────────────── */

/* Отдельный контейнер-прибор: рамка, шапка с номером, подпись
   и переключатель. Модель живёт внутри и не растекается по герою. */
.stage {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r);
  /* Непрозрачно: контейнер стоит поверх схемы-фона, и просвечивающие
     сквозь прибор дорожки читались как грязь на модели. */
  background: var(--paper);
  box-shadow:
    0 .1rem 0 rgba(255, 255, 255, .9) inset,
    0 2.4rem 6rem -3rem rgba(18, 19, 15, .38),
    0 .4rem 1.6rem -1rem rgba(18, 19, 15, .12);
  overflow: hidden;
  outline: none;
}

/* Поле просмотра: лёгкий хаки, полупрозрачный — сквозь него
   виден фон-схема, и витрина не выглядит наклейкой. */
.stage__view::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(110% 80% at 50% 6%,
      color-mix(in srgb, var(--acc) 18%, transparent) 0%,
      color-mix(in srgb, var(--acc) 30%, transparent) 52%,
      color-mix(in srgb, var(--acc) 44%, transparent) 100%);
  pointer-events: none;
}
.stage:focus-visible { border-color: var(--acc); }

/* шапка прибора */
.stage__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.4rem 2rem;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 72%, transparent);
  font-size: 1.2rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.stage__tag { color: var(--acc-deep); }
.stage__num { color: var(--gray-2); font-variant-numeric: tabular-nums; }

/* поле просмотра */
.stage__view {
  position: relative;
  padding: 1.2rem;
}

.stage__model {
  position: relative; z-index: 1;   /* над световым конусом .stage__view::before */
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 64svh;
  cursor: grab;
  touch-action: none;          /* тянем модель, а не страницу */
  opacity: 0;
  transition: opacity 1.1s var(--spring);
}
.stage__model.is-ready { opacity: 1; }
.stage__model.is-drag { cursor: grabbing; }
.stage__model canvas { display: block; width: 100%; height: 100%; }

/* модель не загрузилась — витрину убираем целиком, дыру не показываем */
.stage:has(.stage__model.is-failed) { display: none; }

.stage__badge {
  position: absolute; z-index: 2; top: 2.4rem; left: 2.4rem;
  padding: .5rem 1.1rem;
  border-radius: 10rem;
  background: var(--acc-lite);
  color: var(--acc-deep);
  font-size: 1.2rem; letter-spacing: .08em;
}

/* подвал: подпись слева, переключатель справа */
.stage__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.8rem 2rem;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 72%, transparent);
}

.stage__name {
  margin: 0;
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.25;
}
.stage__spec {
  margin: .4rem 0 0;
  font-size: 1.25rem;
  color: var(--gray);
}

.stage__more {
  display: inline-flex; align-items: center; gap: .6rem;
  margin-top: 1rem;
  font-size: 1.2rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--acc-deep); text-decoration: none;
  transition: gap var(--fast), color var(--fast);
}
.stage__more:hover { gap: 1.2rem; color: var(--ink); }

.stage__nav { display: flex; align-items: center; gap: 1.2rem; flex-shrink: 0; }

.nub {
  width: 3.6rem; height: 3.6rem;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  font-size: 1.5rem;
  cursor: pointer;
  transition: background var(--fast), color var(--fast), border-color var(--fast);
}
.nub:hover { background: var(--acc); border-color: var(--acc); color: #fff; }

.dots { display: flex; gap: .7rem; }
.dot {
  width: .8rem; height: .8rem; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--line);
  cursor: pointer;
  transition: background var(--fast), transform var(--fast);
}
.dot:hover { background: var(--gray-2); }
.dot.is-on { background: var(--acc); transform: scale(1.35); }

/* одна модель — переключать нечего */
.stage.is-single .stage__nav,
.stage.is-single .stage__num { display: none; }

/* ── О нас ─────────────────────────────────────────────────
   Светлый разворот: слева фотография во всю высоту блока,
   справа текст и пары «что — как». Тёмная полоса с крупным
   заголовком и рядом цифр повторяла соседние секции. */

.ab2 {
  background: var(--paper);
  color: var(--ink);
  padding-block: clamp(4.5rem, 6vw, 8rem);
}

.ab2__grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(2.6rem, 4vw, 5.5rem);
  align-items: stretch;
}
@media (max-width: 900px) {
  .ab2__grid { grid-template-columns: 1fr; }
}

/* ── фотография ── */

.ab2__shot {
  position: relative;
  margin: 0;
  border-radius: 1.6rem;
  overflow: hidden;
  background: var(--ink-2);
  min-height: 34rem;
}

.ab2__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 900px) {
  .ab2__shot { min-height: 0; aspect-ratio: 4 / 3; }
}

.ab2__shot figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 5rem 1.8rem 1.6rem;
  background: linear-gradient(transparent, rgba(8, 9, 6, .88) 62%);
  font-size: 1.4rem;
  color: var(--paper);
}

/* ── правая колонка ── */

.ab2__side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.ab2__tag {
  margin: 0 0 1.6rem;
  font-size: 1.25rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand);
}

.ab2__h {
  margin: 0 0 1.8rem;
  font-family: "Unbounded", sans-serif;
  font-weight: 700;
  font-size: clamp(2.6rem, 3.6vw, 4.2rem);
  line-height: 1.08;
  letter-spacing: -.045em;
}

.ab2__lead {
  margin: 0 0 clamp(2.4rem, 3vw, 3.4rem);
  max-width: 48ch;
  font-size: 1.6rem;
  line-height: 1.6;
  color: #4a4a42;
}

/* Пары «что — как» вместо полосы с цифрами: числа живут внутри
   строк, а не выставлены отдельной витриной. */
.ab2__list {
  margin: 0 0 clamp(2.4rem, 3vw, 3.2rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: #ddddd2;
  border-block: 1px solid #ddddd2;
  width: 100%;
}
@media (max-width: 620px) {
  .ab2__list { grid-template-columns: 1fr; }
}

.ab2__list > div {
  padding: 1.8rem 1.8rem 2rem;
  background: var(--paper);
}

.ab2__list dt {
  margin-bottom: .7rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 1.2rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand);
}

.ab2__list dd {
  margin: 0;
  font-size: 1.45rem;
  line-height: 1.5;
  color: #35352f;
}

.ab2__link {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  padding: 1.15rem 2.2rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 1.45rem;
  text-decoration: none;
  transition: gap var(--fast), background var(--fast);
}

.ab2__link:hover {
  gap: 1.5rem;
  background: var(--brand);
}

/* ── живой знак: заряд и разряд ──────────────────────────────
   Батарея наполняется снизу вверх, держит полный заряд, потом
   садится — и трясётся именно в момент разрядки, пока полоски
   гаснут одна за другой. Цикл 5 секунд.

   Анимация на CSS, а не на скрипте: знак стоит в пяти местах
   (шапка, подвал, чат, заставка, CRM), и скрипту пришлось бы
   искать их все. */

/* Цвет идёт от заряда: полная — салатовая, садится — жёлтая,
   на нуле — красная. currentColor оставляем для корпуса. */
@keyframes cell-low {
   0%        { opacity: .16; background: var(--chg); }
   6%, 52%   { opacity: 1;   background: var(--chg); }
  62%        { opacity: 1;   background: var(--chg-mid); }
  72%        { opacity: 1;   background: var(--chg-low); }
  80%, 100%  { opacity: .16; background: var(--chg); }
}

@keyframes cell-mid {
   0%, 10%   { opacity: .16; background: var(--chg); }
  18%, 44%   { opacity: 1;   background: var(--chg); }
  54%        { opacity: 1;   background: var(--chg-mid); }
  64%, 100%  { opacity: .16; background: var(--chg); }
}

@keyframes cell-top {
   0%, 20%   { opacity: .16; background: var(--chg); }
  28%, 38%   { opacity: 1;   background: var(--chg); }
  48%, 100%  { opacity: .16; background: var(--chg); }
}

/* Тряска ровно на разрядке: с 48% (гаснет верхняя) по 80%
   (погасла нижняя). Дальше знак стоит спокойно. */
@keyframes cell-shake {
   0%, 47%   { transform: translate(0, 0) rotate(0); }
  50%        { transform: translate(-.4px, .3px) rotate(-1deg); }
  54%        { transform: translate(.4px, -.3px) rotate(1deg); }
  58%        { transform: translate(-.5px, .2px) rotate(-1.3deg); }
  62%        { transform: translate(.5px, -.2px) rotate(1.3deg); }
  66%        { transform: translate(-.5px, .3px) rotate(-1.3deg); }
  70%        { transform: translate(.4px, -.3px) rotate(1deg); }
  74%        { transform: translate(-.3px, .2px) rotate(-.7deg); }
  78%        { transform: translate(.2px, -.1px) rotate(.4deg); }
  82%, 100%  { transform: translate(0, 0) rotate(0); }
}

/* Цвета заряда. По умолчанию — тёмные: логотип стоит на светлой
   шапке и в подвале, там нужен контраст с бумагой. */
.logo__cell {
  --chg:     #4d7c0f;   /* полный заряд */
  --chg-mid: #b45309;   /* садится */
  --chg-low: #b91c1c;   /* на нуле */
  animation: cell-shake 5s ease-in-out infinite;
}

/* Полоски снизу вверх: последняя в разметке — нижняя. */
.logo__cell i:nth-child(3) { animation: cell-low 5s ease-in-out infinite; }
.logo__cell i:nth-child(2) { animation: cell-mid 5s ease-in-out infinite; }
.logo__cell i:nth-child(1) { animation: cell-top 5s ease-in-out infinite; }

/* Прежняя заливка нижней полоски мешала бы смене цвета. */
.logo__cell i:last-child { background: var(--chg); }

/* Кому движение мешает — знак просто стоит полным. */
@media (prefers-reduced-motion: reduce) {
  .logo__cell,
  .logo__cell i { animation: none; opacity: 1; }
}

/* На тёмных полотнах тёмный заряд сливается — берём светлые. */
.sect--dark .logo__cell,
.ld .logo__cell,
.lchat__mark {
  --chg:     #c6f24e;
  --chg-mid: #fbbf24;
  --chg-low: #f87171;
}