/* Freedom VPN — лендинг v3: «Продукт крупным планом» на фоне полёта «Из космоса».
   Тёмная страница. Фон — сцена (three.js, dist/scene.js): прокрутка — полёт от МКС до 1,5 млн км, телефон летит вместе с нами.
   Цвет: текст — «звёздный свет», синий логотипа — только главная кнопка, голубой — только слой данных (дуги, высотомер, рельс),
   тепло — только из снимков (солнце, огни городов) и от солнца на рамке телефона.
   Поверхности — «обшивка»: плотные тёмные панели + волосная линия. Никакого backdrop-filter над WebGL (перемывается каждый кадр).
   Телефон и кабинет — phone.css. Движение и связь со сценой — site.js. */

@font-face { font-family: "Wix Madefor Display"; src: url("../fonts/wix-madefor-display.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Wix Madefor Text"; src: url("../fonts/wix-madefor-text.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }

:root {
  /* ── Палитра: примитивы ── */
  --space: #000000;          /* Космос: фон сцены (clear color) */
  --starlight: #EEF3FF;      /* Звёздный свет: основной текст, 18,9:1 на чёрном */
  --dust: #A7B1C4;           /* Лунная пыль: второстепенный текст, 9,3:1 на обшивке, ≥ 4,5:1 под затемнением ≥ 0,6 даже над светлой Луной */
  --dust-dim: #8E99AE;       /* подписи и сноски, 7:1 на обшивке */
  --logo-blue: #2566E8;      /* Синий логотипа → */
  --logo-blue-deep: #1B45D6; /* → только главная кнопка (белый текст 5,1–7,3:1) */
  --atmo: #5CC8FF;           /* Атмосфера: только слой данных — дуги, высотомер, рельс глав, «Авто» проверяет */

  /* ── Роли ── */
  --text: var(--starlight);
  --text-2: var(--dust);
  --text-3: var(--dust-dim);
  --accent: var(--logo-blue);
  --accent-deep: var(--logo-blue-deep);
  --accent-grad: linear-gradient(135deg, #1B45D6 0%, #2566E8 60%, #276FEA 100%);
  --data: var(--atmo);
  --hull: rgba(6, 10, 18, 0.82);           /* обшивка: кнопка «Войти», плашки */
  --hull-strong: rgba(6, 10, 18, 0.86);
  --hull-dense: rgba(5, 8, 14, 0.95);      /* обшивка иллюминаторов: мимо них проходят Земля и Луна — сквозь панель не просвечивают */
  --hull-raised: rgba(15, 21, 33, 0.94);   /* приподнятая панель: популярный тариф */
  --hair: rgba(255, 255, 255, 0.08);       /* волосная линия обшивки */
  --hair-strong: rgba(255, 255, 255, 0.16);
  --titanium: linear-gradient(160deg, #5A5F68 0%, #2A2D33 22%, #1A1C21 55%, #3B3F47 82%, #6A6F78 100%); /* рамка телефона и иллюминаторов */

  --f-display: "Wix Madefor Display", -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-text: "Wix Madefor Text", -apple-system, "Segoe UI", Roboto, sans-serif;

  --t-xl: clamp(46px, min(7.2vw, 11.5vh), 104px);
  --t-l: clamp(34px, 4.7vw, 68px);
  --t-m: clamp(26px, 3vw, 44px);
  --t-title: clamp(22px, 1.95vw, 28px);
  --t-lead: clamp(18px, 1.5vw, 21px);
  --t-body: clamp(17px, 1.25vw, 18px);
  --t-small: 15px;
  --t-cap: 13px;

  --ease-silk: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  --spring: cubic-bezier(0.34, 1.36, 0.64, 1);

  --gutter: clamp(20px, 4vw, 48px);
  --wrap: clamp(1200px, 75vw, 1440px);            /* на больших экранах шире: между подписями и телефоном остаётся место для Европы с подписями */
  --edge: max(var(--gutter), calc((100vw - var(--wrap)) / 2));
  --header-h: 64px;
  --hud-h: 40px;                                   /* строка высотомера под шапкой */
  --fade-line: calc(var(--header-h) + var(--hud-h)); /* выше этой линии уходящий текст тает, а не наезжает на шапку и высотомер */
  --cap-w: min(480px, max(clamp(300px, 28vw, 400px), 25vw));   /* колонка подписей глав: между ней и телефоном — Земля и дуги; на широких экранах растёт */
  --band-ramp: 44px;                               /* спад плотной полосы под шапкой: ниже --fade-line − 8 px */

  /* Геометрия рассказа: где телефон стоит «в доке» (целиком ниже полосы под шапкой) */
  --dock-top: calc(var(--fade-line) + 10px);
  --dock-h: calc(100svh - var(--fade-line) - 64px);
  --hero-ph: min(740px, calc(100svh - var(--header-h) - 104px));
  color-scheme: dark;
}
@supports (transition-timing-function: linear(0, 1)) {
  :root { --spring: linear(0, 0.0319, 0.1116, 0.2188, 0.3384, 0.4591, 0.5733, 0.6764, 0.7657, 0.8403, 0.9004, 0.9472, 0.9821, 1.0068, 1.0231, 1.0328, 1.0375, 1.0383, 1.0366, 1.0333, 1.029, 1.0244, 1.0198, 1.0155, 1.0116, 1.0083, 1.0056, 1.0034, 1.0017, 1.0005, 0.9996, 0.999, 1); }
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--space); -webkit-text-size-adjust: 100%; scroll-padding-top: var(--fade-line); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--space); color: var(--text);
  font-family: var(--f-text); font-size: var(--t-body); line-height: 1.55;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
main { overflow-x: clip; }
h1, h2, h3, p, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
img { display: block; max-width: 100%; }
::selection { background: rgba(238, 243, 255, 0.24); }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: 12px; transform: translateY(-300%); z-index: 100; padding: 12px 16px; border-radius: 12px; background: var(--hull-raised); box-shadow: inset 0 0 0 1px var(--hair-strong); font-weight: 600; text-decoration: none; }
.skip:focus { transform: none; }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Фон: сцена, её подписи и запасной вариант ──
   Пока сцена грузится — чистый чёрный (как её clear color). Без JS, без WebGL или со старой сборкой — статичный
   градиент с намёком на край атмосферы снизу; сверху он чисто чёрный, чтобы текст читался как на сцене. */
.sky { position: fixed; left: 0; top: 0; z-index: 0; display: block; width: 100%; height: 100vh; height: 100lvh; opacity: 0; transition: opacity 1400ms ease; pointer-events: none; }
/* Холст — во «большой» экран (100lvh): когда на телефоне сворачивается или разворачивается панель браузера, его размер
   не меняется (раньше каждый раз пересоздавались буферы WebGL и сцена перекадрировалась) */
html[data-bg="scene"] .sky { opacity: 1; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1200ms ease;
  background:
    radial-gradient(150% 58% at 50% 122%, rgba(92, 200, 255, 0.34) 0%, rgba(37, 102, 232, 0.2) 22%, rgba(12, 32, 78, 0.28) 40%, rgba(0, 0, 0, 0) 66%),
    radial-gradient(90% 40% at 78% 100%, rgba(255, 170, 90, 0.08), rgba(0, 0, 0, 0) 70%),
    var(--space);
}
html:not(.js) body::before, html[data-bg="static"] body::before { opacity: 1; }
html:not(.js) .sky, html:not(.js) .labels, html:not(.js) .hud { display: none; }

/* Подписи городов и «Земля»/«Луна» — их ставит сцена. Слой сцены: под текстом страницы и его затемнениями */
.labels { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.label { position: absolute; left: 0; top: 0; font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; opacity: 0; transition: opacity 350ms ease, color 150ms ease; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9); }
.label.is-on { opacity: 1; }
.label-far.is-on { opacity: var(--far-o, 1); }   /* за остановкой финала подписи гаснут плавно, по прокрутке (site.js) */
.label.is-on.is-quiet { opacity: 0; }   /* «Земля» / «Луна» легли на текст тарифов или финала — гаснут (site.js) */
.label::before { content: ""; display: inline-block; width: 18px; height: 1px; margin-right: 6px; vertical-align: middle; background: rgba(238, 243, 255, 0.5); }
.label.is-left::before { display: none; }
.label.is-left::after { content: ""; display: inline-block; width: 18px; height: 1px; margin-left: 6px; vertical-align: middle; background: rgba(238, 243, 255, 0.5); }
.label-far { color: var(--data); }
/* «Авто» проверяет сервер: его подпись ярче, с голубой чертой; остальные приглушены */
.label.is-dim { color: rgba(238, 243, 255, 0.5); }
.label.is-hi { color: #fff; }
.label.is-hi::before, .label.is-hi::after { background: var(--data); box-shadow: 0 0 8px var(--data); }

/* ── Затемнения под текстом ──
   Только чистый чёрный (как небо сцены, иначе затемнение светлее неба) и только плавный спад (smoothstep):
   у пятна нет края ни с одной стороны. --sa — плотность в центре. */
.scrim { position: relative; isolation: isolate; }
.scrim::before {
  content: ""; position: absolute; z-index: -1; inset: var(--scrim-in, -64px -96px); pointer-events: none;
  background: radial-gradient(closest-side, rgb(0 0 0 / var(--sa, 0.6)) 0%, rgb(0 0 0 / var(--sa, 0.6)) 30%, rgb(0 0 0 / calc(var(--sa, 0.6) * 0.945)) 40%,
    rgb(0 0 0 / calc(var(--sa, 0.6) * 0.802)) 50%, rgb(0 0 0 / calc(var(--sa, 0.6) * 0.606)) 60%, rgb(0 0 0 / calc(var(--sa, 0.6) * 0.394)) 70%,
    rgb(0 0 0 / calc(var(--sa, 0.6) * 0.198)) 80%, rgb(0 0 0 / calc(var(--sa, 0.6) * 0.055)) 90%, rgb(0 0 0 / 0) 100%);
}

/* ── Шапка ──
   Прозрачная над космосом; под шапкой и высотомером — плотная чёрная полоса (до --fade-line − 8 px) с коротким плавным
   спадом (--band-ramp, по smoothstep). Чёрное на чёрном небе не видно, а всё, что уезжает под шапку, в полосе гаснет и не
   наезжает на неё — одной неподвижной заливкой, без масок на разделах (их строки пересчитывались каждый кадр и перерисовывали
   целые разделы; 29-09) и одинаково с JS и без него. Заголовки гаснут раньше сами (прозрачностью, site.js). */
.top { position: fixed; z-index: 50; left: 0; right: 0; top: 0; height: var(--header-h); }
.top::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--fade-line) - 8px + var(--band-ramp)); z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, #000 0, #000 calc(100% - var(--band-ramp)),
    rgb(0 0 0 / 0.93) calc(100% - var(--band-ramp) * 0.84), rgb(0 0 0 / 0.74) calc(100% - var(--band-ramp) * 0.67),
    rgb(0 0 0 / 0.5) calc(100% - var(--band-ramp) * 0.5), rgb(0 0 0 / 0.26) calc(100% - var(--band-ramp) * 0.33),
    rgb(0 0 0 / 0.07) calc(100% - var(--band-ramp) * 0.16), rgb(0 0 0 / 0) 100%);
}
.top-in { height: 100%; display: flex; align-items: center; gap: 8px; padding: 0 var(--edge); }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-right: auto; white-space: nowrap; text-decoration: none; font-family: var(--f-display); font-size: 18px; font-weight: 650; letter-spacing: -0.02em; }
.brand img { width: 32px; height: 32px; filter: drop-shadow(0 4px 14px rgba(47, 124, 246, 0.45)); }
.nav { display: flex; align-items: center; gap: 2px; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 12px; font-size: 15px; font-weight: 500; color: var(--text-2); text-decoration: none; transition: color 150ms ease, background-color 150ms ease; }
.nav a:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.top .btn-pill { margin-left: 8px; }

