/* ДЕВЯТЬ — полосы страницы, один в один с оригиналом на Тильде (решение Максима
   04.09.2026). Каждое число снято с эталона (эталон/1440-полосы.txt и разметка
   эталон/из-тильды/NN-*.html) и живёт токеном с именем роли (закон 7.6). Там, где
   число оригинала расходится с законами раздела 7, расхождение названо в комментарии
   у токена: приоритет у совпадения с оригиналом, ворота вёрстки при этом те же.

   Раскладка: десктопные числа действуют с 1200; ниже сетка перестраивается
   в 8 и 4 колонки (7.9) и берёт отступы из шкалы base.css - на 768 и 1024
   оригинал сломан (эталон/адаптив.md), копировать там нечего. */

/* ═══ Общее для полос ════════════════════════════════════════════════════ */

:root {
  /* Внутренние поля карточек оригинала, повторяются по всей странице */
  --in-20: 20px;     /* значок → текст, теги, карточка гарантии */
  --in-25: 25px;     /* поле формы → поле, текст → пары */
  --in-30: 30px;     /* поле карточки 635 и карточки формата */
  --in-50: 50px;     /* поле карточки «почему с нами», лого → меню */
}

.card { background: var(--bg); border-radius: var(--r-m) }

/* Значок с номером: 36×36, радиус 3, кегль 18 - снят с оригинала */
.num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-s);
  background: var(--accent);
  color: var(--ink-invert);
  font-size: var(--t-18);
  font-weight: 600;
  line-height: 1.55;
}

/* Надпись-тег над текстом карточки: 14/700, голубая */
.tag {
  display: block;
  color: var(--accent-soft);
  font-size: var(--t-14);
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  width: 93px;               /* бокс тега у Тильды 93 при тексте 60-79 */
}

/* Акцент внутри заголовка. На тёмной полосе берётся светлый тон:
   #206AD8 на #1C1C1C даёт 2,6 к фону, светлый #579AFF — 6,4 (порог 4,5).
   У оригинала светлый тон стоит и на БЕЛЫХ карточках тёмных полос - так и оставлено. */
.hi { color: var(--accent) }
.sec--dark .hi, .sec--black .hi, .pnt--dark .hi, .abt__pdf .hi { color: var(--accent-soft) }

/* ═══ Шапка ══════════════════════════════════════════════════════════════
   Плашка 800 (320…1120), логотип через 20 от края, меню через 50 от логотипа,
   пункты через 25, кнопка-стрелка 36×36 в 10 от правого края (2.14: ряд
   посчитан - 20+120+50+438+126+36+10 = 800). */

.hdr {
  position: fixed;
  inset: 0 0 auto;
  z-index: 90;
  height: var(--hdr-h);
  display: flex;
  align-items: center;
}
.hdr {
  --hdr-pl: 20px;          /* плашка → логотип */
  --hdr-pr: 10px;          /* кнопка → край плашки */
  --hdr-nav-gap: 25px;     /* между пунктами меню */
}
.hdr__bar {
  display: flex;
  align-items: center;
  width: var(--hdr-w);
  max-width: 100%;
  height: 56px;
  margin-inline: auto;
  padding-left: var(--hdr-pl);
  padding-right: var(--hdr-pr);
  border-radius: var(--r-m);
  background: var(--bg-dark);
  color: var(--ink-invert);
}
.hdr__logo { display: flex; align-items: center; min-height: 44px; margin-right: var(--in-50) }
.hdr__logo img { width: 120px; height: auto }
.hdr__nav { display: flex; gap: var(--hdr-nav-gap); margin-right: auto }
.hdr__nav a { font-size: var(--t-14); line-height: 1.55; white-space: nowrap; transition: color .18s ease }
.hdr__nav a:hover { color: var(--accent-soft) }
.hdr__go {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: var(--r-s);
  background: var(--accent);
  color: var(--ink-invert);
  transition: background-color .18s ease;
}
.hdr__go:hover { background: #1B5CBE }
.hdr__burger { display: none }

/* Мобильное меню */
.menu {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 100;
  width: min(280px, 82vw);
  padding: var(--s8) var(--s5) var(--s5);
  background: var(--bg-dark);
  color: var(--ink-invert);
  overflow-y: auto;
}
.menu__close { position: absolute; top: var(--s5); right: var(--s5); padding: var(--s2) }
.menu__nav { display: grid; gap: var(--s5) }
.menu__nav a { font-size: var(--t-20) }

/* ═══ 1. Первый экран, h=860 ═════════════════════════════════════════════
   Полоса-вход, стык с шапкой из ритма исключён (7.2). Фон: #1C1C1C, поверх
   WebGL-градиент оригинала (js/hero-bg.js, канвас вставляется в .liquid-gradient),
   поверх него чёрная плёнка 20 % - как у Тильды. Без JS остаётся CSS-градиент. */

.hero {
  --sec-pt: calc(var(--hdr-h) + var(--s8));
  --sec-pb: 0px;
  --hero-ttl-gap: 26px;      /* надзаголовок → заголовок: 182 → 208 (строка 200 в боксе 78) */
  --hero-ny-up: 0px;         /* антиква стоит на общей базовой линии со строкой Inter:
                                у оригинала baseline 322,0 против 322,5 - разница полпикселя.
                                Было -6, правка Максима 04.09: «так же круто» опустить к «интернете» */
  --hero-sub-gap: 124px;     /* заголовок 394 → подводка 518 */
  --hero-acts-gap: 53px;     /* подводка 568 → кнопки 621 */
  --hero-acts-x: 15px;       /* между кнопками: 410 → 425 */
  --hero-note-gap: 15px;     /* кнопка 676 → подпись 691 */
  --hero-facts-gap: 79px;    /* подписи 711 → лента 790 */
  position: relative;
  overflow: hidden;
  background: var(--bg-dark);
  color: var(--ink-invert);
}
.hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(105% 80% at 74% 16%, rgba(58, 106, 214, .20), transparent 62%),
    radial-gradient(85% 65% at 97% 72%, rgba(38, 78, 176, .16), transparent 66%),
    radial-gradient(70% 55% at 12% 88%, rgba(28, 58, 138, .12), transparent 70%);
}
.hero__bg .liquid-gradient { position: absolute; inset: 0; overflow: hidden }
.hero__bg .liquid-gradient canvas { display: block; width: 100% !important; height: 100% !important }
.hero__bg::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .2) }
.hero > .wrap, .hero__facts { position: relative; z-index: 1 }

/* Надзаголовки: левый на 70, правый на 711 - вторая колонка начинается
   на 641 от края контейнера, это не линия сетки (ближайшая 635), число эталона */
.hero__top { display: grid; grid-template-columns: 641px minmax(0, 1fr) }
.hero__over {
  font-size: var(--t-14);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: -0.4px;
  text-transform: uppercase;
  opacity: .5;
  width: fit-content;       /* бокс по тексту, как у Тильды (589 и 165) */
}
/* Строки заголовка у Тильды стоят с шагом 62 при кегле 60 - интерлиньяж 1,033.
   Антиква 64/300 в той же строке, у оригинала свой бокс 83 - здесь инлайн. */
.hero__ttl {
  margin-top: var(--hero-ttl-gap);
  font-size: var(--t-60);
  font-weight: 600;
  line-height: 1.0333;
  letter-spacing: -2px;
}
.hero__ny { position: relative; top: var(--hero-ny-up); line-height: 0.96875; font-size: var(--t-64); font-weight: 300; letter-spacing: 0; color: var(--accent-soft) }
/* Выход первого экрана по очереди (правка Максима 04.09 «дорогая анимация»): под классом js
   надзаголовки, три строки заголовка, подводка, кнопки и лента фактов поднимаются с шагом
   120 мс; без JS всё стоит на месте (2.6). Строка заголовка - inline-block только там, где
   перенос задан br-d (с 1200): ниже она inline и только проявляется, иначе переносы на
   телефоне легли бы иначе. Анимируются обёртки, а не .hero__over и подписи: у тех своя
   прозрачность .5 / .7 / .8, и кадр «to opacity 1» её бы затёр. Высота h1 со строками
   в inline-block та же, что была без них (189,95 на 1440, замер 05.09); сверка теперь видит
   строки по отдельности и показывает старое расхождение: третья у Тильды на 323, у нас на
   336 - у оригинала строки заголовка стоят внахлёст своих боксов 78, наш h1 так не может */
.hero__line { display: inline }
@media (min-width: 1200px) { .hero__line { display: inline-block } }
.js .hero__top, .js .hero__line, .js .hero__sub, .js .hero__acts, .js .hero__facts-row {
  animation: hero-rise 900ms var(--ease-out) both;
  animation-delay: var(--hero-d, 0ms);
}
.js .hero__line:nth-of-type(1) { --hero-d: 120ms }
.js .hero__line:nth-of-type(2) { --hero-d: 240ms }
.js .hero__line:nth-of-type(3) { --hero-d: 360ms }
.js .hero__sub { --hero-d: 520ms }
.js .hero__acts { --hero-d: 640ms }
.js .hero__facts-row { --hero-d: 800ms }
@keyframes hero-rise { from { opacity: 0; transform: translateY(var(--rv-shift)) } to { opacity: 1; transform: none } }
.hero__sub {
  width: 750px;
  max-width: 100%;
  margin-top: var(--hero-sub-gap);
  font-size: var(--t-18);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.5px;
}
.hero__sub b { font-weight: 600 }
.hero__acts { margin-top: var(--hero-acts-gap); display: flex; flex-wrap: wrap; gap: var(--hero-acts-x) }
.hero__act { display: grid; justify-items: center; gap: var(--hero-note-gap) }
.hero__act--pdf .btn { width: 340px }     /* ширины кнопок - числа эталона */
.hero__act--call .btn { width: 360px }
.hero__note { justify-self: stretch; text-align: center; font-size: var(--t-14); line-height: 1.4; letter-spacing: -0.5px; opacity: .7 }

/* Лента фактов: плашка чёрная 30 % высотой 70, четыре подписи на 70 / 400 / 744 / 1131 -
   расставлены руками, колонки 330 / 344 / 387 - числа эталона, не сетка (7.1) */
.hero__facts {
  margin-top: var(--hero-facts-gap);
  min-height: 70px;
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, .3);
}
/* Каждый факт стоит в ОДНУ строку, как у оригинала (правка Максима 04.09: было
   «16 профессионалов в команде» в две). Числа оригинала точны при контейнере 1300,
   то есть от 1440; ниже колонка последнего факта уже его текста, и ряд идёт флексом
   с переносом - иначе nowrap выносит хвост за край окна (2.1). */
.hero__facts-row { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: var(--s5); row-gap: var(--s3) }
.hero__facts p { width: fit-content; white-space: nowrap; font-size: var(--t-16); line-height: 1.4; letter-spacing: -0.5px; opacity: .8 }
@media (min-width: 1440px) {
  /* justify-content от флекса в гриде раздвигает сами колонки - факты уезжали
     на 424 / 792 / 1203 вместо 400 / 744 / 1131 */
  .hero__facts-row { display: grid; grid-template-columns: 330px 344px 387px minmax(0, 1fr); justify-content: start; column-gap: 0 }
}

