/* ============================================================================
   L-Corp Legal Marketing — лендинг
   Структура и весь контент: прототип Figma (node 1:2 «Прототип», 1920×10850)
   Визуальный язык: l-corp-ui-audit.md, перекрашен в светлую нюдовую
   палитру «песок и эспрессо»: фон #FDFCFA, акцент-глина #9E5E33, Exo 2
   Десктоп. Нативные HTML + CSS, без фреймворков.
   ========================================================================= */

/* ---------------------------------------------------------------- ТОКЕНЫ */
:root {
  /* ══ Цвет: светлая нюдовая палитра «песок и эспрессо» (A2).
     Каждая пара проверена на контраст, цифры в комментариях. ══ */
  --bg:               #FDFCFA;   /* почти белый фон страницы */
  --bg-band:          linear-gradient(180deg, #F4EDE4 0%, #F2EAE0 55%, #F4EDE4 100%);
  --bg-footer:        linear-gradient(180deg, #F6F1E9 0%, #F1E9DD 100%);

  --surface-glass:    #FFFFFF;   /* карточки — чистый белый на тёплом фоне */
  --surface-glass-2:  #FFFFFF;
  --surface-overlay:  #FFFFFF;   /* панель меню, выпадающий список */
  --surface-floating: #FFFFFF;   /* модалка, куки-баннер */
  --surface-light:    #E8DFD4;   /* сплошная песочная обводка полей */
  --surface-soft:     #F6EEE4;   /* подложка чипов: акцент на ней 4.58:1 */
  --surface-soft-2:   #F0E4D7;   /* плашки иконок — это графика, порог 3:1 */
  --surface-sunken:   rgba(34, 31, 27, .035);  /* еле заметная выемка вместо белого на тёмном */

  --accent:           #9E5E33;   /* глина: 4.99:1 на фоне, 5.12:1 под белым текстом */
  /* та же глина на пару тонов темнее — только для мелких подписей: основной
     оттенок на кремовой карточке даёт 4.45 при норме 4.5 */
  --accent-text:      #955830;
  --accent-hover:     #8B5029;
  --accent-press:     #7F4924;
  --accent-tint:      rgba(158, 94, 51, .09);

  /* Второй акцент — хвойный. Одноцветная страница читается как шаблон:
     тёплая глина держит действия и суммы, холодный хвойный — цифры,
     иконки и метки. 9.5:1 на фоне страницы. */
  --accent-2:         #2F4A44;
  --accent-2-hover:   #24413B;
  --accent-2-tint:    rgba(47, 74, 68, .08);
  --accent-2-soft:    #E2ECE8;   /* подложка под хвойные иконки и метки */
  --accent-2-on-dark: #6E9B8E;   /* 4.8:1 на чернильной секции */

  /* Главная кнопка тёмная, а не акцентная: на светлом фоне глиняная заливка
     во всю ширину давит, а чернильная читается как «основное действие» */
  --primary:          #2A2622;   /* белый текст 15:1 */
  --primary-hover:    #3A342E;
  --primary-press:    #1B1815;

  --text:             #221F1B;   /* 16:1 */
  --text-muted:       #6F675C;   /* 5.43:1 на фоне, 4.95:1 на ленте секции */
  --text-muted-lg:    #8A8175;   /* только крупный текст от 22px */
  --text-muted-card:  #6F675C;   /* 5.57:1 на белой карточке */
  --text-on-accent:   #FFFFFF;
  --text-on-primary:  #FFFFFF;
  --text-on-light:    #221F1B;

  /* Показатели лежат на чернильной плашке — обычный акцент там даёт 2.93:1,
     поэтому для тёмного фона своя, осветлённая пара */
  --accent-on-dark:       #E0A96D;   /* 7.20:1 на #2A2622 */
  --text-muted-on-dark:   #C2B6A6;   /* 7.53:1 */

  --border-subtle:    rgba(34, 31, 27, .20);
  --border-faint:     rgba(34, 31, 27, .09);

  /* Ошибка на светлом: прежний #FF6B6B был рассчитан на чёрный фон
     и давал на белом 2.9:1 — берём глубокий кирпичный, 6.37:1 */
  --danger:           #B3261E;

  /* Типографика — Exo 2, разрядки нет нигде */
  --font: 'Exo 2', 'Exo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-h1:      46px;   --lh-h1:      1.10;
  --fs-h2:      46px;   --lh-h2:      1.10;
  --fs-h3:      27px;   --lh-h3:      1.18;
  --fs-h4:      32px;   --lh-h4:      1.16;
  --fs-display: 64px;   --lh-display: 1.02;

  /* Заголовки набираем тяжело и с отрицательным трекингом: при весе 500 и
     нейтральной разрядке крупный текст рассыпается и читается как шаблон */
  --fw-head:    700;
  --tr-head:    -.022em;   /* крупные заголовки */
  --tr-sub:     -.014em;   /* заголовки карточек */
  --tr-label:   .12em;     /* мелкие подписи капсом */
  --fs-price:   46px;   --lh-price:   1.10;
  --fs-lead:    18px;   --lh-lead:    1.55;
  --fs-body:    17px;   --lh-body:    1.60;
  --fs-ui:      16px;
  --fs-btn:     15px;
  --fs-cap:     14px;
  --fs-micro:   12px;

  /* Сетка и ритм */
  --container:  1627px;
  --pad-x:      40px;
  --grid-gap:   32px;
  --section-pt: 100px;
  --section-pb: 120px;

  /* Скругления */
  --r-pill:     100px;
  --r-circle:   50%;
  --r-xs:       8px;    /* мелкие метки, маркеры */
  --r-sm:       14px;   /* плашки иконок, поля */
  --r-card:     22px;   /* обычная карточка */
  --r-lg:       34px;   /* крупные панели: карта первого экрана, CTA, тарифы */
  --r-overlay:  16px;

  /* Границы */
  --bw-card:    1px;
  --bw-btn:     1px;
  --bw-input:   5px;

  /* Тени — только для плавающих слоёв */
  --shadow-flat:     0 1px 2px rgba(58, 44, 32, .04);                                  /* лежит на фоне */
  --shadow-card:     0 1px 2px rgba(58, 44, 32, .03), 0 14px 34px rgba(58, 44, 32, .06); /* обычная карточка */
  --shadow-raised:   0 2px 4px rgba(58, 44, 32, .04), 0 22px 48px rgba(58, 44, 32, .10);  /* выделенный блок */
  --shadow-floating: 0 12px 36px rgba(58, 44, 32, .15);
  --shadow-menu:     0 10px 22px rgba(58, 44, 32, .12);
  --glow-accent:     0 0 17.5px rgba(158, 94, 51, .30);

  /* Движение */
  --t-fast: .2s;
  --t-base: .3s;
  --ease:   ease;
  --ease-out: cubic-bezier(.2, .9, .3, 1);
  --ease-soft:  cubic-bezier(.33, 1, .68, 1);      /* мягкий выход: карточки */
  --ease-snap:  cubic-bezier(.34, 1.4, .64, 1);    /* с лёгким перелётом: цифры, иконки */
  --t-slow: .55s;
}

/* ───────────────────────────────────────────────────────────── ЗЕРНО ────
   Плоские заливки читаются «пластиково». Слой плёночного зерна поверх фона
   (feTurbulence в data-URI, ~0.4 КБ, ни одного запроса) даёт поверхности
   лёгкую бумажность. Кликам не мешает, при уменьшенной анимации остаётся —
   он статичен и глазу не мешает. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27160%27%20height%3D%27160%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.82%27%20numOctaves%3D%273%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27160%27%20height%3D%27160%27%20filter%3D%27url%28%23n%29%27%20opacity%3D%27.55%27%2F%3E%3C%2Fsvg%3E");
  background-size: 160px 160px;
  opacity: .14;
  mix-blend-mode: multiply;
}
/* Контент поднимаем над зерном. Шапку сюда НЕ включаем: у неё свой z-index 60,
   и уравнивание с остальными однажды уже утопило открытое бургер-меню под контент. */
.topbar, main, .footer { position: relative; z-index: 1; }
/* на чернильных секциях умножение съедает зерно — там осветляем */
.section--ink { isolation: isolate; }

/* ---------------------------------------------------------------- СБРОС */
*, *::before, *::after { box-sizing: border-box; }

/* scroll-padding-top страхует якоря от заезда под липкую шапку: сейчас
   спасают только большие отступы секций, уменьшат — заголовок уедет */
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h, 120px); }

/* clip, а не hidden: не создаёт скролл-контейнер и не ломает sticky-шапку.
   Нужен из-за мобильной панели меню, которая в закрытом виде стоит за экраном. */
html, body { overflow-x: clip; }

body {
  margin: 0;
  min-width: 375px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a  { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }

::selection { background: var(--accent); color: var(--text-on-accent); }

/* Фокус — базовое правило для всей страницы (в оригинале L-Corp его нет) */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ------------------------------------------------------------ КОНТЕЙНЕР */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.section { padding: var(--section-pt) 0 var(--section-pb); }
.section--band { background: var(--bg-band); }

/* Заголовок секции: ярлык-надзаголовок → крупная строка → короткий подвод.
   Ярлык даёт секции тему до того, как прочитан заголовок, и снимает
   ощущение однообразного списка блоков. */
.section-head { text-align: center; margin-bottom: 64px; }

.section-head__eyebrow {
  display: block;
  margin-bottom: 14px;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--accent);
}

.section-title {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-head);
  letter-spacing: var(--tr-head);
}
.section-title .accent { color: var(--accent); }

.section-sub {
  margin-top: 18px;
  font-size: 17px;
  line-height: var(--lh-lead);
  font-weight: 400;
  color: var(--text-muted);
  /* было 1175px = 131 знак в строке при норме 60–75 */
  max-width: 68ch;
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------------- КНОПКИ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: var(--bw-btn) solid transparent;
  border-radius: var(--r-pill);
  font-size: var(--fs-btn);
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--t-base) var(--ease),
              color var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}
/* Заблокировано: не приглушённый лайм, а явно нейтральная плашка —
   иначе читается как «сломанный цвет», а не как «пока нельзя» */
.btn:disabled,
.btn:disabled:hover {
  background: var(--surface-soft-2);
  border-color: transparent;
  color: var(--text-muted);
  cursor: not-allowed;
  transform: none;
}

/* Акцентная — заливка лаймом */
.btn--primary {
  height: 62px;
  padding: 0 40px;
  background: var(--primary);
  color: var(--text-on-primary);
  border-color: var(--primary);
  box-shadow: 0 10px 26px rgba(42, 38, 34, .18);
}
.btn--primary:hover  { box-shadow: 0 14px 32px rgba(42, 38, 34, .24); background: var(--primary-hover); border-color: var(--primary-hover); transform: translateY(-2px); }
.btn--primary:active { background: var(--primary-press); border-color: var(--primary-press); transform: translateY(0); }