/* ── Высотомер ──
   Под логотипом, в зоне шапки: сюда ничего не заезжает (текст гаснет у --fade-line), не спорит с телефоном (он справа)
   и подписями глав (они по центру высоты). Настоящее расстояние камеры до Земли пишет сцена. Шкала — логарифм
   от 420 км до 1,5 млн км: сцена двигает точку через style.top, поэтому вертикальная дорожка повёрнута на −90°. */
.hud {
  position: fixed; z-index: 55; left: var(--edge); top: var(--header-h); height: var(--hud-h);
  display: flex; align-items: center; gap: 0 20px; pointer-events: none;
  font-size: 13px; line-height: 1.3; color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 12px rgb(0 0 0 / 0.9), 0 1px 2px rgb(0 0 0 / 0.9);
  opacity: 0; translate: 0 -4px; transition: opacity 900ms var(--ease-silk), translate 900ms var(--ease-silk);
}
html[data-bg="scene"][data-scene="ready"] .hud { opacity: 1; translate: none; }   /* 'lost' (контекст WebGL потерян) — высотомер прячется */
.hud-scale { position: relative; flex: none; width: 112px; height: 11px; margin-right: -4px; }
.hud-scale::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: rgba(238, 243, 255, 0.26); }
.hud-tick { position: absolute; top: 3px; left: calc(var(--t) * 100%); width: 1px; height: 5px; background: rgba(238, 243, 255, 0.42); }
.hud-rot { position: absolute; left: 0; top: 6px; width: 1px; height: 112px; transform-origin: 0 0; transform: rotate(-90deg); }
.hud-dot { position: absolute; left: -3px; top: 0; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--data); box-shadow: 0 0 10px var(--data), 0 0 2px rgba(255, 255, 255, 0.9); }
.hud-alt { color: var(--text-2); }
.hud-alt b { font-family: var(--f-display); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.hud-place { color: var(--data); transition: opacity 400ms ease; }
.hud-time { color: var(--text-3); }
.hud-place:empty, .hud-time:empty { display: none; }

/* ── Кнопки ── */
/* Главная кнопка — та же «волна», что и «Подключиться» в кабинете: деталь продукта стала кнопкой страницы.
   Единственное место, где есть синий логотипа. */
.btn-wave {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 58px; padding: 0 30px 5px; border-radius: 18px;
  background: var(--accent-grad); color: #fff; text-decoration: none;
  font-family: var(--f-text); font-size: 17px; font-weight: 600; letter-spacing: -0.005em; white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(155, 232, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.5), 0 18px 44px -14px rgba(37, 102, 232, 0.8);
  transition: scale 150ms ease-out, box-shadow 300ms var(--ease-out), translate 300ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.btn-wave .wv { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.btn-wave .wv svg { position: absolute; left: 0; bottom: 0; width: 200%; fill: currentColor; transition: translate 600ms var(--ease-silk); }
.btn-wave .wv .w1 { height: 26px; color: rgba(51, 207, 245, 0.42); animation: wave 5.2s linear infinite; }
.btn-wave .wv .w2 { height: 22px; color: rgba(155, 232, 255, 0.26); animation: wave 8.4s linear infinite reverse; }
@keyframes wave { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.btn-wave .lbl { display: inline-flex; align-items: center; gap: 10px; text-shadow: 0 1px 3px rgba(8, 24, 80, 0.45); }
.btn-wave .icon { width: 20px; height: 20px; }
@media (hover: hover) {
  .btn-wave:hover { translate: 0 -1px; box-shadow: inset 0 0 0 1px rgba(155, 232, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 2px rgba(0, 0, 0, 0.5), 0 24px 54px -14px rgba(37, 102, 232, 0.95); }
  .btn-wave:hover .wv svg { translate: 0 -5px; }
}
.btn-wave:active { scale: 0.96; }
.ripple { position: absolute; z-index: -1; left: 0; top: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: radial-gradient(closest-side, rgba(155, 232, 255, 0.6), rgba(155, 232, 255, 0)); pointer-events: none; animation: ripple 700ms var(--ease-out) forwards; }
@keyframes ripple { from { transform: scale(1); opacity: 1; } to { transform: scale(40); opacity: 0; } }

.btn-quiet {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 58px; padding: 0 26px 5px; border-radius: 18px;
  background: var(--hull); color: var(--text); text-decoration: none;
  font-size: 17px; font-weight: 600; white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--hair-strong), 0 12px 30px -14px rgba(0, 0, 0, 0.9);
  transition: scale 150ms ease-out, box-shadow 300ms var(--ease-out), background-color 300ms var(--ease-out);
}
@media (hover: hover) { .btn-quiet:hover { background: var(--hull-raised); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26), 0 16px 36px -14px rgba(0, 0, 0, 0.9); } }
.btn-quiet:active { scale: 0.96; }

/* Кнопка в шапке: синяя, только когда главной кнопки страницы нет в кадре (один залитый призыв на экран) */
.btn-pill {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
  background: var(--accent); color: #fff; text-decoration: none; font-size: 15px; font-weight: 600; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0), 0 8px 22px -10px rgba(37, 102, 232, 0.85);
  transition: scale 150ms ease-out, background-color 300ms var(--ease-out), box-shadow 300ms var(--ease-out);
}
.btn-pill:hover { background: var(--accent-deep); }
.top.cta-quiet .btn-pill { background: rgba(255, 255, 255, 0); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0), inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 8px 22px -10px rgba(37, 102, 232, 0); }
.top.cta-quiet .btn-pill:hover { background: rgba(255, 255, 255, 0.08); }
.btn-pill:active { scale: 0.96; }

/* ── Сцена страницы: первый экран + рассказ, телефон приколот ── */
.stage { position: relative; }
/* Дорожка приколотого слоя на полэкрана длиннее сцены: в конце рассказа телефон ещё приколот, пока уходит (site.js) */
.pin-track { position: absolute; inset: 0 0 -50svh; z-index: 3; pointer-events: none; }
.pin { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: clip; pointer-events: none; }   /* lvh: когда панель браузера свёрнута, телефон не обрезан по линии 100svh */
/* Слой затемнения под подписями глав (ниже подписей, выше сцены): одно постоянное пятно, а не своё у каждой главы —
   при смене глав затемнение не мигает. Проявляется, когда телефон встал в док. */
.scrim-track { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.scrim-pin { position: sticky; top: 0; height: 100vh; height: 100lvh; opacity: var(--band, 0); }
.scrim-pin::before {
  content: ""; position: absolute; left: calc(var(--edge) - 300px); width: calc(var(--cap-w) + 600px); top: 4%; bottom: 4%;
  background: radial-gradient(closest-side, rgb(0 0 0 / 0.7) 0%, rgb(0 0 0 / 0.7) 30%, rgb(0 0 0 / 0.662) 40%, rgb(0 0 0 / 0.561) 50%,
    rgb(0 0 0 / 0.424) 60%, rgb(0 0 0 / 0.276) 70%, rgb(0 0 0 / 0.139) 80%, rgb(0 0 0 / 0.039) 90%, rgb(0 0 0 / 0) 100%);
}
/* Свет экрана: мягкое голубое пятно в космосе вокруг телефона, ярче при подключении */
.screen-light {
  position: absolute; left: 0; top: 0; width: 1000px; height: 1000px; margin: -500px 0 0 -500px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(56, 132, 255, 0.34), rgba(40, 110, 240, 0.17) 28%, rgba(51, 190, 245, 0.07) 50%, rgba(51, 190, 245, 0.018) 64%, rgba(0, 0, 0, 0) 76%);
  opacity: var(--light, 0.5); transition: opacity 900ms var(--ease-silk);
  pointer-events: none;
}
.dock-slot { position: absolute; top: var(--dock-top); height: var(--dock-h); right: var(--edge); width: min(30vw, 420px); }

.hero {
  position: relative; z-index: 2;
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: calc(var(--fade-line) + clamp(8px, 4.2vh, 48px)) var(--gutter) 0;
}
.hero-in { --sa: 0.5; --scrim-in: -56px 0 -40px; display: flex; flex-direction: column; align-items: center; width: 100%; will-change: transform, opacity; }
.hero h1 { font-family: var(--f-display); font-size: var(--t-xl); font-weight: 640; line-height: 0.98; letter-spacing: -0.042em; text-wrap: balance; }
.hero h1 .ln { display: inline-block; overflow: clip; overflow-clip-margin: 0.12em; padding: 0 0.04em 0.06em; vertical-align: top; }
.hero h1 .ln-1 { display: block; }
.hero h1 .ln > span { display: inline-block; }
.lead { margin-top: 26px; max-width: 36em; font-size: var(--t-lead); line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; }
.hero-slot { width: 100%; height: var(--hero-ph); margin-top: clamp(32px, 5vh, 56px); margin-bottom: calc(-1 * var(--hero-ph)); }

/* Главы */
.chapter { position: relative; z-index: 2; height: 150svh; }
.chapter[data-ch="0"] { height: 190svh; }
.chapter[data-ch="2"] { height: 170svh; }
.chapter[data-ch="3"] { height: 180svh; }
.cap { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; }
.cap-in { width: var(--cap-w); margin-left: var(--edge); padding: var(--fade-line) 0 64px; opacity: var(--o, 1); }
.cap h2 { font-family: var(--f-display); font-size: var(--t-m); font-weight: 620; line-height: 1.06; letter-spacing: -0.028em; text-wrap: balance; }
.cap p { margin-top: 18px; max-width: 30em; color: var(--text-2); text-wrap: pretty; }
.cap p b { color: var(--text); font-weight: 600; }

.steps { margin-top: 28px; display: grid; gap: 4px; counter-reset: st; }
.steps li { position: relative; display: grid; grid-template-columns: 34px 1fr; column-gap: 16px; padding: 12px 0; counter-increment: st; color: var(--text-2); transition: color 400ms var(--ease-out); }
.steps li::before {
  content: counter(st); grid-row: 1 / span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--hull); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--hair-strong);
  transition: background-color 400ms var(--ease-out), color 400ms var(--ease-out), box-shadow 400ms var(--ease-out), scale 500ms var(--spring);
}
.steps b { padding-top: 4px; font-size: var(--t-body); font-weight: 600; line-height: 1.35; }
.steps span { font-size: var(--t-small); line-height: 1.5; }
.steps li.is-on { color: var(--text); }
.steps li.is-on span { color: var(--text-2); }
.steps li.is-on::before { background: var(--text); color: #05080E; box-shadow: 0 0 0 5px rgba(238, 243, 255, 0.1); scale: 1.08; }
.steps li.is-done::before { background: rgba(255, 255, 255, 0.06); color: var(--text); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); }