/* ═══ 2. Проблема, h=2230, фон #FAFCFF ═══════════════════════════════════ */

.prob {
  --prob-shot-down: 94px;    /* кадр ниже верха заголовка: 184 → 278 */
  --prob-lead-gap: 45px;     /* заголовок 328 → подводка 373 */
  --prob-why-gap: 75px;      /* подводка 448 → белая карточка 523 */
  --prob-num-gap: 43px;      /* абзац 588 → значки 631 */
  --prob-col-gap: 97px;      /* три колонки на 110 / 549 / 988: ячейка 342, зазор 97 */
  --prob-turn-gap: 125px;    /* карточка 883 → «мир изменился» 1008 */
  --prob-cards-gap: 39px;    /* «мир изменился» 1050 → карточки 1089 */
  --prob-card-gap: 31px;     /* между карточками 635: 705 → 736 */
  --prob-card-y: 30px;       /* между рядами карточек: 1289 → 1319 */
  --prob-tag-gap: 23px;      /* тег 1137 → текст 1160 */
  --prob-plate-gap: 130px;   /* карточки 1519 → тёмная плашка 1649 */
  --plate-pt: 47px;          /* плашка 1649 → текст 1696 */
  --plate-pb: 41px;          /* кнопка 2028 → низ плашки 2069 */
  --plate-label-down: 3px;   /* «Так к чему мы это?» на 1699 при тексте на 1696 */
  --plate-foot-gap: 98px;    /* текст 1778 → «Узнали себя?» 1876 */
  --plate-concl-down: 15px;  /* «Поэтому…» на 1891 при «Узнали себя?» на 1876 */
  --plate-btn-gap: 20px;     /* подводка 1953 → кнопка 1973 */
}
@media (min-width: 1200px) { .prob { --sec-pt: 184px; --sec-pb: 161px } }

/* Кадр слева 170×170 на 70, текст с 484: колонка кадра 414 - число эталона,
   не линия сетки (ближайшая 402,5 / 513,3) */
.prob__head { display: grid; grid-template-columns: 414px minmax(0, 1fr); align-items: start }
.prob__shot { width: 170px; margin-top: var(--prob-shot-down); border-radius: var(--r-m); overflow: hidden }
.prob__shot img { width: 100%; aspect-ratio: 1; object-fit: cover }
.prob__ttl { font-size: var(--t-44); font-weight: 600; line-height: 1.1; letter-spacing: -1.4px }
.prob__ny { font-size: var(--t-48); line-height: 1; letter-spacing: 0; color: var(--accent-soft) }   /* инлайн 48 в строке 48,4 - иначе третья строка вырастает до 53 */
.prob__lead { margin-top: var(--prob-lead-gap); font-size: var(--t-18); line-height: 1.4; letter-spacing: -0.6px }

/* Белая карточка 1300×360, поле 40; три колонки по 342 с зазором 97.
   Обводка 1px #E6E4DD - у оригинала она есть у всех белых плашек этой полосы */
.prob__why { margin-top: var(--prob-why-gap); min-height: 360px; padding: 40px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-warm); border-radius: var(--r-m) }
.prob__why-top { width: 1017px; max-width: 100%; font-size: var(--t-18); line-height: 1.4; letter-spacing: -0.6px }
.prob__three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--prob-col-gap); row-gap: var(--s6); margin-top: var(--prob-num-gap) }
.prob__three h4 { margin-top: var(--in-20); font-size: var(--t-20); font-weight: 600; line-height: 1.3; letter-spacing: -0.6px }
.prob__three p { margin-top: var(--in-20); font-size: var(--t-15); line-height: 1.4; letter-spacing: -0.6px }
/* Боксы текста у Тильды фиксированные - от них зависит перенос строк */
.prob__three li:nth-child(1) h4 { width: 287px } .prob__three li:nth-child(1) p { width: 307px }
.prob__three li:nth-child(2) h4 { width: 342px } .prob__three li:nth-child(2) p { width: 306px }
.prob__three li:nth-child(3) h4 { width: 272px } .prob__three li:nth-child(3) p { width: 310px }
.prob__three h4, .prob__three p { max-width: 100% }

/* «Но, за последние 5 лет мир изменился» - 38/600 по центру, бокс 1182 */
.prob__turn {
  width: 1182px;
  max-width: 100%;
  margin: var(--prob-turn-gap) auto 0;
  font-size: var(--t-38);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -1.4px;
  text-align: center;
}
.prob__turn-hi { color: var(--accent-soft) }

/* Четыре карточки 635×200: текст в колонке 243, кадр 300 у правого края, скруглён справа */
.prob__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--prob-card-gap);
  row-gap: var(--prob-card-y);
  margin-top: var(--prob-cards-gap);
}
.prob__card {
  position: relative;
  min-height: 200px;
  padding: var(--in-30) 300px var(--in-30) var(--in-30);
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line-warm);
  border-radius: var(--r-m);
  overflow: hidden;
}
.prob__card-text { width: 243px; max-width: 100% }
.prob__card p { margin-top: var(--prob-tag-gap); font-size: var(--t-18); line-height: 1.4; letter-spacing: -0.6px }
.prob__card-img {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 100%;
  object-fit: cover;
  border-radius: 0 var(--r-m) var(--r-m) 0;
}

/* Тёмная плашка 1300×420: верхний ряд «вопрос / ответ», нижний «вывод / действие».
   Колонки 447 (110→557) и 443 (557→1000) - числа эталона */
.plate {
  margin-top: var(--prob-plate-gap);
  padding: var(--plate-pt) 40px var(--plate-pb);
  background: var(--bg-dark);
  color: var(--ink-invert);
  border-radius: var(--r-m);
}
.plate__top { display: grid; grid-template-columns: 447px minmax(0, 1fr); align-items: start }
.plate__label { width: 243px; margin-top: var(--plate-label-down); font-size: var(--t-16); line-height: 1.4; letter-spacing: -0.6px }
.plate__strong { width: 849px; max-width: none; font-size: var(--t-22); font-weight: 500; line-height: 1.1; letter-spacing: -1px }
.plate__text { width: 737px; max-width: 100%; margin-top: var(--s4); font-size: var(--t-16); font-weight: 300; line-height: 1.4; letter-spacing: -0.6px }
.plate__foot { display: grid; grid-template-columns: 890px minmax(0, 1fr); align-items: start; margin-top: var(--plate-foot-gap) }
.plate__concl { width: 679px; max-width: 100%; margin-top: var(--plate-concl-down); font-size: var(--t-38); font-weight: 500; line-height: 1.1; letter-spacing: -1.4px }
.plate__ask-h { width: 243px; font-size: var(--t-20); font-weight: 600; line-height: 1.4; letter-spacing: -0.6px }
.plate__ask { width: 265px; max-width: 100%; margin-top: var(--s1); font-size: var(--t-16); font-weight: 300; line-height: 1.3; letter-spacing: -0.6px }
.plate__cta .btn { width: 300px; margin-top: var(--plate-btn-gap) }

/* ═══ 3. Услуга, h=1289 ══════════════════════════════════════════════════ */

.srv {
  --srv-ny-up: -8px;        /* антиква 50 на 174 при строке 44 на 125 (бокс 57 → 182): внахлёст */
  --srv-pale-gap: 42px;     /* заголовок 239 → плашка 281 */
  --srv-pair-gap: 30px;     /* плашка 361 → карточки 391 */
  --srv-card-pb: 41px;      /* текст 710 → низ карточки 751 */
  --srv-tools-gap: 50px;    /* карточки 751 → блок инструментов 801 */
  --srv-tools-pt: 39px;     /* блок 801 → заголовок 840 */
  --srv-logos-gap: 37px;    /* заголовок 874 → первый ряд 911 */
  --srv-logo-gap: 10px;     /* между логотипами в ряду */
  --srv-btn-r: 50px;        /* кнопка 1320 → край блока 1370 */
  --srv-btn-b: 59px;        /* кнопка 1122 → низ блока 1181 */
}
@media (min-width: 1200px) { .srv { --sec-pt: 125px; --sec-pb: 108px } }

.srv__ttl { text-align: center; font-size: var(--t-44); font-weight: 600; line-height: 1.3; letter-spacing: -1.5px }
.srv__ttl .srv__l1, .srv__ny { display: block; max-width: 100%; margin-inline: auto }
.srv__l1 { width: 566px }   /* боксы Тильды, текст в них по центру */
.srv__ny { width: 935px }
.srv__ny { margin-top: var(--srv-ny-up); font-size: var(--t-50); line-height: 1.3; letter-spacing: 0 }

/* Светлая плашка 1300×80: значок 20 в 30 от края, текст через 15 */
.pale {
  display: flex;
  align-items: center;
  gap: var(--hero-note-gap, 15px);
  min-height: 80px;
  margin-top: var(--srv-pale-gap);
  padding: var(--in-20) var(--in-30);
  background: var(--bg-pale);
  font-size: var(--t-16);
  line-height: 1.55;
  letter-spacing: -0.6px;
}
.pale img { flex: none; width: 20px }

/* Две карточки 635×360, радиус 20, поле 30: кадр 110×110 и заголовок 26/600 в ряд, текст 16/1,35 */
.srv__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin-top: var(--srv-pair-gap) }
.srv__card { min-height: 360px; padding: var(--in-30) var(--in-30) var(--srv-card-pb); border-radius: var(--r-l) }
.srv__card--accent {
  background-color: var(--accent);
  background-image: linear-gradient(0deg, #206AD8 0%, #2474ED 100%);
  color: var(--ink-invert);
}
.srv__card--soft { background: var(--bg-tint-2); box-shadow: inset 0 0 0 1px var(--line-cool) }   /* обводка оригинала: тенью, а не border - иначе она съедает 2px внутренней высоты и карточка растёт */
.srv__card-head { display: flex; align-items: center; gap: var(--in-30) }
.srv__card-img { width: 110px; height: 110px; border-radius: var(--r-m); object-fit: cover }
.srv__card-ttl { width: 221px; font-size: var(--t-26); font-weight: 600; line-height: 1.2; letter-spacing: -0.6px }
.srv__card--soft .srv__card-ttl { width: 230px }
.srv__card-body { width: 572px; max-width: 100%; margin-top: var(--in-25); font-size: var(--t-16); line-height: 1.35; letter-spacing: -0.5px }
.srv__card-body p + p { margin-top: 1.35em }   /* пустая строка между абзацами, как у оригинала */
.srv__card-body b { font-weight: 600 }
.srv__list { padding-left: var(--in-20); list-style: disc }

/* Блок инструментов 1300×380, радиус 20, поле 40/39; логотипы четырьмя рядами
   по 55 - ряды разбиты руками, как у оригинала, а не по ширине; кнопка в углу */
.srv__tools { position: relative; min-height: 380px; margin-top: var(--srv-tools-gap); padding: var(--srv-tools-pt) 40px 40px; box-shadow: inset 0 0 0 1px var(--line-cool); border-radius: var(--r-l); background: var(--bg) }
.srv__tools-ttl { font-size: var(--t-28); font-weight: 600; line-height: 1.2; letter-spacing: -0.6px }
.srv__logos { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--srv-logo-gap); height: 55px; margin-top: var(--srv-logos-gap) }
.srv__logos + .srv__logos { margin-top: 0 }
.srv__logos img { display: block; height: auto }
.srv__btn { position: absolute; right: var(--srv-btn-r); bottom: var(--srv-btn-b); width: 320px }

