/*
 * Десктопная версия по странице Figma «Сайт» (фрейм 120:10501, 1920 × 14113).
 *
 * Все размеры заданы в пикселях макета: calc(N * var(--u)), где
 * --u = ширина окна / 1920 (не больше 1px). На любой ширине страница —
 * точная копия фрейма в масштабе, на ширине 1920px 1u = 1px. Элементы стоят
 * по координатам макета относительно левого верхнего угла своего блока.
 *
 * Межбуквенные интервалы — в em (в Figma они в процентах от кегля).
 * Высота строки — в целых пикселях макета: Figma округляет её до целого.
 *
 * Свечения карточек — картинки целиком, растянутые на карточку и сдвинутые
 * матрицей из макета: transform — кадрирование и поворот, translate — сдвиг
 * в пикселях макета (см. docs/figma.md).
 */

/* Десктоп — окна от 1024px (css/desktop.css подключён с media) */
:root {
  /* Вне .canvas (фон страницы, меню, окна) масштаб считается от окна */
  --u: calc(min(100vw, 1920px) / 1920);
  /* Плитка шума фона: 400px в масштабе 0.5 */
  --noise-tile: 200;
}

/* Мобильная разметка (css/mobile.css) на десктопе не показывается */
.m-page,
.m-skip-link {
  display: none;
}

/*
 * Масштаб. --u считается от ширины контейнера, а не окна: 100vw включает
 * полосу прокрутки, и страница вылезала бы за край.
 */

.page {
  position: relative;
  container-type: inline-size;
}

/*
 * Пиксель макета: ширина страницы / 1920, но не больше 1px. --bleed —
 * поля по бокам макета на экранах шире 1920px (уже — ноль).
 */
.canvas,
.spots {
  --u: calc(min(100cqw, 1920px) / 1920);
  --bleed: calc((100cqw - 1920 * var(--u)) / 2);
}

@supports not (width: 1cqw) {
  .canvas,
  .spots {
    --u: calc(min(100vw, 1920px) / 1920);
    --bleed: calc(0 * var(--u));
  }
}

/*
 * Макет — слой над световыми пятнами (isolation держит внутри и элементы с
 * отрицательным z-index). Всё, что выходит за макет, обрезается по краям
 * окна: слайдеры на широком экране уходят до края окна.
 */
.canvas {
  position: relative;
  width: calc(1920 * var(--u));
  margin: 0 auto;
  clip-path: inset(0 calc(-1 * var(--bleed)));
  isolation: isolate;
}

.header,
.hero,
.modules,
.market,
.chain,
.changes,
.note,
.free,
.results,
.program,
.team,
.advantages,
.audience,
.faq,
.final,
.footer {
  position: relative;
}

.header > *,
.hero > *,
.modules > *,
.modules__list > *,
.module > *,
.market > *,
.chain > *,
.changes > *,
.changes__cards > *,
.change > *,
.note > *,
.free > *,
.free__step > *,
.manager > *,
.manager__links > *,
.submit > *,
.results > *,
.result > *,
.program > :not(.accordion),
.acc > :not(.acc__panel),
.acc__button > *,
.team > *,
.speaker > *,
.advantages > *,
.advantage > *,
.audience > *,
.role > *,
.audience__cta > *,
.faq > :not(.accordion),
.faq__art > *,
.final > *,
.footer > *,
.messenger > *,
.contact > *,
.hero__cta > *,
.person > *,
.lead-form > *,
.phone > * {
  position: absolute;
}

/* Световые пятна фона: картинка свечения 2252 × 1800, повёрнутая на 46.6° */

/*
 * Световые пятна — слой под макетом на всю ширину окна: на экранах шире
 * 1920px левые пятна прижаты к левому краю окна, правые — к правому, а не
 * обрезаны по краю макета. overflow: clip, а не hidden: слой не должен
 * прокручиваться, иначе параллакс пятен считался бы по нему, а не по окну.
 */
.spots {
  position: absolute;
  inset: 0;
  overflow: clip;
  pointer-events: none;
}

.spot {
  position: absolute;
  width: calc(2252.23 * var(--u));
  height: calc(1800.45 * var(--u));
  background: url('../assets/desktop/glow.webp') 0 0 / 100% 100% no-repeat;
  transform-origin: 0 0;
}

/*
 * Пятна повёрнуты на 46°, и светят они не у своего левого угла: центр 1 и 2
 * у правого края макета (x ≈ 1884), центр 3 и 4 — у левого (x ≈ 0). Поэтому
 * 1 и 2 отсчитаны от правого края окна, 3 и 4 — от левого.
 */
.spot--1,
.spot--2 {
  left: calc(100% - 1464 * var(--u));
  transform: matrix(0.68724, -0.72643, 0.72643, 0.68724, 0, 0);
}

.spot--3,
.spot--4 {
  left: calc(1416.73 * var(--u));
  transform: matrix(-0.68724, -0.72643, -0.72643, 0.68724, 0, 0);
}

.spot--1 { top: calc(3698.09 * var(--u)); }
.spot--2 { top: calc(9424.09 * var(--u)); }
.spot--3 { top: calc(6730.09 * var(--u)); }
/* Нижнее пятно — от низа страницы: светит за последним блоком, даже когда
   страница выше или ниже макета (открытые вопросы FAQ) */
.spot--4 { bottom: calc(-929.54 * var(--u)); }

/* Общие элементы */

/* Надпись 8px вразрядку над заголовком первого экрана */
.eyebrow {
  font-family: var(--f-wide);
  font-size: calc(8 * var(--u));
  line-height: calc(14 * var(--u));
  letter-spacing: 0.66em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-text-lit);
  opacity: 0.11;
}

/* Надпись 12px вразрядку: «модуль», «программа», «спикеры» */
.label {
  font-family: var(--f-wide);
  font-size: calc(12 * var(--u));
  line-height: calc(22 * var(--u));
  letter-spacing: 0.31em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-text-lit);
  opacity: 0.2;
}

.dots {
  width: calc(33.449 * var(--u));
  height: calc(5.746 * var(--u));
}

/*
 * Тонкие линии — рамкой, а не фоном: при уменьшенном масштабе линия
 * тоньше пикселя, фон такой высоты Chrome может округлить до нуля,
 * а рамку рисует минимум в один пиксель.
 */
.rule {
  height: 0;
  border-top: calc(1 * var(--u)) solid var(--c-white);
  opacity: 0.08;
}

/* Шапка блока: подпись, линия до иконки, иконка */
.section-head {
  left: 0;
  top: 0;
  width: 100%;
  height: calc(22 * var(--u));
}

.section-head > * {
  position: absolute;
}

.section-head .label {
  left: calc(227 * var(--u));
  top: 0;
}

.section-head .rule {
  top: calc(10.5 * var(--u));
  left: calc(var(--rule-from) * var(--u));
  width: calc((1639.5 - var(--rule-from)) * var(--u));
}

.section-head__icon {
  left: calc(1683 * var(--u));
  top: calc(5.5 * var(--u));
  width: calc(11.8 * var(--u));
  height: calc(11.8 * var(--u));
}

/*
 * Подложки карточек: #212121, скругление 30, чёрное зерно 15% (эффект Noise).
 * Зерно — в пикселях экрана: при уменьшении страницы оно не мельчает.
 */
.surface {
  overflow: hidden;
  border-radius: calc(30 * var(--u));
  background-color: var(--c-card);
}

.surface::after,
.acc__bg::after,
.advantage__surface::after,
.role::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: url('../assets/desktop/grain.webp') 0 0 / calc(128 * var(--u)) repeat;
  opacity: 0.15;
  pointer-events: none;
}

/*
 * Картинки свечений в блоках с data-defer загружаются, когда блок подходит
 * к экрану (js/main.js ставит is-near): первый экран грузится быстрее.
 */
.js [data-defer]:not(.is-near) .glow {
  background-image: none;
}

/* Свечение: картинка на всю карточку, кадрируется матрицей из макета */
.glow {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url('../assets/desktop/glow.webp') 0 0 / 100% 100% no-repeat;
  transform-origin: 0 0;
  pointer-events: none;
}

/*
 * Текст с градиентом. Без скрипта градиент лежит на всём заголовке. Скрипт
 * режет заголовок на слова (для появления по словам), и тогда у каждого
 * слова свой фон — та же картинка размером с заголовок, сдвинутая на
 * положение слова (--x, --y в пикселях макета). Прозрачность у слова внутри
 * блока с background-clip: text в Chrome не работает — поэтому так.
 */
.gradient-text,
[data-words].is-split .w {
  color: transparent;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
}

.gradient-text {
  background-size: 100% 100%;
}

[data-words].is-split {
  background: none;
}

[data-words].is-split .w {
  background-image: var(--fill);
  background-size: calc(var(--hw) * var(--u)) calc(var(--hh) * var(--u));
  background-position: calc(var(--x, 0) * -1 * var(--u)) calc(var(--y, 0) * -1 * var(--u));
}

/*
 * Слова, приглушённые в макете (30%, в заголовке цепочки — 40%). Без
 * скрипта заголовок целиком яркий: прозрачность у span внутри текста
 * с градиентом в Chrome стирает слово.
 */
[data-words].is-split .w--dim {
  opacity: var(--dim, 0.3);
}

/*
 * Слово — обычный строчный span, не inline-block: Chrome складывает текст
 * соседних span в одну строку букв, и кернинг на стыке слова с пробелом
 * сохраняется (у Halvar Breitschrift он есть: «А », « Т» и другие —
 * без него слова сдвигаются на 3–4px). Фон с background-clip: text
 * обрезается по рамке span, поэтому у рамки запас: сверху и снизу — на
 * «Й» и «б» (метрики Helvetica Neue Cyr ниже этих букв), справа у
 * последнего слова строки — на хвост буквы при отрицательном интервале.
 * Отступы по вертикали строку не меняют, отступ справа у конца строки
 * погашен таким же отрицательным полем.
 */
.w {
  padding-block: calc(16 * var(--u));
}

.w--end {
  padding-inline-end: calc(10 * var(--u));
  margin-inline-end: calc(-10 * var(--u));
}

/*
 * Заголовки 80px (Helvetica Neue Cyr Medium): градиент #bababa → #545454
 * на весь блок текста. Угол зависит от размеров блока (--hw × --hh).
 */
/*
 * Переносы строк в заголовках — явные, как в макете: Figma и браузер
 * иногда расходятся на пиксель, и слово перескакивает на другую строку.
 */
.title {
  width: calc(var(--hw) * var(--u));
  white-space: nowrap;
  font-weight: 500;
  font-size: calc(80 * var(--u));
  line-height: calc(74 * var(--u));
  letter-spacing: -0.05em;
  --fill: linear-gradient(var(--angle), var(--c-title-from) 1.49%, var(--c-title-to) 96.44%);
  color: transparent;
  background: var(--fill) 0 0 / 100% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
}

/* Заголовки Halvar Breitschrift капсом с фирменным радиальным градиентом */
.display {
  width: calc(var(--hw) * var(--u));
  white-space: nowrap;
  font-family: var(--f-wide);
  letter-spacing: -0.04em;
  text-transform: uppercase;
  --fill: var(--g-brand);
  color: transparent;
  background: var(--fill) 0 0 / 100% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
}

/* Номера модулей 20px с зелёно-фиолетовым градиентом */
.number {
  display: block;
  font-family: var(--f-wide);
  font-size: calc(20 * var(--u));
  line-height: calc(22 * var(--u));
  letter-spacing: -0.04em;
  white-space: nowrap;
  color: transparent;
  background: var(--g-number) 0 0 / 100% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
}

/* Крупные контурные цифры: обводка 1px белым 5–8% снаружи, без заливки */
.outline {
  font-family: var(--f-wide);
  font-size: calc(40 * var(--u));
  line-height: calc(44 * var(--u));
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: calc(1 * var(--u)) var(--c-white-5);
}

/* «00» в плашках «бесплатно до курса»: заливка картинкой свечения */
.number-glow {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--f-wide);
  font-size: calc(20 * var(--u));
  line-height: calc(22 * var(--u));
  letter-spacing: -0.04em;
  color: transparent;
  background: url('../assets/desktop/number-glow.webp') 0 0 / calc(32 * var(--u)) calc(22 * var(--u)) no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
}

/* Плашки со стеклом: чёрный 10%, размытие фона */
.chip,
.fact,
.tag {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-glass);
  white-space: nowrap;
  -webkit-backdrop-filter: blur(calc(4.55 * var(--u)));
  backdrop-filter: blur(calc(4.55 * var(--u)));
}

.chip::before,
.fact::before,
.tag::before {
  content: '';
  position: absolute;
  inset: 0;
  border: calc(1 * var(--u)) solid var(--c-white-10);
  border-radius: inherit;
  pointer-events: none;
}

.chip {
  height: calc(36 * var(--u));
  border-radius: calc(36 * var(--u));
  color: var(--c-text-lit);
  font-family: var(--f-wide);
  font-size: calc(9 * var(--u));
  line-height: calc(9 * var(--u));
  text-transform: uppercase;
}

/* Индикатор прокрутки: мышь и кольца над и под ней, 10 × 150 */
.hint {
  width: calc(10 * var(--u));
  height: calc(150 * var(--u));
  overflow: visible;
}

.hint--faded {
  opacity: 0.33;
}

.hint__mouse {
  transform-box: fill-box;
}

/*
 * Красная кнопка: скругление 41.82 (у первой — 48), текст 13.94px вразрядку,
 * иконка чата белым 20%. Блик пробегает по кнопке раз в несколько секунд.
 */
.button {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: calc(41.82 * var(--u));
  background: var(--c-red);
  color: var(--c-white);
  isolation: isolate;
}

.button::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 50%;
  background: linear-gradient(100deg, transparent 10%, var(--c-shine) 50%, transparent 90%);
  opacity: 0;
  pointer-events: none;
}