/* Обводка — инверсия при наведении (эталон отклика L-Corp) */
.btn--outline {
  height: 59px;
  padding: 0 32px;
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}
.btn--outline:hover  { background: var(--accent); color: var(--text-on-accent); }
.btn--outline:active { background: var(--accent-press); border-color: var(--accent-press); }

/* Белая — вторичное действие на тёмном */
.btn--light {
  height: 62px;
  padding: 0 40px;
  background: var(--surface-light);
  color: var(--text-on-light);
  border-color: var(--surface-light);
}
.btn--light:hover  { background: #DCD1C2; border-color: #DCD1C2; transform: translateY(-2px); }
.btn--light:active { transform: translateY(0); }

/* Призрак — третьестепенное */
.btn--ghost {
  height: 45px;
  padding: 0 26px;
  background: transparent;
  color: var(--text);
  border-color: var(--border-subtle);
}
.btn--ghost:hover { border-color: var(--text); }

.btn--lg    { height: 80px; font-size: var(--fs-ui); padding: 0 48px; }
.btn--block { display: flex; width: 100%; }

/* -------------------------------------------------------------- ЗАСТАВКА */
/* Слой цвета фона, из которого вычтен знак: две маски — сплошная заливка и
   логотип — складываются в режиме exclude, знак становится дыркой. Растёт
   только маска знака, сам слой неподвижен, поэтому кадр стоит дёшево.
   К концу полёта буквы шире экрана, и слой гасится: между штрихами остаются
   просветы, гашение убирает их разом. */
.preloader { display: none }
.is-intro .preloader {
  --pre-from: 168px;   /* стартовый размер знака */
  --pre-to: 6400px;    /* на этом размере буква перекрывает экран */
  display: block;
  position: fixed;
  inset: 0;
  z-index: 200;
  /* Слой чернильный, а не в цвет фона: на светлом светлая дырка не читалась,
     а на тёмном буквы работают как окна в сайт */
  background: var(--primary);
  -webkit-mask-image: url(../mask-logo.svg), linear-gradient(#000, #000);
          mask-image: url(../mask-logo.svg), linear-gradient(#000, #000);
  -webkit-mask-repeat: no-repeat, no-repeat;
          mask-repeat: no-repeat, no-repeat;
  -webkit-mask-position: center, center;
          mask-position: center, center;
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  will-change: mask-size, opacity;
  animation: preFly 2600ms cubic-bezier(.66, .01, .78, .28) 520ms both;
}
@keyframes preFly {
  0% {
    -webkit-mask-size: var(--pre-from) auto, 100% 100%;
            mask-size: var(--pre-from) auto, 100% 100%;
    opacity: 1;
  }
  80% { opacity: 1 }
  100% {
    -webkit-mask-size: var(--pre-to) auto, 100% 100%;
            mask-size: var(--pre-to) auto, 100% 100%;
    opacity: 0;
  }
}
/* Узкий экран перекрывается меньшим знаком: с десктопным размахом буквы
   улетали бы из кадра в первую же треть полёта */
@media (max-width: 1023px) { .is-intro .preloader { --pre-from: 148px; --pre-to: 4200px } }
@media (max-width: 575px)  { .is-intro .preloader { --pre-from: 120px; --pre-to: 3200px } }

/* Пока летим, страница под слоем не прокручивается. Место полосы резервируем:
   иначе в момент снятия слоя вёрстка дёрнулась бы на её ширину */
.is-intro { scrollbar-gutter: stable }
.is-intro, .is-intro body { overflow: hidden }

/* Сами окна коллажа под слоем видны — они и должны просвечивать сквозь буквы.
   А их начинка ждёт конца заставки, иначе отыграла бы вслепую и открылась уже
   застывшей. Пауза копит нулевое время, так что дальше всё идёт с начала. */
.is-intro .dash-line,
.is-intro .dash-area,
.is-intro .dash-dots circle,
.is-intro .dash-rows .bar,
.is-intro .dash-rings .ring,
.is-intro .dash-pins path,
.is-intro .dash-map circle { animation-play-state: paused !important }

/* ----------------------------------------------------------------- ШАПКА */
.topbar {
  border-bottom: 1px solid var(--border-faint);
  font-size: var(--fs-cap);
  color: var(--text-muted);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 46px;
}
.topbar a { color: var(--text); transition: color var(--t-base); }
.topbar a:hover { color: var(--accent); }

.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(253, 252, 250, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-faint);
}
.header__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 115px;
}

/* Знак: словесная часть наследует currentColor (белая), точка — лаймовая,
   она зашита в сам символ */
.logo {
  display: inline-flex;
  align-items: center;
  width: 164px;
  flex: 0 0 auto;
  color: var(--text);
  transition: opacity var(--t-base);
}
.logo svg { width: 100%; height: auto; }
.logo:hover { opacity: .75; }

/* На десктопе обёртка прозрачна для раскладки — дети остаются флекс-элементами
   шапки. На планшете и телефоне она превращается в выезжающую панель. */
.header__menu { display: contents; }

.burger {
  position: relative;
  display: none;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  margin-left: auto;
  place-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-circle);
  cursor: pointer;
  z-index: 80;
  transition: border-color var(--t-base);
}
.burger span {
  position: absolute;
  left: 12px;
  right: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: transform var(--t-fast), opacity var(--t-fast), background-color var(--t-base);
}
.burger span:nth-child(1) { top: calc(50% - 7px); }
.burger span:nth-child(2) { top: calc(50% - 1px); }
.burger span:nth-child(3) { top: calc(50% + 5px); }
.burger:hover { border-color: var(--accent); }
.burger:hover span { background: var(--accent); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav { display: flex; gap: 38px; margin-left: 24px; }
.nav a {
  font-size: var(--fs-ui);
  color: var(--text);
  transition: color var(--t-base);
}
.nav a:hover { color: var(--accent); }

.header__phone {
  margin-left: auto;
  font-size: 22px;
  font-weight: 500;
  white-space: nowrap;
  transition: color var(--t-base);
}
.header__phone:hover { color: var(--accent); }

/* ------------------------------------------------------------------ ГЕРО */
.hero { padding: 60px 0 var(--section-pb); }

.hero__card {
  position: relative;
  display: grid;
  /* minmax(0,…) обязателен: иначе min-content левой колонки (два показателя
     по 263px + кнопка 491px) распирает сетку и рождает горизонтальный скролл */
  grid-template-columns: minmax(0, 1fr) minmax(360px, 620px);
  gap: 60px;
  align-items: center;
  min-height: 646px;
  padding: 62px 80px;
  background: var(--surface-glass);
  border: var(--bw-card) solid var(--border-faint);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.hero__title {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-head);
  letter-spacing: var(--tr-head);
  max-width: 720px;
}

/* Ярлык над заголовком первого экрана: точка-маркер + короткая тема,
   тот же приём, что и у заголовков секций */
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 20px;
  padding: 7px 16px 7px 13px;
  background: var(--surface-soft);
  border: 1px solid rgba(158, 94, 51, .22);
  border-radius: var(--r-pill);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--accent-text);
}
.hero__eyebrow::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.hero__title .accent { color: var(--accent); }

.hero__lead {
  margin-top: 24px;
  max-width: 620px;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  font-weight: 400;
  /* на стеклянной карточке --text-muted давал 4.07:1 — ниже нормы 4.5 */
  color: var(--text-muted-card);
}

.hero__stats { display: flex; flex-wrap: wrap; gap: 30px; margin-top: 40px; }

.stat {
  flex: 1 1 240px;
  max-width: 263px;
  min-height: 170px;
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--surface-glass-2);
  border: var(--bw-card) solid var(--border-faint);
  border-radius: var(--r-card);
  transition: border-color var(--t-base);
}
.stat:hover { border-color: var(--accent); }
.stat__value {
  font-size: var(--fs-display);
  line-height: 1;
  font-weight: 500;
  color: var(--accent-2);
}
.stat__label {
  margin-top: 10px;
  font-size: var(--fs-ui);
  line-height: 1.3;
  color: var(--text-muted-card);
}

.hero__cta { margin-top: 44px; }
.hero__cta .btn { width: 100%; max-width: 491px; }

/* Фирменный визуал первого экрана: мок панели заявок.
   Высота — по пропорции SVG, без фиксированных значений */
/* Иллюстрация первого экрана. Под ней мягкий лаймовый отсвет — иначе
   светлые «окна» коллажа висят на чёрном вырезанным прямоугольником. */
.hero__visual {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
}
.hero__visual::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 108%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(158, 94, 51, .10), transparent 62%);
  filter: blur(28px);
  pointer-events: none;
}
.dash {
  position: relative;
  width: 100%;
  max-width: 600px;
  height: auto;
  display: block;
  overflow: visible;
}

/* ------------------------------------------------------- СЕТКА НИШ (9) */
.niches-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
}

/* Карточка ниши: заголовок → цена-чип → тонкая линия → действие.
   Без полосы во всю ширину и без пустот — раньше контент «плавал». */
.niche {
  display: flex;
  flex-direction: column;
  padding: 30px 30px 24px;
  background: var(--surface-glass);
  border: var(--bw-card) solid var(--border-faint);
  border-radius: var(--r-card);
  transition: border-color var(--t-base), background-color var(--t-base),
              transform var(--t-base), box-shadow var(--t-base);
}
/* Наведение: карточка чуть всплывает и теплеет. Раньше здесь заливался тёмный
   фон из прежней палитры — на светлой теме текст на нём переставал читаться.
   Селектор с сеткой, иначе transform перебивает .reveal.is-in из блока
   проявления: та же специфичность, но объявлена ниже по файлу. */
.niches-grid .niche:hover {
  background: var(--surface-soft);
  border-color: rgba(158, 94, 51, .38);
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(58, 44, 32, .11);
}

/* Иконка ниши: контурный знак в лаймовой плашке, задаёт карточке точку входа */
.niche__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 20px;
  border-radius: var(--r-sm);
  background: var(--accent-2-soft);
  border: 1px solid rgba(47, 74, 68, .16);
  color: var(--accent-2);
  transition: background-color var(--t-base), border-color var(--t-base), transform var(--t-base);
}
.niche__icon svg { width: 26px; height: 26px; display: block; }
.niche:hover .niche__icon {
  background: #D3E3DD;
  border-color: rgba(47, 74, 68, .34);
  transform: translateY(-3px) rotate(-3deg);
}

.niche__title {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-head);
  letter-spacing: var(--tr-sub);
}