/* ═══ 4. Почему получается, h=2450, фон #1C1C1C ═════════════════════════ */

.apr {
  --apr-over-down: 9px;      /* «Почему у нас получается?» 176 при заголовке 167 */
  --apr-face-gap: 26px;      /* надзаголовок 201 → кадр 227 */
  --apr-face-up: 22px;       /* кадр выше подложки: 227 при 249 */
  --apr-face-left: 21px;     /* кадр левее подложки: 49 при 70 */
  --apr-face-top: 120px;     /* телефон прилипает под шапкой: 96 высота шапки + 24 зона отчуждения (7.14) */
  --apr-note-gap: 21px;      /* заголовок 299 → абзац 320 */
  --apr-list-gap: 51px;      /* абзац 364 → «Составляющие» 415 */
  --apr-card-gap: 25px;      /* «Составляющие» 443 → карточка 468; между карточками 20 */
  --pnt-ttl-gap: 25px;       /* плашка «Пункт» 543 → заголовок 568 */
  --pnt-text-gap: 20px;      /* заголовок 608 → текст 628 */
  --pnt-pairs-gap: 7px;      /* текст 700 → пары 707 */
  --pnt-text-center: 12px;   /* две строки текста стоят по центру бокса 72 (vertical-align: middle у Тильды) */
  --pnt-pair-left: 204px;    /* левая колонка пары: 553 → стрелка 757 */
  --pnt-pair-arrow: 95px;    /* колонка стрелки: 757 → 852 */
  --pnt-cta-gap: 60px;       /* пары 877 → цитата 937 */
  --pnt-1-pb: 56px;          /* цитата 1012 → низ карточки 1068 */
  --pnt-1-btn-up: 9px;       /* кнопка 948…1003 при цитате 937…1012 */
  --pnt-sub-gap: 38px;       /* текст 1297 → «Как делаем мы?» 1335 */
  --pnt-steps-gap: 20px;     /* «Как делаем мы?» 1366 → шаги 1386 */
  --pnt-steps-col: 369px;    /* второй столбец шагов на 922 */
  --pnt-2-cta-gap: 55px;     /* шаги 1515 → цитата 1570 */
  --pnt-2-pb: 58px;          /* цитата 1670 → низ 1728 */
  --pnt-btn-r: 18px;         /* кнопка 1312 → поле карточки 1330 */
  --pnt-3-final-gap: 56px;   /* текст 2107 → «Комплексность» 2163 */
  --pnt-3-pb: 63px;          /* 2225 → низ 2288 */
}
@media (min-width: 1200px) { .apr { --sec-pt: 167px; --sec-pb: 162px } }

/* Левая колонка 443 (70 → 513), правая 857 = 8 колонок с пятой линии */
.apr__grid { display: grid; grid-template-columns: 443px minmax(0, 1fr) }
.apr__over { width: 237px; max-width: 100%; margin-top: var(--apr-over-down); font-size: var(--t-16); line-height: 1.55; letter-spacing: -0.6px }

/* Портрет: подложка 293×604 с радиусом 50 и видео внутри, поверх - рамка телефона
   330×640. Рамка стоит на 22 выше и на 21 левее подложки и на 14 ниже её низа:
   числа оригинала (рамка 227…867, видео 249…853), иначе окно рамки не совпадает
   с кадром и видео торчит снизу.

   Телефон едет вместе с прокруткой, как у оригинала (там это пошаговая анимация
   Тильды: ход 1430 px на 1430 px прокрутки, то есть элемент стоит на месте экрана).
   У нас то же самое даёт sticky - без JS и без обработчика прокрутки. */
.apr__left { height: 100% }
.apr__face {
  position: sticky;
  top: var(--apr-face-top);
  width: 293px;
  max-width: 100%;
  aspect-ratio: 293 / 604;
  margin-top: calc(var(--apr-face-gap) + var(--apr-face-up));
  border-radius: var(--r-face);
  background: #000;
}
.apr__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-face) }
.apr__face img {
  position: absolute;
  left: calc(var(--apr-face-left) * -1);
  top: calc(var(--apr-face-up) * -1);
  width: 330px;
  max-width: none;
  height: 640px;
}

.apr__ttl { width: 807px; max-width: 100%; font-size: var(--t-44); font-weight: 600; line-height: 1; letter-spacing: -0.6px }
.apr__note { width: 601px; max-width: 100%; margin-top: var(--apr-note-gap); font-size: var(--t-16); line-height: 1.4; letter-spacing: -0.6px; opacity: .6 }
.apr__list-ttl { width: 773px; max-width: 100%; margin-top: var(--apr-list-gap); font-size: var(--t-20); font-weight: 600; line-height: 1.4; letter-spacing: -0.6px }

/* Карточки пунктов 857×600 / 640 / 540, поле 40 */
.pnt { margin-top: var(--apr-card-gap); padding: 40px; border-radius: var(--r-m); background: var(--bg); color: var(--ink) }
.pnt + .pnt { margin-top: var(--in-20) }
.pnt--1 { min-height: 600px; padding-bottom: var(--pnt-1-pb) }
.pnt--2 { min-height: 640px; padding-bottom: var(--pnt-2-pb) }
.pnt--3 { min-height: 540px; padding-bottom: var(--pnt-3-pb); background: var(--bg-dark-2); color: var(--ink-invert) }
.pnt__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 35px;
  border-radius: var(--r-btn);
  background: var(--accent);
  color: var(--ink-invert);
  font-size: var(--t-16);
  font-weight: 600;
  line-height: 1.55;
}
.pnt__ttl { width: 370px; max-width: 100%; margin-top: var(--pnt-ttl-gap); font-size: var(--t-36); font-weight: 600; line-height: 1.1; letter-spacing: -0.6px }
.pnt--2 .pnt__ttl, .pnt--3 .pnt__ttl { width: 530px }
.pnt__text { width: 741px; max-width: 100%; margin-top: var(--pnt-text-gap); font-size: var(--t-16); font-weight: 300; line-height: 1.5; letter-spacing: -0.6px }
.pnt__text b { font-weight: 500 }
.pnt--1 .pnt__text { min-height: 72px; padding-top: var(--pnt-text-center) }   /* бокс Тильды 72 при двух строках текста */
.pnt--2 .pnt__text { width: 737px; line-height: 1.4 }
.pnt--3 .pnt__text { width: 638px; line-height: 1.4 }
.pnt--3 .pnt__text b { color: var(--ink-invert); font-weight: 600 }
.pnt__list { margin-top: 1.4em; padding-left: var(--in-20); list-style: disc }

/* Пары «что видит клиент → что получает»: колонка 204, стрелка 60 в колонке 95, ответ синим */
.pnt__pairs { display: grid; row-gap: var(--in-20); margin-top: var(--pnt-pairs-gap) }
.pnt__pairs li {
  display: grid;
  grid-template-columns: var(--pnt-pair-left) var(--pnt-pair-arrow) minmax(0, 1fr);
  align-items: start;
  font-size: var(--t-16);
  line-height: 1.4;
  letter-spacing: -0.6px;
}
.pnt__pairs span { grid-column: 1; grid-row: 1; width: 222px; max-width: none; font-weight: 300 }
.pnt__pairs li::before {
  content: '';
  grid-column: 2;
  grid-row: 1;
  align-self: center;     /* стрелка по центру строки, текст по верху (7.10) */
  width: 60px;
  height: 12px;
  background: url('../img/tild3465-3763-4539-a330-626134646632__Vector_903.svg') center / contain no-repeat;
}
.pnt__pairs em { grid-column: 3; grid-row: 1; width: 456px; max-width: 100%; font-style: normal; font-weight: 500; color: var(--accent) }
.pnt__pairs li:nth-child(1) em { width: 296px }
.pnt__pairs li:nth-child(2) em { width: 428px }

/* Выноска с вертикальной чертой 4×70 / 4×100 и кнопка справа: у оригинала
   они на одной строке - нижние края сходятся, в первой карточке кнопка на 9 выше */
.pnt__cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; margin-top: var(--pnt-cta-gap) }
.pnt--2 .pnt__cta { margin-top: var(--pnt-2-cta-gap) }
.pnt--3 .pnt__cta { margin-top: var(--pnt-3-final-gap) }
.quote { width: 436px; max-width: 100%; border-left: 4px solid var(--accent); padding-left: var(--hdr-pl, 20px); font-size: var(--t-18); font-weight: 500; line-height: 1.4; letter-spacing: -0.6px }
.pnt--2 .quote { width: 355px }
.pnt__btn { width: 300px; margin-right: var(--pnt-btn-r) }
.pnt--1 .pnt__btn { margin-bottom: var(--pnt-1-btn-up) }

.pnt__sub { width: 182px; margin-top: var(--pnt-sub-gap); font-size: var(--t-22); font-weight: 600; line-height: 1.4; letter-spacing: -0.6px }
.pnt__steps { display: grid; grid-template-columns: var(--pnt-steps-col) minmax(0, 1fr); gap: var(--in-20) 0; margin-top: var(--pnt-steps-gap) }
.pnt__steps li { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: var(--in-20); align-items: start }
.pnt__steps p { font-size: var(--t-16); font-weight: 300; line-height: 1.4; letter-spacing: -0.6px }
/* Порядок в разметке 01 · 03 · 02 · 04 - так они встают в два столбца; боксы 182 / 273 / 222 / 309 */
.pnt__steps li:nth-child(1) p { width: 182px } .pnt__steps li:nth-child(2) p { width: 273px }
.pnt__steps li:nth-child(3) p { width: 222px } .pnt__steps li:nth-child(4) p { width: 309px }
.pnt__steps p { max-width: 100% }
.pnt__final { width: 327px; max-width: 100%; font-size: var(--t-24); font-weight: 500; line-height: 1.3; letter-spacing: -0.6px }

/* ═══ 5+6. Кейсы: объявление (250) + распорка (133) + сетка (1910) ═══════
   У оригинала это три записи Тильды, у нас одна полоса (7.13: объявление
   и содержимое); сверка.js учитывает смещение 383 у сетки. */