/* Подсветка при наведении: белый 8% поверх фона кнопки, под текстом */
.button::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c-white-8);
  opacity: 0;
  pointer-events: none;
}

.button__icon {
  position: absolute;
  left: calc(27 * var(--u));
  top: calc(22.563 * var(--u));
  width: calc(13.939 * var(--u));
  height: calc(13.242 * var(--u));
}

.button__label {
  position: absolute;
  left: calc(60.11 * var(--u));
  top: calc(18.29 * var(--u));
  font-family: var(--f-wide);
  font-size: calc(13.94 * var(--u));
  line-height: calc(21 * var(--u));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Стрелки слайдеров: рамка 159 × 58, внутри вторая рамка и разделитель */
.arrows {
  width: calc(159 * var(--u));
  height: calc(58 * var(--u));
  display: flex;
  border-radius: calc(41.82 * var(--u));
}

.arrows::before,
.arrows::after {
  content: '';
  position: absolute;
  border-radius: calc(41.82 * var(--u));
  pointer-events: none;
}

.arrows::before {
  inset: 0;
  border: calc(1 * var(--u)) solid var(--c-white);
  opacity: 0.11;
}

.arrows::after {
  inset: calc(4 * var(--u));
  border: calc(1 * var(--u)) solid var(--c-field-border);
  opacity: 0.05;
}

.arrows__button {
  position: relative;
  flex: 1;
  height: 100%;
}

.arrows__button--prev {
  border-radius: calc(41.82 * var(--u)) 0 0 calc(41.82 * var(--u));
}

.arrows__button--next {
  border-radius: 0 calc(41.82 * var(--u)) calc(41.82 * var(--u)) 0;
}

/* Разделитель между стрелками */
.arrows__button--next::before {
  content: '';
  position: absolute;
  left: calc(-0.5 * var(--u));
  top: calc(5 * var(--u));
  width: 0;
  height: calc(48 * var(--u));
  border-left: calc(1 * var(--u)) solid var(--c-white);
  opacity: 0.05;
}

/* Стрелка 16 × 14, линия 2px */
.arrows__button::after {
  content: '';
  position: absolute;
  top: calc(21 * var(--u));
  width: calc(18 * var(--u));
  height: calc(16 * var(--u));
  background: var(--g-arrow) 0 0 / 100% 100% no-repeat;
  opacity: 0.44;
}

.arrows__button--prev::after {
  left: calc(33 * var(--u));
  scale: -1 1;
}

.arrows__button--next::after {
  left: calc(29.5 * var(--u));
}

.arrows__button:disabled {
  cursor: default;
}

.arrows__button:disabled::after {
  opacity: 0.1;
}

/* Полоса прогресса слайдера: линия белым 5% и бегунок 4px */
.progress {
  height: calc(4 * var(--u));
}

.progress::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc(1.5 * var(--u));
  height: 0;
  border-top: calc(1 * var(--u)) solid var(--c-white);
  opacity: 0.05;
}

.progress__thumb {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: calc(var(--thumb) * var(--u));
}

/* Слайдер: горизонтальная прокрутка с привязкой к карточкам */
.slider {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.slider::-webkit-scrollbar {
  display: none;
}

/*
 * Пока слайдер едет сам (is-free) или его тянут мышью (is-dragging),
 * привязки к карточкам нет: она возвращала бы его к ближайшей карточке.
 */
.slider.is-free,
.slider.is-dragging {
  scroll-snap-type: none;
}

.slider__track {
  position: relative;
  display: flex;
  width: max-content;
}

.slider__track > * {
  position: relative;
  flex: none;
  scroll-snap-align: start;
}

/* Шапка */

.header {
  height: calc(121 * var(--u));
}

.logo {
  left: calc(54.42 * var(--u));
  top: calc(37.77 * var(--u));
  width: calc(147.58 * var(--u));
  height: calc(42.23 * var(--u));
}

.logo__mark {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(42.226 * var(--u));
  height: calc(42.227 * var(--u));
}

.logo__text {
  position: absolute;
  left: calc(54.9 * var(--u));
  top: calc(1.53 * var(--u));
  width: calc(92.678 * var(--u));
  height: calc(40.445 * var(--u));
}

.header__divider {
  left: calc(229.5 * var(--u));
  top: calc(32 * var(--u));
  width: 0;
  height: calc(57 * var(--u));
  border-left: calc(1 * var(--u)) solid var(--c-white);
  opacity: 0.1;
}

.header__about {
  left: calc(255 * var(--u));
  top: calc(36 * var(--u));
  font-size: calc(12 * var(--u));
  line-height: calc(16 * var(--u));
  letter-spacing: -0.05em;
  white-space: nowrap;
  color: var(--c-text-lit);
  opacity: 0.5;
}

/* Мессенджеры: рамка #2f2f2f, справа от подписи — разделитель */
.messenger {
  left: calc(616 * var(--u));
  top: calc(32 * var(--u));
  width: calc(378 * var(--u));
  height: calc(57 * var(--u));
}

.messenger::before,
.messenger::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.messenger::before {
  inset: 0;
  border: calc(1 * var(--u)) solid var(--c-border);
  border-radius: calc(12 * var(--u));
}

.messenger::after {
  left: calc(261 * var(--u));
  top: 0;
  width: 0;
  height: 100%;
  border-left: calc(1 * var(--u)) solid var(--c-border);
}

.messenger__avatar {
  left: calc(18 * var(--u));
  top: calc(13.5 * var(--u));
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
  border-radius: 50%;
}

.messenger__label {
  left: calc(58 * var(--u));
  top: calc(15.5 * var(--u));
  font-family: var(--f-wide);
  font-size: calc(10 * var(--u));
  line-height: calc(13 * var(--u));
  letter-spacing: 0.17em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-text-lit);
  opacity: 0.5;
}

.messenger__link img {
  width: 100%;
  height: 100%;
}

/* Область нажатия больше иконки */
.burger::before {
  content: '';
  position: absolute;
  inset: calc(-12 * var(--u));
}

/*
 * Ссылка на Telegram нажимается всей плашкой — с аватаркой и призывом:
 * область нажатия иконки растянута на рамку плашки (от иконки — назад на её
 * координаты в плашке). Рамка фокуса с клавиатуры — тоже вокруг плашки.
 */
.messenger__link::before,
.manager__link::before {
  content: '';
  position: absolute;
  border-radius: calc(12 * var(--u));
}

.messenger__link--telegram::before {
  left: calc(-309 * var(--u));
  top: calc(-19 * var(--u));
  width: calc(378 * var(--u));
  height: calc(57 * var(--u));
}

.manager__link--telegram::before {
  left: calc(-158 * var(--u));
  top: calc(-18.78 * var(--u));
  width: calc(201 * var(--u));
  height: calc(57 * var(--u));
  border-radius: calc(11.91 * var(--u));
}

.messenger__link:focus-visible,
.manager__link:focus-visible {
  outline: none;
}

.messenger__link:focus-visible::before,
.manager__link:focus-visible::before {
  outline: calc(2 * var(--u)) solid var(--c-link);
  outline-offset: calc(2 * var(--u));
}

/* Одна иконка Telegram — справа от разделителя */
.messenger__link--telegram {
  left: calc(309 * var(--u));
  top: calc(19 * var(--u));
  width: calc(23 * var(--u));
  height: calc(20 * var(--u));
}

/* Кнопка «обсудить участие»: красная обводка 2px внутрь */
.header__cta {
  left: calc(1218 * var(--u));
  top: calc(35 * var(--u));
  width: calc(243 * var(--u));
  height: calc(49 * var(--u));
  border-radius: calc(24.4 * var(--u));
  color: var(--c-red);
}

.header__cta::before {
  content: '';
  position: absolute;
  inset: 0;
  border: calc(2 * var(--u)) solid var(--c-red);
  border-radius: inherit;
}

.header__cta-icon {
  position: absolute;
  left: calc(29.4 * var(--u));
  top: calc(19.4 * var(--u));
  width: calc(12 * var(--u));
  height: calc(11.4 * var(--u));
}

