/* Лендинг «Лабиринт» — широкий экран, от 1024px (media в index.html).
   ============================================================================
   Вёрстка по макету Figma «Лабиринт — desktop 1440 (новый)», узел 2624:2320,
   с правками из комментариев заказчика от 2026-10-27 (см. README, «Десктопная
   версия»). Таблица самостоятельная: мобильная landing.css на этой ширине не
   подключается, поэтому здесь и шрифты, и база.

   Размеры — из макета: --u — цена макетного пикселя (1px при 1440, меньше на
   ноутбуках, больше на широких мониторах до 1920), пишем calc(N * var(--u)).
   Мелкий текст не опускается ниже читаемого — max(…, Npx).

   В макете вместо VK Sans местами стоят Fira Sans Condensed, Golos Text и
   Inter — это подмена у дизайнера; на сайте везде фирменные VK Sans Display
   и VK Sans Display Condensed (лежат в public/fonts).
   ============================================================================ */

/* ---------- шрифты ---------- */
/* Фирменные VK Sans лежат локально (assets/fonts/vk-sans → public/fonts):
   внешние CDN из РФ нестабильны, а без своего шрифта макет разъезжается. */
@font-face {
  font-family: 'VK Sans Display';
  src: url('fonts/vk-sans-display-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'VK Sans Display';
  src: url('fonts/vk-sans-display-medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'VK Sans Display';
  src: url('fonts/vk-sans-display-demibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'VK Sans Display';
  src: url('fonts/vk-sans-display-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'VK Sans Display Condensed';
  src: url('fonts/vk-sans-display-condensed-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'VK Sans Display Condensed';
  src: url('fonts/vk-sans-display-condensed-extrabold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'VK Sans Display Condensed';
  src: url('fonts/vk-sans-display-condensed-black-italic.woff2') format('woff2');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}


/* ---------- база ---------- */

:root {
  --blue: #0077ff;
  --ice: #e6f3ff;
  --snow: #ebf4f9;
  --ink: #000;
  --grey: #7c889b;

  --font-ui: 'VK Sans Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'VK Sans Display Condensed', 'VK Sans Display', sans-serif;
}

* { box-sizing: border-box; }

html {
  background: #fff;
  scroll-padding-top: calc(96px + env(safe-area-inset-top, 0px)); /* якоря не уходят под шапку */
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  container-type: inline-size; /* 100cqw — ширина без полосы прокрутки */
  background: #fff;
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.page {
  --pw: min(100cqw, 1920px);
  --u: calc(var(--pw) / 1440);
  --header-h: calc(104 * var(--u));
  --sec-r: calc(64 * var(--u)); /* скругление и нахлёст секций */

  position: relative;
  width: 100%;
  max-width: 1920px;
  margin-inline: auto;
  background: #fff;
  overflow: clip; /* clip, а не hidden: иначе шапка перестаёт липнуть к окну */
}

img { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; }

.display {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  line-height: 0.95;
}
.display i { font-style: inherit; }

/* Только телефон — на этой ширине не показываем. */
.m-only,
.topbar__menu,
.outcome__art,
.campus-track { display: none !important; }

/* Обёртки «лесенки наездов» телефона: здесь секции идут одна за другой. */
.series-stack,
.outcome-stack,
.campus-stack,
.promo-stack,
main { display: contents; }

/* Секции наезжают друг на друга на 64 и скруглены сверху, как в макете. */
.series,
.seasons,
.outcome,
.campus,
.midsprint,
.promo,
.logo-scene,
.footer {
  position: relative;
  margin-top: calc(-1 * var(--sec-r));
  border-radius: var(--sec-r) var(--sec-r) 0 0;
}
.series { z-index: 2; }
.seasons { z-index: 3; }
.outcome { z-index: 4; }
.campus { z-index: 5; }
.midsprint { z-index: 6; }
.promo { z-index: 7; }
.logo-scene { z-index: 8; }
.footer { z-index: 9; }

/* Синяя кнопка-таблетка (макет: Button / Large / Accent). Все кнопки — в одной
   стилистике с кнопкой-карточкой «Начать учиться» и кнопкой в шапке: акцидентный
   шрифт капсом, крупнее, чем в макете (правки заказчика 2026-10-28: «текст в кнопке
   выглядит меньше обычного текста, шрифты в кнопках разные, кнопки крупнее»). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(400 * var(--u));
  height: calc(72 * var(--u));
  min-height: 52px;
  padding: calc(3 * var(--u)) calc(44 * var(--u)) 0;
  border-radius: 100px;
  background: var(--blue);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: max(calc(30 * var(--u)), 22px);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.btn:hover { background: #0a6be0; }
.btn:active { transform: scale(0.98); }

/* Кнопка-карточка «Начать учиться» (первый экран и VK Education). */
.cta {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  border-radius: calc(32 * var(--u));
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.25s ease;
}
/* Без тени: на синем она ложилась грязным пятном (правки заказчика 2026-10-30). */
.cta:hover { transform: translateY(-2px); }
.cta__label { flex: 1; line-height: 1.14; }
.cta__arrow { flex: none; transition: transform 0.25s ease; }
.cta:hover .cta__arrow { transform: translateX(4px); }

:focus-visible { outline: 3px solid #66b2ff; outline-offset: 3px; }

/* ---------- шапка ---------- */
/* На первом экране — без плашки, но на светлом градиенте сверху: под шапкой идёт анимация во
   весь экран, и на синих стенках лабиринта тёмные логотип, меню и синяя кнопка терялись
   (правки заказчика 2026-10-29: «градиент светлый сверху или плашку оставить изначально»).
   Анимация первого экрана доиграла — белая плашка (шапка визуально выделена и закреплена).
   Класс .is-solid ставит landing.js. */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  margin-bottom: calc(-1 * var(--header-h));
  padding: 0 calc(64 * var(--u));
  display: flex;
  align-items: center;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, height 0.3s ease;
}
/* Градиент длиннее шапки: под логотипом и меню почти белый, ниже растворяется в кадре. */
.topbar::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: calc(190 * var(--u));
  background: linear-gradient(180deg,
    rgb(255 255 255 / 0.94) 0,
    rgb(255 255 255 / 0.82) 40%,
    rgb(255 255 255 / 0.36) 72%,
    rgb(255 255 255 / 0) 100%);
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.topbar.is-solid::before { opacity: 0; }
/* Плашка сплошная, без backdrop-filter: под шапкой проезжает играющее видео
   сериала, и размытие во всю ширину Safari пересчитывал на каждом кадре. */
.topbar.is-solid {
  height: calc(80 * var(--u));
  background: #fff;
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.06), 0 12px 32px -16px rgb(13 51 128 / 0.18);
}

.topbar__logo { flex: none; }
.topbar__logo img { width: calc(171 * var(--u)); height: auto; }

.topnav {
  display: flex;
  gap: calc(28 * var(--u));
  margin-left: calc(50 * var(--u));
}
.topnav a {
  font-weight: 500;
  font-size: max(calc(16 * var(--u)), 14px);
  line-height: 1.25;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease;
}
.topnav a:hover { opacity: 0.7; }

/* Тот же стиль, что у остальных кнопок (.btn): акцидентный шрифт капсом. */
.topbar__cta {
  margin-left: auto;
  padding: calc(15 * var(--u)) calc(28 * var(--u)) calc(13 * var(--u));
  border-radius: 100px;
  background: var(--blue);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: max(calc(22 * var(--u)), 17px);
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.topbar__cta:hover { background: #0a6be0; }

/* ---------- первый экран ---------- */
/* Анимация лабиринта во весь экран (горизонтальные кадры на canvas, landing.js), внизу на
   синей растяжке — «ЛАБИРИНТ» и разрядкой «возможностей», подпись и кнопки. Экран липкий и
   равен окну: прокрутка «отматывает» анимацию, пауза на финальном кадре, потом наезжает сериал.
   Шрифт один, фирменный VK Sans Display: Condensed Black Italic на надписи и кнопках, обычный —
   на подписи (заказчик 2026-10-28: «этот дополнительный с макетов я бы не брала, очень много
   разных, пусть ленд будет лаконичнее»). Моноширинного с постеров тут больше нет.
   Размеры внутри героя — в --u = --hu, меньшем из цены пикселя по ширине и по высоте окна
   (макет 1440×940): на невысоком ноутбуке всё помещается. */

.page {
  --screen-h: 100vh;
  --scrub-h: 120vh;
  --hold: 25vh; /* пауза на финальной композиции, прежде чем наедет сериал */
  --uw: var(--u);
  --hu: min(var(--u), calc(100vh / 940));
}
@supports (height: 100lvh) {
  .page {
    --screen-h: 100lvh;
    --scrub-h: 120svh;
    --hold: 25svh;
    --hu: min(var(--u), calc(100svh / 940));
  }
}
/* Страница сверки (?static): размеры макета, без хода прокрутки, финальный кадр. */
.static-layout .page {
  --screen-h: calc(940 * var(--u));
  --scrub-h: 0px;
  --hold: 0px;
  --hu: var(--u);
}

/* Высота окна под сплошной шапкой — по ней сериал занимает ровно экран (правки 2026-11-02). */
.page {
  --bar-h: calc(80 * var(--u)); /* сплошная шапка, .topbar.is-solid */
  --view-h: calc(100vh - var(--bar-h));
}
@supports (height: 100svh) {
  .page { --view-h: calc(100svh - var(--bar-h)); }
}
.static-layout .page { --view-h: calc(856 * var(--u)); } /* ?static: сериал 920, как в макете */

/* Экран + путь анимации + пауза + ещё экран, пока на него наезжает сериал (как на телефоне). */
.hero {
  --u: var(--hu);
  position: relative;
  z-index: 1;
  height: calc(var(--screen-h) * 2 + var(--scrub-h) + var(--hold));
  background: var(--blue);
}
.series { margin-top: calc(-1 * var(--screen-h) - var(--sec-r)); }

.hero__screen {
  position: sticky;
  top: 0;
  height: var(--screen-h);
  overflow: hidden;
  background: var(--blue);
}

/* Анимация — во весь экран, как на телефоне, только кадр горизонтальный 1920×1080
   (`/video/hero-wide/frames/`, landing.js выбирает набор по ширине). Заказчик 2026-10-28:
   карточка посреди постерной композиции — «неэффектно и намешано, будто видео тут вообще
   лишнее». Теперь первый экран — сам ролик, а текст лежит на нём. */
.hero__poster,
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}
.hero__canvas { opacity: 0; transition: opacity 0.2s ease; }
.hero__canvas.is-ready { opacity: 1; }

/* Низ кадра уходит в синий — на этой растяжке лежит текст. Не сплошная заливка: лабиринт
   просвечивает сквозь неё, поэтому надпись читается, а кадр не обрезан. */
.hero__veil {
  position: absolute;
  inset: auto 0 0;
  height: calc(560 * var(--u));
  background: linear-gradient(180deg,
    rgb(0 119 255 / 0) 0,
    rgb(0 119 255 / 0.42) 24%,
    rgb(0 119 255 / 0.8) 52%,
    rgb(0 119 255 / 0.94) 100%);
}

.hero__scrub { height: var(--scrub-h); }

/* Текст и бейджи стоят вместе с экраном до самого конца героя: сериал наезжает на всё сразу. */
.hero__front {
  position: absolute;
  z-index: 1;
  inset: 0 0 auto;
  height: 100%;
  pointer-events: none;
}
/* Обрезка прямоугольная, без скругления — дешёвая: за край не вылезают надпись и бейджи. */
.hero__front-screen {
  position: sticky;
  top: 0;
  height: var(--screen-h);
  overflow: hidden;
}

/* Текст — одним блоком по центру внизу, на синей растяжке: заголовок, подпись, кнопки.
   Всё на одной оси, ничего не наложено на сам кадр. */
.hero__copy {
  position: absolute;
  left: 50%;
  bottom: calc(44 * var(--u));
  translate: -50% 0;
  width: calc(1312 * var(--u));
  text-align: center;
}

/* Мягкая тень — чтобы белая надпись держалась и на светлых местах кадра (белый пол
   лабиринта в финале), не затемняя растяжкой весь низ экрана. */
/* Оба слова — одним кеглем и одним начертанием, как на телефоне (правки заказчика 2026-10-28).
   Строчной разрядки из макета больше нет: в VK Sans Display Condensed Black Italic нет
   строчных, и «возможностей» подхватывал другой шрифт — отсюда и ощущение, что на экране
   намешаны разные гарнитуры. */
.hero__title {
  margin: 0;
  white-space: nowrap;
  font-size: calc(160 * var(--u));
  line-height: 0.82;
  letter-spacing: -0.04em;
  color: #fff;
  text-shadow: 0 calc(8 * var(--u)) calc(36 * var(--u)) rgb(0 40 110 / 0.3);
}
.hero__title i { display: block; }

/* Подпись — в одну строку под заголовком (перенос из разметки нужен только телефону),
   фирменным VK Sans Display, как на телефоне: отдельного шрифта под неё больше нет. */
.hero__lead {
  margin: calc(20 * var(--u)) 0 0;
  font-size: calc(26 * var(--u));
  line-height: 1.35;
  color: #fff;
}
.hero__lead br { display: none; }
.hero__lead b { font-weight: 400; } /* как на телефоне: «свой» без выделения */

/* Кнопка и трейлер — строкой по центру под подписью. */
.hero__actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(20 * var(--u));
  margin-top: calc(28 * var(--u));
  pointer-events: auto;
}
.cta--hero {
  width: calc(324 * var(--u));
  padding: calc(22 * var(--u)) calc(22 * var(--u));
  background: #fff;
  color: var(--blue);
}
/* Кнопка первого экрана при наведении не поднимается (правки заказчика 2026-11-02) — только стрелка. */
.cta--hero:hover { transform: none; }
.cta--hero .cta__label { font-size: calc(25 * var(--u)); }
/* Кнопка белая на синей растяжке — стрелка в своих цветах (синий кружок, белая стрелка). */
.cta--hero .cta__arrow { width: calc(34 * var(--u)); height: calc(34 * var(--u)); }

/* Трейлер — рядом с кнопкой, текстом в одну строку: подпись на синем белая. */
.hero__trailer {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  color: #fff;
  font-weight: 500;
  font-size: max(calc(17 * var(--u)), 13px);
  line-height: 1.25;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
}
.hero__trailer br { display: none; }
.hero__play {
  position: relative;
  flex: none;
  width: calc(64 * var(--u));
  height: calc(64 * var(--u));
  border: 1.5px solid rgb(255 255 255 / 0.5);
  border-radius: 50%;
  background: rgb(255 255 255 / 0.18);
  transition: transform 0.25s ease;
}
.hero__play::before {
  content: '';
  position: absolute;
  inset: calc(11 * var(--u));
  border-radius: 50%;
  background: #fff;
}
.hero__play::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(14 * var(--u));
  height: calc(16 * var(--u));
  translate: -35% -50%;
  background: var(--blue);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  border-radius: 2px;
}
.hero__trailer:hover .hero__play { transform: scale(1.06); }

/* ---------- сериал ---------- */

/* Скругление — у самих слоёв, без overflow на блоке: обрезка предка играющего
   видео в Safari пересчитывается на каждом кадре. */
/* Ровно окно под шапкой (правки заказчика 2026-11-02): снизу на --sec-r наезжают сезоны.
   Видео — cover, текст и плеер привязаны к низу блока, иконки — к верху. */
.series {
  height: calc(var(--view-h) + var(--sec-r));
  background: var(--blue);
}
.series__media { position: absolute; inset: 0; border-radius: inherit; }
.series__blur { display: none; }
.series__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
/* Тизер на весь экран: в блоке не виден; в полноэкранном режиме — целиком, на чёрном
   (на iPhone его показывает системный плеер, CSS там не действует). */
.series__teaser {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.series__teaser:fullscreen { width: 100%; height: 100%; opacity: 1; object-fit: contain; background: #000; }
.series__teaser:-webkit-full-screen { width: 100%; height: 100%; opacity: 1; object-fit: contain; background: #000; }
.series__shade {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgb(0 13 51 / 0.45) 0%, rgb(0 13 51 / 0) calc(220 * var(--u))),
    /* синева под текстом — от низа блока (в макете 300 и 641 из 920 от верха) */
    linear-gradient(180deg, rgb(0 119 255 / 0) calc(100% - 620 * var(--u)), rgb(0 102 242 / 0.78) calc(100% - 279 * var(--u)), rgb(0 97 235 / 0.96) 100%),
    linear-gradient(90deg, rgb(0 51 153 / 0.45) 0%, rgb(0 51 153 / 0) calc(900 * var(--u)));
}

.series__ico {
  position: absolute;
  z-index: 1;
  top: calc(56 * var(--u));
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  line-height: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.series__ico img { width: calc(32 * var(--u)); height: calc(32 * var(--u)); min-width: 24px; min-height: 24px; }
.series__ico:hover { transform: scale(1.1); }
.series__ico--sound { left: calc(64 * var(--u)); }
.series__ico--sound[aria-pressed="false"] img { opacity: 0.75; }
.series__ico--expand { right: calc(64 * var(--u)); }

.series__copy {
  position: absolute;
  z-index: 1;
  left: calc(64 * var(--u));
  right: calc(64 * var(--u));
  bottom: calc(var(--sec-r) + 96 * var(--u)); /* в макете 160 от низа блока 920 */
  display: grid;
  grid-template-columns: calc(744 * var(--u)) calc(465 * var(--u));
  justify-content: space-between;
  align-items: end;
}
/* Стеклянная плашка, как «1 серия» в маркетинговых макетах (правки 2026-10-28:
   «теряется — акцентнее, с эффектом стекла»). Стекло — градиенты и тени, без
   backdrop-filter: плашка лежит на играющем видео (см. landing.css). */
.series__tag {
  grid-column: 1;
  justify-self: start;
  margin-bottom: calc(26 * var(--u));
  padding: calc(14 * var(--u)) calc(30 * var(--u)) calc(13 * var(--u));
  border-radius: 100px;
  /* Плоский яркий стикер, ровно, без объёма и эффектов (правки заказчика 2026-10-29). Маджента —
     та же, что у бейджа DEV (public/img/desk/promo-dev.webp), чтобы не заводить новый цвет. */
  background: #f8309c;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: max(calc(30 * var(--u)), 20px);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}
.series__title {
  grid-column: 1;
  font-size: calc(84 * var(--u));
  line-height: 0.92; /* правки 2026-10-29: интерлиньяж заголовков меньше (было 88/84) */
  color: #fff;
}
.series__text {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-size: max(calc(22.5 * var(--u)), 16px);
  line-height: 1.33;
  color: #fff;
}

.series__player {
  position: absolute;
  z-index: 1;
  left: calc(64 * var(--u));
  right: calc(64 * var(--u));
  bottom: calc(var(--sec-r) + 32 * var(--u)); /* в макете top 800 из 920 */
  height: calc(24 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(20 * var(--u));
}
.series__toggle {
  position: relative;
  flex: none;
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
  min-width: 20px;
  min-height: 20px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
/* Значок — пауза (две полосы), на паузе — треугольник «смотреть». */
.series__toggle::before {
  content: '';
  position: absolute;
  inset: 18% 22%;
  background: linear-gradient(90deg, #fff 0 34%, transparent 34% 66%, #fff 66%);
}
.series__toggle[aria-pressed="true"]::before {
  inset: 16% 18% 16% 26%;
  background: #fff;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.series__bar {
  --done: 0;
  position: relative;
  flex: 1;
  height: calc(24 * var(--u));
  cursor: pointer;
}
.series__bar::before,
.series__done {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
}
.series__bar::before { right: 0; background: rgb(255 255 255 / 0.4); }
/* Прогресс двигаем transform, а не width (2026-11-02): переход ширины пересчитывал раскладку
   на каждом кадре, пока играет ролик. Заливка — во всю ширину, сжата scaleX до доли --done;
   точка — отдельный слой во всю ширину полосы со своим кружком у левого края, сдвинутый на ту
   же долю (translate в % — от собственной ширины, то есть от ширины полосы). */
.series__done {
  width: 100%;
  background: #fff;
  transform: scaleX(var(--done));
  transform-origin: 0 50%;
  transition: transform 0.3s linear;
}
.series__bar::after {
  --dot: max(calc(12 * var(--u)), 10px);
  content: '';
  position: absolute;
  left: calc(var(--dot) / -2); /* центр кружка — ровно в начале полосы */
  top: 50%;
  width: 100%;
  height: var(--dot);
  margin-top: calc(var(--dot) / -2);
  transform: translateX(calc(var(--done) * 100%));
  transition: transform 0.3s linear;
  background: radial-gradient(circle closest-side, #fff 96%, rgb(255 255 255 / 0)) no-repeat
    0 0 / var(--dot) var(--dot);
  pointer-events: none;
}

/* ---------- 3 сезона ---------- */
/* Все три сезона сразу, карточками в ряд (на телефоне — гармошка по прокрутке). */

.seasons {
  padding: calc(112 * var(--u)) calc(64 * var(--u)) calc(176 * var(--u));
  background: var(--snow);
}
.seasons__title {
  font-size: calc(156 * var(--u));
  line-height: 0.8;
  text-align: center;
}
.seasons__title i { color: var(--blue); }

.seasons__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(24 * var(--u));
  margin-top: calc(107 * var(--u));
}

.season {
  position: relative;
  min-height: calc(692 * var(--u));
  padding: calc(120 * var(--u)) calc(36 * var(--u)) calc(40 * var(--u));
  border-radius: calc(64 * var(--u));
  background: linear-gradient(180deg, #fff 0%, #d6e8ff 100%);
  box-shadow: 0 16px 40px -8px rgb(26 64 128 / 0.08);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
  --line: rgb(0 0 0 / 0.1);
  --num: var(--blue);
  --muted: #2c2d2e;
}
.season:nth-child(2) {
  background: var(--blue);
  box-shadow: 0 24px 48px -8px rgb(0 77 229 / 0.28);
  color: #fff;
  --line: rgb(255 255 255 / 0.32);
  --num: #fff;
  --muted: #fff; /* белый на синем, а не голубой (правки 2026-10-28) */
}
.season:nth-child(3) { background: linear-gradient(180deg, #fff 0%, #d4f6fa 100%); }
.season:hover { transform: translateY(-6px); }

.season__head {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: calc(60 * var(--u));
  line-height: 1;
  text-align: left;
  pointer-events: none; /* на широком экране сезоны не сворачиваются */
}
.season__panel,
.season__inner { display: contents; }

/* Стикер направления — посередине карточки (правки заказчика 2026-11-02; был у правого края). */
.season__art {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  top: calc(-102 * var(--u));
  width: calc(193 * var(--u));
  height: calc(193 * var(--u));
  filter: drop-shadow(0 18px 14px rgb(0 46 140 / 0.28));
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.season:hover .season__art { transform: rotate(-6deg) scale(1.05); }

.steps {
  display: grid;
  gap: calc(24 * var(--u));
  margin-top: calc(32 * var(--u));
}
.step {
  display: grid;
  grid-template-columns: calc(36 * var(--u)) 1fr;
  align-items: center;
  column-gap: calc(12 * var(--u));
  row-gap: calc(12 * var(--u));
}
.step + .step {
  padding-top: calc(24 * var(--u));
  border-top: 1px solid var(--line);
}
.step__num {
  display: grid;
  place-items: center;
  width: calc(36 * var(--u));
  height: calc(36 * var(--u));
  border: 2px solid var(--num);
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(18 * var(--u));
  color: inherit;
}
.season:not(:nth-child(2)) .step__num { color: var(--blue); }
.step__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(24 * var(--u));
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.step__text {
  grid-column: 1 / -1;
  font-size: max(calc(20 * var(--u)), 15px); /* крупнее макета (правки 2026-10-28) */
  line-height: 1.35;
  color: var(--muted);
}

/* ---------- итог курса ---------- */
/* Надзаголовок «Итог курса» из макета убран по комментарию заказчика.
   Маршрут — не картинка из макета, а тот же стеклянный, что на телефоне (комментарий
   заказчика 2026-10-27: «такие же пути, генеративные»): рендер nano-banana-pro по чертежу
   пути, та же геометрия 420×232 ед. и те же места бейджей, только крупнее — единица
   маршрута --s. Раскладка из макета: стенка уходит за левый край и вниз у правого, текст
   с кнопкой — в «долине» между AI и PRODUCT над DEV; середина долины между стёклами стенок
   (x = 204.5 ед.) — по центру блока.
   overflow у блока нет: обрезку со скруглением над тем, что меняется каждый кадр, Safari
   пересчитывает на каждом кадре. Вылеты по бокам режет .page, низ накрывает карта вузов. */

.outcome {
  height: calc(844 * var(--u));
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* текст с кнопкой — посередине между верхом бейджей AI/PRODUCT и верхом DEV */
  padding-top: calc(160 * var(--u));
}
.outcome-desk {
  --s: calc(3.78 * var(--u)); /* единица маршрута: 420 ед. ≈ 1588 макетных px */
  --edge: 42; /* мягкий край краски, ед. (как размытие маски на телефоне) */
  position: absolute;
  left: calc(50% - 204.5 * var(--s));
  top: calc(60 * var(--u));
  width: calc(420 * var(--s));
  height: calc(232 * var(--s));
  pointer-events: none;
}
.outcome-desk__glass {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}
/* Бейджи — места и размер те же, что на телефоне (.route__dot--*), в единицах маршрута;
   --cx — середина бейджа по x. */
.outcome-desk__dot {
  position: absolute;
  width: calc(95 * var(--s));
  height: calc(95 * var(--s));
}
.outcome-desk__dot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* --t0 — доля прохода краски, на которой её край доходит до левой половины бейджа: та же
   геометрия, что была у краски по прокрутке (край 42 ед., путь 420 + 42 ед.). */
.outcome-desk__dot--ai { left: calc(19 * var(--s)); top: 0; --t0: 0.08; }
.outcome-desk__dot--dev { left: calc(159 * var(--s)); top: calc(101 * var(--s)); --t0: 0.385; }
.outcome-desk__dot--product { left: calc(289 * var(--s)); top: 0; --t0: 0.665; }
.outcome-desk__veil,
.outcome-desk__idle { display: none; }

/* Краска идёт за прокруткой, как на телефоне (правки заказчика 2026-10-29: «нет анимации
   появления при скроле, как на мобилке» — до этого здесь был разовый проход по времени, и
   он успевал закончиться, пока блок въезжал). Прогресс --mp (0…1) пишет landing-desktop.js:
   от «верх маршрута на 90 % окна» до «на 15 %». К концу хода вверху в кадре AI и PRODUCT,
   ниже DEV — все уже цветные (PRODUCT загорается на ~70 % хода).
   .is-scrolly ставит скрипт; без него, при prefers-reduced-motion и ?static — маршрут целиком.
   Как на телефоне, непройденная часть — то же стекло на opacity .4, а на белом фоне это
   ровно белая вуаль 60 % поверх стенки. Вуаль уезжает вправо — только transform, мягкий
   край — градиент; ни масок, ни фильтров. Бейдж — бледная копия под цветным
   (badge-<id>-idle, scripts/build-badge-idle.mjs), меняется только прозрачность: --o — насколько
   краска прошла этот бейдж, та же формула, что у .route__dot на телефоне. */
.outcome-desk.is-scrolly .outcome-desk__veil {
  display: block;
  position: absolute;
  top: calc(30 * var(--s)); /* выше стекла нет; в скруглённые углы блока вуаль не заходит */
  bottom: 0;
  left: 0;
  width: calc(100% + var(--edge) * var(--s));
  background: linear-gradient(90deg, rgb(255 255 255 / 0), rgb(255 255 255 / 0.6) calc(var(--edge) * var(--s)));
  transform: translateX(calc(var(--mp, 0) * 100% - var(--edge) * var(--s)));
}
.outcome-desk.is-scrolly .outcome-desk__dot {
  --o: clamp(0, (var(--mp, 0) - var(--t0)) / 0.09, 1);
}
.outcome-desk.is-scrolly .outcome-desk__idle {
  display: block;
  opacity: calc(0.5 * (1 - var(--o)) * (1 - var(--o)));
}
.outcome-desk.is-scrolly .outcome-desk__dot img:not(.outcome-desk__idle) { opacity: var(--o); }

.outcome__text {
  position: relative;
  z-index: 1;
  width: calc(440 * var(--u));
  font-weight: 500;
  font-size: calc(30 * var(--u));
  line-height: calc(38 * var(--u));
  letter-spacing: -0.01em;
  text-align: center;
}
.outcome__text b { font-weight: 500; color: var(--blue); }
.outcome .btn { position: relative; z-index: 1; margin-top: calc(18 * var(--u)); }

/* Шире 1920 страница стоит по центру, и белый блок сливается с белыми полями — стенка
   обрывалась бы посреди белого на краю страницы. Там её края растворяются: статичный
   градиент над маршрутом, под текстом (z-index 1); до бейджей (их край — от 63 макетных px)
   он не достаёт, в скруглённые углы блока не заходит. */
@container (min-width: 1921px) {
  .outcome::after {
    content: '';
    position: absolute;
    inset: var(--sec-r) 0 0;
    pointer-events: none;
    background: linear-gradient(90deg, #fff, rgb(255 255 255 / 0) calc(48 * var(--u)),
      rgb(255 255 255 / 0) calc(100% - 48 * var(--u)), #fff);
  }
}

/* ---------- Дни VK в вузах ---------- */

.campus {
  height: calc(1238 * var(--u));
  padding: calc(108 * var(--u)) calc(64 * var(--u)) 0;
  background: var(--snow);
}
.campus__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.campus__title {
  font-size: calc(119.6 * var(--u));
  line-height: 0.92; /* правки 2026-10-29: интерлиньяж заголовков меньше (было 1.04) */
  color: var(--blue);
  white-space: nowrap;
}
.campus__text {
  width: calc(484 * var(--u));
  margin-top: calc(4 * var(--u));
  font-size: max(calc(20.8 * var(--u)), 15px);
  line-height: 1.375;
}
.campus__text br { display: none; }
.campus__text b { font-weight: 400; color: var(--blue); }

/* Карта: координаты — из макета, от верха карты (y = 327 в секции). */
.campus-desk {
  position: absolute;
  left: 0;
  top: calc(327 * var(--u));
  width: 100%;
  height: calc(800 * var(--u));
}
/* Маршрут — стеклянная стенка, как на телефоне: картинка из рендера трассы
   (scripts/build-campus-desk-route.mjs), тень на полу уже в ней — ни маски, ни
   filter. Окно картинки — 1440×560 от y = 252; верхний пробег стенки — на
   y = 285.2, нижний — на 725.2 (точки платформ зданий, см. .stop__img), поворот —
   на x = 1392. Лежит под зданиями, карточками и сводкой (у них z-index). */
.campus-desk__route {
  position: absolute;
  left: 0;
  top: calc(252 * var(--u));
  width: 100%;
  max-width: none;
  height: auto;
}
/* Шарик стоит на верхнем пробеге между ВШЭ и ИТМО: центр — на оси стенки
   (720; 285.2), как на телефоне. Крупнее телефонной пропорции (там 26 к 22),
   чтобы на широком экране читался, но лежит на стенке, а не накрывает её. */
.campus-desk__ball {
  position: absolute;
  z-index: 2;
  left: calc(698 * var(--u));
  top: calc(263.2 * var(--u));
  width: calc(44 * var(--u));
  height: calc(44 * var(--u));
  filter: drop-shadow(0 calc(4 * var(--u)) calc(6 * var(--u)) rgb(20 60 140 / 0.35));
}

/* Высота площадки — карточка и приколотое под ней здание (115 + 230): иначе коробка
   была бы только карточкой, и появление по прокрутке (landing-desktop.js смотрит на
   .stop) не видело здание, а при переходе мыши с карточки на здание пропадал :hover. */
.stop {
  position: absolute;
  z-index: 1;
  top: 0;
  width: calc(300 * var(--u));
  height: calc(345 * var(--u));
}
.stop--1 { left: calc(78 * var(--u)); }
.stop--2 { left: calc(406 * var(--u)); }
.stop--3 { left: calc(734 * var(--u)); }
.stop--4 { left: calc(1062 * var(--u)); }
/* МГТУ и МГУ на нижнем пробеге — в порядке дат слева направо (правки 2026-10-28, 2026-11-05). */
.stop--5 { left: calc(734 * var(--u)); top: calc(440 * var(--u)); }
.stop--6 { left: calc(1062 * var(--u)); top: calc(440 * var(--u)); }

.stop__card {
  position: relative;
  display: grid;
  gap: calc(10 * var(--u));
  padding: calc(18 * var(--u)) calc(20 * var(--u));
  border-radius: calc(24 * var(--u));
  background: #fff;
  box-shadow: 0 12px 32px -6px rgb(13 51 128 / 0.1);
  transition: transform 0.3s ease;
}
/* Хвостик — к зданию. */
.stop__card::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  width: calc(20 * var(--u));
  height: calc(11 * var(--u));
  translate: -50% -1px;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.stop:hover .stop__card { transform: translateY(-4px); }
.stop__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: calc(8 * var(--u));
}
/* Длинное название (МГУ им. М. В. Ломоносова) — своей строкой, дата под ним; карточка
   растёт вверх, а не на здание: здание приколото к маршруту (.stop__img). */
.stop.is-long .stop__date { flex-basis: 100%; }
.stop.is-long .stop__card { position: absolute; left: 0; right: 0; bottom: calc(100% - 104 * var(--u)); }
.stop__name {
  padding: calc(5 * var(--u)) calc(12 * var(--u));
  border: 2px solid var(--blue);
  border-radius: 100px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: max(calc(16 * var(--u)), 12px);
  line-height: 1.125;
  text-transform: uppercase;
  color: var(--blue);
  white-space: nowrap;
}
/* Ближайшая площадка — бейдж закрашен (landing.js, по дате). */
.stop.is-next .stop__name { background: var(--blue); color: #fff; }
.stop__date {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: calc(30 * var(--u));
  line-height: 1;
  white-space: nowrap;
}
.stop__address {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: max(calc(14 * var(--u)), 11px);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--grey);
}
/* У рендеров зданий прозрачные поля — картинка шире ячейки, чтобы здание
   было того же размера, что в макете. Здание приколото к маршруту, а не
   стоит под карточкой: верх картинки — 115 от верха площадки при любой высоте
   карточки (на 1024 мелкий текст не уменьшается, и карточка выше), центр
   платформы (0.74 высоты, как на телефоне) — ровно на стенке маршрута. */
.stop__img {
  position: absolute;
  left: calc(-30 * var(--u));
  top: calc(115 * var(--u));
  width: calc(360 * var(--u));
  max-width: none;
  height: calc(230 * var(--u));
  object-fit: contain;
  object-position: 50% 100%;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.stop:hover .stop__img { transform: translateY(-6px); }

/* Сводка в конце маршрута. Шесть площадок вместо семи в макете: порядок и
   состав — по комментарию заказчика; «на маршруте» убрано по комментарию. */
.campus-desk__sum {
  position: absolute;
  z-index: 1;
  left: calc(78 * var(--u));
  top: calc(413 * var(--u));
  width: calc(628 * var(--u));
  height: calc(350 * var(--u));
  padding: calc(28 * var(--u));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: calc(32 * var(--u));
  background: var(--blue);
  box-shadow: 0 20px 40px -8px rgb(0 77 229 / 0.28);
  color: #fff;
}
.campus-desk__count {
  display: flex;
  align-items: flex-end;
  gap: calc(12 * var(--u));
}
.campus-desk__count b {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: calc(150 * var(--u));
  line-height: calc(128 * var(--u));
}
.campus-desk__count span {
  padding-bottom: calc(8 * var(--u));
  font-weight: 500;
  font-size: calc(22 * var(--u));
  line-height: 1.18;
}
/* Графика вместо повтора дат (правки заказчика 2026-10-29: «вместо повтора дат слева —
   какую-то графику»; до этого справа от «6 вузов» стояли площадки с датами — те же, что на
   маршруте). Хромированный шар со стикерами AI/DEV/PRODUCT — финиш маршрута: выступает за
   верх карточки и слегка покачивается (только transform). */
.campus-desk__art {
  position: absolute;
  top: calc(-44 * var(--u));
  right: calc(22 * var(--u));
  width: calc(300 * var(--u));
  height: auto;
  max-width: none; /* без filter: он пересчитывался бы на каждом кадре покачивания */
}
@media (prefers-reduced-motion: no-preference) {
  .campus-desk__art { --tilt: -2deg; animation: promo-float 7s ease-in-out infinite; }
  /* блок далеко от окна (.is-away, landing.js) — анимация на паузе: не пересчитывается зря */
  .is-away .campus-desk__art { animation-play-state: paused; }
}
/* Линия над датами — только под левой частью: справа над ней шар. */
.campus-desk__dates {
  margin-right: calc(290 * var(--u));
  display: grid;
  gap: calc(10 * var(--u));
  padding-top: calc(10 * var(--u));
  border-top: 1px solid rgb(255 255 255 / 0.32);
  font-size: max(calc(17 * var(--u)), 13px);
  line-height: 1.3;
  color: var(--ice);
}
.campus-desk__range {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: calc(40 * var(--u));
  line-height: 1.1;
  color: #fff;
}

/* ---------- VK MidSprint ---------- */

@property --p {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

/* Сеткой: сверху во всю ширину — врезка-мостик (на телефоне она была, здесь её не было —
   правки 2026-10-28), ниже слева текст, шкала и пункты, справа пропуск. */
.midsprint {
  display: grid;
  grid-template-columns: 1fr calc(656 * var(--u));
  grid-template-rows: auto auto auto auto auto 1fr;
  column-gap: calc(64 * var(--u));
  align-items: start;
  padding: calc(112 * var(--u)) calc(64 * var(--u)) calc(64 * var(--u) + var(--sec-r));
  background: #fff;
}
.midsprint > * { grid-column: 1; }

.pullout {
  grid-column: 1 / -1;
  margin-bottom: calc(80 * var(--u));
  padding-bottom: calc(56 * var(--u));
  border-bottom: 1px solid rgb(0 119 255 / 0.18);
  font-size: calc(52 * var(--u));
  line-height: 1.15;
  letter-spacing: -0.02em;
  max-width: calc(1100 * var(--u));
  text-wrap: balance;
}
.pullout b { font-weight: 400; color: var(--blue); }
.midsprint__title {
  font-size: calc(101.2 * var(--u));
  line-height: 0.7;
  padding-top: calc(6 * var(--u));
}
.midsprint__title i { color: var(--blue); }
.midsprint__text {
  width: calc(502 * var(--u));
  margin-top: calc(34 * var(--u));
  font-size: max(calc(21.6 * var(--u)), 15px);
  line-height: 1.375;
}
.midsprint__text br { display: none; }

.progress {
  display: flex;
  align-items: center;
  gap: calc(12.4 * var(--u));
  width: calc(576.6 * var(--u));
  margin-top: calc(36 * var(--u));
  transition: --p 0.7s cubic-bezier(0.34, 1.3, 0.64, 1);
}
.progress__cap {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: calc(27.9 * var(--u));
  line-height: 1.11;
  text-transform: uppercase;
  transition: color 0.3s ease;
}
.progress.is-done .progress__cap--goal { color: var(--blue); }
.progress__track {
  --ball: calc(44 * var(--u));
  position: relative;
  flex: 1;
  height: calc(29.45 * var(--u));
  border-radius: 100px;
  background: var(--snow);
}
.progress__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--ball) + var(--p) * (100% - var(--ball)));
  border-radius: inherit;
  background: var(--blue);
}
.progress__ball {
  position: absolute;
  top: 50%;
  left: calc(var(--p) * (100% - var(--ball)));
  width: var(--ball);
  height: auto;
  translate: 0 -50%;
  rotate: calc(var(--p) * 720deg);
}

.perks {
  display: grid;
  gap: calc(13.5 * var(--u));
  width: calc(402 * var(--u));
  margin-top: calc(28 * var(--u));
}
.perk {
  display: flex;
  align-items: center;
  gap: calc(13 * var(--u));
  width: 100%;
  padding: calc(13 * var(--u));
  border: 0;
  border-radius: 100px;
  background: var(--snow);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
}
.perk:hover { transform: translateX(4px); }
.perk[aria-pressed="true"] { background: var(--blue); color: #fff; }
.perk__ico {
  flex: none;
  width: calc(30.24 * var(--u));
  height: calc(30.24 * var(--u));
  background: var(--blue);
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
}
.perk[aria-pressed="true"] .perk__ico { background: #fff; }
.perk__label {
  flex: 1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(25.92 * var(--u));
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.perk__mark {
  flex: none;
  width: calc(30.24 * var(--u));
  height: calc(30.24 * var(--u));
  background: url('data:image/svg+xml,%3Csvg width=%2228%22 height=%2228%22 viewBox=%220 0 28 28%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E %3Cpath d=%22M14 2C20.627 2 26 7.373 26 14C26 20.627 20.627 26 14 26C7.373 26 2 20.627 2 14C2 7.373 7.373 2 14 2ZM14 4C8.477 4 4 8.477 4 14C4 19.523 8.477 24 14 24C19.523 24 24 19.523 24 14C24 8.477 19.523 4 14 4Z%22 fill=%22%230077FF%22/%3E %3C/svg%3E') center / contain no-repeat;
}
.perk[aria-pressed="true"] .perk__mark { background-image: url('data:image/svg+xml,%3Csvg width=%2228%22 height=%2228%22 viewBox=%220 0 28 28%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E %3Cpath fill-rule=%22evenodd%22 clip-rule=%22evenodd%22 d=%22M14 26C20.627 26 26 20.627 26 14C26 7.373 20.627 2 14 2C7.373 2 2 7.373 2 14C2 20.627 7.373 26 14 26ZM20.207 11.207C20.3892 11.0184 20.49 10.7658 20.4877 10.5036C20.4854 10.2414 20.3802 9.99059 20.1948 9.80518C20.0094 9.61977 19.7586 9.5146 19.4964 9.51233C19.2342 9.51005 18.9816 9.61084 18.793 9.793L12 16.586L9.207 13.793C9.0184 13.6108 8.7658 13.51 8.5036 13.5123C8.2414 13.5146 7.99059 13.6198 7.80518 13.8052C7.61977 13.9906 7.5146 14.2414 7.51233 14.5036C7.51005 14.7658 7.61084 15.0184 7.793 15.207L11.293 18.707C11.4805 18.8945 11.7348 18.9998 12 18.9998C12.2652 18.9998 12.5195 18.8945 12.707 18.707L20.207 11.207Z%22 fill=%22white%22/%3E %3C/svg%3E'); }

/* Отступ от пунктов: выбранные синие пункты сливались с синей кнопкой (правки 2026-10-28). */
.midsprint .btn { justify-self: start; margin-top: calc(40 * var(--u)); }

/* Карточка с пропуском (scripts/build-midsprint-pass.mjs): карточка 656×617 и скругление уже
   в картинке, а сама картинка — рамка пропуска 656×664: низ пропуска выступает за карточку,
   как в макете (Figma «Маркетинг VK Education | 2026», 28303:13404). Не обрезать. */
.midsprint__art {
  grid-column: 2;
  grid-row: 2 / -1;
  width: calc(656 * var(--u));
  height: calc(664 * var(--u));
  max-width: none;
}

/* ---------- VK Education ---------- */

/* Без overflow: картинки справа помещаются в блок целиком, а обрезка со скруглением над
   покачивающимися картинками в Safari пересчитывалась бы на каждом кадре. */
.promo {
  height: calc(880 * var(--u)); /* запас под соцсетями: следующий блок в них не врезается (правки 2026-10-28) */
  padding: calc(124 * var(--u)) calc(64 * var(--u)) 0;
  background: var(--blue);
  color: #fff;
}
/* Справа — не фото лабиринта, а 3D-ассеты из маркетингового макета (заказчик 2026-10-27:
   «хочется более крутую картинку»; на телефоне — те же, сверху блока): связка стеклянных
   бейджей, как на постере «Постер 9» (места — оттуда, ×0.64), или хромированный шар со
   стикерами (html[data-promo="ball"], скрипт в <head> по ?promo=ball). Лежат прямо на синем,
   без карточки; слегка покачиваются — только transform, у каждого свой период. */
.promo__art {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.promo__art img {
  position: absolute;
  max-width: none;
  height: auto;
}
.promo__badge--ai { left: calc(640 * var(--u)); top: calc(158 * var(--u)); width: calc(364 * var(--u)); }
.promo__badge--dev { left: calc(1050 * var(--u)); top: calc(74 * var(--u)); width: calc(375 * var(--u)); }
.promo__badge--product { left: calc(899 * var(--u)); top: calc(343 * var(--u)); width: calc(414 * var(--u)); }
.promo__ball { display: none; left: calc(700 * var(--u)); top: calc(70 * var(--u)); width: calc(720 * var(--u)); }
[data-promo="ball"] .promo__badge { display: none; }
[data-promo="ball"] .promo__ball { display: block; }

@keyframes promo-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(calc(-14 * var(--u))) rotate(var(--tilt, 0deg)); }
}
@media (prefers-reduced-motion: no-preference) {
  .promo__art img { animation: promo-float 7s ease-in-out infinite; }
  .is-away .promo__art img { animation-play-state: paused; } /* вдали от окна (landing.js) */
  .promo__badge--ai { --tilt: -2deg; animation-duration: 7.5s; }
  .promo__badge--dev { --tilt: 2deg; animation-duration: 6.4s; animation-delay: -2.1s; }
  .promo__badge--product { --tilt: 1.5deg; animation-duration: 8.2s; animation-delay: -4.6s; }
  .promo__ball { animation-duration: 9s; }
}
.promo__title {
  position: relative;
  font-size: calc(97.3 * var(--u));
  line-height: 0.7;
  padding-top: calc(6 * var(--u));
}
.promo__text {
  position: relative;
  display: grid;
  gap: calc(16 * var(--u));
  width: calc(502 * var(--u));
  margin-top: calc(38 * var(--u));
  font-size: max(calc(24.3 * var(--u)), 16px);
  line-height: 1.333;
}
.promo .cta {
  position: relative;
  width: calc(502 * var(--u));
  margin-top: calc(44 * var(--u));
  padding: calc(37.8 * var(--u)) calc(32.4 * var(--u));
  border-radius: calc(43.2 * var(--u));
  gap: calc(21.6 * var(--u));
}
.promo .cta__label { font-size: calc(37.8 * var(--u)); }
.promo .cta__arrow { width: calc(54 * var(--u)); height: calc(54 * var(--u)); }

.socials {
  position: relative;
  display: flex;
  width: calc(502.2 * var(--u)); /* по ширине кнопки «Начать учиться» над ними */
  gap: calc(16.2 * var(--u));
  margin-top: calc(16.2 * var(--u));
}
/* Плашка-таблетка: полноценный логотип (знак + надпись) слева, стрелка справа — как в
   референсе заказчика (правки 2026-10-29). Ширина — по логотипу, «вконтакте» длиннее. */
.social {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: space-between;
  gap: calc(16 * var(--u));
  height: calc(76 * var(--u));
  padding: 0 calc(22 * var(--u)) 0 calc(26 * var(--u));
  border-radius: 100px;
  background: rgb(255 255 255 / 0.12);
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.social:hover { background: rgb(255 255 255 / 0.22); }
.social__logo { width: auto; height: calc(28 * var(--u)); }
.social__arrow {
  flex: none;
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
  transition: transform 0.25s ease;
}
.social:hover .social__arrow { transform: translate(3px, -3px); }

/* ---------- вопросы и ответы ---------- */

.logo-scene {
  min-height: calc(860 * var(--u));
  padding: calc(112 * var(--u)) calc(64 * var(--u)) calc(168 * var(--u));
  background: var(--snow);
}
.faq {
  display: grid;
  grid-template-columns: calc(560 * var(--u)) calc(688 * var(--u));
  justify-content: space-between;
  column-gap: calc(64 * var(--u));
}
.faq__title {
  font-size: calc(110.4 * var(--u));
  line-height: 0.92; /* правки 2026-10-29: интерлиньяж заголовков меньше (было 1.04) */
}
.faq__title i { color: var(--blue); } /* как на телефоне (правки 2026-10-28) */

/* Логотип из шариков — отдельной сценой под вопросами, как на телефоне и как первый экран:
   окно прилипает, и прокрутка собирает шарики в крупный логотип VK по центру (landing.js).
   Раньше он стоял в углу под заголовком вопросов и собирался за полэкрана прокрутки — «очень
   быстро, скомпоновано в углу, как второстепенный элемент» (правки заказчика 2026-10-29).
   Фон кадров перекрашен в цвет секции (scripts/build-logo-frames.mjs) — рамки не видно, края
   кадра растворены на самом canvas (не CSS-маской: её Safari пересчитывал бы каждый кадр).
   Без анимации (reduced motion, ?static, без JS) — постер: собранный логотип. */
.logo-scene {
  --view-h: calc(100vh - 80 * var(--u)); /* окно под сплошной шапкой */
  --logo-scrub: 170vh; /* ход сборки: дольше, чем на телефоне, — логотип крупнее */
}
.logo-scene__track { margin-top: calc(56 * var(--u)); }
.logo-scene.is-scrolly .logo-scene__track { height: calc(var(--view-h) + var(--logo-scrub)); }
.logo-scene__view {
  display: grid;
  place-items: center;
}
.logo-scene.is-scrolly .logo-scene__view {
  position: sticky;
  top: calc(80 * var(--u));
  height: var(--view-h);
}
.logo-scene__card {
  position: relative;
  width: min(calc(860 * var(--u)), calc(var(--view-h) - 24px));
  aspect-ratio: 1;
}
.logo-scene__poster,
.logo-scene__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.logo-scene__canvas { opacity: 0; transition: opacity 0.3s ease; }
.logo-scene__canvas.is-ready { opacity: 1; }
.faq__list {
  grid-column: 2;
  display: grid;
  align-content: start;
  gap: calc(12 * var(--u));
}
.faq__item {
  border-radius: calc(36 * var(--u));
  background: #fff;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
/* Раскрытый вопрос — без инверсии: та же белая карточка, просто открывается (правки заказчика
   2026-10-29). */
.faq__item:hover { box-shadow: 0 10px 24px -12px rgb(13 51 128 / 0.25); }
.faq__q {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  padding: calc(24 * var(--u)) calc(28 * var(--u)) calc(24 * var(--u)) calc(32 * var(--u));
  list-style: none;
  cursor: pointer;
  font-weight: 500;
  font-size: max(calc(20 * var(--u)), 15px);
  line-height: 1.3;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q span { flex: 1; }
.faq__plus {
  flex: none;
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
  transition: rotate 0.3s ease;
}
.faq__item[open] .faq__plus { rotate: 45deg; }
.faq__a {
  padding: 0 calc(28 * var(--u)) calc(30 * var(--u)) calc(32 * var(--u));
  margin-top: calc(-10 * var(--u));
  font-size: max(calc(18 * var(--u)), 14px);
  line-height: 1.44;
  color: #4a5568;
}
/* Плавное раскрытие — где браузер умеет (::details-content); иначе сразу. */
@supports selector(::details-content) {
  .faq { interpolate-size: allow-keywords; }
  .faq__item::details-content {
    height: 0;
    overflow: clip;
    transition: height 0.35s ease, content-visibility 0.35s allow-discrete;
  }
  .faq__item[open]::details-content { height: auto; }
}

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

.footer {
  display: grid;
  grid-template-columns: calc(496 * var(--u)) 1fr auto;
  align-items: start;
  padding: calc(108 * var(--u)) calc(64 * var(--u)) calc(44 * var(--u));
  background: #fff;
}
.footer-logo { margin-top: calc(12 * var(--u)); }
.footer-logo img { width: calc(148.5 * var(--u)); height: auto; }

.footer-nav,
.footer-socials {
  display: grid;
  gap: calc(14 * var(--u));
}
.footer-nav a,
.footer-socials a {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--u));
  justify-self: start;
  font-weight: 500;
  font-size: max(calc(20 * var(--u)), 15px);
  line-height: 1.2;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-nav a:hover,
.footer-socials a:hover { color: var(--blue); }
.footer-socials img { width: calc(22.4 * var(--u)); height: calc(22.4 * var(--u)); }

/* Крупная надпись — однотонная, фирменным синим (правки 2026-10-28; раньше внутри букв
   была картинка лабиринта). */
.footer-word {
  grid-column: 1 / -1;
  margin-top: calc(80 * var(--u));
  font-size: calc(172.5 * var(--u));
  line-height: 0.95;
  color: var(--blue);
}

.footer-legal {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  margin-top: calc(40 * var(--u));
  padding-top: calc(24 * var(--u));
  border-top: 1px solid #d3d3d3;
  font-size: max(calc(16.5 * var(--u)), 13px);
  line-height: 1.33;
  color: #8c8c8c;
}

/* ---------- появление по прокрутке (landing-desktop.js) ---------- */

/* Анимацией, а не transition: у блоков свои переходы на наведение, их не трогаем. */
.js-reveal [data-reveal]:not(.is-in) { opacity: 0; }
.js-reveal [data-reveal].is-in {
  animation: reveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(min(var(--ri, 0), 6) * 80ms);
}
@keyframes reveal {
  from { opacity: 0; translate: 0 32px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- кнопки: прямой Condensed ---------- */
/* Правки заказчика 2026-10-29: «на всех кнопках не италик, а обычное начертание Condensed,
   италик оставить только в заголовках и датах». Одно правило на все кнопки, в конце файла —
   перебивает и .display у подписи кнопки. */
.btn,
.topbar__cta,
.cta .cta__label {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: normal;
}