.cases {
  --cases-sub-gap: 9px;      /* заголовок 198 → подводка 207 */
  --cases-grid-gap: 71px;    /* подводка 229 → первый кадр 300 (21 + 50). Было 204:
                                распорку 133 прошлая сборка поставила ПЕРЕД сеткой,
                                а у оригинала она стоит ПОСЛЕ неё - отсюда «сверху
                                слишком много, снизу мало» (правка Максима 04.09) */
  --cases-x: 20px;           /* жёлоб сетки 3×420 */
  --cases-y: 70px;           /* между рядами карточек: 587 → 657 */
  --case-ttl-gap: 20px;      /* кадр 370 → заголовок 390 */
  --case-txt-gap: 20px;      /* заголовок → описание, описание → теги */
  --case-tag-gap: 5px;       /* между тегами: 154 → 159 */
  --case-tag-px: 19px;       /* поле тега: «Дизайн» 84 при тексте 46 */
}
@media (min-width: 1200px) { .cases { --sec-pt: 124px; --sec-pb: 202px } }   /* 69 хвост записи кейсов + 133 распорка после неё */

.cases__ttl { text-align: center; font-size: var(--t-48); font-weight: 600; line-height: 1.55; letter-spacing: -1px }
.cases__ny { font-size: var(--t-54); line-height: 1.25; letter-spacing: -1px }
.cases__sub { width: 692px; max-width: 100%; margin: var(--cases-sub-gap) auto 0; text-align: center; font-size: var(--t-16); line-height: 1.4; letter-spacing: -0.6px }
.cases__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--cases-x);
  row-gap: var(--cases-y);
  align-items: start;
  margin-top: var(--cases-grid-gap);
}
.case__shot { aspect-ratio: 420 / 320; border-radius: var(--r-m); background: var(--bg-grey); overflow: hidden; transition: box-shadow var(--dur-hover) var(--ease-out) }
.case__shot img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-hover) var(--ease-out) }
/* Наезд кадра под курсором: масштаб 1.03 за 500 мс, тень поднимает карточку; на тачскрине
   hover ложный, поэтому под условием */
@media (hover: hover) and (pointer: fine) {
  .case:hover .case__shot img { transform: scale(1.03) }
  .case:hover .case__shot { box-shadow: 0 16px 40px rgba(0, 0, 0, .12) }
}
.case__ttl { margin-top: var(--case-ttl-gap); font-size: var(--t-20); font-weight: 500; line-height: 1.35; letter-spacing: -0.3px }
.case__txt { margin-top: var(--case-txt-gap); font-size: var(--t-15); line-height: 1.4; color: var(--ink-mute) }
/* Боксы заголовков и описаний у Тильды свои у каждой карточки - от них зависит перенос */
.case:nth-child(1) .case__ttl { width: 401px } .case:nth-child(1) .case__txt { width: 359px }
.case:nth-child(2) .case__ttl { width: 377px } .case:nth-child(2) .case__txt { width: 359px }
.case:nth-child(3) .case__ttl { width: 401px } .case:nth-child(3) .case__txt { width: 399px }
.case:nth-child(4) .case__ttl { width: 362px } .case:nth-child(4) .case__txt { width: 359px }
.case:nth-child(5) .case__ttl { width: 401px } .case:nth-child(5) .case__txt { width: 392px }
.case:nth-child(6) .case__ttl { width: 417px } .case:nth-child(6) .case__txt { width: 403px }
.case:nth-child(7) .case__ttl { width: 362px } .case:nth-child(7) .case__txt { width: 369px }
.case:nth-child(8) .case__ttl { width: 347px } .case:nth-child(8) .case__txt { width: 392px }
.case:nth-child(9) .case__ttl { width: 403px } .case:nth-child(9) .case__txt { width: 403px }
.case__ttl, .case__txt { max-width: 100% }
.case__tags { display: flex; flex-wrap: wrap; gap: var(--case-tag-gap); margin-top: var(--case-txt-gap) }
.case__tags span {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding-inline: var(--case-tag-px);
  border: 1px solid var(--ink);
  border-radius: var(--r-btn);
  font-size: var(--t-14);
  font-weight: 500;
  line-height: 1.55;
}

/* Кейсы с десятого показываются по кнопке. Скрытие включает класс js: без него
   на странице видны все пятнадцать, а кнопки нет вовсе (2.6) */
.js .cases__grid.is-cut > .case:nth-child(n+10) { display: none }
.cases__more { display: flex; justify-content: center; margin-top: var(--s7) }
/* [hidden] слабее класса с display (2.44): без этой строки кнопка оставалась после
   раскрытия всех кейсов - правка Максима 04.09 «когда показал все, кнопка убирается» */
.cases__more[hidden] { display: none }
.cases__more .btn { width: 300px; max-width: 100% }

/* ═══ 8. Почему с нами + форма, h=2300, фон #1C1C1C ═════════════════════ */

.why {
  --why-ttl-gap: 14px;       /* надзаголовок 167 → заголовок 181 */
  --over-shift: 65px;        /* бокс подводки 1207 стоит на 135, не по центру контейнера */
  --why-ny-up: -18px;        /* антиква 54 на 220 при строке 44 на 181 (бокс 57 → 238) */
  --why-cards-gap: 49px;     /* антиква 290 → карточки 339 */
  --whyc-pt: 50px;           /* первая карточка → заголовок: 339 → 389 */
  --whyc-pt-2: 60px;         /* остальные три: 739 → 799, 1039 → 1099, 1419 → 1479 */
  --whyc-text-gap-2: 24px;   /* вторая карточка: заголовок 833 → текст 857 */
  --whyc-pb: 45px;           /* текст 674 → низ 719 */
  --whyc-text-gap: 28px;     /* заголовок 457 → текст 485 */
  --why-form-gap: 129px;     /* карточка 1739 → форма 1868 */
  --why-form-ttl-down: 27px; /* «Давайте» 1895 при форме 1868 */
  --why-form-l2-up: -1px;    /* строка 44 на 1964 при строке 1908 (бокс 57 → 1965) */
  --why-form-ny-shift: 10px; /* «Давайте» стоит на 80 при колонке с 70 */
  --why-form-note-gap: 28px; /* заголовок 2052 → подводка 2080 */
  --why-form-col: 780px;     /* левая колонка: 70 → 850 */
}
@media (min-width: 1200px) { .why { --sec-pt: 142px; --sec-pb: 145px } }

.why__over { width: 1207px; max-width: 100%; margin-left: var(--over-shift); text-align: center; font-size: var(--t-16); line-height: 1.55; letter-spacing: -0.6px }
.why__ttl { margin-top: var(--why-ttl-gap); text-align: center; font-size: var(--t-44); font-weight: 600; line-height: 1.3; letter-spacing: -1.5px }
.why__l1, .why__ny { display: block; max-width: 100%; margin-inline: auto }
.why__l1 { width: 1063px }
.why__ny { width: 935px }
.why__ny { margin-top: var(--why-ny-up); font-size: var(--t-54); line-height: 1.3; letter-spacing: 0 }

/* Карточки 1300 высотой 380 / 280 / 360 / 320, кадр 390 у правого края */
.why__cards { display: grid; gap: var(--in-20); margin-top: var(--why-cards-gap) }
.whyc {
  position: relative;
  padding: var(--whyc-pt) 390px var(--whyc-pb) var(--in-50);
  border-radius: var(--r-m);
  background: var(--bg);
  color: var(--ink);
  overflow: hidden;
}
.whyc--1 { min-height: 380px }
.whyc--2 { min-height: 280px; --whyc-text-gap: var(--whyc-text-gap-2) }
.whyc--2, .whyc--3, .whyc--4 { padding-top: var(--whyc-pt-2) }
.whyc--3 { min-height: 360px }
.whyc--4 { min-height: 320px; background: var(--bg-dark-2); color: var(--ink-invert) }
.whyc__ttl { max-width: 100%; font-size: var(--t-28); font-weight: 600; line-height: 1.2; letter-spacing: -1px }
.whyc--1 .whyc__ttl { width: 465px } .whyc--2 .whyc__ttl { width: 708px }
.whyc--3 .whyc__ttl { width: 624px } .whyc--4 .whyc__ttl { width: 565px }
.whyc--3 .whyc__text, .whyc--4 .whyc__text { width: 752px }
.whyc__text { width: 766px; max-width: 100%; margin-top: var(--whyc-text-gap); font-size: var(--t-16); line-height: 1.3; letter-spacing: -0.5px }
.whyc__text p + p { margin-top: 1.3em }
.whyc__text b { font-weight: 600 }
.whyc__img { position: absolute; top: 0; right: 0; width: 390px; height: 100%; object-fit: cover; border-radius: 0 var(--r-m) var(--r-m) 0; transition: transform var(--dur-hover) var(--ease-out) }
.whyc { transition: box-shadow var(--dur-hover) var(--ease-out) }
@media (hover: hover) and (pointer: fine) {
  .whyc:hover .whyc__img { transform: scale(1.03) }
  .whyc:hover { box-shadow: 0 16px 40px rgba(0, 0, 0, .08) }
}

/* Форма: заголовок слева в колонке 780, поля 520 справа */
.why__form { display: grid; grid-template-columns: var(--why-form-col) minmax(0, 1fr); align-items: start; margin-top: var(--why-form-gap) }
.why__form-ttl { width: 825px; max-width: none; margin-top: var(--why-form-ttl-down); font-size: var(--t-44); font-weight: 600; line-height: 1.3; letter-spacing: -1.5px }
.why__form-l1, .why__form-l2 { display: block }
.why__form-l2 { margin-top: var(--why-form-l2-up); line-height: 1 }
.why__form-ny { margin-left: var(--why-form-ny-shift); font-size: var(--t-52); line-height: 1.3; letter-spacing: 0 }
.why__form-note { width: fit-content; margin-top: var(--why-form-note-gap); font-size: var(--t-16); line-height: 1.55; letter-spacing: -0.6px }

/* Форма заявки: поля 55 с белой обводкой, кегль 18, между полями 25;
   кнопка 520×50 без скругления, 16/600 - параметры формы Тильды.
   Токены на самой форме: она стоит и в полосе, и в попапах */
.lead {
  --lead-gap: 25px;          /* между полями формы */
  --lead-cb-gap: 30px;       /* флажок → текст согласия: 850 → 880 */
  --lead-btn-gap: 27px;      /* согласие 2078 → кнопка 2105 */
  display: grid;
  gap: var(--lead-gap);
}
/* Одна колонка без auto: иначе ячейка растёт до min-content ребёнка - подпись
   кнопки без переноса (315) раздувала все поля попапа за край карточки 286 на 390 */
.lead { grid-template-columns: minmax(0, 1fr) }
.lead__row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) }
.lead__lab { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
/* У оригинала поле - строка с подчёркиванием, а не бокс в рамке: снизу линия
   1px, боковых полей нет, кегль 18 (замер живой формы Тильды 04.09).
   В попапах рамка и радиус остаются - там форма другая, тоже по оригиналу */
.lead__inp {
  width: 100%;
  min-height: var(--btn-h);
  padding: 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--t-18);
}
.lead__inp::placeholder { color: inherit; opacity: .55 }
.lead__inp:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px }
/* Флага и «+7» рядом с полем больше нет: у Тильды флаг открывал выбор страны, у нас
   он был картинкой без роли (правка Максима 04.09: «флаг слева ничего не значит»).
   Код страны теперь часть значения - маску «+7 (900) 000-00-00» собирает js/app.js */