.header__cta-label {
  position: absolute;
  left: calc(56.4 * var(--u));
  top: calc(19.4 * var(--u));
  width: calc(156 * var(--u));
  font-family: var(--f-wide);
  font-size: calc(10 * var(--u));
  line-height: calc(10 * var(--u));
  letter-spacing: 0.24em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.contact {
  left: calc(1502 * var(--u));
  top: calc(36 * var(--u));
  width: calc(243 * var(--u));
  height: calc(50.2 * var(--u));
}

.contact__phone {
  left: 0;
  top: 0;
  font-family: var(--f-wide);
  font-size: calc(24.983 * var(--u));
  line-height: calc(28 * var(--u));
  letter-spacing: -0.06em;
  white-space: nowrap;
  color: var(--c-phone);
}

.contact__dot {
  left: calc(1.141 * var(--u));
  top: calc(37.47 * var(--u));
  width: calc(7.949 * var(--u));
  height: calc(7.949 * var(--u));
}

.contact__hours {
  left: calc(13.633 * var(--u));
  top: calc(35.2 * var(--u));
  font-size: calc(11.356 * var(--u));
  line-height: calc(15 * var(--u));
  letter-spacing: -0.05em;
  white-space: nowrap;
  color: var(--c-text-lit);
  opacity: 0.5;
}

.burger {
  left: calc(1805.5 * var(--u));
  top: calc(45.5 * var(--u));
  width: calc(53.4 * var(--u));
  height: calc(28.6 * var(--u));
}

.burger img {
  width: 100%;
  height: 100%;
}

/* Первый экран */

.hero {
  height: calc(1015 * var(--u));
}

.hero__card--1 {
  left: calc(20 * var(--u));
  top: 0;
  width: calc(974 * var(--u));
  height: calc(669 * var(--u));
  opacity: 0.5;
}

.hero__card--2 {
  left: calc(20 * var(--u));
  top: calc(674 * var(--u));
  width: calc(974 * var(--u));
  height: calc(341 * var(--u));
}

.hero__card .glow {
  opacity: 0.8;
}

.hero__card--1 .glow { transform: matrix(1.9302, 0, 0, 1.66964, 0, 0); translate: 0 calc(-101 * var(--u)); }
.hero__card--2 .glow { transform: matrix(1.9302, 0, 0, 3.27568, 0, 0); translate: 0 calc(-775 * var(--u)); }

/*
 * Карточки спикеров во всю высоту первого экрана. Яркость карточки —
 * прозрачность её подложки .hero__face: так она меняется при наведении
 * отдельно от появления карточки (оно — у самой .hero__card). По умолчанию
 * карточка Елены приглушена, Павла — яркая.
 */
.hero__card--elena {
  left: calc(999 * var(--u));
  top: 0;
  width: calc(459 * var(--u));
  height: calc(1015 * var(--u));
}

.hero__card--pavel,
.hero__front .hero__face {
  left: calc(1463 * var(--u));
  top: 0;
  width: calc(437 * var(--u));
  height: calc(1015 * var(--u));
}

.hero__card > .hero__face {
  position: absolute;
  inset: 0;
}

.hero__face--elena {
  opacity: 0.5;
}

.hero__face .glow {
  opacity: 0.8;
}

.hero__face--elena .glow { transform: matrix(4.09586, 0, 0, 1.10049, 0, 0); translate: calc(-979 * var(--u)) calc(-101 * var(--u)); }
.hero__face--pavel .glow { transform: matrix(4.30206, 0, 0, 1.10049, 0, 0); translate: calc(-1378.75 * var(--u)) calc(-101 * var(--u)); }

/* Области наведения: каждая — над своей карточкой, поверх фото и подписей */
.hero__zone {
  top: 0;
  z-index: 1;
  height: calc(1015 * var(--u));
}

.hero__zone--elena {
  left: calc(999 * var(--u));
  width: calc(461.5 * var(--u));
}

.hero__zone--pavel {
  left: calc(1460.5 * var(--u));
  width: calc(439.5 * var(--u));
}

/* Фото спикеров: вырезанные фигуры поверх карточек, Павел отражён */
.hero__photo {
  overflow: hidden;
  pointer-events: none;
}

.hero__photo img,
.hero__photo-wide img {
  position: absolute;
  max-width: none;
}

/*
 * Павел: окно 436.83 × 868 со скруглением 30 у правого края; картинка
 * (видимая часть кадра, отражённая) шире окна — при наведении то же
 * изображение видно в окне шире, .hero__photo-wide.
 */
.hero__photo--pavel {
  left: calc(1463.17 * var(--u));
  top: calc(147 * var(--u));
  width: calc(436.83 * var(--u));
  height: calc(868 * var(--u));
  border-radius: calc(30 * var(--u));
}

.hero__photo--pavel img,
.hero__photo-wide img {
  top: calc(-0.57 * var(--u));
  width: calc(674.15 * var(--u));
  height: calc(868.75 * var(--u));
  scale: -1 1;
}

.hero__photo--pavel img {
  left: calc(-167.57 * var(--u));
}

/* Елена: кадр обрезан по левому краю карточки, нижний левый угол скруглён */
.hero__photo--elena {
  left: calc(999 * var(--u));
  top: calc(192 * var(--u));
  width: calc(530.17 * var(--u));
  height: calc(823 * var(--u));
  border-radius: 0 0 0 calc(30 * var(--u));
}

.hero__photo--elena img {
  left: calc(-59.93 * var(--u));
  top: 0;
  width: calc(578.19 * var(--u));
  height: calc(823 * var(--u));
}

/*
 * Наведение на карточку Павла (фрейм 229:3869): его карточка и фото
 * поверх фото Елены, фото шире — видно плечо. Слой проявляется целиком.
 */
.hero__front {
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.hero__front > * {
  position: absolute;
}

.hero__photo-wide {
  left: calc(1296 * var(--u));
  top: calc(147 * var(--u));
  width: calc(604 * var(--u));
  height: calc(868 * var(--u));
  overflow: hidden;
  border-radius: calc(30 * var(--u)) calc(30 * var(--u)) calc(30 * var(--u)) 0;
}

.hero__photo-wide img {
  left: calc(-0.4 * var(--u));
}

.hero__eyebrow {
  left: calc(229 * var(--u));
  top: calc(94 * var(--u));
}

.hero__dots {
  left: calc(158 * var(--u));
  top: calc(164 * var(--u));
}

/*
 * Заголовок печатается по буквам (js/main.js). Строки — отдельные блоки,
 * под каждой пунктир во всю ширину строки, после последней — звёздочка.
 */
.hero__title {
  left: calc(225 * var(--u));
  top: calc(131 * var(--u));
  width: calc(650 * var(--u));
  height: calc(138 * var(--u));
  font-family: var(--f-wide);
  font-size: calc(66 * var(--u));
  line-height: calc(69 * var(--u));
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.typer {
  --hw: 650;
  --hh: 138;
  --fill: var(--g-brand);
  display: block;
}

.typer__line {
  position: relative;
  display: table;
  white-space: nowrap;
  color: transparent;
  background: var(--g-brand) 0 0 / calc(650 * var(--u)) calc(138 * var(--u)) no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
}

.typer__line + .typer__line {
  background-position: 0 calc(-69 * var(--u));
}

.typer.is-split .typer__line {
  background: none;
}

/* Строка фразы со скриптом: градиент у span строки, сдвинутый на его место */
.typer__text {
  color: transparent;
  background: var(--g-brand) no-repeat;
  background-size: calc(650 * var(--u)) calc(138 * var(--u));
  background-position: calc(var(--x, 0) * -1 * var(--u)) calc(var(--y, 0) * -1 * var(--u));
  -webkit-background-clip: text;
  background-clip: text;
}

/* Ещё не напечатанные буквы строки: невидимы, держат её ширину */
.typer__rest {
  visibility: hidden;
}

/* Пунктир под строкой, чуть короче строки с обеих сторон */
.typer .typer__underline {
  left: calc(5.66 * var(--u));
  top: calc(67.41 * var(--u));
  width: calc(100% - 10.36 * var(--u));
}

/*
 * От конца строки: строка набрана одним текстом с кернингом, как в макете,
 * и короче побуквенной на 1px — звёздочка на 4.78 правее её конца
 */
.typer__sparkle {
  position: absolute;
  left: calc(100% + 4.78 * var(--u));
  top: calc(3 * var(--u));
  width: calc(41.85 * var(--u));
  height: calc(37.26 * var(--u));
  overflow: visible;
}

.hero__lead {
  left: calc(231 * var(--u));
  top: calc(304 * var(--u));
  font-size: calc(39.59 * var(--u));
  line-height: calc(42 * var(--u));
  letter-spacing: -0.05em;
  white-space: nowrap;
}

.hero__lead-dim {
  opacity: 0.5;
}

.hero__facts {
  left: calc(231 * var(--u));
  top: calc(516 * var(--u));
  display: flex;
  gap: calc(12 * var(--u));
}

/* Плашки фактов: обводка белым 4%, текст белым 55% */
.fact {
  position: relative;
  height: calc(50.4 * var(--u));
  border-radius: calc(12 * var(--u));
  color: var(--c-white-55);
  font-family: var(--f-wide);
  font-size: calc(10.8 * var(--u));
  line-height: calc(11 * var(--u));
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(calc(5.46 * var(--u)));
  backdrop-filter: blur(calc(5.46 * var(--u)));
}

.fact::before {
  border-color: var(--c-white-4);
}

.hero__fact--1 { width: calc(126 * var(--u)); }
.hero__fact--2 { width: calc(264 * var(--u)); }
.hero__fact--3 { width: calc(133.2 * var(--u)); }

.hero__ornament {
  left: calc(157.95 * var(--u));
  top: calc(760 * var(--u));
}

.hero__summary {
  left: calc(231 * var(--u));
  top: calc(751 * var(--u));
  font-size: calc(20 * var(--u));
  line-height: calc(26 * var(--u));
  white-space: nowrap;
}

/* Кнопка с подписью: общая рамка белым 8% поверх кнопки */
.hero__cta {
  left: calc(229 * var(--u));
  top: calc(868 * var(--u));
  width: calc(652 * var(--u));
  height: calc(67 * var(--u));
}

.hero__cta::after {
  content: '';
  position: absolute;
  inset: 0;
  border: calc(1 * var(--u)) solid var(--c-white-8);
  border-radius: calc(48 * var(--u));
  pointer-events: none;
}

.hero__button {
  left: 0;
  top: 0;
  width: calc(437 * var(--u));
  height: calc(67 * var(--u));
  border-radius: calc(48 * var(--u));
}

.hero__button .button__icon {
  left: calc(31 * var(--u));
  top: calc(25.9 * var(--u));
  width: calc(16 * var(--u));
  height: calc(15.2 * var(--u));
}

.hero__button .button__label {
  left: calc(69 * var(--u));
  top: calc(21 * var(--u));
  font-size: calc(16 * var(--u));
  line-height: calc(24 * var(--u));
}

.hero__cta-dash,
.hero__cta-note {
  top: calc(16 * var(--u));
  font-size: calc(12 * var(--u));
  line-height: calc(16 * var(--u));
  letter-spacing: -0.05em;
  white-space: nowrap;
}

.hero__cta-dash {
  left: calc(456 * var(--u));
}

.hero__cta-note {
  left: calc(475 * var(--u));
}

/* Подписи к фото: имя, должность, плашка с опытом */
.person {
  top: calc(751 * var(--u));
  height: calc(165 * var(--u));
}

.hero__person--elena {
  left: calc(1159.5 * var(--u));
  width: calc(177 * var(--u));
}

.hero__person--pavel {
  left: calc(1591 * var(--u));
  width: calc(181 * var(--u));
}

.person__name {
  left: calc(15 * var(--u));
  top: 0;
  font-family: var(--f-wide);
  font-size: calc(24 * var(--u));
  line-height: calc(29 * var(--u));
  letter-spacing: -0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.person__about {
  left: calc(15 * var(--u));
  top: calc(70 * var(--u));
  font-size: calc(12 * var(--u));
  line-height: calc(16 * var(--u));
  white-space: nowrap;
  color: var(--c-text-lit);
}

/* Отступ 16 и обводка 1: в Figma обводка плашки занимает место (плашка 111 и 170) */
.person__chip {
  left: 0;
  top: calc(129 * var(--u));
  padding: 0 calc(17 * var(--u));
}

/* Модули: ряд из шести под первым экраном и в блоке «Первый шаг» */

.modules {
  height: calc(161 * var(--u));
  margin-top: calc(5 * var(--u));
}

.modules__card {
  top: 0;
  height: calc(161 * var(--u));
}

.modules__card--1 {
  left: calc(20 * var(--u));
  width: calc(441 * var(--u));
  opacity: 0.3;
}

.modules__card--2 {
  left: calc(466 * var(--u));
  width: calc(528 * var(--u));
  opacity: 0.5;
}

.modules__card--3 {
  left: calc(999 * var(--u));
  width: calc(901 * var(--u));
}

.modules__card .glow {
  background-image: url('../assets/desktop/glow-module.webp');
}

.modules__card--2 .glow { transform: matrix(0.5808, -0.95711, -3.11801, -3.37174, 0, 0); translate: calc(488.04 * var(--u)) calc(418.08 * var(--u)); }
.modules__card--3 .glow { transform: matrix(1.01345, -0.27879, -1.24723, -4.534, 0, 0); translate: calc(73.86 * var(--u)) calc(332.41 * var(--u)); opacity: 0.3; }

.modules__divider {
  top: 0;
  width: 0;
  height: calc(161 * var(--u));
  border-left: calc(1 * var(--u)) solid var(--c-white);
  opacity: 0.05;
}

.modules__divider--1 {
  left: calc(726.5 * var(--u));
  border-color: var(--c-divider);
  opacity: 0.4;
}

.modules__divider--2 {
  left: calc(1279.5 * var(--u));
}

.modules__divider--3 {
  left: calc(1565.5 * var(--u));
}

.modules__list {
  inset: 0;
}

/* Колонка модуля: номер, подпись, название, иконка — по сдвигам из макета */
.module {
  top: 0;
  height: calc(161 * var(--u));
}

.module--1 { left: calc(20 * var(--u)); width: calc(441 * var(--u)); --number: 44; --text: 88; --icon: 392.5; }
.module--2 { left: calc(466 * var(--u)); width: calc(261 * var(--u)); --number: 42; --text: 91; --icon: 212.5; }
.module--3 { left: calc(727 * var(--u)); width: calc(267 * var(--u)); --number: 45; --text: 94; --icon: 217.5; }
.module--4 { left: calc(999 * var(--u)); width: calc(281 * var(--u)); --number: 42; --text: 91; --icon: 232.5; }
.module--5 { left: calc(1280 * var(--u)); width: calc(286 * var(--u)); --number: 35; --text: 84; --icon: 237.5; }
.module--6 { left: calc(1566 * var(--u)); width: calc(334 * var(--u)); --number: 35; --text: 84; --icon: 284.5; }

.module__number {
  left: calc(var(--number) * var(--u));
  top: calc(32 * var(--u));
}

.module__label {
  left: calc(var(--text) * var(--u));
  top: calc(32 * var(--u));
}

.module__title {
  left: calc(var(--text) * var(--u));
  top: calc(68 * var(--u));
  font-size: calc(18 * var(--u));
  line-height: calc(23 * var(--u));
  white-space: nowrap;
}

.module__icon {
  left: calc(var(--icon) * var(--u));
  top: calc(37.5 * var(--u));
  width: calc(13.931 * var(--u));
  height: calc(11.8 * var(--u));
}

.module--1 .module__icon {
  width: calc(11.8 * var(--u));
}

/* Ряд модулей в блоке «Первый шаг» */
.modules--final {
  position: absolute;
  left: 0;
  top: calc(382 * var(--u));
  width: 100%;
  margin: 0;
}

/* Проблематика рынка */

.market {
  height: calc(179 * var(--u));
  margin-top: calc(130 * var(--u));
}

.market__title {
  left: calc(225 * var(--u));
  top: 0;
  --hw: 799;
  --hh: 74;
  --angle: 71.63deg;
}

/* Текст 30px белым 30%: при прокрутке к середине экрана проявляется целиком */
.market__text,
.team__text,
.advantages__text {
  font-size: calc(30 * var(--u));
  line-height: calc(36 * var(--u));
  letter-spacing: -0.05em;
  white-space: nowrap;
  opacity: 0.3;
}

.market__text {
  left: calc(227 * var(--u));
  top: calc(107 * var(--u));
}

.market__logos {
  left: calc(1485 * var(--u));
  top: calc(37 * var(--u));
  width: calc(206 * var(--u));
  height: calc(121.45 * var(--u));
}

.market__hint {
  left: calc(1805 * var(--u));
  top: calc(23 * var(--u));
}

/* Цепочка */

.chain {
  height: calc(343 * var(--u));
  margin-top: calc(134 * var(--u));
}

.chain__rule {
  left: calc(230 * var(--u));
  top: calc(4.5 * var(--u));
  width: calc(1411.5 * var(--u));
}

.chain__icon {
  left: calc(1683.5 * var(--u));
  top: calc(-0.5 * var(--u));
  width: calc(11.8 * var(--u));
  height: calc(11.8 * var(--u));
}

.chain__dots {
  left: calc(158 * var(--u));
  top: calc(90.95 * var(--u));
}

.chain__title {
  left: calc(226 * var(--u));
  top: calc(66 * var(--u));
  --hw: 1195;
  --hh: 165;
  --dim: 0.4;
  font-size: calc(50 * var(--u));
  line-height: calc(55 * var(--u));
}

.chain__text {
  left: calc(226 * var(--u));
  top: calc(271 * var(--u));
  font-weight: 300;
  font-size: calc(30 * var(--u));
  line-height: calc(36 * var(--u));
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* Что меняется: четыре карточки со схемой поверх */

.changes {
  height: calc(843 * var(--u));
  margin-top: calc(88 * var(--u));
}

.changes__cards {
  inset: 0;
}

.change {
  top: 0;
  height: calc(843 * var(--u));
  border-radius: calc(30 * var(--u));
  outline-offset: calc(-4 * var(--u));
}

.change--1 { left: calc(230 * var(--u)); width: calc(362 * var(--u)); --text-width: 158; --title-width: 170; }
.change--2 { left: calc(597 * var(--u)); width: calc(360 * var(--u)); --text-width: 184; --title-width: 121; }
.change--3 { left: calc(962 * var(--u)); width: calc(361 * var(--u)); --text-width: 165; --title-width: 185; }
.change--4 { left: calc(1328 * var(--u)); width: calc(362 * var(--u)); --text-width: 220; --title-width: 220; }

/* Рамка белым 8% у неактивных карточек, фон со свечением — у активной */
.change::before {
  content: '';
  position: absolute;
  inset: 0;
  border: calc(1 * var(--u)) solid var(--c-white);
  border-radius: inherit;
  opacity: 0.08;
  pointer-events: none;
}

.change__bg {
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  opacity: 0;
}

.change__bg .glow {
  opacity: 0.8;
}

.change--1 .glow { background-image: url('../assets/desktop/glow-green.webp'); transform: matrix(4.08797, 0, 0, 1.37238, 0, 0); translate: calc(-447.17 * var(--u)) calc(-242.74 * var(--u)); }
.change--2 .change__bg { background: var(--c-card-channels); }
.change--2 .glow { background-image: url('../assets/desktop/glow-violet.webp'); transform: matrix(4.22815, 0, 0, 1.41163, 0, 0); translate: calc(-634.03 * var(--u)) calc(-173.5 * var(--u)); }
.change--3 .glow { background-image: url('../assets/desktop/glow-blue.webp'); transform: matrix(3.54484, 0, 0, 1.18677, 0, 0); translate: calc(-437.36 * var(--u)) calc(-157.45 * var(--u)); }
.change--4 .glow { background-image: url('../assets/desktop/glow-red.webp'); transform: matrix(4.34028, 0, 0, 1.45707, 0, 0); translate: calc(-436.05 * var(--u)) calc(-256.23 * var(--u)); }

.changes[data-active='1'] .change--1 .change__bg,
.changes[data-active='2'] .change--2 .change__bg,
.changes[data-active='3'] .change--3 .change__bg,
.changes[data-active='4'] .change--4 .change__bg {
  opacity: 1;
}

.changes[data-active='1'] .change--1::before,
.changes[data-active='2'] .change--2::before,
.changes[data-active='3'] .change--3::before,
.changes[data-active='4'] .change--4::before {
  opacity: 0;
}

.change__number {
  left: calc(76 * var(--u));
  top: calc(75 * var(--u));
}

.change--2 .change__number { left: calc(77 * var(--u)); }
.change--3 .change__number { left: calc(76 * var(--u)); }
.change--4 .change__number { left: calc(79 * var(--u)); }

.change__title {
  left: calc(78 * var(--u));
  top: calc(143 * var(--u));
  width: calc(var(--title-width) * var(--u));
  font-family: var(--f-wide);
  font-size: calc(18 * var(--u));
  line-height: calc(23 * var(--u));
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: transparent;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
}

.change--1 .change__title { background-image: linear-gradient(90deg, var(--c-green-from), var(--c-green-to)); }
.change--2 .change__title { background-image: var(--g-channels); }
.change--3 .change__title { background-image: linear-gradient(83.06deg, var(--c-blue-from) 16.2%, var(--c-blue-to) 105.43%); }
.change--4 .change__title { background-image: linear-gradient(85.86deg, var(--c-red-from) 1.11%, var(--c-red-to) 96.44%); }

.change__text {
  left: calc(78 * var(--u));
  top: calc(224 * var(--u));
  width: calc(var(--text-width) * var(--u));
  font-size: calc(14 * var(--u));
  line-height: calc(18 * var(--u));
  letter-spacing: -0.05em;
  opacity: 0.33;
}

.change--2 .change__title,
.change--2 .change__text,
.change--2 .change__number {
  left: calc(78 * var(--u));
}

.change--2 .change__number {
  left: calc(77 * var(--u));
}

.change--3 .change__title,
.change--3 .change__text {
  left: calc(78 * var(--u));
}

.change--4 .change__title,
.change--4 .change__text {
  left: calc(79 * var(--u));
}

.changes[data-active='1'] .change--1 .change__text,
.changes[data-active='2'] .change--2 .change__text,
.changes[data-active='3'] .change--3 .change__text,
.changes[data-active='4'] .change--4 .change__text {
  opacity: 1;
}

.change__logos {
  left: calc(73 * var(--u));
  top: calc(739 * var(--u));
  width: calc(217 * var(--u));
  height: calc(50.72 * var(--u));
  opacity: 0;
}

.changes[data-active='2'] .change__logos {
  opacity: 1;
}

.changes__diagram {
  left: calc(230 * var(--u));
  top: 0;
  width: calc(1460 * var(--u));
  height: calc(843 * var(--u));
  overflow: visible;
  pointer-events: none;
}

.changes__tint {
  opacity: 0;
}

.changes[data-active='2'] .changes__tint--2,
.changes[data-active='3'] .changes__tint--3,
.changes[data-active='4'] .changes__tint--4 {
  opacity: 1;
}

.changes__label {
  top: calc(536 * var(--u));
  font-family: var(--f-wide);
  font-size: calc(12 * var(--u));
  line-height: calc(16 * var(--u));
  letter-spacing: -0.04em;
  text-align: center;
  text-transform: uppercase;
  color: var(--c-text-lit);
  opacity: 0.3;
  pointer-events: none;
}

.changes__label--clients {
  left: calc(375 * var(--u));
  width: calc(66 * var(--u));
}

.changes__label--business {
  left: calc(1484 * var(--u));
  top: calc(537 * var(--u));
  width: calc(56 * var(--u));
}

/* Подводка к блоку «Бесплатно» */

.note {
  height: calc(98 * var(--u));
  margin-top: calc(159 * var(--u));
}

.note__avatar {
  left: calc(229 * var(--u));
  top: 0;
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
  border-radius: 50%;
}

.note__text {
  left: calc(229 * var(--u));
  top: calc(44 * var(--u));
  width: calc(464 * var(--u));
  font-size: calc(14 * var(--u));
  line-height: calc(18 * var(--u));
  opacity: 0.4;
}

.note__arrow {
  left: calc(486.5 * var(--u));
  top: calc(88.5 * var(--u));
  width: calc(16.182 * var(--u));
  height: calc(13 * var(--u));
  opacity: 0.67;
}

/* Бесплатно до курса */

.free {
  height: calc(1201 * var(--u));
  margin-top: calc(52 * var(--u));
}

.free__card {
  left: calc(20 * var(--u));
  top: 0;
  width: calc(1880 * var(--u));
  height: calc(738 * var(--u));
}

.free__card .glow {
  opacity: 0.8;
  transform: matrix(-0.91351, 0.56656, 1.15377, 1.86028, 0, 0);
  translate: calc(983.6 * var(--u)) calc(-555.06 * var(--u));
}

/* «00 бесплатно до курса» */
.free__badge {
  left: calc(109 * var(--u));
  top: calc(71 * var(--u));
  width: calc(280 * var(--u));
  height: calc(22 * var(--u));
}

.free__badge .label {
  position: absolute;
  left: calc(54 * var(--u));
  top: 0;
}

.free__dots {
  left: calc(158 * var(--u));
  top: calc(171 * var(--u));
}

.free__title {
  left: calc(224 * var(--u));
  top: calc(137 * var(--u));
  --hw: 1156;
  --hh: 219;
  font-size: calc(66 * var(--u));
  line-height: calc(73 * var(--u));
}

/*
 * Пунктир 0.94 / 2.81 белым 40% под строками заголовков. SVG-линия, а не
 * фон: полоса тоньше пикселя в дробной позиции у Chrome пропадает.
 * Блок высотой 3, линия посередине.
 */
.underline {
  position: absolute;
  left: calc(230 * var(--u));
  height: calc(3 * var(--u));
  overflow: visible;
  opacity: 0.4;
  transform-origin: 0 50%;
  pointer-events: none;
}

.underline line {
  stroke: var(--c-white);
  stroke-width: calc(0.94 * var(--u));
  stroke-dasharray: calc(0.94 * var(--u)) calc(2.81 * var(--u));
}

.free__lead,
.free__aside {
  top: calc(407 * var(--u));
  font-size: calc(22 * var(--u));
  line-height: calc(29 * var(--u));
  letter-spacing: -0.05em;
}

.free__lead {
  left: calc(229 * var(--u));
  width: calc(514 * var(--u));
}

.free__aside {
  left: calc(976 * var(--u));
  width: calc(465 * var(--u));
}

.free__aside {
  color: var(--c-text-50);
}

.free__aside-arrow {
  position: absolute;
  left: calc(208.5 * var(--u));
  top: calc(71.5 * var(--u));
  width: calc(16.182 * var(--u));
  height: calc(13 * var(--u));
}

/* Форма: поле телефона, согласие, кнопка с подписью */
.lead-form {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.lead-form > * {
  pointer-events: auto;
}

.free__form {
  --form-top: 546;
}

.phone {
  left: calc(229 * var(--u));
  top: calc(var(--form-top) * var(--u));
  width: calc(709 * var(--u));
  height: calc(58 * var(--u));
  border-radius: calc(41.82 * var(--u));
  background: var(--c-field);
  cursor: text;
}

/* Вторая рамка #aaa с отступом 4px */
.phone::before {
  content: '';
  position: absolute;
  inset: calc(4 * var(--u));
  border: calc(1 * var(--u)) solid var(--c-field-border);
  border-radius: calc(41.82 * var(--u));
  pointer-events: none;
}

.phone__icon {
  left: calc(26.5 * var(--u));
  top: calc(22.5 * var(--u));
  width: calc(13 * var(--u));
  height: calc(13 * var(--u));
}

.phone__input {
  left: calc(58 * var(--u));
  top: 0;
  width: calc(620 * var(--u));
  height: 100%;
  outline: none;
  color: var(--c-field-text);
  font-family: var(--f-wide);
  font-size: calc(13.94 * var(--u));
  line-height: calc(21 * var(--u));
  letter-spacing: 0.14em;
}

.phone__input::placeholder {
  color: var(--c-field-text);
  text-transform: uppercase;
  opacity: 0.2;
}

/*
 * Номер из автозаполнения браузера: Chrome красит поле голубым и меняет цвет
 * текста. Внутренняя тень цвета поля закрывает его заливку.
 */
.phone__input:is(:autofill, :-webkit-autofill) {
  -webkit-box-shadow: 0 0 0 calc(100 * var(--u)) var(--c-field) inset;
  box-shadow: 0 0 0 calc(100 * var(--u)) var(--c-field) inset;
  -webkit-text-fill-color: var(--c-field-text);
  caret-color: var(--c-field-text);
}

.phone:has(.phone__input:focus-visible) {
  outline: calc(2 * var(--u)) solid var(--c-link);
  outline-offset: calc(4 * var(--u));
}

.phone.is-invalid::before {
  border-color: var(--c-error);
}

/* Поле-ловушка для ботов: людям не видно и недоступно с клавиатуры */
.lead-form__trap {
  left: 0;
  top: 0;
  width: calc(1 * var(--u));
  height: calc(1 * var(--u));
  opacity: 0;
  clip-path: inset(50%);
  pointer-events: none;
}

/*
 * Согласие на обработку персональных данных — отдельная отметка (152-ФЗ).
 * Кружок макета стал чекбоксом, подпись — его label: щёлкнуть можно и по
 * тексту, и по промежутку до кружка (подпись захватывает его отступом).
 */
.consent {
  left: calc(287 * var(--u));
  top: calc((var(--form-top) + 74) * var(--u));
  width: calc((327 + 29.44) * var(--u));
  margin-left: calc(-29.44 * var(--u));
  padding-left: calc(29.44 * var(--u));
  font-size: calc(10.45 * var(--u));
  line-height: calc(14 * var(--u));
  letter-spacing: -0.05em;
  color: var(--c-text-33);
  cursor: pointer;
}

.consent__box {
  position: absolute;
  left: 0;
  top: calc(2.56 * var(--u));
  width: calc(8.889 * var(--u));
  height: calc(8.889 * var(--u));
  background: var(--i-check-off) 0 0 / 100% 100% no-repeat;
  cursor: pointer;
  appearance: none;
}

.consent__box:checked {
  background-image: var(--i-check-on);
}

.consent__box[aria-invalid='true'] {
  background-image: var(--i-check-error);
}

/*
 * Подчёркнутые ссылки: подчёркивание — линия ::after ровно на месте обычного
 * (базовая линия — 71.4% кегля от верха строки, плюс отступ из макета). При
 * наведении она плавно уезжает влево и укорачивается.
 */
.consent__link,
.footer__link {
  position: relative;
  text-decoration: none;
}

.consent__link::after,
.footer__link::after,
.faq__question::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc(0.714em + var(--line-offset, 2) * var(--u));
  border-top: calc(1 * var(--u)) solid;
  transform-origin: 0 50%;
  pointer-events: none;
}

.consent__link {
  color: var(--c-link-33);
}

.submit {
  left: calc(976 * var(--u));
  top: calc(var(--form-top) * var(--u));
  width: calc(451 * var(--u));
  height: calc(123 * var(--u));
}

/* Рамка белым 8% вокруг кнопки и подписи */
.submit::after {
  content: '';
  position: absolute;
  inset: 0;
  border: calc(0.87 * var(--u)) solid var(--c-white-8);
  border-radius: calc(30 * var(--u));
  pointer-events: none;
}

.submit__button {
  left: 0;
  top: 0;
  width: 100%;
  height: calc(58 * var(--u));
}

.submit__dash,
.submit__note {
  top: calc(74 * var(--u));
  font-size: calc(10.45 * var(--u));
  line-height: calc(14 * var(--u));
  letter-spacing: -0.05em;
}

.submit__dash {
  left: calc(45 * var(--u));
}

.submit__note {
  left: calc(62 * var(--u));
  width: calc(355 * var(--u));
}

.submit--wide {
  width: calc(714 * var(--u));
  height: calc(58 * var(--u));
}

.submit--wide::after {
  content: none;
}

.free__divider {
  left: calc(1515 * var(--u));
  top: 0;
  width: 0;
  height: calc(738 * var(--u));
  border-left: calc(1 * var(--u)) solid var(--c-white);
  opacity: 0.05;
}

/* Менеджер: Марта Серебро */
.manager {
  left: calc(1609 * var(--u));
  top: calc(76.5 * var(--u));
  width: calc(210 * var(--u));
  height: calc(292 * var(--u));
}

.manager__icon {
  left: calc(0.3 * var(--u));
  top: 0;
  width: calc(13.939 * var(--u));
  height: calc(13.242 * var(--u));
  opacity: 0.5;
}

.manager__name {
  left: calc(1 * var(--u));
  top: calc(61.5 * var(--u));
  font-family: var(--f-wide);
  font-size: calc(22 * var(--u));
  line-height: calc(26 * var(--u));
  letter-spacing: -0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.manager__role {
  left: calc(2 * var(--u));
  top: calc(98.5 * var(--u));
  width: calc(181 * var(--u));
  font-size: calc(12 * var(--u));
  line-height: calc(16 * var(--u));
  color: var(--c-text-lit);
  opacity: 0.5;
}

.manager__phone {
  left: 0;
  top: calc(188.5 * var(--u));
  font-family: var(--f-wide);
  font-size: calc(20.51 * var(--u));
  line-height: calc(23 * var(--u));
  letter-spacing: -0.06em;
  white-space: nowrap;
  color: var(--c-phone);
}

/*
 * Рамка «Напишите нам в мессенджере»: обводка белым 12%, левая часть с
 * подписью — своя рамка той же обводки с прозрачностью 30% (она же
 * разделитель перед иконкой Telegram)
 */
.manager__links {
  left: 0;
  top: calc(234.5 * var(--u));
  width: calc(201 * var(--u));
  height: calc(57 * var(--u));
  border-radius: calc(11.91 * var(--u));
}

.manager__links::before,
.manager__links::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border: calc(1 * var(--u)) solid var(--c-white-12);
  pointer-events: none;
}

.manager__links::before {
  width: 100%;
  border-radius: inherit;
}

.manager__links::after {
  width: calc(140 * var(--u));
  border-radius: calc(11.91 * var(--u)) 0 0 calc(11.91 * var(--u));
  opacity: 0.3;
}

.manager__label {
  left: calc(22 * var(--u));
  top: calc(17.46 * var(--u));
  font-family: var(--f-wide);
  font-size: calc(8 * var(--u));
  line-height: calc(11 * var(--u));
  letter-spacing: 0.17em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-text-lit);
  opacity: 0.5;
}

.manager__link {
  position: absolute;
}

.manager__link img {
  width: 100%;
  height: 100%;
}

.manager__link--telegram {
  left: calc(158 * var(--u));
  top: calc(18.78 * var(--u));
  width: calc(23 * var(--u));
  height: calc(20 * var(--u));
}

.free__photo {
  left: calc(1518 * var(--u));
  top: calc(377 * var(--u));
  width: calc(382 * var(--u));
  height: calc(361 * var(--u));
  overflow: hidden;
  border-radius: calc(30 * var(--u));
}

.free__photo img {
  position: absolute;
  left: 0;
  top: calc(30.2 * var(--u));
  width: 100%;
  height: auto;
}

/* Две карточки под формой */
.free__step {
  top: calc(743 * var(--u));
  height: calc(458 * var(--u));
}

.free__step--1 {
  left: calc(20 * var(--u));
  width: calc(863 * var(--u));
  background-color: var(--c-card-light);
}

.free__step--2 {
  left: calc(888 * var(--u));
  width: calc(1012 * var(--u));
}

/* Линия под плашкой «00», во всю ширину карточки */
.free__step::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc(85.5 * var(--u));
  height: 0;
  border-top: calc(1 * var(--u)) solid var(--c-white);
  opacity: 0.03;
}

.free__step-badge {
  left: calc(89 * var(--u));
  top: calc(35 * var(--u));
}

.free__step-icon {
  left: calc(952.5 * var(--u));
  top: calc(40.5 * var(--u));
  width: calc(11.8 * var(--u));
  height: calc(11.8 * var(--u));
}

.free__diagram {
  left: calc(84 * var(--u));
  top: calc(129 * var(--u));
  width: calc(402 * var(--u));
  height: calc(111 * var(--u));
  overflow: visible;
}

.free__avatars {
  left: calc(89 * var(--u));
  top: calc(146 * var(--u));
  width: calc(127 * var(--u));
  height: calc(60 * var(--u));
}

.free__avatars img {
  position: absolute;
  top: 0;
  width: calc(60 * var(--u));
  height: calc(60 * var(--u));
  border-radius: 50%;
}

.free__avatars img:first-child {
  left: 0;
  z-index: 1;
}

.free__avatars img:last-child {
  left: calc(67 * var(--u));
}

.free__step-text {
  left: calc(89 * var(--u));
  top: calc(274 * var(--u));
  font-size: calc(30 * var(--u));
  line-height: calc(36 * var(--u));
  letter-spacing: -0.05em;
}

.free__step--1 .free__step-text {
  width: calc(695 * var(--u));
}

.free__step--2 .free__step-text {
  width: calc(790 * var(--u));
}

/* Что вы получите: слайдер результатов */

.results {
  height: calc(718 * var(--u));
  margin-top: calc(159 * var(--u));
}

.results__title {
  left: calc(226 * var(--u));
  top: 0;
  --hw: 799;
  --hh: 222;
  --angle: 83.68deg;
}

.results__arrows {
  left: calc(1531 * var(--u));
  top: calc(156 * var(--u));
}

/*
 * Слайдеры на широком экране — от края до края окна: шире на поля по бокам,
 * а отступы в начале и в конце ленты больше на столько же, поэтому карточки
 * стоят и прокручиваются как на 1920px.
 */
.results__slider {
  left: calc(-1 * var(--bleed));
  top: calc(322 * var(--u));
  width: calc(100% + 2 * var(--bleed));
  height: calc(120 * var(--u));
  padding-left: calc(140 * var(--u) + var(--bleed));
  scroll-padding-left: calc(140 * var(--u) + var(--bleed));
}

.results__track {
  gap: calc(150 * var(--u));
  padding-right: calc(140 * var(--u) + var(--bleed));
  height: 100%;
}

.result {
  height: 100%;
}

.result--1 { width: calc(560.4 * var(--u)); }
.result--2 { width: calc(684.6 * var(--u)); }
.result--3 { width: calc(600.6 * var(--u)); }

.result__number {
  left: 0;
  top: 0;
}

.result__meta {
  left: calc(90 * var(--u));
  top: calc(2 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(44.31 * var(--u));
  height: calc(39.68 * var(--u));
  white-space: nowrap;
}

.result--2 .result__meta { left: calc(90.4 * var(--u)); }
.result--3 .result__meta { gap: calc(38.76 * var(--u)); }

/* Плашка результата: стекло, обводка #404040 22%, размытие 7 */
.tag {
  position: relative;
  gap: calc(12.8 * var(--u));
  height: calc(39.68 * var(--u));
  padding: 0 calc(12.8 * var(--u)) 0 calc(13.8 * var(--u));
  border-radius: calc(6.4 * var(--u));
  -webkit-backdrop-filter: blur(calc(6.99 * var(--u)));
  backdrop-filter: blur(calc(6.99 * var(--u)));
}

.tag::before {
  border-color: var(--c-tag-border);
}

.tag__icon {
  width: calc(13.568 * var(--u));
  height: calc(13.568 * var(--u));
  margin: calc(-0.64 * var(--u));
}

.result--3 .tag__icon {
  width: calc(14.72 * var(--u));
  height: calc(13.88 * var(--u));
}

/*
 * Точки «Ё» выше строки 13px, а фон с background-clip: text обрезается по
 * рамке: рамка выше и ниже строки на 2px (поля гасят сдвиг), градиент
 * по-прежнему по строке, над ней — его повтор.
 */
.tag__label {
  margin-block: calc(-2 * var(--u));
  padding-block: calc(2 * var(--u));
  font-family: var(--f-wide);
  font-size: calc(12.29 * var(--u));
  line-height: calc(13 * var(--u));
  text-transform: uppercase;
  color: transparent;
  background: var(--g-brand) 0 0 / 100% 100% repeat-y content-box;
  -webkit-background-clip: text;
  background-clip: text;
}

.result__formats {
  font-family: var(--f-wide);
  font-size: calc(12.29 * var(--u));
  line-height: calc(13 * var(--u));
  color: var(--c-text-lit);
  opacity: 0.2;
}

.result__union {
  width: calc(12.8 * var(--u));
  height: calc(11.2 * var(--u));
  margin-left: calc(-41.7 * var(--u));
}

.result__text {
  left: calc(90 * var(--u));
  top: calc(61.68 * var(--u));
  font-size: calc(22 * var(--u));
  line-height: calc(29 * var(--u));
  white-space: nowrap;
}

.results__progress {
  left: calc(231.5 * var(--u));
  top: calc(581 * var(--u));
  width: calc(1458.5 * var(--u));
  --thumb: 1019;
}

.results__progress .progress__thumb {
  left: calc(0.5 * var(--u));
  background: var(--c-progress);
}

.results__note {
  left: calc(232 * var(--u));
  top: calc(662 * var(--u));
  font-size: calc(14 * var(--u));
  line-height: calc(18 * var(--u));
  white-space: nowrap;
  opacity: 0.4;
}

.results__button {
  left: calc(940 * var(--u));
  top: calc(660 * var(--u));
  width: calc(750 * var(--u));
  height: calc(58 * var(--u));
}

/* Аккордеоны: модули программы и частые вопросы */

.accordion {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
}

.acc {
  position: relative;
  min-height: calc(131 * var(--u));
}

/*
 * Подложка пункта — в рамке со скруглением 30: при раскрытии и сворачивании
 * рамка едет вверх, а подложка в ней — на столько же вниз (js/main.js).
 * Нижний край с углами движется вместе с высотой, а радиус и сама подложка
 * не искажаются, как при растяжении scaleY.
 */
.acc__shape {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: calc(30 * var(--u));
  pointer-events: none;
}

.acc__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: calc(30 * var(--u));
  background: var(--c-card-module);
}

.acc__bg .glow {
  opacity: 0;
}

.acc.is-open .acc__bg .glow {
  opacity: 0.8;
}

.acc__head {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(131 * var(--u));
}

.acc__button {
  position: absolute;
  inset: 0;
  width: 100%;
  border-radius: calc(30 * var(--u));
  text-align: left;
}

.acc__chevron {
  width: calc(12 * var(--u));
  height: calc(6.58 * var(--u));
  pointer-events: none;
}

/* Модули программы */

.program {
  margin-top: calc(130 * var(--u));
  padding-top: calc(309 * var(--u));
}

.program__head {
  --rule-from: 388;
}

.program__title {
  left: calc(226 * var(--u));
  top: calc(78 * var(--u));
  --hw: 799;
  --hh: 148;
  --angle: 80.57deg;
}

.program__list {
  margin-left: calc(230 * var(--u));
  width: calc(1460 * var(--u));
}

.program__item {
  padding-top: calc(114 * var(--u));
}

.program__item--2 .acc__bg {
  opacity: 0.88;
}

.program__item .acc__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border: calc(1 * var(--u)) solid var(--c-white-5);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}

.program__item.is-open .acc__bg::before {
  opacity: 1;
}

.program__item .glow {
  transform: matrix(-1.20068, 0.69903, 2.07933, 3.1471, 0, 0);
  translate: calc(655.67 * var(--u)) calc(-822.26 * var(--u));
}

.acc__number {
  left: calc(42 * var(--u));
  top: calc(32 * var(--u));
}

.acc__label {
  left: calc(91 * var(--u));
  top: calc(32 * var(--u));
}

.acc__title {
  left: calc(91 * var(--u));
  top: calc(68 * var(--u));
  font-size: calc(18 * var(--u));
  line-height: calc(23 * var(--u));
  white-space: nowrap;
}

/* «Маркетинг   |   Трафик»: по три пробела вокруг черты */
.acc__sep {
  margin: 0 calc(15 * var(--u));
}

.acc__rule {
  left: calc(200.5 * var(--u));
  top: calc(43.5 * var(--u));
  width: calc(1173 * var(--u));
  height: 0;
  border-top: calc(1 * var(--u)) solid var(--c-white);
  opacity: 0.08;
}

.acc__icon {
  left: calc(1408.5 * var(--u));
  top: calc(37.5 * var(--u));
  width: calc(13.931 * var(--u));
  height: calc(11.8 * var(--u));
}

.program__item .acc__chevron {
  left: calc(1409 * var(--u));
  top: calc(76 * var(--u));
}

.program__item.is-open .acc__chevron {
  top: auto;
  bottom: calc(42.42 * var(--u));
  scale: 1 -1;
}

.program__item.is-open .acc__head {
  height: calc(114 * var(--u));
}

.points {
  position: relative;
  margin: 0 calc(1 * var(--u));
}

.point {
  position: relative;
  border-top: calc(1 * var(--u)) solid var(--c-white-3);
}

.point--1 {
  padding: calc(52 * var(--u)) 0 calc(39 * var(--u));
}

.point--2 {
  padding: calc(41 * var(--u)) 0 calc(54 * var(--u));
}

.point__number {
  position: absolute;
  left: calc(89 * var(--u));
  top: calc(55 * var(--u));
  -webkit-text-stroke-color: var(--c-white-8);
}

.point--2 .point__number {
  top: calc(46 * var(--u));
}

.point__text {
  margin-left: calc(200 * var(--u));
  width: calc(837 * var(--u));
  font-size: calc(22 * var(--u));
  line-height: calc(29 * var(--u));
  letter-spacing: -0.05em;
}

/* Спикеры */

.team {
  height: calc(1350 * var(--u));
  margin-top: calc(127 * var(--u));
}

.team__head {
  --rule-from: 366;
}

.team__head .label {
  left: calc(229 * var(--u));
}

.team__head .rule {
  width: calc(1268.5 * var(--u));
}

.team__head .section-head__icon {
  left: calc(1678 * var(--u));
}

.team__title {
  left: calc(225 * var(--u));
  top: calc(78 * var(--u));
  --hw: 799;
  --hh: 148;
  --angle: 80.57deg;
}

.team__text {
  left: calc(228 * var(--u));
  top: calc(259 * var(--u));
  width: calc(731 * var(--u));
  white-space: normal;
}

.team__sparkle {
  left: calc(576 * var(--u));
  top: calc(336 * var(--u));
  width: calc(25.42 * var(--u));
  height: calc(22.63 * var(--u));
  overflow: visible;
}

.team__hint {
  left: calc(1680 * var(--u));
  top: calc(135 * var(--u));
}

.team__card {
  --top: 473;
}

.team__card--1,
.team__card--3 {
  top: calc(473 * var(--u));
  height: calc(574 * var(--u));
}

.team__card--2,
.team__card--4 {
  top: calc(1052 * var(--u));
  height: calc(298 * var(--u));
  opacity: 0.45;
}

.team__card--1,
.team__card--2 {
  left: calc(15 * var(--u));
  width: calc(937 * var(--u));
}

.team__card--3,
.team__card--4 {
  left: calc(957 * var(--u));
  width: calc(938 * var(--u));
}

.team__card .glow {
  opacity: 0.8;
}

.team__card--1 .glow { transform: matrix(2.08655, 0, 0, 1.66964, 0, 0); translate: calc(-1018.1 * var(--u)) calc(-86.66 * var(--u)); }
.team__card--2 .glow { transform: matrix(2.08655, 0, 0, 3.27568, 0, 0); translate: calc(-1018.1 * var(--u)) calc(-677.27 * var(--u)); }
.team__card--3 .glow { transform: matrix(2.08655, 0, 0, 1.66964, 0, 0); translate: calc(-1019.18 * var(--u)) calc(-86.66 * var(--u)); }
.team__card--4 .glow { transform: matrix(2.08655, 0, 0, 3.27568, 0, 0); translate: calc(-1019.18 * var(--u)) calc(-677.27 * var(--u)); }

.team__photo {
  pointer-events: none;
}

.team__photo img {
  width: 100%;
  height: 100%;
}

.team__photo--elena {
  left: calc(333 * var(--u));
  top: calc(527 * var(--u));
  width: calc(578 * var(--u));
  height: calc(823 * var(--u));
}

/* Картинка Павла — общая с первым экраном, чуть шире окна */
.team__photo--pavel {
  left: calc(1246 * var(--u));
  top: calc(526 * var(--u));
  width: calc(636 * var(--u));
  height: calc(824 * var(--u));
  overflow: hidden;
  border-radius: calc(30 * var(--u));
}

.team__photo--pavel img {
  position: absolute;
  left: calc(-0.38 * var(--u));
  top: calc(-0.54 * var(--u));
  width: calc(640.9 * var(--u));
  height: calc(824.72 * var(--u));
}

.speaker {
  top: calc(547 * var(--u));
  width: calc(260 * var(--u));
  height: calc(441 * var(--u));
}

.speaker--elena {
  left: calc(131 * var(--u));
}

.speaker--pavel {
  left: calc(1068 * var(--u));
}

.speaker__name {
  left: 0;
  top: 0;
  font-family: var(--f-wide);
  font-size: calc(40 * var(--u));
  line-height: calc(44 * var(--u));
  letter-spacing: -0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.speaker__bio {
  left: 0;
  top: calc(130 * var(--u));
  width: calc(244 * var(--u));
  font-size: calc(18 * var(--u));
  line-height: calc(23 * var(--u));
}

.speaker--elena .speaker__bio {
  width: calc(237 * var(--u));
}

/* Плашка телеграм-канала: аватар и подчёркнутое название */
.channel {
  display: block;
  height: calc(35 * var(--u));
  border-radius: calc(7 * var(--u));
  background: var(--c-glass);
  -webkit-backdrop-filter: blur(calc(4.55 * var(--u)));
  backdrop-filter: blur(calc(4.55 * var(--u)));
}

.channel::before {
  content: '';
  position: absolute;
  inset: 0;
  border: calc(1 * var(--u)) solid var(--c-white-2);
  border-radius: inherit;
  pointer-events: none;
}

.channel > * {
  position: absolute;
  top: calc(12 * var(--u));
}

.channel__avatar {
  left: calc(17 * var(--u));
  width: calc(11 * var(--u));
  height: calc(11 * var(--u));
  border-radius: 50%;
}

.channel__name {
  left: calc(38 * var(--u));
  font-family: var(--f-wide);
  font-size: calc(9 * var(--u));
  line-height: calc(11 * var(--u));
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-link-channel);
}

.channel__name::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc(11 * var(--u));
  border-top: calc(1 * var(--u)) solid;
  opacity: 0.18;
  transform-origin: 0 50%;
}

.speaker__channel {
  left: 0;
  top: calc(342 * var(--u));
  width: calc(187 * var(--u));
}

.speaker__chip {
  left: 0;
  top: calc(405 * var(--u));
  width: calc(111 * var(--u));
}

.speaker__promise {
  width: calc(157 * var(--u));
  font-size: calc(14 * var(--u));
  line-height: calc(20 * var(--u));
  opacity: 0.5;
}

.speaker__promise--elena {
  left: calc(131 * var(--u));
  top: calc(1131 * var(--u));
}

.speaker__promise--pavel {
  left: calc(1068 * var(--u));
  top: calc(1127 * var(--u));
}

/* Преимущества: слайдер */

.advantages {
  height: calc(1320 * var(--u));
  margin-top: calc(130 * var(--u));
}

.advantages__head {
  --rule-from: 637.5;
}

.advantages__title {
  left: calc(226 * var(--u));
  top: calc(78 * var(--u));
  --hw: 1135;
  --hh: 148;
  --angle: 76.73deg;
}

.advantages__text {
  left: calc(229 * var(--u));
  top: calc(259 * var(--u));
  width: calc(731 * var(--u));
  white-space: normal;
}

.advantages__arrows {
  left: calc(1441 * var(--u));
  top: calc(299 * var(--u));
}

.advantages__slider {
  left: calc(-1 * var(--bleed));
  top: calc(481 * var(--u));
  width: calc(100% + 2 * var(--bleed));
  height: calc(800 * var(--u));
  padding-left: calc(230 * var(--u) + var(--bleed));
  scroll-padding-left: calc(230 * var(--u) + var(--bleed));
}

.advantages__track {
  gap: calc(80 * var(--u));
  padding-right: calc(711 * var(--u) + var(--bleed));
  height: 100%;
}

.advantage {
  width: calc(979 * var(--u));
  height: 100%;
}

/*
 * Карточки слайда: у активного — подложка #151515 со свечением и зерном,
 * у остальных — только рамка белым 5%. Подложка — отдельный слой, чтобы
 * смена слайда шла через прозрачность.
 */
.advantage__card {
  position: absolute;
  left: 0;
  width: 100%;
  border-radius: calc(30 * var(--u));
}

.advantage__card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border: calc(1 * var(--u)) solid var(--c-white-5);
  border-radius: inherit;
  pointer-events: none;
}