.niche__price {
  align-self: flex-start;
  margin-top: 18px;
  padding: 9px 20px;
  border: 1px solid rgba(158, 94, 51, .35);
  border-radius: var(--r-pill);
  background: var(--surface-soft);
  font-size: 17px;
  font-weight: 500;
  color: var(--accent-text);
  white-space: nowrap;
  /* гарантированный зазор до разделителя: margin-top:auto у .niche__cta
     в самой высокой карточке ряда схлопывается в ноль */
  margin-bottom: 26px;
  transition: border-color var(--t-base), background-color var(--t-base);
}
.niche:hover .niche__price { border-color: var(--accent); background: #F4E7DA; }

.niche__cta {
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid var(--border-faint);
}
/* Действие — текстовая ссылка со стрелкой: девять лаймовых кнопок подряд
   перегружали акцентом, теперь акцент в карточке один — цена */
.niche__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* тач-цель: было 22px по высоте при норме 44. Отрицательный margin
     возвращает визуальные отступы карточки на место */
  padding: 11px 0;
  margin: -11px 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--text);
  font-size: var(--fs-cap);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  transition: color var(--t-base);
}
.niche__link svg { width: 16px; height: 12px; fill: currentColor; transition: transform var(--t-base); }
.niche__link:hover,
.niche:hover .niche__link { color: var(--accent); }
.niche__link:hover svg { transform: translateX(5px); }

/* ------------------------------------------- ПОЛНЫЙ ЦИКЛ: широкие карты */
.stack { display: flex; flex-direction: column; gap: 32px; }

.wide-card {
  position: relative;
  min-height: 254px;
  padding: 38px 190px 38px 68px;
  background: var(--surface-glass);
  border: var(--bw-card) solid var(--border-faint);
  border-radius: var(--r-card);
  transition: border-color var(--t-base);
}
.wide-card:hover { border-color: var(--accent); }

/* Заголовок белый: акцент в этой секции уже занят заголовком секции —
   держим правило «одно-два лаймовых пятна на экран» */
.wide-card__title {
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  font-weight: var(--fw-head);
  letter-spacing: var(--tr-sub);
  color: var(--text);
}
.wide-card__why {
  margin-top: 14px;
  font-size: var(--fs-ui);
  color: var(--text-muted-card);
  /* было 137 знаков в строке при норме 60–75 */
  max-width: 72ch;
}
.wide-card__why b { color: var(--text); font-weight: 500; }

/* Смысловая иконка карточки: контур в акценте, реагирует вместе с карточкой */
.wide-card__icon {
  position: absolute;
  top: 50%;
  right: 62px;
  width: 100px;
  height: 100px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border: 1px solid var(--border-faint);
  border-radius: var(--r-card);
  color: var(--accent-2);
  background: var(--surface-soft);
  transition: border-color var(--t-base), background-color var(--t-base);
}
.wide-card__icon svg { width: 46px; height: 46px; fill: none; stroke: currentColor; }
.wide-card:hover .wide-card__icon { border-color: rgba(47, 74, 68, .34); background: #D3E3DD; }

/* Маркированный список — квадратная лаймовая метка */
.bullets { margin-top: 20px; display: grid; gap: 10px; }
.bullets li {
  position: relative;
  padding-left: 26px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
}
.bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .62em;
  width: 10px;
  height: 2px;
  background: var(--accent-2);
}

/* ------------------------------------------------------- ЦИФРЫ (3 шт.) */
/* Показатели одной плашкой с разделителями вместо трёх пустых карточек:
   плотнее, читается как единый факт-блок, нет мёртвых зон */
.metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1120px;
  margin: 56px auto 0;
  background: var(--surface-glass);
  border: 1px solid var(--border-faint);
  border-radius: var(--r-card);
  overflow: hidden;
}
.metric {
  padding: 36px 28px;
  text-align: center;
  transition: background-color var(--t-base);
}
.metric + .metric { border-left: 1px solid var(--border-faint); }
.metric:hover { background: var(--surface-soft); }

/* короткая акцентная засечка — якорь для глаза */
.metric::before {
  content: '';
  display: block;
  width: 28px;
  height: 2px;
  margin: 0 auto 18px;
  background: var(--accent);
}
.metric__label { font-size: var(--fs-ui); color: var(--text-muted-card); }
.metric__value {
  margin-top: 10px;
  font-size: var(--fs-display);
  line-height: 1;
  font-weight: 500;
  color: var(--accent-2);
}

/* --------------------------------------------------------- 5 ШАГОВ */
.step {
  position: relative;
  min-height: 254px;
  padding: 40px 200px 40px 380px;
  background: var(--surface-glass);
  border: var(--bw-card) solid var(--border-faint);
  border-radius: var(--r-card);
  transition: border-color var(--t-base);
}
.step:hover { border-color: var(--accent); }

.step__num {
  position: absolute;
  left: 36px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 190px;
  line-height: .8;
  font-weight: 600;
  color: transparent;
  -webkit-text-stroke: 2px var(--accent-2);
  user-select: none;
  pointer-events: none;
  transition: color var(--t-base);
}
.step:hover .step__num { color: rgba(158, 94, 51, .14); }

/* Иконка справа: раньше правая половина карточки пустовала */
.step__icon {
  position: absolute;
  top: 50%;
  right: 56px;
  width: 100px;
  height: 100px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border: 1px solid var(--border-faint);
  border-radius: var(--r-card);
  background: var(--surface-soft);
  color: var(--accent-2);
  transition: border-color var(--t-base), background-color var(--t-base);
}
.step__icon svg { width: 46px; height: 46px; fill: none; stroke: currentColor; }
.step:hover .step__icon { border-color: rgba(47, 74, 68, .34); background: #D3E3DD; }

.step__title {
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  font-weight: var(--fw-head);
  letter-spacing: var(--tr-sub);
}

/* -------------------------------------------------------------- КЕЙСЫ */
.cases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
  align-items: stretch;   /* ровный ряд: одинаковая высота, общий верх и низ */
  padding-top: 37px;      /* место под бейдж, свисающий за верхний край */
}

.case {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 344px;
  padding: 60px 34px 34px;
  background: var(--surface-glass);
  border: var(--bw-card) solid var(--border-faint);
  border-radius: var(--r-card);
  transition: border-color var(--t-base);
}
.case:hover { border-color: var(--accent); }

.case__badge {
  position: absolute;
  top: -37px;
  left: 30px;
  display: inline-flex;
  align-items: center;
  height: 74px;
  padding: 0 34px;
  background: var(--accent);
  color: var(--text-on-accent);
  border-radius: var(--r-pill);
  font-size: 24px;
  font-weight: 600;
}

.case__client { font-size: 20px; font-weight: 500; line-height: 1.3; }

.case__block { margin-top: 18px; }
.case__label {
  font-size: var(--fs-cap);
  text-transform: uppercase;
  color: var(--accent-2);
}
.case__block p { margin-top: 6px; font-size: var(--fs-body); color: var(--text); }

.case__cta { margin-top: auto; padding-top: 28px; }
.case__cta .btn { width: 100%; max-width: 284px; }

/* ------------------------------------------------------------- ТАРИФЫ */
.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
  /* stretch, а не start: при start карточки разной высоты давали рваный низ */
  align-items: stretch;
  padding-top: 14px;   /* место под бейдж «популярный», свисающий за кромку */
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 702px;
  padding: 44px 36px 36px;
  background: var(--surface-glass);
  border: var(--bw-card) solid var(--border-faint);
  border-radius: var(--r-lg);
  transition: border-color var(--t-base);
}
.plan:hover { border-color: var(--accent); }

/* Выделенный тариф отличается рамкой и цветом, но стоит вровень с соседями */
.plan--featured {
  margin-top: 0;
  min-height: 730px;
  border-color: var(--accent);
}
.plan__flag {
  position: absolute;
  top: 0;
  right: 32px;
  transform: translateY(-50%);
  padding: 7px 18px;
  background: var(--accent);
  color: var(--text-on-accent);
  border-radius: var(--r-pill);
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
}

.plan__title {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-head);
  letter-spacing: var(--tr-sub);
  min-height: 92px;
}
.plan__list { margin-top: 26px; }
.plan__price {
  margin-top: auto;
  padding-top: 32px;
  font-size: var(--fs-price);
  line-height: var(--lh-price);
  font-weight: 600;
  letter-spacing: var(--tr-sub);
  color: var(--accent);
}
.plan__cta { margin-top: 26px; }
.plan__cta .btn { width: 100%; max-width: 284px; }

/* ------------------------------------------------------------- ЭКСПЕРТ */
.expert {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 534px) minmax(0, 1fr);
  gap: 90px;
  align-items: center;
}
/* Мягкое свечение под фигурой — фото снизу уходит в прозрачность,
   свечение подхватывает его и не даёт «повиснуть» в пустоте */
.expert::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -40px;
  width: 534px;
  height: 320px;
  /* в цвет ленты секции: глиняное свечение задумывалось для тёмной темы,
     чтобы поймать затухающий низ фото. На светлом оно читалось цветным
     пятном под ногами — теперь тон в тон с фоном */
  background: radial-gradient(60% 60% at 50% 100%, rgba(246, 241, 233, .95), transparent 70%);
  pointer-events: none;
}
/* Ширина = натуральный размер вырезанной фигуры (в макете человек занимает
   376px внутри слота 534px). Растягивать нельзя — фото замылится. */
.expert__photo {
  position: relative;
  width: 100%;
  max-width: 376px;
  height: auto;
  justify-self: center;
}

.expert__list { display: grid; gap: 44px; }
.expert__item { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 40px; align-items: center; }
.expert__item p { font-size: 20px; line-height: 1.5; }

.expert__icon {
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-circle);
  color: var(--accent-2);
  background: var(--surface-soft);
  transition: border-color var(--t-base), background-color var(--t-base);
}
.expert__icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; }
.expert__item:hover .expert__icon { border-color: var(--accent); background: var(--surface-soft-2); }

/* ----------------------------------------------------------------- FAQ */
.faq { max-width: 1141px; margin: 0 auto; }

.faq__item { border-top: 1px solid var(--border-subtle); }
.faq__item:last-child { border-bottom: 1px solid var(--border-subtle); }

.faq__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  min-height: 91px;
  padding: 20px 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--text);
  transition: color var(--t-base);
}
.faq__head:hover { color: var(--accent); }
.faq__q { font-size: 24px; line-height: 1.35; font-weight: 500; }

/* fill задаём на самом <svg>: внутрь <use> CSS-селектор `path` не проходит,
   а наследуемые свойства — проходят */
.faq__icon { flex: 0 0 auto; width: 24px; height: 12px; fill: currentColor; transition: transform var(--t-fast); }
.faq__item.is-open .faq__head { color: var(--accent); }
.faq__item.is-open .faq__icon { transform: rotate(180deg); }

.faq__body { max-height: 0; overflow: hidden; transition: max-height var(--t-fast) var(--ease); }
.faq__body-inner { padding: 0 60px 32px 0; font-size: var(--fs-lead); line-height: var(--lh-lead);
  color: var(--text-muted); max-width: 72ch; }   /* было 127 знаков в строке */
.faq__body-inner em { color: var(--text-muted); font-style: normal; }   /* 18px — это не крупный текст */