.lead__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }
.lead__agree { display: grid; grid-template-columns: var(--lead-cb-gap) minmax(0, 1fr); font-size: var(--t-14); line-height: 1.2 }
/* Флажок у оригинала 13×13; 16 - наш минимум, ниже он перестаёт попадать пальцем.
   Нажимается и подпись рядом (label), поэтому цель нажатия остаётся крупной (2.19) */
.lead__agree input { width: 16px; height: 16px; margin: var(--s1) 0 0; accent-color: var(--accent) }
.lead__agree a { text-decoration: underline }
.lead__btn { width: 100%; min-height: 50px; margin-top: var(--s1); border-radius: 0; font-size: var(--t-16); font-weight: 600; letter-spacing: 0 }
.lead__msg:empty { display: none }
.lead__msg { font-size: var(--t-14) }

/* ═══ 9. Знакомство, h=1150, фон #EFF4FA ═════════════════════════════════ */

.abt {
  --abt-photo-down: 8px;     /* карточка с фото 130 при заголовке 122 */
  --abt-ny-up: -16px;        /* антиква 48 на 174 при строке 44 на 122 (бокс 68 → 190) */
  --abt-who-gap: 33px;       /* антиква 234 → имя 267 */
  --abt-quote-gap: 5px;      /* имя 295 → цитата 300 */
  --abt-word-gap: 30px;      /* цитата 498 → второе имя 528 */
  --abt-nums-gap: 30px;      /* фото 765 → карточка цифр 795 */
  --abt-pdf-gap: 53px;       /* цитата 693 → плашка PDF 746 */
  --abt-name-pad: 17px;      /* поле плашки имени: 622 → 638, 70 → 87 */
  --abt-num-pt: 30px;        /* карточка цифр 795 → «8» 825 */
  --abt-num-px: 20px;        /* край карточки → число: 70 → 90 */
  --abt-num-gap: 14px;       /* число → подпись: 106 → 120 */
  --abt-lab-down: 9px;       /* подпись 835 при числе 825 (однострочная) */
  --abt-pdf-text-gap: 21px;  /* заголовок 828 → текст 849 */
  --abt-pdf-act-gap: 30px;   /* текст 893 → кнопка 923 */
  --abt-pdf-note-gap: 44px;  /* кнопка 955 → подпись 999 */
  --abt-pdf-pb: 28px;        /* кнопка 978 → низ плашки 1006 */
  --abt-col-gap: 81px;       /* между колонками 554 и 665: 624 → 705 */
}
@media (min-width: 1200px) { .abt { --sec-pt: 122px; --sec-pb: 144px } }

/* Колонки 554 и 665 с зазором 81 - числа эталона, в сумме ровно 1300.
   Колонки растянуты на высоту ряда, а свободное место в правой отдано зазору перед
   плашкой PDF: тогда её низ садится на низ карточки цифр (у оригинала 1006 против
   1005), а не висит выше. Правка Максима 04.09: «правая плашка по низу с левыми» */
.abt__grid { display: grid; grid-template-columns: minmax(0, 554fr) minmax(0, 665fr); column-gap: var(--abt-col-gap); align-items: stretch }
.abt__grid > div { display: flex; flex-direction: column }
/* Свободное место забирает ПОСЛЕДНЯЯ реплика, а не сама плашка: у плашки свой
   зазор 53 сверху. :last-of-type тут не годится - плашка тоже div, и последним
   по типу оказывается она */
.abt__word:nth-last-of-type(2) { margin-bottom: auto }
.abt__card { position: relative; margin-top: var(--abt-photo-down); border-radius: var(--r-m); overflow: hidden; background: var(--bg); aspect-ratio: 554 / 635 }
.abt__card img { width: 100%; height: 100%; object-fit: cover }
.abt__name {
  position: absolute;
  left: 0;
  bottom: 63px;             /* плашка 622…702 при карточке 130…765 */
  width: 303px;
  min-height: 80px;
  padding: var(--abt-name-pad);
  background: var(--accent-name);
  color: var(--ink-invert);
  font-size: var(--t-18);
  line-height: 1.4;
  letter-spacing: -1px;
}
.abt__name b { display: block; font-weight: 600 }

.abt__ttl { font-size: var(--t-44); font-weight: 600; line-height: 1.55; letter-spacing: -1px }
.abt__l1, .abt__ny { display: block; width: 618px; max-width: 100% }
.abt__ny { margin-top: var(--abt-ny-up); font-size: var(--t-48); line-height: 1.25; letter-spacing: -1px }
.abt__word { margin-top: var(--abt-word-gap) }
.abt__word:first-of-type { margin-top: var(--abt-who-gap) }
.abt__who { width: 618px; max-width: 100%; font-size: var(--t-18); font-weight: 600; line-height: 1.55; letter-spacing: -1px }
.abt__word p + p { font-size: var(--t-16); line-height: 1.35; letter-spacing: -0.5px }
.abt__who + p { margin-top: var(--abt-quote-gap) }
.abt__word p + p + p { margin-top: 1.35em }

/* Карточка цифр 554×210: четыре ячейки, разделённые линиями 1px чёрного 10 % */
.abt__nums {
  display: grid;
  grid-template-columns: minmax(0, 276fr) minmax(0, 278fr);
  margin-top: var(--abt-nums-gap);
  border-radius: var(--r-m);
  background: var(--bg);
  overflow: hidden;
}
.abt__nums li {
  display: flex;
  align-items: flex-start;
  gap: var(--abt-num-gap);
  min-height: 105px;
  padding: var(--abt-num-pt) 0 0 var(--abt-num-px);
  letter-spacing: -1px;
}
.abt__nums li:nth-child(even) { border-left: 1px solid rgba(0, 0, 0, .1) }
.abt__nums li:nth-child(n+3) { border-top: 1px solid rgba(0, 0, 0, .1) }
.abt__nums b { font-size: var(--t-26); font-weight: 600; line-height: 1.55; white-space: nowrap }
.abt__nums span { margin-top: var(--abt-lab-down); font-size: var(--t-16); line-height: 1.4; opacity: .7 }
.abt__nums li:nth-child(n+3) span { margin-top: 0 }
.abt__nums li:nth-child(n+3) span { width: 118px }   /* подпись второго ряда в две строки, как у оригинала */
.abt__nums li:nth-child(4) span { width: 138px }

/* Плашка PDF 665×260, поле 30, значок 50 в правом верхнем углу */
.abt__pdf { position: relative; min-height: 260px; margin-top: var(--abt-pdf-gap); padding: var(--in-30) var(--in-30) var(--abt-pdf-pb); border-radius: var(--r-m); background: var(--bg-dark-3); color: var(--ink-invert) }
.abt__pdf-ico { position: absolute; top: var(--in-30); right: var(--in-50); width: 50px }
.abt__pdf-ttl { width: 443px; max-width: 100%; font-size: var(--t-22); font-weight: 600; line-height: 1.2; letter-spacing: -1px }
.abt__pdf-text { width: 566px; max-width: 100%; margin-top: var(--abt-pdf-text-gap); font-size: var(--t-16); line-height: 1.4; letter-spacing: -0.5px }
.abt__pdf-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abt-pdf-note-gap); margin-top: var(--abt-pdf-act-gap) }
.abt__pdf-act .btn { width: 220px }
.abt__pdf-note { width: 303px; font-size: var(--t-14); line-height: 1.4; letter-spacing: -0.6px; opacity: .5 }

/* ═══ 10. Что получите, h=800, фон #1C1C1C ═══════════════════════════════ */

.gain {
  --gain-ny-up: -7px;        /* антиква 54 на 104 при строке 48 на 111 */
  --over-shift: 65px;        /* бокс подводки 1207 стоит на 135 */
  --gain-sub-gap: 11px;      /* заголовок 174 → подводка 185 */
  --gain-cards-gap: 50px;    /* подводка 210 → карточки 260 */
  --gain-x: 14px;            /* жёлоб карточек 640: 710 → 724 */
  --gain-y: 20px;            /* между рядами: 450 → 470 */
  --gain-icon-gap: 30px;     /* значок 155 → заголовок 185 */
  --gain-text-gap: 23px;     /* заголовок 347 → текст 370 */
  --gainc-pb: 34px;          /* текст 414 → низ карточки 450: у нас строка 22,4 против 22, два пикселя снимаются здесь */
}
@media (min-width: 1200px) { .gain { --sec-pt: 111px; --sec-pb: 140px } }

.gain__ttl { display: flex; justify-content: center; align-items: flex-end; flex-wrap: wrap; column-gap: .25em; font-size: var(--t-48); font-weight: 600; line-height: 1.3; letter-spacing: -1.5px }
.gain__ny { margin-top: var(--gain-ny-up); font-size: var(--t-54); line-height: 1.3; letter-spacing: 0 }
.gain__sub { width: 1207px; max-width: 100%; margin: var(--gain-sub-gap) 0 0 var(--over-shift); text-align: center; font-size: var(--t-16); font-weight: 500; line-height: 1.55; letter-spacing: -0.6px }

/* Карточки 640×190 в два столбца с жёлобом 14 - ряд не на сетке (2×640+14 = 1294),
   число эталона; декор в правом верхнем углу карточек 2-4 */
.gain__cards { display: grid; grid-template-columns: repeat(2, 640px); column-gap: var(--gain-x); row-gap: var(--gain-y); margin-top: var(--gain-cards-gap) }
.gainc { position: relative; min-height: 190px; padding: 40px 40px var(--gainc-pb); border-radius: var(--r-m); background: var(--bg); color: var(--ink); overflow: hidden }
.gainc--dark { background: var(--bg-dark-2); color: var(--ink-invert) }
.gainc__head { display: flex; align-items: flex-start; gap: var(--gain-icon-gap) }
.gainc__head img { flex: none; width: 45px }
.gainc__ttl { width: 325px; max-width: 100%; font-size: var(--t-20); font-weight: 600; line-height: 1.2; letter-spacing: -0.6px }
.gainc:nth-child(2) .gainc__ttl, .gainc:nth-child(3) .gainc__ttl { width: 315px }
.gainc:nth-child(4) .gainc__ttl { width: 237px }
.gainc__text { width: 525px; max-width: 100%; margin-top: var(--gain-text-gap); font-size: var(--t-16); line-height: 1.4; letter-spacing: -0.4px }
.gainc:not(:first-child) .gainc__text { width: 415px }
.gainc__decor { position: absolute; top: 0; right: 0; height: auto }
.gainc:not(.gainc--dark) .hi { color: var(--accent) }

/* ═══ 11. Тарифы, h=1460, фон #FAFCFF ════════════════════════════════════
   У оригинала три SVG 363 шириной с зазором 27, начиная с 148 (по центру);
   разверстаны текстом по решению Максима, вид и состав снят с картинок:
   у SVG 413 единиц на 363 px, все внутренние числа умножены на 0,879. */