.advantage__surface {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background: var(--c-card-slide);
  opacity: 0;
}

.advantage__surface .glow {
  opacity: 0.3;
}

.advantage__card--main .glow {
  opacity: 1;
}

.advantage.is-active .advantage__surface {
  opacity: 1;
}

.advantage.is-active .advantage__card::before {
  opacity: 0;
}

.advantage__card--main {
  top: 0;
  height: calc(398 * var(--u));
}

.advantage__card--main .glow {
  transform: matrix(-1.58, 0, 0, 3.10694, 0, 0);
  translate: calc(950.31 * var(--u)) calc(61.83 * var(--u));
}

/* Первая карточка списка отражена по вертикали, как в макете */
.advantage__card--first {
  top: calc(408 * var(--u));
  height: calc(162 * var(--u));
  transform: scaleY(-1);
}

.advantage__card--first .glow {
  transform: matrix(-1.58, 0, 0, -7.63301, 0, 0);
  translate: calc(950.31 * var(--u)) calc(498.18 * var(--u));
}

.advantage__card--second {
  top: calc(580 * var(--u));
  height: calc(162 * var(--u));
}

.advantage__card--second .glow {
  transform: matrix(-1.58, 0, 0, 7.63301, 0, 0);
  translate: calc(950.31 * var(--u)) calc(-527.18 * var(--u));
}

