/*
 * Мобильная версия по странице Figma «Сайт» (фрейм 207:565 «Мобильная
 * версия», 385 × 16840). Подключена для окон уже 1024px (media у <link>),
 * на десктопе не применяется и не задерживает показ страницы.
 *
 * Размеры — в пикселях макета: calc(N * var(--u)), где --u = ширина окна /
 * 385, но не больше 560 / 385: на телефонах макет растягивается во всю
 * ширину, на планшетах стоит по центру шириной 560px. Элементы стоят по
 * координатам макета относительно левого верхнего угла своего блока.
 *
 * Свечения карточек — те же картинки, что на десктопе, кадрированные
 * матрицей из макета (см. docs/figma.md).
 */

:root {
  /* Вне .m-canvas (фон, меню, окна, прелоадер) масштаб считается от окна */
  --u: calc(min(100vw, 560px) / 385);
  /* Плитка шума фона: 400px в масштабе 0.3 */
  --noise-tile: 120;
}

/* Десктопная разметка на узких экранах не показывается */
.page,
.skip-link:not(.m-skip-link) {
  display: none;
}

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

.m-canvas {
  --u: calc(min(100cqw, 560px) / 385);
  --bleed: calc((100cqw - 385 * var(--u)) / 2);
  position: relative;
  width: calc(385 * var(--u));
  margin: 0 auto;
  /* Слайдер уходит до краёв окна, остальное — по краю макета */
  clip-path: inset(0 calc(-1 * var(--bleed)));
  isolation: isolate;
}

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

/* Блоки идут друг за другом, внутри элементы стоят по координатам макета */
.m-header,
.m-hero,
.m-modules,
.m-market,
.m-chain,
.m-changes,
.m-note,
.m-free,
.m-results,
.m-program,
.m-team,
.m-audience,
.m-faq,
.m-final,
.m-footer {
  position: relative;
}

.m-header > *,
.m-hero > *,
.m-modules > *,
.m-modules__list > *,
.m-module > *,
.m-market > *,
.m-chain > *,
.m-changes > *,
.m-changes__cards > *,
.m-change > *,
.m-note > *,
.m-free > *,
.m-step > *,
.m-results > *,
.m-result > *,
.m-program > :not(.accordion),
.m-team > *,
.m-speaker > *,
.m-audience > *,
.m-audience__cards > *,
.m-role > *,
.m-audience__cta > *,
.m-faq > :not(.accordion),
.m-final > *,
.m-footer > *,
.m-person > *,
.m-action > *,
.m-messenger > *,
.m-form > *,
.m-phone > *,
.m-section-head > *,
.m-cta > *,
.m-button > *,
.m-badge > * {
  position: absolute;
}

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

.eyebrow {
  font-family: var(--f-wide);
  font-size: calc(6 * var(--u));
  line-height: calc(11 * var(--u));
  letter-spacing: 0.66em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-text-lit);
  opacity: 0.11;
}

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

/* Три точки перед заголовками: dots.svg вдвое меньше десктопного */
.m-dots {
  width: calc(16.72 * var(--u));
  height: calc(2.87 * var(--u));
}

.m-rule {
  height: 0;
  border-top: calc(1 * var(--u)) solid var(--c-white);
  opacity: 0.08;
}

/*
 * Значок «пенал»: в макете контур 6.47 × 5.4 с линией 0.5 — это картинка
 * 13.93 × 11.8 (линия 1) в масштабе 0.5. Рамка картинки шире контура на
 * 0.25 с каждой стороны, поэтому стоит на 0.25 левее и выше слоя.
 */
.m-head-icon,
.m-module__icon,
.m-acc__icon,
.m-speaker__icon {
  width: calc(6.97 * var(--u));
  height: calc(5.9 * var(--u));
}

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

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

.m-section-head .m-rule {
  top: calc(5.11 * var(--u));
  left: calc(var(--rule-from) * var(--u));
  width: calc((298 - var(--rule-from)) * var(--u));
}

.m-section-head .m-head-icon {
  left: calc(313.28 * var(--u));
  top: calc(2.25 * 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,
.m-step::after,
.m-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;
}

.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;
  opacity: 0.8;
  transform-origin: 0 0;
  pointer-events: none;
}

/* Текст с градиентом — как на десктопе: у разрезанного на слова свой фон у слова */
[data-words].is-split .w {
  color: transparent;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
}

[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));
}

[data-words].is-split .w--dim {
  opacity: var(--dim, 0.3);
}

.w {
  padding-block: calc(10 * var(--u));
}

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

/*
 * Заголовки 40px (Helvetica Neue Cyr Medium): градиент #bababa → #545454 на
 * весь блок, угол зависит от размера блока (--hw × --hh), поэтому у каждого
 * заголовка свой --angle.
 */
.title {
  width: calc(var(--hw) * var(--u));
  white-space: nowrap;
  font-weight: 500;
  font-size: calc(40 * var(--u));
  line-height: calc(37 * 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;
}

/* Номера модулей 10px с зелёно-фиолетовым градиентом */
.number {
  display: block;
  font-family: var(--f-wide);
  font-size: calc(10 * var(--u));
  line-height: calc(11 * 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 белым снаружи, без заливки. В
 * макете обводка 3–5%, но Chrome рисует её посередине контура, и она
 * выходит вдвое бледнее, — поэтому 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-8);
}

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

.m-badge {
  width: calc(140 * var(--u));
  height: calc(11 * var(--u));
}

.m-badge .label {
  left: calc(27 * var(--u));
  top: calc(1 * var(--u));
}

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

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

/* Пунктир под строками заголовков: SVG-линия, блок высотой 2, линия посередине */
.m-underline {
  position: absolute;
  height: calc(2 * var(--u));
  overflow: visible;
  opacity: 0.4;
  transform-origin: 0 50%;
  pointer-events: none;
  --dash: 0.47;
}

.m-underline line {
  stroke: var(--c-white);
  stroke-width: calc(var(--dash) * var(--u));
  stroke-dasharray: calc(var(--dash) * var(--u)) calc(var(--dash) * 2.98 * var(--u));
}

/*
 * Красная кнопка 255 × 39.1, скругление 28: иконка чата белым 20%, подпись
 * 9.34px вразрядку. Блик пробегает раз в несколько секунд.
 */
.button {
  position: relative;
  display: block;
  overflow: hidden;
  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;
}

.button::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c-white-8);
  opacity: 0;
  pointer-events: none;
}

.m-button {
  width: calc(255 * var(--u));
  height: calc(39.1 * var(--u));
  border-radius: calc(28.01 * var(--u));
}

.m-button__icon {
  left: calc(18.55 * var(--u));
  top: calc(15.58 * var(--u));
  width: calc(8.4 * var(--u));
  height: calc(7.98 * var(--u));
}

