/* ivanfit.pl — основной CSS. Mobile-first, десктоп от 1000px.
   Токены и правила — CLAUDE.md → «Принятые решения»; визуальное направление — docs/design.md. */

/* ============================================================ токены */
:root {
  /* Палитра: монохром, нейтральные серые; акцент — белый.
     Поверхности — тональные слои (ревизия 1): ink → surface → raised → hover. Теней нет. */
  --ink: #0D0D0D;       /* фон страницы */
  --surface: #161616;   /* панели секций, карточки первого уровня */
  --raised: #1E1E1E;    /* приподнятые: панель прайса, форма, активный шаг */
  --hover: #242424;     /* hover карточек и строк */
  --slate: #2A2A2A;     /* разделители */
  --stone: #6E6E6E;     /* границы полей (≥3:1) */
  --ash: #9A9A9A;       /* вторичный текст (6.9:1 на ink) */
  --text: #E8E8E8;      /* основной текст */
  --white: #FAFAFA;     /* заголовки, основная кнопка, фокус */

  /* Шрифты: Sofia — КАПС для H1/H2/цен/телефона/кнопок/навигации, обычный регистр для H3 и FAQ */
  --display: 'Sofia Sans Extra Condensed', 'Arial Narrow', sans-serif;
  --body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Шкала (clamp между 390 и 1440) */
  --fs-xs: clamp(13px, 12.63px + 0.095vw, 14px);
  --fs-s: 15px;
  --fs-base: clamp(17px, 16.63px + 0.095vw, 18px);
  --fs-l: clamp(19px, 17.5px + 0.38vw, 22px);
  --fs-h3: clamp(24px, 21px + 0.8vw, 32px);
  --fs-h2: clamp(44px, 32px + 3vw, 76px);
  --fs-h1: clamp(59px, 40px + 5.1vw, 116px);
  --fs-num: clamp(64px, 46px + 4.6vw, 112px);
  --fs-phone: clamp(57px, 40px + 5.1vw, 112px);

  /* Отступы (шаг 4) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 160px;

  --gutter: max(20px, 5vw);
  --max: 1320px;
  --edge: max(var(--gutter), calc((100vw - var(--max)) / 2)); /* левый край контента для full-bleed блоков */
  --header-h: 64px;
  --section-y: clamp(48px, 37px + 2.9vw, 80px);

  /* Обводки поверхностей: тонкая светлая линия внутри (inset), не тень */
  --line-1: inset 0 0 0 1px rgb(255 255 255 / 0.06);  /* surface */
  --line-2: inset 0 0 0 1px rgb(255 255 255 / 0.10);  /* raised */
  --line-3: inset 0 0 0 1px rgb(255 255 255 / 0.18);  /* hover / active */

  /* Скругления по иерархии, а не одно везде */
  --r-s: 8px;      /* поля, чипы фактов, мелкие элементы */
  --r-m: 16px;     /* карточки, пункты FAQ, выпадающий список */
  --r-l: 24px;     /* фото, панели прайса и формы, CTA (28px от 1000px) */
  --r-pill: 999px; /* кнопки, переключатели, чипы-radio */

  /* Свет: один серый оттенок за ключевыми блоками (класс .lit) */
  --light: #262626;
  /* Зерно: SVG-шум, opacity зашита в слой (класс .grain); только на «светлых» областях */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");

  /* Движение: одна система. Анимируем только transform, opacity, clip-path. */
  --d-1: 150ms;   /* hover, нажатие */
  --d-2: 250ms;   /* подчёркивания, открытие меню */
  --d-3: 400ms;   /* раскрытие FAQ/шага, индикатор, перекат цифр */
  --d-4: 700ms;   /* проявление при прокрутке, маски заголовков */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);       /* для всего */
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);  /* только индикатор переключателя и чекбокс */
  --stagger: 60ms;

  /* Ширина самого длинного слова заголовка в em (КАПС, Sofia 850) + запас ~3%:
     размер не больше, чем помещается в колонку (иначе горизонтальный скролл).
     Замерено в браузере 2026-11-02; при смене текста H1 / заголовка политики — перемерить. */
  --h1-em: 5.8;
  --privacy-em: 8.7;
}
:lang(en) { --h1-em: 3.55; --privacy-em: 3; }    /* PERSONAL 3.40 · PRIVACY 2.82 */
:lang(pl) { --h1-em: 4.5;  --privacy-em: 5.2; }  /* PERSONALNY 4.31 · PRYWATNOŚCI 5.03 */
:lang(ru) { --h1-em: 5.8;  --privacy-em: 8.7; }  /* ПЕРСОНАЛЬНЫЙ 5.60 · КОНФИДЕНЦИАЛЬНОСТИ 8.41 */
:lang(uk) { --h1-em: 5.65; --privacy-em: 7; }    /* ПЕРСОНАЛЬНИЙ 5.44 · КОНФІДЕНЦІЙНОСТІ 6.76 */
/* Цитата «Обо мне», самая длинная строка в em (+3% запаса): en 5.16 · pl 5.88 · ru 6.00 · uk 5.98 */
:root { --quote-em: 6.2; }
:lang(en) { --quote-em: 5.35; }
:lang(pl) { --quote-em: 6.05; }
/* CTA «НАЧНЁМ?»: ширина строки в em (+2–3% запаса), замер 2026-11-02 */
:root { --cta-em: 3.2; }  /* НАЧНЁМ? 3.12 */
:lang(en) { --cta-em: 5.85; }  /* SHALL WE START? 5.67 */
:lang(uk) { --cta-em: 3.74; }  /* ПОЧНЕМО? 3.63 */
:lang(pl) { --cta-em: 4.53; }  /* ZACZYNAMY? 4.40 */

@media (min-width: 1000px) {
  :root { --header-h: 80px; --r-l: 28px; }
}

/* ============================================================ база */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--body);
  font-size: var(--fs-base);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, ul, figure { margin: 0; }
/* hidden сильнее любых display у компонентов (.btn и т. п.) */
[hidden] { display: none !important; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--white); text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
abbr[title] { text-decoration: none; }
strong { font-weight: 500; color: var(--white); }

.caps {
  font-family: var(--display);
  font-weight: 850;
  text-transform: uppercase;
  color: var(--white);
  font-variant-numeric: lining-nums tabular-nums;
}

.wrap {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Ритм страницы (ревизия 2, п.0): отступ секции 48 → 80px между 390 и 1440 — пустота между
   секциями ≈ 96px на телефоне и ≈ 160px на десктопе (было 192–256). */
.section { padding-block: var(--section-y); scroll-margin-top: var(--s-2); }

.section-title {
  font-size: var(--fs-h2);
  line-height: 0.92;
  letter-spacing: 0.005em;
  margin-bottom: var(--s-6);
  overflow-wrap: break-word;
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: var(--s-4); top: var(--s-4); background: var(--white); color: var(--ink); padding: var(--s-3) var(--s-4); z-index: 20; border-radius: var(--r-s); }

/* ============================================================ поверхности
   Глубина только тоном и тонкой светлой обводкой (inset), без теней.
   .surface / .raised — слои; .card — карточка с откликом на hover; .lit — серый свет; .grain — зерно. */
.surface { background-color: var(--surface); box-shadow: var(--line-1); }
.raised { background-color: var(--raised); box-shadow: var(--line-2); }
.card {
  border-radius: var(--r-m);
  transition: transform var(--d-2) var(--ease-out), box-shadow var(--d-2) var(--ease-out), background-color var(--d-2) var(--ease-out);
}
@media (hover: hover) {
  .card--interactive:hover { transform: translateY(-2px); box-shadow: var(--line-3); }
}
/* Свет: положение задаётся на элементе через --lx / --ly (по умолчанию центр). */
.lit {
  --lit-layer: radial-gradient(ellipse 60% 50% at var(--lx, 50%) var(--ly, 50%), var(--light), transparent 70%);
  background-image: var(--lit-layer);
}
.grain { background-image: var(--grain); }
.lit.grain { background-image: var(--grain), var(--lit-layer); }

/* ============================================================ проявление при прокрутке
   Одна система: main.js ставит .is-in через IntersectionObserver (один раз, порог 15%).
   Скрытое состояние — только при html.reveal (его ставит скрипт в <head>, снимает, если main.js
   не загрузился) и без prefers-reduced-motion. Без JS всё видно сразу.
     [data-reveal]               — блок: opacity 0→1 + сдвиг 14px вверх
     [data-reveal-group]         — дети проявляются со сдвигом --stagger (не больше 6 ступеней)
     [data-reveal="title"] > span — заголовок выезжает снизу из маски */
@media (prefers-reduced-motion: no-preference) {
  .reveal [data-reveal]:not([data-reveal="title"]),
  .reveal [data-reveal-group] > * {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--d-4) var(--ease-out), transform var(--d-4) var(--ease-out);
    transition-delay: calc(var(--i, 0) * var(--stagger));
  }
  .reveal [data-reveal].is-in:not([data-reveal="title"]),
  .reveal [data-reveal-group].is-in > * { opacity: 1; transform: none; }

  /* Маска заголовка: снизу обрезка по краю строки (с запасом под Ę, Й, Ї), по бокам и сверху — свободно. */
  .reveal [data-reveal="title"] { clip-path: inset(-0.5em -0.5em -0.12em -0.5em); }
  .reveal [data-reveal="title"] > span {
    display: block;
    transform: translateY(140%); /* с запасом: точки Ё и надстрочные знаки не торчат над маской */
    transition: transform var(--d-4) var(--ease-out);
  }
  .reveal [data-reveal="title"].is-in > span { transform: none; }
}