.advantage--2 .advantage__card--second {
  height: calc(188 * var(--u));
}

.advantage--2 .advantage__card--second .glow,
.advantage--3 .advantage__card--second .glow {
  transform: matrix(-1.58, 0, 0, 6.57722, 0, 0);
  translate: calc(950.31 * var(--u)) calc(-527.16 * var(--u));
}

.advantage--3 .advantage__card--first {
  height: calc(194 * var(--u));
}

.advantage--3 .advantage__card--first .glow {
  transform: matrix(-1.58, 0, 0, -6.37389, 0, 0);
  translate: calc(950.31 * var(--u)) calc(530.18 * var(--u));
}

.advantage--3 .advantage__card--second {
  top: calc(612 * var(--u));
  height: calc(188 * var(--u));
}

.advantage__number {
  left: calc(84 * var(--u));
  top: calc(49 * var(--u));
  font-size: calc(120 * var(--u));
  line-height: calc(132 * var(--u));
}

.advantage--2 .advantage__number,
.advantage--3 .advantage__number {
  letter-spacing: -0.06em;
}

.advantage__title {
  left: calc(88 * var(--u));
  top: calc(195 * var(--u));
  --hw: 763;
  --hh: 132;
  font-size: calc(40 * var(--u));
  line-height: calc(44 * var(--u));
}

