/* ============================================================
   GG Agency — hero «Строим отделы продаж под ключ» (вариант 2)
   Макет Figma 1440×810 (node 2046:2382) + мобильный 391 (2051:2446).

   Адаптация по «📐 Правила адаптации под все экраны»:
   §02 — в каждом clamp() средняя часть содержит rem, иначе размеры
         не реагируют на зум и системный шрифт. Коэффициенты по формуле
         B = (s2−s1)/((W2−W1)/100), A = (s1 − B×W1/100)/16
   §03 — оболочка растёт ступенями: --shell и --up
   §04 — первый экран не привязан к 100vh жёстко, есть правила по высоте
   §05 — низ прибит к низу (margin-top:auto), а не отсчитан от верха
   §10 — text-wrap, ширина текста в ch
   §11 — overflow-x: clip, [hidden] !important, max-content в сетке шапки
   ============================================================ */

:root {
  --bg: #030303;
  --text: #ffffff;
  --text-dim: #f2f2f2;
  --muted: #a8a8ab;

  /* Оттенки шейдера — из панели Originkit */
  --arc-base: #7d0510;
  --arc-accent: #710f11;
  --arc-high: #ac0c0f;

  /* Один шрифт на весь сайт. Раньше в --font-ui первым стоял
     -apple-system: мелкий текст рисовался системным SF, заголовки —
     Onest, и метрики двух шрифтов не совпадали (отсюда «дыры»
     между букв). На Windows подставлялся третий шрифт и вёрстка
     расходилась с макетом. */
  --font-ui: "Onest", system-ui, sans-serif;
  --font-logo: "Onest", system-ui, sans-serif;
  --font-num: "Onest", system-ui, sans-serif;

  /* §03 · Оболочка и множитель для того, что не масштабируется само */
  --shell: 1280px;
  --up: 1;

  /* Шкала мелкого текста — ровно две ступени.
     M = 18px и S = 14px на 1440. Формула §02:
     B = (s2−s1)/((W2−W1)/100), A = (s1 − B×W1/100)/16, W1=360, W2=1440.
     M: 16px@360 → 18px@1440.   S: 13px@360 → 14px@1440. */
  /* H2 — один токен на все блоки. До 1440 прежняя шкала (28->58px),
     выше растёт дальше, до 84px на 3840. Не 2.67x «в пропорцию»:
     4K-монитор смотрят с той же дистанции, что и 1440, и заголовок
     в 155px был бы вывеской. 1.45x — предел, где ещё читается как текст. */
  --fs-h1: clamp(2.5rem, 1.7292rem + 3.4259vw, 4.8125rem);
  --fs-h2: clamp(1.75rem, 1.125rem + 2.7778vw, 3.625rem);
  /* Заголовок второго порядка — на 20% меньше H2 */
  --fs-h3: clamp(1.375rem, 0.875rem + 2.2222vw, 2.875rem);
  --fs-m: clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem);
  --fs-s: clamp(0.8125rem, 0.7917rem + 0.0926vw, 0.875rem);

  /* ---------- Межстрочный и межбуквенный: одна система ----------
     Раньше межстрочный гулял по 25 значениям, межбуквенный — по 18,
     причём вокруг одних и тех же намерений: 1.02 и 1.04 — это одно,
     1.35 / 1.4 / 1.45 — тоже одно. Здесь шесть ступеней и три:
     чем крупнее кегль, тем плотнее строка и отрицательнее трекинг. */
  --lh-flat:   1;      /* кнопки, счётчики — строка в один кегль */
  --lh-head:   1.02;   /* h1 и h2 */
  --lh-title:  1.14;   /* h3, плашки и пилюли */
  --lh-lead:   1.3;    /* крупный текст, 22px и больше */
  --lh-text-m: 1.45;   /* текст M — длинные абзацы во всю колонку */
  --lh-text-s: 1.4;    /* текст S — короткие подписи в карточках */

  --ls-head:  -0.0345em;  /* h1, h2 и крупные цифры */
  --ls-title: -0.01em;    /* h3 и крупный текст */
  --ls-text:  0;          /* весь остальной текст, пилюли, подписи */
  --ls-btn:   0.02em;     /* у кнопок свой строй: капс с лёгкой разрядкой */

  /* Воздух под пилюлей — один на весь сайт */
  --pill-gap: clamp(1rem, 0.8571rem + 0.6095vw, 1.625rem);

  --gutter: clamp(1.25rem, 0.7143rem + 2.2857vw, 5rem);
  /* Один строй для всех кнопок, кроме шапки: 44px на 360, 52 на 1440 */
  --btn-h: clamp(2.75rem, 2.5833rem + 0.7407vw, 3.25rem);
  /* Одна кривая и одна длительность на все выезды. Перелёт держим
     около 0.5% хода — как в эталоне; раньше он гулял от 0 до 7%. */
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
  --dur-in: 0.92s;
}

/* §03 · Ступени для больших мониторов */
@media (min-width: 1600px) { :root { --shell: 1440px; --up: 1.06; } }
@media (min-width: 1920px) { :root { --shell: 1640px; --up: 1.18; } }
@media (min-width: 2400px) { :root { --shell: 1960px; --up: 1.42; } }
@media (min-width: 3000px) { :root { --shell: 2340px; --up: 1.70; } }
@media (min-width: 3600px) { :root { --shell: 2720px; --up: 2.00; } }

* { box-sizing: border-box; }

/* UA-стиль кнопок и полей подставляет свой шрифт (в Chromium — Arial
   13.333px). Из-за этого триггеры аккордеонов, бургер и кнопка плеера
   рисовались не Onest. Наследование возвращает единый шрифт. */
button, input, select, textarea, optgroup {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

/* §11 · clip, а не hidden: hidden ломает sticky у вложенных элементов */
html, body {
  margin: 0;
  padding: 0;
  max-width: 100%;
  overflow-x: clip;
  background: var(--bg);
}

body {
  color: var(--text);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* §11 · атрибут hidden проигрывает display — нужен !important */
[hidden] { display: none !important; }

/* ---------- Фокус с клавиатуры ----------
   Фон почти чёрный, а браузерное кольцо по умолчанию тёмно-синее и
   на нём практически не видно. Задаём собственное: белое кольцо плюс
   тёмная подложка, чтобы читалось и поверх красного, и поверх фото.
   :focus-visible, а не :focus — мышь кольцо не показывает. */
:where(a, button, [tabindex], input, select, textarea, summary):focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
  border-radius: 4px;
  box-shadow: 0 0 0 5px rgba(3, 3, 3, 0.85);
}

/* Элементы, у которых своя геометрия скругления */
.hero__cta:focus-visible,
.nav__cta:focus-visible,
.quiz__cta:focus-visible,
.sheet__cta:focus-visible,
.services-cta:focus-visible { border-radius: 999px; }

.card:focus-visible,
.services-trigger:focus-visible,
.questions-trigger:focus-visible { border-radius: 8px; }

/* Лента скринов — прокручиваемый блок, браузер делает её таб-стопом
   для стрелок. Своего кольца у div нет, а дефолтное синее на чёрном
   не видно, поэтому задаём явно. */
.shots:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -2px;
  border-radius: 8px;
}

/* §10 · типографика без висячих слов */
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* ---------- Каркас ----------
   §04+§05: высота по svh (гарантированно видимая зона в Safari),
   верх и низ прибиты к краям, тянется только середина. */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  overflow: clip;
  background: var(--bg);
}

.hero__glyphs,
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.hero__glyphs { z-index: 0; }

.hero__bg {
  z-index: 1;
  mix-blend-mode: lighten;
}

.nav, .hero__body, .stats { position: relative; z-index: 2; }

/* ---------- Хедер · прибит к верху ---------- */

.nav {
  flex: 0 0 auto;
  display: grid;
  /* §11 · max-content вместо жёсткой колонки — логотип не наезжает */
  grid-template-columns: max-content 1fr max-content;
  align-items: center;
  gap: clamp(0.625rem, 0.2679rem + 1.5238vw, 3rem);
  padding: clamp(1.375rem, 1.1607rem + 0.9143vw, 2.375rem) var(--gutter) 0;
}

.nav__logo {
  color: var(--text);
  font-family: var(--font-logo);
  font-size: var(--fs-m);
  font-weight: 800;
  line-height: var(--lh-lead);
  letter-spacing: -0.0625em;
  text-decoration: none;
  white-space: nowrap;
}

.nav__menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.875rem, 0.6071rem + 1.1429vw, 2.6rem);
}

.nav__menu a {
  position: relative;
  color: var(--text);
  font-size: var(--fs-s);
  font-weight: 300;
  line-height: var(--lh-text-s);
  text-decoration: none;
  white-space: nowrap;
  opacity: 0.92;
  transition: opacity 0.3s ease, text-shadow 0.35s ease;
}

.nav__menu a:hover {
  opacity: 1;
  /* мягкое свечение вместо подчёркивания */
  text-shadow: 0 0 calc(12px * var(--up)) rgba(255, 255, 255, 0.55),
               0 0 calc(28px * var(--up)) rgba(255, 255, 255, 0.25);
}

.nav__cta {
  justify-self: end;
  padding: clamp(0.6875rem, 0.6215rem + 0.2816vw, 1.125rem)
           clamp(1.125rem, 1.0149rem + 0.4695vw, 1.875rem);
  border: 1px solid var(--text);
  border-radius: 999px;
  color: var(--text);
  font-family: var(--font-num);
  font-size: var(--fs-s);
  /* Regular: вторичная кнопка не должна спорить с основной (500) */
  font-weight: 400;
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.26s ease, color 0.26s ease;
}
.nav__cta:hover {
  background: var(--text);
  color: #0e0404;
}

.nav__burger { display: none; }

/* ---------- Середина · единственная тянущаяся зона ---------- */

.hero__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.125rem, 0.8571rem + 1.1429vw, 2.75rem);
  width: 100%;
  max-width: min(var(--shell), 100% - var(--gutter) * 2);
  margin: 0 auto;
  padding: clamp(1.25rem, 1rem + 1.0667vw, 2.5rem) 0;
  text-align: center;
}

.hero__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.875rem, 0.6607rem + 0.9143vw, 1.875rem);
}

/* §02 · Заголовок: 40@375 → 77@1440, потолок 108 на 4K */
.hero__title {
  margin: 0;
  font-family: var(--font-logo);
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
}
.hero__title span { display: block; }

/* §10 · ширину ограничиваем у текста, в ch */
.hero__lead {
  max-width: 52ch;
  margin: 0;
  color: var(--text);
  font-size: clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem);
  font-weight: 300;
  line-height: var(--lh-text-m);
}

/* Кнопка: плашка и круг вплотную */
.hero__cta {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  /* Круг со стрелкой висит справа и утягивал оптический центр влево
     на свою половину. margin сдвигал бы контейнер, но центрирование
     пересчиталось бы с учётом отступа и съело половину эффекта —
     поэтому transform: он не влияет на раскладку. */
  /* Плашка и круг читаются как один объект, поэтому по центру
     встаёт вся пара целиком. Раньше центрировалась только плашка,
     и круг перевешивал композицию вправо. */
  --cta-icon-w: clamp(2.75rem, 2.4643rem + 1.219vw, 4.5rem);
  --cta-shift: 0rem;

  /* §04 · воздух перед кнопкой сверх общего gap блока */
  margin-top: clamp(0.5rem, 0.3214rem + 0.7619vw, 1.5rem);
}

.hero__cta-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.8125rem, 0.7245rem + 0.3756vw, 1.375rem)
           clamp(1.25rem, 1.0714rem + 0.7619vw, 2.375rem);
  background: #fff;
  border-radius: 999px;
  color: #0e0404;
  font-family: var(--font-ui);
  font-size: var(--fs-s);
  font-weight: 500;
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
  white-space: nowrap;
}

.hero__cta-icon {
  display: grid;
  place-items: center;
  width: var(--cta-icon-w);
  height: clamp(2.5rem, 2.2857rem + 0.9143vw, 3.875rem);
  background: #fff;
  border-radius: 999px;
  color: #0e0404;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero__cta-icon svg {
  width: clamp(0.625rem, 0.5714rem + 0.2286vw, 1rem);
  height: clamp(0.625rem, 0.5714rem + 0.2286vw, 1rem);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero__cta:hover .hero__cta-icon svg { transform: translate(2px, -2px); }

/* ---------- Цифры · прибиты к низу (§05) ---------- */

.stats {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  /* margin-top:auto прижимает к низу, а не отсчитывает от верха */
  margin-top: auto;
  padding: 0 var(--gutter)
           calc(clamp(1.25rem, 1.0714rem + 0.7619vw, 2.75rem)
                + env(safe-area-inset-bottom, 0px));
}

.stats__inner {
  position: relative;
  display: flex;
  gap: clamp(1.75rem, 0.1429rem + 6.8571vw, 13.125rem);
  padding: clamp(0.875rem, 0.7857rem + 0.381vw, 1.5rem)
           clamp(1.25rem, 1.0714rem + 0.7619vw, 2.5rem);
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: calc(10px * var(--up));
  box-shadow: inset 0 0 calc(68px * var(--up)) 0 rgba(255, 255, 255, 0.05);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: clamp(0.375rem, 0.3304rem + 0.1905vw, 0.75rem);
}

.stat__value {
  color: var(--text);
  font-family: var(--font-num);
  font-size: clamp(1.625rem, 1.3169rem + 1.3146vw, 3.25rem);
  font-weight: 400;
  line-height: var(--lh-flat);
  letter-spacing: var(--ls-head);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* §10 · подпись всегда в две строки: ширина в ch, не в px */
.stat__label {
  max-width: 19ch;
  color: var(--text-dim);
  font-size: clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem);
  font-weight: 300;
  line-height: var(--lh-text-m);
}

/* ---------- Появление ---------- */

.nav, .hero__title span, .hero__lead, .hero__cta, .stats__inner {
  opacity: 0;
  animation: rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.nav               { animation-delay: 0.05s; }
.hero__title span:nth-child(1) { animation-delay: 0.18s; }
.hero__title span:nth-child(2) { animation-delay: 0.30s; }
.hero__lead        { animation-delay: 0.42s; }
.hero__cta         { animation-name: riseCta; animation-delay: 0.52s; }
.stats__inner      { animation-delay: 0.62s; }

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

/* У кнопки свой сдвиг по X — обычный rise его стирал,
   поэтому отдельная анимация с сохранением translateX. */
@keyframes riseCta {
  from { opacity: 0; transform: translate(var(--cta-shift), 1rem); }
  to   { opacity: 1; transform: translate(var(--cta-shift), 0); }
}

/* ============================================================
   §04 · Низкие экраны: vw не знает про высоту
   ============================================================ */

@media (min-width: 901px) and (max-height: 820px) {
  .hero__body { gap: clamp(0.875rem, 0.5833rem + 1.2963vw, 1.75rem); }
  .hero__title { font-size: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
}

@media (min-width: 901px) and (max-height: 700px) {
  .hero__title { font-size: clamp(2.25rem, 1.25rem + 2.6vw, 3.75rem); }
  .hero__text { gap: 0.75rem; }
  .stats { padding-bottom: 1rem; }
}

@media (min-width: 901px) and (max-height: 620px) {
  .hero__title { font-size: clamp(2rem, 1rem + 2.2vw, 3rem); }
  .hero__lead { display: none; }
}

/* ============================================================
   Мобильные · до 720px
   ============================================================ */

@media (max-width: 820px) {
  /* На мобильной раскладке блок центрирован целиком, поэтому
     оптическая компенсация не нужна: она центрировала белую плашку,
     а круг со стрелкой оставался торчать вправо и вся пара читалась
     смещённой. Обнуляем — по центру встаёт кнопка вместе с иконкой. */
  .hero__cta { --cta-shift: 0rem; }

  .nav {
    grid-template-columns: max-content max-content;
    justify-content: space-between;
    padding: 1.375rem var(--gutter) 0;
  }
  .nav__menu, .nav__cta { display: none; }

  .nav__burger {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 5px;
    width: 1.625rem;
    height: 1.625rem;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
  }
  .nav__burger span {
    display: block;
    width: 1.375rem;
    height: 1.5px;
    background: #fff;
    transition: transform 0.28s ease, width 0.28s ease;
  }
  .nav__burger span:nth-child(2) { width: 0.875rem; }
  .nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.25px) rotate(45deg); }
  .nav__burger[aria-expanded="true"] span:nth-child(2) { width: 1.375rem; transform: translateY(-3.25px) rotate(-45deg); }

  .hero__lead { max-width: 33ch; }

  /* Цифры по макету: узкая подложка, каждый блок колонкой по центру —
     значение сверху, подпись под ним. */
  .stats__inner {
    flex-direction: column;
    gap: 1.875rem;
    width: min(12.125rem, 100%);
    padding: 1.375rem 1.5rem;
  }
  .stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
  }
  .stat__value { font-family: var(--font-ui); }
  .stat__label {
    max-width: none;
    font-family: var(--font-ui);
    text-align: center;
  }

  body.menu-open { overflow: hidden; }
}

/* §04 · мобильные низкие экраны */
@media (max-width: 600px) and (max-height: 760px) {
  .hero__body { gap: 1rem; }
  .hero__text { gap: 0.75rem; }
  .stats { padding-bottom: 0.875rem; }
}

/* ============================================================
   §08 · Производительность: дорогие статичные эффекты
   ============================================================ */

@media (max-width: 1200px) {
  .stats__inner {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(0, 0, 0, 0.28);
  }
}

/* ---------- Мобильное меню ---------- */

@media (min-width: 821px) {
  .sheet { display: none !important; }
}

.sheet {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 1.5rem;
  background: rgba(3, 3, 3, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  animation: fade 0.26s ease both;
}

.sheet a {
  padding: 0.875rem;
  color: #fff;
  font-size: 1.125rem;
  font-weight: 300;
  text-decoration: none;
}

.sheet__cta {
  /* Строй тот же, что у остальных кнопок: высота, кегль, вес и
     трекинг заданы общим правилом ниже. Здесь только рамка. */
  margin-top: 0.875rem;
  border: 1px solid #fff;
}

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ============================================================
   ПРЕЛОАДЕР
   ============================================================ */

.preloader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--bg);
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.preloader__canvas {
  width: min(42vmin, calc(340px * var(--up)));
  height: min(42vmin, calc(340px * var(--up)));
  display: block;
  touch-action: none;
}

.preloader__label {
  position: absolute;
  bottom: clamp(2rem, 1.3333rem + 2.963vw, 4rem);
  margin: 0;
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-ui);
  font-size: clamp(0.8125rem, 0.7905rem + 0.0939vw, 1.0625rem);
  font-weight: 800;
  letter-spacing: var(--ls-text);
  text-transform: uppercase;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.75; }
}

.preloader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Пока висит прелоадер, герой ждёт */
body.is-loading .nav,
body.is-loading .hero__title span,
body.is-loading .hero__lead,
body.is-loading .hero__cta,
body.is-loading .stats__inner {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .nav, .hero__title span, .hero__lead, .stats__inner {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero__cta {
    opacity: 1 !important;
    transform: translateX(var(--cta-shift)) !important;
  }
  .preloader__label { animation: none; }
}

/* Переносы подзаголовка заданы неразрывными пробелами в разметке.
   text-wrap: pretty из общего правила p,li переставлял строки
   по своему алгоритму — здесь отключаем адресно. */
p.hero__lead { text-wrap: normal; }

/* ============================================================
   01 / Ситуация · node 2059:348
   Светлая секция после тёмного первого экрана: в макете фон белый,
   карточки — фото на всю площадь с текстом поверх.
   ============================================================ */

.situation {
  --card-radius: 14px;
  background: #fff;
  color: #000;
  /* Поля те же, что у шапки: логотип, кнопка и карточки стоят
     на одной вертикали по всей странице. */
  padding: clamp(3.5rem, 2.2321rem + 5.4127vw, 8.75rem) var(--gutter)
           clamp(3rem, 2.0179rem + 4.1905vw, 7.0625rem);
}

.situation__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  /* Заголовок и карточка эксперта выровнены по верхней линии */
  align-items: start;
  gap: clamp(1.5rem, 0.7857rem + 3.0476vw, 4.5rem);
  margin: 0 0 clamp(1.75rem, 1.1964rem + 2.3619vw, 4.0625rem);
}

.situation__title {
  font-family: var(--font-logo);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
  margin: 0;
  color: #757575;
}
.situation__title b { font-weight: 400; color: #000; }

.situation__sub {
  margin: clamp(0.5rem, 0.3214rem + 0.7619vw, 1.25rem) 0 0;
  font-family: var(--font-ui);
  /* Кегль и интерлиньяж — как у подписей под цифрами на первом
     экране: единый стиль мелкого текста на всём сайте. */
  font-size: clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem);
  font-weight: 300;
  line-height: var(--lh-text-m);
  color: #757575;
}

/* ---------- Карточка эксперта ---------- */

.expert {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: clamp(0.625rem, 0.4821rem + 0.6095vw, 1.25rem);
  max-width: 22rem;
  margin: 0;
}

.expert__photo {
  width: clamp(3rem, 2.5714rem + 1.8286vw, 4.875rem);
  height: clamp(3rem, 2.5714rem + 1.8286vw, 4.875rem);
  border-radius: 50%;
  object-fit: cover;
}

.expert__name {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-m);
  font-weight: 500;
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  color: #000;
}

.expert__role {
  margin: 0.25rem 0 0;
  font-family: var(--font-ui);
  font-size: var(--fs-s);
  font-weight: 300;
  line-height: var(--lh-text-s);
  color: #757575;
}

/* ---------- Лента карточек ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.75rem, 0.6071rem + 0.6095vw, 1.625rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* Пропорция из макета, но с потолком по высоте экрана: на
     широких и низких мониторах карточки иначе вылезали за фолд. */
  /* Пропорция из макета: карточки высокие, текст в две строки. */
  aspect-ratio: 300 / 470;
  overflow: hidden;
  border-radius: var(--card-radius);
  isolation: isolate;
  container-type: inline-size;
}

.card__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Затемнение снизу: текст лежит прямо на фото и должен читаться
   на любом кадре. */
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.28) 0%,
    rgba(0, 0, 0, 0) 32%,
    rgba(0, 0, 0, 0.55) 72%,
    rgba(0, 0, 0, 0.86) 100%);
}

.card__tags {
  position: absolute;
  top: clamp(0.625rem, 0.5536rem + 0.3048vw, 0.9375rem);
  left: clamp(0.625rem, 0.5536rem + 0.3048vw, 0.9375rem);
  right: clamp(0.625rem, 0.5536rem + 0.3048vw, 0.9375rem);
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}

.card__num,
.card__tag {
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  /* Воздуха внутри больше, чем было: плашка не жмёт текст. */
  padding: 0.55em 0.95em;
  /* Только полупрозрачная обводка — без заливки и размытия. */
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-ui);
  font-size: clamp(0.75rem, 0.7083rem + 0.1852vw, 0.875rem);
  /* Одинаковый интерлиньяж у цифры и у текста — плашки
     выравниваются по высоте между собой. */
  line-height: var(--lh-title);
  color: #fff;
  white-space: nowrap;
}

.card__tag--red {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

.card__copy {
  position: relative;

  padding: clamp(0.875rem, 0.7321rem + 0.6095vw, 1.5rem);
  /* Блок текста приподнят от нижнего края карточки */
  padding-bottom: clamp(1.5625rem, 1.4196rem + 0.6095vw, 2.1875rem);
  color: #fff;
}

.card__name {
  /* Две строки резервируются всегда — заголовки всех карточек
     начинаются с одной линии, даже если текст короче. */
  min-height: 2.3em;
  margin: 0;
  text-wrap: pretty;
  font-family: var(--font-logo);
  /* Кегль прежней версии, он нравился больше. Считается от ширины
     карточки: 21.9px при 324 -> 32px при 883. */
  font-size: clamp(1.0625rem, 1rem + 1.812cqw, 2rem);
  font-weight: 600;
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
}

.card__note {
  /* Две строки резервируются и здесь: иначе блоки разной высоты
     сдвигают заголовки соседних карточек по вертикали. */
  min-height: 2.8em;
  margin: clamp(0.375rem, 0.3036rem + 0.3048vw, 0.6875rem) 0 0;
  font-family: var(--font-ui);
  font-size: clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem);
  font-weight: 400;
  line-height: var(--lh-text-m);
  color: rgba(255, 255, 255, 0.88);
}

/* ---------- Адаптив ---------- */

/* Планшет: две карточки в ряд */
@media (max-width: 1100px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Мобильные: карточки лентой со скроллом — как на сайте, чтобы
   не вытягивать секцию в бесконечную колонку. */
@media (max-width: 720px) {
  .situation__head {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1rem, 0.75rem + 1.1111vw, 1.75rem);
  }

  /* Два в ряд, два ряда: все четыре видны без прокрутки вбок.
     Работает, пока карточка шире ~250px. */
  .cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
  .card { aspect-ratio: 300 / 500; }
}

/* Узкие телефоны: две колонки дают карточку в 174px — в неё
   не влезает даже пилюля с тегом, а заголовок ломается на
   четыре строки. Здесь возвращается лента по одной карточке. */
@media (max-width: 560px) {
  .cards {
    display: flex;
    gap: 0.75rem;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Без этого snap прижимает карточку к краю области прокрутки
       и съедает боковое поле — первая упиралась в край экрана. */
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .cards::-webkit-scrollbar { display: none; }

  .card {
    flex: 0 0 min(76vw, 18rem);
    aspect-ratio: 300 / 470;
    scroll-snap-align: start;
  }
}


/* ============================================================
   ЧАСТЫЕ ВОПРОСЫ
   Структура, пропорции и механика — из проекта Кэмпа
   (.questions-*). Изменены только палитра на нашу тёмную
   и шрифт на SF, размеры масштабируются через --up.
   ============================================================ */

.questions-section {
  position: relative;
  z-index: 2;
  background: #fff;
  color: #16120d;
}
/* Светлая схема аккордеона: рамки и подписи тоном, без красного */
.questions-item   { border-color: rgba(22, 18, 13, 0.12) !important; }
.questions-number { color: #8d8880 !important; }
.questions-answer { color: #6b655c !important; }
.questions-plus   { color: #16120d !important; }

.questions-head {
  /* Те же поля, что у шапки и карточек. */
  padding: calc(130px * var(--up)) var(--gutter) calc(47px * var(--up));
}

.questions-head h2 {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
}

/* Вторая строка приглушена — как в Кэмпе */
.questions-head h2 span {
  color: rgba(22, 18, 13, 0.42);
  font-weight: 400;
}

.questions-list {
  margin-inline: var(--gutter);
  border-top: 1px solid rgba(22, 18, 13, 0.14);
}

.questions-item {
  border-bottom: 1px solid rgba(22, 18, 13, 0.12);
}

/* Сетка триггера из Кэмпа: номер | заголовок | плюс */
.questions-trigger {
  width: 100%;
  min-height: calc(109px * var(--up));
  padding: 0 max(var(--gutter), calc((100vw - var(--shell)) / 2));
  display: grid;
  grid-template-columns: calc(39px * var(--up)) minmax(0, 1fr) calc(37px * var(--up));
  align-items: center;
  gap: calc(27px * var(--up));
  border: 0;
  background: transparent;
  color: #16120d;
  text-align: left;
  cursor: pointer;
}

.questions-number {
  display: grid;
  width: calc(39px * var(--up));
  height: calc(25px * var(--up));
  place-items: center;
  border: 1px solid rgba(22, 18, 13, 0.3);
  border-radius: 999px;
  font-family: var(--font-num);
  font-size: var(--fs-s);
  font-weight: 500;
  line-height: var(--lh-flat);
}

.questions-item h3 {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-m);
  font-weight: 500;
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  text-wrap: pretty;
}

.questions-plus {
  display: grid;
  width: calc(37px * var(--up));
  height: calc(37px * var(--up));
  place-items: center;
  border: 1px solid rgba(22, 18, 13, 0.3);
  border-radius: 50%;
  font-size: calc(23px * var(--up));
  font-weight: 400;
  line-height: var(--lh-flat);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.2s ease, color 0.2s ease;
}

.questions-trigger:hover .questions-plus {
  background: #16120d;
  color: #fff;
}

.questions-item.is-open .questions-plus { transform: rotate(45deg); }

/* Раскрытие без фиксированной высоты — механика Кэмпа */
.questions-panel {
  display: grid;
  grid-template-rows: 0fr;
  padding: 0 max(var(--gutter), calc((100vw - var(--shell)) / 2));
  transition: grid-template-rows 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.questions-panel > div {
  min-height: 0;
  overflow: hidden;
  /* сдвиг под колонку заголовка, а не под номер */
  margin-left: calc(66px * var(--up));
  max-width: calc(820px * var(--up));
  opacity: 0;
  transform: translateY(-6px);
  /* visibility убирает свёрнутую панель из потока фокуса и из дерева
     скринридера: до этого 0fr прятал её только визуально, а Tab
     продолжал уходить внутрь закрытого ответа. */
  visibility: hidden;
  transition: opacity 0.24s ease,
              transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s linear 0.5s;
}

.questions-item.is-open .questions-panel { grid-template-rows: 1fr; }

.questions-item.is-open .questions-panel > div {
  padding: 0 0 calc(34px * var(--up));
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition-delay: 0.08s, 0.08s, 0s;
}

.questions-answer p {
  margin: 0 0 12px;
  color: #6b655c;
  font-family: var(--font-ui);
  font-size: calc(15px * var(--up));
  font-weight: 300;
  line-height: var(--lh-text-m);
  letter-spacing: var(--ls-text);
  text-wrap: pretty;
}
.questions-answer p:last-child { margin-bottom: 0; }

/* Мобильные — пропорции из Кэмпа */
@media (max-width: 900px) {
  .questions-head {
    padding-top: 80px;
    padding-bottom: 53px;
  }
  .questions-head h2 { line-height: var(--lh-head); }

  .questions-trigger {
    min-height: 82px;
    grid-template-columns: 33px minmax(0, 1fr) 32px;
    gap: 13px;
  }
  .questions-number { width: 33px; height: 22px; font-size: 12px; }
  .questions-item h3 { font-size: clamp(1rem, 0.9375rem + 0.2778vw, 1.1875rem); line-height: var(--lh-title); }
  .questions-plus { width: 32px; height: 32px; font-size: 20px; }
  .questions-panel > div { margin-left: 46px; }
  .questions-answer p { font-size: 15px; }
}

/* ============================================================
   Футер
   ============================================================ */

/* ============================================================
   02 / Проблема · схема трёх опор
   Композиция из прототипа 2101:187: заголовок слева, схема
   по центру, карточка теста справа. Контуры прочерчиваются
   при появлении, точки стягиваются к центру — схема собирается
   на глазах, а не стоит статичной картинкой.
   ============================================================ */

.venn-sec {
  position: relative;
  z-index: 2;
  /* Во весь экран: схема — цельный кадр, а не лента с прокруткой.
     min-height, а не height: на низких окнах контент важнее рамки. */
  min-height: 100svh;
  display: grid;
  /* stretch, а не center: иначе сетка сжимается по контенту и
     прижать заголовок к верху, а плашку к низу нечем. */
  align-content: stretch;
  background: var(--bg);
  color: var(--text);
  padding: clamp(2.5rem, 1.7857rem + 3.0476vw, 5.5rem) var(--gutter);
  overflow: hidden;
}

.venn-sec__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.5fr) minmax(0, 0.95fr);
  /* Боковые колонки тянутся во всю высоту: заголовок прижат кверху,
     плашка теста — к низу, как в макете. Схема остаётся по центру. */
  align-items: stretch;
  gap: clamp(1rem, 0.2857rem + 3.0476vw, 4rem);
}
.venn-lede { align-self: start; }
.venn-sec__inner > .quiz { margin-top: auto; margin-bottom: 15%; }
.venn-sec__inner > .venn { align-self: center; }

/* ---------- Левая колонка ---------- */

.venn-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0 0 clamp(0.75rem, 0.5714rem + 0.7619vw, 1.5rem);
  font-size: clamp(0.8125rem, 0.7905rem + 0.0939vw, 1.0625rem);
  font-weight: 400;
  letter-spacing: var(--ls-text);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.venn-eyebrow span { opacity: 0.55; }

.venn-title {
  font-family: var(--font-logo);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
  margin: 0;
  color: #8a8a8a;
}
.venn-title b { font-weight: 400; color: var(--text); }

.venn-sub {
  max-width: 30ch;
  margin: clamp(0.875rem, 0.6964rem + 0.7619vw, 1.625rem) 0 0;
  font-size: clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem);
  font-weight: 300;
  line-height: var(--lh-lead);
  color: var(--muted);
}

/* ---------- Схема ---------- */

.venn {
  /* Геометрия схемы задана здесь один раз. И круги, и подписи, и ядро
     берут эти же координаты, поэтому подпись физически не может
     разъехаться с центром своего круга. Менять размер/позиции — тут. */
  /* Геометрия снята с макета (фрейм 554.67 × 509.97) и переведена
     в проценты своего бокса. Круги и подписи берут одни и те же
     переменные — разъехаться они больше не могут.
     Подписи: по горизонтали — центр круга, по вертикали — смещение
     вверх у верхних и вниз у нижней, как нарисовано. */
  --cw: 54.5%;                                  /* диаметр опоры */
  --c1x: 27.2%;  --c1y: 29.8%;
  --c2x: 72.9%;  --c2y: 29.8%;
  --c3x: 50.1%;  --c3y: 64.7%;

  --p1x: 27.2%;  --p1y: 20.2%;
  --p2x: 72.3%;  --p2y: 20.7%;
  --p3x: 50.8%;  --p3y: 78.2%;   /* на ~10px выше */

  --core-x: 51.1%; --core-y: 46.0%;
  --core-w: 37.4%;

  position: relative;
  width: 100%;
  max-width: clamp(20rem, 12.5rem + 32.5vw, 46rem);
  aspect-ratio: 554.67 / 509.97;
  margin-inline: auto;
}


/* появление: контуры рисуются по очереди, затем стягиваются точки */
/* Контур зоны прочерчивается последним, затем наливается цветом */
@keyframes vDraw { to { stroke-dashoffset: 0; } }
@keyframes vCoreDraw { to { stroke-dashoffset: 0; } }
@keyframes vCoreFill { to { fill-opacity: 0.16; } }
/* Зона едва заметно пульсирует — «деньги идут каждый день» */
@keyframes vCoreBreath {
  0%, 100% { fill-opacity: 0.16; }
  50%      { fill-opacity: 0.26; }
}
@keyframes vPulse { to { opacity: 0.9; } }

/* ---------- Подписи опор ---------- */

.venn-pillar {
  position: absolute;
  margin: 0;
  text-align: center;
  line-height: var(--lh-lead);
  opacity: 0;
}
.venn-pillar b {
  display: block;
  /* 22px на 1440. Тот же кегль, что у лида плашки теста —
     это один уровень иерархии внутри блока. */
  font-size: clamp(1.125rem, 1.0417rem + 0.3704vw, 1.375rem);
  font-weight: 500;
  letter-spacing: var(--ls-title);
  color: var(--text);
}
.venn-pillar i {
  font-size: var(--fs-s);
  font-style: normal;
  font-weight: 300;
  color: #fff;
  opacity: 0.92;
}
/* позиции по центрам окружностей из макета */
/* Подписи стоят в центрах сфер — координаты посчитаны из позиций
   объектов сцены (камера dist 6.6, span 3.9). */
/* Поверх блоба: ядро лежит на z-index 2 */
.venn-pillar { z-index: 3; }
.venn-pillar--1 { left: var(--p1x); top: var(--p1y); translate: -50% -50%; }
.venn-pillar--2 { left: var(--p2x); top: var(--p2y); translate: -50% -50%; }
.venn-pillar--3 { left: var(--p3x); top: var(--p3y); translate: -50% -50%; }

.venn.is-in .venn-pillar {
  animation: vFade 0.8s ease forwards;
}
.venn.is-in .venn-pillar--1 { animation-delay: 0.75s; }
.venn.is-in .venn-pillar--2 { animation-delay: 0.9s; }
.venn.is-in .venn-pillar--3 { animation-delay: 1.05s; }

@keyframes vFade { from { opacity: 0; } to { opacity: 1; } }
.venn-pillar--3.venn-pillar--3 { /* сохраняем сдвиг по X при анимации */ }
.venn.is-in .venn-pillar--3 { animation-name: vFade3; }
@keyframes vFade3 { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Ядро ---------- */

.venn-core {
  position: absolute;
  left: 50%;
  top: 48.5%;
  translate: -50% -50%;
  display: grid;
  place-content: center;
  gap: 0.15em;
  width: 19%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--arc-high);
  text-align: center;
  opacity: 0;
  box-shadow: 0 0 clamp(2rem, 1.3333rem + 2.963vw, 4rem) -0.5rem rgba(172, 12, 15, 0.75);
}
.venn-core b {
  display: block;
  text-align: center;
  /* balance убран: при заданных вручную переносах он подгонял строки
     по-своему. Трекинг нулевой — отрицательный добавлял «хвост»
     после последней буквы строки и сбивал оптический центр. */
  font-size: clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem);
  font-weight: 500;
  line-height: var(--lh-title);
  letter-spacing: var(--ls-text);
}

/* Подписи лежат поверх WebGL-канваса: доли секунды кадра бывают
   почти белыми, и белый текст на них пропадал (замерено 2.4:1).
   Тень не меняет палитру — она лишь затемняет подложку под глифами. */
/* Теней на текстах схемы нет — по требованию макета. */
.venn-core i {
  font-size: var(--fs-s);
  font-style: normal;
  font-weight: 300;
  opacity: 0.82;
}

.venn.is-in .venn-core {
  animation: vCore 0.9s cubic-bezier(0.34, 1.4, 0.64, 1) 1.25s forwards;
}
@keyframes vCore {
  from { opacity: 0; translate: -50% -50%; scale: 0.5; }
  to   { opacity: 1; translate: -50% -50%; scale: 1; }
}

/* ---------- Карточка теста ---------- */

.quiz {
  padding: clamp(1.125rem, 0.8571rem + 1.1429vw, 2.25rem);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: clamp(0.75rem, 0.6429rem + 0.4571vw, 1.1875rem);
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.quiz__lead {
  margin: 0 0 clamp(1rem, 0.8214rem + 0.7619vw, 1.75rem);
  /* 22px — как подписи опор */
  font-size: clamp(1.125rem, 1.0417rem + 0.3704vw, 1.375rem);
  font-weight: 400;
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-title);
  color: var(--text);
}

