/* ═══════════════════════════════════════════════════════════════════════
   FAN CALL — витрина fancall.app

   Четыре условия, из которых вырос этот файл:

   1. Палитра один в один из src/components/green.ts. Красного (G.drop)
      здесь НЕТ: он занят «обрывом связи» на пейволе, и второе место
      его обесценит (DESIGN-SYSTEM.md, § 3.5).

   2. Ни одного запроса наружу. Шрифты системные, картинок нет, всё
      нарисовано вектором прямо в разметке. Ни одной внешней ссылки —
      и в комментариях тоже: проверка ищет их грепом, а греп не умеет
      отличать пример от настоящей ссылки.

   3. Ни строчки JS — в nginx стоит script-src 'none'. Движение сделано
      на CSS целиком.

   4. ⚠️ ГЛАВНОЕ ПРАВИЛО ДВИЖЕНИЯ: ни одна анимация не имеет права
      спрятать текст. Скролл-анимации стоят с fill-mode FORWARDS, а не
      both, и начинаются с `cover 0%` — то есть ровно в тот момент, когда
      блок ещё за нижним краем экрана. Пока анимация не началась (и если
      таймлайн вообще не заработал — старый браузер, фоновая вкладка,
      сломанный компоновщик), у элемента действует ОБЫЧНЫЙ стиль, и он
      просто виден. Спрятать страницу эта конструкция не может
      физически. Всё, что должно жить постоянно — волна, точки, нити —
      сделано бесконечными анимациями и от прокрутки не зависит вовсе.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --bg:     #071410;
  --mint:   #31E39C;
  --deep:   #0FA36B;
  --paper:  #EAF6F0;
  --mist:   rgba(234, 246, 240, .55);
  --faint:  rgba(234, 246, 240, .34);
  --line:   rgba(234, 246, 240, .13);
  --line2:  rgba(234, 246, 240, .26);
  --onMint: #04150E;
  --lift:   #0C1F19;

  --pad: 22px;
  --max: 1160px;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --out: cubic-bezier(.23, 1, .32, 1);
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* волна в герое уходит в оба края экрана; clip убирает боковую
     прокрутку, не делая корень контейнером прокрутки */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* та же мятная дымка, что стоит за кругом на экране звонка */
  background-image:
    radial-gradient(108% 50% at 46% -8%, rgba(49, 227, 156, .16), transparent 62%),
    radial-gradient(64% 38% at 92% 26%, rgba(15, 163, 107, .09), transparent 72%);
  background-repeat: no-repeat;
}

/* редкая вертикальная сетка «пульта»: глубина без единой картинки */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(234, 246, 240, .022) 0 1px, transparent 1px 88px);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .8), transparent 58%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .8), transparent 58%);
}

header, main, footer { position: relative; z-index: 1; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 3px;
  border-radius: 8px;
}

/* ── шапка ─────────────────────────────────────────────────────── */

.bar {
  max-width: var(--max);
  margin: 0 auto;
  padding: 26px var(--pad) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--paper);
}

.mark .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 4px rgba(49, 227, 156, .14);
}

.bar-link {
  font-size: 15px;
  color: var(--mist);
  text-decoration: none;
  padding: 8px 2px;
  border-bottom: 1px solid transparent;
  transition: color .2s var(--out), border-color .2s var(--out);
}
.bar-link:hover { color: var(--paper); border-bottom-color: var(--mint); }

/* ── общий каркас ──────────────────────────────────────────────── */

main {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}

main > section { padding-top: clamp(78px, 12vw, 138px); }

.kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--faint);
}

.kicker .live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mint);
  flex: none;
}

h1 {
  margin: 0;
  font-size: clamp(30px, 5.6vw, 54px);
  line-height: 1.06;
  letter-spacing: -0.032em;
  font-weight: 700;
}

h1 em, .band-text em, .viz figcaption em {
  font-style: normal;
  color: var(--mint);
}