/* --------------------------------------------------- ФИНАЛЬНАЯ ФОРМА */
.cta-card {
  padding: 70px 80px 64px;
  background: var(--primary);
  border: 0;
  border-radius: var(--r-lg);
  text-align: center;
  box-shadow: var(--shadow-raised);
}
.cta-card__title { font-size: var(--fs-h2); line-height: var(--lh-h2);
                   font-weight: var(--fw-head); letter-spacing: var(--tr-head); }
.cta-card__title .accent { color: var(--accent); }
.cta-card__sub {
  margin: 18px auto 0;
  max-width: 700px;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  font-weight: 400;
  color: var(--text-muted-card);
}

.form { max-width: 753px; margin: 44px auto 0; text-align: left; }
.form__row + .form__row { margin-top: 19px; }

.input {
  width: 100%;
  height: 70px;
  padding: 0 34px;
  background: transparent;
  color: var(--text);
  font-size: var(--fs-lead);
  border: var(--bw-input) solid var(--surface-light);
  border-radius: var(--r-pill);
  transition: border-color var(--t-base);
}
.input::placeholder { color: var(--text-muted); }
.input:hover  { border-color: #D8CBB9; }
.input:focus  { border-color: var(--accent); outline: none; }
.input:disabled { opacity: .4; }
.input[aria-invalid="true"]       { border-color: var(--danger); }
.input[aria-invalid="true"]:focus { border-color: var(--danger); }

/* Подпись об ошибке под полем */
.field-error {
  display: block;
  max-height: 0;
  overflow: hidden;
  padding: 0 34px;
  color: var(--danger);
  font-size: var(--fs-cap);
  line-height: 1.4;
  transition: max-height var(--t-fast) var(--ease), padding-top var(--t-fast) var(--ease);
}
.field-error.is-shown { max-height: 48px; padding-top: 8px; }

.form__submit { margin-top: 20px; }

.agree { display: flex; gap: 14px; align-items: flex-start; margin-top: 24px; cursor: pointer; }
.agree + .agree { margin-top: 14px; }

/* Нативный чекбокс, стилизованный напрямую: остаётся в потоке,
   доступен с клавиатуры и кликабелен (без скрытого input 0×0) */
.agree input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  background: transparent;
  border: 1px solid var(--surface-light);
  border-radius: var(--r-circle);
  cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast);
}
.agree input[type="checkbox"]:hover   { border-color: var(--accent); }
.agree input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
.agree__text { font-size: var(--fs-cap); line-height: 1.45; color: var(--text-muted-card); }
.agree:hover .agree__text { color: var(--text); }
.agree__text a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.agree__text a:hover { color: var(--accent); }

/* --------------------------------------------------------------- ПОДВАЛ */
.footer { background: var(--bg-footer); padding: 80px 0 0; }
.footer__grid {
  display: grid;
  /* minmax(0,…) не даёт колонкам распереть контейнер на узком десктопе */
  grid-template-columns: minmax(0, 1fr) minmax(0, 502px) minmax(0, 413px);
  gap: 60px;
}

.footer__tagline { margin-top: 34px; font-size: var(--fs-ui); color: var(--text); }
.footer__legal { margin-top: 26px; font-size: var(--fs-cap); line-height: 1.9; color: var(--text-muted); }
.footer__docs { margin-top: 26px; display: grid; gap: 10px; }
.footer__docs a {
  font-size: var(--fs-cap);
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-faint);
  padding-bottom: 6px;
  width: 100%;
  max-width: 375px;
  transition: color var(--t-base), border-color var(--t-base);
}
.footer__docs a:hover { color: var(--accent); border-color: var(--accent); }

.footer__col-title {
  font-size: var(--fs-cap);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent);
}
.footer__nav { margin-top: 22px; display: grid; gap: 0; }
.footer__nav a {
  padding: 12px 0;
  font-size: var(--fs-ui);
  text-transform: lowercase;
  color: var(--text);
  border-bottom: 1px solid var(--border-faint);
  transition: color var(--t-base), border-color var(--t-base);
}
.footer__nav a:hover { color: var(--accent); border-color: var(--accent); }

.footer__contacts { margin-top: 22px; display: grid; gap: 12px; }
.footer__contacts a { font-size: 20px; font-weight: 500; transition: color var(--t-base); }
.footer__contacts a:hover { color: var(--accent); }

.footer__social { margin-top: 26px; display: flex; gap: 12px; }
.social {
  display: grid;
  place-items: center;
  width: 55px;
  height: 55px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-circle);
  color: var(--text);
  transition: transform var(--t-base), background-color var(--t-base), color var(--t-base), border-color var(--t-base);
}
.social svg { width: 24px; height: 24px; fill: currentColor; }

/* Иконки соцсетей в шапке: те же кружки, но меньше — рядом с телефоном
   и кнопкой они не должны спорить с ними по весу. */
.header__social { display: flex; gap: 10px; }
.social--sm { width: 40px; height: 40px; }
.social--sm svg { width: 20px; height: 20px; }
.social:hover { transform: scale(1.1); background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); }

.footer__bottom {
  margin-top: 70px;
  border-top: 1px solid var(--border-faint);
}
.footer__bottom .container {
  /* было height: 84px — под одну строку; теперь тут ещё и реквизиты,
     поэтому высота по содержимому, а не жёсткая */
  min-height: 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding-top: 24px;
  padding-bottom: 24px;
  font-size: var(--fs-cap);
  color: var(--text-muted);
  text-align: center;
}
.footer__requisites { line-height: 1.7; }

/* -------------------------------------------------------------- МОДАЛКА */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 40px;
  background: rgba(34, 31, 27, .55);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base) var(--ease), visibility var(--t-base);
}
.modal.is-open { opacity: 1; visibility: visible; }

.modal__box {
  position: relative;
  width: 705px;
  max-height: 92vh;
  overflow-y: auto;
  padding: 52px 80px 56px;
  background: var(--surface-overlay);
  border: 1px solid var(--border-faint);
  border-radius: var(--r-overlay);
  box-shadow: var(--shadow-floating);
  transform: translateY(14px);
  transition: transform 320ms var(--ease-out);
}
.modal.is-open .modal__box { transform: translateY(0); }

.modal__box--sm { width: 522px; padding: 44px 60px; text-align: center; }

.modal__close {
  position: absolute;
  top: 11px;
  right: 11px;
  width: 41px;
  height: 41px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-circle);
  cursor: pointer;
  color: var(--text);
  transition: background-color var(--t-base), color var(--t-base), border-color var(--t-base), transform var(--t-base);
}
.modal__close:hover { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); transform: rotate(90deg); }

.modal__title { font-size: 30px; line-height: 1.3; font-weight: 500; }
.modal__form { margin-top: 34px; }
.modal__form .input { height: 70px; }
.modal__msg { font-size: 20px; font-weight: 500; }

/* Кастомный селект «Я представляю...» */
.select { position: relative; }
.select__btn {
  width: 100%;
  height: 70px;
  padding: 0 70px 0 34px;
  display: flex;
  align-items: center;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-lead);
  text-align: left;
  border: var(--bw-input) solid var(--surface-light);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: border-color var(--t-base);
}
.select__btn:hover { border-color: #D8CBB9; }
.select.is-open .select__btn { border-color: var(--accent); }
.select__btn.has-value { color: var(--text); }

.select__caret {
  position: absolute;
  right: 30px;
  top: 50%;
  width: 24px;
  height: 12px;
  fill: var(--text);
  transform: translateY(-50%);
  pointer-events: none;
  transition: transform var(--t-fast), fill var(--t-base);
}
.select.is-open .select__caret,
.select__btn:hover ~ .select__caret { fill: var(--accent); }
.select.is-open .select__caret { transform: translateY(-50%) rotate(180deg); }

.select__list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 10px);
  z-index: 5;
  padding: 17px;
  background: var(--surface-overlay);
  border: 1px solid var(--border-faint);
  border-radius: var(--r-overlay);
  box-shadow: var(--shadow-menu);
  display: none;
}
.select.is-open .select__list { display: grid; gap: 26px; }

.select__opt {
  width: 100%;
  height: 70px;
  padding: 0 60px 0 20px;
  display: flex;
  align-items: center;
  position: relative;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-pill);
  color: var(--text);
  font-size: var(--fs-lead);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--t-base), color var(--t-base);
}
/* Маркер выбора — скруглённый квадрат 41×41, как в прототипе */
.select__opt::after {
  content: '';
  position: absolute;
  right: 15px;
  top: 50%;
  width: 41px;
  height: 41px;
  transform: translateY(-50%);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  transition: background-color var(--t-fast), border-color var(--t-fast);
}
.select__opt:hover { border-color: var(--accent); color: var(--accent); }
.select__opt[aria-selected="true"]::after { background: var(--accent); border-color: var(--accent); }

/* --------------------------------------------------------- КУКИ-БАННЕР */
.cookie {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 90;
  width: min(1314px, calc(100vw - 80px));
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 30px 42px;
  background: var(--surface-floating);
  border-radius: var(--r-overlay);
  box-shadow: var(--shadow-floating);
  transform: translate(-50%, 140%);
  opacity: 0;
  transition: transform 320ms var(--ease-out), opacity 250ms var(--ease);
}
/* .cookie задаёт display:flex и перебивает браузерное [hidden]{display:none} —
   без этой строки скрытый баннер остаётся в потоке, ловит Tab и читается скринридером */
.cookie[hidden] { display: none; }
.cookie.is-shown { transform: translate(-50%, 0); opacity: 1; }
.cookie__text { font-size: var(--fs-ui); line-height: 1.5; color: var(--text-muted); }
.cookie__text a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.cookie__text a:hover { color: var(--accent); }
.cookie__actions { margin-left: auto; display: flex; gap: 30px; flex: 0 0 auto; }
.cookie__actions .btn { height: 45px; min-width: 193px; padding: 0 24px; }

/* --------------------------------------------------------- УТИЛИТАРНОЕ */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ══════════════════════════════════════════════════ ДЕКОР И АНИМАЦИИ */

/* Фоновый слой. Крупные размытые кляксы давали мутный зеленоватый налёт —
   на чёрном это читается как грязь. Заменено на мелкую точечную текстуру
   плюс два едва заметных отсвета в дальних углах. */
.bg-decor {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Текстура: сетка точек, очень медленно ползёт по диагонали */
.bg-decor i {
  position: absolute;
  inset: -40px;
  background-image: radial-gradient(rgba(34, 31, 27, .06) 1px, transparent 1px);
  background-size: 32px 32px;
  animation: gridDrift 70s linear infinite;
}
@keyframes gridDrift {
  from { transform: translate(0, 0); }
  to   { transform: translate(32px, 32px); }
}

/* Летающие точки: несколько мелких кружков фирменного лайма разного размера
   и оттенка. Слой fixed, поэтому они «сопровождают» весь сайт при скролле.
   Позиция/размер/оттенок/темп заданы переменными в разметке. */
.bg-decor span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  border-radius: var(--r-circle);
  background: var(--c);
  opacity: var(--o);
  filter: blur(var(--b, 0px));
  will-change: transform;
  animation: floatDot var(--d) ease-in-out var(--dl, 0s) infinite;
}
@keyframes floatDot {
  0%   { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(22px, -30px) scale(1.12); }
  50%  { transform: translate(-14px, -52px) scale(.94); }
  75%  { transform: translate(-28px, -22px) scale(1.06); }
  100% { transform: translate(0, 0) scale(1); }
}