/* ============================================================ кнопки и ссылки-действия
   Pill. Капс с разрядкой — только здесь и в навигации. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 var(--s-6);
  border: 2px solid var(--white);
  border-radius: var(--r-pill);
  font-family: var(--display);
  font-weight: 800;
  font-size: 17px;
  line-height: 1.1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--d-1) var(--ease-out), color var(--d-1) var(--ease-out),
              border-color var(--d-1) var(--ease-out), transform var(--d-1) var(--ease-out);
}
.btn:active { transform: scale(0.98); }
.btn--primary { background: var(--white); color: var(--ink); }
/* Ghost: контур stone (≥3:1 к фону), на hover — слой hover и белый контур. */
.btn--ghost { background: transparent; color: var(--white); border-color: var(--stone); }
@media (hover: hover) {
  .btn--primary:hover { background: transparent; color: var(--white); }
  .btn--ghost:hover { background: var(--hover); border-color: var(--white); }
}
.btn--small { min-height: 42px; padding: 0 var(--s-5); font-size: 15px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.6; cursor: progress; }

.link-action {
  font-family: var(--display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
}
.link-action:hover { text-decoration-thickness: 4px; }

/* ============================================================ шапка
   Десктоп: липкая. Высота 80px, прилипает с top: -16px — видны нижние 64px; при прокрутке
   (.is-scrolled, main.js) содержимое сдвигается на 8px к центру видимой части и появляется
   непрозрачный фон с нижней линией. Высота в потоке не меняется — без прыжков вёрстки.
   Мобильный: обычная (навигация — в нижней панели). */
.site-header { position: relative; z-index: 15; }
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  box-shadow: inset 0 -1px 0 rgb(255 255 255 / 0.06);
  opacity: 0;
  transition: opacity var(--d-2) var(--ease-out);
  pointer-events: none;
}
.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-height: var(--header-h);
}
/* Монограмма IM (форма фавикона), белая; полное имя — скрытым текстом */
.brand {
  display: inline-flex;
  margin-right: auto;
  color: var(--white);
  text-decoration: none;
}
.brand__mark { display: block; width: auto; height: 26px; fill: currentColor; }
.nav { display: none; }
.nav ul { display: flex; gap: var(--s-5); }
.nav a, .langs a, .lang-menu__toggle {
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
.nav a { position: relative; display: inline-block; padding-block: var(--s-1); color: var(--text); transition: color var(--d-1) var(--ease-out); }
/* Подчёркивание выезжает слева: тонкое (1.5px), с отступом ~6px от низа букв */
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 3px;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-2) var(--ease-out);
}
.nav a:hover { color: var(--white); }
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); }
.header-cta { display: none; }

@media (min-width: 1000px) {
  html { scroll-padding-top: 64px; }
  .site-header { position: sticky; top: -16px; }
  .site-header__inner { transition: transform var(--d-2) var(--ease-out); }
  .site-header.is-scrolled::before,
  .no-js .site-header::before { opacity: 1; } /* без JS класса прокрутки нет — фон сразу */
  .site-header.is-scrolled .site-header__inner { transform: translateY(8px); }
  .brand__mark { height: 30px; }
  .nav { display: block; }
  .header-cta { display: inline-flex; }
}
/* Без JS нижней панели нет — навигация видна прямо в шапке. */
@media (max-width: 999.98px) {
  .no-js .site-header__inner { flex-wrap: wrap; padding-block: var(--s-3); row-gap: 0; }
  .no-js .nav { display: block; order: 3; width: 100%; }
  .no-js .nav ul { flex-wrap: wrap; column-gap: var(--s-4); }
  .no-js .nav a { display: inline-block; padding-block: var(--s-2); }
}

/* Выбор языка: компактный выпадающий список (<details>). */
.lang-menu { position: relative; }
.lang-menu__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  /* Высота = кнопке «Записаться» рядом (.btn--small, 42px). line-height: 1 и равные вертикальные
     отступы: замер по пикселям — капс (10px) и глобус (16px) стоят ровно по центру pill (±0.5px).
     Слева отступ на 2px меньше: круг глобуса оптически легче прямых букв справа. */
  height: 42px;
  padding: 0 var(--s-4) 0 14px;
  line-height: 1;
  border-radius: var(--r-pill);
  /* Постоянная тонкая контурная pill-рамка вместо заливки: серая заливка поверх фото hero
     читалась мутным пятном. Hover и открытый список — рамка ярче. */
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18);
  color: var(--white);
  list-style: none;
  cursor: pointer;
  transition: box-shadow var(--d-1) var(--ease-out);
}
.lang-menu__toggle::-webkit-details-marker { display: none; }
.lang-menu__globe { flex: none; }
/* Разрядка добавляет хвост после последней буквы — убираем, чтобы код стоял по центру pill */
.lang-menu__current { margin-right: -0.08em; }
.lang-menu[open] .lang-menu__toggle { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.4); }
@media (hover: hover) {
  .lang-menu__toggle:hover { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.4); }
}
.lang-menu__list {
  position: absolute;
  right: 0;
  top: calc(100% + var(--s-2));
  min-width: 200px;
  padding: var(--s-2);
  background: var(--raised);
  border-radius: var(--r-m);
  box-shadow: var(--line-2);
}
.lang-menu[open] .lang-menu__list { animation: drop-in var(--d-2) var(--ease-out); }
@keyframes drop-in { from { opacity: 0; transform: translateY(-4px); } }
.lang-menu__list a {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 44px;
  padding: 0 var(--s-3);
  border-radius: var(--r-s);
  color: var(--text);
  text-decoration: none;
  transition: background-color var(--d-1) var(--ease-out);
}
.lang-menu__list a:hover { background: var(--hover); color: var(--white); }
.lang-menu__code {
  min-width: 2.2em;
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.08em;
  color: var(--ash);
}
/* Текущий язык: белый текст и точка справа */
.lang-menu__list a[aria-current="page"],
.lang-menu__list a[aria-current="page"] .lang-menu__code { color: var(--white); }
.lang-menu__list a[aria-current="page"]::after {
  content: "";
  width: 6px; height: 6px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--white);
}

/* Подсказка о сохранённом языке (вставляет main.js) */
.lang-suggest {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-2) var(--gutter);
  background: var(--surface);
  border-bottom: 1px solid var(--slate);
  font-size: var(--fs-s);
}
.lang-suggest a { font-weight: 500; }
.lang-suggest button {
  background: none; border: 0; color: var(--ash); font: inherit; cursor: pointer;
  min-height: 40px; padding: 0 var(--s-2);
}
.lang-suggest button:hover { color: var(--white); }

/* ============================================================ нижняя панель и шторка (мобильный) */
.bottom-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 10;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3);
  padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom));
  background: var(--ink);
  border-top: 1px solid var(--slate);
  transform: translateY(105%);
  transition: transform var(--d-2) var(--ease-out);
}
.bottom-bar.is-shown { transform: none; }
.bottom-bar[hidden] { display: none; }
@media (min-width: 1000px) { .bottom-bar { display: none; } }