.quiz__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}
.quiz__label {
  display: inline-flex;
  align-items: center;
  padding: clamp(0.6875rem, 0.6161rem + 0.3048vw, 1rem)
           clamp(0.875rem, 0.7679rem + 0.4571vw, 1.3125rem);
  border-radius: 999px;
  background: #fff;
  color: #0e0404;
  font-size: var(--fs-s);
  font-weight: 500;
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
  white-space: nowrap;
}
.quiz__icon {
  display: grid;
  place-items: center;
  width: clamp(2.25rem, 2.0357rem + 0.9143vw, 3rem);
  height: clamp(2.25rem, 2.0357rem + 0.9143vw, 3rem);
  border-radius: 50%;
  background: #fff;
  color: #0e0404;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.quiz__icon svg { width: 0.75rem; height: 0.75rem; }
.quiz__cta:hover .quiz__icon { transform: translate(2px, -2px); }

.quiz__meta {
  margin: clamp(0.75rem, 0.6429rem + 0.4571vw, 1.1875rem) 0 0;
  font-size: var(--fs-s);
  font-weight: 300;
  color: var(--muted);
}

/* ---------- Адаптив ---------- */

@media (max-width: 1100px) {
  .venn-sec__inner {
    /* Одна колонка: заголовок, схема, плашка. Так нижний отступ
       плашки совпадает с боковым полем секции. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "lede" "venn" "quiz";
    gap: clamp(1.5rem, 1.1667rem + 1.4815vw, 2.5rem);
  }
  .venn-lede { grid-area: lede; }
  .quiz { grid-area: quiz; }
  .venn { grid-area: venn; }
}

@media (max-width: 720px) {
  .venn-sec__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "lede" "venn" "quiz";
  }
  .venn { max-width: min(100%, 22rem); }
  /* Подписи и на узком экране остаются в центрах блобов. */
  /* позиции подписей наследуются из общей геометрии .venn */
}

@media (prefers-reduced-motion: reduce) {
  .venn.is-in .venn-pillar,
  .venn.is-in .venn-core { animation: none; }
  .venn-pillar { opacity: 1; }
  .venn-core { opacity: 1; }
}

/* ============================================================
   14 / Разбор · финальный CTA
   Единственный красный экран на странице: акцент работает
   именно потому, что больше нигде такой заливки нет.
   ============================================================ */

.final-cta {
  position: relative;
  z-index: 2;
  background: var(--arc-base);
  color: #fff;
  padding: clamp(3.5rem, 2.2321rem + 5.4127vw, 8.75rem) var(--gutter);
}

.final-cta__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(1.75rem, 0.8214rem + 4.1270vw, 4.375rem);
  width: 100%;
}

.final-cta__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0 0 clamp(0.75rem, 0.5714rem + 0.7619vw, 1.5rem);
  font-family: var(--font-ui);
  font-size: clamp(0.8125rem, 0.7905rem + 0.0939vw, 1.0625rem);
  font-weight: 400;
  letter-spacing: var(--ls-text);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.final-cta__eyebrow span { opacity: 0.55; }

.final-cta__title {
  font-family: var(--font-logo);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
  margin: 0;
  /* 32@360 → 76@1440 */
}
.final-cta__title span { display: block; }

.final-cta__text {
  max-width: 52ch;
  margin: clamp(1rem, 0.8214rem + 0.7937vw, 1.5rem) 0 0;
  font-family: var(--font-ui);
  font-size: clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem);
  font-weight: 300;
  line-height: var(--lh-lead);
  color: rgba(255, 255, 255, 0.82);
}

.final-cta__actions {
  display: flex;
  flex-direction: column;
  gap: clamp(0.625rem, 0.5536rem + 0.3175vw, 0.8125rem);
  justify-self: end;
  width: 100%;
  max-width: 24rem;
}

.final-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.875rem, 0.7679rem + 0.4762vw, 1.1875rem)
           clamp(1.125rem, 0.9643rem + 0.7143vw, 1.625rem);
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: var(--fs-s);
  font-weight: 500;
  letter-spacing: var(--ls-btn);
  line-height: var(--lh-lead);
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  text-wrap: balance;
  transition: background 0.26s ease, color 0.26s ease;
}

.final-cta__btn--solid {
  border: 1px solid #fff;
  background: #fff;
  color: var(--arc-base);
}
.final-cta__btn--solid:hover { background: rgba(255, 255, 255, 0.88); }

.final-cta__btn--ghost {
  border: 1px solid rgba(255, 255, 255, 0.85);
  background: transparent;
  color: #fff;
}
.final-cta__btn--ghost:hover {
  background: #fff;
  color: var(--arc-base);
}

/* ---------- Адаптив ---------- */

@media (max-width: 900px) {
  .final-cta__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.5rem, 1.25rem + 1.1111vw, 2.25rem);
  }
  .final-cta__actions {
    justify-self: stretch;
    max-width: none;
  }
}

/* ---------- Коннекторы и выноски-проблемы ---------- */

.venn-issue {
  position: absolute;
  margin: 0;
  line-height: var(--lh-lead);
  opacity: 0;
  white-space: nowrap;
}
.venn-issue b {
  display: block;
  font-size: clamp(0.8125rem, 0.7905rem + 0.0939vw, 1.0625rem);
  font-weight: 500;
  letter-spacing: var(--ls-text);
  color: #ff5a5f;
}
.venn-issue i {
  font-size: clamp(0.8125rem, 0.7905rem + 0.0939vw, 1.0625rem);
  font-style: normal;
  font-weight: 300;
  color: var(--muted);
}
.venn-issue--1 { left: -4%;  top: 2%;  text-align: left; }
.venn-issue--2 { right: -4%; top: 2%;  text-align: right; }
.venn-issue--3 { left: 50%;  bottom: -7%; translate: -50% 0; text-align: center; }

.venn.is-in .venn-issue { animation: vFade 0.7s ease forwards; }
.venn.is-in .venn-issue--1 { animation-delay: 2.5s; }
.venn.is-in .venn-issue--2 { animation-delay: 2.65s; }
.venn.is-in .venn-issue--3 { animation-name: vFade3; animation-delay: 2.8s; }

/* ---------- Типографическая оппозиция ---------- */

.venn-vs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(0.75rem, 0.6071rem + 0.6095vw, 1.625rem);
  margin: clamp(1.25rem, 1.0179rem + 0.9905vw, 2.1875rem) 0 0;
  padding-top: clamp(1rem, 0.8571rem + 0.6095vw, 1.625rem);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.venn-vs__col dt {
  margin: 0 0 0.35em;
  font-size: clamp(0.8125rem, 0.7905rem + 0.0939vw, 1.0625rem);
  font-weight: 500;
  letter-spacing: var(--ls-text);
  text-transform: uppercase;
  color: #8a8a8a;
}
.venn-vs__col dd {
  margin: 0;
  font-size: clamp(0.6875rem, 0.6696rem + 0.0794vw, 0.8438rem);
  font-weight: 300;
  line-height: var(--lh-lead);
  color: #8a8a8a;
}
/* Правая колонка — состояние «вместе»: она и есть результат */
.venn-vs__col--on dt { color: #fff; }
.venn-vs__col--on dd { color: var(--text); }

@media (max-width: 720px) {
  .venn-issue--1 { left: 0; }
  .venn-issue--2 { right: 0; }
  .venn-vs { grid-template-columns: minmax(0, 1fr); gap: 0.875rem; }
}

@media (prefers-reduced-motion: reduce) {
  .venn.is-in .venn-issue { animation: none; }
  .venn-issue { opacity: 1; }
}

/* ---------- Стеклянная сцена вместо SVG-схемы ---------- */
.venn__stage { position: absolute; inset: 0; }

/* Фолбэк без WebGL: шейдерных фигур не будет, но подписи и ядро
   обязаны быть видны — иначе блок остаётся пустым. Вместо стекла
   рисуем спокойный радиальный след, чтобы текст не висел в воздухе. */
.venn__stage.no-webgl {
  background:
    radial-gradient(38% 38% at 22% 28%, rgba(255,255,255,0.07), transparent 70%),
    radial-gradient(38% 38% at 78% 28%, rgba(255,255,255,0.07), transparent 70%),
    radial-gradient(38% 38% at 50% 78%, rgba(255,255,255,0.07), transparent 70%),
    radial-gradient(30% 30% at 50% 50%, rgba(200,16,46,0.30), transparent 72%);
}
.venn__stage.no-webgl ~ .venn-pillar,
.venn__stage.no-webgl ~ .venn-issue,
.venn__stage.no-webgl ~ .venn-core { opacity: 1; }

/* Подписи и ядро появляются после сборки фигур */
.venn .venn-pillar,
.venn .venn-core { opacity: 0; }
.venn__stage.on ~ .venn-pillar { animation: vFade 0.8s ease forwards; }
.venn__stage.on ~ .venn-pillar--1 { animation-delay: 0.5s; }
.venn__stage.on ~ .venn-pillar--2 { animation-delay: 0.78s; }
.venn__stage.on ~ .venn-pillar--3 { animation-name: vFade3; animation-delay: 1.06s; }
.venn__stage.on ~ .venn-issue { animation: vFade 0.7s ease forwards; }
.venn__stage.on ~ .venn-issue--1 { animation-delay: 1.5s; }
.venn__stage.on ~ .venn-issue--2 { animation-delay: 1.65s; }
.venn__stage.on ~ .venn-issue--3 { animation-name: vFade3; animation-delay: 1.8s; }

/* Ядро — только текст, подложку рисует шейдер */
.venn-core {
  background: none;
  box-shadow: none;
  width: auto;
  aspect-ratio: auto;
  top: 50%;
}
.venn__stage.on ~ .venn-core { animation: vFadeCore 0.9s ease 1.35s forwards; }
@keyframes vFadeCore {
  from { opacity: 0; translate: -50% -50%; }
  to   { opacity: 1; translate: -50% -50%; }
}

@media (prefers-reduced-motion: reduce) {
  .venn .venn-pillar, .venn .venn-core, .venn .venn-issue { opacity: 1; }
}

/* ============================================================
   §12 · Зоны касания на мобильных
   Минимум 44×44 по WCAG 2.5.5. Размеры и положение элементов
   не меняются: площадь добирается внутренними отступами, а
   отрицательные margin компенсируют их, чтобы вёрстка осталась
   той же. Только хитбокс, не композиция.
   ============================================================ */
@media (max-width: 767px) {
  /* Бургер: рисунок 26×26, зона касания 44×44 */
  .nav__burger {
    width: 44px;
    height: 44px;
    margin-right: -9px;
    align-items: center;
  }

  /* Ссылки футера: строка 20px -> 44px по высоте */
  .footer__col a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  /* компенсируем прирост высоты, чтобы колонка не растянулась */
  .footer__col { gap: 0; }

  .footer__logo {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Логотип шапки — точка отсчёта для левого края всех секций,
     поэтому сдвигать его нельзя. Зону касания растим псевдо-
     элементом: он не влияет на поток и не двигает логотип. */
  .nav__logo {
    position: relative;
    display: inline-block;
  }
  .nav__logo::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }

  /* Кнопки-CTA: добираем высоту до 44 */
  .hero__cta,
  .quiz__cta,
  .quiz__label,
  .services-cta,
  .final-cta__btn,
  .nav__cta {
    min-height: 44px;
  }

  .hero__cta-label,
  .quiz__label,
  .services-cta,
  .final-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}


/* ============================================================
   Кейс · развёрнутый формат
   Тёмная секция: крупные цифры результата сверху, под ними —
   история тремя этапами. Цифры докручиваются при появлении.
   ============================================================ */

.case-sec {
  position: relative;
  z-index: 2;
  background: var(--bg);
  color: var(--text);
  padding: clamp(3.5rem, 2.2321rem + 5.4127vw, 8.75rem) var(--gutter);
}

.case-head { margin-bottom: clamp(2rem, 1.4464rem + 2.3619vw, 4.3125rem); }

.case-kicker {
  margin: 0 0 clamp(0.75rem, 0.6071rem + 0.6095vw, 1.375rem);
  font-size: var(--fs-s);
  font-weight: 400;
  letter-spacing: var(--ls-text);
  text-transform: uppercase;
  color: var(--muted);
}

.case-title {
  font-family: var(--font-logo);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
  margin: 0;
}

.case-meta {
  max-width: 46ch;
  margin: clamp(0.75rem, 0.6071rem + 0.6095vw, 1.375rem) 0 0;
  font-size: clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem);
  font-weight: 300;
  line-height: var(--lh-text-s);
  color: var(--muted);
}

/* ---------- Цифры ---------- */

.case-nums {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.75rem, 0.5357rem + 0.9143vw, 1.5rem);
  margin: 0 0 clamp(2rem, 1.4464rem + 2.3619vw, 4.3125rem);
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: clamp(1.5rem, 1.1429rem + 1.5238vw, 3rem);
}

.case-num {
  opacity: 0;
  translate: 0 12px;
}
.case-sec.is-in .case-num {
  animation: caseRise 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--i) * 90ms);
}

.case-num__v {
  display: block;
  font-family: var(--font-logo);
  font-size: clamp(1.75rem, 1.2857rem + 1.981vw, 3.9375rem);
  font-weight: 400;
  line-height: var(--lh-flat);
  letter-spacing: var(--ls-head);
  font-variant-numeric: tabular-nums;
}

.case-num__l {
  display: block;
  max-width: 22ch;
  margin-top: clamp(0.5rem, 0.4286rem + 0.3048vw, 0.8125rem);
  font-size: var(--fs-s);
  font-weight: 300;
  line-height: var(--lh-lead);
  color: var(--muted);
}

/* ---------- Этапы ---------- */

.case-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 0.7143rem + 1.219vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.case-step {
  padding: clamp(1.125rem, 0.9464rem + 0.7619vw, 1.875rem);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: clamp(0.5rem, 0.4286rem + 0.3048vw, 0.8125rem);
  background: rgba(255, 255, 255, 0.025);
  opacity: 0;
  translate: 0 12px;
}
.case-sec.is-in .case-step {
  animation: caseRise 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(0.36s + var(--i) * 110ms);
}

.case-step__n {
  margin: 0 0 clamp(0.75rem, 0.6429rem + 0.4571vw, 1.1875rem);
  font-family: var(--font-logo);
  font-size: var(--fs-s);
  font-weight: 400;
  color: #8d8880;
}

.case-step__h {
  margin: 0 0 clamp(0.375rem, 0.3036rem + 0.3048vw, 0.6875rem);
  font-size: var(--fs-m);
  font-weight: 500;
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-title);
}

.case-step__t {
  margin: 0;
  font-size: var(--fs-s);
  font-weight: 300;
  line-height: var(--lh-text-s);
  color: var(--muted);
}

@keyframes caseRise { to { opacity: 1; translate: 0 0; } }

/* ---------- Адаптив ---------- */

@media (max-width: 900px) {
  .case-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-steps { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 480px) {
  .case-nums { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .case-num__l { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .case-num, .case-step { opacity: 1; translate: none; animation: none; }
}

/* ---------- Переворот карточек · механика из «Нейро-практикума» ---------- */

.card { perspective: 1500px; }

.card__inner { position: absolute; inset: 0; }

.card__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border-radius: var(--card-radius);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: rotateY(0deg);
  transition: transform 0.62s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.22s ease;
  will-change: transform, opacity;
}

/* Затемнение переехало с карточки на грань — иначе оборот без него */
.card__face::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.28) 0%,
    rgba(0, 0, 0, 0) 32%,
    rgba(0, 0, 0, 0.55) 72%,
    rgba(0, 0, 0, 0.86) 100%);
}
.card::after { content: none; }

.card__face--back {
  opacity: 0;
  pointer-events: none;
  transform: rotateY(-90deg);
}

/* Поворот отключён: на лицевой стороне появилась ссылка-действие,
   и оборот с ней конфликтовал. Разметка оборота оставлена —
   включается возвратом правила ниже. */

@media (prefers-reduced-motion: reduce) {
  .card__face { transition: opacity 0.2s ease; }
  .card:hover .card__face--front { transform: none; }
  .card:hover .card__face--back { transform: none; }
}


/* ---------- Ссылка-действие на карточке ---------- */

.card__act {
  white-space: nowrap;
  /* inline-flex, чтобы стрелка шла сразу за текстом, а не
     прижималась к правому краю на длинной подписи. */
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  margin: clamp(1.125rem, 0.9643rem + 0.6857vw, 1.8125rem) 0 0;
  font-size: var(--fs-s);
  font-weight: 300;
  line-height: var(--lh-text-s);
  color: #fff;
}
.card__act span { border-bottom: 1px solid rgba(255, 255, 255, 0.38); }
.card__act i {
  font-style: normal;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.card:hover .card__act i { transform: translateX(3px); }


/* Диагональ: заголовок у верхнего края схемы, карточка теста
   уходит к нижнему — композиция перестаёт быть одной линией. */
@media (min-width: 1101px) {
  /* Плашка прижата к низу схемы — в макете её верх на 55.7%
     высоты секции, а не по центру колонки. */
  .venn-sec__inner > .venn-lede { align-self: start; }
  .venn-sec__inner > .quiz {
    /* Плашка прижата к правому краю сетки, отступы снизу и сбоку
       равны полям секции — как у карточек в соседних блоках. */
    align-self: end;
    justify-self: end;
  }
}

/* ============================================================
   Версия схемы с плоскими кругами · макет 2209:591
   Круги 21% ширины блока, центры из макета, красный крупнее.
   Теней на текстах нет.
   ============================================================ */

.venn__flat { position: absolute; inset: 0; }

.venn__circle {
  position: absolute;
  border-radius: 50%;
  translate: -50% -50%;
}

/* Три опоры: мягкий тёмный градиент с подсветкой сверху */
.venn__circle--1,
.venn__circle--2,
.venn__circle--3 {
  width: var(--cw);
  aspect-ratio: 1;
  /* Настоящее стекло: размытие фона за кругом, лёгкий градиент
     сверху вниз и тонкая светлая рамка по краю. */
  backdrop-filter: blur(22px) saturate(1.1);
  -webkit-backdrop-filter: blur(22px) saturate(1.1);
  overflow: hidden;
  /* Тот же язык, что у красного ядра, только серо-чёрный и почти
     прозрачный: кольцо по кромке даёт «френель», а блик внутри
     медленно обходит центр — отсюда ощущение, что круг вертится.
     Геометрия при этом не тронута: она снята с макета. */
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 62%,
      rgba(255, 255, 255, 0.07) 80%,
      rgba(255, 255, 255, 0.16) 93%,
      rgba(255, 255, 255, 0.05) 100%),
    linear-gradient(152deg,
      rgba(255, 255, 255, 0.085) 0%,
      rgba(255, 255, 255, 0.045) 45%,
      rgba(255, 255, 255, 0.022) 100%);
  /* Ни обводки, ни теней: кромка резала глаз. Круг держится
     только заливкой-градиентом. */
  border: 0;
  box-shadow: none;
}
/* Позиции из макета: круги r=152 при ширине 1440 */
.venn__circle--1 { left: var(--c1x); top: var(--c1y); }
.venn__circle--2 { left: var(--c2x); top: var(--c2y); }
.venn__circle--3 { left: var(--c3x); top: var(--c3y); }

/* Ядро: насыщенный красный, крупнее относительно опор */
.venn__core-stage {
  position: absolute;
  left: var(--core-x);
  top: var(--core-y);
  translate: -50% -50%;
  width: var(--core-w);
  aspect-ratio: 1;
  z-index: 2;
}
/* Свечение вокруг блоба: сам шейдер даёт цвет, а насыщенность
   на тёмном фоне читается только вместе с ореолом. Лежит ПОД
   канвасом — канвас идёт следующим в потоке и красит поверх. */
.venn__core-stage::before {
  content: "";
  position: absolute;
  inset: -34%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle,
    rgba(232, 18, 42, 0.50) 0%,
    rgba(214, 14, 36, 0.22) 44%,
    rgba(160, 8, 24, 0) 72%);
}


/* Появление: круги проявляются по очереди, как и блобы */
.venn-sec--flat .venn__circle { opacity: 0; }
.venn-sec--flat .venn.is-in .venn__circle,
.venn-sec--flat .venn__flat.on .venn__circle {
  animation: vFlat 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.venn-sec--flat .venn__circle--1 { animation-delay: 0.05s; }
.venn-sec--flat .venn__circle--2 { animation-delay: 0.2s; }
.venn-sec--flat .venn__circle--3 { animation-delay: 0.35s; }

@keyframes vFlat {
  from { opacity: 0; scale: 0.88; }
  to   { opacity: 1; scale: 1; }
}

/* Подписи и ядро появляются следом */
.venn-sec--flat .venn-pillar,
.venn-sec--flat .venn-core { opacity: 0; }
.venn-sec--flat .venn__flat.on ~ .venn-pillar { animation: vFade 0.8s ease forwards; }
.venn-sec--flat .venn__flat.on ~ .venn-pillar--1 { animation-delay: 0.45s; }
.venn-sec--flat .venn__flat.on ~ .venn-pillar--2 { animation-delay: 0.6s; }
.venn-sec--flat .venn__flat.on ~ .venn-pillar--3 { animation-delay: 0.75s; }
.venn-sec--flat .venn__flat.on ~ .venn-core { animation: vFadeCore 0.9s ease 0.9s forwards; }

@media (prefers-reduced-motion: reduce) {
  .venn-sec--flat .venn__circle,
  .venn-sec--flat .venn-pillar,
  .venn-sec--flat .venn-core { opacity: 1; animation: none; }
}

/* Фон блока схемы — тот же компонент, что на первом экране:
   сетка глифов + WebGL-арка, без дублирования кода. */
.venn-sec--flat { position: relative; overflow: hidden; }
.venn-sec__bg {
  position: absolute;
  inset: 22% 0 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
/* Подъём детей над фоновыми канвасами. Микроэлементы по углам
   выведены из-под правила: им нужен position: absolute. */
.venn-sec--flat > *:not(.venn-sec__bg):not(.venn-mark):not(.venn-tick)
  { position: relative; z-index: 1; }

/* Ядро: текст в четыре строки, без подписи */
.venn-sec--flat .venn-core b { line-height: var(--lh-title); }

/* ============================================================
   Бегущая строка клиентов · механика Osmo
   Направление инвертируется по скроллу, поверх идёт параллакс —
   лента «дышит», а не переключается механически.
   ============================================================ */

.clients {
  position: relative;
  z-index: 2;
  /* Тёмная полоса, светлый текст. Узкая: это подпись под первым
     экраном, а не самостоятельный блок. */
  background: var(--bg);
  color: var(--text);
  padding: clamp(1.5rem, 1.2321rem + 1.1429vw, 2.625rem) 0
           clamp(1.75rem, 1.4821rem + 1.1429vw, 2.875rem);
  overflow: hidden;
}

/* Подпись стоит неподвижно — не уезжает вместе с именами */
.clients__lead {
  margin: 0 0 clamp(0.875rem, 0.7321rem + 0.6095vw, 1.5rem);
  padding-inline: var(--gutter);
  text-align: center;
  font-size: var(--fs-s);
  font-weight: 300;
  line-height: var(--lh-text-s);
  letter-spacing: var(--ls-text);
  color: rgba(255, 255, 255, 0.45);
}

.clients__marquee {
  position: relative;
  overflow: hidden;
  /* Края растворяются — лента не обрывается о границу экрана */
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg,
    transparent 0, #000 5%, #000 95%, transparent 100%);
}

.clients__rail {
  display: flex;
  width: max-content;
  will-change: transform;
}

.clients__group {
  display: flex;
  flex: none;
  align-items: center;
  gap: clamp(1.5rem, 1.1429rem + 1.5238vw, 3rem);
  padding-right: clamp(1.5rem, 1.1429rem + 1.5238vw, 3rem);
}

.clients__item {
  font-family: var(--font-logo);
  font-size: clamp(1.375rem, 1.0179rem + 1.5238vw, 2.875rem);
  font-weight: 400;
  line-height: var(--lh-title);
  letter-spacing: var(--ls-head);
  white-space: nowrap;
  color: rgba(22, 18, 13, 0.78);
  transition: color 0.3s ease;
}

/* Разделитель-точка между именами */
.clients__item + .clients__item::before {
  content: "·";
  display: inline-block;
  margin-right: clamp(1.5rem, 1.1429rem + 1.5238vw, 3rem);
  color: #c8102e;
}

/* Наведение: лента замирает, имя под курсором подсвечивается */
@media (hover: hover) and (pointer: fine) {
  .clients__marquee:hover .clients__item { color: rgba(22, 18, 13, 0.38); }
  .clients__marquee:hover .clients__item:hover { color: #16120d; }
}

/* При инверсии направления точки краснеют ярче */
.clients__marquee[data-marquee-status="inverted"] .clients__item + .clients__item::before {
  color: #ff5a5f;
}

@media (prefers-reduced-motion: reduce) {
  .clients__rail { transform: none !important; }
}

/* ============================================================
   Плашка теста · макет 2209:600
   Пропорции с макета: поля 6.9% ширины, радиус 9.3%,
   QR сверху, текст в три строки, подпись внизу.
   ============================================================ */

.quiz {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(1.125rem, 0.9821rem + 0.6095vw, 1.75rem);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: clamp(1.125rem, 0.9107rem + 0.9143vw, 2rem);
  background: #0a0a0a;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.quiz__qr {
  display: block;
  width: clamp(3.5rem, 2.9286rem + 2.4381vw, 5.875rem);
  height: auto;
  margin-bottom: clamp(1.25rem, 1.0714rem + 0.7619vw, 2rem);
  border-radius: 2px;
}

.quiz__lead {
  margin: 0 0 clamp(1.125rem, 0.9464rem + 0.7619vw, 1.875rem);
  font-family: var(--font-logo);
  font-size: clamp(1.125rem, 1.0417rem + 0.3704vw, 1.375rem);
  font-weight: 400;
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-head);
  color: var(--text);
}

.quiz__cta { gap: clamp(0.375rem, 0.3036rem + 0.3048vw, 0.6875rem); }

.quiz__label {
  padding: clamp(0.75rem, 0.6786rem + 0.3048vw, 1.0625rem)
           clamp(1.125rem, 0.9821rem + 0.6095vw, 1.75rem);
}

.quiz__meta {
  margin: clamp(1rem, 0.8571rem + 0.6095vw, 1.625rem) 0 0;
}

/* На больших экранах плашка и схема растут вместе с сеткой */
@media (min-width: 1600px) {
  .quiz { max-width: 21rem; }
}

/* ============================================================
   Крупные экраны: сетка, схема и карточки растут вместе
   ============================================================ */

/* Потолка по ширине у карточки нет: он упирал её в 512px, а колонка
   сетки продолжала расти — между карточками разверзались дыры
   (18px на 1440, 102 на 2560, 417 на 3840). Карточка растёт вместе
   с экраном, а зазор задан долей ширины ленты, поэтому отношение
   «зазор к карточке» одно и то же везде. */
@media (min-width: 1200px) {
  .cards { gap: 1.33%; }
}

/* Крупные экраны: заголовки и схема растут дальше единым шагом */
@media (min-width: 1440px) {
  /* H1 77 -> 112px, H2 58 -> 84px к 3840.
     Обе шкалы растут одним коэффициентом, иерархия не плывёт. */
  :root {
    --fs-h1: clamp(4.8125rem, 3.5rem + 1.4583vw, 7rem);
    --fs-h2: clamp(3.625rem, 2.65rem + 1.0833vw, 5.25rem);
    --fs-h3: clamp(2.875rem, 2.125rem + 0.8333vw, 4.1875rem);
    /* Мелкие ступени тоже растут: блоки на 4К увеличиваются, а текст
       оставался 14/18px — отношение заголовка к тексту уезжало
       с 3.2:1 до 4.7:1, и абзац растягивался на 200 знаков в строку. */
    --fs-s: clamp(0.875rem, 0.725rem + 0.1667vw, 1.125rem);
    --fs-m: clamp(1.125rem, 0.9375rem + 0.2083vw, 1.4375rem);
  }
}

@media (min-width: 1600px) {
  /* 46rem на 1440 -> 72rem на 3840: схема держит примерно
     треть ширины экрана, как на 1440. */
  .venn { max-width: clamp(46rem, 30.4rem + 17.3333vw, 72rem); }
}

@media (min-width: 1920px) {
  .clients__item { font-size: clamp(2.875rem, 1.5rem + 1.6vw, 3.5rem); }
}



/* ============================================================
   Динамика схемы: круги дышат и переливаются
   ============================================================ */

/* Стеклянные опоры медленно всплывают и меняют блик */
.venn-sec--flat .venn__circle--1,
.venn-sec--flat .venn__circle--2,
.venn-sec--flat .venn__circle--3 {
  animation: vDrift 14s ease-in-out infinite;
}
.venn-sec--flat .venn__circle--2 { animation-delay: -4.6s; animation-duration: 16s; }
.venn-sec--flat .venn__circle--3 { animation-delay: -9.2s; animation-duration: 15s; }

@keyframes vDrift {
  0%, 100% { translate: -50% -50%; }
  33%      { translate: -50% calc(-50% - 1.6%); }
  66%      { translate: calc(-50% + 1.2%) calc(-50% + 0.8%); }
}

/* Ядро пульсирует свечением — «деньги идут каждый день» */


/* Блик, скользящий по стеклу */
.venn-sec--flat .venn__circle--1::after,
.venn-sec--flat .venn__circle--2::after,
.venn-sec--flat .venn__circle--3::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: linear-gradient(115deg,
    transparent 38%,
    rgba(255, 255, 255, 0.07) 48%,
    transparent 58%);
  animation: vSheen 9s linear infinite;
}
.venn-sec--flat .venn__circle--2::after { animation-delay: -3s; }
.venn-sec--flat .venn__circle--3::after { animation-delay: -6s; }

@keyframes vSheen {
  0%   { opacity: 0; transform: translateX(-28%); }
  40%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(28%); }
}

/* Плашка теста — такое же стекло, как у кругов */
.venn-sec--flat .quiz {
  backdrop-filter: blur(22px) saturate(1.1);
  -webkit-backdrop-filter: blur(22px) saturate(1.1);
  background: linear-gradient(152deg,
    rgba(255, 255, 255, 0.075) 0%,
    rgba(255, 255, 255, 0.04) 45%,
    rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.2),
    0 18px 44px -20px rgba(0, 0, 0, 0.6);
}

/* Текст ядра строго по центру блоба.
   Сцена блоба стоит на top: 52.8%, а базовое правило .venn-core
   оставляло текст на 50% — он висел на ~15px выше центра. */
.venn-sec--flat .venn-core {
  display: grid;
  place-items: center;
  text-align: center;
  top: var(--core-y);
  /* Поверх WebGL-блоба */
  z-index: 3;
}

@media (prefers-reduced-motion: reduce) {
  .venn-sec--flat .venn__circle,
  .venn-sec--flat .venn__circle::after { animation: none; }
}


/* Плашка теста — ширина с макета 2209:600, стрелка вплотную */
.venn-sec--flat .quiz { max-width: 21rem; }
.venn-sec--flat .quiz__cta { gap: 0; }
.venn-sec--flat .quiz__icon { margin-left: 2px; }


/* Блок эксперта: фото и подпись выровнены по высоте */
.expert {
  align-items: start;
  justify-self: end;
}
.expert__body { display: grid; align-content: start; }
.expert__name { margin-top: -0.12em; }


/* Плашка теста: отступ снизу равен боковому полю секции */
.venn-sec--flat { padding-bottom: var(--gutter); }


/* На узких экранах плашка занимает колонку целиком —
   отступы слева, справа и снизу равны полю секции. */
@media (max-width: 1100px) {
  /* Сетка здесь двухколоночная — плашку растягиваем на всю
     ширину, чтобы её отступы справа и снизу были равны полю. */
  .venn-sec__inner > .quiz { grid-column: 1 / -1; }
  .venn-sec--flat .quiz { max-width: none !important; width: 100%; }
}


/* В колоночной раскладке плашка идёт последней — тогда её
   нижний отступ совпадает с боковым, как на десктопе. */
@media (max-width: 1100px) {
  .venn-sec__inner { grid-template-areas: "lede" "venn" "quiz"; }
  .venn-sec__inner > .quiz { grid-area: quiz; }
}

/* Подпись под кнопкой теста */
.quiz__meta { color: rgba(255, 255, 255, 0.7); }

/* ============================================================
   Радиальная бегущая строка
   Текст идёт по дуге очень большого круга и смещается вдоль неё.
   Живой текст в SVG — кириллица и Onest сохраняются.
   ============================================================ */

.clients__wave {
  position: relative;
  width: 100%;
  /* Обрезка по краям секции — как в эталоне: там строка уходит
     за кадр в полную силу, без растворения. */
  overflow: hidden;
}

.clients__svg {
  display: block;
  width: 100%;
  height: auto;
  /* Клиппинг по боксу: глифы выходили за верх viewBox на постоянные
     17 единиц, а те масштабируются вместе с экраном — на 4К это 47px,
     и строка налезала на подпись сверху. */
  overflow: hidden;
}

/* Кегль на 18% меньше прежнего, из нашей шкалы */
.clients__text {
  font-family: var(--font-logo);
  /* 14px на 360 -> 18px на 1440: компактная строка, не заголовок */
  font-size: clamp(0.875rem, 0.7917rem + 0.3704vw, 1.125rem);
  font-weight: 400;
  letter-spacing: var(--ls-title);
  fill: rgba(255, 255, 255, 0.82);
}
/* Точки-разделители красные — единственный акцент в полосе.
   Ярче --arc-high: на чёрном фоне при кегле 18px тот уходил в бурый. */
.clients__dot {
  fill: #d01420;
}

/* Ход строки: группа едет влево ровно на один повтор текста.
   Путь прямой, поэтому сдвиг по X равен длине повтора и шов не виден.
   Длину и длительность считает main.js от реального кегля. */
.clients__spin {
  transform-box: view-box;
  will-change: transform;
  animation: clientsRun var(--wave-dur, 30s) linear infinite;
}
@keyframes clientsRun {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--wave-shift, -1440px)); }
}
@media (hover: hover) and (pointer: fine) {
  .clients__wave:hover .clients__spin { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .clients__spin { animation: none; }
}

/* Наведение останавливает ход */
@media (hover: hover) and (pointer: fine) {
  .clients__wave:hover .clients__spin { animation-play-state: paused; }
}

@media (prefers-reduced-motion: reduce) {
  .clients__spin { animation: none; will-change: auto; }
}

/* ============================================================
   Карточки выезжают снизу: рывок — микропауза — доезд
   ============================================================ */

.situation .card {
  opacity: 0;
  translate: 0 46%;
}
.situation.is-in .card {
  /* Профиль снят покадрово с эталона (30 fps, 1333 мс, 650 px хода)
     и пересчитан в проценты своей высоты. Шаг кадров — 5% времени,
     поэтому собственная кривая уже внутри ключей: timing linear.
     Характер: короткий подъём на треть пути, микропауза на 25–35%
     времени (≈130 мс, за неё проходит 2% пути), затем основной ход
     и долгий выкат. */
  animation: cardSlide var(--dur-in) var(--ease-out) both;
  animation-delay: calc(var(--i) * 130ms);
}
/* Ход и кривая те же, что у веера и стопки. Прежние ключи держали
   плато на 205 мс посреди полёта и ещё 820 мс ползли последние 15%
   пути — анимация формально шла, визуально давно кончилась. */
@keyframes cardSlide {
  0%   { opacity: 0; translate: 0 46%; }
  70%  { opacity: 1; translate: 0 -0.5%; }
  100% { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .situation .card { opacity: 1; translate: none; animation: none; }
}


/* ============================================================
   Одометр: цифры прокручиваются барабаном
   ============================================================ */

.odo {
  display: inline-flex;
  /* flex-start, иначе барабан растягивается на высоту окна */
  align-items: flex-start;
  overflow: hidden;
  height: 1em;
  line-height: var(--lh-flat);
  vertical-align: baseline;
}
.odo__reel {
  display: flex;
  flex-direction: column;
  /* Барабан — flex-элемент окна высотой в одну цифру. Без запрета
     на сжатие WebKit ужимает его под окно, а вместе с ним и все
     41 цифру: в кадре оказывались половинки соседних. Chromium
     этого не делал, поэтому в замерах было чисто. */
  flex: none;
  will-change: transform;
  /* Переход убран: барабан крутит main.js покадрово, округляя
     до целого пикселя. Дробный сдвиг резал цифры пополам. */
}
/* Значение для скринридера: барабаны из разметки для него скрыты */
.odo-a11y {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.odo__reel span {
  flex: none;
  height: 1em;
  line-height: var(--lh-flat);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .odo__reel { transition: none; }
}

/* ============================================================
   Где утекают деньги · липкая лента карточек
   Блок фиксируется, прокрутка гонит карточки вбок. Когда пятая
   встала по краю сетки — фиксация снимается.
   ============================================================ */

.leaks {
  position: relative;
  z-index: 2;
  background: #ffffff;
  color: #16120d;
  /* Высота даёт запас прокрутки под горизонтальный ход */
  height: 260svh;
}

.leaks-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  /* Пропорции макета: шапка стоит на 18.7% высоты экрана, а низ
     чёрных карточек совпадает с низом экрана. Отсюда и «шапка выше,
     карточки ниже» — между ними пружина margin-top: auto. */
  justify-content: flex-start;
  /* Блок поднят: свободное место уходит вниз, а не встаёт
     распоркой между шапкой и карточками. */
  /* Чётные карточки подняты на 12.8% и прежде налезали на подзаголовок.
     Шапка ушла выше, просвет под ней вырос — конфликта больше нет. */
  padding-top: clamp(1.75rem, 8svh, 5rem);
  /* Снизу ровно столько же, сколько с боков: карточки не липнут
     к краю, но и дыры во весь экран не остаётся. */
  padding-bottom: var(--gutter);
  gap: clamp(1.25rem, 4.5svh, 3rem);
  overflow: hidden;
}

.leaks-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(1.5rem, 0.7857rem + 3.0476vw, 4.5rem);
  padding-inline: var(--gutter);
}

.leaks-title {
  margin: 0;
  font-family: var(--font-logo);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
}

.leaks-sub {
  margin: 0;
  /* pretty не оставляет коротких висячих строк и убирает лесенку */
  text-wrap: pretty;
  max-width: 44ch;
  justify-self: end;
  font-size: clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem);
  font-weight: 300;
  line-height: var(--lh-text-m);
  color: #6b655c;
}

/* ---------- Лента ---------- */

.leaks-rail {
  display: flex;
  /* 24px на 1440: прежние 13px при выросших карточках читались
     как слипшийся ряд. */
  gap: clamp(0.75rem, 0.5rem + 1.1111vw, 1.5rem);
  margin: 0;
  padding-inline: var(--gutter);
  list-style: none;
  width: max-content;
  will-change: transform;
}