/* Контент всегда выше фонового слоя.
   ВАЖНО: .header сюда не добавлять — правило перебивало его z-index: 60,
   шапка оказывалась на одном уровне с main и открытое бургер-меню
   уходило под контент (main идёт позже в DOM и рисуется сверху). */
main, .footer { position: relative; z-index: 1; }
.topbar { position: relative; z-index: 2; }

/* Пока открыт оверлей (меню или модалка), body переводится в position: fixed —
   sticky-шапка при этом теряет опору и улетает за верх экрана вместе с кнопкой
   закрытия. Пришпиливаем шапку туда, где она была в момент блокировки,
   а её высоту компенсируем отступом у main, иначе контент дёрнется вверх. */
body[data-locked] .header {
  position: fixed;
  top: var(--locked-header-top, 0px);
  left: 0;
  right: 0;
}
body[data-locked] main { padding-top: var(--locked-header-h, 0px); }

/* Дозировано: два медленных пятна на первом экране, еле заметная точечная
   сетка на затемнённых секциях и мягкое проявление блоков при скролле. */

@keyframes floatSoft {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(18px, -22px); }
}

/* Пятна в гepo — внутри карточки, она с overflow: hidden */
.hero__card::before,
.hero__card::after {
  content: '';
  position: absolute;
  border-radius: var(--r-circle);
  pointer-events: none;
  z-index: 0;
}
.hero__card::before {
  width: 420px; height: 420px;
  right: -90px; top: -140px;
  background: radial-gradient(circle, rgba(158, 94, 51, .10), transparent 65%);
  animation: floatSoft 14s ease-in-out infinite;
}
.hero__card::after {
  width: 320px; height: 320px;
  left: -110px; bottom: -130px;
  background: radial-gradient(circle, rgba(158, 94, 51, .07), transparent 65%);
  animation: floatSoft 18s ease-in-out infinite reverse;
}
.hero__content, .hero__visual { position: relative; z-index: 1; }

/* Точечная сетка на затемнённых секциях */
.section--band, .section--ink { position: relative; }
.section--band::before, .section--ink::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(34, 31, 27, .06) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 0%, #000, transparent 75%);
          mask-image: radial-gradient(70% 60% at 50% 0%, #000, transparent 75%);
  pointer-events: none;
}
.section--band > .container, .section--ink > .container { position: relative; z-index: 1; }

/* Черта под заголовком убрана: тему секции держит ярлык-надзаголовок,
   два декоративных элемента подряд перегружали шапку блока */

/* Проявление при скролле — класс вешает JS, без него всё видно сразу */
/* Проявление разное по типу блока. Раньше все 13 видов элементов выезжали
   одинаково — «сдвиг на 16px за 0.4s», и страница читалась как один шаблон.
   Тип ставит JS через data-reveal, длительности и кривые у всех разные. */
.reveal { opacity: 0; transform: translateY(16px); }
.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}

/* У каждого типа свой конечный transform прописан ЯВНО. Без этого стартовое
   правило `.reveal[data-reveal="…"]` и общее `.reveal.is-in` имеют одинаковую
   специфичность (класс + атрибут против класса + класса), и побеждает то, что
   ниже по файлу, — то есть стартовое. Блок проявлялся, но так и оставался
   сдвинутым: hero уезжал влево на 22px, карточки висели ниже строки и мельче
   соседей. Правило ниже — не косметика, оно возвращает блок на место. */

/* карточка — всплывает и чуть подрастает */
.reveal[data-reveal="card"] { transform: translateY(24px) scale(.985); }
.reveal[data-reveal="card"].is-in {
  transform: none;
  transition: opacity .5s var(--ease-soft), transform .5s var(--ease-soft);
}

/* список и широкая карточка — приходят сбоку, оттуда же идёт чтение */
.reveal[data-reveal="list"] { transform: translateX(-22px); }
.reveal[data-reveal="list"].is-in {
  transform: none;
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
}

/* цифра — короткий подскок, счёт ведёт JS */
.reveal[data-reveal="number"] { transform: scale(.92); }
.reveal[data-reveal="number"].is-in {
  transform: none;
  transition: opacity .35s var(--ease), transform .45s var(--ease-snap);
}

/* крупная панель — раскрывается шторкой снизу вверх */
.reveal[data-reveal="panel"] {
  transform: none;
  clip-path: inset(14% 0 0 0 round var(--r-lg));
}
.reveal[data-reveal="panel"].is-in {
  clip-path: inset(0 0 0 0 round var(--r-lg));
  transition: opacity .5s var(--ease), clip-path .7s var(--ease-out);
}

/* заголовок секции — только проявление, без сдвига: строка не должна прыгать */
.reveal[data-reveal="head"] { transform: none; }
.reveal[data-reveal="head"].is-in { transition: opacity .45s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .bg-decor span, .bg-decor i { animation: none; }
}

/* ══════════════════════════════════════════════════════════════ АДАПТИВ
   Ступенчатый, а не резиновый: на каждом брейкпоинте своя фиксированная
   шкала шрифтов, свои отступы и своё число колонок. Между ступенями
   тянется только ширина контейнера, кегли и раскладка не «плывут».

   1440+  базовый десктоп        1280–1439  плотный десктоп
   1024–1279  узкий десктоп      768–1023   планшет (бургер, 2 колонки)
   576–767   узкий планшет (1 колонка)
   375–575   мобильная версия
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────── 1280–1439: плотный десктоп */
@media (max-width: 1439px) {
  :root {
    --fs-h1: 40px; --fs-h2: 40px; --fs-h4: 30px;
    --fs-display: 56px; --fs-price: 42px;
    --section-pt: 88px; --section-pb: 100px;
  }
  .hero__card { grid-template-columns: minmax(0, 1fr) minmax(320px, 520px); gap: 44px; padding: 52px 56px; }
  .step { padding-left: 320px; }
  .step__num { font-size: 156px; left: 30px; }
  .wide-card { padding: 34px 170px 34px 52px; }
  .metric { padding: 34px 34px; }
}

/* ──────────────────────────────────────────── 1024–1279: узкий десктоп */
@media (max-width: 1279px) {
  :root {
    --fs-h1: 38px; --fs-h2: 36px; --fs-h3: 26px; --fs-h4: 28px;
    --fs-display: 50px; --fs-price: 38px;
    --pad-x: 32px; --grid-gap: 24px;
    --section-pt: 80px; --section-pb: 92px;
  }
  .header__inner { height: 100px; gap: 24px; }
  .nav { gap: 26px; margin-left: 16px; }
  .header__phone { font-size: 19px; }
  .header .btn--primary { height: 54px; padding: 0 26px; font-size: 14px; }

  .hero__card { padding: 44px 44px; gap: 36px; }

  .expert { gap: 56px; }
  .faq { max-width: 100%; }
  .footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 380px) minmax(0, 320px); gap: 40px; }
}

/* ── 1280–1365: шапка ещё горизонтальная, но уплотнённая.
   Замер: полному меню нужно 1262px, на 1280 доступно 1200 — без уплотнения
   кнопка сжимается и текст ломается в три строки. */
@media (max-width: 1365px) {
  .header__inner { gap: 20px; }
  .nav { gap: 18px; margin-left: 12px; }
  .nav a { font-size: 15px; }
  .header__phone { font-size: 17px; }
  .header .btn--primary { height: 52px; padding: 0 20px; font-size: 13px; }
  .logo { width: 146px; }
}

/* ══════════════════════ ≤1279: шапка сворачивается в бургер
   Ниже этого порога горизонтальное меню перестаёт помещаться физически */
@media (max-width: 1279px) {
  /* backdrop-filter делает шапку containing block для fixed-потомков —
     из-за этого панель меню считала высоту от шапки, а не от экрана */
  .header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg); }
  .header__inner { height: 84px; gap: 16px; }
  .logo { width: 164px; }
  .burger { display: grid; }
  .header__menu {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(360px, 88vw);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 26px;
    padding: 104px 28px 40px;
    background: var(--surface-overlay);
    border-left: 1px solid var(--border-faint);
    box-shadow: var(--shadow-floating);
    transform: translateX(101%);
    transition: transform var(--t-base) ease-in-out;
    overflow-y: auto;
    z-index: 70;
  }
  .header__menu.is-open { transform: translateX(0); }
  .nav { flex-direction: column; align-items: flex-start; gap: 20px; margin: 0; }
  .nav a { font-size: 20px; }
  .header__phone { margin: 0; font-size: 22px; }
  .header__menu .btn--primary { width: 100%; height: 56px; padding: 0 24px; font-size: var(--fs-btn); }
  /* в выдвижном меню по иконке попадают пальцем — возвращаем полный размер */
  .header__social { gap: 14px; }
  .header__menu .social--sm { width: 52px; height: 52px; }
  .header__menu .social--sm svg { width: 24px; height: 24px; }
}

/* ═══════════════════════════════════════════ ≤1023: планшет и телефон
   Здесь шапка переключается на бургер, а все трёхколоночные сетки — на две */