/* Серверы: легенда к дугам на Земле. Что сейчас проверяет «Авто», светится одновременно в телефоне, в списке и на дуге */
.cities { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 28px; max-width: 440px; }
.cities li {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 14px; border-radius: 16px;
  background: var(--hull); box-shadow: inset 0 0 0 1px var(--hair); line-height: 1.25;
  transition: box-shadow 160ms var(--ease-out), background-color 160ms var(--ease-out);   /* проверка сервера — 0,4 с: подсветка успевает */
}
.cities li::after { content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--data); box-shadow: 0 0 10px var(--data); opacity: 0; scale: 0.25; transition: opacity 300ms var(--ease-out), scale 500ms var(--spring); }
.cities li.is-scan { background: rgba(92, 200, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(92, 200, 255, 0.28); }
.cities li.is-pick { box-shadow: inset 0 0 0 1px rgba(92, 200, 255, 0.5); }
.cities li.is-pick::after { opacity: 1; scale: 1; }
.cities .flag { width: 28px; height: 20px; border-radius: 4px; flex: none; outline: 1px solid rgba(255, 255, 255, 0.12); outline-offset: -1px; overflow: hidden; }
.cities b { display: block; font-size: 16px; font-weight: 600; }
.cities small { font-size: 13px; color: var(--text-3); }
.cities-more { margin-top: 12px; font-size: 14px; color: var(--text-3); }   /* отдельные серверы вне «Авто» (01-10-2026) */
/* На телефоне в портрете подпись главы и так упирается в --cap-area — строку про отдельные серверы прячем (01-10-2026) */
@media (max-width: 899px) and (orientation: portrait), (max-width: 899px) and (min-height: 561px) { .cities-more { display: none; } }

/* Рельс глав: свой приколотый слой после глав (порядок Tab), над подписями */
.rail-track { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.rail-pin { position: sticky; top: 0; height: 100svh; }
html:not(.js) .rail-track { display: none; }
.rail { position: absolute; left: var(--edge); bottom: 26px; display: flex; gap: 6px; pointer-events: auto; opacity: var(--rail, 0); transition: opacity 300ms ease; }
.rail::before { content: ""; position: absolute; z-index: -1; inset: -36px -70px -26px -90px; pointer-events: none;
  background: radial-gradient(closest-side, rgb(0 0 0 / 0.6) 0%, rgb(0 0 0 / 0.6) 30%, rgb(0 0 0 / 0.481) 50%, rgb(0 0 0 / 0.236) 70%, rgb(0 0 0 / 0.033) 90%, rgb(0 0 0 / 0) 100%); }
.rail[inert] { pointer-events: none; }
.rail button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 112px; min-height: 44px; padding: 8px 4px 6px;
  border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-2); cursor: pointer; text-align: start;
  transition: color 200ms ease;
}
.rail button:hover, .rail button[aria-current="step"] { color: var(--text); }
.rail i { position: relative; display: block; width: 100%; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.36); overflow: hidden; }   /* ≥ 3:1 на чёрном — это элемент управления */
.rail i b { position: absolute; inset: 0; border-radius: inherit; background: var(--data); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

/* ── Возможности: иллюминаторы ──
   Каждая карточка — кусок обшивки, в нём окно в титановой раме (та же, что у телефона). Окно прозрачное: сквозь него видно
   настоящий полёт к Луне, а в окне висит деталь кабинета крупным планом. Обшивку рисует огромная тень-«распорка»
   окна (box-shadow spread), обрезанная скруглением карточки, — так в панели получается вырез со скруглёнными углами. */
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.sec { position: relative; z-index: 2; padding: clamp(96px, 13vh, 160px) 0 0; }
.sec-head { --sa: 0.62; --scrim-in: -56px -80px -48px -120px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 24px 48px; margin-bottom: clamp(36px, 5vw, 64px); }
.sec-head h2 { font-family: var(--f-display); font-size: var(--t-l); font-weight: 650; line-height: 1.02; letter-spacing: -0.036em; text-wrap: balance; }
.sec-head p { font-size: var(--t-lead); line-height: 1.5; color: var(--text-2); text-wrap: pretty; max-width: 26em; }

.macro-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.macro {
  position: relative; isolation: isolate; overflow: hidden;
  grid-column: span 4;
  display: flex; flex-direction: column;
  padding: 14px 14px 30px; border-radius: 42px;
}
.macro::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px var(--hair), inset 0 1px 0 rgba(255, 255, 255, 0.05); }
.macro.is-wide { grid-column: span 7; }
.macro.is-mid { grid-column: span 5; }
.macro > h3 { position: relative; margin: 24px 18px 0; font-family: var(--f-display); font-size: var(--t-title); font-weight: 620; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
.macro > p { position: relative; margin: 8px 18px 0; max-width: 32em; font-size: 16px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
/* Окно: прозрачное, с титановой рамой, стеклом и глубиной */
.lens {
  position: relative; isolation: isolate;
  height: 300px; border-radius: 28px;
  box-shadow: 0 0 0 100vmax var(--hull-dense);
  display: grid; place-items: center;
  color: var(--c-text); font-family: var(--f-ui); font-size: 15px; line-height: 1.45; text-align: start;
}
.macro:not(.is-wide):not(.is-mid) .lens { height: 250px; }
.lens::before {  /* рама: титан, как корпус телефона */
  content: ""; position: absolute; inset: -6px; z-index: 2; border-radius: 34px; padding: 6px; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 8%, rgba(255, 255, 255, 0) 92%, rgba(255, 255, 255, 0.16)), var(--titanium);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.lens::after {   /* стекло: блик и глубина окна — окно читается как стекло, даже когда за ним только звёзды */
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.9), inset 0 0 0 2px rgba(255, 255, 255, 0.07), inset 0 10px 40px rgba(0, 0, 0, 0.55), inset 0 0 70px rgba(0, 0, 0, 0.45);
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.025) 22%, rgba(255, 255, 255, 0) 34%),
    linear-gradient(118deg, rgba(255, 255, 255, 0) 52%, rgba(200, 225, 255, 0.045) 58%, rgba(255, 255, 255, 0) 66%),
    linear-gradient(298deg, rgba(160, 200, 255, 0.06), rgba(255, 255, 255, 0) 24%);
}
.lens-obj { position: relative; z-index: 1; width: 340px; transform-origin: 50% 50%; }
.macro.is-wide .lens-obj { zoom: 1.32; width: 360px; }
/* Первое окно: деталь кабинета — в левой части, правая свободна: мимо неё проплывает уходящая Земля (сцена ставит её туда,
   пока идут иллюминаторы, site.js insetsFor('features')) */