.sheet {
  position: fixed;
  inset: auto 0 0 0;
  width: 100%;
  max-width: none;
  max-height: 92svh;
  margin: 0;
  padding: var(--s-4) var(--gutter) calc(var(--s-6) + env(safe-area-inset-bottom));
  background: var(--surface);
  color: var(--text);
  border: 0;
  border-radius: var(--r-l) var(--r-l) 0 0;
  box-shadow: var(--line-1);
  overflow: auto;
}
.sheet::backdrop { background: rgba(0, 0, 0, 0.7); }
.sheet[open] { animation: sheet-in var(--d-3) var(--ease-out); }
@keyframes sheet-in { from { transform: translateY(40px); opacity: 0; } }
.sheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-4); }
.sheet__close {
  min-height: 44px; padding: 0 var(--s-2);
  background: none; border: 0; color: var(--white); cursor: pointer;
  font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase;
}
.sheet__nav a { display: block; padding-block: var(--s-2); font-size: 44px; line-height: 1; text-decoration: none; }
.sheet .langs { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--slate); }
.sheet .langs ul { display: flex; flex-wrap: wrap; gap: var(--s-2); }
/* Языки в шторке — строка pill-чипов; текущий — белая заливка */
.sheet .langs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  min-height: 44px;
  padding: 0 var(--s-4);
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--stone);
  color: var(--white);
  font-size: 17px;
}
.sheet .langs a[aria-current="page"] { background: var(--white); color: var(--ink); box-shadow: none; }
.sheet__phone { margin-top: var(--s-3); }
.sheet__phone a { font-family: var(--display); font-weight: 800; font-size: 24px; text-decoration: none; font-variant-numeric: tabular-nums; }

/* ============================================================ 1. hero
   Фото без рамки: лежит слоем под текстом и растворяется в фоне маской (края уходят в ink).
   Hero начинается от самого верха страницы — под прозрачной шапкой (margin-top: −высота шапки),
   верх фото тоже гаснет, чтобы навигация и логотип стояли на тёмном.
   Мобильный: фото на всю ширину экрана, гаснет сверху и снизу; H1 лежит в зоне растворения.
   Десктоп: фото прижато к правому краю экрана, не шире 760px (исходник 960px — шире станет
   мыльным); гаснет слева, сверху и снизу. H1 правым краем заходит в зону растворения. */
.hero {
  position: relative;
  overflow-x: clip;
  margin-top: calc(-1 * var(--header-h));
}
/* Зерно на весь hero поверх фото: сшивает снимок с фоном и прячет шов растворения. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  /* Зерно чуть осветляет ink — к низу гаснет, иначе на стыке со следующей секцией ступенька */
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
  pointer-events: none;
}
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
/* Текст поверх зерна (зерно — только на фото и фоне) */
.hero__hello, .hero__body, .hero__scroll { position: relative; z-index: 1; }
.hero__media {
  grid-area: 1 / 1;
  position: relative;
  margin-inline: calc(-1 * var(--gutter)); /* мобильный: от края до края экрана */
  --fade-top: linear-gradient(to bottom, transparent, #000 22%);
  --fade-bottom: linear-gradient(to top, transparent, rgb(0 0 0 / 0.3) 18%, rgb(0 0 0 / 0.7) 36%, #000 var(--fade-to, 50%));
  -webkit-mask-image: var(--fade-top), var(--fade-bottom);
  mask-image: var(--fade-top), var(--fade-bottom);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.hero__photo { display: block; height: 100%; overflow: hidden; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
/* Мобильный: кадр 3:4 целиком (верх уходит под шапку — голове нужен запас). Нижние 32px фото
   (почти растворённые) заходят под приветствие: кнопка hero остаётся в первом экране.
   На планшетах высота ограничена, чтобы фото не съедало экран. */
@media (max-width: 999.98px) {
  .hero__media { margin-bottom: -32px; }
  /* Затемнение нижней зоны фото: на ней лежат приветствие и H1 (в порядке чтения — приветствие
     первым). Растворение маской гасит только самый низ, а приветствие стоит выше, на руках —
     без затемнения мелкий текст там не набирает 4.5:1. Высота зоны — --scrim (по языкам). */
  .hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--ink) 0%, rgb(13 13 13 / 0.82) calc(var(--scrim, 42%) * 0.6), rgb(13 13 13 / 0.6) calc(var(--scrim, 42%) * 0.85), transparent var(--scrim, 42%));
    pointer-events: none;
  }
  .hero__grid { padding-bottom: var(--s-8); } /* до «Обо мне» — как между остальными секциями */
  /* en/pl: H1 в 3 строки, приветствие и верх H1 ложатся на предплечья — растворение и затемнение
     начинаются выше (замер по пикселям под текстом: ru/uk 7.4+, en/pl 8.0+ у приветствия). */
  :lang(en) .hero__media, :lang(pl) .hero__media { --fade-to: 78%; --scrim: 55%; }
  .hero__photo img { aspect-ratio: 3 / 4; max-height: 82svh; object-position: 50% 20%; }
}
.hero__head {
  grid-area: 1 / 1;
  align-self: end;
  position: relative; /* поверх фото: у img анимация transform, она создаёт свой слой */
  z-index: 1;
  padding-bottom: var(--s-2);
  container-type: inline-size;
}
/* Приветствие — перед H1 и в порядке чтения, и визуально (на мобильном — тоже на фото, над H1;
   контраст держит затемнение нижней зоны фото, см. .hero__media::after). */
.hero__hello { margin-bottom: var(--s-2); font-size: var(--fs-l); color: var(--text); }
.hero__title {
  font-size: var(--fs-h1);
  font-size: min(var(--fs-h1), calc(100cqi / var(--h1-em)));
  line-height: 0.9;
  letter-spacing: 0.005em;
}
.hero__title .w,
.hero__title .w > span { display: inline-block; }
.hero__body { grid-row: 2; margin-top: var(--s-4); }
.hero__lead { max-width: 38ch; text-wrap: pretty; }
/* Языки тренировок — над кнопкой, чтобы их видели сразу */
.hero__meta { margin-top: var(--s-4); font-size: var(--fs-s); color: var(--white); }
.hero__meta strong { font-weight: 500; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-5); }
.hero__scroll { display: none; }