@media (max-width: 1023px) {
  :root {
    --fs-h1: 34px; --fs-h2: 32px; --fs-h3: 24px; --fs-h4: 26px;
    --fs-display: 44px; --fs-price: 34px;
    --fs-lead: 17px; --fs-body: 16px;
    --section-pt: 68px; --section-pb: 76px;
  }

  /* Первый экран в одну колонку */
  .hero { padding-top: 40px; }
  .hero__card { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 40px 36px; min-height: 0; }
  .hero__visual { order: 2; }
  .hero__title { max-width: none; }
  .hero__cta .btn { max-width: none; }
  .hero__card::before { width: 300px; height: 300px; right: -70px; top: -110px; }
  .hero__card::after  { width: 220px; height: 220px; }

  /* Сетки: три колонки → две */
  .niches-grid, .cases-grid, .plans-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan--featured { margin-top: 0; min-height: 0; }
  .plan__flag { top: 0; }

  /* Широкие карточки: иконка уходит наверх, длинный правый отступ не нужен */
  .wide-card { padding: 28px; }
  /* иконка встаёт первой и по центру, за ней заголовок и подводка */
  .wide-card { display: flex; flex-direction: column; }
  .wide-card__icon {
    position: static;
    transform: none;
    order: -1;
    width: 64px; height: 64px;
    margin: 0 auto 20px;
  }
  .wide-card__icon svg { width: 30px; height: 30px; }
  .wide-card__title { text-align: center; }
  .wide-card__why { text-align: center; }

  /* Шаги: номер и плашка иконки стояли друг над другом и спорили за внимание.
     Номер уходит в угол карточки полупрозрачным водяным знаком (заливка, без
     обводки — контур на такой прозрачности выглядит грязно), единственным
     заметным элементом сверху остаётся иконка. */
  .step { padding: 28px; overflow: hidden; }
  .step__icon {
    /* relative, а не static: нужен z-index поверх водяного знака.
       Обязательно гасим top/right/transform от абсолютного десктопного
       варианта — иначе right:56px уводит плашку за левый край карточки. */
    position: relative;
    z-index: 1;
    top: auto;
    right: auto;
    transform: none;
    width: 58px; height: 58px;
    margin-bottom: 18px;
  }
  .step__icon svg { width: 28px; height: 28px; }
  .step__num {
    top: -10px;
    right: 8px;
    left: auto;
    transform: none;
    font-size: 124px;
    line-height: 1;
    font-weight: 700;
    color: rgba(158, 94, 51, .10);
    -webkit-text-stroke: 0;
    z-index: 0;
  }
  .step:hover .step__num { color: rgba(158, 94, 51, .16); }
  /* контент поверх водяного знака */
  .step__title, .step .bullets { position: relative; z-index: 1; }

  .metric { padding: 28px 26px; }
  .expert { grid-template-columns: minmax(0, 1fr); gap: 40px; justify-items: center; text-align: left; }
  .expert::before { left: 50%; transform: translateX(-50%); }
  .expert__list { width: 100%; }
  .cta-card { padding: 48px 36px 44px; }
  .form { max-width: 100%; }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
  .modal__box { width: min(560px, 100%); padding: 44px 36px; }
}

/* ───────────────────────────────────────── 576–767: узкий планшет */
@media (max-width: 767px) {
  :root {
    --fs-h1: 30px; --fs-h2: 28px; --fs-h3: 22px; --fs-h4: 24px;
    --fs-display: 40px; --fs-price: 32px;
    --pad-x: 24px; --grid-gap: 16px;
    --section-pt: 56px; --section-pb: 64px;
  }
  .topbar { display: none; }
  .section-head { margin-bottom: 40px; }

  /* На мелком экране полупрозрачная поверхность почти сливалась с фоном:
     поднимаем светлоту и добавляем еле заметную кромку для разделения.
     .cta-card сюда не входит: она чернильная, и всё её содержимое — заголовок,
     поля, кнопка, чекбоксы — покрашено в белое «по тёмному». От осветления
     фона форма пропадала целиком: белое по белому. */
  .niche, .case, .plan, .wide-card, .step, .metrics, .hero__card {
    background: var(--surface-glass);
    border-color: var(--border-faint);
  }
  .niche:hover, .case:hover, .plan:hover, .wide-card:hover, .step:hover { border-color: var(--accent); }

  .niches-grid, .cases-grid, .plans-grid { grid-template-columns: minmax(0, 1fr); }

  /* Показатели: вместо трёх высоких блоков — компактные строки
     «подпись слева, число справа». Занимают втрое меньше высоты. */
  .metrics { grid-template-columns: minmax(0, 1fr); margin-top: 36px; max-width: none; }
  .metric + .metric { border-left: 0; border-top: 1px solid var(--border-faint); }
  .metric {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    text-align: left;
  }
  .metric::before { display: none; }
  .metric__label { margin: 0; }
  .metric__value { margin: 0; font-size: 30px; }

  .cases-grid { padding-top: 30px; }
  .case { padding: 52px 26px 26px; }
  .case__badge { height: 60px; padding: 0 26px; font-size: 20px; top: -30px; left: 22px; }

  .footer { padding-top: 56px; }
  .footer__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .footer__bottom { margin-top: 44px; }
  .footer__bottom .container { height: auto; padding-block: 22px; text-align: center; }

  /* Куки-баннер: кнопки под текстом, во всю ширину */
  .cookie { flex-direction: column; align-items: stretch; gap: 16px; padding: 22px; bottom: 16px; width: calc(100vw - 32px); }
  .cookie__actions { margin: 0; }
  .cookie__actions .btn { flex: 1 1 0; min-width: 0; }
}

/* ══════════════════════════════════ 375–575: мобильная версия */
@media (max-width: 575px) {
  :root {
    --fs-h1: 27px; --fs-h2: 25px; --fs-h3: 20px; --fs-h4: 21px;
    --fs-display: 36px; --fs-price: 28px;
    --fs-lead: 16px; --fs-body: 15px; --fs-ui: 15px; --fs-btn: 14px;
    --pad-x: 16px; --grid-gap: 14px;
    --section-pt: 44px; --section-pb: 52px;
  }
  .header__inner { height: 68px; }
  .logo { width: 132px; }
  .header__menu { width: 100%; padding: 92px 20px 32px; border-left: 0; }

  .hero { padding: 24px 0 var(--section-pb); }
  .hero__card { padding: 26px 20px 28px; gap: 24px; border-radius: var(--r-card); }

  .hero__lead { margin-top: 16px; }
  .hero__stats { gap: 12px; margin-top: 26px; }
  .stat { flex: 1 1 calc(50% - 6px); max-width: none; min-height: 0; padding: 18px 16px; }
  .stat__value { font-size: 34px; }
  .stat__label { font-size: 13px; }
  .hero__cta { margin-top: 28px; }
  .hero__cta .btn { width: 100%; height: 60px; padding: 0 16px; }

  .niche { padding: 22px 20px 18px; }
  .niche__price { font-size: 16px; padding: 8px 16px; }
  .wide-card { padding: 22px 20px; }
  .bullets li { padding-left: 20px; }
  .metric { padding: 22px 20px; }
  .step { padding: 22px 20px; }
  .step__num { font-size: 96px; top: -6px; right: 4px; }
  .step__icon { width: 52px; height: 52px; margin-bottom: 14px; }
  .step__icon svg { width: 24px; height: 24px; }

  .case { padding: 46px 20px 22px; }
  .case__badge { height: 52px; padding: 0 20px; font-size: 18px; top: -26px; left: 16px; }
  .case__client { font-size: 18px; }

  .plan { padding: 28px 22px 24px; min-height: 0; }
  .plan__title { min-height: 0; }
  .plan__cta .btn, .case__cta .btn { width: 100%; }

  .expert__item { grid-template-columns: 54px minmax(0, 1fr); gap: 20px; }
  .expert__icon { width: 54px; height: 54px; }
  .expert__icon svg { width: 24px; height: 24px; }
  .expert__item p { font-size: 16px; }
  .expert__list { gap: 28px; }

  .faq__head { gap: 20px; min-height: 72px; padding: 16px 0; }
  .faq__q { font-size: 17px; }
  .faq__body-inner { padding-right: 0; padding-bottom: 22px; }

  .cta-card { padding: 32px 20px 30px; border-radius: var(--r-card); }
  .input, .select__btn { height: 60px; padding-left: 24px; border-width: 3px; font-size: 16px; }
  .select__btn { padding-right: 56px; }
  .select__caret { right: 22px; }
  .select__opt { height: 60px; padding: 0 56px 0 18px; font-size: 16px; }
  .select__opt::after { width: 34px; height: 34px; right: 12px; }
  .field-error { padding: 0 24px; }
  .btn--lg { height: 62px; font-size: 15px; padding: 0 20px; }

  .modal { padding: 16px; }
  .modal__box { padding: 44px 20px 28px; max-height: 88vh; }
  .modal__box--sm { padding: 40px 20px; }
  .modal__title { font-size: 21px; }
  .modal__close { top: 8px; right: 8px; width: 38px; height: 38px; }

  .footer { padding-top: 44px; }
  .footer__docs a { max-width: none; }
  .social { width: 48px; height: 48px; }

  .cookie { padding: 18px; gap: 14px; width: calc(100vw - 24px); bottom: 12px; }
  .cookie__text { font-size: 14px; }
  .cookie__actions { flex-direction: column; }
  .cookie__actions .btn { width: 100%; }

  /* Мелкие декоративные слои на телефоне только шумят */
  .hero__card::before, .hero__card::after { display: none; }
  /* Летающие кружки оставляем — они дешёвые и композитятся на GPU.
     Убираем только два размытых: blur на телефоне бьёт по отрисовке. */
  .bg-decor span:nth-of-type(3), .bg-decor span:nth-of-type(8) { display: none; }
  .section--band::before { background-size: 26px 26px; }
}

/* ───────────────────────────── 375–400: самые узкие телефоны */
@media (max-width: 400px) {
  :root { --fs-h1: 25px; --fs-h2: 23px; --fs-display: 32px; }
  .hero__stats { flex-direction: column; }
  .stat { flex: 1 1 auto; }
  .header__phone { font-size: 20px; }
}

/* ══════════════════════════════════════════ ПРАВКИ ПО АУДИТУ UI/UX PRO MAX
   Всё ниже добавлено по прогону скилла ui-ux-pro-max: доступность форм,
   размеры тач-целей, видимый фокус, табличные цифры. */

/* --------------------------------------------------- Пропуск навигации */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1000;
  padding: 12px 20px;
  border-radius: var(--r-pill);
  background: var(--primary);
  color: var(--text-on-primary);
  font-size: var(--fs-btn);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--t-base) var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }

/* ------------------------------------------------- Табличные цифры
   Иначе колонки чисел в метриках, ценах и кейсах «пляшут» по ширине */
.stat__value,
.metric__value,
.plan__price,
.niche__price,
.case__block p { font-variant-numeric: tabular-nums; }

/* ------------------------------- Отклик на тап без 300-мс задержки */
a, button, input, label, summary, [role="button"] { touch-action: manipulation; }

/* ══════════════════════════════════════════════ ПОЛЕ С ПЛАВАЮЩЕЙ ПОДПИСЬЮ
   Было: только placeholder — начал печатать, и подпись поля исчезла.
   Стало: подпись живёт всегда, при фокусе/заполнении уезжает наверх. */
.field { position: relative; }

.input {
  /* текст съезжает вниз, чтобы освободить строку под уехавшую подпись */
  padding: 26px 34px 0;
}
/* подсказку формата показываем только в фокусе, иначе она спорит с подписью */
.input::placeholder { color: transparent; }
.input:focus::placeholder { color: var(--text-muted-lg); }

.field__label {
  position: absolute;
  left: 39px;
  top: 50%;
  transform: translateY(-50%);
  transform-origin: left center;
  color: var(--text-muted);
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  transition: transform var(--t-base) var(--ease), color var(--t-base);
}
.input:focus ~ .field__label,
.input:not(:placeholder-shown) ~ .field__label {
  /* -28, а не -32: при -32 подпись вставала в 1px от рамки поля */
  transform: translateY(-28px) scale(.72);
}
.input:focus ~ .field__label { color: var(--accent); }
.input[aria-invalid="true"] ~ .field__label { color: var(--danger); }