.big {
  margin: 0 0 34px;
  font-size: clamp(25px, 4.2vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.028em;
  font-weight: 700;
}

h3 {
  margin: 0 0 9px;
  font-size: 19px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.012em;
}

/* ── герой ─────────────────────────────────────────────────────── */

.hero { padding-top: clamp(44px, 7vw, 76px); }

.lead {
  margin: 26px 0 0;
  max-width: 44ch;
  font-size: clamp(17px, 2vw, 19px);
  line-height: 1.62;
  color: var(--mist);
}

.cta {
  margin-top: 36px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 22px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 0 32px;
  border-radius: 999px;
  background: var(--mint);
  color: var(--onMint);
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 10px 30px -12px rgba(49, 227, 156, .55);
  transition: background .2s var(--out), transform .2s var(--out), box-shadow .2s var(--out);
}
.btn:active { background: var(--deep); transform: translateY(1px) scale(.99); }

.btn-note {
  font-size: 14px;
  line-height: 1.45;
  color: var(--faint);
}

/* карточка «экран звонка» — то, что увидит перешедший по ссылке */

.phone-wrap { margin: 44px 0 0; }

.phone {
  /* на узком экране карточка занимает всю колонку (зазор справа читался бы
     как недоделка), но шире 340 не растёт: это макет ТЕЛЕФОНА, и на планшете
     растянутый на 688 «телефон» выглядит поломкой */
  max-width: min(100%, 340px);
  padding: 24px 22px 26px;
  border: 1px solid var(--line2);
  border-radius: 34px;
  background:
    radial-gradient(100% 62% at 50% 0%, rgba(49, 227, 156, .12), transparent 64%),
    var(--lift);
  box-shadow: 0 30px 70px -40px #000;
  text-align: center;
}

.p-label {
  margin: 0 0 22px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--faint);
}

.ava {
  position: relative;
  width: 104px;
  height: 104px;
  margin: 0 auto 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(49, 227, 156, .4);
  background: rgba(49, 227, 156, .07);
}

.ava .ring {
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid rgba(49, 227, 156, .5);
}

.ava-letter {
  font-size: 34px;
  font-weight: 600;
  color: var(--mint);
  letter-spacing: -0.02em;
}

.p-name { margin: 0 0 3px; font-size: 21px; font-weight: 650; letter-spacing: -0.02em; }
.p-sub  { margin: 0 0 18px; font-size: 14px; color: var(--mist); }

.mini { display: block; width: 100%; height: 34px; margin: 0 0 20px; }
.mini .wave-bars rect { fill: rgba(49, 227, 156, .5); }

.p-btn {
  margin: 0 0 12px;
  padding: 13px 0;
  border-radius: 999px;
  background: var(--mint);
  color: var(--onMint);
  font-size: 16px;
  font-weight: 650;
}

.p-hint { margin: 0; font-size: 12px; color: var(--faint); }

.phone-cap {
  margin: 14px 2px 0;
  max-width: 296px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .05em;
  color: var(--faint);
}

.hero-wave {
  /* уходит в оба края экрана: линия не кончается вместе с текстом */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: clamp(46px, 7vw, 78px);
}

.wave { display: block; width: 100%; height: clamp(56px, 8vw, 100px); }
.hero-wave .wave-bars rect { fill: rgba(49, 227, 156, .3); }

/* ── беда ──────────────────────────────────────────────────────── */

.band-text { display: grid; gap: 20px; max-width: 62ch; }

.band-text p {
  margin: 0;
  font-size: clamp(17px, 1.9vw, 19px);
  line-height: 1.62;
  color: var(--mist);
}

/* ── картинка «лента → дорожка» ────────────────────────────────── */

.viz {
  margin: 0;
  padding: 24px 16px 20px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background:
    radial-gradient(76% 120% at 80% 50%, rgba(49, 227, 156, .07), transparent 62%),
    var(--lift);
  overflow: hidden;
}

/* ⚠️ display НЕ ставим на `.viz svg` — этот селектор (0,1,1) сильнее,
   чем `.viz-wide` (0,1,0), и переключение вариантов по ширине не
   срабатывало: на широком экране рисовались ОБА. Держим display
   только на самих вариантах, специфичность у них одинаковая, решает
   порядок правил. */
.viz svg { width: 100%; height: auto; }
.viz-wide { display: none; }
.viz-tall { display: block; }

.feed circle { fill: rgba(234, 246, 240, .17); }
.feed rect   { fill: rgba(234, 246, 240, .10); }

.threads path { fill: none; stroke: rgba(49, 227, 156, .17); stroke-width: 1.1; }

/* поверх бледных нитей бежит мятный импульс: это и есть «поток» */
.flow path { stroke: var(--mint); stroke-width: 1.5; }

.spill { fill: none; stroke: var(--mint); stroke-width: 1.6; }