@media (min-width: 1000px) {
  .hero__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: 1fr auto auto auto 1fr;
    column-gap: var(--s-5);
    min-height: min(100svh, calc(940px + var(--header-h)));
    padding-block: calc(var(--header-h) + var(--s-3)) var(--s-7);
  }
  /* Фото — слой hero (не ячейка сетки): от правого края экрана, не шире 760px и не левее
     ~45% контента. Растворение слева на 34% ширины — левое плечо уходит в темноту, лицо
     остаётся целиком видимым. Высота — весь hero, размер строк сетки не меняет. */
  .hero__media {
    position: absolute;
    top: 0; bottom: 0; right: 0;
    width: min(760px, calc(100% - var(--edge) - 0.45 * (100% - 2 * var(--edge))));
    margin: 0;
    --fade-left: linear-gradient(to right, transparent, rgb(0 0 0 / 0.25) 12%, rgb(0 0 0 / 0.75) 24%, #000 34%);
    --fade-top: linear-gradient(to bottom, transparent, #000 18%);
    --fade-bottom: linear-gradient(to top, transparent, rgb(0 0 0 / 0.4) 12%, #000 30%);
    -webkit-mask-image: var(--fade-left), var(--fade-top), var(--fade-bottom);
    mask-image: var(--fade-left), var(--fade-top), var(--fade-bottom);
    -webkit-mask-composite: source-in, source-in;
    mask-composite: intersect;
  }
  .hero__photo img { object-position: 50% 22%; }
  .hero__hello { max-width: 30ch; margin-bottom: var(--s-4); color: var(--ash); }
  .hero__head { grid-column: 1 / 8; grid-row: 3; align-self: auto; padding: 0 var(--s-5) 0 0; }
  .hero__body { grid-column: 1 / 6; grid-row: 4; margin-top: var(--s-6); }
  .hero__meta { margin-top: var(--s-5); }
  .actions { margin-top: var(--s-6); }
  /* Индикатор прокрутки: линия 40px, по ней раз в 2 с проезжает штрих 8px.
     Единственное зацикленное движение; исчезает после первой прокрутки (html.has-scrolled). */
  .hero__scroll {
    display: block;
    grid-column: 1;
    grid-row: 5;
    align-self: end;
    width: 2px;
    transition: opacity var(--d-3) var(--ease-out);
  }
  .hero__scroll span {
    display: block;
    position: relative;
    height: 40px;
    overflow: hidden;
    border-radius: 1px;
    background: var(--slate);
  }
  .hero__scroll span::after {
    content: "";
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 8px;
    background: var(--white);
    transform: translateY(-8px);
  }
  .has-scrolled .hero__scroll { opacity: 0; }
}

/* Появление при загрузке (только с JS и без prefers-reduced-motion):
   0 мс фото «оседает» 1.04→1 внутри маски (края остаются мягкими; без opacity — LCP не ждёт);
   100 мс приветствие;
   200 мс слова H1 по очереди из масок (+50 мс на слово); 500 мс лид; 600 мс языки и кнопки;
   1200 мс индикатор прокрутки. */
@media (prefers-reduced-motion: no-preference) {
  .hero__photo img { animation: settle 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .js .hero__hello,
  .js .hero__body > * { animation: rise var(--d-4) var(--ease-out) both; }
  .js .hero__hello { animation-delay: 100ms; }
  .js .hero__lead { animation-delay: 500ms; }
  .js .hero__meta, .js .hero .actions { animation-delay: 600ms; }
  /* Маска слова: обрезка только снизу (с запасом под Д, Ц, Ę), сверху и по бокам свободно */
  .js .hero__title .w { clip-path: inset(-0.5em -0.3em -0.14em -0.3em); }
  .js .hero__title .w > span {
    animation: word-up var(--d-4) var(--ease-out) both;
    animation-delay: calc(200ms + var(--wi, 0) * 50ms);
  }
  .js .hero__scroll span { animation: fade-in var(--d-4) var(--ease-out) 1200ms both; }
  .hero__scroll span::after { animation: scroll-hint 2s var(--ease-out) 1.2s infinite; }

  @keyframes settle { from { transform: scale(1.04); } }
  @keyframes fade-in { from { opacity: 0; } }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } }
  @keyframes word-up { from { transform: translateY(120%); } }
  @keyframes scroll-hint { 0% { transform: translateY(-8px); } 70%, 100% { transform: translateY(40px); } }
}
@media (prefers-reduced-motion: reduce) { .hero__scroll { display: none !important; } }

/* ============================================================ 2. обо мне
   Ревизия 2, вариант B: фото без рамки растворяется в фоне (как в hero, зеркально — гаснет
   к тексту); поверх — только цитата капсом в зоне растворения снизу. «16» — в потоке текста
   (между лидом и абзацами), шрифтом цен, без плашки; цифры перекатываются (main.js → модуль 10).
   Мобильный: заголовок → фото на всю ширину → текст → список.
   Десктоп: фото в колонках 1–6, заголовок и текст 7–12. */
.about__grid { display: grid; gap: var(--s-6); }
.about .section-title { margin-bottom: 0; }
.about__media {
  position: relative;
  margin-inline: calc(-1 * var(--gutter)); /* мобильный: от края до края экрана */
  container-type: inline-size;
}
.about__photo {
  display: block;
  --fade-top: linear-gradient(to bottom, transparent, #000 12%);
  --fade-bottom: linear-gradient(to top, transparent, rgb(0 0 0 / 0.2) 14%, rgb(0 0 0 / 0.7) 32%, #000 50%);
  -webkit-mask-image: var(--fade-top), var(--fade-bottom);
  mask-image: var(--fade-top), var(--fade-bottom);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.about__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 12%; }
/* Цитата — его собственная фраза из текста, крупно капсом, без кавычек-иконок и рамки */
.about__quote {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 0;
  margin: 0;
  /* Кегль ограничен шириной фото: --quote-em — ширина самой длинной строки в em (замер, +3%) */
  font-size: min(clamp(44px, 31px + 3.4vw, 80px), calc((100cqi - 2 * var(--gutter)) / var(--quote-em)));
  line-height: 0.92;
  letter-spacing: 0.005em;
}
.about__quote-line { display: block; }
.about__text { display: grid; gap: var(--s-4); max-width: 62ch; text-wrap: pretty; }
/* «16»: возраст, с которого Иван в силовом спорте (не стаж — подпись это уточняет).
   Тот же шрифт и цифры, что у цен; подпись рядом, по центру высоты цифр. */
.about__since { display: flex; align-items: center; gap: var(--s-4); margin-block: var(--s-2); }
.about__since-num {
  flex: none;
  font-family: var(--display);
  font-weight: 850;
  font-size: var(--fs-num);
  line-height: 0.85;
  color: var(--white);
  font-variant-numeric: lining-nums tabular-nums;
}
.about__since-text { max-width: 24ch; font-weight: 500; line-height: 1.35; color: var(--text); text-wrap: balance; }
/* Лид — основной шрифт крупным кеглем: спокойная уверенная фраза, а не сжатый заголовок */
.about__lead {
  font-weight: 500;
  font-size: clamp(20px, 17.8px + 0.57vw, 26px);
  line-height: 1.4;
  color: var(--white);
  max-width: 32ch;
  margin-bottom: var(--s-2);
  text-wrap: balance; /* короткая фраза: без одинокого слова на второй строке */
}
/* Факты списком с линейными иконками (без кружков-подложек) */
.icon {
  flex: none;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.facts { display: grid; gap: var(--s-4); margin-top: var(--s-4); }
.facts li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-weight: 500;
  line-height: 1.4;
  color: var(--text);
}
.facts .icon { color: var(--white); margin-top: -1px; }

@media (min-width: 1000px) {
  .about__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    column-gap: var(--s-5);
    row-gap: var(--s-6);
  }
  .about .section-title { grid-column: 7 / 13; grid-row: 1; }
  .about__media { grid-column: 1 / 7; grid-row: 1 / 3; align-self: start; margin: 0; }
  /* Десктоп: фото в колонках, поэтому гаснут и боковые края — сильнее справа, к тексту */
  .about__photo {
    --fade-left: linear-gradient(to right, transparent, #000 14%);
    --fade-right: linear-gradient(to left, transparent, rgb(0 0 0 / 0.6) 12%, #000 26%);
    -webkit-mask-image: var(--fade-left), var(--fade-right), var(--fade-top), var(--fade-bottom);
    mask-image: var(--fade-left), var(--fade-right), var(--fade-top), var(--fade-bottom);
    -webkit-mask-composite: source-in, source-in, source-in;
  }
  .about__quote { left: 0; right: 0; font-size: min(clamp(44px, 31px + 3.4vw, 80px), calc(100cqi / var(--quote-em))); }
  .about__text { grid-column: 7 / 13; grid-row: 2; }
  .facts { grid-template-columns: 1fr 1fr; column-gap: var(--s-5); row-gap: var(--s-4); }
}
/* Строки цитаты выезжают из масок по очереди */
@media (prefers-reduced-motion: no-preference) {
  .reveal .about__quote-line:nth-child(2) > span { transition-delay: 90ms; }
  .about__since-num .roll__col { transition-duration: 900ms; }
  .about__since-num .roll__col:nth-child(2) { transition-delay: 80ms; }
}

/* ============================================================ 3. с чем я помогаю
   Выбор целей: плитки — настоящие чекбоксы (в fieldset), выбор не ограничен. Отмеченная — слой
   raised, обводка .5, кружок заливается белым, галочка пружинит.
   Кнопка ведёт к форме и подставляет цели (main.js → модуль 11).
   Мобильный: строки (иконка · заголовок и пояснение · отметка). Десктоп: 3 колонки. */
.goals__set { margin: 0; padding: 0; border: 0; min-width: 0; }
.goals .section-title { margin-bottom: var(--s-3); }
.goals__intro { float: left; width: 100%; max-width: 48ch; margin-bottom: var(--s-5); padding: 0; font-size: var(--fs-l); line-height: 1.45; color: var(--text); text-wrap: balance; }
.goals__intro + * { clear: both; } /* legend в потоке, без особого позиционирования fieldset */
.goals__grid { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.goals__group { margin: var(--s-6) 0 var(--s-3); font-weight: 500; color: var(--white); }
.goal__card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "icon title check" "icon text check";
  align-items: center;
  column-gap: var(--s-4);
  row-gap: 2px;
  height: 100%;
  padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5);
  border-radius: var(--r-m);
  background-color: var(--surface);
  box-shadow: var(--line-1);
  cursor: pointer;
  transition: transform var(--d-2) var(--ease-out), box-shadow var(--d-2) var(--ease-out), background-color var(--d-2) var(--ease-out);
}
/* Поле не скрыто display:none — оно и есть доступное имя и фокус; клик по плитке — клик по label */
.goal__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.goal__icon { grid-area: icon; width: 28px; height: 28px; color: var(--white); }
.goal__title {
  grid-area: title;
  font-family: var(--display);
  font-weight: 750;
  font-size: clamp(22px, 20px + 0.5vw, 28px);
  line-height: 1.1;
  color: var(--white);
}
.goal__text { grid-area: text; font-size: var(--fs-s); line-height: 1.45; color: var(--ash); }
.goal__check {
  grid-area: check;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--stone);
  transition: background-color var(--d-1) var(--ease-out), box-shadow var(--d-1) var(--ease-out);
}
.goal__check svg {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: scale(0.4);
  transition: transform var(--d-3) var(--ease-spring), opacity var(--d-1) var(--ease-out);
}
@media (hover: hover) {
  .goal__card:hover { transform: translateY(-2px); box-shadow: var(--line-3); }
  .goal__card:hover .goal__check { box-shadow: inset 0 0 0 1.5px var(--white); }
}
.goal__card:active { transform: scale(0.99); }
/* Отмечена: слой raised, обводка .5 и белый кружок с галочкой. Сплошная белая линия — только у
   кольца фокуса, иначе с клавиатуры фокус не отличить от отметки. */
.goal__card:has(:checked) { background-color: var(--raised); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.5); }
.goal__card:has(:checked) .goal__check { background: var(--white); box-shadow: none; }
.goal__card:has(:checked) .goal__check svg { opacity: 1; transform: none; }
:root:not([data-input="pointer"]) .goal__card:has(:focus-visible) { outline: 2px solid var(--white); outline-offset: 3px; }

.goals__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-6); }
/* «Выбрано: N» — появляется снизу при первом выборе; место зарезервировано, кнопка не прыгает */
.goals__count {
  min-width: 7.5em;
  font-weight: 500;
  color: var(--white);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--d-2) var(--ease-out), transform var(--d-2) var(--ease-out);
}
.goals__count.is-on { opacity: 1; transform: none; }
.no-js .goals__count { display: none; }
.goals__note { flex-basis: 100%; font-size: var(--fs-xs); color: var(--ash); }