.field__req { margin-left: 4px; color: var(--accent); }
.input[aria-invalid="true"] ~ .field__label .field__req { color: var(--danger); }

/* Видимый фокус у полей: единственное место, где кольца не было вообще —
   клавиатурой заходишь в поле и не понимаешь, где находишься */
.input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ------------------------------------------- Тач-цель у согласий
   Сам чекбокс 20px, но нажимать нужно по всей строке: доводим
   кликабельную область до 44px по высоте */
.agree {
  min-height: 44px;
  align-items: center;
  padding: 4px 0;
}
.agree input[type="checkbox"] { width: 24px; height: 24px; }

/* Состояние отправки у кнопки уже реализовано текстом «Отправляем…» +
   disabled в main.js; спиннер поверх этого был бы лишним шумом. */

/* Мобильные поправки к блоку выше. Лежат в самом конце файла намеренно:
   базовые правила аудита идут после медиазапросов, поэтому их мобильные
   переопределения обязаны стоять ещё ниже, иначе не сработают. */
@media (max-width: 575px) {
  /* поле ниже (60px) и уже — подпись уезжает на меньшее расстояние */
  .input { padding: 22px 24px 0; }
  .field__label { left: 27px; font-size: 16px; }
  .input:focus ~ .field__label,
  .input:not(:placeholder-shown) ~ .field__label { transform: translateY(-24px) scale(.78); }
  .skip-link { font-size: 14px; padding: 10px 16px; }
}