.advantage--1 .advantage__title {
  --hw: 677;
}

.advantage__list {
  left: 0;
  top: 0;
  width: 100%;
}

.advantage__item {
  position: absolute;
  left: calc(117 * var(--u));
  width: calc(734 * var(--u));
  font-size: calc(22 * var(--u));
  line-height: calc(29 * var(--u));
}

/* Галочка 18 × 18 белым 11% слева от текста */
.advantage__item::before {
  content: '';
  position: absolute;
  left: calc(-38.64 * var(--u));
  top: calc(2.36 * var(--u));
  width: calc(19.28 * var(--u));
  height: calc(19.28 * var(--u));
  background: url('../assets/desktop/check.svg') 0 0 / 100% 100% no-repeat;
}

.advantage__item--first {
  top: calc(461 * var(--u));
}

.advantage__item--second {
  top: calc(631 * var(--u));
  left: calc(119 * var(--u));
  width: calc(692 * var(--u));
}

.advantage__item--second::before {
  left: calc(-40.64 * var(--u));
}

.advantage--3 .advantage__item--first {
  width: calc(786 * var(--u));
}

.advantage--3 .advantage__item--second {
  top: calc(663 * var(--u));
  width: calc(773 * var(--u));
}

.advantages__progress {
  left: calc(230 * var(--u));
  top: calc(1316 * var(--u));
  width: calc(1460.5 * var(--u));
  --thumb: 696;
}

.advantages__progress .progress__thumb {
  left: calc(1 * var(--u));
  background: var(--c-white);
  opacity: 0.05;
}

/* Для кого */

.audience {
  height: calc(746 * var(--u));
  margin-top: calc(130 * var(--u));
}

.audience__head {
  --rule-from: 617.5;
}

.audience__title {
  left: calc(226 * var(--u));
  top: calc(78 * var(--u));
  --hw: 977;
  --hh: 222;
  --angle: 82.29deg;
}

.audience__hint {
  left: calc(1680 * var(--u));
  top: calc(114 * var(--u));
}

.audience__cards {
  left: 0;
  top: 0;
  width: 100%;
}

.role {
  position: absolute;
  top: calc(381 * var(--u));
  height: calc(222 * var(--u));
  border-radius: calc(30 * var(--u));
  background: var(--c-card-role);
}

.role--1 { left: calc(230 * var(--u)); width: calc(484 * var(--u)); --icon: 43.36; --text: 89; }
.role--2 { left: calc(719 * var(--u)); width: calc(482 * var(--u)); --icon: 44.36; --text: 91; }
.role--3 { left: calc(1206 * var(--u)); width: calc(484 * var(--u)); --icon: 42.36; --text: 91; }

.role__icon {
  left: calc(var(--icon, 43.36) * var(--u));
  top: calc(46.36 * var(--u));
  width: calc(16.64 * var(--u));
  height: calc(16.64 * var(--u));
}

.role__title {
  left: calc(var(--text) * var(--u));
  top: calc(44 * var(--u));
  width: calc(253 * var(--u));
  font-family: var(--f-wide);
  font-size: calc(20 * var(--u));
  line-height: calc(24 * var(--u));
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: transparent;
  background: var(--g-brand) 0 0 / 100% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
}

.role__text {
  left: calc(var(--text) * var(--u));
  top: calc(106 * var(--u));
  width: calc(353 * var(--u));
  font-size: calc(16 * var(--u));
  line-height: calc(21 * var(--u));
}

.audience__cta {
  left: calc(230 * var(--u));
  top: calc(608 * var(--u));
  width: calc(1460 * var(--u));
  height: calc(138 * var(--u));
  background-color: var(--c-card-cta);
}

.audience__cta .glow {
  opacity: 0.8;
  transform: matrix(0.841, 0.54099, -4.57583, 7.11282, 0, 0);
  translate: calc(631.47 * var(--u)) calc(-634.93 * var(--u));
}

.audience__cta-icon {
  left: calc(43.36 * var(--u));
  top: calc(46.36 * var(--u));
}

.audience__cta-text {
  left: calc(89 * var(--u));
  top: calc(44 * var(--u));
  width: calc(623 * var(--u));
  font-family: var(--f-wide);
  font-size: calc(20 * var(--u));
  line-height: calc(24 * var(--u));
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.audience__button {
  left: calc(820 * var(--u));
  top: calc(39 * var(--u));
  width: calc(584 * var(--u));
  height: calc(58 * var(--u));
}

/* Частые вопросы */

.faq {
  margin-top: calc(130 * var(--u));
  padding-top: calc(312 * var(--u));
}

.faq__head {
  --rule-from: 300.5;
}

.faq__title {
  left: calc(226 * var(--u));
  top: calc(78 * var(--u));
  --hw: 594;
  --hh: 148;
  --angle: 82.96deg;
}

.faq__list {
  margin-left: calc(110 * var(--u));
  width: calc(1700 * var(--u));
}

.faq__item {
  padding-top: calc(129 * var(--u));
}

.faq__item .acc__bg {
  background: transparent;
}

.faq__item .acc__bg::after {
  opacity: 0;
}

.faq__item .acc__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border: calc(1 * var(--u)) solid var(--c-white-5);
  border-radius: inherit;
  pointer-events: none;
}

.faq__item.is-open .acc__bg {
  background: var(--c-card-slide);
}