@media (min-width: 900px), (orientation: landscape) and (max-height: 560px) {
  html[data-bg="scene"] .macro.is-wide .lens { justify-items: start; padding-left: 26px; }
  html[data-bg="scene"] .macro.is-wide .lens-obj { zoom: 1.12; }
}
.macro.is-mid .lens-obj { zoom: 1.12; }
/* Узкий компьютер (900–1259): в три колонки окна у́же объекта и режут текст — раскладка 1 + 2 + 2 */
@media (min-width: 900px) and (max-width: 1259px), (orientation: landscape) and (max-height: 560px) {
  .macro, .macro.is-mid { grid-column: span 6; }
  .macro.is-wide { grid-column: span 12; }
  .macro.is-mid .lens-obj { zoom: 1; }
  .macro:not(.is-wide):not(.is-mid) .lens { height: 270px; }
  .macro.is-mid .lens { height: 270px; }
}
@media (hover: hover) {
  .lens-obj { transition: transform 700ms var(--ease-silk); }
  .macro:hover .lens-obj, .js .macro.in:hover .lens-obj { transform: scale(1.035); transition: transform 700ms var(--ease-silk); }
}
/* Наведение фокуса при появлении (только с JS и без «уменьшить движение») */
.js .macro.pre .lens-obj { filter: blur(10px); transform: scale(1.1); opacity: 0.35; }
.js .macro.in .lens-obj { filter: none; transform: none; opacity: 1; transition: filter 1100ms var(--ease-silk), transform 1300ms var(--ease-silk), opacity 800ms var(--ease-silk); }

/* Детали кабинета в окнах (стили — phone.css, переменные — .cab) */
.lens .c-card { padding: 18px 16px; border-radius: 32px; background: var(--c-surface); box-shadow: 0 0 0 1px var(--c-ring-strong), 0 24px 60px rgba(0, 0, 0, 0.7); font-family: var(--f-ui); color: var(--c-text); font-size: 15px; line-height: 1.45; }
.lens .c-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.lens .c-card-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--c-accent-soft); color: var(--c-blue-300); flex: none; }
.lens .c-card-ic svg { width: 22px; height: 22px; }
.lens .c-card-title { font-family: var(--f-display); font-size: 18px; font-weight: 600; line-height: 1.2; }
.lens .c-card-sub { font-family: var(--f-2); font-size: 13px; color: var(--c-text-2); }
.lens .c-muted { font-family: var(--f-2); font-size: 13.5px; color: var(--c-text-2); }
.lens .c-btn-secondary { position: relative; margin-top: 14px; transition: background-color 400ms ease, color 400ms ease, scale 150ms ease-out; }
.lens .c-btn-secondary .when-on { display: none; }
.lens .is-on .c-btn-secondary { background: rgba(74, 222, 155, 0.12); color: var(--c-mint); }
.lens .is-on .c-btn-secondary .when-off { display: none; }
.lens .is-on .c-btn-secondary .when-on { display: inline-flex; align-items: center; gap: 8px; }
.lens .c-toggle { position: relative; width: 52px; height: 32px; border-radius: 16px; background: var(--c-control-2); transition: background-color 300ms ease; flex: none; margin-left: auto; }
.lens .c-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 13px; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); transition: translate 620ms var(--c-spring); }
.lens .is-on .c-toggle { background: var(--c-blue-500); }
.lens .is-on .c-toggle::after { translate: 20px 0; }