.plan {
  --plan-sub-gap: 11px;      /* заголовок 199 → подводка 210 */
  --plan-cards-gap: 41px;    /* подводка 254 → карточки 295 */
  --plan-x: 27px;            /* между карточками 363 */
  --planc-pad: 26px;         /* поле карточки: 30 единиц SVG */
  --planc-btn-b: 35px;       /* кнопка → низ карточки: 1218 → 1253 */
  --planc-gap: 22px;         /* между группами списка */
  --planc-item-gap: 9px;     /* между пунктами */
  --planc-t-ttl: 29px;       /* заголовок карточки: прописная 21 px в SVG при 0,72 кегля */
  --planc-t-lab: 11px;       /* ярлык группы: 12 единиц SVG */
  --planc-t-item: 13px;      /* пункт списка и текст гарантии: 15 единиц SVG */
  --planc-ico: 18px;         /* значок пункта и отступ текста от него */
  --planc-plate-pad: 16px;   /* поле плашки гарантии */
  --planc-badge-h: 26px;     /* бейдж 160×30 единиц SVG */
  --planc-rule-gap: 20px;    /* черта под подзаголовком: у оригинала во всю ширину поля */
}
@media (min-width: 1200px) { .plan { --sec-pt: 125px; --sec-pb: 110px } }

.plan__ttl { display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; column-gap: .25em; font-size: var(--t-48); font-weight: 600; line-height: 1.55; letter-spacing: -1px }
.plan__ny { font-size: var(--t-54); line-height: 1.25; letter-spacing: -1px }
.plan__sub { width: 692px; max-width: 100%; margin: var(--plan-sub-gap) auto 0; text-align: center; font-size: var(--t-16); line-height: 1.4; letter-spacing: -0.6px }

.plan__cards { display: grid; grid-template-columns: repeat(3, 363px); justify-content: center; column-gap: var(--plan-x); align-items: start; margin-top: var(--plan-cards-gap) }
.planc {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--planc-pad) var(--planc-pad) var(--planc-btn-b);
  border: 1px solid var(--line-warm);
  border-radius: var(--r-l);
  background: var(--bg);
  color: var(--ink);
}
.planc--1 { min-height: 958px }
.planc--2 { min-height: 1055px; border-color: transparent; background: var(--bg-dark-3); color: var(--ink-invert) }
.planc--3 { min-height: 993px }
.planc__badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  height: var(--planc-badge-h);
  margin-bottom: var(--planc-pad);
  padding-inline: var(--s3);
  border-radius: var(--r-pill);
  background: var(--badge-top);
  color: var(--ink-invert);
  font-size: var(--t-14);
  font-weight: 500;
}
.planc__badge--win { background: var(--badge-win) }
.planc__ttl { font-size: var(--planc-t-ttl); font-weight: 600; line-height: 1.2; letter-spacing: -0.6px }
/* Подзаголовок отделён от списка чертой во всю ширину поля - как в SVG оригинала */
.planc__sub {
  margin-top: var(--s3);
  padding-bottom: var(--planc-rule-gap);
  border-bottom: 1px solid var(--line-warm);
  font-size: var(--t-14);
  line-height: 1.4;
  letter-spacing: -0.4px;
  color: var(--ink-mute-3);
}
.planc--2 .planc__sub { border-bottom-color: rgba(255, 255, 255, .2); color: var(--ink-mute) }
/* Ярлык группы у оригинала стоит по центру карточки, а не по левому краю */
.planc__grp { margin-top: var(--planc-gap); text-align: center; font-size: var(--planc-t-lab); font-weight: 500; line-height: 1.4; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-mute) }
.planc__all { margin-top: var(--planc-gap); padding: var(--s3) var(--s4); border-radius: var(--r-m); background: var(--bg-dark-3); color: var(--ink-invert); text-align: center; font-size: var(--t-14); font-weight: 600; line-height: 1.4 }
.planc__list { display: grid; gap: var(--planc-item-gap); margin-top: var(--s4) }
.planc__list li { position: relative; padding-left: calc(var(--planc-ico) + var(--s2)); font-size: var(--planc-t-item); line-height: 1.35; letter-spacing: -0.4px }
/* Значки пунктов вырезаны из SVG оригинала: «звенья» в белых карточках, звезда
   в чёрной. Кубок третьей карточки в SVG собран вместе с текстом одним контуром,
   вытащить его не вышло - нарисован по силуэту оригинала (plan-ico-cup.svg).
   Файлы подключены картинкой, а не currentColor: во внешнем SVG он не работает (2.21) */
.planc__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 15px;
  height: 10px;
  background: url('../img/plan-ico-link.svg') left center / contain no-repeat;
}
.planc--2 .planc__list li::before { top: 1px; width: 15px; height: 14px; background-image: url('../img/plan-ico-star.svg') }
.planc--3 .planc__list li::before { top: 1px; width: 14px; height: 14px; background-image: url('../img/plan-ico-cup.svg') }
.planc--2 .is-star, .planc--3 .is-win { color: inherit }
/* У оригинала главное в пункте набрано полужирным основным цветом, продолжение -
   приглушённым: «1 канал платного трафика на выбор:» чёрным, перечисление серым */
.planc__list li { color: var(--ink-mute-3) }
.planc--2 .planc__list li { color: var(--ink-mute) }
.planc__list b { color: var(--ink); font-weight: 600 }
.planc--2 .planc__list b { color: var(--ink-invert) }
.planc--2 .is-star b:first-child { color: var(--accent-soft) }
.planc--3 .is-win b:first-child { color: var(--accent) }
.planc__grnt { margin-top: var(--planc-gap); padding: var(--planc-plate-pad); border-radius: var(--r-m); background: var(--bg-warm); font-size: var(--planc-t-item); line-height: 1.4; letter-spacing: -0.4px }
.planc--2 .planc__grnt { background: var(--bg-dark-5) }
.planc__grnt-lab { margin-bottom: var(--s2); font-size: var(--planc-t-lab); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--accent) }
.planc--2 .planc__grnt-lab { color: var(--accent-soft) }
.planc__btn { display: flex; width: 320px; max-width: 100%; margin-top: auto; padding-top: var(--planc-gap) }
.planc__btn .btn { width: 100%; font-size: var(--t-14) }

/* ═══ 12. Гарантии, h=800 ════════════════════════════════════════════════ */

.grn {
  --grn-sub-gap: 20px;       /* заголовок 215 → подводка 235 */
  --grn-cards-gap: 40px;     /* подводка 260 → карточки 300 */
  --grn-x: 20px;             /* жёлоб карточек 310 */
  --grnc-ttl-gap: 26px;      /* щит 439 → заголовок 465 */
  --grnc-text-gap: 20px;     /* заголовок 517 → текст 537 */
  --grnc-pb: 27px;           /* карточка 03 с трёхстрочным заголовком: текст 643 → низ 670; остальные добирают до 370 */
}
@media (min-width: 1200px) { .grn { --sec-pt: 119px; --sec-pb: 130px } }

.grn__ttl { width: 731px; max-width: 100%; font-size: var(--t-44); font-weight: 600; line-height: 1.1; letter-spacing: -1px }
.grn__sub { width: 822px; max-width: 100%; margin-top: var(--grn-sub-gap); font-size: var(--t-16); line-height: 1.55; letter-spacing: -0.5px }
.grn__sub b { font-weight: 600 }
.grn__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--grn-x); row-gap: var(--s6); margin-top: var(--grn-cards-gap) }
.grnc { min-height: 370px; padding: var(--in-30) var(--in-20) var(--grnc-pb); box-shadow: inset 0 0 0 1px var(--line-cool); border-radius: var(--r-l); background: var(--bg-tint-2) }
.grnc__head { display: flex; justify-content: space-between; align-items: flex-start }
.grnc__no { font-size: var(--t-16); line-height: 1.55; color: var(--accent) }
.grnc__head img { width: 90px; margin-right: var(--s2) }   /* щит 260…350 при карточке до 380 */
.grnc__ttl { width: 235px; max-width: 100%; margin-top: var(--grnc-ttl-gap); font-size: var(--t-20); font-weight: 600; line-height: 1.3; letter-spacing: -0.5px }
.grnc:nth-child(2) .grnc__ttl { width: 183px }
.grnc:nth-child(3) .grnc__text { width: 234px } .grnc:nth-child(4) .grnc__text { width: 240px }
.grnc__text { width: 278px; max-width: 100%; margin-top: var(--grnc-text-gap); font-size: var(--t-14); line-height: 1.4; letter-spacing: -0.4px }

/* ═══ 13. Формат знакомства + подвал, h=1200, фон #0A0A0A ════════════════ */

.fin {
  --fin-ny-up: -6px;         /* антиква 50 на 124 при «Выберите» 46 на 130 */
  --fin-sub-gap: 6px;        /* заголовок 190 → подводка 196 */
  --fin-cards-gap: 50px;     /* подводка 221 → карточки 271 */
  --fin-x: 28px;             /* между карточками 636: 706 → 734 */
  --finc-ttl-gap: 45px;      /* значок 391 → заголовок 436 */
  --finc-text-gap: 11px;     /* заголовок 471 → текст 482 */
  --finc-lab-gap: 30px;      /* текст 530 → «/// ЧТО ВЫ ПОЛУЧИТЕ?» 560 */
  --finc-list-gap: 20px;     /* ярлык 581 → список 601 */
  --finc-item-gap: 15px;     /* между пунктами: 619 → 634 */
  --finc-ico-gap: 10px;      /* галка 17 → текст: 100 → 127 */
  --finc-pb: 43px;           /* кнопка 848 → низ карточки 891 */
  --finc-ico2-gap: 43px;     /* картинка второй карточки 393 → заголовок 436 */
}
@media (min-width: 1200px) { .fin { --sec-pt: 124px; --sec-pb: 0px } }

.fin__ttl { display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; column-gap: .25em; font-size: var(--t-46); font-weight: 500; line-height: 1.3; letter-spacing: -1.5px; color: var(--accent-soft) }
.fin__l { margin-top: calc(var(--fin-ny-up) * -1) }
.fin__ny, .sec--black .fin__ny { font-size: var(--t-50); line-height: 1.3; letter-spacing: 0; color: var(--ink-invert) }
.fin__sub { width: 819px; max-width: 100%; margin: var(--fin-sub-gap) auto 0; text-align: center; font-size: var(--t-16); line-height: 1.55; letter-spacing: -0.5px }
.mute-2 { color: var(--ink-mute-2) }

/* Карточки 636×620, поле 30; кнопка прижата к низу, над ней 43 */
.fin__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--fin-x); row-gap: var(--s6); margin-top: var(--fin-cards-gap) }
.finc { display: flex; flex-direction: column; min-height: 620px; padding: var(--in-50) var(--in-30) var(--finc-pb); box-shadow: inset 0 0 0 1px var(--line-dark); border-radius: var(--r-m); background: var(--bg-dark-4); color: var(--ink-invert) }
.finc--alt { background: var(--bg-dark-5) }
/* align-self обязателен: в колонке-флексе картинка растягивалась на всю ширину
   карточки (576 вместо 70) - значок PDF выходил лентой во весь блок */