.faq__item.is-open .acc__bg::after {
  opacity: 0.15;
}

.faq__item.is-open .acc__bg::before {
  opacity: 0;
}

.faq__item .glow {
  transform: matrix(-1.58, 0, 0, 6.4855, 0, 0);
  translate: calc(1650.17 * var(--u)) calc(-1186.17 * var(--u));
}

.faq__item.is-open .acc__bg .glow {
  opacity: 0.3;
}

.faq__icon {
  left: calc(80.28 * var(--u));
  top: calc(55.4 * var(--u));
  width: calc(16.64 * var(--u));
  height: calc(17.6 * var(--u));
}

.faq__question {
  left: calc(119 * var(--u));
  top: calc(50 * var(--u));
  font-size: calc(22 * var(--u));
  line-height: calc(31 * var(--u));
  white-space: nowrap;
  color: var(--c-question);
}

/* Вопрос — блок высотой в строку 31px: базовая линия на 21.18px, отступ 5px */
.faq__question::after {
  top: calc(26.18 * var(--u));
}

.faq__item.is-open .faq__question {
  color: var(--c-white);
  font-weight: 700;
}

.faq__item.is-open .faq__question::after {
  opacity: 0;
}

.faq__item .acc__chevron {
  left: calc(1572 * var(--u));
  top: calc(61 * var(--u));
}

.faq__item.is-open .acc__chevron {
  scale: 1 -1;
}

.faq__answer {
  position: relative;
  z-index: 1;
  margin-left: calc(119 * var(--u));
  padding-bottom: calc(76 * var(--u));
  width: calc(995 * var(--u));
  min-height: calc(300 * var(--u));
  font-weight: 300;
  font-size: calc(20 * var(--u));
  line-height: calc(28 * var(--u));
  letter-spacing: -0.01em;
}

.faq__answer p + p {
  margin-top: calc(28 * var(--u));
}

.faq__link {
  color: var(--c-question-hover);
  text-decoration: underline;
  text-decoration-thickness: calc(1 * var(--u));
  text-underline-offset: calc(3 * var(--u));
}

/*
 * Фото эксперта со звёздочкой и логотипом стоит на нижнем крае открытой
 * карточки, как в макете (там карточка 429px, ответ — 300px). Ответ не ниже
 * макетного (.faq__answer): при коротком ответе фото иначе вылезало бы на
 * следующие вопросы.
 */
.faq__art {
  position: absolute;
  inset: auto 0 0;
  height: calc(429 * var(--u));
  pointer-events: none;
}

.faq__sparkle {
  left: calc(1182 * var(--u));
  top: calc(23 * var(--u));
  width: calc(432 * var(--u));
  height: calc(384.62 * var(--u));
  overflow: visible;
  opacity: 0.11;
}

.faq__photo {
  left: calc(1140 * var(--u));
  top: calc(-19 * var(--u));
  width: calc(462 * var(--u));
  height: calc(447 * var(--u));
  scale: -1 1;
}

/* Логотип, повёрнутый на 90°: читается снизу вверх */
.faq__logo {
  left: calc(1567 * var(--u));
  top: calc(343.79 * var(--u));
  width: calc(73.79 * var(--u));
  height: calc(21.11 * var(--u));
  opacity: 0.2;
  rotate: -90deg;
  transform-origin: 0 0;
}

.faq__logo img {
  position: absolute;
  top: 0;
}

.faq__logo img:first-child {
  left: 0;
  width: calc(21.11 * var(--u));
  height: calc(21.11 * var(--u));
}

.faq__logo img:last-child {
  left: calc(27.45 * var(--u));
  top: calc(0.77 * var(--u));
  width: calc(46.34 * var(--u));
  height: calc(20.22 * var(--u));
}

/* Первый шаг: модули, карточка с заявкой */

.final {
  height: calc(1370 * var(--u));
  margin-top: calc(130 * var(--u));
}

.final__head {
  --rule-from: 842.5;
}

.final__title {
  left: calc(226 * var(--u));
  top: calc(78 * var(--u));
  --hw: 1201;
  --hh: 222;
  --angle: 80.56deg;
}

.final__card {
  left: calc(20 * var(--u));
  top: calc(548 * var(--u));
  width: calc(1880 * var(--u));
  height: calc(822 * var(--u));
}

.final__card .glow {
  opacity: 0.8;
  transform: matrix(-0.9135, 0.56656, 1.03587, 1.67017, 0, 0);
  translate: calc(983.6 * var(--u)) calc(-555.05 * var(--u));
}

.final__badge {
  top: calc(619 * var(--u));
}

.final__dots {
  left: calc(158 * var(--u));
  top: calc(749 * var(--u));
}

.final__card-title {
  left: calc(224 * var(--u));
  top: calc(715 * var(--u));
  --hw: 1504;
  --hh: 219;
  font-size: calc(66 * var(--u));
  line-height: calc(73 * var(--u));
}

.final__lead,
.final__aside {
  top: calc(1013 * var(--u));
}

.final__form {
  --form-top: 1152;
}

/* Подвал: как шапка, вместо описания — документы */

.footer {
  height: calc(89 * var(--u));
  margin-top: calc(36 * var(--u));
}

.footer__logo {
  top: calc(5.77 * var(--u));
}

.footer__divider {
  top: 0;
}

.footer__links {
  left: calc(262 * var(--u));
  top: calc(4 * var(--u));
  display: grid;
  gap: calc(4 * var(--u));
  font-size: calc(11 * var(--u));
  line-height: calc(14 * var(--u));
  letter-spacing: -0.05em;
  white-space: nowrap;
}

.footer__link {
  color: var(--c-link);
  opacity: 0.33;
}

.footer__copy {
  margin-top: calc(2 * var(--u));
  opacity: 0.33;
}

.footer__messenger {
  left: calc(560 * var(--u));
  top: 0;
}

.footer__cta {
  top: calc(3 * var(--u));
}

.footer__contact {
  top: calc(4 * var(--u));
}

.footer__burger {
  top: calc(13.5 * var(--u));
}

.free__underline--1 { top: calc(209.5 * var(--u)); width: calc(951 * var(--u)); }
.free__underline--2 { top: calc(281.5 * var(--u)); width: calc(1039.5 * var(--u)); }
.free__underline--3 { top: calc(353.5 * var(--u)); width: calc(359.5 * var(--u)); }
.final__underline--1 { top: calc(787.5 * var(--u)); width: calc(1299.5 * var(--u)); }
.final__underline--2 { top: calc(859.5 * var(--u)); width: calc(1435.5 * var(--u)); }
.final__underline--3 { top: calc(931.5 * var(--u)); width: calc(817 * var(--u)); }

/*
 * Прелоадер: контур логотипа, который заполняется градиентным кругом по мере
 * загрузки, потом экран плавно растворяется в сайт. Показывается только со
 * скриптом. Элементы стоят от центра экрана (в макете — от центра кадра
 * 1920 × 1080).
 */

/* Preloader styles are inlined from tools/preloader.css. */


/*
 * Меню (фрейм 230:4012): страница под ним размыта и затемнена, поверх —
 * копия левой части шапки и панель со свечением на месте бургера. Лежит
 * вне .canvas, поэтому масштаб считается от окна.
 */

.menu,
.popup {
  position: fixed;
  inset: 0;
  z-index: 20;
  opacity: 0;
  visibility: hidden;
}

.menu.is-open,
.popup.is-open {
  opacity: 1;
  visibility: visible;
}

.popup {
  background: var(--c-overlay);
}

/* Затемнение чёрным 58%, размытие 72.7 и зерно чёрным 25% */
.menu {
  background: var(--c-menu-overlay);
  -webkit-backdrop-filter: blur(calc(36.35 * var(--u)));
  backdrop-filter: blur(calc(36.35 * var(--u)));
}

.menu::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../assets/desktop/grain.webp') 0 0 / calc(128 * var(--u)) repeat;
  opacity: 0.25;
  pointer-events: none;
}

/* Кадр макета 1920 по центру окна: в нём шапка и панель на своих местах */
.menu__frame {
  position: relative;
  width: calc(1920 * var(--u));
  margin: 0 auto;
}

.menu__head {
  position: relative;
  height: calc(121 * var(--u));
}

.menu__head > *,
.menu__panel > * {
  position: absolute;
}

.menu__panel {
  position: absolute;
  left: calc(1191 * var(--u));
  top: calc(16 * var(--u));
  width: calc(709 * var(--u));
  height: calc(553 * var(--u));
  overflow: hidden;
  border-radius: calc(30 * var(--u));
  background: var(--c-card);
  isolation: isolate;
}

.menu__panel .glow {
  z-index: -2;
  opacity: 0.8;
  transform: matrix(2.87094, 0, 0, 2.94248, 0, 0);
  translate: calc(-787.61 * var(--u)) calc(-341.4 * var(--u));
}

.menu__panel::before,
.popup__panel::before {
  content: '';
  z-index: -1;
  position: absolute;
  inset: 0;
  background: url('../assets/desktop/grain.webp') 0 0 / calc(128 * var(--u)) repeat;
  opacity: 0.15;
  pointer-events: none;
}

/* Крестик мобильного меню (бургер, превращённый в крестик) — только на телефоне */
.m-menu-close {
  display: none;
}

/* Крестик на месте бургера: две линии 50.4 под 45°, справа подпись «закрыть» */
.menu__close {
  left: calc(609 * var(--u));
  top: calc(13 * var(--u));
  width: calc(78 * var(--u));
  height: calc(60 * var(--u));
  border-radius: calc(12 * var(--u));
}

.menu__close::before,
.menu__close::after {
  content: '';
  position: absolute;
  left: calc(5.5 * var(--u));
  top: calc(28.32 * var(--u));
  width: calc(53.4 * var(--u));
  height: calc(3 * var(--u));
  border-radius: calc(1.5 * var(--u));
  background: var(--c-text);
  rotate: 45deg;
}

.menu__close::after {
  rotate: -45deg;
}

.menu__close-label {
  position: absolute;
  left: calc(66 * var(--u));
  top: calc(48 * var(--u));
  font-family: var(--f-wide);
  font-size: calc(5.14 * var(--u));
  line-height: calc(5 * var(--u));
  letter-spacing: 0.29em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-white);
  opacity: 0.2;
  transform-origin: 0 0;
  rotate: -90deg;
}

.menu__list {
  left: calc(124 * var(--u));
  top: calc(116 * var(--u));
  display: grid;
  justify-items: start;
  gap: calc(50 * var(--u));
}

/* Пункты 40px капсом, подчёркивание — линия белым 25% на 8px ниже строки */
.menu__link {
  position: relative;
  display: block;
  font-family: var(--f-wide);
  font-size: calc(40 * var(--u));
  line-height: calc(42 * var(--u));
  letter-spacing: -0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-white);
}

.menu__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50 * var(--u));
  border-top: calc(1 * var(--u)) solid;
  opacity: 0.25;
  transform-origin: 0 50%;
  pointer-events: none;
}

.popup__close {
  position: absolute;
  top: calc(32 * var(--u));
  right: calc(32 * var(--u));
  width: calc(48 * var(--u));
  height: calc(48 * var(--u));
}

.popup__close::before,
.popup__close::after {
  content: '';
  position: absolute;
  left: calc(8 * var(--u));
  top: calc(22.5 * var(--u));
  width: calc(32 * var(--u));
  height: calc(3 * var(--u));
  border-radius: calc(2 * var(--u));
  background: var(--c-text);
  opacity: 0.4;
  rotate: 45deg;
}

.popup__close::after {
  rotate: -45deg;
}

/* Окно после отправки заявки: карточка со свечением по центру экрана */

.popup {
  display: grid;
  place-items: center;
}

.popup__panel {
  position: relative;
  width: calc(720 * var(--u));
  padding: calc(72 * var(--u)) calc(80 * var(--u)) calc(64 * var(--u));
  overflow: hidden;
  border-radius: calc(30 * var(--u));
  background: var(--c-card);
  isolation: isolate;
}

.popup__panel .glow {
  z-index: -2;
  width: calc(720 * var(--u));
  height: calc(480 * var(--u));
  opacity: 0.8;
  transform: matrix(-1.4, 0.4, 0.9, 2.2, 0, 0);
  translate: calc(700 * var(--u)) calc(-420 * var(--u));
}

.popup__sparkle {
  position: absolute;
  right: calc(88 * var(--u));
  top: calc(72 * var(--u));
  width: calc(41.85 * var(--u));
  height: calc(37.26 * var(--u));
  overflow: visible;
}

.popup__title {
  --hw: 560;
  --hh: 132;
  margin-top: calc(16 * var(--u));
  font-size: calc(40 * var(--u));
  line-height: calc(44 * var(--u));
}

.popup__text {
  margin-top: calc(28 * var(--u));
  font-size: calc(22 * var(--u));
  line-height: calc(29 * var(--u));
  letter-spacing: -0.05em;
}

.popup__button {
  margin-top: calc(40 * var(--u));
  width: calc(451 * var(--u));
  height: calc(58 * var(--u));
}

/* Интерактивные состояния */

.header__cta::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--c-red);
  opacity: 0;
  pointer-events: none;
}