.m-button__label {
  left: calc(40.26 * var(--u));
  top: calc(12.25 * var(--u));
  font-family: var(--f-wide);
  font-size: calc(9.34 * var(--u));
  line-height: calc(14 * var(--u));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Кнопка с подписью под ней: общая рамка белым 8% */
.m-action {
  width: calc(255 * var(--u));
  height: calc(80 * var(--u));
}

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

.m-action__button {
  left: 0;
  top: 0;
}

.m-action__dash,
.m-action__note {
  top: calc(50 * var(--u));
  font-size: calc(9 * var(--u));
  line-height: calc(12 * var(--u));
  letter-spacing: -0.05em;
  white-space: nowrap;
}

.m-action__dash {
  left: calc(19 * var(--u));
  opacity: 0.2;
}

.m-action__note {
  left: calc(41 * var(--u));
  top: calc(51 * var(--u));
}

/* Стрелки слайдера: десктопные 159 × 58 в масштабе 0.8 */
.arrows {
  width: calc(127.2 * var(--u));
  height: calc(46.4 * var(--u));
  display: flex;
  border-radius: calc(33.46 * var(--u));
}

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

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

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

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

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

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

.arrows__button--next::before {
  content: '';
  position: absolute;
  left: calc(-0.4 * var(--u));
  top: calc(4 * var(--u));
  width: 0;
  height: calc(38.4 * var(--u));
  border-left: calc(0.8 * var(--u)) solid var(--c-white);
  opacity: 0.05;
}

.arrows__button::after {
  content: '';
  position: absolute;
  top: calc(16.8 * var(--u));
  width: calc(14.4 * var(--u));
  height: calc(12.8 * var(--u));
  background: var(--g-arrow) 0 0 / 100% 100% no-repeat;
  opacity: 0.44;
}

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

.arrows__button--next::after {
  left: calc(23.6 * 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(80 * var(--u));
  background: var(--c-progress);
}

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

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

.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;
}

/* Логотип: знак и надпись, десктопный в масштабе 0.8 */
.m-logo {
  left: calc(21 * var(--u));
  top: calc(17 * var(--u));
  width: calc(118.06 * var(--u));
  height: calc(33.78 * var(--u));
}

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

.m-logo__text {
  position: absolute;
  left: calc(43.92 * var(--u));
  top: calc(1.22 * var(--u));
  width: calc(74.14 * var(--u));
  height: calc(32.36 * var(--u));
}

/* Кнопка «обсудить»: красная обводка 1.27 внутрь */
.m-cta {
  left: calc(168 * var(--u));
  top: calc(19 * var(--u));
  width: calc(111 * var(--u));
  height: calc(31 * var(--u));
  border-radius: calc(15.44 * var(--u));
  color: var(--c-red);
}

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

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

.m-cta__icon {
  left: calc(20 * var(--u));
  top: calc(12.41 * var(--u));
  width: calc(6.84 * var(--u));
  height: calc(6.5 * var(--u));
}

.m-cta__label {
  left: calc(36.65 * var(--u));
  top: calc(13.03 * var(--u));
  width: calc(56 * var(--u));
  font-family: var(--f-wide);
  font-size: calc(7 * var(--u));
  line-height: calc(7 * var(--u));
  letter-spacing: 0.24em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.m-burger {
  left: calc(306.5 * var(--u));
  top: calc(20.5 * var(--u));
  width: calc(53.4 * var(--u));
  height: calc(28.6 * var(--u));
}

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

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

/* Шапка ------------------------------------------------------------------- */

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

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

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

.m-hero__card--1 {
  left: calc(15 * var(--u));
  top: 0;
  width: calc(355 * var(--u));
  height: calc(538 * var(--u));
  opacity: 0.5;
}

.m-hero__card--1 .glow { transform: matrix(3.0895, 1.80081, -0.706, 1.21133, 0, 0); translate: calc(-230.02 * var(--u)) calc(-459.48 * var(--u)); }

.m-hero__eyebrow {
  left: calc(64 * var(--u));
  top: calc(38 * var(--u));
}

.m-hero__dots {
  left: calc(65.36 * var(--u));
  top: calc(86 * var(--u));
}

/*
 * Заголовок печатается по буквам (js/main.js): три строки, под каждой
 * пунктир, после последней — звёздочка.
 */
.m-hero__title {
  left: calc(62 * var(--u));
  top: calc(104.56 * var(--u));
  width: calc(275 * var(--u));
  height: calc(114 * var(--u));
  font-family: var(--f-wide);
  font-size: calc(33 * var(--u));
  line-height: calc(38 * var(--u));
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.m-hero__title .typer {
  --hw: 275;
  --hh: 114;
  --fill: var(--g-brand);
  display: block;
}

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

.typer__line:nth-child(2) {
  background-position: 0 calc(-38 * var(--u));
}

.typer__line:nth-child(3) {
  background-position: 0 calc(-76 * var(--u));
}

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

.typer__text {
  color: transparent;
  background: var(--g-brand) no-repeat;
  background-size: calc(275 * var(--u)) calc(114 * 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(2.83 * var(--u));
  top: calc(37 * var(--u));
  width: calc(100% - 5.18 * var(--u));
}

.typer__line:nth-child(2) .typer__underline {
  top: calc(37.6 * var(--u));
}

.typer__line:nth-child(3) .typer__underline {
  top: calc(35.6 * var(--u));
}

.typer__sparkle {
  position: absolute;
  left: calc(100% + 0.65 * var(--u));
  top: calc(3.44 * var(--u));
  width: calc(20.9 * var(--u));
  height: calc(18.61 * var(--u));
  overflow: visible;
}

.m-hero__lead {
  left: calc(65 * var(--u));
  top: calc(234 * var(--u));
  font-size: calc(25 * var(--u));
  line-height: calc(26 * var(--u));
  letter-spacing: -0.05em;
  white-space: nowrap;
}

.m-hero__lead-dim {
  opacity: 0.5;
}

/* Плашки фактов: стекло, обводка белым 4%, текст белым 55% */
.m-hero__facts > * {
  position: absolute;
}

.fact {
  height: calc(42.8 * var(--u));
  border-radius: calc(7.2 * var(--u));
  color: var(--c-white-55);
  font-family: var(--f-wide);
  font-size: calc(6.48 * var(--u));
  line-height: calc(7 * var(--u));
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(calc(3.28 * var(--u)));
  backdrop-filter: blur(calc(3.28 * var(--u)));
}

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

.m-hero__fact--1 { left: calc(65 * var(--u)); top: calc(395 * var(--u)); width: calc(76.2 * var(--u)); }
.m-hero__fact--2 { left: calc(148.2 * var(--u)); top: calc(395 * var(--u)); width: calc(158.2 * var(--u)); }
.m-hero__fact--3 { left: calc(65 * var(--u)); top: calc(444.8 * var(--u)); width: calc(123.2 * var(--u)); }
.m-hero__fact--4 { left: calc(195.2 * var(--u)); top: calc(444.8 * var(--u)); width: calc(79.2 * var(--u)); }

/*
 * Низ карточек задан отступом от низа блока, а не высотой: так края
 * считаются одинаково для всех. Рамки фото на 1px ниже карточек: на iPhone
 * скруглённые края сглаживаются, и при общем крае цвет карточки
 * просвечивал из-под фото тонкой каёмкой.
 */
.m-hero__card--elena,
.m-hero__card--pavel {
  top: calc(543 * var(--u));
  bottom: calc(312 * var(--u));
}

.m-hero__card--elena {
  left: calc(15 * var(--u));
  width: calc(176 * var(--u));
}

.m-hero__card--pavel {
  left: calc(196 * var(--u));
  width: calc(174 * var(--u));
}

.m-hero__card--elena .glow { transform: matrix(4.54133, 0, 0, 1.68011, 0, 0); translate: calc(-508.5 * var(--u)) calc(-93.87 * var(--u)); }
.m-hero__card--pavel .glow { transform: matrix(4.54133, 0, 0, 1.68011, 0, 0); translate: calc(-615.95 * var(--u)) calc(-127.86 * var(--u)); }

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

/*
 * Фото перекрывают свою рамку на 1px макета: в картинках сохранён запас из
 * исходника (tools/mobile-assets.py), кадр стоит как в макете, а на экране
 * 3x под краем фото не видна подложка.
 */
.m-hero__photo img,
.m-speaker__photo img,
.m-free__photo img {
  position: absolute;
  max-width: none;
}

.m-hero__photo--pavel {
  left: calc(196 * var(--u));
  top: calc(556 * var(--u));
  bottom: calc(311 * var(--u));
  width: calc(174 * var(--u));
  border-radius: calc(30 * var(--u)) 0 calc(30 * var(--u)) calc(30 * var(--u));
}

.m-hero__photo--pavel img {
  left: calc(-2.26 * var(--u));
  top: calc(-2.21 * var(--u));
  width: calc(178.48 * var(--u));
  height: calc(367.47 * var(--u));
  scale: -1 1;
}

.m-hero__photo--elena {
  left: calc(15 * var(--u));
  top: calc(582 * var(--u));
  bottom: calc(311 * var(--u));
  width: calc(259 * var(--u));
  border-radius: 0 calc(30 * var(--u)) calc(30 * var(--u)) calc(30 * var(--u));
}

.m-hero__photo--elena img {
  left: calc(-2.13 * var(--u));
  top: calc(2.94 * var(--u));
  width: calc(221.07 * var(--u));
  height: calc(336.2 * var(--u));
}

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

.m-hero__person--elena {
  left: calc(56 * var(--u));
  width: calc(109 * var(--u));
}

.m-hero__person--pavel {
  left: calc(230 * var(--u));
  width: calc(111 * var(--u));
}

.m-person__name {
  left: calc(9.15 * var(--u));
  top: calc(1 * var(--u));
  font-family: var(--f-wide);
  font-size: calc(14.65 * var(--u));
  line-height: calc(18 * var(--u));
  letter-spacing: -0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.m-person__about {
  left: calc(9.15 * var(--u));
  top: calc(42.72 * var(--u));
  font-size: calc(7.32 * var(--u));
  line-height: calc(10 * var(--u));
  white-space: nowrap;
  color: var(--c-text-lit);
}

.m-person__chip {
  left: 0;
  top: calc(78.73 * var(--u));
  height: calc(21.97 * var(--u));
  padding: 0 calc(10.37 * var(--u));
  border-radius: calc(21.97 * var(--u));
  color: var(--c-text-lit);
  font-family: var(--f-wide);
  font-size: calc(5.49 * var(--u));
  line-height: calc(6 * var(--u));
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(calc(2.78 * var(--u)));
  backdrop-filter: blur(calc(2.78 * var(--u)));
}

.m-hero__card--2 {
  left: calc(15 * var(--u));
  top: calc(924.5 * var(--u));
  width: calc(355 * var(--u));
  height: calc(302 * var(--u));
}

.m-hero__card--2 .glow { transform: matrix(2.92611, -0.29966, -0.20952, -2.04338, 0, 0); translate: calc(-391.86 * var(--u)) calc(485.12 * var(--u)); }

.m-hero__ornament {
  left: calc(65.36 * var(--u));
  top: calc(969.5 * var(--u));
}

.m-hero__summary {
  left: calc(65 * var(--u));
  top: calc(993.5 * var(--u));
  font-size: calc(12 * var(--u));
  line-height: calc(16 * var(--u));
  white-space: nowrap;
}

.m-hero__sparkle {
  left: calc(264 * var(--u));
  top: calc(1009.5 * var(--u));
  width: calc(10.45 * var(--u));
  height: calc(9.3 * var(--u));
  overflow: visible;
}

.m-hero__action {
  left: calc(65 * var(--u));
  top: calc(1087.5 * var(--u));
}

/* Модули: три карточки, в них шесть модулей ------------------------------- */

.m-modules {
  height: calc(559 * var(--u));
}

.m-modules__card {
  left: calc(15 * var(--u));
  width: calc(355 * var(--u));
}

.m-modules__card--1 {
  top: 0;
  height: calc(111 * var(--u));
  opacity: 0.3;
}

.m-modules__card--2 {
  top: calc(116 * var(--u));
  height: calc(174 * var(--u));
  opacity: 0.5;
}

.m-modules__card--3 {
  top: calc(295 * var(--u));
  height: calc(264 * var(--u));
}

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

.m-modules__card--1 .glow { opacity: 1; transform: matrix(0.58067, -0.98136, -3.04091, -3.37136, 0, 0); translate: calc(293.47 * var(--u)) calc(330.61 * var(--u)); }
.m-modules__card--3 .glow { opacity: 0.3; transform: matrix(2.49004, 0, 0, 2.67666, 0, 0); translate: calc(-264.48 * var(--u)) calc(-27.13 * var(--u)); }
.m-modules--final .m-modules__card--3 .glow { transform: matrix(2.49004, 0, 0, 2.67666, 0, 0); translate: calc(-158.58 * var(--u)) calc(-116.03 * var(--u)); }

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

.m-modules__divider--1 {
  top: calc(199.5 * var(--u));
  border-color: var(--c-divider);
  opacity: 0.22;
}

.m-modules__divider--2 { top: calc(381.5 * var(--u)); }
.m-modules__divider--3 { top: calc(470.5 * var(--u)); }

.m-modules__list {
  inset: 0;
}

.m-module {
  left: 0;
  width: calc(385 * var(--u));
  height: calc(80 * var(--u));
}

.m-module--1 { top: calc(23 * var(--u)); }
.m-module--2 { top: calc(139 * var(--u)); }
.m-module--3 { top: calc(222 * var(--u)); }
.m-module--4 { top: calc(318 * var(--u)); }
.m-module--5 { top: calc(404 * var(--u)); }
.m-module--6 { top: calc(490 * var(--u)); }

.m-module__number {
  left: calc(64 * var(--u));
  top: calc(1 * var(--u));
}

.m-module__label {
  left: calc(86 * var(--u));
  top: calc(1 * var(--u));
}

.m-module__title {
  left: calc(64 * var(--u));
  top: calc(23 * var(--u));
  font-size: calc(12 * var(--u));
  line-height: calc(16 * var(--u));
  white-space: nowrap;
}

.m-module--1 .m-module__title {
  left: calc(65 * var(--u));
}

/* «Маркетинг   |   Конверсия»: по три пробела вокруг черты */
.m-sep {
  margin: 0 0.833em;
}

.m-module__icon {
  left: calc(312.75 * var(--u));
  top: calc(2.25 * var(--u));
}

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

.m-market {
  height: calc(393 * var(--u));
}

.m-market__title {
  left: calc(62 * var(--u));
  top: calc(56 * var(--u));
  --hw: 265;
  --hh: 74;
  --angle: 83.72deg;
}

.m-market__text {
  left: calc(64 * var(--u));
  top: calc(155 * var(--u));
  font-size: calc(20 * var(--u));
  line-height: calc(24 * var(--u));
  letter-spacing: -0.05em;
  white-space: nowrap;
  opacity: 0.3;
}

.m-market__logos {
  left: calc(65.16 * var(--u));
  top: calc(312 * var(--u));
  width: calc(255 * var(--u));
  height: calc(30 * var(--u));
}

/* Цепочка ----------------------------------------------------------------- */

.m-chain {
  height: calc(447 * var(--u));
}

.m-chain__rule {
  left: calc(65 * var(--u));
  top: calc(2.5 * var(--u));
  width: calc(233 * var(--u));
}

.m-chain__icon {
  left: calc(313.28 * var(--u));
  top: calc(0.14 * var(--u));
}

.m-chain__dots {
  left: calc(65.36 * var(--u));
  top: calc(54 * var(--u));
}

.m-chain__title {
  left: calc(62 * var(--u));
  top: calc(77.87 * var(--u));
  --hw: 277;
  --hh: 182;
  --dim: 0.4;
  font-size: calc(22 * var(--u));
  line-height: calc(26 * var(--u));
}

.m-chain__text {
  left: calc(64 * var(--u));
  top: calc(284.87 * var(--u));
  font-size: calc(20 * var(--u));
  line-height: calc(24 * var(--u));
  letter-spacing: -0.05em;
  white-space: nowrap;
}

/* Что меняется: четыре карточки одна под другой --------------------------- */

.m-changes {
  height: calc(1485 * var(--u));
}

.m-changes__cards {
  inset: 0;
}

.m-change {
  left: calc(15 * var(--u));
  width: calc(355 * var(--u));
  border-radius: calc(30 * var(--u));
}

/* Карточки без заливки — рамка белым 8% */
.m-change:not(.m-change--2)::before {
  content: '';
  position: absolute;
  inset: 0;
  border: calc(1 * var(--u)) solid var(--c-white-8);
  border-radius: inherit;
  pointer-events: none;
}

.m-change--1 { top: 0; height: calc(319 * var(--u)); }
.m-change--2 { top: calc(324 * var(--u)); height: calc(445 * var(--u)); }
.m-change--3 { top: calc(774 * var(--u)); height: calc(316 * var(--u)); }
.m-change--4 { top: calc(1095 * var(--u)); height: calc(390 * var(--u)); }

/* Вторая карточка залита: #0d0d0d со свечением, вся карточка 55% */
.m-change__bg {
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background: var(--c-card-channels);
  opacity: 0.55;
}

.m-change__bg .glow {
  background-image: url('../assets/desktop/glow-violet.webp');
  transform: matrix(2.53485, 0, 0, 1.61655, 0, 0);
  translate: calc(-177.46 * var(--u)) calc(-184.73 * var(--u));
}

.m-change__number {
  left: calc(48 * var(--u));
  top: calc(43 * var(--u));
}

.m-change__title {
  left: calc(50 * var(--u));
  top: calc(111 * var(--u));
  width: calc(161 * var(--u));
  height: calc(69 * 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;
  white-space: nowrap;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.m-change__text {
  left: calc(50 * var(--u));
  top: calc(196 * var(--u));
  font-size: calc(14 * var(--u));
  line-height: calc(18 * var(--u));
  letter-spacing: -0.05em;
  white-space: nowrap;
  opacity: 0.33;
}

/* Цвета карточек: зелёный — аудитория, фирменный — каналы, синий, красный */
.m-change--1 .m-change__title { background-image: linear-gradient(90deg, var(--c-green-from), var(--c-green-to)); }
.m-change--2 .m-change__title { background-image: var(--g-channels); background-size: 100% 100%; background-repeat: no-repeat; }
.m-change--3 .m-change__title { width: calc(189 * var(--u)); background-image: linear-gradient(82.91deg, var(--c-blue-from) 16.2%, var(--c-blue-to) 105.43%); }
.m-change--4 .m-change__title { background-image: linear-gradient(86.97deg, var(--c-red-from) 1.12%, var(--c-red-to) 96.44%); }

.m-change__logos {
  left: calc(44 * var(--u));
  top: calc(340 * var(--u));
  width: calc(261 * var(--u));
  height: calc(61.01 * var(--u));
}

.m-changes__diagram {
  left: 0;
  top: 0;
  width: calc(385 * var(--u));
  height: calc(1485 * var(--u));
  overflow: visible;
  pointer-events: none;
}

.m-changes__label {
  width: calc(33 * var(--u));
  font-family: var(--f-wide);
  font-size: calc(6 * var(--u));
  line-height: calc(8 * var(--u));
  letter-spacing: -0.04em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-text-lit);
  opacity: 0.3;
}

.m-changes__label--clients {
  left: calc(262 * var(--u));
  top: calc(141.5 * var(--u));
}

.m-changes__label--business {
  left: calc(262 * var(--u));
  top: calc(1238 * var(--u));
}

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

.m-note {
  height: calc(230 * var(--u));
}

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

.m-note__text {
  left: calc(64 * var(--u));
  top: calc(93 * var(--u));
  font-size: calc(14 * var(--u));
  line-height: calc(18 * var(--u));
  white-space: nowrap;
  opacity: 0.33;
}

.m-note__arrow {
  left: calc(237.5 * var(--u));
  top: calc(172.5 * var(--u));
  width: calc(16.18 * var(--u));
  height: calc(13 * var(--u));
  opacity: 0.67;
}

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

.m-free {
  height: calc(1842 * var(--u));
}

/* Правый и нижний край карточки — те же отступы, что у фото Марты в её углу */
.m-free__card {
  left: calc(15 * var(--u));
  top: 0;
  right: calc(15 * var(--u));
  bottom: calc(765 * var(--u));
}

.m-free__card .glow { transform: matrix(-3.75708, -4.12446, -1.08651, 0.9897, 0, 0); translate: calc(1209.28 * var(--u)) calc(257.58 * var(--u)); }

.m-free__badge {
  left: calc(64 * var(--u));
  top: calc(39 * var(--u));
}

.m-free__dots {
  left: calc(65.36 * var(--u));
  top: calc(80 * var(--u));
}

.m-free__title {
  left: calc(62 * var(--u));
  top: calc(100 * var(--u));
  --hw: 284;
  --hh: 180;
  font-size: calc(33 * var(--u));
  line-height: calc(36 * var(--u));
}

.m-free__underline { left: calc(65 * var(--u)); }
.m-free__underline--1 { top: calc(136 * var(--u)); width: calc(229 * var(--u)); }
.m-free__underline--2 { top: calc(172 * var(--u)); width: calc(231 * var(--u)); }
.m-free__underline--3 { top: calc(208 * var(--u)); width: calc(243 * var(--u)); }
.m-free__underline--4 { top: calc(243 * var(--u)); width: calc(260 * var(--u)); }
.m-free__underline--5 { top: calc(280 * var(--u)); width: calc(179.5 * var(--u)); }

.m-lead {
  font-size: calc(18 * var(--u));
  line-height: calc(23 * var(--u));
  letter-spacing: -0.05em;
  white-space: nowrap;
}

.m-lead--dim {
  color: var(--c-text-50);
}

.m-free__lead {
  left: calc(64 * var(--u));
  top: calc(306 * var(--u));
}

.m-free__aside {
  left: calc(64 * var(--u));
  top: calc(446 * var(--u));
}

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

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

.m-phone {
  left: calc(65 * var(--u));
  top: calc(var(--form-top) * var(--u));
  width: calc(255 * var(--u));
  height: calc(39 * var(--u));
  border-radius: calc(28.12 * var(--u));
  background: var(--c-field);
  cursor: text;
}

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

.m-phone__icon {
  left: calc(17.73 * var(--u));
  top: calc(15.04 * var(--u));
  width: calc(8.7 * var(--u));
  height: calc(8.7 * var(--u));
}

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

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

.m-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);
}

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

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

.lead-form__trap {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(1 * var(--u));
  height: calc(1 * var(--u));
  opacity: 0;
  clip-path: inset(50%);
  pointer-events: none;
}

.m-free__form {
  --form-top: 581;
}

.m-form__action {
  left: calc(65 * var(--u));
  top: calc(628 * var(--u));
}

/*
 * Согласие на обработку персональных данных — отдельная отметка (152-ФЗ):
 * кружок макета стал чекбоксом, подпись — его label вместе с промежутком
 * до кружка
 */
.m-consent {
  left: calc(107 * var(--u));
  top: calc(var(--consent-top) * var(--u));
  margin-left: calc(-23 * var(--u));
  padding-left: calc(23 * var(--u));
  font-size: calc(9 * var(--u));
  line-height: calc(12 * var(--u));
  letter-spacing: -0.05em;
  white-space: nowrap;
  color: var(--c-text-33);
  cursor: pointer;
}

.m-free__consent {
  --consent-top: 722;
}

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

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

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

.m-consent__link {
  color: var(--c-link-33);
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: calc(0.5 * var(--u));
}

.m-free__divider {
  left: calc(15 * var(--u));
  top: calc(794.5 * var(--u));
  width: calc(355 * var(--u));
  height: 0;
  border-top: calc(1 * var(--u)) solid var(--c-white);
  opacity: 0.03;
}

/* Телефон 26.43px */
.m-phone-link {
  font-family: var(--f-wide);
  font-size: calc(26.43 * var(--u));
  line-height: calc(30 * var(--u));
  letter-spacing: -0.06em;
  white-space: nowrap;
}

.m-free__phone {
  left: calc(64 * var(--u));
  top: calc(831 * var(--u));
}

/* Рамка «Напишите нам в мессенджере»: обводка белым 12%, левая часть — своя рамка 30% */
.m-messenger {
  width: calc(255 * var(--u));
  height: calc(56.56 * var(--u));
  border-radius: calc(11.91 * var(--u));
}

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

.m-messenger::before {
  top: 0;
  width: 100%;
  border-radius: inherit;
}

.m-messenger::after {
  top: calc(0.46 * var(--u));
  width: calc(185 * var(--u));
  height: calc(56 * var(--u));
  border-radius: calc(11.91 * var(--u)) 0 0 calc(11.91 * var(--u));
  opacity: 0.3;
}

.m-messenger__icon {
  left: calc(27 * var(--u));
  top: calc(19.46 * var(--u));
  width: calc(10.04 * var(--u));
  height: calc(9.54 * var(--u));
  opacity: 0.5;
}

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

.m-messenger__link {
  left: calc(207 * var(--u));
  top: calc(18.78 * var(--u));
  width: calc(23 * var(--u));
  height: calc(20 * var(--u));
}

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

/*
 * Ссылка на Telegram нажимается всей плашкой — с иконкой и призывом:
 * область нажатия иконки растянута на рамку плашки. Рамка фокуса с
 * клавиатуры — тоже вокруг плашки.
 */
.m-messenger__link::before {
  content: '';
  position: absolute;
  left: calc(-207 * var(--u));
  top: calc(-18.78 * var(--u));
  width: calc(255 * var(--u));
  height: calc(56.56 * var(--u));
  border-radius: calc(11.91 * var(--u));
}

.m-messenger__link:focus-visible {
  outline: none;
}

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

.m-free__messenger {
  left: calc(66 * var(--u));
  top: calc(875 * var(--u));
}

.m-free__photo {
  top: calc(932 * var(--u));
  right: calc(15 * var(--u));
  bottom: calc(765 * var(--u));
  width: calc(181 * var(--u));
  overflow: hidden;
  border-radius: calc(30 * var(--u));
}

.m-free__photo img {
  left: calc(-0.19 * var(--u));
  top: calc(14.15 * var(--u));
  width: calc(182.36 * var(--u));
  height: calc(131.91 * var(--u));
}

.m-free__name {
  left: calc(65 * var(--u));
  top: calc(976 * var(--u));
  font-family: var(--f-wide);
  font-size: calc(14 * var(--u));
  line-height: calc(17 * var(--u));
  letter-spacing: -0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.m-free__role {
  left: calc(66 * var(--u));
  top: calc(1002 * var(--u));
  font-size: calc(12 * var(--u));
  line-height: calc(16 * var(--u));
  white-space: nowrap;
  color: var(--c-text-lit);
  opacity: 0.5;
}

/* Два шага «бесплатно до курса» */
/* Зерно (::after) — на плашке, содержимое карточки лежит над ним */
.m-step,
.m-role {
  isolation: isolate;
}

.m-step > *,
.m-role > * {
  z-index: 1;
}

.m-step {
  left: calc(15 * var(--u));
  width: calc(355 * var(--u));
  border-radius: calc(30 * var(--u));
  background: var(--c-card-light);
}

.m-step--1 {
  top: calc(1082 * var(--u));
  height: calc(378 * var(--u));
}

.m-step--2 {
  top: calc(1465 * var(--u));
  height: calc(377 * var(--u));
  background: var(--c-card);
}

.m-step__badge {
  left: calc(49 * var(--u));
  top: calc(30 * var(--u));
}

.m-step__rule {
  left: 0;
  top: calc(69.5 * var(--u));
  width: 100%;
  height: 0;
  border-top: calc(1 * var(--u)) solid var(--c-white);
  opacity: 0.03;
}

.m-step__diagram {
  left: calc(37 * var(--u));
  top: calc(105 * var(--u));
  width: calc(280 * var(--u));
  height: calc(77.31 * var(--u));
  overflow: visible;
}

.m-step__text {
  left: calc(49 * var(--u));
  top: calc(213 * var(--u));
  font-size: calc(18 * var(--u));
  line-height: calc(23 * var(--u));
  letter-spacing: -0.05em;
  white-space: nowrap;
}

.m-step__avatars {
  left: calc(51 * var(--u));
  top: calc(112 * var(--u));
  width: calc(127 * var(--u));
  height: calc(60 * var(--u));
}

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

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

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

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

.m-results {
  height: calc(732 * var(--u));
}

.m-results__title {
  left: calc(63 * var(--u));
  top: calc(61 * var(--u));
  --hw: 282;
  --hh: 185;
  --angle: 87.32deg;
}

.m-results__arrows {
  left: calc(193 * var(--u));
  top: calc(279.8 * var(--u));
}

/* Слайдер на всю ширину окна: первая карточка — по колонке текста */
.m-results__slider {
  left: calc(-1 * var(--bleed));
  top: calc(360 * var(--u));
  width: calc(385 * var(--u) + 2 * var(--bleed));
  height: calc(266 * var(--u));
  scroll-padding-left: calc(var(--bleed) + 63 * var(--u));
}

.m-results__track {
  height: 100%;
  padding: 0 calc(var(--bleed) + 50 * var(--u)) 0 calc(var(--bleed) + 63 * var(--u));
  gap: calc(50 * var(--u));
}

.m-result {
  height: 100%;
}

.m-result--1 { width: calc(261 * var(--u)); }
.m-result--3 { width: calc(276 * var(--u)); }

/*
 * В макете 276: строка «как описывать и работать» шириной 268 подходила
 * к тексту третьей карточки почти вплотную. Шире на 29 — между текстами
 * 87, как между первой и второй карточкой.
 */
.m-result--2 { width: calc(305 * var(--u)); }

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

.m-tag {
  left: calc(2 * var(--u));
  top: calc(65 * var(--u));
  height: calc(27.78 * var(--u));
  padding: 0 calc(8.96 * var(--u)) 0 calc(27.22 * var(--u));
  border-radius: calc(4.48 * var(--u));
  -webkit-backdrop-filter: blur(calc(4.89 * var(--u)));
  backdrop-filter: blur(calc(4.89 * var(--u)));
}

.m-tag::before {
  border-width: calc(0.7 * var(--u));
  border-color: var(--c-tag-border);
}

.m-result--1 .m-tag__icon {
  rotate: -90deg;
}

.m-result--3 .m-tag {
  padding-left: calc(28.03 * var(--u));
}

.m-result--3 .m-tag__icon {
  top: calc(9.48 * var(--u));
  width: calc(9.41 * var(--u));
  height: calc(8.82 * var(--u));
}

.m-tag__icon {
  position: absolute;
  left: calc(9.66 * var(--u));
  top: calc(9.59 * var(--u));
  width: calc(8.6 * var(--u));
  height: calc(8.6 * var(--u));
}

.m-tag__label {
  position: relative;
  top: calc(1 * var(--u));
  font-family: var(--f-wide);
  font-size: calc(8.6 * var(--u));
  line-height: calc(9 * var(--u));
  text-transform: uppercase;
  color: transparent;
  background: var(--g-brand) 0 0 / 100% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
}

.m-result__formats {
  top: calc(70 * var(--u));
  font-family: var(--f-wide);
  font-size: calc(7.37 * var(--u));
  line-height: calc(9 * var(--u));
  white-space: nowrap;
  color: var(--c-white-20);
}

.m-result--1 .m-result__formats { left: calc(197 * var(--u)); }
.m-result--2 .m-result__formats { left: calc(204 * var(--u)); }
.m-result--3 .m-result__formats { left: calc(224 * var(--u)); top: calc(74 * var(--u)); }

.m-result__spark {
  display: inline-block;
  width: calc(7.54 * var(--u));
  height: calc(6.76 * var(--u));
  margin-left: calc(1 * var(--u));
  vertical-align: calc(-0.5 * var(--u));
  overflow: visible;
}

/* В макете звёздочка третьей карточки на той же высоте, что у двух других */
.m-result--3 .m-result__spark {
  position: relative;
  top: calc(5.25 * var(--u));
  margin: 0 calc(13.46 * var(--u)) 0 0;
}

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

.m-results__progress {
  left: calc(65 * var(--u));
  top: calc(669 * var(--u));
  width: calc(255 * var(--u));
}

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

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

.acc {
  position: relative;
}

.acc > :not(.acc__panel),
.acc__button > * {
  position: absolute;
}

/*
 * Подложка пункта — в рамке со скруглением 30: при раскрытии и сворачивании
 * рамка едет вверх, а подложка в ней — на столько же вниз (js/main.js),
 * радиус и подложка не искажаются
 */
.acc__shape {
  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));
}

.acc__bg .glow {
  opacity: 0;
}

.acc__head {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

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

.acc__panel {
  position: relative;
}

.acc__chevron {
  pointer-events: none;
}

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

.m-program {
  padding-top: calc(230.5 * var(--u));
}

.m-program__head {
  top: calc(21 * var(--u));
  --rule-from: 139.5;
}

.m-program__title {
  left: calc(63 * var(--u));
  top: calc(70 * var(--u));
  --hw: 257;
  --hh: 111;
  --angle: 85.93deg;
}

.m-program__item {
  min-height: calc(107 * var(--u));
}

.m-program__item.is-open {
  padding-top: calc(110 * var(--u));
}

.m-program__item--1 {
  min-height: calc(131 * var(--u));
  margin-bottom: calc(0.5 * var(--u));
}

/* Заголовок первого модуля в две строки: пункты ниже на строку, отступ от
   заголовка до линии — как у открытого третьего модуля в макете */
.m-program__item--1.is-open {
  padding-top: calc(126 * var(--u));
}

.m-program__item .acc__bg {
  background: var(--c-card-module);
}

.m-program__item.is-open .acc__bg .glow {
  opacity: 0.8;
  transform: matrix(-3.87447, 0, 0, 1.70213, 0, 0);
  translate: calc(659.38 * var(--u)) calc(-294.47 * var(--u));
}

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

.m-program__item--1:not(.is-open) .acc__head {
  height: calc(131 * var(--u));
}

.m-acc__number {
  left: calc(49 * var(--u));
  top: calc(28 * var(--u));
}

.m-acc__label {
  left: calc(73.5 * var(--u));
  top: calc(28 * var(--u));
}

.m-acc__title {
  left: calc(50 * var(--u));
  top: calc(59 * var(--u));
  font-size: calc(12 * var(--u));
  line-height: calc(16 * var(--u));
  white-space: nowrap;
}

.m-acc__rule {
  left: calc(128 * var(--u));
  top: calc(32.75 * var(--u));
  width: calc(155 * var(--u));
  height: 0;
  border-top: calc(0.5 * var(--u)) solid var(--c-white);
  opacity: 0.08;
}

.m-acc__icon {
  left: calc(298.75 * var(--u));
  top: calc(29.75 * var(--u));
}

.m-program__item .m-acc__chevron {
  left: calc(299.5 * var(--u));
  top: calc(65.5 * var(--u));
  width: calc(6 * var(--u));
  height: calc(3.29 * var(--u));
}

.m-program__item--1 .m-acc__chevron {
  top: calc(80.5 * var(--u));
}

.m-program__item.is-open .m-acc__chevron {
  top: calc(65.5 * var(--u));
  scale: 1 -1;
}

/* Пункты открытого модуля: линия, контурный номер, текст */
.m-points {
  position: relative;
}

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

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

.m-point--2 {
  padding: calc(94 * var(--u)) 0 calc(56 * var(--u));
}

.m-point__number {
  position: absolute;
  left: calc(48 * var(--u));
  top: calc(32 * var(--u));
}

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

.m-point__text {
  margin-left: calc(48 * var(--u));
  width: calc(257 * var(--u));
  font-size: calc(18 * var(--u));
  line-height: calc(23 * var(--u));
  letter-spacing: -0.05em;
}

/* Спикеры ------------------------------------------------------------------ */

.m-team {
  height: calc(2444 * var(--u));
}

.m-team__head {
  top: calc(80 * var(--u));
  --rule-from: 124;
}

.m-team__title {
  left: calc(62 * var(--u));
  top: calc(129 * var(--u));
  --hw: 295;
  --hh: 111;
  --angle: 85.33deg;
}

.m-team__text {
  left: calc(64 * var(--u));
  top: calc(265 * var(--u));
  font-size: calc(20 * var(--u));
  line-height: calc(24 * var(--u));
  letter-spacing: -0.05em;
  white-space: nowrap;
  opacity: 0.3;
}

.m-team__sparkle {
  left: calc(242 * var(--u));
  top: calc(362.78 * var(--u));
  width: calc(18 * var(--u));
  height: calc(16.03 * var(--u));
  overflow: visible;
}

.m-speaker {
  left: 0;
  width: calc(385 * var(--u));
}

/* --below: от низа карточки до низа блока (карточка в обоих блоках 810) */
.m-speaker--elena {
  --below: 197;
  top: calc(445 * var(--u));
  height: calc(1007 * var(--u));
}

.m-speaker--pavel {
  --below: 177;
  top: calc(1457 * var(--u));
  height: calc(987 * var(--u));
}

/* Низ карточки и фото — общий отступ, как на первом экране */
.m-speaker__card {
  left: calc(15 * var(--u));
  top: 0;
  bottom: calc(var(--below) * var(--u));
  width: calc(355 * var(--u));
}

.m-speaker__card .glow { transform: matrix(4.55373, 0, 0, 1.57629, 0, 0); translate: calc(-1177.19 * var(--u)) calc(-161.9 * var(--u)); }

.m-speaker__photo {
  left: calc(15 * var(--u));
  top: calc(153 * var(--u));
  bottom: calc(var(--below) * var(--u));
  width: calc(355 * var(--u));
  overflow: hidden;
  border-radius: 0 calc(30 * var(--u)) calc(30 * var(--u)) calc(30 * var(--u));
  pointer-events: none;
}

.m-speaker--elena .m-speaker__photo img {
  left: calc(-1.3 * var(--u));
  top: calc(5.94 * var(--u));
  width: calc(357.64 * var(--u));
  height: calc(652.22 * var(--u));
}

.m-speaker--pavel .m-speaker__photo img {
  left: calc(-1.23 * var(--u));
  top: calc(-1.01 * var(--u));
  width: calc(357.55 * var(--u));
  height: calc(659.16 * var(--u));
}

/* Затемнение снизу слева на фото Павла (радиальный градиент 91%) */
.m-speaker--pavel .m-speaker__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--g-shade) 0 0 / 100% 100% no-repeat;
  opacity: 0.91;
}

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

.m-speaker__icon {
  left: calc(313.75 * var(--u));
  top: calc(48.75 * var(--u));
  opacity: 0.22;
}

.m-speaker__chip {
  left: calc(63 * var(--u));
  top: calc(132 * var(--u));
  width: calc(111 * var(--u));
  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;
  -webkit-backdrop-filter: blur(calc(4.55 * var(--u)));
  backdrop-filter: blur(calc(4.55 * var(--u)));
}

.m-speaker__chip::before {
  border-width: calc(1 * var(--u));
}

.m-speaker--pavel .m-speaker__chip {
  top: calc(132 * var(--u));
}

.m-speaker__bio {
  left: calc(65 * var(--u));
  top: calc(603 * var(--u));
  font-size: calc(14 * var(--u));
  line-height: calc(18 * var(--u));
  white-space: nowrap;
}

/* Плашка телеграм-канала: аватар и подчёркнутое название */
.m-channel {
  left: calc(65 * var(--u));
  top: calc(733 * var(--u));
  width: calc(150 * var(--u));
  height: calc(28.2 * var(--u));
  border-radius: calc(5.6 * var(--u));
  background: var(--c-glass-dark);
  -webkit-backdrop-filter: blur(calc(3.64 * var(--u)));
  backdrop-filter: blur(calc(3.64 * var(--u)));
}

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

.m-channel > * {
  position: absolute;
}

.m-channel__avatar {
  left: calc(13.6 * var(--u));
  top: calc(9.7 * var(--u));
  width: calc(8.8 * var(--u));
  height: calc(8.8 * var(--u));
  border-radius: 50%;
}

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

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

.m-speaker__promise-card {
  left: calc(15 * var(--u));
  top: calc(815 * var(--u));
  width: calc(355 * var(--u));
  height: calc(192 * var(--u));
}

.m-speaker--pavel .m-speaker__promise-card {
  height: calc(172 * var(--u));
}

.m-speaker--elena .m-speaker__promise-card .glow { opacity: 0.56; transform: matrix(1.11738, -1.55243, -2.26647, -1.63121, 0, 0); translate: calc(197.12 * var(--u)) calc(535.99 * var(--u)); }
.m-speaker--pavel .m-speaker__promise-card .glow { opacity: 0.56; transform: matrix(1.11733, -1.55242, -2.53008, -1.82088, 0, 0); translate: calc(197.13 * var(--u)) calc(535.99 * var(--u)); }

.m-speaker__promise {
  left: calc(65 * var(--u));
  top: calc(860 * var(--u));
  font-size: calc(14 * var(--u));
  line-height: calc(20 * var(--u));
  white-space: nowrap;
  opacity: 0.44;
}

/* Для кого ---------------------------------------------------------------- */

.m-audience {
  height: calc(1648 * var(--u));
}

.m-audience__head {
  top: calc(80 * var(--u));
  --rule-from: 249;
}

.m-audience__title {
  left: calc(64 * var(--u));
  top: calc(129 * var(--u));
  --hw: 298;
  --hh: 185;
  --angle: 87.17deg;
}

.m-audience__cards {
  inset: 0;
}

.m-role {
  left: calc(15 * var(--u));
  width: calc(355 * var(--u));
  border-radius: calc(30 * var(--u));
  background: var(--c-card-role);
}

.m-role--1 { top: calc(364 * var(--u)); height: calc(301 * var(--u)); }
.m-role--2 { top: calc(670 * var(--u)); height: calc(279 * var(--u)); }
.m-role--3 { top: calc(954 * var(--u)); height: calc(304 * var(--u)); }

.m-role__icon {
  left: calc(51 * var(--u));
  top: calc(72 * var(--u));
  width: calc(15.36 * var(--u));
  height: calc(15.36 * var(--u));
}

.m-role__title {
  left: calc(48 * var(--u));
  width: calc(253 * var(--u));
  top: calc(105 * 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;
  white-space: nowrap;
  color: transparent;
  background: var(--g-brand) 0 0 / 100% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
}

.m-role__text {
  left: calc(51 * var(--u));
  top: calc(170 * var(--u));
  font-size: calc(16 * var(--u));
  line-height: calc(21 * var(--u));
  white-space: nowrap;
}

.m-role--2 .m-role__text {
  top: calc(146 * var(--u));
}

.m-audience__cta {
  left: calc(15 * var(--u));
  top: calc(1263 * var(--u));
  width: calc(355 * var(--u));
  height: calc(385 * var(--u));
  background-color: var(--c-card-role);
}

.m-audience__cta .glow { opacity: 0.44; transform: matrix(2.40766, -3.43555, 2.53225, 1.77461, 0, 0); translate: calc(-707.98 * var(--u)) calc(358.05 * var(--u)); }

.m-audience__cta > :not(.glow) {
  z-index: 1;
}

.m-audience__cta-icon {
  left: calc(51 * var(--u));
  top: calc(72 * var(--u));
}

.m-audience__cta-text {
  left: calc(48 * var(--u));
  top: calc(105 * var(--u));
  font-family: var(--f-wide);
  font-size: calc(20 * var(--u));
  line-height: calc(26 * var(--u));
  letter-spacing: -0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.m-audience__button {
  left: calc(50 * var(--u));
  top: calc(291 * var(--u));
}

.m-audience__button .m-button__icon {
  left: calc(19 * var(--u));
  top: calc(15.21 * var(--u));
  width: calc(7.98 * var(--u));
  height: calc(7.58 * var(--u));
}

.m-audience__button .m-button__label {
  left: calc(39.2 * var(--u));
  top: calc(12.6 * var(--u));
  font-size: calc(8.55 * var(--u));
  line-height: calc(13 * var(--u));
}

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

.m-faq {
  padding-top: calc(286 * var(--u));
}

.m-faq__head {
  top: calc(80 * var(--u));
  --rule-from: 94.5;
}

.m-faq__title {
  left: calc(63 * var(--u));
  top: calc(129 * var(--u));
  --hw: 257;
  --hh: 111;
  --angle: 85.93deg;
}

/* Закрытый вопрос — без заливки, рамка белым 5%; открытый — #151515 со свечением */
.m-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;
}

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

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

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

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

.m-faq__item.is-open .acc__bg .glow {
  opacity: 0.3;
  transform: matrix(-5.62114, 0, 0, 1.70097, 0, 0);
  translate: calc(1058.41 * var(--u)) calc(-446.26 * var(--u));
}

.m-faq__item--1 { min-height: calc(163 * var(--u)); }
.m-faq__item--2 { min-height: calc(182 * var(--u)); }
.m-faq__item--3 { min-height: calc(163 * var(--u)); }
.m-faq__item--4 { min-height: calc(163 * var(--u)); }
.m-faq__item--5 { min-height: calc(190 * var(--u)); }
.m-faq__item--6 { min-height: calc(167 * var(--u)); }

.m-faq__item.is-open {
  padding-top: calc(155 * var(--u));
}

.m-faq__icon {
  left: calc(50 * var(--u));
  top: calc(33 * var(--u));
  width: calc(9.22 * var(--u));
  height: calc(9.79 * var(--u));
}

.m-faq__question {
  left: calc(49 * var(--u));
  top: calc(56 * var(--u));
  font-size: calc(16 * var(--u));
  line-height: calc(22 * var(--u));
  white-space: nowrap;
  color: var(--c-question);
  text-decoration: underline;
  text-decoration-thickness: calc(0.32 * var(--u));
  text-underline-offset: calc(6 * var(--u));
}

.m-faq__item.is-open .m-faq__icon {
  top: calc(29 * var(--u));
}

.m-faq__item.is-open .m-faq__question {
  top: calc(52 * var(--u));
  font-weight: 700;
  color: var(--c-white);
  text-decoration: none;
}

/* Шевроны — chevron.svg (линия 2px) в масштабе 0.6: в макете линия 1.2 */
.m-faq__item .m-acc__chevron {
  left: calc(297.4 * var(--u));
  top: calc(36.32 * var(--u));
  width: calc(7.2 * var(--u));
  height: calc(3.95 * var(--u));
}

.m-faq__item.is-open .m-acc__chevron {
  top: calc(32.31 * var(--u));
  scale: 1 -1;
}

.m-faq__answer {
  position: relative;
  top: calc(1 * var(--u));
  margin-left: calc(49 * var(--u));
  width: calc(255 * var(--u));
  font-weight: 300;
  font-size: calc(14 * var(--u));
  line-height: calc(20 * var(--u));
  letter-spacing: -0.01em;
}

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

.m-faq__answer b {
  font-weight: 700;
}

/* Эксперт под ответом: фото (отражено), звёздочка, логотип вертикально */
.m-faq__art {
  position: relative;
  height: calc(353 * var(--u));
  margin-top: calc(10 * var(--u));
}

.m-faq__art > * {
  position: absolute;
}

.m-faq__sparkle {
  left: calc(29 * var(--u));
  top: calc(27 * var(--u));
  width: calc(298 * var(--u));
  height: calc(265.32 * var(--u));
  overflow: visible;
  opacity: 0.11;
}

/*
 * Картинка на 0.87 шире и на 0.86 выше рамки макета 355 × 353 (целые
 * пиксели исходника): лишнее срезает clip-path со скруглением 30 — справа
 * на экране, то есть слева до отражения.
 */
.m-faq__photo {
  left: 0;
  top: 0;
  width: calc(355.87 * var(--u));
  height: calc(353.86 * var(--u));
  max-width: none;
  clip-path: inset(0 0 calc(0.86 * var(--u)) calc(0.87 * var(--u)) round calc(30 * var(--u)));
  scale: -1 1;
}

.m-faq__logo {
  left: calc(283 * var(--u));
  top: calc(250.79 * var(--u));
  width: calc(73.79 * var(--u));
  height: calc(21.11 * var(--u));
  opacity: 0.89;
  transform-origin: 0 0;
  rotate: -90deg;
}

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

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

.m-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));
}