@media (min-width: 700px) {
  .goals__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .goals__intro { margin-bottom: var(--s-6); }
  .goals__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
  /* Плитка: иконка и отметка сверху, заголовок и пояснение снизу */
  /* Заголовки в ряду на одной высоте (фиксированный отступ от иконки), пояснение — под ним
     и может быть в 1–2 строки; плитки ряда равной высоты (stretch). */
  .goal__card {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "icon check" "title title" "text text";
    align-items: start;
    row-gap: var(--s-2);
    padding: var(--s-5) var(--s-5) var(--s-6);
    border-radius: var(--r-l);
  }
  .goal__icon { width: 32px; height: 32px; }
  .goal__title { margin-top: var(--s-7); }
  .goals__group { margin-top: var(--s-7); }
  .goals__foot { margin-top: var(--s-7); }
  .goals__note { flex-basis: auto; margin-left: auto; }
}

/* ============================================================ 4. как мы начнём
   Плитки-шаги, каждая целиком — кнопка. Состояние (main.js → модуль 6): .is-open у шага;
   у сегментов прогресса .is-done / .is-active; у секции .is-playing — идёт автопрокрутка.
   Базовые стили — вид без JS: все плитки раскрыты; .js включает состояния. */
.steps .section-title { margin-bottom: var(--s-3); }
.steps__intro { max-width: 48ch; margin-bottom: var(--s-5); font-size: var(--fs-l); line-height: 1.45; color: var(--text); text-wrap: balance; }
.steps__cta { margin-top: var(--s-6); }
.steps__progress { display: none; }
.steps__list {
  display: grid;
  gap: var(--s-3);
  margin: var(--s-2) 0 0;
  padding: 0;
  list-style: none;
}
.step {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-l);
  background-color: var(--surface);
  box-shadow: var(--line-1);
  cursor: pointer;
  transition: transform var(--d-2) var(--ease-out), box-shadow var(--d-2) var(--ease-out),
              background-color var(--d-3) var(--ease-out);
}
/* Раскрытая плитка — приподнятая и светлее: слой raised, обводка ярче, серый свет в углу */
.step.is-open, .no-js .step {
  background-color: var(--raised);
  background-image: radial-gradient(ellipse 80% 70% at 100% 0%, var(--light), transparent 70%);
  box-shadow: var(--line-2);
}
@media (hover: hover) {
  .step:hover { transform: translateY(-2px); box-shadow: var(--line-3); }
}
.step__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "num title icon" "num summary icon";
  align-items: center;
  column-gap: var(--s-4);
  row-gap: var(--s-1);
  width: 100%;
  padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5);
  background: none;
  border: 0;
  border-radius: inherit;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
/* Фокус рисуем на всей плитке */
@supports selector(:has(*)) {
  .step__head:focus-visible { outline: none; }
  :root:not([data-input="pointer"]) .step:has(.step__head:focus-visible) { outline: 2px solid var(--white); outline-offset: 3px; }
}
.step__num {
  grid-area: num;
  min-width: 0.6em;
  font-size: 44px;
  line-height: 0.85;
  color: var(--ash);
  transition: color var(--d-2) var(--ease-out);
}
.step__title {
  grid-area: title;
  font-family: var(--display);
  font-weight: 750;
  font-size: clamp(24px, 22px + 0.4vw, 28px);
  line-height: 1.1;
  color: var(--white);
}
.step__summary { grid-area: summary; font-size: var(--fs-s); line-height: 1.45; color: var(--ash); }
/* «+» в кружке (общий для плиток шагов и FAQ); у раскрытого поворачивается в «×» на белом */
.plus {
  position: relative;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--stone);
  transition: transform var(--d-3) var(--ease-out), background-color var(--d-2) var(--ease-out), box-shadow var(--d-2) var(--ease-out);
}
.plus::before,
.plus::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 14px; height: 2px;
  margin: -1px 0 0 -7px;
  border-radius: 1px;
  background: var(--white);
  transition: background-color var(--d-2) var(--ease-out);
}
.plus::after { transform: rotate(90deg); }
.step.is-open .plus, .no-js .step .plus, .faq__item[open] .plus { transform: rotate(45deg); background: var(--white); box-shadow: none; }
.step.is-open .plus::before, .step.is-open .plus::after,
.no-js .step .plus::before, .no-js .step .plus::after,
.faq__item[open] .plus::before, .faq__item[open] .plus::after { background: var(--ink); }
@media (hover: hover) {
  .step:not(.is-open):hover .plus,
  .faq__item:not([open]) summary:hover .plus { box-shadow: inset 0 0 0 1px var(--white); }
}
.step__icon { grid-area: icon; }
.step.is-open .step__num, .no-js .step__num { color: var(--white); }

/* Подробность — внутри плитки; раскрытие по высоте через grid 0fr→1fr */
.step__detail {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--d-3) var(--ease-out);
}
.step__detail > div { min-height: 0; overflow: hidden; }
.step__detail p {
  padding: 0 var(--s-5) var(--s-5);
  font-size: var(--fs-s);
  line-height: 1.6;
  color: var(--text);
  max-width: 52ch;
  transition: opacity var(--d-3) var(--ease-out) 100ms;
}
.js .step:not(.is-open) .step__detail { grid-template-rows: 0fr; }
.js .step:not(.is-open) .step__detail > div { visibility: hidden; transition: visibility 0s linear var(--d-3); }
.js .step:not(.is-open) .step__detail p { opacity: 0; transition-delay: 0s; transition-duration: var(--d-1); }

@media (min-width: 1000px) {
  /* Сегментированный прогресс: 4 части; заполнены пройденные и текущая.
     Во время автопрокрутки текущая заполняется за --autoplay (5 с). */
  .steps__intro { margin-bottom: var(--s-6); }
  .steps__progress { display: flex; gap: var(--s-2); margin: 0 0 var(--s-5); }
  .steps__seg {
    flex: 1 1 0;
    height: 4px;
    overflow: hidden;
    border-radius: var(--r-pill);
    background: var(--slate);
  }
  .steps__seg i {
    display: block;
    height: 100%;
    background: var(--white);
    transform-origin: left;
    transition: transform var(--d-3) var(--ease-out);
  }
  .js .steps__seg:not(.is-done):not(.is-active) i { transform: scaleX(0); }
  .steps.is-playing .steps__seg.is-active i { animation: seg-fill var(--autoplay, 5s) linear both; }
  @keyframes seg-fill { from { transform: scaleX(0); } }

  /* Плитки в ряд: раскрытая плавно шире, остальные сжимаются */
  .steps__list { display: flex; align-items: stretch; gap: var(--s-3); }
  /* Высота ряда задана с запасом под раскрытую плитку — при смене шага ниже ничего не прыгает.
     Содержимое одним блоком сверху: цифра, сразу под ней заголовок, резюме и подробность. */
  .step { flex: 1 1 0; min-width: 0; min-height: 320px; transition-property: transform, box-shadow, background-color, flex-grow; }
  .js .step.is-open { flex-grow: 2.4; }
  .step__head {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "num icon" "title title" "summary summary";
    align-items: start;
    row-gap: var(--s-2);
    padding: var(--s-5) var(--s-5) var(--s-3);
  }
  .step__num { font-size: clamp(52px, 30px + 2.2vw, 64px); margin-bottom: var(--s-3); }
  .step__summary { min-height: 2.9em; }
}
@media (min-width: 1000px) and (prefers-reduced-motion: no-preference) {
  .step { transition-duration: var(--d-2), var(--d-2), var(--d-3), 600ms; }
}
/* ============================================================ 5. услуги и цены
   Фон ink: глубину дают панели. Ряды: конфигуратор, онлайн-карточка, направления. */