.finc__ico { align-self: flex-start; width: auto; height: 70px; margin-bottom: var(--finc-ttl-gap) }
.finc--alt .finc__ico { height: 75px; margin-bottom: var(--finc-ico2-gap) }
.finc--pdf .finc__ttl { width: 520px }
.finc__ttl { width: 576px; max-width: 100%; font-size: var(--t-28); font-weight: 600; line-height: 1.25; letter-spacing: -0.6px }
.finc__text { width: 547px; max-width: 100%; margin-top: var(--finc-text-gap); font-size: var(--t-16); line-height: 1.5; letter-spacing: -0.6px }
.finc__lab { width: 547px; max-width: 100%; margin-top: var(--finc-lab-gap); font-size: var(--t-14); line-height: 1.5; letter-spacing: 2px; color: var(--accent-soft) }
/* Галка стоит слева от текста, а не внутри его бокса: у Тильды это отдельный элемент на 100, текст с 127 */
.finc__list { display: grid; gap: var(--finc-item-gap); width: 547px; max-width: calc(100% - 17px - var(--finc-ico-gap)); margin-top: var(--finc-list-gap); margin-left: calc(17px + var(--finc-ico-gap)) }
.finc__list li { position: relative; font-size: var(--t-14); line-height: 1.3; letter-spacing: -0.6px }
.finc__list li::before {
  content: '';
  position: absolute;
  left: calc((17px + var(--finc-ico-gap)) * -1);
  top: 2px;
  width: 17px;
  height: 14px;
  background: url('../img/tild3234-3962-4564-a337-333063393838__Vector.svg') center / contain no-repeat;
}
.finc__list b, .finc__b { font-weight: 600 }
.finc__btn { display: flex; margin-top: auto; padding-top: var(--s6) }   /* flex, чтобы под inline-flex кнопкой не было полки строки */
.finc--pdf .finc__btn .btn { width: 320px; max-width: 100% }
.finc--alt .finc__btn .btn { width: 360px; max-width: 100% }

/* ═══ Подвал ═════════════════════════════════════════════════════════════
   Три колонки: логотип и подпись (239), текст о студии (353) с 372, ссылки
   по правому краю. Порядок ролей: имя, справка, служебное (7.13). */

.foot {
  --foot-col: 302px;         /* логотип 70 → текст о студии 372 */
  --foot-tag-gap: 15px;      /* логотип 1042 → подпись 1057 */
  --foot-link-gap: 9px;      /* политика 1024 → согласие 1033 */
  --foot-ip-gap: 14px;       /* согласие 1054 → ИП 1068 */
  background: var(--bg-black);
  color: var(--ink-invert);
  padding-block: var(--foot-pt, var(--s8)) var(--foot-pb, var(--s6));
}
/* Карточки 891 → подвал 1003 и подпись 1093 → низ 1200: у оригинала подвал - низ той же полосы */
@media (min-width: 1200px) { .foot { --foot-pt: 112px; --foot-pb: 107px } }
.foot__grid { display: grid; grid-template-columns: var(--foot-col) 353px minmax(0, 1fr); align-items: start }
.foot__brand img { width: 180px; margin-top: var(--s2) }
.foot__tag { width: fit-content; max-width: 239px; margin-top: var(--foot-tag-gap); font-size: var(--t-14); line-height: 1.3; letter-spacing: -0.6px; opacity: .5 }
.foot__about { font-size: var(--t-14); line-height: 1.5; letter-spacing: -0.6px }
.foot__legal { display: grid; justify-items: end; text-align: right; font-size: var(--t-14); line-height: 1.5; letter-spacing: -0.6px }
.foot__legal a + a { margin-top: var(--foot-link-gap) }
.foot__legal a:hover { color: var(--accent-soft) }
.foot__ip { margin-top: var(--foot-ip-gap); opacity: .5 }
/* Подвал правовых страниц собран сеткой .g с чертой снизу */
.foot > .g { row-gap: var(--s7) }
.foot__line { margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid rgba(255, 255, 255, .12); opacity: .7 }

/* ═══ Попапы заявок ══════════════════════════════════════════════════════
   Снято с живого попапа Тильды 04.09.2026: белая карточка 540×740, радиус 10,
   синий ярлык 360×40 сверху со скруглением книзу, заголовок 29/600, поля 45
   с обводкой #D4D4D4 и радиусом 10, кнопка 500×50 чёрная, радиус 50. */

.pop {
  --pop-w: 540px;
  --pop-tab-h: 40px;
  --pop-ttl-top: 85px;      /* ярлык 40 → заголовок 125 */
  --pop-note-gap: 20px;     /* заголовок 189 → текст 209 */
  --pop-form-gap: 28px;     /* текст 275 → форма 303 */
  --pop-input-h: 45px;
  --pop-label-gap: 5px;
  --pop-btn-gap: 50px;      /* согласие 601 → кнопка 651 */
  --pop-input-px: 20px;     /* текст поля с 490 при поле с 470 */
  --pop-free-gap: 15px;     /* кнопка 731 → подпись «это бесплатно» 746 */
  --pop-pb: 32px;           /* подпись 798 → низ 830 у PDF-разбора */
  --pop-x: 43px;            /* крестик Тильды */
  position: relative;
  width: min(var(--pop-w), calc(100vw - var(--s6) * 2));
  padding: var(--pop-ttl-top) var(--in-20) var(--pop-pb);
  border: 0;
  border-radius: var(--r-m);
  background: var(--bg);
  color: var(--ink);
}
/* Открытый диалог обязан быть fixed. Наш position:relative (он нужен ярлыку и
   крестику) перебивает правило браузера dialog:modal{position:fixed}, диалог
   остаётся в потоке в конце документа - и страница прыгает к нему, на первый
   экран. Правка Максима 04.09: «при нажатии на кнопку перелетает наверх» */
.pop[open] {
  position: fixed;
  inset: 0;
  margin: auto;
  max-height: calc(100dvh - var(--s6) * 2);
  overflow-y: auto;
}
.pop::backdrop { background: rgba(0, 0, 0, .68) }
/* Окно выходит из 0.96 к 1 вместе с подложкой за 250 мс и так же уходит: класс is-closing
   ставит js/app.js и закрывает диалог по таймеру, а не по событию анимации (2.15) */
.pop[open] { animation: pop-in var(--dur-pop) var(--ease-out) }
.pop[open]::backdrop { animation: pop-fade var(--dur-pop) var(--ease-out) }
.pop.is-closing { animation: pop-out var(--dur-pop) var(--ease-out) forwards }
.pop.is-closing::backdrop { animation: pop-fade var(--dur-pop) var(--ease-out) reverse forwards }
@keyframes pop-in { from { opacity: 0; transform: scale(.96) } }
@keyframes pop-out { to { opacity: 0; transform: scale(.96) } }
@keyframes pop-fade { from { opacity: 0 } }
/* Консультация: артборд Тильды другой при той же форме - заголовок 189 → текст 204,
   текст 248 → форма 283, карточка 730 при 740 у PDF-разбора */