.look { display: grid; gap: 8px; }
.look .c-item { background: var(--c-control); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6); }
.look .c-item-ic { color: var(--c-mint); background: rgba(74, 222, 155, 0.1); }
.look .eq { justify-self: center; display: grid; place-items: center; width: 30px; height: 30px; margin: -4px 0; border-radius: 50%; background: var(--c-raised); color: var(--c-text-2); box-shadow: 0 0 0 1px var(--c-ring-strong); font-family: var(--f-display); font-size: 16px; font-weight: 600; position: relative; z-index: 1; }

.player { position: relative; margin-inline: 22px; border-radius: 20px; overflow: hidden; background: #0A0E14; box-shadow: 0 0 0 1px var(--c-ring-strong), 0 24px 60px rgba(0, 0, 0, 0.7); }
.player-screen { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; background: radial-gradient(120% 90% at 30% 20%, #1c2c52, #0b1222 60%, #05070c); }
/* Кнопка YouTube — официальная иконка (2017, 28,57:20): плашка и треугольник в одних координатах, прежний треугольник уезжал вправо (30-09-2026) */
.player-play { display: grid; place-items: center; width: 68px; height: 47.6px; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.45)); transition: scale 400ms var(--c-spring); }
.player-play svg { width: 100%; height: 100%; stroke: none; }
.player-play .yt-bg { fill: #FF0000; }
.player-play .yt-tri { fill: #fff; }
.player-bar { height: 4px; background: rgba(255, 255, 255, 0.14); }
.player-bar span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--c-blue-600), var(--c-cyan)); transform-origin: 0 50%; transform: scaleX(0.34); }
.macro.in .player-bar span { animation: play 14s linear infinite; }
@keyframes play { from { transform: scaleX(0.02); } to { transform: scaleX(1); } }
.player-meta { display: flex; align-items: center; gap: 10px; padding: 12px 14px; font-family: var(--f-2); font-size: 13px; color: var(--c-text-2); }
.player-meta .flag { width: 22px; height: 15px; border-radius: 3px; overflow: hidden; outline: 1px solid rgba(255, 255, 255, 0.12); outline-offset: -1px; flex: none; }
.player-meta b { font-family: var(--f-ui); color: var(--c-text); font-weight: 600; font-size: 13.5px; }

.chat { display: grid; gap: 12px; }
.bubble { justify-self: start; max-width: 88%; padding: 12px 14px; border-radius: 18px 18px 18px 6px; background: var(--c-control); font-family: var(--f-2); font-size: 14px; line-height: 1.45; color: var(--c-text); box-shadow: 0 0 0 1px var(--c-ring), 0 16px 40px rgba(0, 0, 0, 0.6); }
.bubble small { display: block; margin-bottom: 2px; font-family: var(--f-ui); font-size: 12px; font-weight: 600; color: var(--c-blue-300); }
.chat .c-btn { margin-top: 2px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6); }
/* Поддержка «печатает», потом появляется ответ */
.bubble .dots { display: none; gap: 5px; align-items: center; height: 20px; }
.bubble .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-text-2); animation: dot 1s ease-in-out infinite; }
.bubble .dots i:nth-child(2) { animation-delay: 150ms; } .bubble .dots i:nth-child(3) { animation-delay: 300ms; }
@keyframes dot { 0%, 100% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.bubble.is-typing .bubble-text { display: none; }
.bubble.is-typing .dots { display: flex; }
.bubble .bubble-text { display: inline; animation: none; }
.bubble.is-said .bubble-text { display: inline-block; animation: said 500ms var(--ease-silk) both; }
@keyframes said { from { opacity: 0; transform: translateY(4px); } }
/* «Одинаково»: проверка пробегает по обеим строкам */
.look { position: relative; }
.look::after { content: ""; position: absolute; left: -8px; right: -8px; top: 0; height: 36px; border-radius: 12px; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(74, 222, 155, 0), rgba(74, 222, 155, 0.16) 50%, rgba(74, 222, 155, 0)); }
.macro.in .look::after { animation: look-scan 4.2s cubic-bezier(0.45, 0, 0.3, 1) 900ms infinite; }
@keyframes look-scan { 0% { transform: translateY(-10px); opacity: 0; } 8% { opacity: 1; } 42% { transform: translateY(150px); opacity: 1; } 50%, 100% { transform: translateY(160px); opacity: 0; } }