.services .section-title { margin-bottom: var(--s-7); }
.offer + .offer { margin-top: var(--s-8); }
/* Метка формата — чип над заголовком карточки (не eyebrow: обычный регистр, без разрядки) */
.offer__format {
  display: inline-block;
  margin-bottom: var(--s-4);
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-s);
  background: var(--hover);
  box-shadow: var(--line-1);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--white);
}
.offer__title {
  font-family: var(--display);
  font-weight: 750;
  font-size: var(--fs-h3);
  line-height: 1.12;
  color: var(--white);
}
.offer__duration { color: var(--ash); font-weight: 700; }
.offer__includes-title { margin-top: var(--s-5); font-size: var(--fs-s); color: var(--ash); }
.specs { margin-top: var(--s-3); }
.specs li { padding-block: var(--s-2); border-top: 1px solid var(--slate); }
.specs li:last-child { border-bottom: 1px solid var(--slate); }
/* Крупные цифры — фишка сайта: Sofia 850, табличные */
.num { font-size: var(--fs-num); line-height: 0.82; letter-spacing: -0.005em; }

/* ---------- ряд 1: конфигуратор пакета */
.offer--personal {
  --lx: 100%; --ly: 0%;
  display: grid;
  gap: var(--s-6);
  padding: var(--s-5) var(--s-4);
  border-radius: var(--r-l);
}
.pricer { display: grid; gap: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--slate); }
.pricer__choice { margin: 0; padding: 0; border: 0; min-width: 0; }
.pricer__legend { padding: 0; margin-bottom: var(--s-3); font-size: var(--fs-s); color: var(--ash); }

/* Без JS: статичный список пакетов (radio скрыты, «дисплея» нет) */
.seg { display: grid; }
.seg__thumb, .seg__n, .seg__unit, .seg__price, .seg__rec, .pricer__display { display: none; }
.seg__input { position: absolute; opacity: 0; pointer-events: none; }
.seg__opt {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name per" "total per";
  align-items: center;
  column-gap: var(--s-4);
  padding-block: var(--s-3);
  border-top: 1px solid var(--slate);
}
.seg__opt:last-of-type { border-bottom: 1px solid var(--slate); }
.seg__name { grid-area: name; font-weight: 500; color: var(--white); }
.seg__mark { display: block; font-size: var(--fs-xs); color: var(--white); }
.seg__total { grid-area: total; font-size: var(--fs-s); color: var(--ash); }
.seg__opt:has(.seg__input[value="single"]) .seg__total { display: none; } /* у разовой сумма = цена, без дубля */
.seg__per { grid-area: per; font-size: var(--fs-xs); color: var(--ash); white-space: nowrap; }
.seg__per .caps { font-size: 40px; line-height: 0.9; margin-right: var(--s-1); }

/* С JS: сегментированный переключатель 1 · 4 · 8 · 12 с едущим белым индикатором.
   В ячейке три строки — поэтому скругление r-m, а не pill (иначе ячейки становятся кругами). */
.js .seg {
  position: relative;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 4px;
  border-radius: var(--r-m);
  background: var(--ink);
  box-shadow: var(--line-2);
}
.js .seg__thumb {
  display: block;
  position: absolute;
  top: 4px; bottom: 4px; left: 0;
  width: 0;
  border-radius: calc(var(--r-m) - 4px);
  background: var(--white);
  transition: transform var(--d-3) var(--ease-spring), width var(--d-3) var(--ease-spring);
}
.js .seg.is-static .seg__thumb { transition: none; }
.js .seg__opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 84px;
  padding: var(--s-2) 0;
  border: 0;
  border-radius: calc(var(--r-m) - 4px);
  text-align: center;
  cursor: pointer;
  color: var(--white);
  transition: color var(--d-1) var(--ease-out);
}
.js .seg__total, .js .seg__per { display: none; }
/* Название пакета остаётся доступным именем radio — прячем только визуально */
.js .seg__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.js .seg__n { display: block; position: relative; font-size: 28px; line-height: 1; color: inherit; }
/* «тренировок» — самое длинное слово; на 375–390px ячейка ~75px, поэтому кегль от ширины экрана */
.js .seg__unit { display: block; position: relative; max-width: 100%; font-size: clamp(11px, 2.9vw, 13px); font-weight: 500; line-height: 1.2; }
.js .seg__price { display: block; position: relative; font-size: 12px; line-height: 1.2; color: var(--ash); white-space: nowrap; font-variant-numeric: tabular-nums; }
.js .seg__opt.is-checked { color: var(--ink); }
.js .seg__opt.is-checked .seg__price { color: rgb(13 13 13 / 0.62); } /* ≥4.5:1 на белом */
@media (hover: hover) { .js .seg__opt:not(.is-checked):hover { background: var(--hover); } }
/* Фокус с клавиатуры: фокус у radio всегда на выбранной ячейке (она белая) — поэтому кольцо
   тонкое тёмное внутри индикатора, а не второе белое снаружи (читалось как двойная обводка). */
:root:not([data-input="pointer"]) .seg__opt:has(.seg__input:focus-visible) { outline: 2px solid var(--ink); outline-offset: -7px; }
/* Подпись «Рекомендую для старта» — под ячейкой «4», видна всегда */
.js .seg__rec {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: var(--s-2);
  padding-inline: 4px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--white);
  white-space: nowrap;
}
.js .seg__rec span { grid-column: 2; justify-self: center; }

/* Дисплей: цена за тренировку крупно, строка суммы и экономии, кнопка */
.js .pricer__display { display: block; }
.pricer__price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s-3); row-gap: var(--s-2); white-space: nowrap; }
/* Плашка экономии «−40 zł»: белая pill, чёрный жирный текст — без цвета, на контрасте */
.save {
  display: inline-flex;
  align-items: center;
  align-self: center;
  margin-left: var(--s-1);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--ink);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.save[hidden] { display: none; }
.pricer__num { font-size: var(--fs-num); line-height: 1; letter-spacing: -0.005em; }
.pricer__unit { font-size: var(--fs-s); color: var(--ash); }
.pricer__line { margin-top: var(--s-2); min-height: 1.6em; overflow: hidden; color: var(--text); }
.pricer__line span { display: inline-block; }
/* Полная цена зачёркнута, рядом цена пакета */
.pricer__line s { margin-right: 0.25em; color: var(--ash); text-decoration-thickness: 1.5px; }
.pricer__cta { justify-self: stretch; }
/* Условия пакетов под ценой: «без срока» — преимущество, белым; «зал не входит» — оговорка, ash */
.pricer__notes { display: grid; gap: var(--s-1); font-size: var(--fs-xs); line-height: 1.45; color: var(--ash); text-wrap: pretty; }
.pricer__note--plus { font-size: var(--fs-s); font-weight: 500; color: var(--white); }

/* Перекат цифр: каждая цифра — колонка 0–9 в маске высотой 1em (строит main.js) */
.roll { display: inline-flex; height: 1em; overflow: hidden; vertical-align: top; }
.roll__col { display: flex; flex-direction: column; transition: transform var(--d-3) var(--ease-out); }
.roll__col > span { display: block; height: 1em; line-height: 1; text-align: center; }

/* ---------- ряд 2: онлайн */
.offer--online {
  display: grid;
  gap: var(--s-6);
  padding: var(--s-5) var(--s-4);
  border-radius: var(--r-l);
}
.offer__buy { display: grid; gap: var(--s-5); justify-items: start; }
.offer__price { display: flex; align-items: baseline; column-gap: var(--s-3); white-space: nowrap; }
.offer__unit { font-size: var(--fs-s); color: var(--ash); }