.m-faq__chevron {
  left: calc(297.4 * var(--u));
  top: calc(297.4 * var(--u));
  width: calc(7.2 * var(--u));
  height: calc(3.95 * var(--u));
  scale: 1 -1;
}

/* Первый шаг -------------------------------------------------------------- */

.m-final {
  height: calc(1733 * var(--u));
}

.m-final__head {
  top: calc(80 * var(--u));
  --rule-from: 167;
}

.m-final__title {
  left: calc(64 * var(--u));
  top: calc(129 * var(--u));
  --hw: 298;
  --hh: 185;
  --angle: 87.17deg;
}

.m-modules--final {
  left: 0;
  top: calc(364 * var(--u));
  width: 100%;
}

.m-modules--final .m-modules__card--1 .glow {
  display: none;
}

.m-final__card {
  left: calc(15 * var(--u));
  top: calc(928 * var(--u));
  width: calc(355 * var(--u));
  height: calc(805.2 * var(--u));
  opacity: 0.5;
}

.m-final__card .glow { transform: matrix(4.80283, -1.89732, -0.66881, -1.69274, 0, 0); translate: calc(-379.25 * var(--u)) calc(1544.03 * var(--u)); }

.m-final__badge {
  left: calc(64 * var(--u));
  top: calc(966 * var(--u));
}