.gs-lite { position: relative; height: 60px; border-radius: 20px; overflow: hidden; isolation: isolate; background: var(--c-grad); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 600; box-shadow: 0 16px 34px -12px rgba(47, 124, 246, 0.6); }
.gs-lite .wvg { position: absolute; inset: 0; z-index: -1; }
.gs-lite .wvg svg { position: absolute; left: 0; bottom: 0; width: 200%; }
.gs-lite .wvg .g1 { height: 30px; animation: wave 6s linear infinite; }
.gs-lite .wvg .g2 { height: 26px; opacity: 0.7; animation: wave 9s linear infinite reverse; }
.gs-lite .wvg .g1 use { fill: url(#gs-or-a); }
.gs-lite .wvg .g2 use { fill: url(#gs-or-b); }
.gs-lite .lbl { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 6px; text-shadow: 0 1px 3px rgba(8, 24, 80, 0.55); }
.gs-lite .lbl svg { width: 20px; height: 20px; }
.ref-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ref-head .c-card-ic { background: rgba(255, 180, 92, 0.14); color: #FFB45C; }
.ref-head b { display: block; font-family: var(--f-display); font-size: 17px; font-weight: 600; }
.ref-head span { font-family: var(--f-2); font-size: 13px; color: var(--c-text-2); }

/* ── Тарифы: у Луны ──
   Заголовок — одной колонкой слева: справа над плитой свободно для Луны. Одна плотная плита на четыре колонки
   (Луна не просвечивает сквозь цены), «3 месяца» приподнята над плитой. */
.plans .sec-head, .features .sec-head { grid-template-columns: minmax(0, 1fr); max-width: 640px; gap: 18px; }
.slab {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch;
  border-radius: 34px; background: var(--hull-strong);
  box-shadow: inset 0 0 0 1px var(--hair), inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 40px 80px -40px rgba(0, 0, 0, 0.9);
}
.plan { position: relative; display: flex; flex-direction: column; padding: 34px 30px 32px; }
.plan + .plan::before { content: ""; position: absolute; left: 0; top: 30px; bottom: 30px; width: 1px; background: var(--hair); }
.plan.is-pop + .plan::before, .plan.is-pop::before { display: none; }
.plan h3 { font-family: var(--f-display); font-size: 21px; font-weight: 600; letter-spacing: -0.015em; }
.price { margin-top: 18px; font-family: var(--f-display); font-size: clamp(44px, 4.4vw, 64px); font-weight: 650; line-height: 1; letter-spacing: -0.038em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.price small { font-size: 0.56em; font-weight: 600; letter-spacing: -0.02em; color: var(--text-2); }
.per { margin-top: 14px; font-size: var(--t-small); color: var(--text-2); font-variant-numeric: tabular-nums; }
.per b { margin-left: 2px; color: var(--text); font-weight: 700; }
/* Полоса — цена месяца относительно 200 ₽: чем дольше срок, тем короче */
.bar { display: block; margin-top: auto; padding-top: 22px; }
.bar i { display: block; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.bar i b { display: block; height: 100%; width: calc(var(--w) * 100%); border-radius: inherit; background: linear-gradient(90deg, rgba(238, 243, 255, 0.5), rgba(238, 243, 255, 0.85)); transform-origin: 0 50%; }
.js .slab.pre .bar i b { transform: scaleX(0); }
.js .slab.in .bar i b { transform: none; transition: transform 1200ms var(--ease-silk) calc(var(--k) * 110ms + 200ms); }
.plan.is-pop {
  z-index: 1; margin: -16px 0; padding-top: 50px; padding-bottom: 48px; border-radius: 30px; background: var(--hull-raised);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 36px 70px -30px rgba(0, 0, 0, 0.95);
}
.plan.is-pop .bar i b { background: linear-gradient(90deg, rgba(238, 243, 255, 0.7), #fff); }
.pop { position: absolute; left: 30px; top: 18px; padding: 3px 10px; border-radius: 999px; background: rgba(238, 243, 255, 0.12); box-shadow: inset 0 0 0 1px rgba(238, 243, 255, 0.2); color: var(--text); font-size: 13px; font-weight: 600; }
@media (hover: hover) {
  .plan { transition: translate 400ms var(--ease-silk); }
  .plan:hover { translate: 0 -4px; }
}
/* У Луны: между иллюминаторами и тарифами — просвет, в котором камера поворачивает к Луне (сцена, FRAMING[…][3].turn), чтобы
   Луна входила в кадр уже после карточек, а не под ними (29-09: край карточки резал Луну, текст лежал на её диске) */
html[data-bg="scene"] .plans { padding-top: max(clamp(96px, 13vh, 160px), 44svh); }
/* снизу — запас на затемнение последнего абзаца (раньше его обрезала маска раздела жёсткой линией) */
.plans { padding-bottom: 72px; }
.plans-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 36px; margin-top: 52px; }
.plans-foot p { --sa: 0.72; --scrim-in: -30px -40px; flex: 1 1 22em; max-width: 34em; color: var(--text-2); font-size: var(--t-small); line-height: 1.55; text-wrap: pretty; }
.plans-foot p b { color: var(--text); font-weight: 600; }

/* ── Финал: Земля — одна точка ── */
/* Сверху — большой отступ: на остановке финала текст тарифов уже целиком ушёл выше линии высотомера (не просвечивает под ним) */
.final { position: relative; z-index: 2; padding: clamp(200px, 34vh, 360px) var(--gutter) clamp(96px, 14vh, 150px); text-align: center; }
.final-in { --sa: 0.55; --scrim-in: -60px -8%; display: flex; flex-direction: column; align-items: center; }
.final h2 { font-family: var(--f-display); font-size: var(--t-l); font-weight: 650; line-height: 1.02; letter-spacing: -0.036em; text-wrap: balance; }
.final-in > p { margin-top: 18px; max-width: 30em; font-size: var(--t-lead); line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.btn-giant { width: min(100%, 780px); min-height: 124px; margin-top: 48px; padding-bottom: 10px; border-radius: 38px; font-family: var(--f-display); font-size: clamp(22px, 2.6vw, 34px); font-weight: 600; letter-spacing: -0.02em; box-shadow: inset 0 0 0 1px rgba(155, 232, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 30px 90px -20px rgba(37, 102, 232, 0.75); }
.btn-giant .icon { width: 1.05em; height: 1.05em; }
.btn-giant .wv .w1 { height: 52px; }
.btn-giant .wv .w2 { height: 44px; }
.btn-giant .lbl { gap: 16px; }
/* Финал: волна один раз заливает кнопку — эхо «Подключиться» из кабинета */
.btn-giant .wv svg { transition: height 900ms var(--ease-silk), translate 600ms var(--ease-silk); }
.btn-giant.is-surge .wv .w1 { height: 150%; }
.btn-giant.is-surge .wv .w2 { height: 128%; }
.final-alt { margin-top: 26px; font-size: var(--t-small); color: var(--text-2); }
.final-alt a { padding-block: 12px; font-weight: 600; color: var(--text); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: rgba(238, 243, 255, 0.35); transition: text-decoration-color 200ms ease; }
.final-alt a:hover { text-decoration-color: currentColor; }

/* ── Подвал ── */
.foot { position: relative; z-index: 2; }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; margin: 0 var(--edge); padding: 26px 0 40px; border-top: 1px solid var(--hair); font-size: var(--t-small); color: var(--text-2); }
.foot-in .copy { margin-right: auto; }
.foot-in nav { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-right: -10px; }
.foot-in nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: 10px; text-decoration: none; transition: color 150ms ease, background-color 150ms ease; }
.foot-in nav a:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.foot-note { flex-basis: 100%; font-size: var(--t-cap); color: var(--text-3); }

/* ── Вступление (JS добавляет .intro, «уменьшить движение» — нет) ── */
.intro .top-in { animation: fade 700ms var(--ease-out) both; }
.intro .hero h1 .ln > span { animation: rise 1100ms var(--ease-silk) both; }
.intro .hero h1 .ln-1 > span { animation-delay: 150ms; }
.intro .hero h1 .ln-2 > span { animation-delay: 270ms; }
.intro .hero h1 .ln-3 > span { animation-delay: 390ms; }
.intro .lead { animation: lift 900ms var(--ease-silk) 560ms both; }
.intro .cta-row > * { animation: lift 900ms var(--ease-silk) both; }
.intro .cta-row > :nth-child(1) { animation-delay: 700ms; }
.intro .cta-row > :nth-child(2) { animation-delay: 790ms; }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { transform: translateY(105%); } }
@keyframes lift { from { opacity: 0; transform: translateY(16px); } }

/* ── Без JS: обычная страница, телефон стоит под первым экраном, главы — текстом ── */
html:not(.js) .stage { display: flex; flex-direction: column; }
html:not(.js) .hero { order: 0; min-height: 0; padding-bottom: 24px; }
html:not(.js) .pin-track { order: 1; position: relative; inset: auto; }
html:not(.js) .pin { position: relative; height: 640px; overflow: clip; }
html:not(.js) .device { left: 50%; transform: translateX(-50%) scale(0.72); transform-origin: 50% 0; }
html:not(.js) .chapter { order: 2; height: auto; padding-top: 0; }
html:not(.js) .cap { position: static; height: auto; padding: 48px 0; }
html:not(.js) .cap-in { --sa: 0.6; width: auto; margin: 0 var(--edge); padding: 0; }
html:not(.js) .rail, html:not(.js) .scrim-track, html:not(.js) .screen-light { display: none; }

/* ── Телефон (портрет): 390×844 и уже ──
   «Узкий и не лежит на боку»: телефон на боку (невысокий экран в ландшафте) получает раскладку компьютера в две колонки
   (ниже, блок max-height: 560px). site.js держит то же правило (mqDesk — его отрицание). */
@media (max-width: 899px) and (orientation: portrait), (max-width: 899px) and (min-height: 561px) {
  :root {
    --header-h: 58px;
    --hud-h: 26px;
    --band-ramp: 26px;
    --cap-w: auto;
    --dock-top: calc(var(--header-h) + var(--hud-h) + 6px);
    /* Док: подписи внизу получают свою полосу (--cap-area), телефон — остальное, но не больше 51svh. На невысоких экранах подписи
       компактные (ниже), и телефон остаётся не меньше ~43 % высоты (раньше на 375×553 он сжимался до 71×149 px) */
    --cap-area: clamp(180px, 34svh, 300px);
    --dock-h: max(140px, min(51svh, calc(100svh - var(--dock-top) - 34px - var(--cap-area))));
    --cap-top: calc(var(--dock-top) + var(--dock-h) + 34px);
    --hero-ph: min(560px, 66svh);
  }
  .nav { display: none; }
  .top-in { padding: 0 16px; gap: 4px; }
  .brand { gap: 8px; font-size: 16px; }
  .top .btn-pill { margin-left: 0; padding: 0 16px; }
  .top .login { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font-size: 15px; font-weight: 600; color: var(--text-2); text-decoration: none; }
  .brand img { width: 30px; height: 30px; }
  .hud { left: 16px; right: 16px; gap: 0 14px; font-size: 12.5px; }
  .hud-scale { width: 40px; margin-right: -2px; }
  .hud-rot { height: 40px; }
  .hud-alt b { font-size: 15px; }
  .hud-place:not(:empty) ~ .hud-time { display: none; }
  .hero { padding-top: calc(var(--fade-line) + 26px); }
  .hero h1 { font-size: clamp(40px, 11.6vw, 52px); letter-spacing: -0.038em; }
  .hero-in { --sa: 0.6; align-items: stretch; }
  /* Затемнения на телефоне — полосой во всю ширину экрана с плавным спадом сверху и снизу (у пятна нет боковых краёв) */
  .scrim::before { inset: -52px calc(-1 * var(--gutter)) -52px;
    background: linear-gradient(to bottom, rgb(0 0 0 / 0) 0, rgb(0 0 0 / calc(var(--sa, 0.6) * 0.16)) 13px, rgb(0 0 0 / calc(var(--sa, 0.6) * 0.5)) 26px,
      rgb(0 0 0 / calc(var(--sa, 0.6) * 0.84)) 39px, rgb(0 0 0 / var(--sa, 0.6)) 52px, rgb(0 0 0 / var(--sa, 0.6)) calc(100% - 52px),
      rgb(0 0 0 / calc(var(--sa, 0.6) * 0.84)) calc(100% - 39px), rgb(0 0 0 / calc(var(--sa, 0.6) * 0.5)) calc(100% - 26px), rgb(0 0 0 / calc(var(--sa, 0.6) * 0.16)) calc(100% - 13px), rgb(0 0 0 / 0) 100%); }
  .lead { margin-top: 18px; }
  /* Кнопки первого экрана: главная — во всю ширину; «Войти на сайте» — ссылкой под ней (вход есть и в шапке): кнопок меньше по
     высоте, и телефон с восходом над его краем помещается в первый экран даже на невысоких телефонах */
  .cta-row { flex-direction: column; align-items: stretch; margin-top: 24px; gap: 2px; }
  .cta-row > .btn-wave { width: 100%; }
  .cta-row > .btn-quiet { align-self: center; min-height: 44px; padding: 0 14px; background: none; box-shadow: none; font-size: 16px;
    text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; text-decoration-color: rgba(238, 243, 255, 0.35); }
  .hero-slot { margin-top: 44px; }
  .dock-slot { left: var(--gutter); right: var(--gutter); width: auto; }
  /* Затемнение под подписями — во всю ширину, с плавным спадом сверху и снизу (снизу — за краем экрана, пока слой приколот;
     когда рассказ кончается и слой уезжает, на экран выходит спад, а не край: 29-09 край проходил по Земле линией). site.js ещё и
     гасит полосу вместе с уходом телефона */
  .scrim-pin::before { left: 0; right: 0; width: auto; top: calc(var(--cap-top) - 84px); bottom: -170px;
    background: linear-gradient(to bottom, rgb(0 0 0 / 0) 0, rgb(0 0 0 / 0.08) 16px, rgb(0 0 0 / 0.26) 34px, rgb(0 0 0 / 0.47) 52px, rgb(0 0 0 / 0.62) 70px, rgb(0 0 0 / 0.7) 88px,
      rgb(0 0 0 / 0.72) calc(100% - 160px), rgb(0 0 0 / 0.62) calc(100% - 128px), rgb(0 0 0 / 0.4) calc(100% - 96px), rgb(0 0 0 / 0.17) calc(100% - 60px), rgb(0 0 0 / 0.04) calc(100% - 26px), rgb(0 0 0 / 0) 100%); }
  .screen-light { width: 560px; height: 560px; margin: -280px 0 0 -280px; }
  .chapter { height: 125svh; }
  .chapter[data-ch="0"] { height: calc(170svh + 22svh); padding-top: 22svh; }
  .chapter[data-ch="2"] { height: 140svh; }
  .chapter[data-ch="3"] { height: 160svh; }
  .cap { top: var(--cap-top); height: auto; align-items: flex-start; }
  .cap-in { width: auto; margin: 0 var(--gutter); padding: 0 0 24px; }
  .cap h2 { font-size: 26px; letter-spacing: -0.025em; }
  .cap p { margin-top: 10px; font-size: 16px; line-height: 1.5; }
  .steps { margin-top: 12px; gap: 0; }
  .steps li { grid-template-columns: 26px 1fr; column-gap: 12px; padding: 5px 0; }
  .steps li::before { width: 26px; height: 26px; font-size: 13px; }
  .steps li.is-on::before { box-shadow: 0 0 0 4px rgba(238, 243, 255, 0.1); }
  .steps b { padding-top: 2px; font-size: 16px; }
  .steps span { display: grid; grid-template-rows: 0fr; font-size: 14px; transition: grid-template-rows 420ms var(--ease-sheet); }
  .steps span > span { min-height: 0; overflow: hidden; }
  .steps li.is-on span { grid-template-rows: 1fr; }
  html:not(.js) .steps span { grid-template-rows: 1fr; }
  .cities { margin-top: 14px; gap: 8px; }
  .cities li { min-height: 52px; padding: 8px 10px; gap: 10px; border-radius: 14px; }
  .cities li::after { right: 10px; }
  .cities .flag { width: 24px; height: 17px; }
  .cities b { font-size: 14px; }
  .cities small { font-size: 12px; }
  .rail { left: var(--gutter); right: var(--gutter); top: calc(var(--cap-top) - 40px); bottom: auto; gap: 6px; }
  .rail::before { display: none; }
  .rail button { flex: 1; min-width: 0; font-size: 0; gap: 0; justify-content: center; padding: 0; }
  .rail button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

  .sec-head { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .plans .sec-head { --sa: 0.74; max-width: none; }
  .features .sec-head { max-width: none; }
  /* У Луны на телефоне: между иллюминаторами и тарифами — просвет для Луны (только когда сцена есть): в нём камера поворачивает
     к Луне, когда карточки уже ушли (site.js, yClear) */
  html[data-bg="scene"] .plans { padding-top: 80svh; }
  .macro-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .macro, .macro.is-wide, .macro.is-mid { grid-column: auto; border-radius: 34px; padding: 12px 12px 26px; }
  .lens, .macro:not(.is-wide):not(.is-mid) .lens { height: 236px; border-radius: 22px; }
  .lens::before { border-radius: 28px; }
  .macro.is-wide .lens-obj, .macro.is-mid .lens-obj { zoom: 1; }
  .lens .c-toggle { display: none; }
  .lens-obj, .macro.is-wide .lens-obj { width: min(100% - 28px, 340px); }
  .player { margin-inline: 4px; }
  .macro > h3 { margin: 20px 14px 0; }
  .macro > p { margin: 6px 14px 0; }

  .slab { grid-template-columns: minmax(0, 1fr); border-radius: 28px; }
  .plan { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 12px; padding: 20px 20px 20px; }
  .plan + .plan::before { left: 20px; right: 20px; top: 0; bottom: auto; width: auto; height: 1px; }
  .plan h3 { grid-column: 1; grid-row: 1; font-size: 19px; }
  .price { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0; font-size: 36px; }
  .per { grid-column: 1; grid-row: 2; margin-top: 4px; }
  .bar { grid-column: 1 / -1; padding-top: 14px; }
  .plan.is-pop { margin: 6px -6px; padding: 38px 26px 22px; border-radius: 26px; }
  .pop { left: 26px; top: 12px; font-size: 12px; }
  .plans-foot { margin-top: 36px; }
  .plans-foot .btn-wave { width: 100%; }
  /* абзац — во всю ширину: его затемнение — полосой от края до края, без вертикального края на планшете */
  .plans-foot p { flex-basis: 100%; max-width: none; }

  .final { padding-top: clamp(170px, 26vh, 250px); }
  .btn-giant { min-height: 96px; border-radius: 30px; margin-top: 36px; }
  .btn-giant .wv .w1 { height: 40px; }
  .btn-giant .wv .w2 { height: 34px; }
  .foot-in { margin: 0 var(--gutter); padding: 24px 0 32px; }
  .foot-in .copy { flex-basis: 100%; }
  .foot-in nav { margin-left: -10px; }
}
/* Невысокие телефоны (Safari с панелями 390×664, iPhone SE, 360×640): первый экран плотнее — телефон и восход над ним видны
   сразу (раньше телефон начинался на 590–613 px, а солнце стояло за главной кнопкой); подписи рассказа компактные —
   помещаются в свою полосу под доком, а телефону остаётся место */
@media (max-width: 899px) and (max-height: 820px) and (orientation: portrait) {
  .hero { padding-top: calc(var(--fade-line) + 22px); }
  .hero h1 { font-size: clamp(34px, 9.8vw, 42px); }
  .lead { margin-top: 12px; font-size: 16px; line-height: 1.45; }
  .cta-row { margin-top: 18px; }
  .cta-row > .btn-wave { min-height: 54px; }
  .hero-slot { margin-top: 46px; }
}
@media (max-width: 899px) and (max-height: 760px) and (orientation: portrait) {
  .cap-in { padding-bottom: 14px; }
  .cap h2 { font-size: 22px; }
  .cap p { margin-top: 8px; font-size: 14.5px; line-height: 1.45; }
  .steps { margin-top: 8px; }
  .steps li { grid-template-columns: 24px 1fr; padding: 3px 0; }
  .steps li::before { width: 24px; height: 24px; font-size: 12px; }
  .steps b { font-size: 15px; padding-top: 1px; }
  .steps span { font-size: 13.5px; }
  /* города — одним рядом: флаг и город (страна и так видна по флагу, полный список — в телефоне) */
  .cities { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
  .cities li { flex-direction: column; justify-content: center; gap: 4px; min-height: 44px; padding: 6px 4px; border-radius: 12px; text-align: center; }
  .cities li::after { right: 6px; top: 8px; margin-top: 0; width: 6px; height: 6px; }
  .cities .flag { width: 20px; height: 14px; }
  .cities b { font-size: 12px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .cities small { display: none; }
  .final { padding-top: clamp(140px, 22vh, 200px); }
  .final-in > p { font-size: 16px; }
  .btn-giant { min-height: 76px; margin-top: 26px; font-size: 22px; border-radius: 26px; }
  .final-alt { margin-top: 16px; font-size: 14px; }
}
@media (max-width: 899px) and (max-height: 620px) and (orientation: portrait) {
  .hero h1 { font-size: clamp(32px, 9.4vw, 38px); }
  .lead { font-size: 15px; }
  .hero-slot { margin-top: 40px; }
}
/* Планшет в портрете (700–899 px): крупнее шрифты, кнопки рядом, телефон ~60 % высоты, подписи — колонкой по центру */
@media (min-width: 700px) and (max-width: 899px) and (orientation: portrait) {
  :root { --cap-area: clamp(260px, 30svh, 360px); --dock-h: max(140px, min(60svh, calc(100svh - var(--dock-top) - 34px - var(--cap-area)))); --hero-ph: min(720px, 62svh); }
  .hero h1 { font-size: clamp(52px, 8.6vw, 76px); }
  .lead { max-width: 32em; margin-inline: auto; font-size: 19px; }
  .cta-row { flex-direction: row; justify-content: center; gap: 12px; }
  .cta-row > .btn-wave { width: auto; }
  .cta-row > .btn-quiet { align-self: auto; min-height: 58px; padding: 0 26px 5px; background: var(--hull); box-shadow: inset 0 0 0 1px var(--hair-strong), 0 12px 30px -14px rgba(0, 0, 0, 0.9); text-decoration: none; font-size: 17px; }
  .cap-in { max-width: 600px; margin-inline: auto; }
  .cap h2 { font-size: clamp(26px, 4vw, 38px); }
  .cap p { font-size: 18px; }
  .cities { max-width: 560px; }
  .rail { left: max(var(--gutter), calc(50% - 300px)); right: max(var(--gutter), calc(50% - 300px)); }
}
/* Совсем узко (320 px): карточка «Обход глушилок» в окне выше, чем окно — окно растёт по содержимому */
@media (max-width: 340px) {
  .lens, .macro:not(.is-wide):not(.is-mid) .lens { height: auto; min-height: 236px; padding-block: 16px; }
}
/* Телефон на боку и невысокие окна: раскладка компьютера (подписи слева, телефон в доке справа) — плотнее: низкая шапка,
   короткий первый экран (обе кнопки над сгибом), компактные подписи, телефон вписан по высоте. Раньше на 844×390 телефон
   в рассказе исчезал совсем (док получал отрицательную высоту), а подписи налезали на высотомер */
@media (orientation: landscape) and (max-height: 560px) {
  :root { --header-h: 50px; --hud-h: 26px; --band-ramp: 26px; --dock-top: calc(var(--fade-line) + 6px); --dock-h: calc(100svh - var(--fade-line) - 18px);
    --hero-ph: calc(100svh - var(--fade-line) - 24px); --cap-w: min(54vw, 440px); }
  .top-in { gap: 4px; }
  .nav a { padding: 0 10px; font-size: 14px; }
  .brand { font-size: 16px; }
  .brand img { width: 28px; height: 28px; }
  .hud { font-size: 12px; }
  .hud-alt b { font-size: 15px; }
  .hero { padding-top: calc(var(--fade-line) + 10px); }
  .hero h1 { font-size: clamp(32px, 9vh, 44px); }
  .lead { margin-top: 10px; font-size: 15px; line-height: 1.45; max-width: 44em; }
  .cta-row { margin-top: 14px; gap: 10px; }
  .btn-wave, .btn-quiet { min-height: 48px; padding: 0 22px 4px; font-size: 16px; border-radius: 15px; }
  .hero-slot { margin-top: 22px; }
  .dock-slot { width: min(32vw, 420px); }
  .cap-in { padding: var(--fade-line) 0 12px; }
  .cap h2 { font-size: 22px; }
  .cap p { margin-top: 8px; font-size: 14.5px; line-height: 1.45; }
  .steps { margin-top: 10px; gap: 0; }
  .steps li { grid-template-columns: 26px 1fr; column-gap: 12px; padding: 4px 0; }
  .steps li::before { width: 26px; height: 26px; font-size: 13px; }
  .steps b { padding-top: 2px; font-size: 15px; }
  .steps span { display: none; font-size: 13.5px; }
  .steps li.is-on span { display: block; }
  .cities { margin-top: 10px; gap: 6px; }
  .cities li { min-height: 40px; padding: 5px 10px; border-radius: 12px; }
  .cities b { font-size: 13.5px; }
  .cities small { font-size: 11.5px; }
  .rail { display: none; }
  .sec { padding-top: 72px; }
  .sec-head h2, .final h2 { font-size: clamp(30px, 4.4vw, 40px); }
  .btn-giant { min-height: 84px; margin-top: 28px; }
  .final { padding-top: 160px; }
}
@media (min-width: 900px), (orientation: landscape) and (max-height: 560px) { .top .login { display: none; } }
@media (max-width: 380px) {
  .btn-wave, .btn-quiet { padding-inline: 18px; font-size: 16px; }
  .top .login { display: none; }
  .hud-scale { display: none; }
}

/* ── Уменьшенное движение: всё на месте и читается в покое ── */
@media (prefers-reduced-motion: reduce) {
  .btn-wave .wv svg, .gs-lite .wvg svg, .macro.in .player-bar span, .macro.in .look::after, .bubble .dots i { animation: none !important; }
  .js .macro.pre .lens-obj { filter: none; transform: none; opacity: 1; }
  .js .slab.pre .bar i b { transform: none; }
  .ripple { display: none; }
  .plan:hover { translate: none; }
  .sky, .hud { transition: none; }
}