/* узкая сцена рисуется в масштабе примерно 0,83 — линии в 1 пиксель на ней
   истончаются до невидимости, поэтому здесь они толще НАРОЧНО */
.viz-tall .threads path { stroke-width: 1.5; }
.viz-tall .flow path { stroke-width: 2.1; }

.knot-ring { fill: none; stroke: rgba(49, 227, 156, .4); stroke-width: 1; }
.knot-core { fill: var(--mint); }

.viz .wave-bars rect { fill: rgba(49, 227, 156, .9); }

.cap {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  fill: var(--faint);
}
.cap-r { text-anchor: end; }

.viz figcaption {
  margin: 22px 6px 0;
  max-width: 60ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--mist);
}

.chips {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(12, 31, 25, .72);
  transition: border-color .2s var(--out), transform .2s var(--out);
}

.chip b { font-size: 15px; font-weight: 600; }
.chip span { font-size: 13px; color: var(--faint); }

/* ── три шага ──────────────────────────────────────────────────── */

.steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }

.steps li {
  background: var(--lift);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 26px 24px;
  transition: border-color .25s var(--out), transform .25s var(--out);
}

.steps .n {
  display: block;
  margin-bottom: 18px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .16em;
  color: var(--mint);
  font-variant-numeric: tabular-nums;
}

.steps p, .card p { margin: 0; color: var(--mist); font-size: 16px; line-height: 1.55; }

/* ── карточки ──────────────────────────────────────────────────── */

.cards { display: grid; gap: 14px; }

.card {
  background: var(--lift);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 26px 24px;
  transition: border-color .25s var(--out), transform .25s var(--out);
}

/* главная из шести — та, ради которой всё затевалось */
.card-lead {
  border-color: rgba(49, 227, 156, .3);
  background:
    linear-gradient(152deg, rgba(49, 227, 156, .1), transparent 56%),
    var(--lift);
}
.card-lead h3 { font-size: 22px; }

/* ── вопросы ───────────────────────────────────────────────────── */

.faq { max-width: 76ch; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }

.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 2px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.012em;
  transition: color .2s var(--out);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--mint); }

/* шеврон нарисован бордюрами: ни картинки, ни шрифта со значками */
.faq summary i {
  flex: none;
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border-right: 1.5px solid var(--mint);
  border-bottom: 1.5px solid var(--mint);
  transform: rotate(45deg);
  transition: transform .25s var(--out);
}
.faq details[open] summary i { transform: rotate(-135deg); }

.faq details p {
  margin: 0 0 24px;
  max-width: 64ch;
  font-size: 16px;
  line-height: 1.65;
  color: var(--mist);
}

/* ── хвост ─────────────────────────────────────────────────────── */

.tail {
  margin-top: clamp(78px, 12vw, 138px);
  padding: clamp(40px, 7vw, 68px) 24px clamp(44px, 7vw, 70px);
  border: 1px solid rgba(49, 227, 156, .26);
  border-radius: 30px;
  background:
    radial-gradient(88% 130% at 50% 0%, rgba(49, 227, 156, .11), transparent 62%),
    var(--lift);
  text-align: center;
}

.tail-line {
  margin: 0 0 14px;
  font-size: clamp(23px, 3.6vw, 36px);
  line-height: 1.16;
  letter-spacing: -0.028em;
  font-weight: 700;
}

.tail-sub { margin: 0 auto 30px; max-width: 44ch; font-size: 16px; color: var(--mist); }

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

footer {
  max-width: var(--max);
  margin: clamp(64px, 10vw, 104px) auto 0;
  padding: 28px var(--pad) 52px;
  border-top: 1px solid var(--line);
}

.legal { display: flex; flex-wrap: wrap; gap: 12px 24px; }

.legal a {
  font-size: 15px;
  color: var(--mist);
  text-decoration: none;
  transition: color .2s var(--out);
}
.legal a:hover { color: var(--paper); }

.fine { margin: 22px 0 0; font-size: 13px; line-height: 1.65; color: rgba(234, 246, 240, .32); }
.fine a { color: var(--mist); }

/* ═══ ШИРОКИЙ ЭКРАН ══════════════════════════════════════════════ */