.m-final__dots {
  left: calc(65.36 * var(--u));
  top: calc(1014 * var(--u));
}

.m-final__card-title {
  left: calc(62 * var(--u));
  top: calc(1029.65 * var(--u));
  --hw: 308;
  --hh: 196;
  --fill: var(--g-brand-final);
  font-size: calc(24.7 * var(--u));
  line-height: calc(28 * var(--u));
}

.m-final__underline {
  left: calc(65.18 * var(--u));
  --dash: 0.52;
}

.m-final__underline--1 { top: calc(1056.41 * var(--u)); width: calc(256.55 * var(--u)); }
.m-final__underline--2 { top: calc(1084.33 * var(--u)); width: calc(219.06 * var(--u)); }
.m-final__underline--3 { top: calc(1112.51 * var(--u)); width: calc(92.2 * var(--u)); }
.m-final__underline--4 { top: calc(1140.82 * var(--u)); width: calc(235.49 * var(--u)); }
.m-final__underline--5 { top: calc(1168.89 * var(--u)); width: calc(183.11 * var(--u)); }
.m-final__underline--6 { top: calc(1196.95 * var(--u)); width: calc(186.54 * var(--u)); }
.m-final__underline--7 { top: calc(1226.14 * var(--u)); width: calc(105.97 * var(--u)); }