@media (min-width: 1000px) {
  .offer + .offer { margin-top: var(--s-9); }
  .offer--personal {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--s-5);
    align-items: stretch;
    padding: var(--s-7);
  }
  .offer--personal .offer__info { grid-column: 1 / 6; }
  /* Конфигуратор — правая часть той же карточки, отделён тонкой вертикальной линией */
  .pricer { grid-column: 6 / 13; padding: 0 0 0 var(--s-7); border-top: 0; border-left: 1px solid var(--slate); }
  .js .pricer {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "choice choice" "display cta" "notes notes";
    align-items: end;
    column-gap: var(--s-6);
    row-gap: var(--s-6);
  }
  .js .pricer__choice { grid-area: choice; }
  .js .pricer__display { grid-area: display; }
  .js .pricer__cta { grid-area: cta; justify-self: end; }
  .js .pricer__notes { grid-area: notes; }
  .js .seg__opt { min-height: 92px; }
  .js .seg__n { font-size: 34px; }
  .js .seg__unit { font-size: 14px; }
  .js .seg__price { font-size: 13px; }
  .offer--online {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--s-5);
    padding: var(--s-7) var(--s-7);
  }
  .offer--online .offer__info { grid-column: 1 / 7; }
  .offer--online .offer__buy { grid-column: 8 / 13; justify-items: end; align-content: end; } /* цена и кнопка вместе, внизу справа */
}

/* ============================================================ 6. FAQ
   Пункты — скруглённые поверхности: surface → hover → раскрытый raised.
   Раскрытие по высоте: ::details-content + interpolate-size (Chrome 131+); в остальных
   браузерах высоту ответа анимирует main.js (модуль 8). */
.faq__more { color: var(--ash); max-width: 30ch; }
.faq__more a { white-space: nowrap; font-variant-numeric: tabular-nums; }
.faq__list { display: grid; gap: var(--s-2); margin-top: var(--s-6); }
/* Мобильный: «Не нашли ответ? Позвоните» — после вопросов (до них фраза читается раньше времени).
   Обёртка с H2 растворяется (display: contents), порядок — через order. На десктопе — колонка слева. */
@media (max-width: 999.98px) {
  .faq__grid { display: flex; flex-direction: column; }
  .faq__aside { display: contents; }
  .faq__list { order: 1; margin-top: 0; }
  .faq__more { order: 2; margin-top: var(--s-5); }
}
.faq__item {
  border-radius: var(--r-m);
  background: var(--surface);
  box-shadow: var(--line-1);
  transition: background-color var(--d-2) var(--ease-out), box-shadow var(--d-2) var(--ease-out);
}
@media (hover: hover) { .faq__item:not([open]):hover { background: var(--hover); box-shadow: var(--line-3); } }
.faq__item[open] { background: var(--raised); box-shadow: var(--line-2); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5);
  border-radius: inherit;
  font-family: var(--display);
  font-weight: 750;
  font-size: clamp(22px, 20px + 0.6vw, 28px);
  line-height: 1.15;
  color: var(--white);
  list-style: none;
  cursor: pointer;
}
.faq__item summary::-webkit-details-marker { display: none; }
/* Отступы — у абзаца: запасная анимация (main.js) меняет высоту .faq__answer от нуля */
.faq__answer { overflow: hidden; }
.faq__answer p { max-width: calc(62ch + 2 * var(--s-5)); padding: 0 var(--s-5) var(--s-5); color: var(--text); }

@supports (interpolate-size: allow-keywords) {
  .faq__item { interpolate-size: allow-keywords; }
  .faq__item::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size var(--d-3) var(--ease-out), content-visibility var(--d-3) allow-discrete;
  }
  .faq__item[open]::details-content { block-size: auto; }
}

@media (min-width: 1000px) {
  .faq__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-5); align-items: start; }
  /* Липкий заголовок — ниже липкой шапки (64px) */
  .faq__aside { grid-column: 1 / 5; position: sticky; top: calc(64px + var(--s-6)); }
  .faq__list { grid-column: 5 / 13; margin-top: 0; }
  .faq__item summary { padding: var(--s-5) var(--s-5) var(--s-5) var(--s-6); }
  .faq__answer p { padding: 0 var(--s-6) var(--s-6); }
}

/* ============================================================ 7. контакты и форма
   Слева прямые контакты: телефон крупно (мотив цен), e-mail с ghost-pill «Скопировать», языки,
   мессенджеры (когда включены). На десктопе колонка липкая. Справа форма: raised, r-l, обводка .10.
   Поля r-s на ink, обводка stone; «Услуга» — чипы-radio pill; свой чекбокс согласия. */
.contact__direct { container-type: inline-size; }
.contact__lead { max-width: 46ch; }
.contact__phone { margin-top: var(--s-6); }
.contact__phone a {
  display: inline-block;
  font-size: var(--fs-phone);
  font-size: min(var(--fs-phone), calc(100cqi / 6.05));
  line-height: 0.95;
  white-space: nowrap;
  text-decoration: none;
}
.contact__phone a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; }
.contact__email { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin-top: var(--s-3); }
.contact__email a {
  font-family: var(--display);
  font-weight: 750;
  font-size: clamp(26px, 22px + 1vw, 36px);
  line-height: 1.1;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.contact__email a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.contact__write { margin-top: var(--s-5); font-weight: 500; color: var(--white); max-width: 40ch; }
.contact__messengers { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.contact__messengers:empty { display: none; }

/* «Скопировать»: маленькая ghost-pill. Обе подписи в одной ячейке сетки — ширина не меняется;
   «Скопировано» с галочкой выезжает снизу, исходная подпись уходит вверх. */
.copy {
  display: inline-grid;
  place-items: center;
  min-height: 40px;
  padding: 0 var(--s-4);
  background: transparent;
  color: var(--white);
  border: 1px solid var(--stone);
  border-radius: var(--r-pill);
  font-family: var(--display);
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  overflow: hidden;
  cursor: pointer;
  transition: background-color var(--d-1) var(--ease-out), border-color var(--d-1) var(--ease-out), transform var(--d-1) var(--ease-out);
}
.copy > span {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: -0.08em; /* хвост разрядки */
  transition: opacity var(--d-2) var(--ease-out), transform var(--d-2) var(--ease-out);
}
.copy__done { opacity: 0; transform: translateY(70%); }
.copy__done svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.copy.is-done { border-color: var(--white); }
.copy.is-done .copy__label { opacity: 0; transform: translateY(-70%); }
.copy.is-done .copy__done { opacity: 1; transform: none; }
.copy:active { transform: scale(0.98); }
@media (hover: hover) { .copy:hover { background: var(--hover); border-color: var(--white); } }

.form {
  display: grid;
  margin-top: var(--s-7);
  padding: var(--s-5) var(--s-4) var(--s-6);
  border-radius: var(--r-l);
}
@media (min-width: 700px) { .form { padding-inline: var(--s-6); } }
.form__body { display: grid; gap: var(--s-5); transition: opacity var(--d-2) var(--ease-out), transform var(--d-2) var(--ease-out); }
.form__body.is-out { opacity: 0; transform: translateY(-8px); }
.form__title { font-family: var(--display); font-weight: 750; font-size: var(--fs-h3); line-height: 1.1; color: var(--white); }
.form__row { display: grid; gap: var(--s-5); }
@media (min-width: 700px) { .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); } }

.field label, .chips legend { display: block; margin-bottom: var(--s-2); font-size: var(--fs-s); font-weight: 500; color: var(--text); }
.field__optional { color: var(--ash); font-weight: 400; }
.field input[type="text"],
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: var(--s-3);
  background: var(--ink);
  color: var(--white);
  border: 1px solid var(--stone);
  border-radius: var(--r-s);
  font: inherit;
  font-size: 17px; /* ≥16px: iOS не зумит поле */
  transition: border-color var(--d-1) var(--ease-out), box-shadow var(--d-1) var(--ease-out);
}
.field textarea { display: block; min-height: 120px; resize: vertical; }
.field textarea::placeholder { color: var(--ash); opacity: 1; }
@media (hover: hover) {
  .field input[type="text"]:hover, .field textarea:hover { border-color: var(--ash); }
}
/* Фокус: белая обводка поля + внешнее кольцо 2px */
.field input:focus-visible, .field textarea:focus-visible { border-color: var(--white); outline-offset: 2px; }
/* Ошибка: обводка белая 2px (вторая линия — inset, чтобы текст в поле не сдвигался) */
.field [aria-invalid="true"] { border-color: var(--white); box-shadow: inset 0 0 0 1px var(--white); }