@media (min-width: 760px) {
  :root { --pad: 40px; }

  .viz-wide { display: block; }
  .viz-tall { display: none; }
  .viz { padding: 28px 26px 24px; }

  .steps { gap: 18px; }
  .cards { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .chips { gap: 12px; }
  .cta { gap: 16px 26px; }
}

@media (min-width: 900px) {
  /* три шага встают в ряд только здесь: на 768 колонка выходила 217 точек,
     и в неё влезало по три слова в строку */
  .steps { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1000px) {
  /* герой становится разворотом: слева обещание, справа сам экран */
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 296px;
    column-gap: 56px;
    align-items: center;
  }
  .hero-text { grid-column: 1; }
  .phone-wrap { grid-column: 2; margin: 0; }
  .phone { max-width: 296px; }
  .hero-wave { grid-column: 1 / -1; }
}

@media (min-width: 1060px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

/* ═══ НАВЕДЕНИЕ — только там, где есть настоящая мышь ═══════════ */

@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    background: #5AEEB5;
    transform: translateY(-2px);
    box-shadow: 0 16px 38px -14px rgba(49, 227, 156, .68);
  }
  .card:hover, .steps li:hover { border-color: var(--line2); transform: translateY(-3px); }
  .card-lead:hover { border-color: rgba(49, 227, 156, .5); }
  .chip:hover { border-color: rgba(49, 227, 156, .4); transform: translateY(-2px); }
}

/* ═══ ДВИЖЕНИЕ ═════════════════════════════════════════════════ */

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

@keyframes breathe {
  0%, 100% { transform: scaleY(.5); }
  50%      { transform: scaleY(1); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(.72); opacity: .55; }
}

@keyframes ping {
  from { transform: scale(.9);  opacity: .8; }
  to   { transform: scale(1.5); opacity: 0; }
}

/* импульс, бегущий по нити от реплики к узлу */
@keyframes flow { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: no-preference) {

  /* вход героя — одна оркестрованная волна сверху вниз */
  .h-1, .h-2, .h-3, .h-4, .h-5, .h-6 { animation: rise .85s var(--out) backwards; }
  .h-1 { animation-delay: .05s; }
  .h-2 { animation-delay: .13s; }
  .h-3 { animation-delay: .23s; }
  .h-4 { animation-delay: .33s; }
  .h-5 { animation-delay: .40s; animation-duration: 1s; }
  .h-6 { animation-delay: .5s;  animation-duration: 1.1s; }

  /* линия живая: бегущий пульс по столбикам волны */
  .wave-bars rect {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: breathe 2.6s ease-in-out infinite;
  }
  .wave-bars rect:nth-child(8n+1) { animation-delay: 0.0s; }
  .wave-bars rect:nth-child(8n+2) { animation-delay: -0.325s; }
  .wave-bars rect:nth-child(8n+3) { animation-delay: -0.65s; }
  .wave-bars rect:nth-child(8n+4) { animation-delay: -0.975s; }
  .wave-bars rect:nth-child(8n+5) { animation-delay: -1.3s; }
  .wave-bars rect:nth-child(8n+6) { animation-delay: -1.625s; }
  .wave-bars rect:nth-child(8n+7) { animation-delay: -1.95s; }
  .wave-bars rect:nth-child(8n+8) { animation-delay: -2.275s; }

  /* точки в шапке и в надкидке дышат в том же такте */
  .mark .dot, .kicker .live { animation: pulse 2.6s ease-in-out infinite; }

  /* круг «звоним» — знакомая расходящаяся волна вокруг аватара */
  .ava .ring { animation: ping 2.4s var(--out) infinite; }

  /* узел, в котором сходятся реплики, отбивает тот же такт */
  .knot-ring {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: ping 2.6s var(--out) infinite;
  }

  /* поток: по каждой нити бежит короткий мятный импульс */
  .flow path, .spill {
    stroke-dasharray: .22 .78;
    animation: flow 2.8s linear infinite;
  }
  .viz-wide .flow path:nth-child(1) { animation-delay: 0.0s; }
    .viz-wide .flow path:nth-child(2) { animation-delay: -0.215s; }
    .viz-wide .flow path:nth-child(3) { animation-delay: -0.431s; }
    .viz-wide .flow path:nth-child(4) { animation-delay: -0.646s; }
    .viz-wide .flow path:nth-child(5) { animation-delay: -0.862s; }
    .viz-wide .flow path:nth-child(6) { animation-delay: -1.077s; }
    .viz-wide .flow path:nth-child(7) { animation-delay: -1.292s; }
    .viz-wide .flow path:nth-child(8) { animation-delay: -1.508s; }
    .viz-wide .flow path:nth-child(9) { animation-delay: -1.723s; }
    .viz-wide .flow path:nth-child(10) { animation-delay: -1.938s; }
    .viz-wide .flow path:nth-child(11) { animation-delay: -2.154s; }
    .viz-wide .flow path:nth-child(12) { animation-delay: -2.369s; }
    .viz-wide .flow path:nth-child(13) { animation-delay: -2.585s; }
  .viz-tall .flow path:nth-child(1) { animation-delay: 0.0s; }
    .viz-tall .flow path:nth-child(2) { animation-delay: -0.28s; }
    .viz-tall .flow path:nth-child(3) { animation-delay: -0.56s; }
    .viz-tall .flow path:nth-child(4) { animation-delay: -0.84s; }
    .viz-tall .flow path:nth-child(5) { animation-delay: -1.12s; }
    .viz-tall .flow path:nth-child(6) { animation-delay: -1.4s; }
    .viz-tall .flow path:nth-child(7) { animation-delay: -1.68s; }
    .viz-tall .flow path:nth-child(8) { animation-delay: -1.96s; }
    .viz-tall .flow path:nth-child(9) { animation-delay: -2.24s; }
    .viz-tall .flow path:nth-child(10) { animation-delay: -2.52s; }
}