/* Пункты выехавшего меню и телефон: было 32px по высоте при норме 44 */
@media (max-width: 1279px) {
  .header__menu .nav a,
  .header__menu .header__phone {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}

/* Оставшиеся тач-цели ниже 44px: ссылки документов и контактов в подвале
   стояли 29–32px, кнопка пропуска навигации — 42px */
.skip-link { padding: 14px 22px; }
.footer__docs a,
.footer__contacts a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Крестик модалки был 38–41px при норме 44 */
.modal__close { width: 44px; height: 44px; }
@media (max-width: 575px) { .modal__close { width: 44px; height: 44px; } }

/* Строчные ссылки внутри предложений (верхняя полоса, куки-баннер):
   вертикальный padding у inline-элемента увеличивает зону нажатия,
   не влияя на высоту строки — раскладка не меняется */
.topbar a,
.cookie__text a { padding: 11px 0; }

@media (max-width: 575px) {
  /* Куки-баннер: на ≤767 у кнопок стоит flex: 1 1 0 для раскладки в строку,
     но здесь контейнер становится колонкой — и flex-basis: 0 начинает
     относиться уже к высоте, схлопывая кнопки до высоты строки (24px) */
  .cookie__actions .btn { flex: 0 0 auto; height: 48px; }
}

/* Карточки на светлой теме: белое на почти белом без кромки не читается,
   поэтому тонкая граница + очень мягкая тень, чтобы они всплывали над фоном */
.hero__card, .niche, .wide-card, .step, .case, .plan, .cta-card {
  box-shadow: var(--shadow-card);
}


/* ═══════════════════════════════════════════ ТЁМНЫЕ СЕКЦИИ И ПАНЕЛИ ══════
   Вся страница была одной светлоты — глазу не за что зацепиться.
   Две перебивки чернилами: «Подход» с показателями и финальный призыв.
   На тёмном своя пара акцентов: глина уходит в 2.9:1, поэтому берём
   осветлённые --accent-on-dark и --accent-2-on-dark. */
.section--ink {
  background: var(--primary);
  color: var(--text-muted-on-dark);
}
.section--ink .section-title,
.section--ink .wide-card__title,
.section--ink .metric__label { color: #FFFFFF; }
.section--ink .section-sub,
.section--ink .wide-card__why,
.section--ink .bullets li { color: var(--text-muted-on-dark); }
/* «Почему важна:» набрано <b> с тёмным цветом для светлой темы — на чернилах
   давало контраст 1.24, то есть подпись просто пропадала. */
.section--ink .wide-card__why b { color: #FFFFFF; }
.section--ink .section-head__eyebrow { color: var(--accent-on-dark); }
.section--ink .section-title .accent { color: var(--accent-on-dark); }
.section--ink .metric__value { color: var(--accent-2-on-dark); }
.section--ink .bullets li::before { background: var(--accent-2-on-dark); }

/* Карточки внутри тёмной секции: не белые плиты, а полупрозрачные грани */
.section--ink .wide-card {
  background: rgba(255, 255, 255, .045);
  border-color: rgba(255, 255, 255, .10);
  box-shadow: none;
}
.section--ink .wide-card:hover {
  background: rgba(255, 255, 255, .075);
  border-color: rgba(224, 169, 109, .45);
}
.section--ink .wide-card__icon {
  background: rgba(110, 155, 142, .18);
  border-color: rgba(110, 155, 142, .32);
  color: var(--accent-2-on-dark);
}
.section--ink .wide-card:hover .wide-card__icon {
  background: rgba(110, 155, 142, .28);
  border-color: rgba(110, 155, 142, .5);
}
.section--ink .metric {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .10);
}
/* точечная сетка на чернильном — светлая, иначе её не видно */
.section--ink::before { background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px); }

/* Финальный призыв: чернильная панель на светлом фоне */
.cta-card__title { color: #FFFFFF; }
.cta-card__title .accent { color: var(--accent-on-dark); }
.cta-card__sub { color: var(--text-muted-on-dark); }

/* ══════════════════════════════ ПОКАЗАТЕЛИ: ПЕРЕРАБОТАННЫЕ БЛОКИ ══════════

   Первый экран. Было: две белые карточки на белой же карточке героя —
   читались как пустые коробки, которые держит только серая рамка.
   Стало: чистая типографика с вертикальным разделителем; вес держат
   само число и капслок подписи, лишних плоскостей нет. */
.hero__stats {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  margin-top: 44px;
}
.stat {
  flex: 0 1 auto;
  max-width: none;
  min-height: 0;
  padding: 2px 46px 2px 0;
  background: none;
  border: 0;
  border-radius: 0;
  transition: none;
}
.stat + .stat {
  padding: 2px 0 2px 46px;
  border-left: 1px solid var(--border-subtle);
}
.stat:hover { border-color: var(--border-subtle); }
.stat__value { font-size: 62px; letter-spacing: -.01em; }
.stat__label {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
}

/* Сводка результатов. Тёмная плита во всю ширину давила и съедала пол-экрана.
   Заменена тремя лёгкими плашками-таблетками: та же форма, что у чипов
   «CPL от 1 500 ₽» в карточках ниш, поэтому блок не вводит новую сущность
   в язык страницы. Высота с 325px до ~72px. */
.metrics {
  display: flex;
  gap: 14px;
  max-width: none;
  margin: 52px 0 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.metric {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 20px 30px;
  text-align: left;
  background: var(--surface-soft);
  border: 1px solid var(--border-faint);
  border-radius: var(--r-pill);
  transition: border-color var(--t-base), background-color var(--t-base);
}
.metric + .metric { border-left: 1px solid var(--border-faint); border-top: 0; }
.metric:hover { background: #F4E7DA; border-color: rgba(158, 94, 51, .35); }
.metric::before { display: none; }   /* засечка была декорацией ни о чём */

.metric__value {
  order: -1;                          /* число первым: «25-40% снижаем CPL» */
  margin: 0;
  font-size: 32px;
  line-height: 1;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}
.metric__label {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
}

@media (max-width: 1023px) {
  .metric { padding: 18px 24px; gap: 10px; }
  .metric__value { font-size: 27px; }
  .metric__label { font-size: 12px; }
}

@media (max-width: 767px) {
  /* три таблетки в ряд не помещаются — ставим в столбик */
  .metrics { flex-direction: column; gap: 10px; margin-top: 34px; }
  .metric,
  .metric + .metric { border: 1px solid var(--border-faint); padding: 15px 24px; }
  .metric__value { font-size: 26px; }
}

@media (max-width: 1279px) {
  .stat { padding-right: 34px; }
  .stat + .stat { padding-left: 34px; }
}
@media (max-width: 1023px) {
  .stat__value { font-size: 50px; }
}

@media (max-width: 767px) {
  /* общий буст карточек делает поверхности белыми — тёмную плашку возвращаем */
  .metrics { background: var(--primary); border-color: transparent; }
  .metric + .metric { border-top-color: rgba(255, 255, 255, .13); }
  .metric__value { margin: 0; }
}

@media (max-width: 575px) {
  /* на телефоне разделитель между показателями режет узкую колонку —
     возвращаем их в две ячейки с песочной подложкой */
  /* flex-direction нужен явно: в блоке ≤400 показатели раньше вставали
     в столбик, а с песочными ячейками они спокойно помещаются в ряд */
  .hero__stats { gap: 12px; flex-direction: row; }
  .stat {
    /* min-width:0 обязателен: иначе капслок «СНИЖЕНИЕ CPL» шире половины
       контейнера и не даёт двум ячейкам встать в один ряд */
    /* 1 1 0, а не calc(50% - gap): при 375px расчёт попадал ровно на границу
       и от округления вторая ячейка срывалась на новую строку */
    flex: 1 1 0;
    min-width: 0;
    padding: 14px 16px;
    background: var(--surface-soft);
    border-radius: var(--r-card);
  }
  .stat + .stat { padding: 14px 16px; border-left: 0; }
  .stat__value { font-size: 32px; }
  .stat__label { margin-top: 8px; font-size: 11px; letter-spacing: .06em; }
}


/* ═══════════════════════ ОЖИВЛЕНИЕ КОЛЛАЖА ПЕРВОГО ЭКРАНА ═══════════════════
   Каждое окно качается в своей фазе, а внутренности «набираются» один раз при
   загрузке: линия графика рисуется, полосы наполняются, кольца прокручиваются,
   метки на карте выскакивают по очереди. Всё на transform/opacity и
   stroke-dashoffset — эти свойства не вызывают пересчёт раскладки. */

/* окна: медленное независимое парение */
.win { transform-box: fill-box; transform-origin: center; will-change: transform; }
.win--1 { animation: winFloat 7.5s  ease-in-out infinite; }
.win--2 { animation: winFloat 9s    ease-in-out -2.2s infinite; }
.win--3 { animation: winFloat 8.2s  ease-in-out -4.4s infinite; }
.win--4 { animation: winFloat 10s   ease-in-out -1.1s infinite; }
@keyframes winFloat {
  0%, 100% { transform: translateY(0)    rotate(0deg); }
  50%      { transform: translateY(-7px) rotate(.35deg); }
}

/* график: линия прочерчивается, заливка проявляется следом, точки всплывают */
.dash-line {
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  animation: drawLine 1.5s var(--ease-out) .35s forwards;
}
@keyframes drawLine { to { stroke-dashoffset: 0; } }

.dash-area { opacity: 0; animation: fadeIn .8s ease .9s forwards; }
@keyframes fadeIn { to { opacity: 1; } }

.dash-dots circle {
  transform-box: fill-box; transform-origin: center;
  opacity: 0; transform: scale(.2);
  animation: popIn .45s var(--ease-out) forwards;
}
.dash-dots circle:nth-child(1) { animation-delay: 1.1s; }
.dash-dots circle:nth-child(2) { animation-delay: 1.3s; }
.dash-dots circle:nth-child(3) { animation-delay: 1.5s; }
@keyframes popIn { to { opacity: 1; transform: scale(1); } }

/* полосы: наполняются слева направо, с лесенкой по строкам */
.dash-rows .bar {
  transform-box: fill-box; transform-origin: left center;
  transform: scaleX(0);
  animation: fillBar 1.1s var(--ease-out) forwards;
}
.dash-rows .row:nth-child(1) .bar { animation-delay: .45s; }
.dash-rows .row:nth-child(2) .bar { animation-delay: .60s; }
.dash-rows .row:nth-child(3) .bar { animation-delay: .75s; }
.dash-rows .row:nth-child(4) .bar { animation-delay: .90s; }
@keyframes fillBar { to { transform: scaleX(1); } }

/* кольца: прокручиваются до своей доли */
.dash-rings .ring { stroke-dasharray: 151; stroke-dashoffset: 151; }
.dash-rings g:nth-child(1) .ring { animation: ring1 1.3s var(--ease-out) .8s  forwards; }
.dash-rings g:nth-child(2) .ring { animation: ring2 1.3s var(--ease-out) .95s forwards; }
.dash-rings g:nth-child(3) .ring { animation: ring3 1.3s var(--ease-out) 1.1s forwards; }
.dash-rings g:nth-child(4) .ring { animation: ring4 1.3s var(--ease-out) 1.25s forwards; }
@keyframes ring1 { to { stroke-dashoffset: 53; } }   /* ~65 % */
@keyframes ring2 { to { stroke-dashoffset: 78; } }   /* ~48 % */
@keyframes ring3 { to { stroke-dashoffset: 38; } }   /* ~75 % */
@keyframes ring4 { to { stroke-dashoffset: 91; } }   /* ~40 % */

/* метки на карте: выскакивают по очереди и потом еле заметно дышат */
.dash-pins path {
  transform-box: fill-box; transform-origin: center bottom;
  opacity: 0; transform: translateY(-7px) scale(.5);
  animation: pinDrop .5s var(--ease-out) forwards, pinPulse 3.4s ease-in-out infinite;
}
.dash-pins path:nth-child(1) { animation-delay: 1.0s, 2.2s; }
.dash-pins path:nth-child(2) { animation-delay: 1.15s, 2.5s; }
.dash-pins path:nth-child(3) { animation-delay: 1.3s, 2.8s; }
.dash-pins path:nth-child(4) { animation-delay: 1.45s, 3.1s; }
.dash-pins path:nth-child(5) { animation-delay: 1.6s, 3.4s; }
@keyframes pinDrop  { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes pinPulse { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-2px) scale(1.06); } }

/* при отключённой анимации всё показываем в финальном состоянии */
@media (prefers-reduced-motion: reduce) {
  .win { animation: none; }
  .dash-line  { stroke-dashoffset: 0; animation: none; }
  .dash-area  { opacity: 1; animation: none; }
  .dash-dots circle, .dash-pins path { opacity: 1; transform: none; animation: none; }
  .dash-rows .bar { transform: scaleX(1); animation: none; }
  .dash-rings g:nth-child(1) .ring { stroke-dashoffset: 53; animation: none; }
  .dash-rings g:nth-child(2) .ring { stroke-dashoffset: 78; animation: none; }
  .dash-rings g:nth-child(3) .ring { stroke-dashoffset: 38; animation: none; }
  .dash-rings g:nth-child(4) .ring { stroke-dashoffset: 91; animation: none; }
}

/* карта: точки проявляются волной слева направо */
.dash-map circle {
  transform-box: fill-box; transform-origin: center;
  opacity: 0; transform: scale(.3);
  animation: mapDot .5s var(--ease-out) forwards;
  animation-delay: calc(.55s + var(--dx) * 22ms);
}
@keyframes mapDot { to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .dash-map circle { opacity: 1; transform: none; animation: none; }
}

/* Форма на чернильной панели: прежние песочные обводки на тёмном пропадали */
.cta-card .input {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .16);
  color: #FFFFFF;
}
.cta-card .input:focus { border-color: var(--accent-on-dark); background: rgba(255, 255, 255, .08); }
.cta-card .field__label { color: var(--text-muted-on-dark); }
.cta-card .input:focus + .field__label,
.cta-card .input:not(:placeholder-shown) + .field__label { color: var(--accent-on-dark); }
.cta-card .agree__text { color: var(--text-muted-on-dark); }
.cta-card .agree:hover .agree__text { color: #FFFFFF; }
.cta-card .agree__text a { color: #FFFFFF; }
.cta-card .agree__text a:hover { color: var(--accent-on-dark); }
.cta-card .agree input[type="checkbox"] { border-color: rgba(255, 255, 255, .32); background: rgba(255, 255, 255, .05); }
.cta-card .agree input[type="checkbox"]:hover { border-color: var(--accent-on-dark); }
.cta-card .agree input[type="checkbox"]:checked { background: var(--accent-on-dark); border-color: var(--accent-on-dark); }
.cta-card .field__req { color: var(--accent-on-dark); }
/* главное действие на тёмном не может быть чернильным */
.cta-card .btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 10px 26px rgba(158, 94, 51, .32);
}
.cta-card .btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.cta-card .btn--primary:disabled { background: rgba(255, 255, 255, .14); border-color: transparent; color: rgba(255, 255, 255, .45); box-shadow: none; }

/* ═════════════════════════════════════ РИТМ СЕТОК: ЛОМАЕМ ОДИНАКОВОСТЬ ══
   Три равные карточки в ряд, повторённые в нишах, кейсах и тарифах, —
   самый узнаваемый признак сборки по шаблону. Даём блокам разный вес.
   Всё живёт только на десктопе: ниже 1024 сетка возвращается к колонке. */
@media (min-width: 1024px) {
  /* первая ниша крупнее прочих: ряд перестаёт читаться как список плиток.
     Внутренности не перестраиваем — карточка просто получает вес: два
     столбца, крупный радиус, тёплую подложку и более крупный заголовок */
  .niches-grid .niche:first-child {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 26px;
    padding: 40px 40px 30px;
    border-radius: var(--r-lg);
    background: linear-gradient(135deg, #FFFFFF 0%, var(--surface-soft) 100%);
    box-shadow: var(--shadow-raised);
  }
  /* содержимое ложится строкой «знак — название — цена», иначе правая
     половина широкой карточки осталась бы пустой */
  .niches-grid .niche:first-child .niche__icon {
    width: 64px; height: 64px; margin-bottom: 0;
  }
  .niches-grid .niche:first-child .niche__icon svg { width: 32px; height: 32px; }
  .niches-grid .niche:first-child .niche__title { font-size: var(--fs-h4); }
  .niches-grid .niche:first-child .niche__price { margin: 0; align-self: center; }
  .niches-grid .niche:first-child .niche__cta { grid-column: 1 / -1; margin-top: 30px; }

  /* Средний тариф выделяем цветом, а не сдвигом: подъём над соседями читался
     не как акцент, а как съехавшая карточка. Верх у всех трёх общий. */
  .plan--featured {
    margin-top: 0;
    min-height: 780px;
    background: var(--primary);
    border-color: transparent;
    box-shadow: var(--shadow-raised);
  }
  .plan--featured .plan__title { color: #FFFFFF; }
  .plan--featured .bullets li { color: var(--text-muted-on-dark); }
  .plan--featured .bullets li::before { background: var(--accent-2-on-dark); }
  .plan--featured .plan__price { color: var(--accent-on-dark); }
  .plan--featured .plan__badge { background: var(--accent-on-dark); color: var(--primary); }
  /* Главная кнопка тарифа чернильная — на чернильной карточке она пропадала.
     Внутри выделенного тарифа переводим её в глину. */
  .plan--featured .btn--primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--text-on-accent);
    box-shadow: 0 10px 26px rgba(158, 94, 51, .34);
  }
  .plan--featured .btn--primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
  }

  /* Кейсы стоят ровным рядом. Раньше первый был выше, а третий сдвинут вниз
     на 34px — задумывалось как живая сетка, читалось как разъехавшаяся. */
  .cases-grid .case:first-child { min-height: 0; }
  .cases-grid .case:last-child  { margin-top: 0; }
}

/* ─────────────────────────────────────────── МИКРО-ВЗАИМОДЕЙСТВИЯ ──────
   Отклик был один на всё: смена цвета и подъём на 4px. Добавляем короткие
   ответы на действие — их читает рука, а не глаз. */

/* кнопку при нажатии «продавливаем» */
.btn:active { transform: translateY(1px) scale(.985); }
.btn { transition: background-color var(--t-base), border-color var(--t-base),
                   color var(--t-base), transform .12s var(--ease-out), box-shadow var(--t-base); }

/* стрелка в ссылке-действии уезжает и возвращает хвост */
.niche__link svg { transition: transform .32s var(--ease-snap); }
.niche:hover .niche__link svg { transform: translateX(6px); }

/* поле формы: обводка и подпись отвечают на фокус, рамка чуть утолщается */
.input { transition: border-color var(--t-base), box-shadow var(--t-base), background-color var(--t-base); }
.input:focus { box-shadow: 0 0 0 4px var(--accent-tint); }
.cta-card .input:focus { box-shadow: 0 0 0 4px rgba(224, 169, 109, .18); }

/* согласие: рамка чекбокса подрастает под курсором */
.agree input[type="checkbox"] { transition: background-color var(--t-fast), border-color var(--t-fast), transform var(--t-fast); }
.agree:hover input[type="checkbox"] { transform: scale(1.12); }

/* карточка шага: номер оживает вместе с карточкой */
.step__num { transition: color var(--t-base), -webkit-text-stroke-color var(--t-base), transform var(--t-slow) var(--ease-out); }
.step:hover .step__num { transform: translateY(-50%) translateX(6px); }

@media (prefers-reduced-motion: reduce) {
  .btn:active, .niche:hover .niche__link svg,
  .agree:hover input[type="checkbox"], .step:hover .step__num { transform: none; }
  .reveal, .reveal.is-in { transition: none; transform: none; clip-path: none; opacity: 1; }
}

/* Ловушка для ботов. Не display:none — часть автозаполнялок такие поля
   пропускает; убираем за пределы экрана, от скринридера скрыто атрибутом. */
.trap {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Сообщение об отказе сервера под кнопкой формы */
.form-note {
  margin-top: 14px;
  font-size: var(--fs-cap);
  line-height: 1.45;
  color: var(--danger);
  text-align: center;
}
.cta-card .form-note { color: #F0B4AF; }   /* на чернильной панели кирпичный не читается */