.leak {
  position: relative;
  flex: none;
  /* Ширину считает main.js так, чтобы в кадр всегда попадали ровно
     четыре карточки и краешек пятой — на любом экране. Clamp остаётся
     запасным вариантом, если скрипт не отработал. */
  width: var(--leak-w, clamp(13rem, 9.6rem + 15.1vw, 18.8125rem));
  /* Текст внутри меряется от ширины карточки, а не от экрана: на 4К
     карточка вырастает до ~850px, и прежние 14px в ней терялись. */
  container-type: inline-size;
  aspect-ratio: 301 / 379;
  overflow: hidden;
  border-radius: clamp(0.875rem, 0.7321rem + 0.6095vw, 1.25rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  isolation: isolate;
}

/* Два уровня по высоте, как нарисовано: красные подняты, чёрные ниже.
   57px при высоте 446 — это 12.8%. */
.leak:nth-child(even) { translate: 0 -12.8%; }

.leak--dark {
  background:
    /* #100F0F вместо чистого чёрного: у карточек тёплая глубина,
       а не провал в ноль. */
    radial-gradient(120% 90% at 50% 120%, #1a1818 0%, #141212 55%, #100f0f 100%);
}
.leak--red {
  /* Пятно уходит в чёрный раньше и глубже — как нарисовано:
     красное держится в верхней трети, ниже почти уголь. */
  background:
    radial-gradient(108% 84% at 60% -10%,
      #ff2d1c 0%, #dd121b 16%, #7d0810 34%, #250709 56%, #16100f 76%, #100f0f 100%);
}

/* Вариант 2: вместо заливки — пиксельный дождь на холсте.
   Подложка почти угольная, весь цвет даёт сетка. */
.leak--pix {
  background:
    radial-gradient(120% 96% at 50% -12%, #1a1213 0%, #141011 50%, #0f0e0e 100%);
}
.leak__fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}
.leak--pix > .leak__tags,
.leak--pix > .leak__copy { position: relative; z-index: 1; }

/* Пилюли сверху — те же, что в карточках «Ситуации», их не трогаем */
.leak__tags {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: clamp(0.875rem, 0.7321rem + 0.6095vw, 1.25rem);
}

.leak__copy {
  position: relative;
  padding: 0 clamp(0.875rem, 0.7321rem + 0.6095vw, 1.25rem) 32px;
  color: #fff;
}

/* Число и заголовок — ОДИН кегль, тот же, что в карточках «Ситуации».
   Раньше здесь стояли две разные мелкие ступени, и блок слипался. */
/* Число — часть заголовка: тот же цвет, то же начертание.
   Разный вес и приглушённый белый дробили строку на два уровня. */
.leak__name {
  margin: 0;
  font-family: var(--font-logo);
  /* 24px при карточке 301 -> 34px при 850 */
  font-size: clamp(1.0625rem, 1.1575rem + 1.821cqw, 2.125rem);
  font-weight: 600;
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  color: #fff;
}
.leak__num { font: inherit; color: inherit; }

.leak__text {
  margin: clamp(0.5rem, 0.4286rem + 0.3048vw, 0.8125rem) 0 0;
  font-size: var(--fs-s);
  font-weight: 300;
  line-height: var(--lh-text-s);
  color: rgba(255, 255, 255, 0.82);
}

/* ---------- Мобильные: обычная лента со свайпом ---------- */

@media (max-width: 900px) {
  .leaks { height: auto; }
  .leaks-sticky { position: static; height: auto; padding-block: clamp(3.5rem, 2.6667rem + 3.7037vw, 6rem); }
  .leaks-rail {
    width: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    transform: none !important;
  }
  .leaks-rail::-webkit-scrollbar { display: none; }
  .leak { scroll-snap-align: start; width: min(72vw, 17rem); }
  .leak:nth-child(even) { translate: none; }
  .leaks-head { grid-template-columns: minmax(0, 1fr); }
  .leaks-sub { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .leaks { height: auto; }
  .leaks-sticky { position: static; height: auto; }
  .leaks-rail { transform: none !important; overflow-x: auto; width: auto; }
}


/* ============================================================
   Мост: карточка по эталону. Слева градиентная панель, справа
   мета, текст и подвал: пилюля слева, круглая кнопка справа.
   ============================================================ */

.bridge {
  /* Тот же белый, что у блока утечек сверху: деления по фону
     между ними быть не должно. */
  background: #fff;
  color: #16120d;
  padding: clamp(3rem, 2.0179rem + 4.1905vw, 7.0625rem) var(--gutter);
  display: grid;
  place-items: center;
}

.bridge__card {
  display: grid;
  grid-template-columns: minmax(0, 0.47fr) minmax(0, 0.53fr);
  align-items: stretch;
  gap: clamp(1rem, 0.7857rem + 0.9143vw, 1.875rem);
  width: min(100%, 68rem);
  padding: clamp(0.625rem, 0.5357rem + 0.381vw, 0.9375rem);
  border-radius: clamp(1rem, 0.8571rem + 0.6095vw, 1.625rem);
  /* Плашка сероватая — токен --text-dim из палитры. Нейтральный:
     R и B равны, желтизны прежнего #f4f3f1 в нём нет. */
  background: var(--text-dim);
  /* Мягкая подложка: на белом фоне плашка иначе не отделяется */
  box-shadow: 0 18px 50px -24px rgba(22, 18, 13, 0.18);
}

.bridge__visual {
  border-radius: clamp(0.625rem, 0.5357rem + 0.381vw, 0.9375rem);
  /* Панель шире — значит ниже, иначе карточка вытягивается в столб */
  aspect-ratio: 300 / 250;
  /* Красный фирменный по всему полю: светлые внешние стопы делали
     панель выцветшей, розоватой. */
  background:
    radial-gradient(118% 104% at 60% 88%,
      #ff2a18 0%, #e2121a 20%, #b00d18 42%, #7a0912 66%, #45050c 86%, #2a0408 100%);
}

.bridge__body {
  display: flex;
  flex-direction: column;
  padding: clamp(0.75rem, 0.6071rem + 0.6095vw, 1.375rem)
           clamp(0.5rem, 0.4286rem + 0.3048vw, 0.8125rem)
           clamp(0.5rem, 0.4286rem + 0.3048vw, 0.8125rem)
           clamp(0.25rem, 0.1786rem + 0.3048vw, 0.5625rem);
}
.bridge__meta {
  margin: 0 0 0.5em;
  font-size: var(--fs-m);
  font-weight: 300;
  line-height: var(--lh-text-m);
  color: #9a948c;
}
.bridge__text {
  margin: 0;
  max-width: 30ch;
  /* Ближайшая существующая ступень крупнее --fs-m: кегль заголовка
     карточек, 24px на 1440. Между ним и --fs-h3 (46px) в шкале пусто. */
  font-size: clamp(1.0625rem, 0.9554rem + 0.4571vw, 1.5rem);
  font-weight: 500;
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-title);
  color: #16120d;
}

/* Подвал прижат к низу: пилюля слева, круг справа — как в эталоне */
.bridge__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: clamp(1.5rem, 1.1667rem + 1.4222vw, 3rem);
  --cta-h: clamp(2.75rem, 2.4643rem + 1.219vw, 3.5rem);
}
.bridge__pill {
  display: inline-flex;
  align-items: center;
  /* Высота задана явно и тем же числом, что у круга: у пилюли она
     иначе считается от кегля и строки, и кнопки выходили разными. */
  height: var(--cta-h);
  padding: 0 1.45em;
  border-radius: 999px;
  background: #16120d;
  color: #fff;
  font-size: var(--fs-s);
  font-weight: 400;
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.24s ease, color 0.24s ease;
}
.bridge__pill:hover { background: var(--arc-high); color: #fff; }

.bridge__round {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--cta-h);
  height: var(--cta-h);
  border-radius: 50%;
  background: #16120d;
  color: #fff;
  text-decoration: none;
  transition: background 0.24s ease;
}
/* Обёртка строчная, и стрелка вставала по базовой линии —
   отсюда смещение вниз. Гасим строку целиком. */
.bridge__round > span { display: grid; place-items: center; line-height: 0; }
.bridge__round svg { display: block; width: 34%; }
.bridge__round:hover { background: var(--arc-high); }
.bridge__round:hover svg { transform: translate(2px, -2px); }
.bridge__round svg { transition: transform 0.24s ease; }

@media (max-width: 720px) {
  .bridge__card { grid-template-columns: minmax(0, 1fr); }
  .bridge__visual { aspect-ratio: 16 / 10; }
}

/* ============================================================
   Наш подход. Композиция референса: в одной рамке слева текст,
   справа лента карточек, которая едет вбок.
   ============================================================ */

.approach {
  background: var(--bg);
  color: var(--text);
  /* Блок держит экран: пока он не встал по центру, лента стоит.
     Дальше каждый скролл доводит карточки. */
  height: 200svh;
}
.approach__stick {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  align-content: center;
  padding: clamp(2.5rem, 1.7857rem + 3.0476vw, 5.5rem) var(--gutter);
  overflow: hidden;
}
@media (max-width: 1000px) {
  .approach { height: auto; }
  .approach__stick { position: static; height: auto; overflow: visible; }
}

.approach__lede {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(1.25rem, 1rem + 1.0667vw, 2rem);
}
.approach__eyebrow {
  margin: 0;
  /* Без красного и без широкой разрядки: надзаголовок тихий */
  font-size: var(--fs-s);
  font-weight: 400;
  letter-spacing: var(--ls-text);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.approach__title {
  margin: 0;
  overflow-wrap: anywhere;
  font-family: var(--font-logo);
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
}
.approach__sub {
  margin: 0;
  max-width: 44ch;
  font-size: var(--fs-m);
  font-weight: 300;
  line-height: var(--lh-text-m);
  color: var(--muted);
}

/* Лента: карточки едут вбок пальцем, трекпадом или колесом.
   scroll-snap ловит карточку по левому краю, чтобы лента
   не замирала на полукарточке. */
.approach__rail {
  display: flex !important;
  flex-direction: row !important;
  gap: clamp(0.75rem, 0.6071rem + 0.6095vw, 1.625rem);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;   /* ход даёт main.js, нативной полосы не нужно */
}
.approach__rail > .step { flex: none; }

/* Ход ленты считает main.js от прокрутки блока */
.approach__track {
  display: flex;
  gap: inherit;
  will-change: transform;
}

.step {
  position: relative;
  overflow: hidden;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  /* Две карточки в кадре и краешек третьей — как в референсе */
  --step-w: clamp(13rem, 6rem + 21vw, 24rem);
  width: var(--step-w);
  /* Пропорция из макета: 384 × 291. Именно min-height, а не
     aspect-ratio: на 4K кегли крупнее, и жёсткая высота срезала
     последнюю строку вместо того, чтобы дать карточке подрасти. */
  min-height: calc(var(--step-w) * 291 / 384);
  padding: clamp(1.125rem, 0.9821rem + 0.6095vw, 1.75rem);
  border-radius: clamp(0.875rem, 0.7321rem + 0.6095vw, 1.25rem);
  border: 1px solid transparent;
}

/* Три ступени: светлая с «солнцем», тёмная, светлая с «зарёй».
   Графика — из макета, собрана из тех же слоёв. */
/* Картинка кладётся ровно по ширине и от верхнего края, без cover:
   карточка бывает на 5–25px выше макета, и cover растягивал графику
   по высоте — солнце съезжало на заголовок, а по краям от дробного
   масштаба оставалась светлая кромка. Низ добирается фоном. */
.step--light {
  background: #f5f5f5 url("assets/cards/approach-1.jpg") 0 0 / 100% auto no-repeat;
  color: #16120d;
}
/* Графика занимает правый верх — строку туда не пускаем */
.step--light .step__name { max-width: 82%; }
.step--light .step__num  { border-color: rgba(22, 18, 13, 0.22); color: rgba(22, 18, 13, 0.62); }
.step--light .step__name { color: #16120d; }
.step--light .step__text { color: #6b655c; }

.step--grey {
  background: #1b1b1c;
  border-color: rgba(255, 255, 255, 0.08);
}

.step--dawn {
  border-color: transparent;
  background: #f5f5f5 url("assets/cards/approach-3.jpg") 0 0 / 100% auto no-repeat;
  color: #16120d;
}
.step--dawn .step__num  { border-color: rgba(22, 18, 13, 0.22); color: rgba(22, 18, 13, 0.62); }
.step--dawn .step__name { color: #16120d; }
.step--dawn .step__text { color: #6b655c; }

.step__num {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5em;
  padding: 0.35em 0.75em;
  /* Отступ из макета: заголовок начинается на 134px от верха
     карточки 291. Постоянный, чтобы заголовки всех трёх карточек
     стояли на одной линии. */
  margin-bottom: clamp(1.75rem, 0.6667rem + 4.8148vw, 5rem);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  font-size: var(--fs-s);
  font-weight: 400;
  line-height: var(--lh-title);
  color: rgba(255, 255, 255, 0.72);
}
.step__name {
  margin: 0;
  font-family: var(--font-logo);
  font-size: clamp(1.0625rem, 0.9554rem + 0.4571vw, 1.5rem);
  font-weight: 600;
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  color: #fff;
}
.step__text {
  margin: clamp(0.5rem, 0.4286rem + 0.3048vw, 0.8125rem) 0 0;
  font-size: var(--fs-s);
  font-weight: 300;
  line-height: var(--lh-text-s);
  color: rgba(255, 255, 255, 0.82);
}

@media (max-width: 1000px) {
  .step { width: min(78vw, 20rem); }
  .approach__rail { overflow-x: auto; }
}


/* ============================================================
   На чём держатся системные продажи. Три источника выручки
   лежат колодой: прокрутка блока перелистывает карточки.
   ============================================================ */

.sources {
  background: #fff;
  color: #16120d;
  padding: clamp(3.5rem, 2.2321rem + 5.4127vw, 8.75rem) var(--gutter);
}
.sources__title {
  margin: 0;
  font-family: var(--font-logo);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
}


/* ---------- Веер источников ----------
   Три карточки лежат раскрытым веером и по очереди влетают снизу
   с перелётом: каждая проскакивает место и возвращается. Порядок
   и наклоны сняты с эталона. */

.fan {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  /* Высота под крупные вертикальные карточки плюс запас на наклон.
     Запас был вдвое больше нужного — на низких экранах он съедал
     ширину карточек, и текст упирался в соседнюю. */
  aspect-ratio: 660 / 385;
}
.fan__card {
  position: absolute;
  /* Положение задаёт main.js от прокрутки — чтобы ход отыгрывал
     и вперёд, и назад, сколько угодно раз. */
  will-change: transform, opacity;
  top: var(--y);
  /* Шаг больше половины карточки: при плотной раскладке соседняя
     накрывала заголовок, и читать было нечего. */
  /* Шаг 33%: при 26% соседка срезала 46% ширины карточки
     и заголовок читался как «Воронки и окна про…». */
  left: calc(var(--i) * 31%);
  width: 38%;
  aspect-ratio: 300 / 360;
  display: flex;
  flex-direction: column;
  padding: clamp(0.875rem, 0.7321rem + 0.6095vw, 1.5rem);
  border-radius: clamp(0.75rem, 0.6429rem + 0.4571vw, 1.1875rem);
  rotate: var(--r);
  transform-origin: 50% 90%;
  opacity: 0;
}
/* Соседняя карточка накрывает правый край: у всех, кроме последней,
   держим текст левее зоны перекрытия — иначе слово режется пополам. */
.fan__card:not(:last-child) {
  padding-right: calc(clamp(0.875rem, 0.7321rem + 0.6095vw, 1.5rem) + 7%);
}
.fan__card--light { --y: 9%;  --r: -6deg; background: #f5f5f5; color: #16120d; }
.fan__card--grey  { --y: 0%;  --r:  3deg; background: #1b1b1c; }
.fan__card--red   { --y: 5%;  --r:  4deg;
  background:
    radial-gradient(118% 92% at 62% -8%,
      #d0101c 0%, #8e0a12 30%, #3a060b 62%, #0d0304 86%, #060202 100%); }

  72%  { opacity: 1; translate: 0 -0.6%; }   /* перелёт как в эталоне */
  100% { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fan__card { opacity: 1; animation: none; }
}

.source__num {
  margin-bottom: clamp(1.25rem, 1rem + 1.0667vw, 2rem);
  font-size: var(--fs-s);
  font-weight: 400;
  letter-spacing: var(--ls-text);
  color: rgba(255, 255, 255, 0.72);
}
.source__name {
  margin: 0;
  font-family: var(--font-logo);
  font-size: clamp(1.0625rem, 0.9554rem + 0.4571vw, 1.5rem);
  font-weight: 600;
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  color: #fff;
}
.source__text {
  margin: clamp(0.5rem, 0.4286rem + 0.3048vw, 0.8125rem) 0 0;
  font-size: var(--fs-s);
  font-weight: 300;
  line-height: var(--lh-text-s);
  color: rgba(255, 255, 255, 0.82);
}
.fan__card--light .source__num  { color: rgba(22, 18, 13, 0.6); }
.fan__card--light .source__name { color: #16120d; }
.fan__card--light .source__text { color: #6b655c; }


@media (max-width: 900px) {
  .deck { width: 100%; }
}


/* ============================================================
   Общая рамка новых блоков: слева текст, справа карточки.
   Композиция одна на три блока — они читаются как серия.
   ============================================================ */

.frame {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: stretch;
  gap: clamp(1.5rem, 0.8333rem + 2.8444vw, 4rem);
  padding: clamp(1.5rem, 1rem + 2.1333vw, 3.5rem);
  border: 1px solid;
  border-radius: clamp(1.25rem, 1rem + 1.0667vw, 2rem);
}
.frame__lede {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--pill-gap);
}
/* Отступ держит сама пилюля — иначе к gap прибавляется её margin */
.frame__lede > .frame__eyebrow,
.frame__lede > .approach__eyebrow { margin-bottom: 0; }
/* Заголовок с подзаголовком идут одним блоком по центру колонки,
   мелкие подписи прижаты к её краям. */
.sources__mid { align-self: center; }
.sources__mid .frame__sub { margin-top: 0.75em; }
.frame__side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.frame__eyebrow {
  margin: 0;
  font-size: var(--fs-s);
  font-weight: 400;
  letter-spacing: var(--ls-text);
  text-transform: uppercase;
}
.frame__sub {
  margin: 0;
  overflow-wrap: anywhere;
  max-width: 46ch;
  font-size: var(--fs-m);
  font-weight: 300;
  line-height: var(--lh-text-m);
}
.frame__note {
  margin: 0;
  font-size: var(--fs-s);
  font-weight: 400;
  letter-spacing: var(--ls-text);
  text-transform: uppercase;
}

/* Светлые блоки и тёмные берут рамку одного строя, разной светлоты */
.bridge .frame,
.sources .frame { border-color: rgba(22, 18, 13, 0.14); }
/* Рамки нет: блок идёт в общей сетке страницы, как остальные */
.approach .frame {
  border: 0;
  padding: 0;
  border-radius: 0;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}
.approach__side { min-width: 0; justify-content: center; }

.sources .frame__eyebrow { color: #8d8880; }
.sources .frame__sub     { color: #6b655c; }
.sources .frame__note    { color: #8d8880; }
/* Без красного и без разрядки: надзаголовок тихий */
.approach .frame__eyebrow {
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: var(--ls-text);
}
.approach .frame__sub     { color: var(--muted); }

@media (max-width: 1000px) {
  /* .approach .frame имеет специфичность выше — медиазапрос сам по себе
     её не добавляет, поэтому дублируем селектор явно. */
  .frame,
  .approach .frame { grid-template-columns: minmax(0, 1fr); }
}


/* ---------- Микроэлементы по углам схемы ----------
   Композиция уравновешивается двумя мелочами: подпись студии
   слева внизу набирается и стирается, справа сверху — тихая
   строка с пульсирующей точкой. */

.venn-sec { --mark: rgba(255, 255, 255, 0.34); }

.venn-mark,
.venn-tick {
  position: absolute;
  z-index: 3;
  margin: 0;
  font-size: var(--fs-s);
  font-weight: 400;
  letter-spacing: var(--ls-text);
  text-transform: uppercase;
  color: var(--mark);
  pointer-events: none;
}
.venn-mark {
  left: var(--gutter);
  bottom: clamp(1.5rem, 1.2321rem + 1.1429vw, 2.625rem);
}
.venn-mark__type::after {
  /* Курсор стоит вплотную к последней букве */
  content: "";
  display: inline-block;
  width: 1px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.12em;
  background: var(--arc-high);
  animation: markCaret 1.05s steps(1, end) infinite;
}
@keyframes markCaret { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

.venn-tick {
  right: var(--gutter);
  top: clamp(1.5rem, 1.2321rem + 1.1429vw, 2.625rem);
  display: flex;
  align-items: center;
  gap: 0.6em;
  letter-spacing: var(--ls-text);
  text-transform: none;
}
.venn-tick__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--arc-high);
  animation: tickPulse 2.4s ease-in-out infinite;
}
@keyframes tickPulse {
  0%, 100% { opacity: 0.35; transform: scale(0.8); }
  50%      { opacity: 1;    transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .venn-mark__type::after,
  .venn-tick__dot { animation: none; }
}
@media (max-width: 1100px) {
  .venn-mark, .venn-tick { display: none; }
}

/* ---------- Кейс: светлый ---------- */

.case-sec {
  background: #fff;
  color: #16120d;
}
.case-kicker      { color: #8d8880; }
.case-meta,
.case-num__l,
.case-step__t     { color: #6b655c; }
.case-title,
.case-num__v,
.case-step__h     { color: #16120d; }
.case-step {
  border: 1px solid rgba(22, 18, 13, 0.12);
  background: rgba(22, 18, 13, 0.018);
}
.case-step__n { color: #8d8880; }

/* Нижний ряд карточек стоит по общей линии: тексты разной длины,
   а низ у всех один. */
.case-steps { align-items: stretch; }
.case-step  { display: flex; flex-direction: column; }
.case-step__t { margin-top: auto; }

/* Превью аватарки справа от имени */
.case-title { display: flex; align-items: center; gap: 0.5em; }
.case-avatar {
  flex: none;
  width: clamp(2.25rem, 1.9643rem + 1.219vw, 3.5rem);
  aspect-ratio: 1;
  border: 1px solid rgba(22, 18, 13, 0.18);
  border-radius: 50%;
}


/* ============================================================
   Кто и как продаёт · стопка карточек
   Каждая следующая наезжает снизу и накрывает предыдущую,
   оставляя от неё сверху полосу с номером. Две версии:
   --lock перехватывает скролл, --flow листается проходом.
   ============================================================ */

.stack {
  position: relative;
  background: #fff;
  color: #16120d;
}
.stack__sticky {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 1rem + 1.0667vw, 2rem);
  padding: clamp(2.5rem, 1.7857rem + 3.0476vw, 5.5rem) var(--gutter);
}
/* Высоту задаёт main.js от числа карточек — здесь только запас
   на случай, если скрипт не отработал. */
.stack--lock { min-height: 100svh; }
.stack--lock .stack__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  justify-content: center;
  overflow: hidden;
}
/* Площадка блочная: карточки в ней абсолютные, и flex схлопывал
   ленту по содержимому — ширина уходила в ноль. */
.stack__area { display: block; }
.stack__list { width: 100%; }

.stack__head { display: grid; gap: 0; }
.stack__title {
  margin: 0;
  font-family: var(--font-logo);
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
}


/* Площадка держит высоту: карточки в ней лежат абсолютом */
.stack__area { position: relative; }
.stack__list {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  height: 100%;
}
.stack__card {
  /* 27% высоты карточки: в щель должна целиком влезать цифра */
  --peek: clamp(5rem, 13svh, 8rem);
  position: absolute;
  left: 50%;
  translate: -50% 0;
  /* Карточка не во всю сетку: в эталоне она уже и заметно выше,
     номер наверху, заголовок и текст прижаты к низу. */
  width: min(100%, 62rem);
  top: calc(var(--i) * var(--peek));
  display: flex;
  flex-direction: column;
  /* Ближе к пропорции эталона: там карточка заметно выше */
  /* 46svh: при 52 последняя карточка не помещалась в фиксацию
     и её накрывал следующий блок. */
  min-height: clamp(14rem, 46svh, 26rem);
  padding: clamp(1.25rem, 1rem + 1.0667vw, 2.25rem)
           clamp(1.375rem, 1.0714rem + 1.2952vw, 2.75rem);
  border: 1px solid rgba(22, 18, 13, 0.1);
  border-radius: clamp(0.875rem, 0.7321rem + 0.6095vw, 1.5rem);
  background: #fff;
  will-change: transform;
}
/* Контраст по тону: иначе белая карточка наезжает на белую
   и наезд читается только по волосяной линии. */
.stack__card:nth-child(2) { background: #ebebeb; }
.stack__card:nth-child(3) { background: #16120d; border-color: transparent; }
.stack__card:nth-child(3) .stack__num  { color: rgba(255, 255, 255, 0.5); }
.stack__card:nth-child(3) .stack__name { color: #fff; }
.stack__card:nth-child(3) .stack__text { color: rgba(255, 255, 255, 0.78); }
/* Последняя — красная: серия на ней закрывается. Фон — наша
   картинка, а не собственный градиент: тот на белом читался
   как грубая красно-чёрная заливка. */
.stack__card:last-child {
  position: relative;
  overflow: hidden;
  border-color: transparent;
  background: #1a0305 url("assets/cards/card-1.jpg") center / cover no-repeat;
}
.stack__card:last-child::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.38) 52%, rgba(0, 0, 0, 0.72) 100%);
}
.stack__card:last-child > * { position: relative; z-index: 1; }
.stack__card:last-child .stack__num  { color: rgba(255, 255, 255, 0.6); }
.stack__card:last-child .stack__name { color: #fff; }
.stack__card:last-child .stack__text { color: rgba(255, 255, 255, 0.82); }

.stack__num {
  /* Номер наверху, всё остальное уезжает к низу карточки */
  margin-bottom: auto;
  /* Цифра крупная: она единственное, что видно в щели стопки */
  font-family: var(--font-logo);
  font-size: clamp(1.25rem, 1.0714rem + 0.7619vw, 2rem);
  font-weight: 400;
  line-height: var(--lh-flat);
  letter-spacing: var(--ls-title);
  color: rgba(22, 18, 13, 0.45);
}
.stack__name {
  margin: 0;
  font-family: var(--font-logo);
  font-size: clamp(1.0625rem, 0.9554rem + 0.4571vw, 1.5rem);
  font-weight: 600;
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
}
.stack__text {
  margin: 0.45rem 0 0;
  max-width: 56ch;
  font-size: var(--fs-s);
  font-weight: 300;
  line-height: var(--lh-text-m);
  color: #6b655c;
}

@media (max-width: 900px) {
  .stack--lock { height: auto; }
  .stack--lock .stack__sticky { position: static; height: auto; }
  /* translate — отдельное свойство, transform: none его не сбрасывает:
     карточка уезжала влево на половину своей ширины. */
  .stack__card {
    position: static;
    left: auto;
    width: 100%;
    margin-bottom: 0.75rem;
    transform: none !important;
    translate: none !important;
  }
  .stack__list { height: auto !important; }
}
@media (prefers-reduced-motion: reduce) {
  .stack--lock { height: auto; }
  .stack--lock .stack__sticky { position: static; height: auto; }
  /* translate — отдельное свойство, transform: none его не сбрасывает:
     карточка уезжала влево на половину своей ширины. */
  .stack__card {
    position: static;
    left: auto;
    width: 100%;
    margin-bottom: 0.75rem;
    transform: none !important;
    translate: none !important;
  }
  .stack__list { height: auto !important; }
}


/* ============================================================
   Мобильные доводки
   ============================================================ */

@media (max-width: 480px) {
  /* Цифры первого экрана — центрированная колонка в узкой плашке,
     как в макете. Чтобы экран закрывался, поджаты только отступы
     и подпись держится в две строки: раскладку не трогаем. */
  .stats__inner {
    flex-direction: column;
    align-items: center;
    gap: clamp(1rem, 3.2svh, 1.75rem);
    width: min(13rem, 100%);
    padding: clamp(0.875rem, 2.4svh, 1.375rem) 1.25rem;
  }
  .stat {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.3rem;
  }
  .stat__value { font-family: var(--font-ui); }
  .stat__label {
    max-width: none;
    text-align: center;
    font-family: var(--font-ui);
    line-height: var(--lh-text-m);
    text-wrap: balance;
  }
}

@media (max-width: 900px) {
  /* Утечки: липкая лента отключена, карточки листаются пальцем
     по одной и стоят в полях сетки — раньше они упирались
     в левый край и текст читался с трудом. */
  .leaks { height: auto !important; }
  .leaks-sticky {
    position: static;
    height: auto;
    padding-top: 0;
    overflow: visible;
  }
  .leaks-rail {
    width: auto;
    padding-top: 0 !important;
    padding-inline: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    transform: none !important;
  }
  .leaks-rail::-webkit-scrollbar { display: none; }
  .leak {
    width: min(78vw, 19rem) !important;
    scroll-snap-align: center;
    translate: none !important;
  }

  /* Карточки подхода и стопка — тоже без перехвата прокрутки */
  .approach__rail { padding-inline: 0; }
}


/* Вращающийся блик внутри опор — CSS-аналог того, что в ядре делает
   шейдер. Блик смещён от центра, а вращается вокруг него: за счёт
   этого светлое пятно обходит круг, как по стеклу. У каждого круга
   свой период, иначе три пятна ходят строем. */
.venn__circle--1::before,
.venn__circle--2::before,
.venn__circle--3::before {
  content: "";
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(closest-side circle at 34% 28%,
      rgba(255, 255, 255, 0.26) 0%,
      rgba(255, 255, 255, 0.12) 34%,
      rgba(255, 255, 255, 0.03) 58%,
      rgba(255, 255, 255, 0) 76%);
  animation: vOrbit 22s linear infinite;
}
/* Второй блик снят: на полосе 1700–2400px и так тяжело от
   backdrop-filter, а четыре бесконечные анимации роняли кадры
   до 20 fps. Объём держит первый блик и кольцо по кромке. */
.venn__circle--2::before { animation-duration: 27s; animation-delay: -9s; }
.venn__circle--3::before { animation-duration: 19s; animation-delay: -14s; }

@keyframes vOrbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .venn__circle--1::before,
  .venn__circle--2::before,
  .venn__circle--3::before { animation: none; }
}

/* Название на светлом; цвет пилюли — в общем блоке надзаголовков */
.stack__title { color: #16120d; }


/* ============================================================
   Кнопки: один строй. Высота, кегль, вес, трекинг и поля везде
   одинаковые — кроме кнопки в шапке, у неё свой, более тихий вид.
   ============================================================ */

.hero__cta-label,
.quiz__label,
.bridge__pill,
.sheet .sheet__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-h);
  padding: 0 1.9em;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: var(--fs-s);
  font-weight: 500;
  letter-spacing: var(--ls-btn);
  line-height: var(--lh-flat);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Круглые спутники — той же высоты, что и пилюля рядом */
.hero__cta-icon,
.quiz__icon,
.bridge__round {
  width: var(--btn-h);
  height: var(--btn-h);
  aspect-ratio: auto;
}


/* Отзывы: надзаголовок, тег и цитата. Дизайн карточки прежний —
   добавлены только текстовые строки над подписью. */
.reviews__eyebrow {
  margin: 0 0 clamp(0.75rem, 0.6071rem + 0.6095vw, 1.375rem);
  font-size: var(--fs-s);
  font-weight: 400;
  letter-spacing: var(--ls-text);
  text-transform: uppercase;
  color: #8d8880;
}
.vreview__tag {
  margin: clamp(0.75rem, 0.6429rem + 0.4571vw, 1.1875rem) 0 0.4em;
  font-size: var(--fs-s);
  font-weight: 500;
  letter-spacing: var(--ls-text);
  text-transform: uppercase;
  color: #8d8880;
}
.vreview__quote {
  margin: 0 0 0.45em;
  font-family: var(--font-logo);
  font-size: clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem);
  font-weight: 500;
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-title);
  text-wrap: pretty;
}


/* ============================================================
   Опросник перед подвалом. Форма та же, что у карточки моста:
   слева визуал с заголовком, справа вопрос с вариантами.
   ============================================================ */

/* ============================================================
   Версии-двойники для выбора
   ============================================================ */

/* Утечки · светлая: белый фон, карточки того же серого, что плашка
   опросника (--text-dim), текст тёмный. */
.leaks--light { background: #fff; }
.leaks--light .leaks-title { color: #16120d; }
.leaks--light .leaks-sub   { color: #6b655c; }
.leaks--light .leak--dark,
.leaks--light .leak--red {
  background: var(--text-dim);
  border: 1px solid rgba(22, 18, 13, 0.08);
}
.leaks--light .leak__name { color: #16120d; }
.leaks--light .leak__num  { color: #16120d; }
.leaks--light .leak__text { color: #6b655c; }
.leaks--light .card__num,
.leaks--light .card__tag {
  border-color: rgba(22, 18, 13, 0.22);
  color: #6b655c;
}

/* Источники · заголовок по центру страницы, карточки под ним */
.sources--center .frame {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}
.sources--center .frame__lede {
  display: block;
  max-width: 46rem;
  text-align: center;
}
.sources--center .sources__mid { align-self: auto; }
.sources--center .frame__sub { margin-inline: auto; }
.sources--center .frame__note { margin-top: 1.25em; }
.sources--center .frame__side {
  width: 100%;
  align-items: center;
  margin-top: clamp(2rem, 1.4464rem + 2.3619vw, 4.3125rem);
}
.sources--center .fan { max-width: 58rem; margin-inline: auto; }

/* Источники · фиксация скролла. Раньше ход считался от верха секции,
   а карточки лежат в её низу: к моменту, когда до них доезжаешь,
   веер уже собран. Теперь блок прилипает, и подъём ведёт прокрутка —
   быстрее крутишь, быстрее встают. Высоту секции задаёт main.js. */
.sources--lock { padding-block: 0; }
.sources--lock .sources__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Поля тут тише обычных: экран один, и всё, что уходит в отступы,
     отнимается у карточек — на 720px они иначе сжимались до 227px
     и заголовок «Воронки и окна продаж» не влезал в строку. */
  padding-block: clamp(1rem, 2.5svh, 2.5rem);
  /* Карточки стартуют ниже своего места — за край их не выпускаем */
  overflow: hidden;
}
.sources--lock .frame__side { margin-top: clamp(1rem, 3svh, 2.5rem); }
/* На узких экранах веер — обычная колонка, фиксация там не нужна */
@media (max-width: 720px) {
  .sources--lock { padding-block: clamp(3.5rem, 2.2321rem + 5.4127vw, 8.75rem); }
  .sources--lock .sources__sticky {
    position: static;
    height: auto;
    padding-block: 0;
    overflow: visible;
  }
  .sources--lock .frame__side { margin-top: clamp(2rem, 1.4464rem + 2.3619vw, 4.3125rem); }
}
@media (prefers-reduced-motion: reduce) {
  .sources--lock { padding-block: clamp(3.5rem, 2.2321rem + 5.4127vw, 8.75rem); }
  .sources--lock .sources__sticky {
    position: static;
    height: auto;
    padding-block: 0;
    overflow: visible;
  }
  .sources--lock .frame__side { margin-top: clamp(2rem, 1.4464rem + 2.3619vw, 4.3125rem); }
}

/* Стопка · заголовок по центру, как просили для всех блоков-двойников */
.stack__head { text-align: center; }


/* Веер на узких экранах: карточки становятся обычной колонкой.
   В веере они перекрываются на треть — на 402px это оставляло
   13 знаков в строке, читать было нечего. */
@media (max-width: 720px) {
  .fan {
    aspect-ratio: auto;
    display: grid;
    gap: clamp(0.5rem, 0.4286rem + 0.3048vw, 0.8125rem);
  }
  .fan__card {
    position: static;
    width: 100%;
    aspect-ratio: auto;
    min-height: clamp(11rem, 30svh, 15rem);
    rotate: none;
    opacity: 1;
    animation: none;
  }
  }


/* ============================================================
   Надзаголовки — пилюли. Разрядки капсом у нас нигде нет, а
   пилюля есть: та же типографика, что у тегов на карточках.
   ============================================================ */

.frame__eyebrow,
.approach__eyebrow,
.cases__eyebrow,
.reviews__eyebrow,
.why__eyebrow,
.vreview__tag,
.quizform__step,
.ccard__tag,
.cmodal__tag {
  display: inline-flex;
  align-items: center;
  /* Родители бывают и flex, и grid — держим обе оси, иначе
     в grid пилюля растягивается во всю колонку. */
  align-self: flex-start;
  justify-self: start;
  width: fit-content;
  /* Пилюля никогда не прижимается к тексту под собой */
  margin-bottom: var(--pill-gap);
  padding: 0.5em 1.1em;
  border: 1px solid;
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-ui);
  /* Без капса и без разрядки: пилюля — тихая подпись, а не крик */
  font-size: var(--fs-pill);
  font-weight: 400;
  line-height: var(--lh-title);
  letter-spacing: var(--ls-text);
  text-transform: none;
}
/* На тёмном — светлая обводка, на светлом — тёмная */
.approach__eyebrow,
.why__eyebrow,
.reviews__eyebrow,
.vreview__tag {
  border-color: rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.72);
}
.cases__eyebrow,
.stack .frame__eyebrow,
.sources .frame__eyebrow,
.quizform__step,
.ccard__tag,
.cmodal__tag {
  border-color: rgba(22, 18, 13, 0.22);
  color: #6b655c;
}
/* В блоках с центровкой пилюля тоже по центру */
.sources--center .frame__eyebrow,
.stack__head .frame__eyebrow {
  align-self: center;
  justify-self: center;
  margin-inline: auto;
}


/* ============================================================
   НИЖНЯЯ ПОЛОВИНА · от «Отзывов» до подвала
   ------------------------------------------------------------
   Общие правила движения.
   Длительности идут сеткой, кратной 300 мс: 0.3 / 0.6 / 0.9 / 1.2 с.
   Задержки между соседями — 75–120 мс, между слоями — 300 мс.
   Прямой ход — 0.9 с на --ease-out; обратный (когда секцию
   прокрутили назад выше экрана) — 0.3 с: возврат не должен
   отвлекать. Всё, что привязано к прокрутке, считает main.js
   и пишет в CSS-переменные — геометрия остаётся в calc().
   ============================================================ */

:root {
  --ease-rev: cubic-bezier(0.5, 0, 0.3, 1);
  --sec-pad: clamp(3.5rem, 2.2321rem + 5.4127vw, 8.75rem);
  --sec-pad-b: clamp(3rem, 2.0179rem + 4.1905vw, 7.0625rem);
  --radius: clamp(0.875rem, 0.7321rem + 0.6095vw, 1.25rem);
  --line-l: rgba(22, 18, 13, 0.14);
  --line-d: rgba(255, 255, 255, 0.14);
}

/* ---------- Появление: .rv внутри [data-stage] ---------- */
[data-stage] .rv {
  opacity: 0;
  transform: translate3d(0, 1.5rem, 0);
  transition: opacity 0.3s var(--ease-rev), transform 0.3s var(--ease-rev);
}
[data-stage].is-in .rv {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--ease-out) calc(var(--d, 0) * 1ms),
              transform var(--dur-in) var(--ease-out) calc(var(--d, 0) * 1ms);
}
/* Строка-шторка: заголовок выходит из-под нижней кромки строки,
   чуть вытянутый по вертикали, и садится на место. */
[data-stage] .rv-line {
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  transform: translate3d(0, 50%, 0) scaleY(1.4);
  transform-origin: 50% 100%;
}
[data-stage].is-in .rv-line {
  clip-path: polygon(0 -20%, 100% -20%, 100% 120%, 0 120%);
  transform: none;
  transition: clip-path 0.6s var(--ease-out) calc(var(--d, 0) * 1ms),
              opacity 0.6s var(--ease-out) calc(var(--d, 0) * 1ms),
              transform var(--dur-in) var(--ease-out) calc(var(--d, 0) * 1ms);
}
@media (prefers-reduced-motion: reduce) {
  [data-stage] .rv,
  [data-stage] .rv-line {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}

/* ---------- Общая кнопка «плашка + круг» для новых блоков ---------- */
.cases__cta,
.people__cta,
.start__cta {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.375rem, 0.3125rem + 0.2667vw, 0.5625rem);
  text-decoration: none;
  color: inherit;
}
.cases__cta-label,
.people__cta-label,
.start__cta-label {
  display: inline-flex;
  align-items: center;
  height: var(--btn-h);
  padding: 0 1.9em;
  border-radius: 999px;
  background: #16120d;
  color: #fff;
  font-size: var(--fs-s);
  font-weight: 500;
  letter-spacing: var(--ls-btn);
  line-height: var(--lh-flat);
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.3s ease;
}
.cases__cta-icon,
.people__cta-icon,
.start__cta-icon {
  display: grid;
  place-items: center;
  width: var(--btn-h);
  height: var(--btn-h);
  border-radius: 50%;
  background: #16120d;
  color: #fff;
  transition: background 0.3s ease;
}
.cases__cta-icon svg,
.people__cta-icon svg,
.start__cta-icon svg { display: block; width: 34%; transition: transform 0.3s var(--ease-out); }
.cases__cta:hover .cases__cta-label,   .cases__cta:hover .cases__cta-icon,
.people__cta:hover .people__cta-label, .people__cta:hover .people__cta-icon,
.start__cta:hover .start__cta-label,   .start__cta:hover .start__cta-icon { background: var(--arc-high); }
.cases__cta:hover svg,
.people__cta:hover svg,
.start__cta:hover svg { transform: translate(2px, -2px); }

/* ---------- Пилюли новых блоков (тот же строй, что у остальных) ---------- */
.keep__eyebrow,
.people__eyebrow,
.fit__eyebrow,
.start__eyebrow,
.path__eyebrow,
.vreview__tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  justify-self: start;
  width: fit-content;
  margin: 0 0 var(--pill-gap);
  padding: 0.5em 1.1em;
  border: 1px solid rgba(22, 18, 13, 0.22);
  border-radius: 999px;
  background: transparent;
  color: #6b655c;
  font-family: var(--font-ui);
  font-size: var(--fs-pill);
  font-weight: 400;
  line-height: var(--lh-title);
  letter-spacing: var(--ls-text);
  text-transform: none;
}
.path__eyebrow,
.fit__half--no .fit__eyebrow,
.vreview__tag {
  border-color: rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.72);
}

/* Общие заголовки h2 новых блоков */
.reviews__title, .why__title, .cases__title, .path__title,
.keep__title, .fit__title, .start__title {
  margin: 0;
  font-family: var(--font-logo);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
  text-wrap: balance;
}

/* ============================================================
   13 / Отзывы · лента страхов. Тёмная пауза после двух светлых.
   Четыре кадра стоят не в ряд, а лесенкой: чётные опущены —
   ряд читается как лента, а не как таблица. Цитата лежит на
   самом кадре, поверх затемнения снизу.
   ============================================================ */

.reviews {
  position: relative;
  z-index: 2;
  background: var(--bg);
  color: var(--text);
  padding: var(--sec-pad) var(--gutter) var(--sec-pad-b);
  overflow: hidden;
}
.reviews__head {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(1rem, 0.5714rem + 1.8286vw, 2.875rem);
  margin-bottom: clamp(2rem, 1.4464rem + 2.3619vw, 4.3125rem);
}
.reviews__note {
  grid-column: 2;
  margin: 0;
  max-width: 34ch;
  justify-self: end;
  font-size: var(--fs-m);
  font-weight: 300;
  line-height: var(--lh-text-m);
  color: var(--muted);
}

.reviews__strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.75rem, 0.6071rem + 0.6095vw, 1.625rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.vreview { min-width: 0; }
/* Лесенка: чётные кадры опущены на треть подписи */
.vreview:nth-child(even) { margin-top: clamp(1.5rem, 1.0714rem + 1.8286vw, 3.375rem); }

.vreview__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius);
  background: #100f0f;
  isolation: isolate;
}
/* Сюда встанет <img>/<video>: слой уже растянут и обрезан по кадру */
.vreview__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background:
    radial-gradient(90% 70% at 50% 110%, rgba(172, 12, 15, 0.42) 0%, rgba(172, 12, 15, 0) 70%),
    linear-gradient(180deg, #171616 0%, #0c0b0b 100%);
  transition: transform 1.2s var(--ease-out);
}
.vreview:hover .vreview__media { transform: scale(1.04); }
/* Затемнение снизу под цитату — на любом кадре текст читается */
.vreview__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.55) 75%, rgba(0,0,0,0.82) 100%);
}
.vreview__tag {
  position: absolute;
  z-index: 2;
  top: clamp(0.75rem, 0.6071rem + 0.6095vw, 1.375rem);
  left: clamp(0.75rem, 0.6071rem + 0.6095vw, 1.375rem);
  margin: 0;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.vreview__play {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 44%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: clamp(3rem, 2.6296rem + 1.6461vw, 4.1111rem);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--arc-high);
  color: #fff;
  cursor: pointer;
  transition: transform 0.6s var(--ease-out), box-shadow 0.6s ease;
}
.vreview__play svg { width: 38%; height: 38%; margin-left: 6%; }
.vreview:hover .vreview__play,
.vreview__play:focus-visible {
  transform: scale(1.1);
  box-shadow: 0 0 calc(40px * var(--up)) -0.25rem rgba(172, 12, 15, 0.85);
}
.vreview__quote {
  position: absolute;
  z-index: 2;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: clamp(0.875rem, 0.7321rem + 0.6095vw, 1.5rem);
  font-family: var(--font-logo);
  font-size: clamp(1rem, 0.9107rem + 0.381vw, 1.375rem);
  font-weight: 600;
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  color: #fff;
  text-wrap: balance;
}
.vreview__caption {
  margin: 0.75em 0 0;
  padding: 0 0.25rem;
  font-size: var(--fs-s);
  font-weight: 300;
  line-height: var(--lh-text-s);
  color: var(--muted);
}

/* ---------- Лента скринов: бесшовный ход без таймеров ---------- */
.reviews__shots { margin-top: clamp(2.5rem, 1.6667rem + 3.5556vw, 5.5rem); }
.reviews__sub {
  margin: 0 0 clamp(0.875rem, 0.7679rem + 0.4762vw, 1.1875rem);
  font-size: var(--fs-m);
  font-weight: 300;
  line-height: var(--lh-lead);
  color: var(--muted);
}
.shots {
  display: flex;
  gap: clamp(0.75rem, 0.6786rem + 0.3175vw, 0.9375rem);
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  overflow: hidden;
  /* Края растворяются: лента входит и выходит из ничего */
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.shots__track {
  display: flex;
  flex: none;
  gap: inherit;
  margin: 0;
  padding: 0 clamp(0.375rem, 0.3393rem + 0.1587vw, 0.46875rem) 0 0;
  list-style: none;
  animation: shotsRun 46s linear infinite;
}
.shots:hover .shots__track { animation-play-state: paused; }
@keyframes shotsRun {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-100%, 0, 0); }
}
.shot { flex: 0 0 clamp(8.75rem, 6.5278rem + 9.8765vw, 15.4375rem); }
.shot__media {
  aspect-ratio: 3 / 4;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  object-fit: cover;
}
@media (prefers-reduced-motion: reduce) {
  .shots { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
  .shots__track { animation: none; }
  .shots__track[aria-hidden] { display: none; }
}

@media (max-width: 1100px) {
  .reviews__head { grid-template-columns: minmax(0, 1fr); }
  .reviews__note { grid-column: 1; justify-self: start; }
  .reviews__strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Телефон: лента со свайпом, лесенка снимается — в горизонтальной
   ленте ей не за что держаться */
@media (max-width: 720px) {
  .reviews__strip {
    display: flex;
    gap: 0.75rem;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .reviews__strip::-webkit-scrollbar { display: none; }
  .vreview { flex: 0 0 min(72vw, 17rem); scroll-snap-align: start; }
  .vreview:nth-child(even) { margin-top: 0; }
}

/* ============================================================
   Почему с нами по-другому · реестр строк.
   Вместо четырёх карточек — четыре строки: индекс, крупная величина,
   название, пояснение. Между строками тонкие линии; линия
   прочерчивается первой, за ней поднимаются величина, название
   и текст — с шагом 120 мс. Весь список чуть наклоняется от
   скорости прокрутки (rotateX) и возвращается пружиной.
   ============================================================ */

.why {
  background: #f5f5f5;
  color: #16120d;
  padding: var(--sec-pad) var(--gutter) var(--sec-pad-b);
  /* Наклон от скорости: пишет main.js, читают строки */
  --push: 0;
  perspective: 80rem;
}
.why__head { margin-bottom: clamp(2rem, 1.4464rem + 2.3619vw, 4.3125rem); }
.why .why__eyebrow { border-color: rgba(22, 18, 13, 0.22); color: #6b655c; }

.ledger {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-l);
  transform-style: preserve-3d;
}
.ledger__row {
  position: relative;
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 1.2fr);
  align-items: start;
  column-gap: clamp(1rem, 0.5714rem + 1.8286vw, 2.875rem);
  padding: clamp(1.5rem, 1.0714rem + 1.8286vw, 3.375rem) 0;
  transform: rotateX(calc(var(--push) * -1deg));
  transform-origin: 50% 0;
  transition: transform 0.15s linear;
}
/* Линия под строкой: прочерчивается слева направо */
.ledger__row::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--line-l);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.3s var(--ease-rev);
}
.is-in .ledger__row::after {
  transform: scaleX(1);
  transition: transform 0.9s var(--ease-out) calc(var(--d) * 1ms);
}
/* Свечение при наведении — красное только заливкой, за величиной */
.ledger__row::before {
  content: "";
  position: absolute;
  inset: 0 -1rem;
  z-index: 0;
  border-radius: var(--radius);
  background: radial-gradient(60% 120% at 12% 50%, rgba(172, 12, 15, 0.14) 0%, rgba(172, 12, 15, 0) 70%);
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.ledger__row:hover::before { opacity: 1; }
.ledger__row > * { position: relative; z-index: 1; }

.ledger__idx {
  padding-top: 0.55em;
  font-size: var(--fs-s);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: #8d8880;
}
.ledger__value {
  margin: 0;
  overflow: hidden;
  font-family: var(--font-logo);
  /* 32 → 64px */
  font-size: clamp(2rem, 1.3333rem + 2.963vw, 4rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: var(--ls-head);
  white-space: nowrap;
}
.ledger__value span { display: inline-block; }
.ledger__name {
  margin: 0;
  padding-top: 0.35em;
  font-family: var(--font-logo);
  font-size: clamp(1.0625rem, 0.9554rem + 0.4571vw, 1.5rem);
  font-weight: 600;
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  text-wrap: balance;
}
.ledger__text {
  margin: 0;
  padding-top: 0.45em;
  font-size: var(--fs-m);
  font-weight: 300;
  line-height: var(--lh-text-m);
  color: #6b655c;
}

/* Появление слоями: величина из-под кромки, название и текст — снизу */
[data-stage] .ledger__idx,
[data-stage] .ledger__name,
[data-stage] .ledger__text {
  opacity: 0;
  transform: translate3d(0, 1rem, 0);
  transition: opacity 0.3s var(--ease-rev), transform 0.3s var(--ease-rev);
}
[data-stage] .ledger__value span {
  transform: translate3d(0, 110%, 0);
  transition: transform 0.3s var(--ease-rev);
}
[data-stage].is-in .ledger__idx,
[data-stage].is-in .ledger__name,
[data-stage].is-in .ledger__text {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--ease-out), transform var(--dur-in) var(--ease-out);
}
[data-stage].is-in .ledger__value span {
  transform: none;
  transition: transform var(--dur-in) var(--ease-out) calc(var(--d) * 1ms + 150ms);
}
[data-stage].is-in .ledger__idx  { transition-delay: calc(var(--d) * 1ms + 100ms); }
[data-stage].is-in .ledger__name { transition-delay: calc(var(--d) * 1ms + 270ms); }
[data-stage].is-in .ledger__text { transition-delay: calc(var(--d) * 1ms + 390ms); }

@media (prefers-reduced-motion: reduce) {
  .ledger__row { transform: none !important; }
  .ledger__row::after { transform: none; transition: none; }
  [data-stage] .ledger__idx, [data-stage] .ledger__name, [data-stage] .ledger__text,
  [data-stage] .ledger__value span { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 900px) {
  .ledger__row {
    grid-template-columns: 2.75rem minmax(0, 1fr);
    row-gap: 0.5rem;
  }
  .ledger__value { grid-column: 2; }
  .ledger__name  { grid-column: 2; padding-top: 0; }
  .ledger__text  { grid-column: 2; padding-top: 0; }
}

/* ============================================================
   Кейсы · рваная сетка. Шесть карточек трёх тонов — светлая,
   угольная, красная с картинкой — как веер источников выше:
   серия узнаётся. Средняя колонка опущена на пол-карточки:
   сетка ломается, ряд перестаёт быть таблицей. Величина крупная,
   остальное тихое. Клик — окно с подробностями (cmodal).
   ============================================================ */

.cases {
  background: #fff;
  color: #16120d;
  padding: var(--sec-pad) var(--gutter) var(--sec-pad-b);
}
.cases__head {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(1rem, 0.5714rem + 1.8286vw, 2.875rem);
}
.cases__sub {
  margin: 0;
  max-width: 40ch;
  justify-self: end;
  font-size: var(--fs-m);
  font-weight: 300;
  line-height: var(--lh-text-m);
  color: #6b655c;
}

.cases__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 0.6071rem + 0.6095vw, 1.625rem);
  margin: clamp(2.5rem, 1.6667rem + 3.5556vw, 5.5rem) 0 0;
  padding: 0;
  list-style: none;
}
/* Средняя колонка ниже соседей: рваный край */
.ccard:nth-child(3n + 2) { margin-top: clamp(1.5rem, 0.9286rem + 2.4381vw, 4rem); }
.ccard { display: flex; }
.ccard__btn {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: clamp(1.125rem, 0.9821rem + 0.6095vw, 1.75rem);
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.6s var(--ease-out), box-shadow 0.6s ease;
}
.ccard__btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -28px rgba(22, 18, 13, 0.35);
}
.ccard__btn > * { position: relative; z-index: 1; }

.ccard--light .ccard__btn { background: #f5f5f5; border-color: rgba(22, 18, 13, 0.06); }
.ccard--dark  .ccard__btn { background: #16120d; color: #fff; }
.ccard--red   .ccard__btn {
  color: #fff;
  background: #1a0305 url("assets/cards/card-1.jpg") center / cover no-repeat;
}
.ccard--red .ccard__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.45) 60%, rgba(0,0,0,0.7) 100%);
}

.ccard__tag {
  margin: 0 0 clamp(1.25rem, 1rem + 1.0667vw, 2.25rem);
  font-size: var(--fs-s);
}
.ccard--dark .ccard__tag,
.ccard--red  .ccard__tag { border-color: rgba(255, 255, 255, 0.28); color: rgba(255, 255, 255, 0.72); }

.ccard__value {
  margin: 0 0 0.35em;
  font-family: var(--font-logo);
  /* 36 → 72px */
  font-size: clamp(2.25rem, 1.5rem + 3.3333vw, 4.5rem);
  font-weight: 400;
  line-height: var(--lh-flat);
  letter-spacing: var(--ls-head);
}
.ccard__lead {
  margin: 0;
  max-width: 30ch;
  font-size: var(--fs-s);
  font-weight: 300;
  line-height: var(--lh-text-m);
  color: #6b655c;
}
.ccard--dark .ccard__lead, .ccard--red .ccard__lead { color: rgba(255, 255, 255, 0.72); }

.ccard__who {
  margin-top: clamp(1.75rem, 1.2143rem + 2.2857vw, 4rem);
  padding-top: clamp(0.875rem, 0.7321rem + 0.6095vw, 1.5rem);
  border-top: 1px solid rgba(22, 18, 13, 0.1);
}
.ccard--dark .ccard__who, .ccard--red .ccard__who { border-color: rgba(255, 255, 255, 0.16); }
.ccard__name {
  margin: 0;
  font-family: var(--font-logo);
  font-size: clamp(1.0625rem, 0.9554rem + 0.4571vw, 1.5rem);
  font-weight: 600;
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
}
.ccard__meta {
  margin: 0.3em 0 0;
  font-size: var(--fs-s);
  font-weight: 300;
  line-height: var(--lh-text-s);
  color: #8d8880;
}
.ccard--dark .ccard__meta, .ccard--red .ccard__meta { color: rgba(255, 255, 255, 0.6); }

/* «Было/стало» на карточке спрятано: это содержимое окна */
.ccard__ba { display: none; }
.cmodal__ba {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.45em 1em;
  margin: clamp(1rem, 0.8571rem + 0.6095vw, 1.625rem) 0 0;
  padding-top: clamp(0.875rem, 0.7321rem + 0.6095vw, 1.5rem);
  border-top: 1px solid rgba(22, 18, 13, 0.1);
  font-size: var(--fs-s);
  line-height: var(--lh-text-m);
}
.cmodal__ba dt { margin: 0; font-weight: 500; color: #8d8880; white-space: nowrap; }
.cmodal__ba dd { margin: 0; font-weight: 300; color: #16120d; }
.cmodal__ba dt:last-of-type { color: #16120d; }

.ccard__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: clamp(1rem, 0.8571rem + 0.6095vw, 1.625rem);
  font-size: var(--fs-s);
  font-weight: 400;
  color: #8d8880;
  transition: color 0.3s ease;
}
.ccard__more::after {
  content: "→";
  display: inline-block;
  transition: transform 0.6s var(--ease-out);
}
.ccard__btn:hover .ccard__more { color: inherit; }
.ccard__btn:hover .ccard__more::after { transform: translateX(4px); }
.ccard--dark .ccard__more, .ccard--red .ccard__more { color: rgba(255, 255, 255, 0.6); }

.cases__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: clamp(2rem, 1.4464rem + 2.3619vw, 4.3125rem);
}
.cases__note { margin: 0; font-size: var(--fs-m); font-weight: 300; color: #6b655c; }

@media (max-width: 1000px) {
  .cases__head { grid-template-columns: minmax(0, 1fr); }
  .cases__sub { justify-self: start; }
  .cases__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ccard:nth-child(3n + 2) { margin-top: 0; }
  .ccard:nth-child(even) { margin-top: clamp(1.5rem, 0.9286rem + 2.4381vw, 4rem); }
}
@media (max-width: 640px) {
  .cases__grid { grid-template-columns: minmax(0, 1fr); }
  .ccard:nth-child(even) { margin-top: 0; }
  .cases__foot { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   Как работаем · график, который выпрямляется.
   Блок прилипает на четыре экрана прокрутки. Прокрутка ведёт
   курсор по оси времени: слева от него выручка уже ровная и
   растёт, справа — ещё пики запусков. Под графиком четыре этапа,
   активный подсвечен и раскрыт, у него по верхней кромке бежит
   тонкая белая линия — прогресс этапа. Всё считает main.js,
   рисует canvas; назад отматывается так же, как вперёд.
   ============================================================ */

.path {
  position: relative;
  background: var(--bg);
  color: var(--text);
  /* Высоту задаёт main.js: экран на вход + по экрану на этап */
  min-height: 100svh;
  --p: 0;          /* общий прогресс 0…1 */
  --active: 0;     /* индекс активного этапа */
}
.path__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(1rem, 2.5svh, 2rem);
  padding: clamp(1.5rem, 4svh, 3.5rem) var(--gutter) clamp(1.25rem, 3svh, 2.5rem);
  overflow: hidden;
}
.path__head {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(1rem, 0.5714rem + 1.8286vw, 2.875rem);
}
.path__title { font-size: clamp(1.75rem, 1.0714rem + 3.0159vw, 3.625rem); }
.path__sub {
  margin: 0;
  max-width: 36ch;
  justify-self: end;
  font-size: var(--fs-m);
  font-weight: 300;
  line-height: var(--lh-text-m);
  color: var(--muted);
}

.path__chart {
  position: relative;
  min-height: 0;
  border-top: 1px solid var(--line-d);
  border-bottom: 1px solid var(--line-d);
}
.path__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.path__axis {
  position: absolute;
  left: 0; right: 0; bottom: 0.6rem;
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0 0.25rem;
  font-size: var(--fs-s);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.4);
  pointer-events: none;
}
.path__axis span { flex: 1; text-align: left; transition: color 0.6s ease; }
.path__axis span:last-child { text-align: right; }
.path__legend {
  position: absolute;
  top: 0.9rem;
  left: 0.25rem;
  display: flex;
  gap: 0.6em;
  margin: 0;
  font-size: var(--fs-s);
  pointer-events: none;
}
.path__legend-k { font-weight: 400; color: rgba(255, 255, 255, 0.45); }
.path__legend-v { font-weight: 400; color: #fff; }

.path__stages {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 0.5714rem + 1.8286vw, 2.875rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.path__stage {
  position: relative;
  padding-top: clamp(0.875rem, 0.7321rem + 0.6095vw, 1.5rem);
  opacity: 0.38;
  transition: opacity 0.6s var(--ease-out);
}
/* Линия этапа: серая подложка и белый прогресс поверх */
.path__stage::before,
.path__stage::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  height: 1px;
  width: 100%;
  background: var(--line-d);
}
.path__stage::after {
  background: #fff;
  transform: scaleX(var(--fill, 0));
  transform-origin: 0 50%;
}
.path__stage.is-active { opacity: 1; }
.path__when {
  margin: 0 0 0.6em;
  font-size: var(--fs-s);
  font-weight: 400;
  color: var(--muted);
}
.path__name {
  margin: 0;
  font-family: var(--font-logo);
  font-size: clamp(1.0625rem, 0.9554rem + 0.4571vw, 1.5rem);
  font-weight: 600;
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
}
.path__text {
  margin: 0.6em 0 0;
  font-size: var(--fs-s);
  font-weight: 300;
  line-height: var(--lh-text-m);
  color: rgba(255, 255, 255, 0.78);
}
.path__result {
  margin: 0.9em 0 0;
  padding-top: 0.8em;
  border-top: 1px solid var(--line-d);
  font-size: var(--fs-s);
  font-weight: 300;
  line-height: var(--lh-text-s);
  color: rgba(255, 255, 255, 0.78);
}
.path__result span {
  display: block;
  margin-bottom: 0.35em;
  font-weight: 400;
  color: var(--muted);
}
/* На большом экране текст и результат видны только у активного
   этапа: остальным хватает срока и названия — так четыре колонки
   не превращаются в четыре абзаца. */
@media (min-width: 901px) {
  .path__text, .path__result {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translate3d(0, 0.5rem, 0);
    transition: max-height 0.6s var(--ease-out), opacity 0.3s var(--ease-rev), transform 0.3s var(--ease-rev), margin 0.6s var(--ease-out), padding 0.6s var(--ease-out);
  }
  .path__stage.is-active .path__text,
  .path__stage.is-active .path__result {
    max-height: 22rem;
    opacity: 1;
    transform: none;
    transition: max-height 0.9s var(--ease-out), opacity 0.6s var(--ease-out) 0.15s, transform 0.9s var(--ease-out) 0.15s;
  }
  .path__stage:not(.is-active) .path__result { margin-top: 0; padding-top: 0; border-top-width: 0; }
}

/* Планшет и телефон: без фиксации. График сверху ведёт прокрутка
   всей секции, этапы — колонкой с рельсой слева. */
@media (max-width: 900px) {
  .path { min-height: 0 !important; height: auto !important; padding: var(--sec-pad) 0 var(--sec-pad-b); }
  .path__sticky {
    position: static;
    height: auto;
    display: block;
    padding: 0 var(--gutter);
    overflow: visible;
  }
  .path__head { grid-template-columns: minmax(0, 1fr); margin-bottom: clamp(1.5rem, 1.0714rem + 1.8286vw, 3.375rem); }
  .path__sub { justify-self: start; }
  .path__chart { height: clamp(12rem, 34vw, 18rem); margin-bottom: clamp(1.5rem, 1.0714rem + 1.8286vw, 3.375rem); }
  .path__stages { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .path__stage {
    padding: clamp(1.25rem, 1rem + 1.0667vw, 2rem) 0 clamp(1.25rem, 1rem + 1.0667vw, 2rem) 1.75rem;
    opacity: 0.55;
  }
  .path__stage::before, .path__stage::after {
    top: 0; left: 0;
    width: 1px;
    height: 100%;
    transform: scaleY(var(--fill, 0));
    transform-origin: 50% 0;
  }
  .path__stage::before { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .path { min-height: 0 !important; height: auto !important; }
  .path__sticky { position: static; height: auto; }
  .path__stage { opacity: 1; }
  .path__text, .path__result { max-height: none; opacity: 1; transform: none; }
}

/* ============================================================
   Что остаётся у вас · четыре колонки и стопка документов.
   Сверху: заголовок слева, справа четыре листа, лежащих стопкой
   со сдвигом. Прокрутка раздвигает слои веером (обратимо),
   наведение раскрывает целиком. Снизу четыре колонки, разделённые
   вертикальными линиями: линии растут сверху вниз, за ними
   встают пункты — с шагом 120 мс между колонками.
   ============================================================ */

.keep {
  background: #fff;
  color: #16120d;
  padding: var(--sec-pad) var(--gutter) var(--sec-pad-b);
  overflow: hidden;
  --spread: 0;   /* 0 — стопка, 1 — раскрыто; пишет main.js */
}
.keep__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 0.8333rem + 2.8444vw, 4rem);
  margin-bottom: clamp(2.5rem, 1.6667rem + 3.5556vw, 5.5rem);
}
.keep__docnote {
  grid-column: 2;
  margin: 0;
  max-width: 44ch;
  justify-self: end;
  font-size: var(--fs-s);
  font-weight: 300;
  line-height: var(--lh-text-s);
  color: #8d8880;
  text-align: right;
}

.docs {
  position: relative;
  height: clamp(11rem, 7.5rem + 10.5vw, 16.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.doc {
  position: absolute;
  top: 0;
  left: 50%;
  width: clamp(8rem, 5.5rem + 8vw, 12rem);
  /* Стопка: все у центра, каждая чуть повёрнута; при --spread: 1
     расходятся в ряд с шагом 24% ширины контейнера. */
  --k: calc(var(--i) - 1.5);
  /* Проценты — от собственной ширины листа: в стопке шаг 9%,
     раскрыто — 80%, листы чуть перекрываются, как на столе */
  translate: calc(-50% + var(--k) * (9% + var(--spread) * 71%)) calc(var(--k) * (0.5rem - var(--spread) * 0.5rem));
  rotate: calc(var(--k) * (3deg - var(--spread) * 3deg));
  z-index: calc(4 - var(--i));
  transition: translate 0.9s var(--ease-out), rotate 0.9s var(--ease-out);
}
/* Наведение на стопку раскрывает её целиком */
.docs:hover .doc { --spread: 1; }
.doc__sheet {
  aspect-ratio: 3 / 4;
  width: 100%;
  border: 1px solid rgba(22, 18, 13, 0.12);
  border-radius: 0.6rem;
  background:
    linear-gradient(#fff, #fff) padding-box,
    #fff;
  box-shadow: 0 30px 50px -30px rgba(22, 18, 13, 0.35), 0 1px 0 rgba(22, 18, 13, 0.04);
  /* Пока нет скринов — тихие строки документа, чтобы лист
     не выглядел пустым квадратом. */
  background-image:
    linear-gradient(rgba(22, 18, 13, 0.08), rgba(22, 18, 13, 0.08)),
    repeating-linear-gradient(180deg, transparent 0 14%, rgba(22, 18, 13, 0.06) 14% 15%);
  background-size: 42% 4px, 68% 100%;
  background-position: 12% 12%, 12% 34%;
  background-repeat: no-repeat;
}

.keep__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.keep__col {
  position: relative;
  padding: 0 clamp(1rem, 0.5714rem + 1.8286vw, 2.875rem) 0 clamp(1rem, 0.7143rem + 1.2191vw, 2.25rem);
}
.keep__col:first-child { padding-left: 0; }
/* Вертикальные разделители: растут сверху вниз по очереди */
.keep__col + .keep__col::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: var(--line-l);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform 0.3s var(--ease-rev);
}
.is-in .keep__col + .keep__col::before {
  transform: scaleY(1);
  transition: transform 0.9s var(--ease-out) calc(var(--d) * 1ms);
}
.keep__name {
  margin: 0 0 clamp(0.875rem, 0.7321rem + 0.6095vw, 1.5rem);
  font-family: var(--font-logo);
  font-size: clamp(1.0625rem, 0.9554rem + 0.4571vw, 1.5rem);
  font-weight: 600;
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
}
.keep__list {
  display: grid;
  gap: 0.6em;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-s);
  font-weight: 300;
  line-height: var(--lh-text-m);
  color: #6b655c;
}
.keep__list li {
  position: relative;
  padding-left: 1.1em;
}
.keep__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 0.35em; height: 0.35em;
  border-radius: 50%;
  background: #16120d;
}
[data-stage] .keep__name,
[data-stage] .keep__list li {
  opacity: 0;
  transform: translate3d(0, 0.9rem, 0);
  transition: opacity 0.3s var(--ease-rev), transform 0.3s var(--ease-rev);
}
[data-stage].is-in .keep__name,
[data-stage].is-in .keep__list li {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--ease-out) var(--t), transform var(--dur-in) var(--ease-out) var(--t);
}
[data-stage].is-in .keep__name { --t: calc(var(--d) * 1ms + 150ms); }
[data-stage].is-in .keep__list li:nth-child(1) { --t: calc(var(--d) * 1ms + 270ms); }
[data-stage].is-in .keep__list li:nth-child(2) { --t: calc(var(--d) * 1ms + 360ms); }
[data-stage].is-in .keep__list li:nth-child(3) { --t: calc(var(--d) * 1ms + 450ms); }

@media (max-width: 1000px) {
  .keep__head { grid-template-columns: minmax(0, 1fr); }
  .keep__docnote { grid-column: 1; text-align: center; }
  .keep__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: clamp(1.75rem, 1.2143rem + 2.2857vw, 4rem); }
  .keep__col:nth-child(odd) { padding-left: 0; }
  .keep__col:nth-child(3)::before { display: none; }
}
@media (max-width: 560px) {
  .keep__cols { grid-template-columns: minmax(0, 1fr); }
  .keep__col { padding-left: 0; padding-right: 0; }
  .keep__col + .keep__col::before { display: none; }
  .docs { height: clamp(9rem, 42vw, 12rem); }
  /* Четыре листа должны уместиться в ширину экрана: лист уже,
     раскрытый шаг — 62% его ширины */
  .doc {
    width: clamp(6rem, 30vw, 8rem);
    translate: calc(-50% + var(--k) * (9% + var(--spread) * 53%)) calc(var(--k) * (0.4rem - var(--spread) * 0.4rem));
  }
}
@media (prefers-reduced-motion: reduce) {
  .keep { --spread: 1; }
  .doc { transition: none; }
  .keep__col + .keep__col::before { transform: none; transition: none; }
  [data-stage] .keep__name, [data-stage] .keep__list li { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   Ангелина и команда · тёплый светлый. Фото выходит за левое
   поле, цитата занимает правые две трети. Ниже — три роли,
   средняя опущена: та же лесенка, что в отзывах, только светлая.
   ============================================================ */

.people {
  background: #f5f5f5;
  color: #16120d;
  padding: var(--sec-pad) var(--gutter) var(--sec-pad-b);
  overflow: hidden;
}
.people__lead {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  align-items: center;
  gap: clamp(1.5rem, 0.8333rem + 2.8444vw, 4rem);
}
.people__photo {
  /* Фото выходит за левое поле до самого края экрана */
  margin-left: calc(var(--gutter) * -1);
  border-radius: 0 var(--radius) var(--radius) 0;
  overflow: hidden;
  background: #16120d;
}
.people__img {
  aspect-ratio: 3 / 4;
  width: 100%;
  background:
    radial-gradient(70% 60% at 50% 120%, rgba(172, 12, 15, 0.5) 0%, rgba(172, 12, 15, 0) 70%),
    linear-gradient(180deg, #1f1d1c 0%, #0c0b0b 100%);
}
/* Фото открывается снизу вверх, как шторка */
[data-stage] .people__photo.rv {
  transform: none;
  clip-path: inset(100% 0 0 0);
}
[data-stage].is-in .people__photo.rv {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.2s var(--ease-out), opacity 0.3s;
}
.people__quote { display: flex; flex-direction: column; align-items: flex-start; }
.people__title {
  margin: 0;
  font-family: var(--font-logo);
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-title);
  text-wrap: balance;
}
.people__who {
  margin: clamp(1.25rem, 1rem + 1.0667vw, 2rem) 0 0;
  max-width: 40ch;
  font-size: var(--fs-s);
  font-weight: 300;
  line-height: var(--lh-text-m);
  color: #6b655c;
}
.people__who strong {
  display: block;
  margin-bottom: 0.2em;
  font-size: var(--fs-m);
  font-weight: 600;
  color: #16120d;
}
.people__cta { margin-top: clamp(1.25rem, 1rem + 1.0667vw, 2rem); }

.people__team { margin-top: clamp(3rem, 2.0179rem + 4.1905vw, 7.0625rem); }
.people__teamhead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(1rem, 0.5714rem + 1.8286vw, 2.875rem);
  margin-bottom: clamp(1.5rem, 1.0714rem + 1.8286vw, 3.375rem);
}
.people__teamtitle {
  margin: 0;
  font-family: var(--font-logo);
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
}
.people__teamsub {
  margin: 0;
  max-width: 36ch;
  justify-self: end;
  font-size: var(--fs-m);
  font-weight: 300;
  line-height: var(--lh-text-m);
  color: #6b655c;
}
.crew {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 0.6071rem + 0.6095vw, 1.625rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.crew__item:nth-child(2) { margin-top: clamp(1.5rem, 1.0714rem + 1.8286vw, 3.375rem); }
.crew__img {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(22, 18, 13, 0.06), rgba(22, 18, 13, 0.1)),
    #ebebeb;
  transition: transform 0.9s var(--ease-out);
}
.crew__item:hover .crew__img { transform: translateY(-4px); }
.crew__name {
  margin: 0.9em 0 0;
  font-family: var(--font-logo);
  font-size: clamp(1.0625rem, 0.9554rem + 0.4571vw, 1.5rem);
  font-weight: 600;
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
}
.crew__text {
  margin: 0.4em 0 0;
  font-size: var(--fs-s);
  font-weight: 300;
  line-height: var(--lh-text-m);
  color: #6b655c;
}
@media (max-width: 900px) {
  .people__lead { grid-template-columns: minmax(0, 1fr); }
  .people__photo { margin-left: 0; max-width: 24rem; border-radius: var(--radius); }
  .people__teamhead { grid-template-columns: minmax(0, 1fr); }
  .people__teamsub { justify-self: start; }
}
@media (max-width: 640px) {
  .crew { grid-template-columns: minmax(0, 1fr); }
  .crew__item:nth-child(2) { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  [data-stage] .people__photo.rv { clip-path: none !important; }
}

/* ============================================================
   Отбор · экран, разрезанный надвое. Слева на белом — кому
   подходим, справа на чёрном — кому нет. Граница косая: переход
   светлого в тёмное сделан приёмом, а не сменой секции. Левые
   пункты въезжают слева, правые — справа, через один: 1, 1', 2, 2'.
   ============================================================ */

.fit {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: #fff;
  color: #16120d;
  overflow: hidden;
}
.fit__half {
  position: relative;
  padding: var(--sec-pad) var(--gutter) var(--sec-pad-b);
}
.fit__half--yes { padding-right: clamp(2rem, 1rem + 4vw, 6rem); }
.fit__half--no {
  background: var(--bg);
  color: var(--text);
  padding-left: clamp(3rem, 1.5rem + 6vw, 9rem);
  /* Косой срез: сверху граница левее, снизу правее */
  clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
  margin-left: -10%;
  padding-left: calc(10% + clamp(2rem, 1rem + 4vw, 6rem));
}
.fit__title { margin-bottom: clamp(1.5rem, 1.0714rem + 1.8286vw, 3.375rem); }
.fit__sub {
  margin: 0 0 clamp(1.5rem, 1.0714rem + 1.8286vw, 3.375rem);
  max-width: 40ch;
  font-size: var(--fs-m);
  font-weight: 300;
  line-height: var(--lh-text-m);
  color: var(--muted);
}
/* Подзаголовок правой половины стоит на одной высоте с заголовком:
   у пилюли слева нет пары справа — компенсируем отступом */
.fit__half--no .fit__sub { margin-top: calc(1.9em + var(--pill-gap)); }
.fit__label {
  margin: 0 0 0.75rem;
  font-size: var(--fs-s);
  font-weight: 400;
  color: #8d8880;
}
.fit__half--no .fit__label { color: var(--muted); }
.fit__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-l);
}
.fit__half--no .fit__list { border-color: var(--line-d); }
.fit__list li {
  padding: clamp(0.875rem, 0.7321rem + 0.6095vw, 1.5rem) 0;
  border-bottom: 1px solid var(--line-l);
  font-size: var(--fs-m);
  font-weight: 300;
  line-height: var(--lh-text-m);
}
.fit__half--no .fit__list li { border-color: var(--line-d); color: rgba(255, 255, 255, 0.86); }
/* Направление входа: слева и справа, а не снизу */
[data-stage] .fit__half--yes .fit__list li.rv { transform: translate3d(-1.5rem, 0, 0); }
[data-stage] .fit__half--no  .fit__list li.rv { transform: translate3d(1.5rem, 0, 0); }
[data-stage].is-in .fit__list li.rv { transform: none; }

@media (max-width: 800px) {
  .fit { grid-template-columns: minmax(0, 1fr); }
  .fit__half--yes { padding-right: var(--gutter); padding-bottom: clamp(3rem, 2.0179rem + 4.1905vw, 7.0625rem); }
  .fit__half--no {
    margin-left: 0;
    margin-top: -6vw;
    padding-left: var(--gutter);
    padding-top: calc(6vw + var(--sec-pad));
    clip-path: polygon(0 6vw, 100% 0, 100% 100%, 0 100%);
  }
  .fit__half--no .fit__sub { margin-top: 0; }
}

/* ============================================================
   С чего начать · три панели. На широком экране лежат в ряд,
   открытая занимает больше половины, у закрытых видны номер и
   название, повёрнутое вертикально. Открывается по наведению или
   клику, ширина едет 0.9 с. Тона те же три, что у веера: светлая,
   угольная, красная с картинкой. На телефоне — колонка-аккордеон.
   ============================================================ */

.start {
  background: #f5f5f5;
  color: #16120d;
  padding: var(--sec-pad) var(--gutter) var(--sec-pad-b);
}
.start__head {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(1rem, 0.5714rem + 1.8286vw, 2.875rem);
  margin-bottom: clamp(2rem, 1.4464rem + 2.3619vw, 4.3125rem);
}
.start__sub {
  margin: 0;
  max-width: 36ch;
  justify-self: end;
  font-size: var(--fs-m);
  font-weight: 300;
  line-height: var(--lh-text-m);
  color: #6b655c;
}

.panels {
  display: flex;
  gap: clamp(0.5rem, 0.4286rem + 0.3048vw, 0.8125rem);
  min-height: clamp(22rem, 18rem + 14vw, 32rem);
}
.panel {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius);
  isolation: isolate;
  transition: flex-grow 0.9s var(--ease-out);
}
.panel.is-open { flex-grow: 2.6; }
.panel--light { background: #fff; border: 1px solid rgba(22, 18, 13, 0.08); }
.panel--dark  { background: #16120d; color: #fff; }
.panel--red {
  color: #fff;
  background: #1a0305 url("assets/cards/card-3.jpg") center / cover no-repeat;
}
.panel--red::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0.78) 100%);
}
.panel > * { position: relative; z-index: 1; }

.panel__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 1rem;
  width: 100%;
  margin: 0;
  padding: clamp(1.125rem, 0.9821rem + 0.6095vw, 1.75rem);
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.panel__num {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  align-self: start;
  padding: 0.35em 0.75em;
  border: 1px solid rgba(22, 18, 13, 0.22);
  border-radius: 999px;
  font-size: var(--fs-s);
  line-height: var(--lh-title);
  color: #6b655c;
}
.panel--dark .panel__num, .panel--red .panel__num { border-color: rgba(255, 255, 255, 0.28); color: rgba(255, 255, 255, 0.72); }
.panel__name {
  font-family: var(--font-logo);
  font-size: clamp(1.0625rem, 0.9554rem + 0.4571vw, 1.5rem);
  font-weight: 600;
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  transition: opacity 0.3s ease;
}
.panel__term {
  font-size: var(--fs-s);
  font-weight: 400;
  white-space: nowrap;
  color: #6b655c;
  transition: opacity 0.3s ease;
}
.panel--dark .panel__term, .panel--red .panel__term { color: rgba(255, 255, 255, 0.72); }

.panel__body {
  display: grid;
  grid-template-rows: 1fr;
  min-height: 0;
}
.panel__inner {
  min-height: 0;
  overflow: hidden;
  padding: 0 clamp(1.125rem, 0.9821rem + 0.6095vw, 1.75rem) clamp(1.125rem, 0.9821rem + 0.6095vw, 1.75rem);
  opacity: 0;
  transform: translate3d(0, 0.75rem, 0);
  transition: opacity 0.3s var(--ease-rev), transform 0.3s var(--ease-rev);
}
.panel.is-open .panel__inner {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--ease-out) 0.3s, transform 0.9s var(--ease-out) 0.3s;
}
.panel__for {
  margin: 0 0 clamp(1rem, 0.8571rem + 0.6095vw, 1.625rem);
  font-size: var(--fs-m);
  font-weight: 300;
  line-height: var(--lh-text-m);
  color: #6b655c;
}
.panel--dark .panel__for, .panel--red .panel__for { color: rgba(255, 255, 255, 0.78); }
.panel__for span {
  display: block;
  margin-bottom: 0.35em;
  font-size: var(--fs-s);
  font-weight: 400;
  color: #8d8880;
}
.panel--dark .panel__for span, .panel--red .panel__for span { color: rgba(255, 255, 255, 0.5); }
.panel__list {
  display: grid;
  gap: 0.55em;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-s);
  font-weight: 300;
  line-height: var(--lh-text-m);
}
.panel__list li {
  position: relative;
  padding: 0.6em 0 0.6em 1.1em;
  border-top: 1px solid rgba(22, 18, 13, 0.1);
}
.panel--dark .panel__list li, .panel--red .panel__list li { border-color: rgba(255, 255, 255, 0.16); }
.panel__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.25em;
  width: 0.35em; height: 0.35em;
  border-radius: 50%;
  background: currentColor;
}
.panel__note {
  margin: clamp(1rem, 0.8571rem + 0.6095vw, 1.625rem) 0 0;
  font-size: var(--fs-s);
  font-weight: 400;
  color: #6b655c;
}
.panel--dark .panel__note, .panel--red .panel__note { color: rgba(255, 255, 255, 0.72); }

/* Закрытая панель на широком экране: название ложится вертикально */
@media (min-width: 801px) {
  .panel:not(.is-open) .panel__head {
    grid-template-columns: auto;
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: 100%;
  }
  .panel:not(.is-open) .panel__name {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    justify-self: start;
    align-self: end;
    white-space: nowrap;
  }
  .panel:not(.is-open) .panel__term { display: none; }
  .panel:not(.is-open) .panel__body { display: none; }
  /* Шапка открытой панели кладёт название под номером, срок справа */
  .panel.is-open .panel__head {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    row-gap: clamp(1rem, 0.8571rem + 0.6095vw, 1.625rem);
  }
  .panel.is-open .panel__num  { grid-row: 1; grid-column: 1; }
  .panel.is-open .panel__term { grid-row: 1; grid-column: 2; }
  .panel.is-open .panel__name { grid-row: 2; grid-column: 1 / -1; font-size: var(--fs-h3); font-weight: 400; letter-spacing: var(--ls-head); line-height: var(--lh-head); }
}
/* Телефон: колонка, открытая раскрывается по высоте */
@media (max-width: 800px) {
  .panels { flex-direction: column; min-height: 0; }
  .panel { flex: none; }
  .panel__head { grid-template-columns: auto minmax(0, 1fr); }
  .panel__term { grid-column: 2; margin-top: -0.4rem; }
  .panel__body {
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.6s var(--ease-out);
  }
  .panel.is-open .panel__body { grid-template-rows: 1fr; }
}

.start__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1rem, 0.5714rem + 1.8286vw, 2.875rem);
  margin-top: clamp(2rem, 1.4464rem + 2.3619vw, 4.3125rem);
}
.start__price {
  margin: 0;
  max-width: 62ch;
  font-size: var(--fs-m);
  font-weight: 300;
  line-height: var(--lh-text-m);
  color: #6b655c;
}
@media (max-width: 800px) {
  .start__head { grid-template-columns: minmax(0, 1fr); }
  .start__sub { justify-self: start; }
  .start__foot { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .panel, .panel__inner, .panel__body { transition: none; }
}

/* ============================================================
   Частые вопросы: строки появляются по очереди тем же механизмом,
   что и реестр — .rv на каждом .questions-item.
   ============================================================ */
.questions-item.rv { transform: translate3d(0, 0.75rem, 0); }

/* ---------- Окно кейса (возвращено: было вырезано вместе с опросником) ---------- */
.cmodal[hidden] { display: none; }
.cmodal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: var(--gutter);
}
.cmodal__veil {
  position: absolute;
  inset: 0;
  background: rgba(3, 3, 3, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: cmVeil 0.28s ease forwards;
}
.cmodal__win {
  position: relative;
  width: min(100%, 40rem);
  max-height: 86svh;
  overflow-y: auto;
  padding: clamp(1.5rem, 1.25rem + 1.0667vw, 2.5rem);
  border-radius: clamp(1rem, 0.8571rem + 0.6095vw, 1.625rem);
  background: #fff;
  color: #16120d;
  animation: cmWin 0.34s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes cmVeil { from { opacity: 0; } to { opacity: 1; } }
@keyframes cmWin {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.cmodal__close {
  position: absolute;
  top: clamp(0.75rem, 0.6071rem + 0.6095vw, 1.375rem);
  right: clamp(0.75rem, 0.6071rem + 0.6095vw, 1.375rem);
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid rgba(22, 18, 13, 0.14);
  border-radius: 50%;
  background: transparent;
  color: #16120d;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.cmodal__close svg { width: 38%; }
.cmodal__close:hover { background: #16120d; color: #fff; }

.cmodal__tag {
  margin: 0 0 clamp(0.875rem, 0.7321rem + 0.6095vw, 1.5rem);
  font-size: var(--fs-s);
  font-weight: 500;
  letter-spacing: var(--ls-text);
  text-transform: uppercase;
  color: #8d8880;
}
.cmodal__value {
  margin: 0 0 0.35em;
  font-family: var(--font-logo);
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: var(--lh-flat);
  letter-spacing: var(--ls-head);
}
.cmodal__lead {
  margin: 0;
  font-size: var(--fs-m);
  font-weight: 300;
  line-height: var(--lh-text-m);
  color: #6b655c;
}
.cmodal__name {
  margin: clamp(1.25rem, 1rem + 1.0667vw, 2rem) 0 0.3em;
  font-family: var(--font-logo);
  font-size: clamp(1.0625rem, 0.9554rem + 0.4571vw, 1.5rem);
  font-weight: 600;
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
}
.cmodal__meta {
  margin: 0;
  font-size: var(--fs-s);
  font-weight: 300;
  color: #8d8880;
}

@media (prefers-reduced-motion: reduce) {
  .cmodal__veil, .cmodal__win { animation: none; }
}
@media (max-width: 1000px) {
  .cases__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .cases__grid { grid-template-columns: minmax(0, 1fr); }
  .cases__foot { flex-direction: column; align-items: flex-start; }
}

/* В окне кейса ленты цифр стоят на значении сразу */
.cmodal .nr__d > i { --v: var(--n); transition: none; }

/* ============================================================
   Подвал · последнее, что видит человек. Сверху колонки, снизу —
   слово GG AGENCY во всю ширину, обрезанное нижней кромкой экрана.
   Слово поднимается снизу по мере того, как подвал въезжает
   (пишет main.js, отматывается назад), за ним — красное свечение.
   ============================================================ */

.footer {
  position: relative;
  background: var(--bg);
  color: var(--text);
  padding: calc(84px * var(--up)) 0 0;
  overflow: hidden;
  --rise: 0;   /* 0 — слово под кромкой, 1 — на месте */
}
.footer__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 0.9286rem + 4.5714vw, 7.25rem);
  padding: 0 var(--gutter);
}
.footer__logo {
  display: inline-block;
  color: var(--text);
  font-family: var(--font-logo);
  font-size: var(--fs-m);
  font-weight: 800;
  text-decoration: none;
}
.footer__tagline {
  margin: calc(18px * var(--up)) 0 0;
  max-width: 30ch;
  color: rgba(255, 255, 255, 0.55);
  font-size: var(--fs-s);
  font-weight: 300;
  line-height: var(--lh-text-m);
}
.footer__cta {
  display: inline-flex;
  align-items: baseline;
  gap: 0.75em;
  margin-top: clamp(1.5rem, 1.0714rem + 1.8286vw, 3.375rem);
  padding-bottom: 0.4em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  text-decoration: none;
  transition: border-color 0.3s ease;
}
.footer__cta:hover { border-color: #fff; }
.footer__cta-label { font-size: var(--fs-m); font-weight: 400; }
.footer__cta-meta { font-size: var(--fs-s); font-weight: 300; color: rgba(255, 255, 255, 0.55); }
.footer__col { display: flex; flex-direction: column; gap: calc(12px * var(--up)); }
.footer__label {
  margin: 0 0 calc(6px * var(--up));
  color: rgba(255, 255, 255, 0.4);
  font-size: var(--fs-s);
  font-weight: 400;
}
.footer__col a {
  width: fit-content;
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--fs-s);
  font-weight: 300;
  text-decoration: none;
  background: linear-gradient(#fff, #fff) no-repeat 0 100% / 0 1px;
  transition: color 0.3s ease, background-size 0.45s var(--ease-out);
}
.footer__col a:hover { color: #fff; background-size: 100% 1px; }

.footer__word {
  position: relative;
  height: clamp(6rem, 17vw, 20rem);
  margin-top: clamp(3rem, 2.0179rem + 4.1905vw, 7.0625rem);
  overflow: hidden;
  pointer-events: none;
}
/* Свечение снизу: красный как заливка, гаснет кверху */
.footer__word::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 90% at 50% 115%, rgba(172, 12, 15, 0.7) 0%, rgba(125, 5, 16, 0.35) 40%, rgba(3, 3, 3, 0) 75%);
  opacity: var(--rise);
  transition: opacity 0.3s linear;
}
.footer__word-text {
  position: absolute;
  left: 50%;
  bottom: -0.16em;
  display: block;
  white-space: nowrap;
  font-family: var(--font-logo);
  /* Слово занимает всю ширину: кегль от vw, 9 знаков с трекингом */
  font-size: clamp(3.25rem, 13.6vw, 17rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.05em;
  color: #fff;
  transform: translate3d(-50%, calc((1 - var(--rise)) * 60%), 0);
  transition: transform 0.15s linear;
  will-change: transform;
}
.footer__legal {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  padding: clamp(1rem, 0.8571rem + 0.6095vw, 1.625rem) var(--gutter)
           calc(clamp(1rem, 0.8571rem + 0.6095vw, 1.625rem) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line-d);
  font-size: var(--fs-s);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.45);
}
.footer__legal p { margin: 0; display: flex; gap: 1.5em; }
.footer__legal a { color: inherit; text-decoration: none; transition: color 0.3s ease; }
.footer__legal a:hover { color: #fff; }

@media (max-width: 900px) {
  .footer__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .footer__inner { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .footer { --rise: 1; }
  .footer__word-text, .footer__word::before { transition: none; }
}

/* ============================================================
   Разбор · диалог. Светлый тёплый блок перед тёмным подвалом.
   Один вопрос на экране, крупно; ответ уходит в стопку пилюль,
   следующий вопрос поднимается снизу (0.9 с), предыдущий уходит
   вверх (0.3 с). В левом нижнем углу красное пятно теплеет с каждым
   ответом: --warm пишет main.js.
   ============================================================ */

.ask {
  position: relative;
  overflow: hidden;
  background: #f5f5f5;
  color: #16120d;
  padding: var(--sec-pad) var(--gutter) var(--sec-pad-b);
  --warm: 0;
}
.ask__glow {
  position: absolute;
  left: -20%;
  bottom: -40%;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(172, 12, 15, 0.55) 0%, rgba(172, 12, 15, 0.22) 40%, rgba(172, 12, 15, 0) 100%);
  opacity: calc(0.12 + var(--warm) * 0.88);
  transform: scale(calc(0.7 + var(--warm) * 0.5));
  transition: opacity 1.2s var(--ease-out), transform 1.2s var(--ease-out);
  pointer-events: none;
  filter: blur(8px);
}
.ask > *:not(.ask__glow) { position: relative; z-index: 1; }

.ask__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.ask__eyebrow {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0.5em 1.1em;
  border: 1px solid rgba(22, 18, 13, 0.22);
  border-radius: 999px;
  color: #6b655c;
  font-size: var(--fs-pill);
  font-weight: 400;
  line-height: var(--lh-title);
}
.ask__count {
  display: flex;
  align-items: baseline;
  gap: 0.25em;
  margin: 0;
  font-family: var(--font-logo);
  font-size: var(--fs-m);
  font-variant-numeric: tabular-nums;
  color: #16120d;
}
.ask__count-n { display: inline-block; min-width: 1.4em; text-align: right; }
.ask__count-of { color: #8d8880; }
/* Смена номера: старая цифра уезжает вверх, новая входит снизу */
.ask__count-n.is-swap { animation: askSwap 0.45s var(--ease-out); }
@keyframes askSwap {
  0%   { opacity: 0; transform: translateY(0.5em); }
  100% { opacity: 1; transform: none; }
}

/* Стопка ответов: пилюли, заполненные тёмным */
.ask__done {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-height: 2.4rem;
  margin: clamp(1.5rem, 1.0714rem + 1.8286vw, 3.375rem) 0 0;
  padding: 0;
  list-style: none;
}
.ask__done li {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.5em 1.1em;
  border-radius: 999px;
  background: #16120d;
  color: #fff;
  font-size: var(--fs-pill);
  line-height: var(--lh-title);
  animation: askPill 0.6s var(--ease-out);
}
.ask__done li span { color: rgba(255, 255, 255, 0.5); }
@keyframes askPill {
  from { opacity: 0; transform: translateY(0.75rem) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

/* Сцена: все вопросы в одной ячейке сетки, виден один */
.ask__stage {
  display: grid;
  margin-top: clamp(1rem, 0.7143rem + 1.2191vw, 2.25rem);
}
.ask__q {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 2rem, 0);
  transition: opacity 0.3s var(--ease-rev), transform 0.3s var(--ease-rev), visibility 0s linear 0.3s;
}
.ask__q.is-out { transform: translate3d(0, -1.5rem, 0); }
.ask__q.is-current {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.6s var(--ease-out) 0.15s, transform 0.9s var(--ease-out) 0.15s, visibility 0s;
}
.ask__title {
  margin: 0;
  max-width: 16ch;
  font-family: var(--font-logo);
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
  text-wrap: balance;
}
.ask__q--final .ask__title { max-width: 20ch; font-size: var(--fs-h2); }
.ask__lead {
  margin: clamp(1rem, 0.8571rem + 0.6095vw, 1.625rem) 0 0;
  max-width: 52ch;
  font-size: var(--fs-m);
  font-weight: 300;
  line-height: var(--lh-text-m);
  color: #6b655c;
}

.ask__opts {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.5rem, 0.4286rem + 0.3048vw, 0.8125rem);
  margin-top: clamp(1.5rem, 1.0714rem + 1.8286vw, 3.375rem);
}
.ask__opt {
  display: inline-flex;
  align-items: center;
  height: var(--btn-h);
  padding: 0 1.4em;
  border: 1px solid rgba(22, 18, 13, 0.22);
  border-radius: 999px;
  background: #fff;
  color: #16120d;
  font-size: var(--fs-m);
  font-weight: 400;
  letter-spacing: var(--ls-title);
  cursor: pointer;
  /* Варианты входят следом за вопросом, по очереди */
  opacity: 0;
  transform: translate3d(0, 1rem, 0);
  transition: opacity 0.3s var(--ease-rev), transform 0.3s var(--ease-rev),
              background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.ask__q.is-current .ask__opt {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--ease-out) var(--t), transform 0.9s var(--ease-out) var(--t),
              background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.ask__q.is-current .ask__opt:nth-child(1) { --t: 0.3s; }
.ask__q.is-current .ask__opt:nth-child(2) { --t: 0.39s; }
.ask__q.is-current .ask__opt:nth-child(3) { --t: 0.48s; }
.ask__q.is-current .ask__opt:nth-child(4) { --t: 0.57s; }
.ask__opt:hover,
.ask__opt:focus-visible { background: #16120d; color: #fff; border-color: #16120d; }
/* Выбранный на миг вспыхивает красным и уходит в стопку */
.ask__opt.is-picked { background: var(--arc-high); color: #fff; border-color: var(--arc-high); }

.ask__final {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 1rem + 1.0667vw, 2rem);
  margin-top: clamp(1.5rem, 1.0714rem + 1.8286vw, 3.375rem);
}
.ask__cta {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.375rem, 0.3125rem + 0.2667vw, 0.5625rem);
  text-decoration: none;
  color: inherit;
}
.ask__cta-label {
  display: inline-flex;
  align-items: center;
  height: var(--btn-h);
  padding: 0 1.9em;
  border-radius: 999px;
  background: #16120d;
  color: #fff;
  font-size: var(--fs-s);
  font-weight: 500;
  letter-spacing: var(--ls-btn);
  line-height: var(--lh-flat);
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.3s ease;
}
.ask__cta-icon {
  display: grid;
  place-items: center;
  width: var(--btn-h);
  height: var(--btn-h);
  border-radius: 50%;
  background: #16120d;
  color: #fff;
  transition: background 0.3s ease;
}
.ask__cta-icon svg { display: block; width: 34%; transition: transform 0.3s var(--ease-out); }
.ask__cta:hover .ask__cta-label, .ask__cta:hover .ask__cta-icon { background: var(--arc-high); }
.ask__cta:hover svg { transform: translate(2px, -2px); }
.ask__qr {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  font-size: var(--fs-s);
  color: #8d8880;
}
.ask__qr img {
  width: clamp(3.5rem, 3rem + 2vw, 5rem);
  height: auto;
  border-radius: 0.5rem;
  border: 1px solid rgba(22, 18, 13, 0.12);
}

.ask__foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  margin-top: clamp(2rem, 1.4464rem + 2.3619vw, 4.3125rem);
  padding-top: clamp(1rem, 0.8571rem + 0.6095vw, 1.625rem);
  border-top: 1px solid rgba(22, 18, 13, 0.12);
  font-size: var(--fs-s);
  font-weight: 300;
  color: #6b655c;
}
.ask__back {
  padding: 0;
  border: 0;
  background: transparent;
  color: #16120d;
  font-size: inherit;
  font-weight: 400;
  cursor: pointer;
  border-bottom: 1px solid currentColor;
  transition: color 0.3s ease;
}
.ask__back:hover { color: #8d8880; }
.ask__talk { margin: 0; }
.ask__talk a { color: #16120d; text-decoration: none; border-bottom: 1px solid currentColor; }
.ask__talk a:hover { color: #8d8880; }

@media (max-width: 720px) {
  .ask__title { font-size: var(--fs-h2); }
  .ask__opts { flex-direction: column; align-items: stretch; }
  .ask__opt { justify-content: space-between; }
  .ask__qr { display: none; }
}
@media (hover: none) { .ask__qr { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .ask__glow, .ask__q, .ask__opt, .ask__done li, .ask__count-n { transition: none; animation: none; }
}

/* ---------- Подвал: слово из пикселей и время ---------- */
.footer__time {
  margin: clamp(1rem, 0.8571rem + 0.6095vw, 1.625rem) 0 0;
  font-size: var(--fs-s);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.45);
  font-variant-numeric: tabular-nums;
}
.footer__time span { color: rgba(255, 255, 255, 0.8); }
.footer__word-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  transform: translate3d(0, calc((1 - var(--rise)) * 60%), 0);
  transition: transform 0.15s linear;
}
/* Когда канвас рисует, сам текст прозрачный и служит только разметке */
.footer__word.is-canvas .footer__word-text { color: transparent; }

/* ============================================================
   v6 · приёмы из библиотеки, переработанные под контент.
   Правило отбора: движение помогает сканировать, а не мешает.
   Ничего не размывает текст, ничего не наклоняет карточки с текстом.
   ============================================================ */

/* ---------- Заголовки: строки из-под маски ----------
   Настоящие строки (по переносам), каждая выезжает из-под нижней
   кромки с шагом 110 мс. Нижний отступ у маски — под спуски букв. */
.lm-line { display: block; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.lm-line > i {
  display: block;
  font-style: normal;
  transform: translate3d(0, 108%, 0);
  transition: transform 0.3s var(--ease-rev);
}
[data-stage].is-in .lm-line > i {
  transform: none;
  transition: transform 0.9s var(--ease-out) calc(var(--d, 0) * 1ms + var(--i, 0) * 110ms);
}
/* Заголовок с разбивкой не должен ещё и целиком ехать снизу */
[data-stage] .rv.is-split { transform: none; }

/* ---------- Фокус на строке (Focus List) ----------
   Наведение на строку реестра или вопрос приглушает соседей.
   Без размытия: размытый текст читать нельзя, а тут его читают. */
@media (hover: hover) {
  .ledger__row, .questions-item { transition: opacity 0.34s ease; }
  .ledger:has(.ledger__row:hover) .ledger__row:not(:hover) { opacity: 0.42; }
  .questions-list:has(.questions-item:hover) .questions-item:not(:hover) { opacity: 0.42; }
}

/* ---------- Цифры лентой (Number Roll) ----------
   Каждый разряд — колонка 0…9, сдвинутая на нужное число em.
   Пока секция не в кадре, все стоят на нуле; при входе едут к значению
   (1.4 с), при уходе назад — возвращаются. Только CSS-переменные. */
.nr { display: inline-flex; align-items: baseline; }
.nr__d {
  display: inline-block;
  height: 1em;
  overflow: hidden;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.nr__d > i {
  display: block;
  font-style: normal;
  transform: translate3d(0, calc(var(--v, 0) * -1em), 0);
  transition: transform 0.6s var(--ease-rev);
}
.nr__d > i > u { display: block; height: 1em; line-height: 1; text-decoration: none; }
[data-stage].is-in .nr__d > i {
  --v: var(--n);
  transition: transform 1.4s var(--ease-out) calc(var(--d, 0) * 1ms + var(--k, 0) * 60ms + 200ms);
}
/* Реестр: величина была скрыта своей шторкой — с лентой она не нужна */
.ledger__value { line-height: 1; padding-bottom: 0.08em; }

/* ---------- Световое пятно под курсором (Spotlight) ----------
   На тёмных карточках и панелях: мягкий свет следует за курсором.
   Никаких рамок — только пятно. */
.spot { position: relative; }
.spot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(18rem circle at var(--sx, 50%) var(--sy, 50%), rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0) 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
@media (hover: hover) { .spot:hover::after { opacity: 1; } }

/* ---------- Магнит на кнопках ----------
   Кнопка тянется к курсору на 8px, надпись — на 45% от этого:
   расслоение и даёт ощущение веса. */
.mag { transition: transform 0.42s var(--ease-out); will-change: transform; }
.mag > * { transition: transform 0.42s var(--ease-out), background 0.3s ease; }
@media (hover: none) { .mag, .mag > * { transform: none !important; } }

/* ---------- Подпись у курсора над видео ---------- */
.vcur {
  position: fixed;
  left: 0; top: 0;
  z-index: 60;
  padding: 0.55em 1.1em;
  border-radius: 999px;
  background: #fff;
  color: #16120d;
  font-size: var(--fs-s);
  font-weight: 500;
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.3s var(--ease-out);
}
.vcur.is-on { transform: translate(-50%, -50%) scale(1); }
@media (hover: hover) {
  .vreview__play { transition: transform 0.6s var(--ease-out), opacity 0.3s ease, box-shadow 0.6s ease; }
  .vreview:hover .vreview__play { opacity: 0; transform: scale(0.6); box-shadow: none; }
}

/* ---------- Лента скринов: инерция вместо ровного хода ----------
   Ход даёт main.js: скролл страницы подталкивает ленту, наведение
   плавно замедляет её, а не останавливает рывком. */
.shots__track { animation: none; transform: translate3d(var(--x, 0px), 0, 0); will-change: transform; }

/* ---------- Окно кейса вырастает из карточки ---------- */
.cmodal__win { animation: none; transform-origin: 0 0; }

/* ---------- Копирование почты ---------- */
.footer__mail { display: inline-flex; align-items: center; gap: 0.6em; }
.footer__copy {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.footer__copy svg { width: 46%; }
.footer__copy:hover { background: #fff; color: #16120d; border-color: #fff; }
.footer__copy-done {
  font-size: var(--fs-pill);
  color: rgba(255, 255, 255, 0.55);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.3s ease, transform 0.3s var(--ease-out);
}
.footer__mail.is-copied .footer__copy-done { opacity: 1; transform: none; }

/* ---------- Зерно на тёмных секциях ----------
   Темнота как материал, а не как заливка: шум генерирует браузер
   (feTurbulence), поверх — прыгает шагами, как плёнка. */
.grain { position: relative; }
.grain::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.055;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  animation: grainJitter 0.7s steps(4) infinite;
}
@keyframes grainJitter {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-3%, 2%); }
  50%  { transform: translate(2%, -3%); }
  75%  { transform: translate(-1%, -1%); }
  100% { transform: translate(3%, 3%); }
}
.grain > * { position: relative; z-index: 1; }

/* ---------- График: курсор можно тащить ---------- */
.path__chart { touch-action: pan-y; cursor: grab; }
.path__chart.is-hold { cursor: grabbing; }
.path__hint {
  position: absolute;
  right: 0.25rem;
  top: 0.9rem;
  margin: 0;
  font-size: var(--fs-s);
  color: rgba(255, 255, 255, 0.35);
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.path__chart.is-hold .path__hint, .path__chart.is-used .path__hint { opacity: 0; }

/* ---------- Отбор: граница следит за курсором ---------- */
.fit__half--no { clip-path: polygon(calc(10% + var(--cut, 0%)) 0, 100% 0, 100% 100%, calc(0% - var(--cut, 0%)) 100%); transition: clip-path 0.6s var(--ease-out); }
@media (max-width: 800px) { .fit__half--no { clip-path: polygon(0 6vw, 100% 0, 100% 100%, 0 100%); } }

@media (prefers-reduced-motion: reduce) {
  .lm-line > i, .nr__d > i { transform: none !important; transition: none !important; }
  .ledger:has(.ledger__row:hover) .ledger__row:not(:hover),
  .questions-list:has(.questions-item:hover) .questions-item:not(:hover) { opacity: 1; }
  .grain::before { animation: none; }
  .mag, .mag > * { transform: none !important; }
  .vcur { display: none; }
}


/* ============================================================
   v7 · правки по замечаниям Эли
   ============================================================ */

/* Утечки: карточки отодвинуты от шапки примерно на десятую экрана.
   Высоту карточек считает main.js от свободной полосы — они сами
   станут чуть ниже, низ останется на своём поле. */
.leaks-sticky { gap: clamp(2.25rem, 11svh, 7rem); }

/* Мягкий свет: крошечный холст растянут на карточку, поверх —
   едва заметная мелкая точка, как у света первого экрана. */
.leak__fx {
  image-rendering: auto;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0.9px, rgba(0, 0, 0, 0.72) 1.3px);
          mask-image: radial-gradient(circle at 50% 50%, #000 0.9px, rgba(0, 0, 0, 0.72) 1.3px);
  -webkit-mask-size: 4px 4px;
          mask-size: 4px 4px;
}

/* Подход: запас прокрутки под паузу на входе */
.approach { height: 260svh; }
@media (max-width: 1000px) { .approach { height: auto; } }

/* Источники: пилюле больше воздуха до заголовка, заголовок с
   подзаголовком ниже и ближе к карточкам. */
.sources--center .frame__eyebrow { margin-bottom: clamp(1.75rem, 1.25rem + 2.1333vw, 3.25rem); }
.sources--lock .frame__side { margin-top: clamp(0.5rem, 1.5svh, 1.25rem); }
@media (max-width: 720px) {
  .sources--lock .frame__side { margin-top: clamp(1.5rem, 1.0714rem + 1.8286vw, 3.375rem); }
}

/* График: блок снова прилипает (зерно в v6 перебивало position) */
.path__sticky { position: sticky; }
@media (max-width: 900px) { .path__sticky { position: static; } }
@media (prefers-reduced-motion: reduce) { .path__sticky { position: static; } }
.path__chart { border-color: rgba(255, 255, 255, 0.1); }


/* ============================================================
   v7 · вторая часть правок: без кремовых тонов, без красных
   заливок. Светлое — белый и серый #f5f5f5, тёмное — нейтральный
   уголь #141313, красный остался только мягким светом.
   ============================================================ */

/* ---------- Мягкий свет на любых карточках ---------- */
.glow-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0.9px, rgba(0, 0, 0, 0.72) 1.3px);
          mask-image: radial-gradient(circle at 50% 50%, #000 0.9px, rgba(0, 0, 0, 0.72) 1.3px);
  -webkit-mask-size: 4px 4px;
          mask-size: 4px 4px;
}
.has-glow { overflow: hidden; isolation: isolate; }
.has-glow > *:not(.glow-fx) { position: relative; z-index: 1; }

/* Карточки, где раньше была красная заливка или картинка */
.fan__card--red { background: #141313; }
.stack__card:last-child { background: #141313; }
.stack__card:last-child::after { display: none; }
.ccard--red .ccard__btn { background: #141313; }
.ccard--red .ccard__btn::before { display: none; }
.ccard--dark .ccard__btn { background: #141313; }
.stack__card:nth-child(3) { background: #141313; }

/* ---------- Ангелина и команда: серый вместо тёплого ---------- */
.people { background: #f5f5f5; }
.crew__img { background: #e9e9e9; }

/* ---------- С чего начать: три шага, всё видно сразу ----------
   Лесенка: каждый следующий шаг стоит ниже предыдущего. Это путь,
   а не три равных тарифа — поэтому никто не «приподнят». */
.start { background: #f5f5f5; }
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: clamp(0.75rem, 0.6071rem + 0.6095vw, 1.625rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pstep {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: clamp(24rem, 20rem + 12vw, 31rem);
  padding: clamp(1.125rem, 0.9821rem + 0.6095vw, 1.75rem);
  border-radius: var(--radius);
}
.pstep:nth-child(2) { margin-top: clamp(1.25rem, 0.75rem + 2.1333vw, 3rem); }
.pstep:nth-child(3) { margin-top: clamp(2.5rem, 1.5rem + 4.2667vw, 6rem); }
.pstep--white { background: #fff; border: 1px solid rgba(22, 18, 13, 0.08); color: #16120d; }
.pstep--dark  { background: #141313; color: #fff; }
.pstep__tag {
  display: inline-flex;
  align-self: flex-start;
  margin: 0 0 clamp(1.75rem, 1.25rem + 2.1333vw, 3.5rem);
  padding: 0.5em 1.1em;
  border: 1px solid rgba(22, 18, 13, 0.22);
  border-radius: 999px;
  font-size: var(--fs-pill);
  line-height: var(--lh-title);
  color: #6b655c;
}
.pstep--dark .pstep__tag { border-color: rgba(255, 255, 255, 0.28); color: rgba(255, 255, 255, 0.72); }
.pstep__price {
  margin: 0 0 0.45em;
  font-family: var(--font-logo);
  /* 32 → 58px: как h2, цена здесь главный знак */
  font-size: clamp(2rem, 1.4583rem + 2.4074vw, 3.625rem);
  font-weight: 400;
  line-height: var(--lh-flat);
  letter-spacing: var(--ls-head);
  white-space: nowrap;
}
.pstep__text {
  margin: 0;
  max-width: 36ch;
  font-size: var(--fs-m);
  font-weight: 300;
  line-height: var(--lh-text-m);
  color: #6b655c;
}
.pstep--dark .pstep__text { color: rgba(255, 255, 255, 0.78); }
.pstep__list {
  margin: clamp(1.25rem, 1rem + 1.0667vw, 2rem) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-s);
  font-weight: 400;
  line-height: var(--lh-text-s);
}
.pstep__list li {
  padding: 0.75em 0;
  border-top: 1px solid rgba(22, 18, 13, 0.1);
}
.pstep--dark .pstep__list li { border-color: rgba(255, 255, 255, 0.16); }
.pstep__note {
  margin: auto 0 0;
  padding-top: clamp(1rem, 0.8571rem + 0.6095vw, 1.625rem);
  font-size: var(--fs-s);
  font-weight: 300;
  color: #8d8880;
}
.pstep--dark .pstep__note { color: rgba(255, 255, 255, 0.6); }
.pstep__cta { margin-top: auto; padding-top: clamp(1rem, 0.8571rem + 0.6095vw, 1.625rem); align-self: flex-start; }

.terms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 0.6071rem + 0.6095vw, 1.625rem);
  margin: clamp(2.5rem, 1.6667rem + 3.5556vw, 5.5rem) 0 0;
  padding: 0;
  list-style: none;
}
.terms__item {
  position: relative;
  padding-top: clamp(1rem, 0.8571rem + 0.6095vw, 1.625rem);
}
.terms__item::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--line-l);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.3s var(--ease-rev);
}
.is-in .terms__item::before { transform: scaleX(1); transition: transform 0.9s var(--ease-out) calc(var(--d) * 1ms); }
.terms__name {
  margin: 0;
  font-family: var(--font-logo);
  font-size: clamp(1.0625rem, 0.9554rem + 0.4571vw, 1.5rem);
  font-weight: 600;
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  text-wrap: balance;
}
.terms__text {
  margin: 0.6em 0 0;
  max-width: 36ch;
  font-size: var(--fs-s);
  font-weight: 300;
  line-height: var(--lh-text-m);
  color: #6b655c;
}
[data-stage] .terms__name, [data-stage] .terms__text {
  opacity: 0; transform: translate3d(0, 0.9rem, 0);
  transition: opacity 0.3s var(--ease-rev), transform 0.3s var(--ease-rev);
}
[data-stage].is-in .terms__name, [data-stage].is-in .terms__text {
  opacity: 1; transform: none;
  transition: opacity 0.6s var(--ease-out) calc(var(--d) * 1ms + 150ms), transform var(--dur-in) var(--ease-out) calc(var(--d) * 1ms + 150ms);
}
@media (max-width: 900px) {
  .steps, .terms { grid-template-columns: minmax(0, 1fr); }
  .pstep { min-height: 0; }
  .pstep:nth-child(2), .pstep:nth-child(3) { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .terms__item::before { transform: none; transition: none; }
  [data-stage] .terms__name, [data-stage] .terms__text { opacity: 1; transform: none; transition: none; }
}

/* ---------- Разбор: карточка в строе сайта ----------
   Белая секция, серая карточка, слева угольная панель со светом —
   та же композиция, что была у опросника, но вопросы идут по одному. */
.ask {
  background: #fff;
  padding: var(--sec-pad-b) var(--gutter);
  display: grid;
  place-items: center;
}
.ask__glow { display: none; }
.ask__card {
  display: grid;
  grid-template-columns: minmax(0, 0.44fr) minmax(0, 0.56fr);
  gap: clamp(1.25rem, 0.9821rem + 1.1429vw, 2.375rem);
  width: min(100%, 72rem);
  padding: clamp(1rem, 0.8571rem + 0.6095vw, 1.625rem);
  border: 1px solid rgba(22, 18, 13, 0.1);
  border-radius: clamp(1rem, 0.8571rem + 0.6095vw, 1.625rem);
  background: #f5f5f5;
}
.ask__panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  min-height: clamp(20rem, 46svh, 30rem);
  padding: clamp(1rem, 0.8571rem + 0.6095vw, 1.625rem);
  border-radius: clamp(0.75rem, 0.6429rem + 0.4571vw, 1.1875rem);
  background: #141313;
  color: #fff;
}
.ask__panel .ask__eyebrow { align-self: flex-start; border-color: rgba(255, 255, 255, 0.28); color: rgba(255, 255, 255, 0.72); }
/* Свет панели теплеет с каждым ответом */
.ask__panel .glow-fx { opacity: calc(0.55 + var(--warm) * 0.45); transition: opacity 1.2s var(--ease-out); }
.ask__lede {
  margin: 0;
  font-family: var(--font-logo);
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
  text-wrap: balance;
}
.ask__sub {
  margin: 0.7em 0 0;
  font-size: var(--fs-s);
  font-weight: 300;
  line-height: var(--lh-text-m);
  color: rgba(255, 255, 255, 0.8);
}
.ask__body {
  display: flex;
  flex-direction: column;
  padding: clamp(0.75rem, 0.5357rem + 0.9143vw, 1.625rem) clamp(0.5rem, 0.3571rem + 0.6095vw, 1.125rem);
}
.ask__head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; min-height: 2.4rem; }
.ask__count {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  margin: 0;
  padding: 0.5em 1.1em;
  border: 1px solid rgba(22, 18, 13, 0.22);
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: var(--fs-pill);
  line-height: var(--lh-title);
  color: #6b655c;
}
.ask__count-n { min-width: 0; color: #16120d; }
.ask__count-of { color: #6b655c; }
.ask__done { min-height: 0; margin: 0; }
.ask__stage { margin-top: clamp(1.25rem, 1rem + 1.0667vw, 2rem); }
.ask__title {
  max-width: 22ch;
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
}
.ask__q--final .ask__title { font-size: var(--fs-h3); max-width: 22ch; }
.ask__opts { margin-top: clamp(1.25rem, 1rem + 1.0667vw, 2rem); }
.ask__foot {
  margin-top: auto;
  padding-top: clamp(1rem, 0.8571rem + 0.6095vw, 1.625rem);
  border-top: 1px solid rgba(22, 18, 13, 0.12);
  display: grid;
  gap: 0.5rem;
  justify-items: start;
}
.ask__note { margin: 0; }
@media (max-width: 860px) {
  .ask__card { grid-template-columns: minmax(0, 1fr); }
  .ask__panel { min-height: clamp(13rem, 30svh, 18rem); }
}

/* ---------- Подвал: слово чисто белое, свечение тише ---------- */
.footer__word::before {
  background: radial-gradient(60% 90% at 50% 115%, rgba(172, 12, 15, 0.38) 0%, rgba(125, 5, 16, 0.16) 40%, rgba(3, 3, 3, 0) 75%);
}

/* Свет всегда лежит подложкой: у стопки и кейсов есть свои правила
   «все дети — relative», они не должны ставить холст в поток. */
:where(.has-glow) { position: relative; }
.has-glow > canvas.glow-fx { position: absolute !important; z-index: 0 !important; }
/* Две тёмные карточки стопки подряд: последняя на тон светлее */
.stack__card:last-child { background: #1b1b1c; }

/* ============================================================
   v8 · карточка «Вы выходите из ручного управления»: светлая
   кромка сверху и справа. Картинка отсчитывалась от внутреннего
   края рамки в 1px, и под рамкой проступал серый фон карточки.
   Теперь она кладётся от внешнего края и кадрируется чуть крупнее,
   с запасом за все четыре стороны — скругление режет её как маска.
   ============================================================ */
.step--light,
.step--dawn { background-origin: border-box; border: 0; }
.step--dawn {
  background-size: 106% auto;
  background-position: 50% -0.5rem;
}

/* ============================================================
   v9 · отступы между блоками, веер источников, плашки отзывов
   ============================================================ */

/* ---------- Правило отступов ----------
   На широком экране от края блока до его содержимого — не меньше
   100px. Нижнее поле раньше давало 93px на 1440, теперь 111. */
:root { --sec-pad-b: clamp(3.5rem, 2.25rem + 5.2vw, 8.75rem); --edge: max(6.25rem, 11svh); }

@media (min-width: 1001px) {
  /* Утечки: шапка была в 72px от края */
  .leaks-sticky { padding-top: var(--edge); }
  /* График: шапка была в 36px от края */
  .path__sticky { padding-top: var(--edge); padding-bottom: clamp(2.5rem, 6svh, 4rem); }
  /* Стопка «Отдел продаж» */
  .stack--lock .stack__sticky { padding-top: var(--edge); }
}
@media (min-width: 721px) {
  /* Источники: пилюля стояла в 13px от края предыдущего блока.
     Рамка блока была выше экрана и упиралась в его края — её верх
     и низ всё равно не были видны. Рамка снята, поля держит сам блок. */
  .sources--lock .sources__sticky { padding-top: var(--edge); padding-bottom: clamp(1.5rem, 4svh, 3rem); justify-content: flex-start; }
  .sources--lock .frame { border: 0; padding: 0; border-radius: 0; }
}
.footer { padding-top: max(6.25rem, calc(84px * var(--up))); }

/* ---------- Веер: воронки и база тёмные со светом, офферы светлые ---------- */
.fan__card--light { background: #141313; color: #fff; }
.fan__card--light .source__num  { color: rgba(255, 255, 255, 0.72); }
.fan__card--light .source__name { color: #fff; }
.fan__card--light .source__text { color: rgba(255, 255, 255, 0.82); }
.fan__card--grey { background: #f5f5f5; color: #16120d; }
.fan__card--grey .source__num  { color: rgba(22, 18, 13, 0.6); }
.fan__card--grey .source__name { color: #16120d; }
.fan__card--grey .source__text { color: #6b655c; }

/* ---------- Отзывы: плашки светлее фона ----------
   Кадры и скрины читаются как места под материал, а не сливаются
   с чёрным. Когда встанут видео и скрины, плашки уйдут под них. */
.vreview__frame { background: #262627; }
.vreview__media {
  background:
    radial-gradient(90% 60% at 50% 112%, rgba(172, 12, 15, 0.28) 0%, rgba(172, 12, 15, 0) 70%),
    linear-gradient(180deg, #2e2e30 0%, #222223 100%);
}
.vreview__frame::after {
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.35) 75%, rgba(0,0,0,0.6) 100%);
}
.shot__media {
  background: linear-gradient(180deg, #2a2a2c 0%, #202021 100%);
  border-color: rgba(255, 255, 255, 0.08);
}

/* ---------- Прилипающие блоки: отступ есть, но места не ест ----------
   Блок въезжает с полем в 100px сверху. В момент фиксации это поле
   уходит за верхний край экрана: прилипший блок выше экрана на
   --shift и закреплён с отрицательным top. Содержимому достаётся
   почти вся высота окна — важно на ноутбуках с окном ~770px. */
:root { --shift: calc(var(--edge) - 1.5rem); }
@media (min-width: 1001px) {
  .leaks-sticky,
  .path__sticky,
  .stack--lock .stack__sticky {
    top: calc(var(--shift) * -1);
    height: calc(100svh + var(--shift));
  }
}
@media (min-width: 721px) {
  .sources--lock .sources__sticky {
    top: calc(var(--shift) * -1);
    height: calc(100svh + var(--shift));
  }
  .sources--center .frame__eyebrow { margin-bottom: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); }
}
@media (prefers-reduced-motion: reduce) {
  .leaks-sticky, .path__sticky, .stack--lock .stack__sticky, .sources--lock .sources__sticky { top: auto; height: auto; }
}

/* ---------- График: этапы в одну строку, описание — общей полосой ----------
   Раньше описание активного этапа стояло столбиком в своей колонке
   и занимало треть экрана. Теперь сроки и названия идут строкой,
   а описание и результат активного этапа лежат под ними в две
   колонки во всю ширину. Графику достаётся вдвое больше высоты. */
@media (min-width: 901px) {
  .path__stages {
    grid-template-rows: auto auto auto;
    row-gap: 0;
  }
  .path__stage { display: contents; }
  .path__stage::before, .path__stage::after { display: none; }
  .path__when {
    position: relative;
    grid-row: 1;
    grid-column: calc(var(--i) + 1);
    margin: 0;
    padding-top: clamp(0.875rem, 0.7321rem + 0.6095vw, 1.5rem);
    opacity: 0.38;
    transition: opacity 0.6s var(--ease-out);
  }
  .path__when::before, .path__when::after {
    content: "";
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    height: 1px;
    background: var(--line-d);
  }
  .path__when::after { background: #fff; transform: scaleX(var(--fill, 0)); transform-origin: 0 50%; }
  .path__name {
    grid-row: 2;
    grid-column: calc(var(--i) + 1);
    margin-top: 0.5em;
    opacity: 0.38;
    transition: opacity 0.6s var(--ease-out);
  }
  .path__stage.is-active .path__when,
  .path__stage.is-active .path__name { opacity: 1; }
  .path__text, .path__result {
    grid-row: 3;
    max-height: none;
    margin: clamp(1rem, 0.8571rem + 0.6095vw, 1.625rem) 0 0;
    padding: clamp(0.875rem, 0.7321rem + 0.6095vw, 1.5rem) 0 0;
    border-top: 1px solid var(--line-d);
    overflow: visible;
    visibility: hidden;
    opacity: 0;
    transform: translate3d(0, 0.5rem, 0);
    transition: opacity 0.3s var(--ease-rev), transform 0.3s var(--ease-rev), visibility 0s linear 0.3s;
  }
  .path__text { grid-column: 1 / 3; max-width: 64ch; font-size: var(--fs-m); }
  .path__result { grid-column: 3 / 5; font-size: var(--fs-m); }
  .path__stage:not(.is-active) .path__result {
    margin-top: clamp(1rem, 0.8571rem + 0.6095vw, 1.625rem);
    padding-top: clamp(0.875rem, 0.7321rem + 0.6095vw, 1.5rem);
    border-top-width: 1px;
  }
  .path__stage.is-active .path__text,
  .path__stage.is-active .path__result {
    max-height: none;
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 0.6s var(--ease-out) 0.15s, transform 0.9s var(--ease-out) 0.15s, visibility 0s;
  }
  .path__result span { font-size: var(--fs-s); }
}
@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
  .path__text, .path__result { visibility: visible; opacity: 1; transform: none; grid-row: auto; grid-column: 1 / -1; }
}

/* ---------- График: нижняя строка стоит на месте ----------
   Высота полосы с описанием одинакова для всех этапов (они лежат
   в одной ячейке сетки), поэтому график больше не прыгает. От
   последней строки до края блока — около 100px. */
@media (min-width: 1001px) {
  .path__sticky {
    grid-template-rows: auto minmax(9rem, 1fr) auto;
    padding-bottom: max(5.5rem, 11svh);
  }
}

/* ---------- Плашка опросника: шире и выше ---------- */
.ask__card {
  width: 100%;
  gap: clamp(1.5rem, 1rem + 2.1333vw, 3.5rem);
}
.ask__panel { min-height: clamp(22rem, 58svh, 36rem); padding: clamp(1.25rem, 1rem + 1.0667vw, 2.25rem); }
.ask__body { padding: clamp(1.25rem, 1rem + 1.0667vw, 2.25rem) clamp(0.75rem, 0.5rem + 1.0667vw, 1.75rem); }
@media (max-width: 860px) {
  .ask__panel { min-height: clamp(13rem, 30svh, 18rem); }
}

/* ---------- Мост «Пройдите тест»: та же плашка, что у опросника ---------- */
.bridge { padding: var(--sec-pad) var(--gutter); --warm: 1; }
.bridge__plate .ask__panel { min-height: clamp(18rem, 44svh, 27rem); }
.bridge__side { justify-content: center; gap: clamp(1rem, 0.8571rem + 0.6095vw, 1.625rem); }
.bridge__lead {
  margin: 0;
  max-width: 30ch;
  font-family: var(--font-logo);
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: var(--lh-title);
  letter-spacing: var(--ls-head);
  color: #16120d;
  text-wrap: balance;
}
.bridge__note {
  margin: 0;
  max-width: 46ch;
  font-size: var(--fs-m);
  font-weight: 300;
  line-height: var(--lh-text-m);
  color: #6b655c;
}
.bridge__plate .bridge__foot { margin-top: clamp(0.5rem, 0.25rem + 1.0667vw, 1.5rem); justify-content: flex-start; }

/* ---------- Подвал: свет первого экрана и крупное слово ---------- */
.footer__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.footer__word { z-index: 1; }
.footer__word::before { display: none; }
.footer__word-text { color: #fff; font-weight: 500; }
.footer__legal { border-top-color: rgba(255, 255, 255, 0.12); }
.bridge__plate .bridge__foot { gap: clamp(0.375rem, 0.3125rem + 0.2667vw, 0.5625rem); padding-top: 0; }

/* Мост: крупная фраза не должна занимать семь строк */
.bridge__lead { font-size: clamp(1.25rem, 0.9167rem + 1.4815vw, 2.25rem); max-width: 34ch; }

/* ---------- Кейсы: кружок с логотипом или аватаркой ----------
   Правый верхний угол карточки. Пока файла нет — монограмма. */
.ccard__ava {
  position: absolute !important;
  z-index: 2;
  top: clamp(1.125rem, 0.9821rem + 0.6095vw, 1.75rem);
  right: clamp(1.125rem, 0.9821rem + 0.6095vw, 1.75rem);
  display: grid;
  place-items: center;
  width: clamp(2.5rem, 2.2rem + 1.2vw, 3.5rem);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  background: rgba(22, 18, 13, 0.06);
  box-shadow: 0 0 0 1px rgba(22, 18, 13, 0.1);
}
.ccard--dark .ccard__ava, .ccard--red .ccard__ava { background: rgba(255, 255, 255, 0.08); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16); }
.ccard__ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ccard__ava--logo { background: #fff; }
.ccard__ava--logo img { object-fit: contain; padding: 18%; }
.ccard__ava-mono {
  font-family: var(--font-logo);
  font-size: clamp(0.8125rem, 0.75rem + 0.3vw, 1rem);
  font-weight: 600;
  letter-spacing: var(--ls-title);
  color: #6b655c;
}
.ccard--dark .ccard__ava-mono, .ccard--red .ccard__ava-mono { color: rgba(255, 255, 255, 0.72); }
/* Пилюля формата не должна заезжать под кружок */
.ccard__tag { max-width: calc(100% - 4.5rem); }
/* В окне кейса кружок не нужен */
.cmodal .ccard__ava { display: none; }


/* ============================================================
   v10 · правки по замечаниям и «богатые» детали
   ============================================================ */

/* ---------- Кнопки: никакого красного ----------
   Правило сайта: плашка со стрелкой — один предмет. При наведении
   он слегка подпрыгивает целиком, стрелка уходит по диагонали.
   Цвет не меняется. */
.cases__cta, .people__cta, .start__cta, .ask__cta {
  gap: 2px;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}
.cases__cta:hover, .people__cta:hover, .start__cta:hover, .ask__cta:hover,
.cases__cta:focus-visible, .people__cta:focus-visible, .start__cta:focus-visible, .ask__cta:focus-visible {
  transform: translate3d(0, -4px, 0);
}
.cases__cta:hover .cases__cta-label,   .cases__cta:hover .cases__cta-icon,
.people__cta:hover .people__cta-label, .people__cta:hover .people__cta-icon,
.start__cta:hover .start__cta-label,   .start__cta:hover .start__cta-icon,
.ask__cta:hover .ask__cta-label,       .ask__cta:hover .ask__cta-icon { background: #16120d; }
.mag, .mag > * { transition: none; transform: none; }
/* Выбранный ответ в опроснике — тёмный, не красный */
.ask__opt.is-picked { background: #16120d; color: #fff; border-color: #16120d; }
.ask__opt { transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
.ask__q.is-current .ask__opt:hover { transform: translate3d(0, -3px, 0); }
/* Реестр: красного свечения при наведении нет — только приглушение соседей */
.ledger__row::before { display: none; }
@media (prefers-reduced-motion: reduce) {
  .cases__cta, .people__cta, .start__cta, .ask__cta { transition: none; transform: none !important; }
}

/* ---------- Мост: уже и собраннее ---------- */
.bridge__plate {
  width: min(100%, 70rem);
  margin-inline: auto;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
}
.bridge { display: grid; }
.bridge__plate .ask__panel { min-height: clamp(17rem, 42svh, 25rem); }
.bridge__lead { font-size: clamp(1.25rem, 1.0278rem + 0.9877vw, 1.9167rem); max-width: 30ch; }
.bridge__note { max-width: 40ch; }
.bridge__cta { align-self: flex-start; margin-top: clamp(0.5rem, 0.25rem + 1.0667vw, 1.5rem); }
/* Опросник: шире моста, но не во всю сетку */
.ask__card:not(.bridge__plate) { width: min(100%, 80rem); }

/* ---------- График: мелкий текст прежнего размера ---------- */
@media (min-width: 901px) {
  .path__text, .path__result { font-size: var(--fs-s); line-height: var(--lh-text-m); }
  .path__text { max-width: 58ch; }
  .path__result { max-width: 48ch; }
}

/* ---------- Кейсы: аватарки одного тона ----------
   Снимки цветные и разные по фону; в оттенках серого кружки
   держат строй. Цвет возвращается при наведении на карточку. */
.ccard__ava img { filter: grayscale(1) contrast(1.05); transition: filter 0.6s ease; }
.ccard__btn:hover .ccard__ava img { filter: none; }

/* ---------- Отзывы: временные кадры ---------- */
.vreview__media { background-size: cover; background-position: center; }
.vreview__media[style] { filter: saturate(0.85) brightness(0.8); }

/* ---------- Хромовые объекты ---------- */
.has-glow > canvas.fx3d,
canvas.fx3d {
  position: absolute !important;
  z-index: 0 !important;
  top: -6%;
  right: -10%;
  width: 78%;
  height: auto;
  aspect-ratio: 1;
  pointer-events: none;
}
.bridge__plate canvas.fx3d { width: 86%; top: -12%; right: -16%; }
.pstep canvas.fx3d { width: 58%; top: -8%; right: -14%; opacity: 0.9; }
@media (max-width: 860px) {
  canvas.fx3d { width: 56%; top: -10%; right: -8%; }
  .pstep canvas.fx3d { width: 46%; }
}

/* ---------- Мелкие метки: точки по углам плашек ----------
   Приём с референсов: крошечные точки в углах держат плашку как
   лист в кляссере. Тёмные на светлом, без красного. */
.ask__card {
  position: relative;
  background-image:
    radial-gradient(circle, rgba(22, 18, 13, 0.4) 1.5px, rgba(22, 18, 13, 0) 2px),
    radial-gradient(circle, rgba(22, 18, 13, 0.4) 1.5px, rgba(22, 18, 13, 0) 2px);
  background-size: 8px 8px, 8px 8px;
  background-position: calc(100% - 10px) 10px, calc(100% - 10px) calc(100% - 10px);
  background-repeat: no-repeat;
}

/* ---------- Нумерация разделов в правом углу ----------
   Тихая метка «(05)» на уровне пилюли. Номер считает CSS. */
body { counter-reset: sec; }
.reviews, .why, .cases, .start, .questions-section { position: relative; counter-increment: sec; }
.reviews::after, .why::after, .cases::after, .start::after, .questions-section::after {
  content: "(" counter(sec, decimal-leading-zero) ")";
  position: absolute;
  top: calc(var(--sec-pad) + 0.35rem);
  right: var(--gutter);
  font-size: var(--fs-s);
  font-variant-numeric: tabular-nums;
  color: #8d8880;
  pointer-events: none;
}
.reviews::after { color: rgba(255, 255, 255, 0.45); }
@media (max-width: 720px) {
  .reviews::after, .why::after, .cases::after, .start::after, .questions-section::after { display: none; }
}

/* ---------- Подвал: страница открывает его, как занавес ---------- */
html.has-reveal body > section,
html.has-reveal body > .cmodal { position: relative; z-index: 1; }
html.has-reveal body > .cmodal { position: fixed; z-index: 90; }
html.has-reveal #quiz { margin-bottom: var(--footer-h); }
html.has-reveal .footer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 0;
}
/* Последняя секция уходит вверх со скруглённым низом — под ней
   и «выглядывает» подвал */
html.has-reveal #quiz {
  border-radius: 0 0 clamp(1.25rem, 1rem + 1.0667vw, 2rem) clamp(1.25rem, 1rem + 1.0667vw, 2rem);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55);
}
.footer__bg[hidden] { display: none !important; }

/* Слово из букв: каждая поднимается со своим шагом, толщину ведёт курсор */
.footer__word { height: clamp(5.5rem, 15.5vw, 18rem); }
.footer__word-text {
  display: flex;
  justify-content: center;
  font-size: clamp(3rem, 12.4vw, 15.5rem);
  font-weight: 500;
  letter-spacing: -0.045em;
  transform: translate3d(-50%, 0, 0);
}
.fl {
  display: inline-block;
  font-variation-settings: "wght" 500;
  transform: translate3d(0, calc((1 - var(--rise)) * (70% + var(--i) * 9%)), 0);
  will-change: transform;
}
.footer__top {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease;
}
.footer__top:hover { color: #fff; transform: translate3d(0, -3px, 0); }
.footer__legal { align-items: center; }
@media (prefers-reduced-motion: reduce) {
  .fl { transform: none; }
}

/* Кнопка воспроизведения — белая: красных кнопок на сайте нет */
.vreview__play { background: #fff; color: #16120d; }
.vreview:hover .vreview__play, .vreview__play:focus-visible { box-shadow: none; }

/* Телефон: мост и опросник в одну колонку, кнопка целиком в плашке */
@media (max-width: 860px) {
  .bridge__plate { grid-template-columns: minmax(0, 1fr); }
  .bridge__plate .ask__panel { min-height: clamp(13rem, 30svh, 18rem); }
  .bridge__lead, .bridge__note { max-width: none; }
  .bridge__cta .start__cta-label { padding: 0 1.4em; }
}
@media (max-width: 860px) {
  .has-glow > canvas.fx3d, canvas.fx3d,
  .bridge__plate canvas.fx3d { width: 42%; top: -4%; right: -4%; }
  .pstep canvas.fx3d { width: 38%; top: -4%; right: -6%; }
}


/* ============================================================
   v11 · подсказка «Листайте вправо». Ставится скриптом под лентой,
   только если лента реально листается пальцем. После первого
   свайпа гаснет. Цвет берёт у блока: тёмная на светлом, светлая
   на тёмном.
   ============================================================ */
.swipe-hint {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6em;
  margin: 0.875rem 0 0;
  padding-inline: var(--gutter);
  font-size: var(--fs-pill);
  font-weight: 400;
  line-height: 1;
  color: currentColor;
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.swipe-hint--flush { padding-inline: 0; }
.swipe-hint.is-used { opacity: 0; }
.swipe-hint svg { display: block; width: 1.75em; height: auto; animation: swipeNudge 1.8s var(--ease-out) infinite; }
@keyframes swipeNudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(5px); }
}
@media (prefers-reduced-motion: reduce) { .swipe-hint svg { animation: none; } }

/* Мост «Пройдите тест»: без 3D-объекта, панель — та же, что у опросника.
   Плашка шире за счёт воздуха внутри: поля больше, содержимое прежнее. */
.bridge__plate {
  width: min(100%, 80rem);
  padding: clamp(1.5rem, 1rem + 2.1333vw, 3.5rem);
  gap: clamp(1.5rem, 1rem + 2.1333vw, 4rem);
  grid-template-columns: minmax(0, 27rem) minmax(0, 1fr);
}
.bridge__plate .ask__panel { min-height: clamp(18rem, 46svh, 27rem); }
@media (max-width: 860px) {
  .bridge__plate { grid-template-columns: minmax(0, 1fr); padding: clamp(1rem, 0.8571rem + 0.6095vw, 1.625rem); }
}

/* ============================================================
   v11 · карточки стопки «Отдел продаж». Номер и название стоят
   в верхней строке — она же видна в щели стопки, так что сложенная
   стопка читается целиком: «04 Команда», «05 Процесс продажи».
   Текст поднят под название. Низ карточки держат мелкие метки:
   счётчик «04 / 07» слева и две точки справа, над ними волосяная
   линия. Ярко-серого тона на сайте нет — вторая карточка #f5f5f5.
   ============================================================ */
.stack__card:nth-child(2) { background: #f5f5f5; }
.crew__img { background: #ededed; }

.stack__list { counter-reset: st 3; }
.stack__card {
  counter-increment: st;
  display: grid;
  grid-template-columns: clamp(3.5rem, 2.5rem + 4.2667vw, 7rem) minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  align-content: start;
  column-gap: clamp(0.75rem, 0.5rem + 1.0667vw, 1.75rem);
  padding-top: clamp(1.125rem, 0.9821rem + 0.6095vw, 1.75rem);
  padding-bottom: clamp(3rem, 2.5rem + 2.1333vw, 4.5rem);
}
.stack__num {
  grid-column: 1; grid-row: 1;
  margin: 0;
  align-self: baseline;
  font-size: clamp(1.25rem, 1.0714rem + 0.7619vw, 2rem);
}
.stack__name {
  grid-column: 2; grid-row: 1;
  align-self: baseline;
  font-size: clamp(1.25rem, 1.0714rem + 0.7619vw, 2rem);
  font-weight: 500;
  letter-spacing: var(--ls-head);
  line-height: var(--lh-flat);
}
.stack__text {
  grid-column: 2; grid-row: 2;
  align-self: start;
  margin: clamp(1.25rem, 1rem + 1.0667vw, 2.25rem) 0 0;
  max-width: 46ch;
  font-size: var(--fs-m);
  line-height: var(--lh-text-m);
}
/* Нижняя строка: счётчик и волосяная линия */
.stack__card::before {
  content: counter(st, decimal-leading-zero) " / 07";
  position: absolute;
  z-index: 1;
  left: clamp(1.375rem, 1.0714rem + 1.2952vw, 2.75rem);
  right: clamp(1.375rem, 1.0714rem + 1.2952vw, 2.75rem);
  bottom: clamp(1rem, 0.8571rem + 0.6095vw, 1.625rem);
  padding-top: 0.9em;
  border-top: 1px solid rgba(22, 18, 13, 0.12);
  font-size: var(--fs-s);
  font-variant-numeric: tabular-nums;
  color: #8d8880;
}
/* Две точки в правом нижнем углу */
.stack__card::after,
.stack__card:last-child::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  inset: auto clamp(1.375rem, 1.0714rem + 1.2952vw, 2.75rem) calc(clamp(1rem, 0.8571rem + 0.6095vw, 1.625rem) + 0.3em) auto;
  width: 1.1rem; height: 0.35rem;
  background:
    radial-gradient(circle, currentColor 0 0.14rem, transparent 0.16rem) 0 50% / 0.35rem 0.35rem no-repeat,
    radial-gradient(circle, currentColor 0 0.14rem, transparent 0.16rem) 100% 50% / 0.35rem 0.35rem no-repeat;
  opacity: 0.4;
  pointer-events: none;
}
.stack__card:nth-child(3)::before,
.stack__card:last-child::before { border-color: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.55); }
.stack__card:nth-child(3), .stack__card:last-child { color: #fff; }

/* Цифры лентой: тире и знак процента стояли ниже цифр и читались
   как подчёркивание. Все части числа — ячейки одной высоты,
   выровненные по центру. */
.nr { line-height: 1; align-items: center; }
.nr__d { vertical-align: top; }

/* ============================================================
   v11 · частые вопросы без экспериментов. Соседние строки больше
   не гаснут при наведении. Номер стоит на той же вертикали, что
   заголовок «Частые вопросы», плюс — на правом поле сетки.
   Вопросы крупнее: ступень h3 из шкалы.
   ============================================================ */
.questions-list:has(.questions-item:hover) .questions-item:not(:hover) { opacity: 1; }
.questions-item { transition: none; }
.questions-trigger,
.questions-panel { padding-inline: 0; }
.questions-trigger { min-height: clamp(5rem, 4.4rem + 2.56vw, 7.4rem); }
.questions-item h3 {
  font-size: clamp(1.0625rem, 0.9554rem + 0.4571vw, 1.5rem);
  font-weight: 500;
}
.questions-answer p { font-size: var(--fs-m); }
.questions-panel > div { max-width: 46rem; }

/* ============================================================
   v12 · типографика по системе. Всё, что набрано кеглем заголовка
   (от 28px), держит межстрочный 1.02 и трекинг −0.0345em.
   Цитата Ангелины стояла с 1.3 и −0.01em — как лид, хотя кегль
   у неё заголовочный.
   ============================================================ */
.people__title,
.bridge__lead {
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
}
.people__title { max-width: 22ch; }
.stack__num { letter-spacing: var(--ls-head); }

/* Фраза в блоке «Пройдите тест»: четыре строки кеглем 31px —
   при 1.02 они слипались. Возвращён межстрочный 1.14, трекинг
   заголовочный. */
.bridge__lead { line-height: var(--lh-title); }


/* ============================================================
   Адаптив: правки после прогона по ширинам 320–1180
   ============================================================ */

/* Стопка «Отдел продаж» без фиксации: последняя карточка уезжала
   вниз на три шага лесенки и её резал следующий блок. Карточки
   стоят обычной колонкой, высота — по содержимому. */
@media (max-width: 900px) {
  .stack__card,
  .stack__card:last-child {
    position: relative;
    top: auto;
    height: auto !important;
    min-height: clamp(11rem, 9rem + 8vw, 14rem) !important;
  }
  .stack__card:last-child { margin-bottom: 0; }
  .stack__text { text-wrap: pretty; }
}
@media (prefers-reduced-motion: reduce) {
  .stack__card, .stack__card:last-child { position: relative; top: auto; }
}

/* Веер на планшете: повёрнутая первая карточка выходила за поле */
@media (min-width: 721px) and (max-width: 1100px) {
  .sources--center .fan { max-width: 90%; }
}

/* Отзывы: четыре кадра в ряд держатся до 900px, дальше два.
   На 1024 два кадра в ряд были высотой по 600px каждый. */
@media (min-width: 901px) and (max-width: 1100px) {
  .reviews__strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vreview__quote { font-size: 0.9375rem; padding: 0.875rem; }
  .vreview__tag { top: 0.75rem; left: 0.75rem; }
}

/* Кейсы: на 1001–1100 три колонки были тесны — пилюля формата
   переносилась в две строки рядом с аватаркой */
@media (min-width: 1001px) and (max-width: 1100px) {
  .cases__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ccard:nth-child(3n + 2) { margin-top: 0; }
  .ccard:nth-child(even) { margin-top: clamp(1.5rem, 0.9286rem + 2.4381vw, 4rem); }
}
.ccard__tag { white-space: nowrap; }
@media (max-width: 380px) {
  .ccard__tag { white-space: normal; }
}

/* График на узких экранах: подписи оси не переносятся,
   подсказка про курсор уходит — она ложилась на линию курсора */
.path__axis span { white-space: nowrap; }
@media (max-width: 600px) {
  .path__hint { display: none; }
  .path__axis { font-size: 0.75rem; }
}

/* «Наш подход» на телефоне: заголовок первой карточки заходил
   под красный круг */
@media (max-width: 1000px) {
  .step--light .step__name { max-width: 62%; }
}

/* Стопка: текст не должен упираться в нижнюю линию со счётчиком */
.stack__card { padding-bottom: clamp(4.25rem, 3.75rem + 2.1333vw, 5.5rem); }

/* Подвал: четыре ссылки на документы переносятся, а не теснятся */
.footer__legal .footer__docs { flex-wrap: wrap; gap: 0.5rem 1.5em; justify-content: flex-end; }
@media (max-width: 900px) {
  .footer__legal .footer__docs { justify-content: flex-start; flex-basis: 100%; }
}


/* ============================================================
   Команда: настоящие фотографии. Ангелина — в блоке основательницы,
   ниже три портрета с именами. Роли отдела остались текстом под
   ними, без картинок-заглушек.
   ============================================================ */
.people__img { display: block; background: #141313; }
.people__img img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 20%; }

.staff {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 0.6071rem + 0.6095vw, 1.625rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.staff__item:nth-child(2) { margin-top: clamp(1.5rem, 1.0714rem + 1.8286vw, 3.375rem); }
.staff__img {
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  background: #ededed;
}
.staff__img img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.staff__item:hover .staff__img img { transform: scale(1.03); }
.staff__name {
  margin: 0.9em 0 0;
  font-family: var(--font-logo);
  font-size: clamp(1.0625rem, 0.9554rem + 0.4571vw, 1.5rem);
  font-weight: 600;
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
}
.staff__role { margin: 0.25em 0 0; font-size: var(--fs-s); font-weight: 300; color: #6b655c; }

/* Роли отдела — три текстовые колонки под портретами */
.crew--text {
  margin-top: clamp(2rem, 1.4464rem + 2.3619vw, 4.3125rem);
  padding-top: clamp(1rem, 0.8571rem + 0.6095vw, 1.625rem);
  border-top: 1px solid var(--line-l);
}
.crew--text .crew__item:nth-child(2) { margin-top: 0; }
.crew--text .crew__name { margin-top: 0; }

@media (max-width: 640px) {
  /* Портреты — лента со свайпом, роли — колонкой */
  .staff {
    display: flex;
    gap: 0.75rem;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .staff::-webkit-scrollbar { display: none; }
  .staff__item { flex: 0 0 min(68vw, 16rem); scroll-snap-align: start; }
  .staff__item:nth-child(2) { margin-top: 0; }
}
/* Высоту берём из пропорции, а не из атрибута height — иначе кадр
   растягивался и лицо обрезалось. Портреты не крупнее 20rem. */
.staff__img img, .people__img img { height: auto; }
.staff { grid-template-columns: repeat(3, minmax(0, 20rem)); }
@media (max-width: 640px) {
  .staff { scroll-padding-inline: var(--gutter); }
}


/* ============================================================
   Стопка «Отдел продаж» · композиция карточки, вторая редакция.
   Номер стоит в пилюле — той же, что на карточках утечек и подхода.
   Сверху больше воздуха. Счётчик внизу убран: он повторял номер.
   В правом верхнем углу две точки — метка, как на плашках опросника.
   ============================================================ */
.stack__card {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: clamp(0.875rem, 0.6rem + 1.2vw, 1.75rem);
  align-items: center;
  padding: clamp(1.5rem, 1.2rem + 1.28vw, 2.5rem) clamp(1.375rem, 1.0714rem + 1.2952vw, 2.75rem)
           clamp(1.5rem, 1.2rem + 1.28vw, 2.5rem);
}
.stack__card::before { content: none; }
.stack__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  min-width: 2.75em;
  padding: 0.4em 0.85em;
  border: 1px solid rgba(22, 18, 13, 0.22);
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: var(--fs-s);
  font-weight: 400;
  line-height: var(--lh-title);
  letter-spacing: var(--ls-text);
  color: rgba(22, 18, 13, 0.62);
}
.stack__card:nth-child(3) .stack__num,
.stack__card:last-child .stack__num { border-color: rgba(255, 255, 255, 0.28); color: rgba(255, 255, 255, 0.72); }
.stack__name { align-self: center; padding-right: 2.5rem; }
.stack__text {
  grid-column: 2;
  margin-top: clamp(1.5rem, 1.2rem + 1.28vw, 2.5rem);
}
/* Две точки — в правом верхнем углу, на одной линии с номером */
.stack__card::after,
.stack__card:last-child::after {
  inset: calc(clamp(1.5rem, 1.2rem + 1.28vw, 2.5rem) + 0.75em) clamp(1.375rem, 1.0714rem + 1.2952vw, 2.75rem) auto auto;
}
@media (max-width: 900px) {
  .stack__card, .stack__card:last-child { min-height: 0 !important; }
  .stack__text { grid-column: 1 / -1; }
}

/* Стопка на низких окнах: верхнее поле считается от высоты экрана,
   чтобы название в щели не касалось следующей карточки */
@media (min-width: 901px) {
  .stack__card { padding-top: clamp(1.375rem, 3.6svh, 2.5rem); }
  .stack__card::after,
  .stack__card:last-child::after { top: calc(clamp(1.375rem, 3.6svh, 2.5rem) + 0.75em); }
}

/* Стопка: текст карточки начинается ниже щели — в сложенной стопке
   видны только номер и название, обрезанных строк нет */
@media (min-width: 901px) {
  .stack__text {
    margin-top: max(1.5rem, calc(var(--peek) - clamp(1.375rem, 3.6svh, 2.5rem) - 0.4rem));
  }
}

/* ============================================================
   Команда: три портрета и карточка состава отдела в одном ряду.
   Ряд занят целиком: портреты слева, справа угольная карточка
   с ролями, которые работают на каждом проекте.
   ============================================================ */
.team-row {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1.2fr);
  align-items: stretch;
  gap: clamp(0.75rem, 0.6071rem + 0.6095vw, 1.625rem);
}
.team-row .staff { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.team-row .staff__item:nth-child(2) { margin-top: 0; }
.roles {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.125rem, 0.9821rem + 0.6095vw, 1.75rem);
  border-radius: var(--radius);
  background: #141313;
  color: #fff;
}
.roles__pill {
  display: inline-flex;
  align-self: flex-start;
  margin: 0 0 auto;
  padding: 0.5em 1.1em;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-pill);
  line-height: var(--lh-title);
}
.roles__list { margin: clamp(1.5rem, 1.2rem + 1.28vw, 2.5rem) 0 0; padding: 0; list-style: none; }
.roles__item { padding: clamp(0.75rem, 0.65rem + 0.43vw, 1.125rem) 0; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.roles__item:last-child { padding-bottom: 0; }
.roles__name {
  margin: 0;
  font-family: var(--font-logo);
  font-size: var(--fs-m);
  font-weight: 600;
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
}
.roles__text {
  margin: 0.35em 0 0;
  font-size: var(--fs-s);
  font-weight: 300;
  line-height: var(--lh-text-s);
  color: rgba(255, 255, 255, 0.72);
  text-wrap: pretty;
}
/* Планшет: портреты в ряд, карточка состава — под ними, роли в три колонки */
@media (max-width: 1100px) {
  .team-row { grid-template-columns: minmax(0, 1fr); }
  .roles__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(1rem, 0.5714rem + 1.8286vw, 2.875rem); }
  .roles__item:last-child { padding-bottom: clamp(0.75rem, 0.65rem + 0.43vw, 1.125rem); }
  .roles__pill { margin-bottom: 0; }
}
@media (max-width: 640px) {
  .team-row { display: block; }
  .roles { margin-top: 1.25rem; }
  .roles__list { display: block; }
}

/* Карточка состава — ровно по высоте портретов, подписи под фото
   остаются ниже её кромки. Высота считается от ширины ряда. */
.people__team { container-type: inline-size; }
.team-row { --g: clamp(0.75rem, 0.6071rem + 0.6095vw, 1.625rem); gap: var(--g); }
@media (min-width: 1101px) {
  .roles {
    align-self: start;
    height: calc(4 / 3 * (((100cqw - var(--g)) * 3 / 4.2 - 2 * var(--g)) / 3));
  }
}
@media (max-width: 1100px) {
  .roles { margin-top: clamp(0.75rem, 0.5rem + 1.0667vw, 1.5rem); }
}

/* Карточка состава: текст не помещался в высоту портрета. В ряд она
   встаёт только от 1301px и шире; высота — минимум по портрету,
   при нехватке растёт. Ниже 1301px карточка идёт под портретами. */
@media (min-width: 1101px) {
  .roles { height: auto; align-self: stretch; }
}
@media (min-width: 1301px) {
  .team-row { grid-template-columns: minmax(0, 3fr) minmax(0, 1.5fr); }
  .roles {
    align-self: start;
    min-height: calc(4 / 3 * (((100cqw - var(--g)) * 3 / 4.5 - 2 * var(--g)) / 3));
  }
  .roles__list { margin-top: 1.25rem; }
  .roles__item { padding: 0.75rem 0; }
}
@media (max-width: 1300px) {
  .team-row { grid-template-columns: minmax(0, 1fr); }
  .roles { margin-top: clamp(0.75rem, 0.5rem + 1.0667vw, 1.5rem); }
  .roles__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(1rem, 0.5714rem + 1.8286vw, 2.875rem); }
  .roles__item:last-child { padding-bottom: clamp(0.75rem, 0.65rem + 0.43vw, 1.125rem); }
  .roles__pill { margin-bottom: 0; }
  .team-row .staff { grid-template-columns: repeat(3, minmax(0, 22rem)); }
}
@media (max-width: 640px) {
  .roles__list { display: block; }
}

/* Команда из четырёх человек: портреты в один ряд во всю ширину,
   карточка состава отдела — под ними, роли в три колонки */
.team-row,
.team-row .staff { grid-template-columns: none; }
.team-row { display: block; }
.team-row .staff { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.roles, .roles:not(#x) { height: auto; min-height: 0; margin-top: clamp(1.5rem, 1.0714rem + 1.8286vw, 3.375rem); }
.roles__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(1rem, 0.5714rem + 1.8286vw, 2.875rem); margin-top: clamp(1.5rem, 1.2rem + 1.28vw, 2.5rem); }
.roles__item, .roles__item:last-child { padding: clamp(0.75rem, 0.65rem + 0.43vw, 1.125rem) 0 0; }
.roles__pill { margin-bottom: 0; }
@media (max-width: 640px) {
  .team-row .staff { grid-template-columns: none; }
  .roles__list { display: block; }
  .roles__item, .roles__item:last-child { padding-bottom: 0.875rem; }
}
@media (min-width: 641px) and (max-width: 1300px) {
  .team-row .staff { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* ============================================================
   Подзаголовок справа стоит на одной вертикали с карточкой под ним.
   Шапка блока получает ту же сетку, что и ряд карточек: подзаголовок
   занимает последнюю колонку и начинается от её левого края.
   ============================================================ */
:root { --col-gap: clamp(0.75rem, 0.6071rem + 0.6095vw, 1.625rem); }

@media (min-width: 901px) {
  .people__teamhead {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--col-gap);
  }
  .people__teamtitle { grid-column: 1 / 4; }
  .people__teamsub { grid-column: 4; justify-self: start; max-width: none; }
}
@media (min-width: 901px) and (max-width: 1200px) {
  /* Колонка узкая — подзаголовок занимает две последние */
  .people__teamtitle { grid-column: 1 / 3; }
  .people__teamsub { grid-column: 3 / 5; }
}

@media (min-width: 1101px) {
  .reviews__head { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--col-gap); }
  .reviews__head > div { grid-column: 1 / 4; }
  .reviews__note { grid-column: 4; justify-self: start; max-width: none; }

  .cases__head { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); }
  .cases__head > div { grid-column: 1 / 3; }
  .cases__sub { grid-column: 3; justify-self: start; max-width: 36ch; }
}
@media (min-width: 1001px) and (max-width: 1100px) {
  .cases__head { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); }
  .cases__sub { grid-column: 2; justify-self: start; }
}
@media (min-width: 901px) {
  .start__head { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); }
  .start__head > div { grid-column: 1 / 3; }
  .start__sub { grid-column: 3; justify-self: start; max-width: 36ch; }
}



/* ============================================================
   Два правила набора на весь сайт
   ------------------------------------------------------------
   1. Минимальный кегль. Читаемый текст — не мельче 15px на любом
      экране; пилюли и служебные метки — 14px на телефоне и 15px
      от ноутбука. На широких мониторах мелкий текст растёт дальше,
      до 18px, вместе с сеткой.
   2. Переносы. Последняя строка не бывает короткой: заголовки,
      лиды и тексты карточек выравниваются по длине строк (balance),
      длинные абзацы не оставляют висячих слов (pretty).
   ============================================================ */
:root {
  --fs-s: clamp(0.9375rem, 0.9167rem + 0.0926vw, 1.125rem);
  --fs-pill: clamp(0.875rem, 0.8542rem + 0.0926vw, 1rem);
}
html .card__num, html .card__tag, html .step__num, html .source__num,
html .questions-number, html .vreview__tag, html .pstep__tag, html .roles__pill,
html .ask__count, html .footer__copy-done, html .ccard__ava-mono,
html .path__axis, html .kx__word sup { font-size: var(--fs-pill); }
html .kx__word sup { margin-top: 0.5em; }
html .leak__text, html .step__text, html .source__text, html .stack__num,
html .ledger__idx, html .expert__role, html .clients__lead,
html .footer__col a, html .footer__legal, html .footer__legal a,
html .questions-answer p { font-size: var(--fs-s); }
html .questions-answer p { font-size: var(--fs-m); }

h1, h2, h3, h4,
.leaks-sub, .approach__sub, .frame__sub, .reviews__note, .cases__sub, .path__sub,
.people__teamsub, .start__sub, .fit__sub, .bridge__lead, .bridge__note,
.ask__lede, .ask__sub, .ask__lead, .ask__title, .people__title, .people__who,
.leak__text, .step__text, .source__text, .stack__text, .card__note, .card__lead,
.ledger__name, .ledger__text, .ccard__lead, .ccard__meta, .vreview__quote,
.path__text, .path__result, .kx__list li, .roles__text, .fit__list li,
.pstep__text, .pstep__note, .pstep__list li, .terms__name, .terms__text,
.footer__tagline, .keep__docnote, .hero__lead, .stat__label { text-wrap: balance; }
.questions-answer p, .legal__text p, .legal__text li { text-wrap: pretty; }

html .footer__time, html .footer__docs { text-wrap: balance; }

/* Короткая подпись моста — в одну строку */
.bridge__note { max-width: none; }


/* ============================================================
   Форма заявки · окно. Та же плашка, что у опросника: слева
   угольная панель со светом, справа поля. Поля — строка с линией
   снизу, без рамок. Кегль полей 16px: iOS не приближает страницу.
   ============================================================ */
.lead[hidden] { display: none; }
.lead {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  padding: clamp(0.75rem, 0.5rem + 1.0667vw, 1.75rem);
}
.lead__veil {
  position: absolute;
  inset: 0;
  background: rgba(3, 3, 3, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: cmVeil 0.3s ease forwards;
}
.lead__win {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  gap: clamp(1.25rem, 0.9821rem + 1.1429vw, 2.375rem);
  width: min(100%, 64rem);
  max-height: calc(100svh - 1.5rem);
  overflow-y: auto;
  padding: clamp(0.875rem, 0.7rem + 0.75vw, 1.5rem);
  border-radius: clamp(1rem, 0.8571rem + 0.6095vw, 1.625rem);
  background: #f5f5f5;
  color: #16120d;
  animation: leadIn 0.6s var(--ease-out) forwards;
}
@keyframes leadIn {
  from { opacity: 0; transform: translate3d(0, 1.5rem, 0) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
.lead__close {
  position: absolute;
  z-index: 3;
  top: clamp(1.25rem, 1rem + 1.0667vw, 2.25rem);
  right: clamp(1.25rem, 1rem + 1.0667vw, 2.25rem);
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  padding: 0;
  border: 1px solid rgba(22, 18, 13, 0.16);
  border-radius: 50%;
  background: #f5f5f5;
  color: #16120d;
  cursor: pointer;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.lead__close svg { width: 38%; }
.lead__close:hover { transform: rotate(90deg); }

.lead__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  min-height: 100%;
  padding: clamp(1.25rem, 1rem + 1.0667vw, 2.25rem);
  border-radius: clamp(0.75rem, 0.6429rem + 0.4571vw, 1.1875rem);
  background: #141313;
  color: #fff;
}
.lead__pill {
  align-self: flex-start;
  margin: 0;
  padding: 0.5em 1.1em;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-pill);
  line-height: var(--lh-title);
}
.lead__title {
  margin: 0;
  font-family: var(--font-logo);
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
  text-wrap: balance;
}
.lead__sub { margin: 0.7em 0 0; font-size: var(--fs-s); font-weight: 300; line-height: var(--lh-text-m); color: rgba(255, 255, 255, 0.8); text-wrap: balance; }

.lead__form, .lead__done {
  display: flex;
  flex-direction: column;
  padding: clamp(0.5rem, 0.3rem + 0.85vw, 1.25rem) clamp(0.5rem, 0.3rem + 0.85vw, 1.25rem) clamp(0.5rem, 0.3rem + 0.85vw, 1.25rem) 0;
  padding-top: clamp(2.5rem, 2rem + 2.1vw, 4rem);
}
.lead__fld { display: block; margin-bottom: clamp(1rem, 0.85rem + 0.64vw, 1.5rem); }
.lead__fld > span { display: block; font-size: var(--fs-s); color: #6b655c; }
.lead__fld > span i { font-style: normal; color: #a19b92; }
.lead__fld input, .lead__fld textarea {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.55em 0 0.6em;
  border: 0;
  border-bottom: 1px solid rgba(22, 18, 13, 0.28);
  border-radius: 0;
  background: transparent;
  color: #16120d;
  font-family: var(--font-ui);
  font-size: max(1rem, var(--fs-m));
  font-weight: 400;
  line-height: 1.3;
  outline: none;
  resize: none;
  transition: border-color 0.3s ease;
}
.lead__fld input::placeholder, .lead__fld textarea::placeholder { color: #b5afa6; }
.lead__fld input:focus, .lead__fld textarea:focus { border-bottom-color: #16120d; box-shadow: 0 1px 0 #16120d; }
.lead__fld.is-bad input { border-bottom-color: #16120d; box-shadow: 0 2px 0 #16120d; }
.lead__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.lead__consent { display: grid; gap: 0.7rem; margin: 0.25rem 0 clamp(1.25rem, 1rem + 1.0667vw, 2rem); }
.lead__consent label { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.7rem; align-items: start; cursor: pointer; font-size: var(--fs-s); font-weight: 300; line-height: var(--lh-text-s); color: #6b655c; }
.lead__consent input {
  appearance: none;
  -webkit-appearance: none;
  width: 1.25rem; height: 1.25rem;
  margin: 0.05em 0 0;
  border: 1px solid rgba(22, 18, 13, 0.4);
  border-radius: 0.3rem;
  background: #fff center / 70% no-repeat;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.lead__consent input:checked {
  border-color: #16120d;
  background-color: #16120d;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2l2.6 2.6L10 3.4' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.lead__consent a { color: #16120d; text-decoration: none; border-bottom: 1px solid rgba(22, 18, 13, 0.35); }

.lead__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem 1.25rem; }
.lead__send { border: 0; padding: 0; background: none; cursor: pointer; font: inherit; }
.lead__send[disabled] { cursor: not-allowed; opacity: 0.35; transform: none !important; }
.lead__status { margin: 0; font-size: var(--fs-s); color: #6b655c; }
.lead__done[hidden] { display: none; }
.lead__done { justify-content: center; align-items: flex-start; gap: 1rem; }
.lead__done h3 { margin: 0; font-family: var(--font-logo); font-size: var(--fs-h3); font-weight: 400; line-height: var(--lh-head); letter-spacing: var(--ls-head); }
.lead__done p { margin: 0 0 0.5rem; max-width: 40ch; font-size: var(--fs-m); font-weight: 300; line-height: var(--lh-text-m); color: #6b655c; text-wrap: balance; }

@media (max-width: 800px) {
  .lead { place-items: end center; padding: 0; }
  .lead__win { grid-template-columns: minmax(0, 1fr); gap: 0; width: 100%; max-height: 94svh; border-radius: 1.25rem 1.25rem 0 0; }
  .lead__panel { min-height: 0; gap: 1.25rem; }
  .lead__form, .lead__done { padding: 1.5rem 0.25rem 0.75rem; }
}
@media (prefers-reduced-motion: reduce) { .lead__veil, .lead__win { animation: none; } }


/* ============================================================
   Зазор между «Источниками» и «Отделом продаж». Прилипший блок
   источников был высотой в экран: на высоких мониторах веер не
   заполнял его и под ним оставалась дыра. Теперь блок по высоте
   равен своему содержимому (считает main.js), а верхнее поле
   следующего блока меньше на 40%.
   ============================================================ */
@media (min-width: 721px) {
  .sources--lock .sources__sticky { padding-bottom: 0.5rem; }
}
@media (min-width: 1001px) {
  .stack--lock .stack__sticky {
    --edge: max(3.75rem, 6.6svh);
    --shift: calc(var(--edge) - 1.5rem);
  }
}


/* ============================================================
   Невысокие экраны (ноутбук с панелью закладок, окно 660–820px).
   Блоки собраны плотнее, чтобы чаще помещаться в один экран:
   меньше поля секций и отступы под шапками, ниже карточки тарифов.
   Кегли и содержание не меняются.
   ============================================================ */
@media (min-width: 901px) and (max-height: 1000px) {
  :root {
    --sec-pad: clamp(3.5rem, 11svh, 6.25rem);
    --sec-pad-b: clamp(3.5rem, 11svh, 6.25rem);
    --edge: max(4.5rem, 9svh);
  }
  .reviews__head, .why__head, .start__head, .keep__top, .cz__top { margin-bottom: clamp(1.5rem, 4svh, 2.75rem); }
  .cases__grid { margin-top: clamp(1.5rem, 4svh, 2.75rem); }
  .people__team { margin-top: clamp(2.5rem, 7svh, 4.5rem); }
  .people__teamhead { margin-bottom: clamp(1.25rem, 3svh, 2rem); }
  .terms, .cases__foot, .reviews__shots { margin-top: clamp(1.75rem, 5svh, 3rem); }
  .ledger__row { padding-block: clamp(1.125rem, 3.2svh, 2rem); }
  .pstep { min-height: 0; }
  .pstep__tag { margin-bottom: clamp(1.25rem, 3.5svh, 2rem); }
  .pstep__list { margin-top: clamp(0.875rem, 2.4svh, 1.5rem); }
  .pstep__list li { padding-block: 0.6em; }
  .pstep:nth-child(2) { margin-top: clamp(0.75rem, 2.2svh, 1.5rem); }
  .pstep:nth-child(3) { margin-top: clamp(1.5rem, 4.4svh, 3rem); }
  .fit__title { margin-bottom: clamp(1.25rem, 3.5svh, 2rem); }
  .fit__list li { padding-block: clamp(0.75rem, 2svh, 1.125rem); }
  .ask__panel { min-height: clamp(18rem, 50svh, 30rem); }
  .people__img img { max-height: 78svh; }
}


/* ============================================================
   Правки 29 сентября, вечер
   ============================================================ */

/* Производительность: зерно стоит неподвижно. Анимированный слой
   с наложением на секцию в полтора экрана грузил отрисовку. */
.grain::before { animation: none; }

/* Стопка «Отдел продаж»: название и текст стоят рядом, от верхнего
   края карточки больше воздуха. Когда следующая карточка наезжает,
   текст предыдущей гаснет (--cov пишет main.js) — в щели остаются
   номер и название. */
.stack__card {
  padding: clamp(1.75rem, 1.4rem + 1.5vw, 3rem) clamp(1.5rem, 1.1rem + 1.7vw, 3.25rem);
}
.stack__text { margin-top: clamp(0.625rem, 0.5rem + 0.5vw, 1rem); }
@media (min-width: 901px) {
  .stack__card { padding-top: clamp(1.75rem, 4.4svh, 3rem); }
  .stack__card::after,
  .stack__card:last-child::after { top: calc(clamp(1.75rem, 4.4svh, 3rem) + 0.75em); right: clamp(1.5rem, 1.1rem + 1.7vw, 3.25rem); }
  .stack__text { margin-top: clamp(0.625rem, 0.5rem + 0.5vw, 1rem); opacity: calc(1 - var(--cov, 0)); }
}

/* Веер → «Отдел продаж»: у веера под карточками был запас высоты
   под наклон, он и давал лишний зазор. */
@media (min-width: 721px) {
  .sources--lock .sources__sticky { padding-bottom: 0; }
}
@media (min-width: 1001px) {
  .stack--lock .stack__sticky { --edge: max(6rem, 8.5svh); --shift: calc(var(--edge) - 1.5rem); }
}

/* Тарифы плотнее на любом экране: карточка по высоте своего
   содержимого, меньше воздуха под пилюлей и под шапкой. */
.pstep { min-height: 0; }
.pstep__tag { margin-bottom: clamp(1.25rem, 1rem + 1.1vw, 2.25rem); }
.pstep__list { margin-top: clamp(1rem, 0.85rem + 0.64vw, 1.5rem); }
.start__head { margin-bottom: clamp(1.5rem, 1.1rem + 1.7vw, 3rem); }
.terms { margin-top: clamp(2rem, 1.5rem + 2.1vw, 4rem); }
.pstep:nth-child(2) { margin-top: clamp(1rem, 0.6rem + 1.7vw, 2.25rem); }
.pstep:nth-child(3) { margin-top: clamp(2rem, 1.2rem + 3.4vw, 4.5rem); }


/* ============================================================
   v14 · Утечки по макету: карточки с фотографией вместо заливки,
   пропорция 433:551, чётные подняты на 10%, подзаголовок короче
   и стоит вровень с заголовком, между шапкой и лентой — воздух.
   ============================================================ */
.leaks--v14 .leak { aspect-ratio: 433 / 551; }
.leaks--v14 .leak:nth-child(even) { translate: 0 -10%; }
.leaks--v14 .leaks-sticky { gap: clamp(3.5rem, 9.5svh, 9.5rem); }
.leaks--v14 .leaks-sub { max-width: 33rem; }
/* Третья карточка: верх фото светлый, пилюли серые, как на светлых */
.leak--img.leak--dark.leak--pills-grey .card__num,
.leak--img.leak--dark.leak--pills-grey .card__tag { color: #6b6966; border-color: #6b6966; }
/* Фото лежит фоном и всегда заполняет карточку целиком: при любой
   ширине пропорция та же, поэтому кадр не режется. Две плотности:
   обычный экран получает 866px, ретина и 4К — 1732px. */
.leak--img {
  background-color: #f5f5f5;
  background-image: var(--bg2);
  background-image: -webkit-image-set(var(--bg2) 1x, var(--bg4) 2x);
  background-image: image-set(var(--bg2) 1x, var(--bg4) 2x);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  border: 0;
}
.leak--img.leak--dark { background-color: #100f0f; }
/* Текст сверху или снизу — как в макете */
.leak--top { justify-content: flex-start; }
.leak--bottom { justify-content: space-between; }
.leak--top .leak__copy { padding-top: clamp(0.5rem, 0.3rem + 0.9cqw, 1rem); }
/* Светлые карточки: тёмный текст и серые пилюли */
.leak--light { color: #16120d; }
.leak--light .leak__copy,
.leak--light .leak__name,
.leak--light .leak__num { color: #16120d; }
.leak--light .leak__text { color: rgba(22, 18, 13, 0.82); }
.leak--light .card__num,
.leak--light .card__tag { color: #6b6966; border-color: #6b6966; }
/* Тёмные карточки: белые пилюли, как везде */
.leak--img.leak--dark .card__num,
.leak--img.leak--dark .card__tag { color: #fff; border-color: rgba(255, 255, 255, 0.28); }
/* Очень широкие экраны (4К при обычной плотности): карточка шире
   866px, поэтому сразу большой файл. */
@media (min-width: 2200px) {
  .leak--img { background-image: var(--bg4); }
}
/* Узкая карточка (низкие окна и телефон): текст занимает больше
   половины высоты и ложится на фото. Под текстом — мягкая подложка
   в цвет карточки, фото остаётся по краю. */
@container (max-width: 360px) {
  .leak--img .leak__copy { padding-top: clamp(1.5rem, 12cqw, 3rem); }
  .leak--img.leak--bottom .leak__copy {
    background: linear-gradient(180deg, rgba(16, 15, 15, 0) 0%, rgba(16, 15, 15, 0.82) 28%, rgba(16, 15, 15, 0.94) 100%);
  }
  .leak--img.leak--light.leak--bottom .leak__copy {
    background: linear-gradient(180deg, rgba(245, 245, 245, 0) 0%, rgba(245, 245, 245, 0.88) 28%, rgba(245, 245, 245, 0.97) 100%);
  }
  .leak--img.leak--top .leak__copy {
    padding-bottom: clamp(1.5rem, 12cqw, 3rem);
    background: linear-gradient(0deg, rgba(16, 15, 15, 0) 0%, rgba(16, 15, 15, 0.82) 28%, rgba(16, 15, 15, 0.94) 100%);
  }
  .leak--img.leak--light.leak--top .leak__copy {
    background: linear-gradient(0deg, rgba(245, 245, 245, 0) 0%, rgba(245, 245, 245, 0.88) 28%, rgba(245, 245, 245, 0.97) 100%);
  }
}
@media (max-width: 900px) {
  .leaks--v14 .leak:nth-child(even) { translate: none; }
  .leaks--v14 .leaks-sub { max-width: 44ch; }
}

/* ============================================================
   v14 · Мост «Пройдите тест»: фото телефона, на стекле — результат
   разбора. Сцена сверстана в координатах самой картинки (800×800)
   и уложена на экран проекцией matrix3d. Края стекла промерены
   по пикселям: верх почти горизонтален (y ≈ 213 − 0.008x), левый
   край x = 0.192y + 79, правый x = 0.218y + 584 — телефон наклонён
   нижним краем к зрителю, строки остаются ровными и чуть растут
   книзу. Масштаб панели задаёт --k (main.js).
   ============================================================ */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ask__panel--phone {
  position: relative;
  min-height: 0 !important;
  padding: 0 !important;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #141313;
}
.phone__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.phone__stage {
  position: absolute; left: 0; top: 0;
  width: 800px; height: 800px;
  transform-origin: 0 0;
  transform: scale(var(--k, 0.54));
  pointer-events: none;
}
.phone__screen {
  position: absolute; left: 0; top: 0;
  width: 520px; height: 600px;
  transform-origin: 0 0;
  transform: matrix3d(0.9704962, -0.01089144, 0, -1.361429e-05, 0.1771059, 0.9408797, 0, -4.765708e-05, 0, 0, 1, 0, 120.3288, 212.5968, 0, 1);
  color: #fff;
  font-family: var(--font-ui);
}
.phone__scene {
  position: absolute; left: 40px; right: 40px; top: 150px;
  display: flex; flex-direction: column; align-items: flex-start;
  opacity: 0;
}
.phone__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 24px;
  font-size: 28px; line-height: 1; font-weight: 300;
  color: rgba(255, 255, 255, 0.62);
  letter-spacing: -0.01em;
}
/* Живая точка: единственное красное — свечение, не текст */
.phone__eyebrow i { width: 9px; height: 9px; border-radius: 50%; background: #ff3b2f; box-shadow: 0 0 10px 2px rgba(255, 59, 47, 0.55); }
.phone__big { margin: 0; white-space: nowrap; }
.phone__num { font-family: var(--font-logo); font-size: 92px; line-height: 0.95; font-weight: 400; letter-spacing: -0.035em; }
.phone__unit { font-size: 30px; line-height: 1; font-weight: 300; color: rgba(255, 255, 255, 0.72); }
.phone__cap { margin: 20px 0 0; font-size: 27px; line-height: 1.25; font-weight: 300; color: rgba(255, 255, 255, 0.72); max-width: 17ch; text-wrap: balance; }
.phone__ring { position: absolute; right: -4px; top: 66px; width: 118px; height: 118px; }
.phone__ring-bg { stroke: rgba(255, 255, 255, 0.16); stroke-width: 2; stroke-dasharray: 1 5; stroke-linecap: round; }
.phone__ring-arc { stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 327; transform: rotate(-90deg); transform-origin: 50% 50%; }
.phone__bars { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 20px; }
.phone__bars li { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; row-gap: 10px; align-items: baseline; font-size: 26px; line-height: 1.1; font-weight: 300; }
.phone__bars li span { color: rgba(255, 255, 255, 0.78); }
.phone__bars li b { font-weight: 400; font-variant-numeric: tabular-nums; }
.phone__bars li i { grid-column: 1 / -1; display: block; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.14); position: relative; overflow: hidden; }
.phone__bars li i::after { content: ""; position: absolute; inset: 0; background: #fff; border-radius: inherit; transform: scaleX(0); transform-origin: 0 50%; }
.phone__cap--b { margin-top: 24px; max-width: none; }

/* Цикл 11 с: сцена A — доля выручки, сцена B — три утечки */
.phone__scene--a { animation: phSceneA 11s cubic-bezier(0.22, 1, 0.36, 1) infinite; }
.phone__scene--b { animation: phSceneB 11s cubic-bezier(0.22, 1, 0.36, 1) infinite; }
.phone__ring-arc { animation: phRing 11s cubic-bezier(0.22, 1, 0.36, 1) infinite; }
.phone__bars li i::after { animation: phBar 11s cubic-bezier(0.22, 1, 0.36, 1) infinite; }
.phone__bars li:nth-child(2) i::after { animation-delay: 0.25s; }
.phone__bars li:nth-child(3) i::after { animation-delay: 0.5s; }
@keyframes phSceneA { 0% { opacity: 0; transform: translate3d(0, 14px, 0); } 6%, 42% { opacity: 1; transform: none; } 48%, 100% { opacity: 0; transform: translate3d(0, -10px, 0); } }
@keyframes phSceneB { 0%, 50% { opacity: 0; transform: translate3d(0, 14px, 0); } 56%, 93% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: translate3d(0, -10px, 0); } }
@keyframes phRing { 0%, 5% { stroke-dashoffset: 327; } 24%, 100% { stroke-dashoffset: 268; } }
@keyframes phBar { 0%, 55% { transform: scaleX(0); } 70%, 100% { transform: scaleX(var(--v)); } }
@media (prefers-reduced-motion: reduce) {
  .phone__scene, .phone__ring-arc, .phone__bars li i::after { animation: none !important; }
  .phone__scene--a { opacity: 1; }
  .phone__ring-arc { stroke-dashoffset: 268; }
}
html.is-static .phone__scene, html.is-static .phone__ring-arc, html.is-static .phone__bars li i::after { animation: none !important; }
html.is-static .phone__scene--a { opacity: 1; }
html.is-static .phone__scene--b { display: none; }
html.is-static .ask__panel--phone { background: #141313 !important; }
@media (max-width: 860px) {
  /* Телефон: сначала текст и кнопка, фото телефона — под ними */
  .ask__panel--phone { aspect-ratio: 1 / 1; width: 100%; order: 2; }
}

/* ============================================================
   Движение мелкой графики: один словарь на весь сайт.
   .ink   — линия прорисовывается (pathLength="1"), экспонента;
   .pop   — точка выскакивает с лёгким перелётом;
   .grow  — полоса растёт от левого края;
   .fade  — тихое проявление.
   Задержка каждого элемента — в --t. Старт даёт .is-in секции.
   ============================================================ */
.ink { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s cubic-bezier(0.16, 1, 0.3, 1) var(--t, 0s); }
.pop { transform: scale(0); transform-box: fill-box; transform-origin: center; transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) var(--t, 0s); }
.grow { transform: scaleX(0); transform-box: fill-box; transform-origin: left center; transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) var(--t, 0s); }
.grow-y { transform: scaleY(0); transform-box: fill-box; transform-origin: center bottom; transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) var(--t, 0s); }
.fade { opacity: 0; transition: opacity 0.9s ease var(--t, 0s); }
.is-in .ink, html.is-static .ink { stroke-dashoffset: 0; }
.is-in .pop, .is-in .grow, .is-in .grow-y, html.is-static .pop, html.is-static .grow, html.is-static .grow-y { transform: none; }
.is-in .fade, html.is-static .fade { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .ink { stroke-dashoffset: 0; } .pop, .grow, .grow-y { transform: none; } .fade { opacity: 1; }
}

/* ============================================================
   «Что остаётся у вас»: четыре листа — миниатюры настоящих
   документов. Волосяные линии, точки на концах, воронка с живой
   каплей и красным свечением на этапе оплаты.
   ============================================================ */
.doc__sheet { background-image: none; display: block; overflow: hidden; }
.doc__svg { display: block; width: 100%; height: 100%; }
.doc__t { font-family: var(--font-ui); font-size: 8.5px; font-weight: 500; fill: #16120d; letter-spacing: -0.01em; }
.doc__s { font-family: var(--font-ui); font-size: 6px; font-weight: 300; fill: rgba(22, 18, 13, 0.6); }
.doc__s--dim { fill: rgba(22, 18, 13, 0.32); }
.doc__m { font-family: var(--font-ui); font-size: 5.2px; font-weight: 300; fill: rgba(22, 18, 13, 0.42); letter-spacing: 0.01em; }
.doc__f { font-family: var(--font-ui); font-size: 5.6px; font-weight: 400; fill: rgba(22, 18, 13, 0.62); }
.doc__f--b { fill: #16120d; font-weight: 500; }
.doc__hair line, .doc__hairline { stroke: rgba(22, 18, 13, 0.08); stroke-width: 0.6; }
.doc__track { stroke: rgba(22, 18, 13, 0.1); stroke-width: 0.6; stroke-linecap: round; }
.doc__ink { stroke: #16120d; stroke-width: 0.65; stroke-linecap: round; stroke-linejoin: round; }
.doc__ink--main { stroke-width: 0.8; }
.doc__plan { stroke: rgba(22, 18, 13, 0.35); stroke-width: 0.6; }
.doc__area { fill: rgba(22, 18, 13, 0.04); }
.doc__dot { fill: #16120d; }
.doc__check circle { stroke: rgba(22, 18, 13, 0.28); stroke-width: 0.55; }
.doc__check .doc__check-open { stroke-dasharray: 1 1.6; stroke-linecap: round; }
.doc__check path { stroke: #16120d; stroke-width: 0.75; stroke-linecap: round; stroke-linejoin: round; }
/* Красное — только свечение под последним этапом */
.doc__glow { fill: #e8231b; opacity: 0; filter: blur(5px); transition: opacity 1.2s ease var(--t, 0s); }
.is-in .doc__glow, html.is-static .doc__glow { opacity: 0.42; }
/* Капля идёт по воронке сверху вниз: заявка доходит до оплаты */
.doc__flow { fill: rgba(22, 18, 13, 0.7); opacity: 0; offset-rotate: 0deg; animation: docFlow 3.6s cubic-bezier(0.45, 0, 0.55, 1) infinite; animation-play-state: paused; }
.doc__flow--2 { animation-delay: 1.8s; }
.is-in .doc__flow { animation-play-state: running; }
@keyframes docFlow { 0% { offset-distance: 0%; opacity: 0; } 12% { opacity: 1; } 86% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
html.is-static .doc__flow { display: none; }
@media (prefers-reduced-motion: reduce) { .doc__flow { display: none; } }
/* В раскрытом ряду каждый следующий лист сверху: заголовки у левого
   края остаются на виду. */
.doc { z-index: calc(var(--i) + 1); }

/* ============================================================
   v14 · Заголовок «Какая у вас ситуация?» одним цветом, как
   у «Отдел продаж теряет деньги тихо»; в прилипшем блоке утечек
   шапка и лента центрируются по высоте окна.
   ============================================================ */
.situation__title, .situation__title b { color: #16120d; }
@media (min-width: 1001px) {
  .leaks--v14 .leaks-sticky {
    justify-content: center;
    /* Верхнее поле видимой части равно нижнему: --shift уходит
       за край экрана, сверху остаётся ровно --gutter. */
    padding-top: calc(var(--shift) + var(--gutter));
  }
}

/* ============================================================
   Веер «Отдел продаж — это не только люди»: первые две карточки
   с фоном из макета (воронка на угле, стеклянные папки на светлом).
   Экспорт без скругления, скругляет сам сайт; пропорция карточки
   300:360 совпадает с макетом 353:423, поэтому кадр не режется.
   ============================================================ */
.fan__card--img {
  background-color: #141313;
  background-image: var(--bg2);
  background-image: -webkit-image-set(var(--bg2) 1x, var(--bg4) 2x);
  background-image: image-set(var(--bg2) 1x, var(--bg4) 2x);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.fan__card--grey.fan__card--img { background-color: #d3d4d6; color: #16120d; }
.fan__card--grey.fan__card--img .source__num  { color: #6b6966; }
.fan__card--grey.fan__card--img .source__name { color: #16120d; }
.fan__card--grey.fan__card--img .source__text { color: #6b655c; }
@media (min-width: 2200px) { .fan__card--img { background-image: var(--bg4); } }
/* Телефон: карточки идут колонкой и становятся широкими — фото
   не растягиваем, а кадрируем по нижнему краю и оставляем под
   текстом полосу под картинку. */
@media (max-width: 720px) {
  .fan__card--img { background-size: cover; background-position: center bottom; padding-bottom: clamp(10rem, 48vw, 15rem); }
}
/* Первая карточка: текст шире, как в макете (без запаса под соседку) */
.fan__card--img:first-child { padding-right: clamp(0.875rem, 0.7321rem + 0.6095vw, 1.5rem); }
html.is-static .fan__card--img { background-image: var(--bg2) !important; }

/* ============================================================
   Статический режим для съёмки в Figma: index.html?static
   Снимать с эмуляцией prefers-reduced-motion: reduce — тогда
   сайт сам встаёт в спокойное состояние, а этот блок лишь
   снимает прилипание и укладывает блоки как на сайте в конце
   анимации: веер лежит веером, стопка сложена, лента на старте.
   ============================================================ */
html.is-static [data-stage] .rv, html.is-static [data-stage] .rv-line,
html.is-static [data-stage] .ledger__idx, html.is-static [data-stage] .ledger__name,
html.is-static [data-stage] .ledger__text, html.is-static [data-stage] .ledger__value span,
html.is-static [data-stage] .terms__name, html.is-static [data-stage] .terms__text,
html.is-static .keep__name, html.is-static .keep__list li,
html.is-static .kx__list li, html.is-static .kx__doc, html.is-static .kx__word,
html.is-static .lm-line > i, html.is-static .qw,
html.is-static .why__card,
html.is-static .questions-panel > div, html.is-static .ask__opt,
html.is-static .people__photo,
html.is-static .cz__num, html.is-static .cz__cap, html.is-static .fl {
  opacity: 1 !important; visibility: visible !important; transform: none !important;
  clip-path: none !important; transition: none !important; animation: none !important;
}
html.is-static .situation .card { opacity: 1 !important; translate: none !important; animation: none !important; }
html.is-static .nr__d > i { --v: var(--n) !important; }
html.is-static .ledger__row::after, html.is-static .terms__item::before,
html.is-static .keep__col + .keep__col::before, html.is-static .kx__word::after { transform: none !important; }
html.is-static .keep, html.is-static .docs .doc { --spread: 1; }
html.is-static .footer { --rise: 1; position: relative !important; }
html.is-static .footer__word-text { transform: translate3d(-50%, 0, 0) !important; }
html.is-static .fit__half--no { --wipe: 1; }
html.is-static #quiz { margin-bottom: 0 !important; }
html.is-static .preloader, html.is-static .swipe-hint, html.is-static .fear-prev, html.is-static .vcur,
html.is-static .keep__count, html.is-static .path__hint { display: none !important; }
html.is-static .questions-panel { grid-template-rows: 1fr !important; }
html.is-static .ask__stage { display: block !important; }
html.is-static .ask__q { position: static !important; opacity: 1 !important; visibility: visible !important; margin-bottom: 2.5rem; }
html.is-static .ask__q--final { margin-bottom: 0; }
html.is-static .kx__panel { visibility: visible !important; position: static !important; grid-area: auto !important; }
html.is-static .kx__stage { display: grid; gap: 2rem; }

/* Прилипающие блоки: секция обычной высоты */
html.is-static .leaks, html.is-static .approach, html.is-static .sources--lock,
html.is-static .stack--lock, html.is-static .path { height: auto !important; min-height: 0 !important; }
html.is-static .leaks-sticky, html.is-static .approach__stick, html.is-static .sources__sticky,
html.is-static .stack__sticky, html.is-static .path__sticky {
  position: static !important; height: auto !important; top: auto !important;
  padding-top: var(--sec-pad) !important; padding-bottom: var(--sec-pad-b) !important;
}
/* Утечки: лента стоит на старте, чётные карточки приподняты, лишнее за краем */
html.is-static .leaks-sticky { overflow: hidden !important; gap: clamp(2.25rem, 4vw, 4rem) !important; }
html.is-static .leaks-rail { transform: none !important; width: max-content !important; overflow: visible !important; padding-top: 3rem; }
/* Подход: карточки в ряд, лишнее за краем колонки */
html.is-static .approach__rail { overflow: hidden !important; }
/* Веер: карточки на своих местах из CSS (top/left/rotate), без анимации */
html.is-static .sources--lock .sources__sticky { overflow: visible !important; padding-bottom: 5rem !important; }
html.is-static .sources--lock .frame__side { margin-top: 2.5rem !important; }
html.is-static .fan { width: min(58rem, 100%) !important; margin-inline: auto; }
html.is-static .fan__card { opacity: 1 !important; transform: none !important; animation: none !important; }
/* Стопка: сложена лесенкой, открыта последняя карточка */
html.is-static .stack__list { position: relative; height: calc(3 * 6.25rem + 26rem) !important; }
html.is-static .stack__card {
  position: absolute !important; top: calc(var(--i) * 6.25rem) !important;
  left: 50% !important; width: min(100%, 62rem) !important; margin: 0 !important;
  translate: -50% 0 !important; transform: none !important; rotate: none !important;
  min-height: 26rem !important; height: 26rem; --cov: 1;
}
html.is-static .stack__card:last-child { --cov: 0; }
html.is-static .stack__text { opacity: calc(1 - var(--cov)) !important; }
/* График: последний этап активен, курсор в конце */
html.is-static .path__sticky { grid-template-rows: auto auto auto !important; gap: 2.5rem !important; }
html.is-static .path__chart { height: 22rem !important; }
html.is-static .path__stage.is-active .path__text { grid-row: 3 !important; grid-column: 1 / 3 !important; }
html.is-static .path__stage.is-active .path__result { grid-row: 3 !important; grid-column: 3 / 5 !important; }
html.is-static .path__stage:not(.is-active) .path__text,
html.is-static .path__stage:not(.is-active) .path__result { display: none !important; }
html.is-static .path__stage:not(.is-active) .path__when,
html.is-static .path__stage:not(.is-active) .path__name { opacity: 0.38 !important; }
/* Холсты со светом Figma не понимает — линейный градиент */
html.is-static .hero__glyphs, html.is-static .hero__bg, html.is-static .footer__bg,
html.is-static .leak__fx, html.is-static .glow-fx { display: none !important; }
html.is-static .leak--pix, html.is-static .has-glow, html.is-static .ask__panel, html.is-static .lead__panel {
  background: linear-gradient(180deg, #6e0a10 0%, #2a0709 28%, #141313 55%) !important;
}
html.is-static .fan__card--red, html.is-static .fan__card--light,
html.is-static .stack__card:last-child, html.is-static .ccard--red .ccard__btn {
  background: linear-gradient(180deg, #141313 45%, #2a0709 75%, #6e0a10 100%) !important;
}
html.is-static .hero { background: linear-gradient(180deg, #030303 45%, #3a0508 85%, #7a0910 100%) !important; }
html.is-static .footer { background: linear-gradient(180deg, #030303 55%, #3a0508 100%) !important; }

/* ============================================================
   v15 · Кейсы: у каждого проекта свой язык цифр.
   Методайзер — кольцо структуры выручки и путь «запуски → ровно»;
   Гипнотерапевт — матрица 100 лидов и две стрелки «было → стало».
   ============================================================ */
.cx--split { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 1rem; width: 100%; }
.cx--split .ccard__value { margin-bottom: 0.25em; }
.cx__ring { position: relative; width: clamp(5rem, 4rem + 4vw, 7.5rem); aspect-ratio: 1; flex: none; display: grid; place-items: center; }
.cx__ring svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cx__ring-bg { stroke: rgba(255, 255, 255, 0.16); stroke-width: 1.2; stroke-dasharray: 0.6 2.4; stroke-linecap: round; }
.cx__ring-arc { stroke-width: 2; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 1.8s cubic-bezier(0.16, 1, 0.3, 1); }
.cx__ring-arc--a { stroke: #fff; transition-delay: 0.5s; }
.cx__ring-arc--b { stroke: rgba(255, 255, 255, 0.45); transition-delay: 0.9s; }
.is-in .cx__ring-arc--a, html.is-static .cx__ring-arc--a { stroke-dashoffset: var(--p, 10); }
.is-in .cx__ring-arc--b, html.is-static .cx__ring-arc--b { stroke-dashoffset: 80; }
.cx__ring-num { position: relative; font-family: var(--font-logo); font-size: clamp(1.125rem, 0.9rem + 0.9vw, 1.625rem); letter-spacing: var(--ls-head); line-height: 1; }
.cx__legend { list-style: none; margin: clamp(0.875rem, 0.7rem + 0.7vw, 1.375rem) 0 0; padding: 0; display: grid; gap: 0.45rem; font-size: var(--fs-s); font-weight: 300; line-height: var(--lh-text-m); color: rgba(255, 255, 255, 0.78); }
.cx__legend li { display: flex; align-items: baseline; gap: 0.6rem; }
.cx__sw { flex: none; width: 1.1rem; height: 2px; border-radius: 1px; transform: translateY(-0.25em); background: #fff; }
.cx__sw--b { background: rgba(255, 255, 255, 0.45); }
.cx__path { width: 100%; margin-top: clamp(1.25rem, 1rem + 1vw, 2rem); }
.cx__path svg { display: block; width: 100%; height: clamp(2.75rem, 2.2rem + 2.2vw, 4rem); overflow: visible; }
.cx__base { stroke: rgba(255, 255, 255, 0.18); stroke-width: 1; stroke-dasharray: 1 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.cx__spikes { stroke: rgba(255, 255, 255, 0.5); stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.cx__steady { stroke: #fff; stroke-width: 1.6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.cx__end { fill: #fff; }
.cx__div { stroke: rgba(255, 255, 255, 0.22); stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.cx__path-l { display: grid; grid-template-columns: 41.3% 1fr; gap: 0.75rem; margin-top: 0.5rem; font-size: var(--fs-s); font-weight: 300; line-height: 1.25; color: rgba(255, 255, 255, 0.6); }
.cx__path-l span:last-child { padding-left: 0.5rem; }
/* Матрица лидов */
.cx__matrix { display: grid; grid-template-columns: repeat(20, 1fr); gap: 0.3rem; width: 100%; max-width: 20rem; margin-top: clamp(1.25rem, 1rem + 1vw, 2rem); }
.cx__matrix i { display: block; aspect-ratio: 1; border-radius: 50%; background: rgba(22, 18, 13, 0.1); transform: scale(0); transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) var(--t, 0s), background 0.6s ease var(--t, 0s); }
.cx__matrix i.on { background: #16120d; }
.is-in .cx__matrix i, html.is-static .cx__matrix i { transform: none; }
.cx__cap { margin: 0.75rem 0 0; max-width: 30ch; font-size: var(--fs-s); font-weight: 300; line-height: var(--lh-text-m); color: #6b655c; }
.cx__cap b { font-weight: 500; color: #16120d; }
.cx__shift { list-style: none; margin: clamp(1rem, 0.8rem + 0.8vw, 1.5rem) 0 0; padding: 0; display: grid; gap: 0.55rem; font-size: var(--fs-s); font-weight: 300; line-height: var(--lh-text-m); color: #6b655c; }
.cx__shift li { display: grid; grid-template-columns: auto 1.5rem auto; align-items: center; column-gap: 0.5rem; }
.cx__shift li span:first-child { text-decoration: line-through; text-decoration-color: rgba(22, 18, 13, 0.3); text-decoration-thickness: 1px; }
.cx__shift li span:last-child { color: #16120d; font-weight: 400; }
.cx__shift svg { width: 1.5rem; height: 0.75rem; overflow: visible; }
.cx__shift path { stroke: #16120d; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; fill: none; }
@media (prefers-reduced-motion: reduce) {
  .cx__ring-arc--a { stroke-dashoffset: var(--p, 10); } .cx__ring-arc--b { stroke-dashoffset: 80; } .cx__matrix i { transform: none; }
}
@media (max-width: 480px) { .cx__shift li { grid-template-columns: 1fr; row-gap: 0.15rem; } .cx__shift svg { transform: rotate(90deg); } }

/* Кейсы: два-три сильных факта под цифрой, у всех одинаково */
.cx__facts { list-style: none; margin: clamp(1rem, 0.8rem + 0.9vw, 1.75rem) 0 0; padding: 0; display: grid; gap: 0.6rem; font-size: var(--fs-s); font-weight: 300; line-height: var(--lh-text-m); color: #6b655c; max-width: 34ch; }
.cx__facts li { position: relative; padding-left: 1.1rem; }
.cx__facts li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.45rem; height: 1px; background: currentColor; opacity: 0.7; }
.ccard--dark .cx__facts, .ccard--red .cx__facts { color: rgba(255, 255, 255, 0.76); }
.ccard--light .cx__ring-bg { stroke: rgba(22, 18, 13, 0.16); }
.ccard--light .cx__ring-arc--a { stroke: #16120d; }

/* ============================================================
   v15 · Кнопки: плашка и круг со стрелкой слитно, без зазора
   ============================================================ */
.people__cta, .start__cta, .cases__cta, .bridge__cta { gap: 0 !important; }

/* ============================================================
   v15 · Основательница: секция ростом с фото, фото без тёмного
   подвала, имя вровень с нижним краем фото. Больше воздуха до
   команды, заголовок команды в две строки, подпись — в две.
   ============================================================ */
.people { padding-top: 0; }
.people__lead { align-items: stretch; }
.people__photo { border-radius: 0 0 var(--radius) 0; }
.people__img, .people__img img { aspect-ratio: auto; height: 100%; }
.people__img img { object-position: 50% 15%; }
.people__quote { display: flex; flex-direction: column; justify-content: space-between; padding: clamp(2.5rem, 2rem + 2vw, 4.5rem) 0 0.35rem; }
.people__top { display: flex; flex-direction: column; align-items: flex-start; margin: auto 0; }
.people__who { margin: clamp(2rem, 1.5rem + 2vw, 3.5rem) 0 0; }
.people__team { margin-top: clamp(5rem, 3.5rem + 5vw, 9.5rem); }
.people__teamsub { max-width: 42ch; }
@media (max-width: 860px) { .people { padding-top: var(--sec-pad); } .people__photo { border-radius: var(--radius); } .people__img, .people__img img { aspect-ratio: 3 / 4; height: auto; } }

/* Роли на светлом: без красной полосы, у каждой роли мини-схема */
.roles--light, .roles--light:not(#x) { background: #fff; color: #16120d; border: 1px solid rgba(22, 18, 13, 0.08); }
.roles--light .roles__pill { border-color: rgba(22, 18, 13, 0.2); color: #6b655c; }
.roles--light .roles__item { border-top-color: rgba(22, 18, 13, 0.1); }
.roles--light .roles__text { color: #6b655c; }
.roles__fx { display: block; width: min(100%, 15rem); height: auto; margin: 0.25rem 0 clamp(1rem, 0.8rem + 0.8vw, 1.5rem); overflow: visible; }
.rx__m { font-family: var(--font-ui); font-size: 6.5px; font-weight: 300; fill: rgba(22, 18, 13, 0.5); }
.rx__track { stroke: rgba(22, 18, 13, 0.1); stroke-width: 1; stroke-linecap: round; }
.rx__ink { stroke: #16120d; stroke-width: 1; stroke-linecap: round; }
.rx__dot { fill: #16120d; }
.rx__node { fill: #fff; stroke: #16120d; stroke-width: 1; }
.rx__node--end { fill: #16120d; }
.rx__grid circle { fill: rgba(22, 18, 13, 0.12); }
.rx__grid circle.on { fill: #16120d; }

/* ============================================================
   v15 · Форма: шире, заголовок ближе к краю панели, согласия
   темнее, поле «Проект» убрано
   ============================================================ */
.lead__win { width: min(100%, 72rem); }
.lead__panel { padding-left: clamp(1rem, 0.8rem + 0.8vw, 1.5rem); }
.lead__consent label { color: #5f5a52; }

/* ============================================================
   v15 · Кейсы: три варианта карточки на выбор.
   A (ряд 1) — аватар с именем в шапке, тег справа.
   B (ряд 2, слева и в центре) — тег сверху, аватар с именем внизу.
   C (ряд 2, справа и далее) — шапка-полоса с заливкой и разделителем.
   ============================================================ */
.ccard .ccard__ava { position: static !important; width: clamp(3.25rem, 2.9rem + 1.5vw, 4.5rem); flex: none; }
.cid { display: flex; align-items: center; gap: 0.9rem; min-width: 0; }
.cid__t { min-width: 0; }
.cid .ccard__name { margin: 0; }
.cid .ccard__meta { margin-top: 0.15em; }
.chead { width: 100%; margin-bottom: clamp(1.25rem, 1rem + 1.1vw, 2.25rem); }
.chead__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.chead .ccard__tag, .chead--band .ccard__tag { margin: 0; }
.cfoot { margin-top: auto; padding-top: clamp(1.25rem, 1rem + 1.1vw, 2.25rem); border-top: 1px solid rgba(22, 18, 13, 0.1); width: 100%; }
.ccard--dark .cfoot, .ccard--red .cfoot { border-color: rgba(255, 255, 255, 0.16); }
.ccard--b .cx__facts { margin-bottom: clamp(1.25rem, 1rem + 1.1vw, 2.25rem); }
.chead--band {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin: calc(clamp(1.125rem, 0.9821rem + 0.6095vw, 1.75rem) * -1) calc(clamp(1.125rem, 0.9821rem + 0.6095vw, 1.75rem) * -1) clamp(1.25rem, 1rem + 1.1vw, 2.25rem);
  padding: clamp(1rem, 0.85rem + 0.6vw, 1.5rem) clamp(1.125rem, 0.9821rem + 0.6095vw, 1.75rem);
  background: rgba(22, 18, 13, 0.04); border-bottom: 1px solid rgba(22, 18, 13, 0.08);
}
.ccard--dark .chead--band, .ccard--red .chead--band { background: rgba(255, 255, 255, 0.06); border-bottom-color: rgba(255, 255, 255, 0.12); }
.ccard--c .ccard__more { margin-top: auto; padding-top: clamp(1rem, 0.8571rem + 0.6095vw, 1.625rem); }
.ccard .cx__ring { display: none; }
.cx--split { display: block; }

/* ============================================================
   v15 · Кейсы: у всех шапка-полоса, внутри больше воздуха
   ============================================================ */
.ccard--c .ccard__btn { padding-bottom: clamp(1.75rem, 1.4rem + 1.5vw, 3rem); }
.chead--band { margin-bottom: clamp(1.75rem, 1.4rem + 1.5vw, 3rem); padding-top: clamp(1.25rem, 1rem + 0.9vw, 2rem); padding-bottom: clamp(1.25rem, 1rem + 0.9vw, 2rem); }
.ccard--c .ccard__value { margin-top: 0.1em; }
.ccard--c .cx__facts { margin-top: clamp(1.5rem, 1.2rem + 1.2vw, 2.5rem); }
.ccard--c .ccard__more { padding-top: clamp(1.75rem, 1.4rem + 1.5vw, 3rem); }
.ccard--c .cx__matrix { margin-top: clamp(1.5rem, 1.2rem + 1.2vw, 2.5rem); }

/* Роли: схемы легче — тонкие линии, маленькие точки, серые тона */
.roles__fx { width: min(100%, 12.5rem); opacity: 0.9; }
.rx__m { font-size: 6px; fill: rgba(22, 18, 13, 0.42); }
.rx__track { stroke: rgba(22, 18, 13, 0.08); stroke-width: 0.7; }
.rx__ink { stroke: rgba(22, 18, 13, 0.55); stroke-width: 0.7; }
.rx__dot { fill: rgba(22, 18, 13, 0.65); r: 1.4; }
.rx__node { fill: #fff; stroke: rgba(22, 18, 13, 0.45); stroke-width: 0.7; r: 2.2; }
.rx__node--end { fill: rgba(22, 18, 13, 0.65); stroke: none; }
.rx__grid circle { r: 1.5; fill: rgba(22, 18, 13, 0.09); }
.rx__grid circle.on { fill: rgba(22, 18, 13, 0.5); }

/* ============================================================
   v15 · «Мы работаем не со всеми»: не два списка на двух фонах,
   а одна лента сравнения. Слева — с кем работаем, справа — с кем
   нет; между ними ось, которая прорисовывается, и точки на ней.
   ============================================================ */
.fit--ledger, .fit--ledger:not(#x) { display: block; background: #fff; color: #16120d; padding: var(--sec-pad) var(--gutter) var(--sec-pad-b); }
.fit--ledger .fit__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: clamp(1.5rem, 0.7857rem + 3.0476vw, 4.5rem); margin-bottom: clamp(3rem, 2.2rem + 3.4vw, 6rem); }
.fit--ledger .fit__title { margin-bottom: 0; }
.fit--ledger .fit__sub { margin: 0; max-width: 40ch; justify-self: end; color: #6b655c; font-size: var(--fs-m); line-height: var(--lh-text-m); font-weight: 300; text-wrap: balance; }
.fl2 { --ax: clamp(3rem, 2rem + 4vw, 6rem); }
.fl2__cols, .fl2__row { display: grid; grid-template-columns: minmax(0, 1fr) var(--ax) minmax(0, 1fr); align-items: start; }
.fl2__col { margin: 0 0 clamp(1rem, 0.8rem + 0.8vw, 1.5rem); font-size: var(--fs-s); color: #6b655c; font-weight: 300; }
.fl2__col--no { justify-self: end; text-align: right; }
.fl2__axis { grid-row: 1 / span 1; justify-self: center; width: 2px; height: 1.6em; }
.fl2__axis svg { width: 100%; height: 100%; overflow: visible; }
.fl2__axis line { stroke: rgba(22, 18, 13, 0.25); stroke-width: 1; }
.fl2__rows { position: relative; list-style: none; margin: 0; padding: 0; }
.fl2__rows::before { content: ""; position: absolute; left: calc(50% - 0.5px); top: 0; bottom: 0; width: 1px; background: rgba(22, 18, 13, 0.12); transform: scaleY(0); transform-origin: 50% 0; transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.4s; }
.is-in .fl2__rows::before, html.is-static .fl2__rows::before { transform: none; }
.fl2__row { border-top: 1px solid rgba(22, 18, 13, 0.1); padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.5rem) 0; }
.fl2__row:last-child { border-bottom: 1px solid rgba(22, 18, 13, 0.1); }
.fl2__yes, .fl2__no { margin: 0; font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem); line-height: var(--lh-text-m); font-weight: 300; text-wrap: balance; max-width: 30ch; }
.fl2__yes { color: #16120d; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; }
.fl2__n { font-size: var(--fs-s); color: #a19b92; padding-top: 0.35em; font-variant-numeric: tabular-nums; }
.fl2__no { color: #8d8880; justify-self: end; text-align: right; }
.fl2__dot { justify-self: center; align-self: center; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #fff; border: 1px solid rgba(22, 18, 13, 0.6); position: relative; z-index: 1; }
.fl2__row:first-child .fl2__dot { background: #16120d; }
@media (max-width: 720px) {
  .fit--ledger .fit__head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .fit--ledger .fit__sub { justify-self: start; }
  .fl2__cols { display: none; }
  .fl2__row { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
  .fl2__dot, .fl2__rows::before { display: none; }
  .fl2__no { justify-self: start; text-align: left; padding-left: calc(1.5rem + 1rem); }
  .fl2__no::before { content: "не подходит: "; color: #b5afa6; }
}

/* Телефон: вторая сцена такая же тихая, как первая */
.phone__scene--b .phone__num { font-size: 84px; }

/* ============================================================
   v16 · Веер: карточки-«папки». Фото занимает карточку, снизу
   поднимается панель с язычком и вогнутым углом, в ней — текст.
   ============================================================ */
.fan__card--fold { padding: 0 !important; justify-content: flex-start !important; }
.fan__card--fold .source__num { position: absolute; left: clamp(0.875rem, 0.7321rem + 0.6095vw, 1.5rem); top: clamp(0.875rem, 0.7321rem + 0.6095vw, 1.5rem); margin: 0; z-index: 2; }
.fan__card--fold .fold {
  --fc: #141313; --fr: clamp(0.75rem, 0.6429rem + 0.4571vw, 1.1875rem);
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  height: 56%;
  background: var(--fc);
  border-radius: 0 var(--fr) 0 0;
}
.fan__card--fold .fold::before { content: ""; position: absolute; left: 0; bottom: 100%; width: 56%; height: 1.7rem; background: var(--fc); border-radius: 0 var(--fr) 0 0; }
.fan__card--fold .fold::after { content: ""; position: absolute; left: 56%; bottom: 100%; width: var(--fr); height: var(--fr); background: radial-gradient(circle at 100% 0, transparent calc(var(--fr) - 0.5px), var(--fc) var(--fr)); }
.fan__card--fold .fold__in { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(0.875rem, 0.7321rem + 0.6095vw, 1.5rem); padding-top: 0; }
.fan__card--fold .source__name { margin-top: 0; }
.fan__card--fold .source__text { margin-top: clamp(0.4rem, 0.3rem + 0.3vw, 0.65rem); }
.fan__card--light.fan__card--fold .fold { --fc: #141313; }
.fan__card--grey.fan__card--fold .fold { --fc: #ffffff; }
.fan__card--red.fan__card--fold .fold { --fc: #1f1d1d; }
.fan__card--grey.fan__card--fold .source__num { color: #6b6966; }
.fan__card--grey.fan__card--fold .source__name { color: #16120d; }
.fan__card--grey.fan__card--fold .source__text { color: #6b655c; }
.fan__card--img.fan__card--fold { background-size: cover; background-position: center 30%; }
@media (max-width: 720px) {
  .fan__card--img.fan__card--fold { padding-bottom: 0 !important; aspect-ratio: 1 / 1.08; }
  .fan__card--fold .fold { height: 52%; }
}

/* ============================================================
   v16 · Кейсы: единый тёмный язык. Аватар с тонкой красной
   обводкой, имя, инсет-панель с цифрой, строки «ключ — значение»
   и факты.
   ============================================================ */
.cases--ink .ccard__btn, .cases--ink .ccard--ink .ccard__btn { background: #141313; color: #fff; border-color: rgba(255, 255, 255, 0.06); }
.cases--ink .chead--band { background: transparent; border-bottom: 0; margin-bottom: clamp(1.25rem, 1rem + 1vw, 2rem); padding-bottom: 0; }
.cases--ink .ccard__ava { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 0 0 3px #141313, 0 0 0 4px rgba(232, 35, 27, 0.55); background: rgba(255, 255, 255, 0.08); }
.cases--ink .ccard__ava-mono { color: #fff; }
.cases--ink .ccard__name { color: #fff; }
.cases--ink .cinset { width: 100%; padding: clamp(1rem, 0.85rem + 0.7vw, 1.5rem); border-radius: calc(var(--radius) - 0.25rem); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.06); }
.cases--ink .cinset .ccard__value { margin: 0; color: #fff; font-size: clamp(2.25rem, 1.6rem + 2.8vw, 4rem); }
.cases--ink .cinset .ccard__lead { margin-top: 0.5rem; color: rgba(255, 255, 255, 0.72); }
.cases--ink .cinset .cx__matrix { margin-top: 1rem; }
.cases--ink .cinset .cx__matrix i { background: rgba(255, 255, 255, 0.12); }
.cases--ink .cinset .cx__matrix i.on { background: #fff; }
.cases--ink .cinset .cx__cap { color: rgba(255, 255, 255, 0.72); }
.cases--ink .cinset .cx__cap b { color: #fff; }
.ckv { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.25rem; row-gap: 0.45rem; margin: clamp(1.25rem, 1rem + 1vw, 2rem) 0 0; width: 100%; font-size: var(--fs-s); line-height: var(--lh-text-s); }
.ckv dt { margin: 0; color: rgba(255, 255, 255, 0.45); font-weight: 300; }
.ckv dd { margin: 0; color: rgba(255, 255, 255, 0.9); font-weight: 400; }
.cases--ink .cx__facts { color: rgba(255, 255, 255, 0.72); padding-top: clamp(1rem, 0.85rem + 0.7vw, 1.5rem); border-top: 1px solid rgba(255, 255, 255, 0.1); }
.cases--ink .cx__facts li::before { background: rgba(232, 35, 27, 0.9); opacity: 1; width: 0.35rem; }
.cases--ink .ccard__more { color: rgba(255, 255, 255, 0.55); }
.cases--ink .ccard__btn:hover .ccard__more { color: #fff; }
.cases--ink .ccard__btn:hover { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6); }

/* Папки: фото живёт в верхней части карточки и показывает свой
   нижний край (там предмет), панель не прячет его */
.fan__card--img.fan__card--fold { background-image: none !important; }
.fan__card--fold::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 50%; background: var(--bg2) center 72% / cover no-repeat; border-radius: inherit; }
.fan__card--light.fan__card--fold::before { background-position: center 62%; }
.fan__card--grey.fan__card--fold::before { background-position: center 80%; }
@media (min-resolution: 1.5dppx) { .fan__card--fold::before { background-image: var(--bg4); } }
.fan__card--red.fan__card--fold::before { background: radial-gradient(90% 70% at 50% 100%, #7a0910 0%, #2a0709 55%, #141313 100%); }
.fan__card--fold .fold { height: 54%; }
/* Папки: в окно попадает нижняя часть кадра целиком — там предмет */
.fan__card--fold::before, .fan__card--light.fan__card--fold::before, .fan__card--grey.fan__card--fold::before { background-size: 100% auto; background-position: center 100%; height: 50%; }

/* ============================================================
   v16 · Отбор: по центру ленты — стеклянный кристалл (WebGL),
   ось и точки остаются под ним. Колонка под кристалл шире.
   ============================================================ */
.fl2--gem { --ax: clamp(11rem, 6rem + 14vw, 20rem); position: relative; }
.fl2__gem { position: absolute; left: 50%; top: 0; bottom: 0; width: var(--ax); transform: translateX(-50%); z-index: 2; pointer-events: auto; opacity: 0; transition: opacity 1.2s ease; }
.fl2__gem.is-ready { opacity: 1; }
.fl2__gem canvas { display: block; width: 100%; height: 100%; }
.fl2--gem .fl2__dot { opacity: 0.6; }
@media (max-width: 720px) { .fl2__gem { position: static; transform: none; width: 100%; height: 16rem; margin-bottom: 1rem; } }

/* ============================================================
   v16 · Отбор: две карточки-папки. Слева светлая «Работаем
   вместе», справа угольная «Не сработаемся». Текст по левому
   краю в обеих. Кристалл стоит в зазоре и заходит на края карт.
   ============================================================ */
.duo { --gap: clamp(9rem, 5rem + 10vw, 16rem); --tab: clamp(2.25rem, 2rem + 0.8vw, 2.75rem); --r: var(--radius);
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--gap) minmax(0, 1fr); align-items: stretch; padding-top: var(--tab); }
.duo__card { position: relative; background: #f5f5f5; color: #16120d; border-radius: 0 var(--r) var(--r) var(--r);
  padding: clamp(1.5rem, 1.2rem + 1.4vw, 2.75rem); padding-top: clamp(1.25rem, 1rem + 1vw, 2rem); }
.duo__card--yes { grid-column: 1; }
.duo__card--no { grid-column: 3; background: #141313; color: #fff; }
/* язычок папки с вогнутым углом */
.duo__tab { position: absolute; left: 0; bottom: 100%; margin: 0; height: var(--tab); display: flex; align-items: center;
  padding: 0 clamp(1.5rem, 1.2rem + 1.4vw, 2.75rem); background: inherit; border-radius: var(--r) var(--r) 0 0;
  font-size: var(--fs-s); font-weight: 500; letter-spacing: 0.01em; white-space: nowrap; }
.duo__tab::after { content: ""; position: absolute; left: 100%; bottom: 0; width: var(--r); height: var(--r);
  background: radial-gradient(circle at 100% 0, transparent calc(var(--r) - 0.5px), #f5f5f5 var(--r)); }
.duo__card--no .duo__tab::after { background: radial-gradient(circle at 100% 0, transparent calc(var(--r) - 0.5px), #141313 var(--r)); }
.duo__lead { margin: 0 0 clamp(1.25rem, 1rem + 1vw, 2rem); font-size: var(--fs-s); font-weight: 300; color: #8d8880; }
.duo__card--no .duo__lead { color: rgba(255, 255, 255, 0.5); }
.duo__list { list-style: none; margin: 0; padding: 0; }
.duo__list li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); align-items: baseline;
  padding: clamp(1rem, 0.85rem + 0.6vw, 1.5rem) 0; border-top: 1px solid rgba(22, 18, 13, 0.1);
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem); line-height: var(--lh-text-m); font-weight: 300; text-wrap: balance; }
.duo__card--no .duo__list li { border-top-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.82); }
.duo__n { font-size: var(--fs-s); color: #a19b92; font-variant-numeric: tabular-nums; }
.duo__card--no .duo__n { color: rgba(255, 255, 255, 0.38); }
/* кристалл: шире своей колонки, заходит на края обеих карточек */
.duo__gem { grid-column: 2; grid-row: 1; position: relative; z-index: 2; align-self: center;
  width: calc(var(--gap) + 8rem); margin-left: -4rem; aspect-ratio: 0.72; opacity: 0; transition: opacity 1.2s ease; pointer-events: none; }
.duo__gem.is-ready { opacity: 1; }
.duo__gem canvas { display: block; width: 100%; height: 100%; }
.duo__card--yes { padding-right: clamp(3rem, 2rem + 3vw, 5.5rem); }
.duo__card--no { padding-left: clamp(3rem, 2rem + 3vw, 5.5rem); }
.duo__card--no .duo__tab { padding-left: clamp(3rem, 2rem + 3vw, 5.5rem); }
@media (max-width: 900px) {
  .duo { grid-template-columns: minmax(0, 1fr); row-gap: calc(var(--tab) + 1rem); }
  .duo__card--yes, .duo__card--no { grid-column: 1; padding: clamp(1.5rem, 1.2rem + 1.4vw, 2.75rem); }
  .duo__card--no .duo__tab { padding-left: clamp(1.5rem, 1.2rem + 1.4vw, 2.75rem); }
  .duo__gem { grid-column: 1; grid-row: auto; width: 60%; margin: -1rem auto -1rem; max-width: 18rem; }
}
/* Отбор: поля карточек одинаковые, язычки на одной линии с текстом */
.duo__card--yes, .duo__card--no { padding-left: clamp(1.5rem, 1.2rem + 1.4vw, 2.75rem); padding-right: clamp(1.5rem, 1.2rem + 1.4vw, 2.75rem); }
.duo__card--no .duo__tab { padding-left: clamp(1.5rem, 1.2rem + 1.4vw, 2.75rem); }
@media (max-width: 900px) { .duo__gem { width: 42%; max-width: 10rem; margin: -0.5rem auto; } }
/* Третья карточка утечек: новое фото, кадр по верхнему краю */
.leak--img[style*="leak-3b"] { background-size: cover; background-position: center top; }

/* ============================================================
   v17 · Утечки: третья карточка светлая, сверху по центру —
   анимированный элемент (гифка или видео). Файл кладётся в
   assets/leaks/ как leak-3.webm, leak-3.mp4 или leak-3.gif —
   скрипт сам найдёт первый существующий. Пока файла нет,
   слот пустой и карточка просто светлая.
   ============================================================ */
.leak--media { background: #f5f5f5; }
.leak__media { position: absolute; left: 50%; top: 8%; width: 62%; aspect-ratio: 1 / 1.15; transform: translateX(-50%); z-index: 0; pointer-events: none; }
.leak__media img, .leak__media video { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.leak--media > .leak__tags, .leak--media > .leak__copy { position: relative; z-index: 1; }

/* ============================================================
   Утечки: всё внутри карточки масштабируется от её ширины
   (пропорции макета 433px), кегль текста не мельче 15px.
   ============================================================ */
.leaks--v14 .leak__tags { padding: max(0.875rem, 4.5cqw); }
.leaks--v14 .leak__copy { padding: 0 max(0.875rem, 4.5cqw) max(1.25rem, 7.2cqw); }
.leaks--v14 .leak--top .leak__copy { padding-top: max(0.25rem, 1.5cqw); }
.leaks--v14 .leak__name { font-size: clamp(1.25rem, 6.15cqw, 2.75rem); line-height: 1.14; }
.leaks--v14 .leak__text { font-size: max(15px, 3.67cqw); line-height: 1.4; margin-top: max(0.5rem, 2.7cqw); }
.leaks--v14 .card__num, .leaks--v14 .card__tag { font-size: max(0.875rem, 3.4cqw); }

/* Утечки на низких окнах: шапка ближе к карточкам, карточки крупнее */
@media (min-width: 1001px) and (max-height: 920px) {
  .leaks--v14 .leaks-sticky { gap: clamp(2rem, 5svh, 3.5rem); padding-top: calc(var(--shift) + 1rem); }
}

/* ============================================================
   Наш подход: лента выходит к правому краю экрана, без дыры
   у поля. В кадре ~2.4 карточки, последняя доезжает прокруткой.
   Всё внутри карточки растёт вместе с ней.
   ============================================================ */
@media (min-width: 1001px) {
  .approach__side { container-type: inline-size; }
  .approach__rail { margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter) !important; }
  .approach__rail > .step { --step-w: clamp(17rem, calc((100cqw + var(--gutter)) / 2.4), 44rem); width: var(--step-w); min-height: calc(var(--step-w) * 291 / 384); container-type: inline-size; padding: max(1.125rem, 5.5cqw); }
  .approach__rail .step__name { font-size: clamp(1.25rem, 6.2cqw, 2.6rem); line-height: 1.14; }
  .approach__rail .step__text { font-size: max(15px, 3.9cqw); line-height: 1.42; }
  .approach__rail .step__num { font-size: max(0.8125rem, 3.4cqw); }
}

/* Кристалл в «87% базы»: окно на верхние ~60% карточки, как в макете */
.leak__media[data-leak-crystal] { left: 0; top: 3%; width: 100%; height: 61%; aspect-ratio: auto; transform: none; opacity: 0; transition: opacity 1.2s ease; }
.leak__media[data-leak-crystal].is-ready { opacity: 1; }
.leak__media[data-leak-crystal] canvas { display: block; width: 100%; height: 100%; mix-blend-mode: normal; }

/* Команда: фото выезжают снизу по очереди, как карточки «Ситуации» */
.staff--slide .staff__item { opacity: 0; translate: 0 46%; }
.staff--slide.is-in .staff__item { animation: cardSlide var(--dur-in, 1.3s) var(--ease-out) both; animation-delay: calc(var(--i) * 130ms); }
@media (prefers-reduced-motion: reduce) { .staff--slide .staff__item { opacity: 1; translate: none; animation: none; } }
html.is-static .staff--slide .staff__item { opacity: 1 !important; translate: none !important; animation: none !important; }

/* «Не менеджеры в аренду»: каждый ряд появляется сам, когда до него
   доходит прокрутка, а не все разом при входе секции. */
.why .ledger__row:not(.is-row) .ledger__idx,
.why .ledger__row:not(.is-row) .ledger__name,
.why .ledger__row:not(.is-row) .ledger__text { opacity: 0; transform: translate3d(0, 0.9rem, 0); transition-delay: 0s; }
.why .ledger__row:not(.is-row) .ledger__value span { opacity: 0; transition-delay: 0s; }
.why .ledger__row:not(.is-row) .nr__d > i { --v: 0; transition-delay: 0s; }
.why .ledger__row:not(.is-row)::after { transform: scaleX(0); transition-delay: 0s; }
.why .ledger__row.is-row .ledger__idx  { transition-delay: 60ms; }
.why .ledger__row.is-row .ledger__name { transition-delay: 220ms; }
.why .ledger__row.is-row .ledger__text { transition-delay: 340ms; }
.why .ledger__row.is-row .nr__d > i { transition-delay: calc(var(--k, 0) * 60ms + 120ms); }
@media (prefers-reduced-motion: reduce) { .why .ledger__row:not(.is-row) .ledger__idx, .why .ledger__row:not(.is-row) .ledger__name, .why .ledger__row:not(.is-row) .ledger__text, .why .ledger__row:not(.is-row) .ledger__value span { opacity: 1; transform: none; } .why .ledger__row:not(.is-row) .nr__d > i { --v: var(--n); } }
html.is-static .why .ledger__row .ledger__idx, html.is-static .why .ledger__row .ledger__name, html.is-static .why .ledger__row .ledger__text, html.is-static .why .ledger__row .ledger__value span { opacity: 1 !important; transform: none !important; }

/* Кнопки у тарифов 2 и 3 — как у первого шага */
.pstep .pstep__cta { margin-top: auto; }

.pstep .pstep__note + .pstep__cta { margin-top: clamp(1rem, 0.8rem + 0.8vw, 1.5rem); }

/* Веер на планшете: карточки узкие, текст длиннее фото-«окна».
   Под текстом мягкая подложка в цвет карточки, предмет внизу виден. */
@media (min-width: 721px) and (max-width: 1100px) and (orientation: portrait) {
  .fan__card--img { background-image: linear-gradient(180deg, var(--fan-bg) 0%, var(--fan-bg) 64%, transparent 84%), var(--bg2) !important; background-size: 100% 100%, 100% 100% !important; }
  .fan__card--light.fan__card--img { --fan-bg: #000; }
  .fan__card--grey.fan__card--img { --fan-bg: #dfe0e3; }
}
@media (min-width: 721px) and (max-width: 1100px) and (orientation: portrait) {
  .fan__card { aspect-ratio: 300 / 440; }
  .fan__card--img { background-size: 100% 100%, 100% auto !important; background-position: top, center bottom !important; background-repeat: no-repeat !important; background-color: var(--fan-bg) !important; }
  .fan__card--img { background-image: linear-gradient(180deg, var(--fan-bg) 0%, var(--fan-bg) 52%, transparent 66%), var(--bg2) !important; }
  .fan { aspect-ratio: 660 / 470; }
}

/* ============================================================
   Кнопка «наверх»: тот же чёрный круг со стрелкой, что у кнопок,
   стрелка повёрнута вверх. Появляется после первого экрана.
   ============================================================ */
.totop { position: fixed; right: clamp(1rem, 0.7rem + 1vw, 1.75rem); bottom: clamp(1rem, 0.7rem + 1vw, 1.75rem); z-index: 60;
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: #16120d; color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 10px 24px -10px rgba(0, 0, 0, 0.45);
  opacity: 0; transform: translate3d(0, 0.75rem, 0); pointer-events: none;
  transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
.totop svg { width: 34%; transform: rotate(-45deg); transition: transform 0.3s var(--ease-out); }
.totop.is-on { opacity: 1; transform: none; pointer-events: auto; }
.totop:hover { transform: translate3d(0, -4px, 0); }
.totop:hover svg { transform: rotate(-45deg) translate(1px, -1px); }
.totop:focus-visible { outline: 2px solid #16120d; outline-offset: 3px; }
body.has-cookie .totop { bottom: calc(clamp(1rem, 0.7rem + 1vw, 1.75rem) + var(--cookie-h, 0px) + 0.75rem); }

/* Плашка cookies: компактная, внизу слева, не перекрывает контент */
.cookie { position: fixed; left: clamp(1rem, 0.7rem + 1vw, 1.75rem); bottom: clamp(1rem, 0.7rem + 1vw, 1.75rem); z-index: 61;
  display: flex; align-items: center; gap: 1rem; max-width: min(34rem, calc(100vw - 2rem));
  padding: 0.875rem 0.875rem 0.875rem 1.25rem; border-radius: var(--radius); background: #141313; color: rgba(255, 255, 255, 0.82);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 18px 40px -18px rgba(0, 0, 0, 0.6);
  animation: cookieIn 0.7s var(--ease-out) both; }
.cookie[hidden] { display: none; }
.cookie__text { margin: 0; font-size: var(--fs-s); line-height: 1.4; font-weight: 300; }
.cookie__text a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.35); }
.cookie__ok { flex: none; height: 2.5rem; padding: 0 1.25rem; border: 0; border-radius: 999px; background: #fff; color: #16120d;
  font: inherit; font-size: var(--fs-s); font-weight: 500; cursor: pointer; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.cookie__ok:hover { transform: translate3d(0, -2px, 0); }
.cookie.is-out { animation: cookieOut 0.4s ease forwards; }
@keyframes cookieIn { from { opacity: 0; transform: translate3d(0, 1rem, 0); } to { opacity: 1; transform: none; } }
@keyframes cookieOut { to { opacity: 0; transform: translate3d(0, 0.75rem, 0); } }
@media (max-width: 600px) {
  .cookie { right: 1rem; max-width: none; flex-direction: column; align-items: stretch; gap: 0.75rem; padding: 1rem; }
  .cookie__ok { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .totop, .cookie { transition: none; animation: none; } }
html.is-static .totop, html.is-static .cookie { display: none !important; }