/* ── появление при прокрутке ───────────────────────────────────────
   fill-mode FORWARDS и старт в `cover 0%` — вместе они означают:
   пока анимация не началась, действует обычный стиль и блок ВИДЕН.
   Сломается таймлайн — страница просто перестанет двигаться.       */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    .reveal > .kicker,
    .reveal > .big,
    .band-text p,
    .viz,
    .viz figcaption,
    .tail-line, .tail-sub, .tail .btn,
    .chips .chip,
    .steps li,
    .cards .card,
    .faq details {
      animation: rise linear forwards;
      animation-timeline: view();
      animation-range: cover 0% cover 22%;
    }

    .reveal > .big     { animation-range: cover 1.5% cover 24%; }
    .band-text p:nth-child(2) { animation-range: cover 3% cover 26%; }
    .viz figcaption    { animation-range: cover 2% cover 26%; }
    .tail-sub          { animation-range: cover 3% cover 26%; }
    .tail .btn         { animation-range: cover 5% cover 28%; }

    .steps li:nth-child(1) { animation-range: cover 0.0% cover 22.0%; }
    .steps li:nth-child(2) { animation-range: cover 2.5% cover 24.5%; }
    .steps li:nth-child(3) { animation-range: cover 5.0% cover 27.0%; }
    .cards .card:nth-child(1) { animation-range: cover 0.0% cover 22.0%; }
    .cards .card:nth-child(2) { animation-range: cover 1.4% cover 23.4%; }
    .cards .card:nth-child(3) { animation-range: cover 2.8% cover 24.8%; }
    .cards .card:nth-child(4) { animation-range: cover 4.2% cover 26.2%; }
    .cards .card:nth-child(5) { animation-range: cover 5.6% cover 27.6%; }
    .cards .card:nth-child(6) { animation-range: cover 7.0% cover 29.0%; }
    .chips .chip:nth-child(1) { animation-range: cover 0.0% cover 20.0%; }
    .chips .chip:nth-child(2) { animation-range: cover 1.6% cover 21.6%; }
    .chips .chip:nth-child(3) { animation-range: cover 3.2% cover 23.2%; }
    .chips .chip:nth-child(4) { animation-range: cover 4.8% cover 24.8%; }
    .chips .chip:nth-child(5) { animation-range: cover 6.4% cover 26.4%; }
    .faq details:nth-child(1) { animation-range: cover 0.0% cover 20.0%; }
    .faq details:nth-child(2) { animation-range: cover 1.2% cover 21.2%; }
    .faq details:nth-child(3) { animation-range: cover 2.4% cover 22.4%; }
    .faq details:nth-child(4) { animation-range: cover 3.6% cover 23.6%; }
    .faq details:nth-child(5) { animation-range: cover 4.8% cover 24.8%; }
    .faq details:nth-child(6) { animation-range: cover 6.0% cover 26.0%; }
  }
}

/* ═══ ЯВНЫЙ ЗАПРЕТ ДВИЖЕНИЯ ════════════════════════════════════
   Выключил анимации в системе — получаешь ту же страницу целиком,
   просто неподвижную.                                            */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}