@media (hover: hover) {
  /* Слайдер можно тянуть мышью, открытую карточку — свернуть щелчком */
  .slider {
    cursor: grab;
  }

  .slider.is-dragging {
    cursor: grabbing;
  }

  [data-accordion] > .acc.is-open {
    cursor: pointer;
  }

  .header__cta:hover::after {
    opacity: 0.12;
  }

  .button:hover {
    scale: 1.02;
  }

  .button:hover::after {
    opacity: 1;
  }

  .logo:hover {
    opacity: 0.8;
  }

  /* Первый экран: курсор на карточке спикера (фреймы 229:2939 и 229:3869) */
  .hero__zone--elena:hover ~ .hero__card--elena .hero__face {
    opacity: 1;
  }

  .hero__zone--elena:hover ~ .hero__card--pavel .hero__face,
  .hero__zone--pavel:hover ~ .hero__card--elena .hero__face {
    opacity: 0.2;
  }

  .hero__zone--pavel:hover ~ .hero__front {
    opacity: 1;
  }

  .contact__phone:hover,
  .manager__phone:hover {
    color: var(--c-white);
  }

  .menu__link:hover {
    translate: calc(8 * var(--u)) 0;
  }

  .menu__link:hover::after {
    transform: scaleX(0.35);
  }

  .messenger__link:hover img,
  .manager__link:hover img,
  .burger:hover img {
    scale: 1.12;
  }

  /* Курсор над плашкой мессенджера: иконка крупнее, призыв ярче */
  .messenger:has(.messenger__link:hover) .messenger__label,
  .manager__links:has(.manager__link:hover) .manager__label {
    opacity: 0.8;
  }

  .menu__close:hover::before,
  .menu__close:hover::after {
    background: var(--c-white);
  }

  .popup__close:hover::before,
  .popup__close:hover::after {
    opacity: 1;
  }

  .arrows__button:not(:disabled):hover::after {
    opacity: 1;
  }

  .acc__button:hover ~ .acc__chevron,
  .acc:has(.acc__button:hover) .acc__chevron {
    translate: 0 calc(3 * var(--u));
  }

  .program__item:not(.is-open):has(.acc__button:hover) .acc__title {
    color: var(--c-white);
  }

  .faq__item:not(.is-open):has(.acc__button:hover) .faq__question {
    color: var(--c-question-hover);
  }

  .footer__link:hover {
    opacity: 1;
  }

  .consent__link:hover {
    color: var(--c-link);
  }

  .consent:hover .consent__box:not(:checked, [aria-invalid='true']) {
    background-image: var(--i-check-hover);
  }

  .consent:hover .consent__box:checked {
    background-image: var(--i-check-on-hover);
  }

  .consent__link:hover::after,
  .footer__link:hover::after,
  .channel:hover .channel__name::after,
  .faq__item:not(.is-open):has(.acc__button:hover) .faq__question::after {
    transform: scaleX(0.35);
  }

  .channel:hover .channel__name,
  .faq__link:hover {
    color: var(--c-white);
  }
}

.button:active {
  scale: 0.98;
}

.button:disabled {
  cursor: progress;
  opacity: 0.7;
}

/* Анимации: только если пользователь не просил уменьшить движение */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  /* Переходы состояний: наведение, активная карточка, открытый пункт */

  .logo,
  .hero__face,
  .hero__front,
  .button::after,
  .header__cta::after,
  .popup__close::before,
  .popup__close::after,
  .change::before,
  .change__bg,
  .change__text,
  .changes__tint,
  .acc__bg::before,
  .acc__bg .glow,
  .advantage__card::before,
  .advantage__surface,
  .arrows__button::after {
    transition: opacity 0.5s var(--ease-out);
  }

  /*
   * Ссылки при наведении меняют цвет плавно — исключение из правила
   * «анимируются только transform и opacity», по просьбе заказчика.
   * Подчёркивание уезжает влево (transform).
   */
  .consent__link,
  .footer__link,
  .channel__name,
  .faq__link,
  .faq__question,
  .contact__phone,
  .manager__phone,
  .module__title,
  .program__item .acc__title {
    transition:
      color 0.45s var(--ease-soft),
      opacity 0.45s var(--ease-soft);
  }

  .consent__link::after,
  .footer__link::after,
  .channel__name::after,
  .faq__question::after {
    transition:
      transform 0.6s var(--ease-out),
      opacity 0.3s var(--ease-out);
  }

  .button,
  .menu__link,
  .messenger__link img,
  .manager__link img,
  .burger img,
  .acc__chevron {
    transition:
      scale 0.5s var(--ease-out),
      translate 0.5s var(--ease-out);
  }

  .messenger__label,
  .manager__label {
    transition: opacity 0.3s var(--ease-out);
  }

  .menu__link {
    transition: translate 0.5s var(--ease-out);
  }

  .menu__link::after {
    transition: transform 0.6s var(--ease-out);
  }

  .change__logos {
    transition:
      opacity 0.5s var(--ease-out),
      translate 0.7s var(--ease-out);
  }

  .changes:not([data-active='2']) .change__logos {
    translate: 0 calc(16 * var(--u));
  }

  .progress__thumb {
    transition: transform 0.4s var(--ease-out);
  }

  [data-focus-text] {
    transition: opacity 0.25s linear;
  }

  /*
   * Блик на красных кнопках: светлая полоса проходит слева направо за
   * первую пятую часть цикла, остальное время кнопка спокойна.
   */
  .button::before {
    animation: button-shine 5s var(--ease-soft) infinite;
    animation-delay: var(--shine-delay, 2s);
  }

  .results__button { --shine-delay: 3.4s; }
  .audience__button { --shine-delay: 4.1s; }
  .free__form .submit__button { --shine-delay: 2.7s; }
  .final__form .submit__button { --shine-delay: 5s; }

  /* Появление при прокрутке */

  .js [data-reveal],
  .js [data-reveal='stagger'] > * {
    transition:
      opacity 0.9s var(--ease-out),
      translate 1.2s var(--ease-out),
      scale 1.2s var(--ease-out),
      rotate 1.2s var(--ease-out);
    transition-delay: var(--delay, 0s);
  }

  .js [data-reveal='stagger'],
  .js [data-reveal='type'] {
    transition: none;
  }

  .js [data-reveal='stagger'] > * {
    transition-delay: calc(var(--delay, 0s) + var(--i, 0) * 0.08s);
  }

  .js [data-reveal='photo'] {
    transition-duration: 1.2s, 1.6s;
  }

  .js [data-reveal='draw'] {
    transform-origin: 0 50%;
    transition-duration: 0.6s, 1.4s, 1.4s;
  }

  .js [data-reveal]:not(.is-in, [data-reveal='stagger'], [data-reveal='type'], [data-reveal='draw']),
  .js [data-reveal='stagger']:not(.is-in) > * {
    opacity: 0;
  }

  .js [data-reveal='up']:not(.is-in) { translate: 0 calc(32 * var(--u)); }
  .js [data-reveal='down']:not(.is-in) { translate: 0 calc(-16 * var(--u)); }
  .js [data-reveal='right']:not(.is-in) { translate: calc(-24 * var(--u)) 0; }
  .js [data-reveal='rise']:not(.is-in) { translate: 0 calc(40 * var(--u)); scale: 0.98; }
  .js [data-reveal='photo']:not(.is-in) { translate: 0 calc(90 * var(--u)); }
  .js [data-reveal='draw']:not(.is-in) { scale: 0 1; }
  .js [data-reveal='stagger']:not(.is-in) > * { translate: 0 calc(24 * var(--u)); }
  .js [data-reveal='stagger'][data-stagger='pop']:not(.is-in) > * { translate: none; scale: 0.85; }

  /*
   * Заголовки по словам: до появления все слова едва видны, потом по
   * очереди доходят до своей прозрачности из макета — 100% или 30%.
   */
  .js [data-words].is-split .w {
    transition: opacity 1s var(--ease-out);
    transition-delay: calc(var(--delay, 0s) + var(--i, 0) * 0.05s);
  }

  .js [data-words].is-split:not(.is-in) .w {
    opacity: 0.06;
  }

  /*
   * Печатная машинка: буквы появляются по одной (js/main.js), фраза гаснет
   * целиком. Прозрачность — у строк текста, пунктира и звёздочки, а не у
   * всей машинки: переход прозрачности блока с текстом background-clip: text
   * Safari не рисует, и фраза пропадала рывком.
   */

  .typer__text {
    transition: opacity 0.7s var(--ease-in-out);
  }

  .typer.is-fading .typer__text,
  .typer.is-fading .typer__underline,
  .typer.is-fading .typer__sparkle {
    opacity: 0;
  }

  .typer__underline {
    transition:
      scale 1.1s var(--ease-out),
      opacity 0.7s var(--ease-in-out);
  }

  .typer.is-typing .typer__line:not(.is-done) .typer__underline {
    scale: 0 1;
  }

  .typer__sparkle {
    transition:
      opacity 0.6s var(--ease-out),
      scale 0.9s var(--ease-out),
      rotate 0.9s var(--ease-out);
  }

  .typer.is-typing:not(.is-typed) .typer__sparkle {
    opacity: 0;
    scale: 0.3;
    rotate: -90deg;
  }

  /* Preloader motion is inlined with its critical styles. */

  /* Порядок появления шапки и первого экрана */

  .logo { --delay: 0.1s; }
  .header__divider { --delay: 0.2s; }
  .header__about { --delay: 0.2s; }
  .messenger { --delay: 0.28s; }
  .header__cta { --delay: 0.36s; }
  .contact { --delay: 0.44s; }
  .burger { --delay: 0.52s; }

  .hero__card--1 { --delay: 0s; }
  .hero__card--elena { --delay: 0.1s; }
  .hero__card--2 { --delay: 0.16s; }
  .hero__card--pavel { --delay: 0.22s; }
  .hero__photo--elena { --delay: 0.3s; }
  .hero__photo--pavel { --delay: 0.45s; }
  .hero__eyebrow { --delay: 0.4s; }
  .hero__dots { --delay: 0.45s; }
  .hero__lead { --delay: 0.75s; }
  .hero__facts { --delay: 0.95s; }
  .hero__ornament { --delay: 0.6s; }
  .hero__summary { --delay: 0.65s; }
  .hero__cta { --delay: 0.8s; }
  .hero__person--elena { --delay: 1s; }
  .hero__person--pavel { --delay: 1.1s; }

  /* Остальные блоки: задержки внутри блока */

  .modules__card--2 { --delay: 0.08s; }
  .modules__card--3 { --delay: 0.16s; }
  .modules__list { --delay: 0.2s; }
  .free__underline--1, .final__underline--1 { --delay: 0.5s; }
  .free__underline--2, .final__underline--2 { --delay: 0.65s; }
  .free__underline--3, .final__underline--3 { --delay: 0.8s; }
  .free__step--2 { --delay: 0.1s; }
  .team__card--2 { --delay: 0.1s; }
  .team__card--3 { --delay: 0.08s; }
  .team__card--4 { --delay: 0.18s; }
  .team__photo--elena { --delay: 0.2s; }
  .team__photo--pavel { --delay: 0.3s; }
  .speaker--pavel,
  .speaker__promise--pavel { --delay: 0.1s; }

  /* Меню и окно: затемнение проявляется, панель выезжает */

  .menu,
  .popup {
    transition:
      opacity 0.4s var(--ease-out),
      visibility 0s linear 0.4s;
  }

  .menu.is-open,
  .popup.is-open {
    transition: opacity 0.4s var(--ease-out);
  }

  .menu__panel {
    opacity: 0;
    translate: calc(24 * var(--u)) calc(-16 * var(--u));
    transition:
      opacity 0.5s var(--ease-out),
      translate 0.7s var(--ease-out);
  }

  .menu.is-open .menu__panel {
    opacity: 1;
    translate: 0 0;
  }

  .menu__list > li {
    opacity: 0;
    translate: calc(40 * var(--u)) 0;
    transition:
      opacity 0.5s var(--ease-out),
      translate 0.7s var(--ease-out);
  }

  .menu.is-open .menu__list > li {
    opacity: 1;
    translate: 0 0;
    transition-delay: calc(0.15s + var(--i, 0) * 0.06s);
  }

  .popup__panel {
    translate: 0 calc(40 * var(--u));
    scale: 0.96;
    transition:
      translate 0.7s var(--ease-out),
      scale 0.7s var(--ease-out);
  }

  .popup.is-open .popup__panel {
    translate: 0 0;
    scale: 1;
  }

  .popup__sparkle {
    animation: sparkle-spin 6s var(--ease-in-out) infinite;
  }

  /*
   * Индикатор прокрутки: после появления по кольцам дважды пробегает волна
   * (меньше 5 секунд, дальше он стоит спокойно).
   */
  .hint.is-in .hint__ring {
    animation: hint-wave 2s var(--ease-in-out) 2;
  }

  .hint__ring--1 { animation-delay: 0s; }
  .hint__ring--2 { animation-delay: 0.12s; }
  .hint__ring--3 { animation-delay: 0.25s; }
  .hint__ring--4 { animation-delay: 0.5s; }
  .hint__ring--5 { animation-delay: 0.62s; }
  .hint__ring--6 { animation-delay: 0.75s; }

  .hint.is-in .hint__mouse {
    animation: hint-mouse 2s var(--ease-in-out) 2;
  }

  /*
   * Звёздочки на схеме «Что меняется» мерцают по очереди. Звёздочка
   * нарисована в нуле, на место её ставит обёртка .changes__spot: у <use>
   * с атрибутами x и y Chrome считает fill-box без них, и звёздочка
   * сжималась к левому верхнему углу схемы — улетала и возвращалась.
   */
  .changes__spark {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: spark-twinkle 4.8s var(--ease-in-out) infinite;
  }

  .changes__spot:nth-child(3n + 1 of .changes__spot) .changes__spark { animation-delay: -3.2s; }
  .changes__spot:nth-child(3n of .changes__spot) .changes__spark { animation-delay: -1.6s; }

  /*
   * Параллакс световых пятен: пятно отстаёт от прокрутки — пока оно
   * проходит через окно, сдвигается с −240 до +240px (около 17% скорости
   * прокрутки). Посередине окна оно стоит, как в макете. Без поддержки
   * анимаций по прокрутке пятна просто стоят.
   */
  @supports (animation-timeline: view()) {
    .spot {
      animation: spot-drift linear both;
      animation-timeline: view();
    }
  }

  /* Бесконечные анимации стоят, пока блок не на экране (js/main.js) */
  [data-live]:not(.is-live) .changes__spark,
  [data-live]:not(.is-live) .button::before {
    animation-play-state: paused;
  }
}