#form-konsult { --pop-note-gap: 15px; --pop-form-gap: 35px; --pop-pb: 42px }
.pop__close { position: absolute; top: var(--s2); right: var(--s2); width: var(--pop-x); height: var(--pop-x); display: flex; align-items: center; justify-content: center; color: inherit }
.pop__over {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 360px;
  max-width: 100%;
  height: var(--pop-tab-h);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 0 15px 15px;
  background: var(--accent);
  color: var(--ink-invert);
  font-size: var(--t-14);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.pop__ttl { font-size: 29px; font-weight: 600; line-height: 32px; letter-spacing: -0.6px }
.pop__note { width: 470px; max-width: 100%; margin-top: var(--pop-note-gap); font-size: var(--t-16); line-height: 1.4; letter-spacing: -0.6px }
.pop__note b { font-weight: 700 }
.lead--pop { gap: var(--in-20); margin-top: var(--pop-form-gap) }
.lead--pop .lead__lab { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; padding-bottom: var(--pop-label-gap); font-size: var(--t-14); line-height: 17px; color: var(--ink-mute-3) }
.lead--pop .lead__inp {
  min-height: var(--pop-input-h);
  padding: 0 var(--pop-input-px);   /* базовое поле полосы без боковых полей - здесь рамка, и текст от неё отступает */
  border: 1px solid #D4D4D4;
  border-radius: var(--r-m);
  background: #FBFBF9;
  color: #717171;
  font-size: var(--t-16);
}
.lead--pop .lead__inp::placeholder { color: #717171; opacity: 1 }
.lead--pop .lead__agree { color: var(--ink-mute-3) }
.lead--pop .lead__agree input { width: 20px; height: 20px; border: 2px solid var(--ink); border-radius: 0 }
.lead--pop .lead__btn { min-height: 50px; margin-top: calc(var(--pop-btn-gap) - var(--in-20)); border-radius: var(--r-pill); background: var(--ink); color: var(--ink-invert) }
.lead--pop .lead__btn:hover { background: #262626 }

/* Широкий попап, который всплывает при прокрутке: карточка 900×600, слева кадр 360,
   справа заголовок 28/31, подпись 14/18 и форма 440 - числа живого попапа Тильды.
   Кадр стоит абсолютом (2.26): высоту карточки задаёт форма, а не он. Пока он был
   в потоке с height:100%, Safari растягивал карточку до max-height - 793 вместо 600,
   и под подписью оставалось 200 px пустоты (правка Максима 04.09: «попап кривой») */
.pop--wide {
  --pop-w: 900px;
  --pop-shot: 360px;
  --pop-body-pad: 44px;      /* кадр 360 → текст 404 от края карточки (674 при 270) */
  --pop-body-pr: 56px;       /* форма 440 кончается на 844 при карточке 900 */
  --pop-wide-pb: 33px;       /* подпись 717 → низ 750 */
  --pop-sub-gap: 10px;       /* заголовок 256 → подпись 266 */
  --pop-wide-form-gap: 23px; /* подпись 302 → форма 325 */
  padding: 0 0 0 var(--pop-shot);
  overflow: hidden;
}
.pop__shot { position: absolute; left: 0; top: 0; width: var(--pop-shot); height: 100%; object-fit: cover }
.pop__body { padding: 63px var(--pop-body-pr) var(--pop-wide-pb) var(--pop-body-pad) }   /* заголовок на 163 при карточке с 100 */
.pop__ttl--wide { width: 446px; max-width: 100%; font-size: var(--t-28); line-height: 31px }
.pop__sub { width: 366px; max-width: 100%; margin-top: var(--pop-sub-gap); font-size: var(--t-14); line-height: 18px; color: #626262 }
.pop--wide .lead--pop { margin-top: var(--pop-wide-form-gap) }
.pop__free { margin-top: calc(var(--pop-free-gap) - var(--in-20)); text-align: center; font-size: var(--t-13); line-height: 16px; color: var(--ink-mute) }

@media (max-width: 759px) {
  .pop--wide { padding-left: 0 }
  .pop__shot { display: none }        /* кадр съедает экран телефона целиком */
  .pop__body { padding: var(--s7) var(--s5) var(--s5) }
}

/* ═══ Уведомление о cookie ═══════════════════════════════════════════════ */

.cook {
  position: fixed;
  left: var(--s5); right: var(--s5); bottom: var(--s5);
  z-index: 80;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;   /* кнопка справа от текста, а не под ним */
  gap: var(--s5);
  max-width: 720px;
  margin-inline: auto;
  padding: var(--s5);
  border-radius: var(--r-m);
  background: var(--bg-dark);
  color: var(--ink-invert);
  font-size: var(--t-14);
}
/* Класс с display перебивает атрибут hidden по специфичности - без этой строки
   плашка не скрывается ни при согласии, ни при повторном заходе */
.cook[hidden] { display: none }
.cook p { flex: 1 1 300px }
.cook__ok { flex: none }

/* ═══ Планшет и телефон: перестройка сетки, а не сжатие (7.9) ════════════
   Точные числа оригинала действуют с 1200; ниже колонки с пиксельной шириной
   складываются, ряды карточек идут в две колонки и в одну. */

@media (max-width: 1199px) {
  .hdr__nav, .hdr__go { display: none }
  .hdr__burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--s1);
    width: 44px;
    height: 44px;
    flex: none;
    margin-left: auto;
  }
  .hdr__burger span { display: block; width: 22px; height: 2px; background: currentColor }

  .hero__top { grid-template-columns: minmax(0, 1fr); row-gap: var(--s2) }
  .hero__over { width: auto }
  .hero__facts-row { justify-content: flex-start; gap: var(--s3) var(--s6); padding-block: var(--s4) }
  .hero__sub { margin-top: var(--s8) }

  .prob__head { grid-template-columns: 170px minmax(0, 1fr); column-gap: var(--gap) }
  .prob__shot { margin-top: 0 }
  .prob__three { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap) }
  .prob__turn { margin-top: var(--s8) }
  .prob__cards { column-gap: var(--gap); row-gap: var(--gap) }
  .prob__card { grid-template-columns: minmax(0, 1fr) 240px; padding-right: 0 }
  .prob__card p { grid-column: 1 }
  .prob__card-img { grid-column: 2; width: 240px }
  .plate { margin-top: var(--s8); padding: var(--s6) }
  .plate__top, .plate__foot { grid-template-columns: minmax(0, 1fr); row-gap: var(--s4) }
  /* Боксы Тильды шире планшетной колонки: ниже 1200 ширину даёт колонка */
  .plate__label, .plate__strong, .plate__ask, .plate__ask-h, .plate__concl, .plate__text { width: auto; max-width: 100% }
  .why__over, .gain__sub, .plan__sub, .cases__sub, .fin__sub { width: auto; margin-inline: auto }
  .plate__foot { margin-top: var(--s7) }
  .plate__concl { margin-top: 0 }

  .srv__card-body { width: auto }
  .srv__logos { height: auto; margin-top: var(--s3) }
  .srv__logos:first-of-type { margin-top: var(--s6) }
  .srv__logos img { max-height: 32px; width: auto }
  .srv__btn { position: static; margin-top: var(--s6) }

  .apr__grid { grid-template-columns: 293px minmax(0, 1fr); column-gap: var(--gap) }
  /* Ниже 1200 колонка текста уже, и телефон, залипший на всю полосу, закрывал бы
     половину экрана: движение по скроллу живёт только в десктопной раскладке */
  .apr__left { height: auto }
  .apr__face { position: relative; top: auto; margin-top: var(--s6) }
  .pnt { padding: var(--s6) }
  .pnt--1, .pnt--2, .pnt--3 { min-height: 0; padding-bottom: var(--s6) }
  .pnt__pairs li { grid-template-columns: minmax(0, 1fr); row-gap: var(--s1) }
  .pnt__pairs li::before { display: none }
  .pnt__pairs li > span, .pnt__pairs li:nth-child(n) > em { grid-column: 1; width: auto }
  .pnt__pairs li > em { grid-row: 2 }
  .pnt__steps { grid-template-columns: minmax(0, 1fr) }
  .pnt__steps li:nth-child(n) p { width: auto }
  .pnt__cta { grid-template-columns: minmax(0, 1fr); row-gap: var(--s5); align-items: start }
  .pnt__btn { margin: 0 }
  .pnt .quote, .pnt__final { width: auto; max-width: 100% }

  .cases__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--s8); row-gap: var(--s7) }

  .why__cards { margin-top: var(--s7) }
  .whyc { grid-template-columns: minmax(0, 1fr) 240px; padding: var(--s6) 0 var(--s6) var(--s6) }
  .whyc--1, .whyc--2, .whyc--3, .whyc--4 { min-height: 0 }
  .whyc__text { width: auto }
  .whyc__img { width: 240px; margin-block: calc(var(--s6) * -1) }
  .why__form { grid-template-columns: minmax(0, 1fr); row-gap: var(--s6); margin-top: var(--s8) }
  .why__form-ttl { width: auto; max-width: 100%; margin-top: 0 }

  .abt__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap) }
  .abt__card { margin-top: 0 }
  .abt__word:first-of-type { margin-top: var(--s5) }

  .gain__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); margin-top: var(--s7) }
  .gainc { padding: var(--s6) }
  .gainc__ttl, .gainc__text { width: auto }

  .plan__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s7); margin-top: var(--s7) }
  .planc--1, .planc--2, .planc--3 { min-height: 0 }

  .grn__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap) }
  .grnc { min-height: 0 }
  .grnc:nth-child(n) .grnc__ttl, .grnc:nth-child(n) .grnc__text { width: auto }

  .fin__cards { column-gap: var(--gap); margin-top: var(--s7) }
  .finc { min-height: 0; padding: var(--s6) }
  .finc__ttl, .finc__text { width: auto }

  .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--gap) }
  .foot__legal { grid-column: 1 / -1; justify-items: start; text-align: left }

  .cook { left: var(--s4); right: var(--s4); bottom: var(--s4); padding: var(--s4); gap: var(--s3) }
}

/* На планшете колонка рядом с телефоном 293 остаётся уже 400 - подход и знакомство
   складываются в столбец раньше телефонной полосы (порог: 293 + 20 + 400 минимальной
   колонки текста + 80 полей = 793, ближайшая наша граница 959) */
@media (max-width: 959px) {
  .apr__grid, .abt__grid { grid-template-columns: minmax(0, 1fr) }
  .apr__face { margin-inline: auto }
}

@media (max-width: 759px) {
  .hero__acts { display: grid }
  .hero__act { justify-items: stretch }
  .hero__act .btn { width: 100% }
  .hero__note { text-align: center }
  .hero__facts-row { grid-template-columns: minmax(0, 1fr) }
  .hero__ttl { line-height: 1.1 }

  .prob__head { grid-template-columns: minmax(0, 1fr); row-gap: var(--s5) }
  .prob__turn, .plate { margin-top: var(--s7) }   /* внутри полосы плотнее, чем ритм 64 между полосами (7.5) */
  .hero__sub { margin-top: var(--s7) }
  .prob__why { padding: var(--s5) }
  .prob__three { grid-template-columns: minmax(0, 1fr) }
  .prob__cards { grid-template-columns: minmax(0, 1fr) }
  .prob__card { grid-template-columns: minmax(0, 1fr); padding: var(--s5) }
  .prob__card-img { grid-column: 1; width: 100%; height: 180px; margin: var(--s4) 0 calc(var(--s5) * -1); border-radius: 0 0 var(--r-m) var(--r-m) }
  .plate { padding: var(--s5) }

  .srv__pair { grid-template-columns: minmax(0, 1fr) }
  .srv__card { min-height: 0; padding: var(--s5) }
  .srv__card-head { align-items: flex-start; gap: var(--s4) }
  .srv__card-img { width: 72px; height: 72px }
  .srv__tools { min-height: 0; padding: var(--s5) }
  .srv__logos img { max-height: 26px }

  .apr__grid { grid-template-columns: minmax(0, 1fr) }
  .apr__face { margin-inline: auto }
  .apr__ttl, .apr__note, .pnt__text { width: auto }
  .pnt { padding: var(--s5) }

  /* На телефоне кейсы идут лентой вбок - как у оригинала (у него это отдельный
     блок с прокруткой на 15 карточек). Ширина карточки 340 при экране 390:
     край следующей выглядывает, и о прокрутке есть по чему догадаться (2.9).
     Лента выходит за поля страницы, чтобы карточка не резалась полем. */
  .cases__grid {
    display: flex;
    flex-wrap: nowrap;
    column-gap: var(--s5);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    margin-inline: calc(var(--pad) * -1);
    padding-inline: var(--pad);
    scroll-padding-inline: var(--pad);
    -webkit-overflow-scrolling: touch;
  }
  /* min-width:0 обязателен: у карточек 1-9 ширина заголовка задана числом Тильды
     (401 и т.п.), и без него flex-элемент раздувается до контента - на 390
     карточка выходила 401 вместо 340 */
  .case { flex: 0 0 min(340px, 82vw); min-width: 0; scroll-snap-align: start }
  .case__ttl, .case__txt { width: auto }
  .js .cases__grid.is-cut > .case:nth-child(n+10) { display: block }   /* в ленте показаны все */
  .cases__more { display: none }

  .whyc { grid-template-columns: minmax(0, 1fr); padding: var(--s5) }
  .whyc__img { width: 100%; height: 200px; margin: var(--s4) 0 calc(var(--s5) * -1); border-radius: 0 0 var(--r-m) var(--r-m) }
  .lead__agree { grid-template-columns: var(--s6) minmax(0, 1fr) }
  /* «Оставить заявку на консультацию» - 315 при кнопке 286: на телефоне подпись переносится */
  .lead__btn { white-space: normal; min-width: 0; padding-block: var(--s3) }

  .abt__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--s6) }
  .abt__name { bottom: 0; width: 100%; padding: var(--s4) }
  .abt__nums li { flex-wrap: wrap }
  .abt__nums li:nth-child(n) span { width: auto }
  .abt__pdf { padding: var(--s5) }
  .abt__pdf-ico { position: static; margin-bottom: var(--s4) }
  .abt__pdf-act { gap: var(--s4) }
  .abt__pdf-note { width: auto }

  .gain__cards { grid-template-columns: minmax(0, 1fr) }
  .gainc { padding: var(--s5) }
  .gainc__decor { display: none }   /* декор при ширине карточки меньше двух его ширин ложится на текст */

  .plan__cards { grid-template-columns: minmax(0, 1fr) }
  .planc { padding: var(--s5) }

  .grn__cards { grid-template-columns: minmax(0, 1fr) }

  .fin__cards { grid-template-columns: minmax(0, 1fr) }
  .finc { padding: var(--s5) }
  .finc__btn .btn { width: 100% }

  .foot__grid { grid-template-columns: minmax(0, 1fr) }
  .foot__legal { grid-column: auto }
}