.m-final__lead {
  left: calc(64 * var(--u));
  top: calc(1267.49 * var(--u));
}

.m-final__aside {
  left: calc(64 * var(--u));
  top: calc(1407.49 * var(--u));
}

.m-final__form {
  --form-top: 1542.49;
}

.m-form__submit {
  left: calc(65 * var(--u));
  top: calc(1589.49 * var(--u));
}

.m-final__consent {
  --consent-top: 1660.19;
}

/* Подвал ------------------------------------------------------------------ */

.m-footer {
  height: calc(450 * var(--u));
}

.m-footer__messenger {
  left: calc(66 * var(--u));
  top: calc(68.51 * var(--u));
}

.m-footer__phone {
  left: calc(64 * var(--u));
  top: calc(148.58 * var(--u));
}

.m-footer__links {
  left: calc(64 * var(--u));
  top: calc(227.1 * var(--u));
}

.m-footer__links > * + * {
  margin-top: calc(16.94 * var(--u));
}

.m-footer__link,
.m-footer__copy {
  display: block;
  font-size: calc(12 * var(--u));
  line-height: calc(16 * var(--u));
  letter-spacing: -0.05em;
  white-space: nowrap;
  opacity: 0.33;
}

.m-footer__link {
  display: inline-block;
  color: var(--c-link);
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: calc(1 * var(--u));
}