/* Текст ошибки раскрывается под полем (0fr → 1fr); скрытый — visibility: hidden, не читается */
.field__error {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows var(--d-2) var(--ease-out), visibility 0s linear var(--d-2);
}
.field__error.is-shown { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
.field__error > div { min-height: 0; overflow: hidden; }
.field__error p {
  margin-top: var(--s-2);
  padding-left: var(--s-3);
  border-left: 2px solid var(--white);
  font-size: var(--fs-s);
  line-height: 1.45;
  color: var(--white);
}

/* «Услуга»: чипы-radio. Выбранный — белая заливка с чёрным текстом. */
.chips { min-width: 0; margin: 0; padding: 0; border: 0; }
.chips legend { padding: 0; }
.chips__list { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip { position: relative; display: inline-flex; }
.chip__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip__text {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--s-3);
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--stone);
  font-size: 14px; /* на 360–390px шесть чипов встают в 3 строки */
  font-weight: 500;
  line-height: 1.2;
  color: var(--text);
  transition: background-color var(--d-1) var(--ease-out), color var(--d-1) var(--ease-out), box-shadow var(--d-1) var(--ease-out);
}
@media (hover: hover) {
  .chip:hover .chip__input:not(:checked) + .chip__text { background: var(--hover); box-shadow: inset 0 0 0 1px var(--white); color: var(--white); }
}
.chip__input:checked + .chip__text { background: var(--white); color: var(--ink); box-shadow: none; }
.chip__input:focus-visible + .chip__text { outline: 2px solid var(--white); outline-offset: 3px; }
@media (min-width: 700px) { .chip__text { padding: 0 var(--s-4); font-size: var(--fs-s); } }

/* Согласие: свой квадрат 22px; галочка рисуется (stroke-dashoffset) с пружиной */
.field--check { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: var(--s-3); align-items: start; }
.check { position: relative; width: 22px; height: 22px; margin-top: 1px; }
.check input {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 22px;
  height: 22px;
  margin: 0;
  background: var(--ink);
  border: 1px solid var(--stone);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color var(--d-1) var(--ease-out), border-color var(--d-1) var(--ease-out);
}
@media (hover: hover) { .check input:hover { border-color: var(--white); } }
.check input:checked { background: var(--white); border-color: var(--white); }
.check input:focus-visible { outline-offset: 3px; }
.check__mark {
  position: absolute;
  inset: 0;
  pointer-events: none;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 16;
  stroke-dashoffset: 16;
  transition: stroke-dashoffset var(--d-2) var(--ease-spring);
}
.check input:checked + .check__mark { stroke-dashoffset: 0; }
.field--check label { margin: 0; font-weight: 400; font-size: var(--fs-s); line-height: 1.5; cursor: pointer; }
.field--check .field__error { grid-column: 2; }

/* Ошибка отправки: текст и прямые контакты */
.form__fail { padding: var(--s-4); background: var(--ink); border-radius: var(--r-s); box-shadow: inset 2px 0 0 var(--white); color: var(--white); }
.form__fail-links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-2); font-weight: 500; }
.form__submit { margin-top: var(--s-2); }

/* Успех: панель вместо полей; круг и галочка рисуются, текст проявляется */
.form__done { align-self: center; display: grid; justify-items: center; gap: var(--s-4); padding-block: var(--s-6); text-align: center; }
.form__done-mark { fill: none; stroke: var(--white); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.form__done-mark circle { stroke: rgb(255 255 255 / 0.3); stroke-dasharray: 189; stroke-dashoffset: 189; transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset var(--d-4) var(--ease-out); }
.form__done-mark path { stroke-width: 2.5; stroke-dasharray: 38; stroke-dashoffset: 38; transition: stroke-dashoffset var(--d-3) var(--ease-out) 250ms; }
.form__done-title, .form__done-text { opacity: 0; transform: translateY(8px); transition: opacity var(--d-3) var(--ease-out) 200ms, transform var(--d-3) var(--ease-out) 200ms; }
.form__done-title { font-family: var(--display); font-weight: 750; font-size: var(--fs-h3); line-height: 1.1; color: var(--white); outline: none; }
.form__done-text { max-width: 36ch; transition-delay: 280ms; }
.form__done.is-in .form__done-mark circle,
.form__done.is-in .form__done-mark path { stroke-dashoffset: 0; }
.form__done.is-in .form__done-title,
.form__done.is-in .form__done-text { opacity: 1; transform: none; }

@media (min-width: 1000px) {
  .contact__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-5); align-items: start; }
  .contact__direct { grid-column: 1 / 6; position: sticky; top: calc(64px + var(--s-6)); }
  .form { grid-column: 7 / 13; margin-top: 0; padding: var(--s-7); }
}

/* ============================================================ 8. CTA перед подвалом
   Компактная полоса surface: свет за заголовком, зерно. Заголовок чуть крупнее H2 (не спорит
   с вордмарком подвала); десктоп — две колонки: слева заголовок, справа строка и кнопка.
   Мобильный — столбик. 100cqi / --cta-em — страховка от выхода строки за полосу на узких экранах. */
.cta { padding-bottom: var(--section-y); }
.cta__panel {
  --lx: 24%; --ly: 30%;
  container-type: inline-size;
  display: grid;
  gap: var(--s-5);
  padding: var(--s-7) var(--s-5);
  border-radius: var(--r-l);
}
.cta__title {
  font-size: min(clamp(52px, 36px + 4vw, 96px), calc(100cqi / var(--cta-em)));
  line-height: 0.9;
  white-space: nowrap;
}
.cta__side { display: grid; justify-items: start; gap: var(--s-5); }
.cta__text { max-width: 30ch; font-size: var(--fs-l); line-height: 1.4; color: var(--text); text-wrap: balance; }
@media (min-width: 1000px) {
  .cta__panel {
    --lx: 18%; --ly: 50%;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--s-8);
    padding: var(--s-8) var(--s-8);
  }
}

/* ============================================================ подвал
   Колонки: меню · языки · контакты · политика, © и роль, справа «Наверх». */
.site-footer { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06); font-size: var(--fs-s); color: var(--ash); }
.site-footer__inner { padding-block: var(--s-7) calc(var(--s-7) + env(safe-area-inset-bottom)); }
.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-6) var(--s-5);
}
.site-footer__col--contact, .site-footer__col--legal { grid-column: 1 / -1; }
.site-footer__h { margin-bottom: var(--s-3); color: var(--ash); }
.site-footer__col ul { display: grid; gap: var(--s-2); }
.site-footer__col a:not(.btn) { color: var(--text); text-decoration: none; }
.site-footer__col a:not(.btn):hover { color: var(--white); text-decoration: underline; }
/* Текущий язык: белый и точка, как в выпадающем списке */
.site-footer__col a[aria-current="page"] { color: var(--white); }
.site-footer__col a[aria-current="page"]::after {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-left: var(--s-2);
  vertical-align: middle;
  border-radius: 50%;
  background: currentColor;
}
.site-footer__col--legal { display: grid; gap: var(--s-2); justify-items: start; }
.site-footer__top { margin-top: var(--s-3); }
@media (min-width: 1000px) {
  .site-footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .site-footer__col--contact, .site-footer__col--legal { grid-column: auto; }
  .site-footer__col--legal { justify-items: end; align-content: start; text-align: right; }
  .site-footer__top { margin-top: var(--s-5); }
}

/* ============================================================ политика */
.privacy__inner { max-width: calc(72ch + 2 * var(--gutter)); margin-inline: 0; container-type: inline-size; }
.privacy__inner > .section-title {
  font-size: min(var(--fs-h2), calc((100cqi - 2 * var(--gutter)) / var(--privacy-em)));
}
@media (min-width: 1000px) { .privacy__inner { margin-left: max(0px, calc((100vw - var(--max)) / 2 - var(--gutter))); } }
.privacy__updated { color: var(--ash); font-size: var(--fs-s); margin-top: calc(-1 * var(--s-4)); }
.privacy__intro { margin-top: var(--s-5); max-width: 60ch; font-size: var(--fs-l); line-height: 1.5; color: var(--white); }
.privacy__section { margin-top: var(--s-6); }
.privacy__body > * + * { margin-top: var(--s-3); }
.privacy__body ul { display: grid; gap: var(--s-2); padding-left: 1.2em; list-style: disc; }
.privacy__body li::marker { color: var(--ash); }
.privacy__section h2 { font-family: var(--display); font-weight: 750; font-size: clamp(22px, 20px + 0.6vw, 28px); line-height: 1.15; color: var(--white); margin-bottom: var(--s-2); }
.privacy__back { margin-top: var(--s-7); }

/* ============================================================ доступность движения */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}