.m-footer__copy {
  color: var(--c-white);
}

.m-footer__logo {
  left: calc(21 * var(--u));
  top: calc(391.43 * var(--u));
}

.m-footer__cta {
  left: calc(168 * var(--u));
  top: calc(393.43 * var(--u));
}

.m-footer__burger {
  left: calc(306.5 * var(--u));
  top: calc(394.93 * var(--u));
}

/*
 * Прелоадер (фрейм 229:1964, 385 × 750): те же логотип, подпись и полоса,
 * что на десктопе, в масштабе 0.8. Элементы стоят от центра экрана (в
 * макете — от центра кадра 385 × 750).
 */

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


/*
 * Меню. Макета мобильного меню нет — оно собрано из десктопного (фрейм
 * 230:4012): страница под ним размыта и затемнена, панель со свечением
 * выезжает снизу, а нажатый бургер на своём месте превращается в крестик.
 * Пункта «Отличия» нет: такого блока в мобильной версии нет.
 */

.popup {
  position: fixed;
  inset: 0;
  z-index: 20;
  opacity: 0;
  visibility: hidden;
  background: var(--c-overlay);
}

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

/* Панель прижата к низу окна; если окно ниже панели (телефон боком),
   меню прокручивается */
.menu {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
}

.menu.is-open {
  visibility: visible;
}

/* Затемнение с размытием и зерно — отдельные слои: они проявляются, а
   крестик над ними виден сразу */
.menu::before,
.menu::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.menu::before {
  background: var(--c-menu-overlay);
  -webkit-backdrop-filter: blur(calc(20 * var(--u)));
  backdrop-filter: blur(calc(20 * var(--u)));
}

.menu::after {
  background: url('../assets/desktop/grain.webp') 0 0 / calc(128 * var(--u)) repeat;
  opacity: 0.25;
}

.menu__frame {
  position: relative;
  flex: none;
  width: calc(385 * var(--u));
  height: calc(268 * var(--u));
  margin: auto auto 0;
}

.menu__head,
.menu__item--advantages,
.menu__close {
  display: none;
}

.menu__panel > * {
  position: absolute;
}

.menu__panel {
  position: absolute;
  left: calc(15 * var(--u));
  top: calc(10 * var(--u));
  width: calc(355 * var(--u));
  height: calc(248 * 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(-394.35 * var(--u)) calc(-153.12 * 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;
}

/*
 * Крестик стоит на месте нажатого бургера (его место в окне ставит скрипт:
 * --burger-x, --burger-y) и нарисован теми же тремя линиями. В открытом меню
 * верхняя и нижняя сходятся к середине и встают под 45° — это десктопный
 * крестик в масштабе 0.8, средняя исчезает. Справа подпись «закрыть».
 */
.m-menu-close {
  position: fixed;
  left: var(--burger-x, calc(306.5 * var(--u)));
  top: var(--burger-y, calc(20.5 * var(--u)));
  z-index: 1;
  width: calc(53.4 * var(--u));
  height: calc(28.6 * var(--u));
}

/* Область нажатия больше иконки — как у бургера */
.m-menu-close::before {
  content: '';
  position: absolute;
  inset: calc(-10 * var(--u));
}

.menu.is-leaving .m-menu-close {
  opacity: 0;
}

.m-menu-close__line {
  position: absolute;
  left: 0;
  top: calc(12.8 * var(--u));
  width: calc(53.4 * var(--u));
  height: calc(3 * var(--u));
  border-radius: calc(1.5 * var(--u));
  background: var(--c-text);
  opacity: 0.2;
}

.m-menu-close__line--1 {
  translate: 0 calc(-12.8 * var(--u));
}

.m-menu-close__line--2 {
  width: calc(36.075 * var(--u));
}

.m-menu-close__line--3 {
  translate: 0 calc(12.8 * var(--u));
}

.menu.is-open .m-menu-close__line--1,
.menu.is-open .m-menu-close__line--3 {
  opacity: 1;
  translate: 0 0;
  scale: 0.8;
}

.menu.is-open .m-menu-close__line--1 {
  rotate: 45deg;
}

.menu.is-open .m-menu-close__line--3 {
  rotate: -45deg;
}

.menu.is-open .m-menu-close__line--2 {
  opacity: 0;
  scale: 0 1;
}

.m-menu-close__label {
  position: absolute;
  left: calc(53.74 * var(--u));
  top: calc(28.84 * var(--u));
  font-family: var(--f-wide);
  font-size: calc(4.11 * var(--u));
  line-height: calc(4 * var(--u));
  letter-spacing: 0.29em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-white);
  opacity: 0;
  transform-origin: 0 0;
  rotate: -90deg;
}

.menu.is-open .m-menu-close__label {
  opacity: 0.2;
}

/* Пока меню открыто, на месте бургера — крестик меню */
.m-burger[aria-expanded='true'] img {
  opacity: 0;
}

.menu__list {
  left: calc(49 * var(--u));
  top: calc(66 * var(--u));
  display: grid;
  justify-items: start;
  gap: calc(26 * var(--u));
}

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

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

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

/*
 * Окно после отправки заявки: карточка со свечением по центру экрана. Если
 * окно ниже карточки (телефон боком), карточка прокручивается.
 */

.popup {
  display: flex;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(16 * var(--u)) 0;
}

.popup__panel {
  position: relative;
  flex: none;
  margin: auto;
  width: calc(355 * var(--u));
  padding: calc(44 * var(--u)) calc(32 * var(--u)) calc(36 * var(--u));
  overflow: hidden;
  border-radius: calc(30 * var(--u));
  background: var(--c-card);
  isolation: isolate;
}

/* Свечение — как у верхней карточки первого экрана */
.popup__panel .glow {
  z-index: -2;
  width: calc(355 * var(--u));
  height: calc(538 * var(--u));
  opacity: 0.8;
  transform: matrix(3.0895, 1.80081, -0.706, 1.21133, 0, 0);
  translate: calc(-230.02 * var(--u)) calc(-459.48 * var(--u));
}

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

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

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

.popup__sparkle {
  position: absolute;
  right: calc(70 * var(--u));
  top: calc(44 * var(--u));
  width: calc(25.42 * var(--u));
  height: calc(22.63 * var(--u));
  overflow: visible;
}

.popup__eyebrow {
  font-size: calc(7 * var(--u));
  line-height: calc(11 * var(--u));
}

.popup__title {
  --hw: 291;
  --hh: 87;
  margin-top: calc(14 * var(--u));
  font-size: calc(26 * var(--u));
  line-height: calc(29 * var(--u));
}

.popup__text {
  margin-top: calc(18 * var(--u));
  font-size: calc(15 * var(--u));
  line-height: calc(20 * var(--u));
  letter-spacing: -0.03em;
}

.popup__button {
  margin-top: calc(28 * var(--u));
  width: calc(255 * var(--u));
  height: calc(39.1 * var(--u));
  border-radius: calc(28.01 * var(--u));
}

.popup__button .button__icon {
  position: absolute;
  left: calc(18.55 * var(--u));
  top: calc(15.58 * var(--u));
  width: calc(8.4 * var(--u));
  height: calc(7.98 * var(--u));
}

.popup__button .button__label {
  position: absolute;
  left: calc(40.26 * var(--u));
  top: calc(12.25 * var(--u));
  font-family: var(--f-wide);
  font-size: calc(9.34 * var(--u));
  line-height: calc(14 * var(--u));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Интерактивные состояния (на планшетах с мышью и тачпадом) */

@media (hover: hover) {
  .slider {
    cursor: grab;
  }

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

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

  .m-cta:hover::after {
    opacity: 0.12;
  }

  .button:hover {
    scale: 1.02;
  }

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

  .m-logo:hover {
    opacity: 0.8;
  }

  .m-phone-link:hover,
  .m-program__item:not(.is-open):has(.acc__button:hover) .m-acc__title,
  .m-channel:hover .m-channel__name {
    color: var(--c-white);
  }

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

  .menu__link:hover::after,
  .m-channel:hover .m-channel__name::after {
    transform: scaleX(0.35);
  }

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

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

  .m-menu-close:hover .m-menu-close__line {
    background: var(--c-white);
  }

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

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

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

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

  .m-footer__link:hover {
    opacity: 1;
  }

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

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

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

.button:active {
  scale: 0.98;
}

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

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

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

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

  .m-logo,
  .button::after,
  .m-cta::after,
  .popup__close::before,
  .popup__close::after,
  .acc__bg::after,
  .acc__bg .glow,
  .m-faq__item .acc__bg::before,
  .arrows__button::after {
    transition: opacity 0.5s var(--ease-out);
  }

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

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

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

  /* Бургер страницы прячется сразу (на его месте крестик меню), а
     появляется, когда крестик снова стал бургером и меню скрылось */
  .m-burger img {
    transition:
      scale 0.5s var(--ease-out),
      translate 0.5s var(--ease-out),
      opacity 0s linear 0.6s;
  }

  .m-burger[aria-expanded='true'] img {
    transition-delay: 0s;
  }

  .m-messenger__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);
  }

  .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);
  }

  .m-free__form .button { --shine-delay: 2.7s; }
  .m-audience__button { --shine-delay: 4.1s; }
  .m-final__form .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(20 * var(--u)); }
  .js [data-reveal='down']:not(.is-in) { translate: 0 calc(-10 * var(--u)); }
  .js [data-reveal='right']:not(.is-in) { translate: calc(-14 * var(--u)) 0; }
  .js [data-reveal='rise']:not(.is-in) { translate: 0 calc(24 * var(--u)); scale: 0.98; }
  .js [data-reveal='photo']:not(.is-in) { translate: 0 calc(40 * var(--u)); }
  .js [data-reveal='draw']:not(.is-in) { scale: 0 1; }
  .js [data-reveal='stagger']:not(.is-in) > * { translate: 0 calc(14 * var(--u)); }
  .js [data-reveal='stagger'][data-stagger='pop']:not(.is-in) > * { translate: none; scale: 0.85; }

  /* Заголовки по словам: слова по очереди доходят до своей прозрачности */
  .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. */

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

  .m-header .m-logo { --delay: 0.1s; }
  .m-header .m-cta { --delay: 0.2s; }
  .m-header .m-burger { --delay: 0.3s; }

  .m-hero__card--1 { --delay: 0s; }
  .m-hero__card--elena { --delay: 0.1s; }
  .m-hero__card--pavel { --delay: 0.16s; }
  .m-hero__card--2 { --delay: 0.22s; }
  .m-hero__eyebrow { --delay: 0.3s; }
  .m-hero__dots { --delay: 0.35s; }
  .m-hero__photo--elena { --delay: 0.3s; }
  .m-hero__photo--pavel { --delay: 0.4s; }
  .m-hero__lead { --delay: 0.6s; }
  .m-hero__facts { --delay: 0.8s; }
  .m-hero__person--elena { --delay: 0.9s; }
  .m-hero__person--pavel { --delay: 1s; }
  .m-hero__ornament { --delay: 0.5s; }
  .m-hero__summary { --delay: 0.55s; }
  .m-hero__sparkle,
  .m-hero__action { --delay: 0.7s; }

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

  .m-modules__card--2 { --delay: 0.08s; }
  .m-modules__card--3 { --delay: 0.16s; }
  .m-modules__list { --delay: 0.2s; }
  .m-free__underline--1, .m-final__underline--1 { --delay: 0.4s; }
  .m-free__underline--2, .m-final__underline--2 { --delay: 0.5s; }
  .m-free__underline--3, .m-final__underline--3 { --delay: 0.6s; }
  .m-free__underline--4, .m-final__underline--4 { --delay: 0.7s; }
  .m-free__underline--5, .m-final__underline--5 { --delay: 0.8s; }
  .m-final__underline--6 { --delay: 0.9s; }
  .m-final__underline--7 { --delay: 1s; }

  /*
   * Меню: затемнение проявляется, панель выезжает снизу, пункты поднимаются
   * лесенкой. Бургер превращается в крестик: верхняя и нижняя линии
   * сходятся к середине, потом поворачиваются; при закрытии — наоборот, и
   * когда меню скрылось, на том же месте снова бургер страницы. Если меню
   * закрыла ссылка (страница прокручивается), крестик просто гаснет.
   */

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

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

  .menu {
    transition: visibility 0s linear 0.6s;
  }

  .menu.is-open {
    transition: none;
  }

  .menu::before,
  .menu::after {
    transition: opacity 0.4s var(--ease-out);
  }

  .menu:not(.is-open)::before,
  .menu:not(.is-open)::after {
    opacity: 0;
  }

  .menu__panel {
    translate: 0 calc(100% + 10 * var(--u));
    transition: translate 0.5s var(--ease-in-out);
  }

  .menu.is-open .menu__panel {
    translate: 0 0;
    transition: translate 0.7s var(--ease-out);
  }

  .menu__list > li {
    opacity: 0;
    translate: 0 calc(16 * var(--u));
    transition:
      opacity 0s linear 0.5s,
      translate 0s linear 0.5s;
  }

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

  .m-menu-close {
    transition: opacity 0.3s var(--ease-out);
  }

  .menu.is-open .m-menu-close {
    transition: none;
  }

  .m-menu-close__line {
    transition:
      rotate 0.25s var(--ease-in-out),
      scale 0.25s var(--ease-in-out),
      translate 0.25s var(--ease-in-out) 0.2s,
      opacity 0.25s var(--ease-in-out) 0.2s;
  }

  .menu.is-open .m-menu-close__line {
    transition:
      translate 0.25s var(--ease-in-out),
      opacity 0.25s var(--ease-in-out),
      rotate 0.35s var(--ease-out) 0.2s,
      scale 0.35s var(--ease-out) 0.2s;
  }

  /* Средняя линия гаснет, пока крайние сходятся, и возвращается, когда расходятся */
  .m-menu-close__line--2 {
    transition:
      opacity 0.25s var(--ease-in-out) 0.2s,
      scale 0.25s var(--ease-in-out) 0.2s;
  }

  .menu.is-open .m-menu-close__line--2 {
    transition:
      opacity 0.2s var(--ease-out),
      scale 0.25s var(--ease-in-out);
  }

  .m-menu-close__label {
    transition: opacity 0.2s var(--ease-out);
  }

  .menu.is-open .m-menu-close__label {
    transition: opacity 0.4s var(--ease-out) 0.35s;
  }

  .popup__panel {
    translate: 0 calc(24 * 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;
  }

  /* Звёздочки на схеме «Что меняется» мерцают по очереди */
  .m-changes__spark {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: spark-twinkle 4.8s var(--ease-in-out) infinite;
  }

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

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