/* =================================================================
   FIXED VPN — landing
   ================================================================= */
/* ---------- токены темы ----------
   Ни одно правило ниже не пишет цвет литералом. Это не аккуратность ради
   аккуратности: файл был написан именно литералами, и когда понадобилась
   светлая тема, половина блоков — круг на первом экране, туман, плитки
   сервисов, схема, тарифы — осталась бы тёмной, потому что переопределять
   было нечего.

   База на голом :root — тёмная: сайт нарисован тёмным, свечения и
   конические градиенты рассчитаны на чёрный фон. Светлая тема
   переопределяет ТОЛЬКО токены, в самом низу файла.

   Что остаётся тёмным в обеих темах и почему: экран телефона в макете —
   это изображение устройства, а не наша поверхность; шар в разделе про
   защиту — объект, он и должен лежать на бумаге тёмным. Их цвета
   намеренно оставлены литералами, токены им не нужны. */
:root{
  /* поверхности и текст */
  --bg:#05060f;
  --bg-deep:#04050c;                 /* заставка: на полтона глубже фона */
  --txt:#eef2ff;
  --txt-2:#d4dbf5;                   /* списки и код: ярче muted, тише txt */
  --muted:#a9b2d6;
  --dim:#8b95bd;
  --ink:#fff;                        /* максимальный контраст */
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.16);
  --surface:rgba(255,255,255,.05);
  --surface-2:rgba(255,255,255,.10);
  --card:linear-gradient(180deg, rgba(20,22,52,.72), rgba(11,12,31,.72));
  --accent:#6133ee;                  /* фиолетовый из знака FIXED */
  --accent-soft:rgba(97,51,238,.16);
  --accent-txt:#8ea2ff;              /* акцент как цвет текста */
  --accent-line:rgba(150,170,255,.34);
  --link:#a9bcff;
  --chevron:rgba(200,210,255,.55);

  /* шапка и меню */
  --nav-bg:rgba(6,8,20,.75);
  --nav-bg-solid:rgba(6,8,20,.92);
  --nav-link:#dfe4fb;
  --menu-bg:radial-gradient(120% 60% at 50% 0%, rgba(97,51,238,.16), transparent 62%),
            rgba(6,8,20,.96);

  /* кнопки */
  --btn-fg:#0a0c1c;
  --btn-bg:#fff;
  --btn-border:rgba(255,255,255,.7);
  --btn-shadow:0 8px 30px rgba(120,140,255,.22);
  --btn-shadow-hi:0 14px 40px rgba(120,140,255,.4);
  --fill:linear-gradient(180deg, rgba(120,80,255,.98), rgba(97,51,238,.98));
  --fill-fg:#fff;
  --fill-line:rgba(160,130,255,.5);
  --fill-shadow:0 10px 30px rgba(97,51,238,.35);

  /* заставка */
  --pre-bar:#e8edff;
  --pre-bar-glow:rgba(140,170,255,.85);
  --pre-blob:rgba(50,75,235,.16);

  /* первый экран: свечения по углам, кольцо, блик, подсказка */
  --glow-o:.22;
  --glow-a:rgba(43,59,255,.20);
  --glow-b:rgba(120,60,220,.16);
  --orb-line:conic-gradient(from 180deg,
    rgba(255,255,255,.95) 0%, rgba(150,175,255,.8) 14%, rgba(70,100,240,.7) 30%,
    rgba(215,130,255,.55) 44%, rgba(255,255,255,.9) 56%, rgba(90,120,245,.7) 72%,
    rgba(170,190,255,.8) 88%, rgba(255,255,255,.95) 100%);
  --orb-halo:conic-gradient(from 180deg,
    rgba(120,150,255,.55), rgba(40,70,235,.4) 25%, rgba(200,110,255,.3) 45%,
    rgba(140,170,255,.55) 60%, rgba(45,75,235,.4) 80%, rgba(120,150,255,.55));
  --orb-halo-o:.7;
  --orb-halo-flat:radial-gradient(closest-side circle,
    transparent 0 89%, rgba(105,135,250,.42) 96%,
    rgba(150,120,255,.30) 99%, transparent 100%);
  --flare:radial-gradient(circle,#fff 0 20%, rgba(200,215,255,.7) 42%, rgba(120,150,255,0) 72%);
  --flare-shadow:0 0 30px 8px rgba(170,190,255,.35);
  --wordmark-shadow:0 0 34px rgba(120,150,255,.28);
  --hint:rgba(210,222,255,.7);
  --hint-line:linear-gradient(to bottom,rgba(255,255,255,.04),rgba(255,255,255,.16));
  --hint-beam:#d5e2ff;
  /* Статичная замена шейдеру на телефоне. */
  --fog:radial-gradient(85% 55% at 50% 0%, rgba(43,59,255,.20), transparent 62%),
        radial-gradient(75% 50% at 82% 100%, rgba(120,60,220,.16), transparent 62%),
        var(--bg);

  /* большие плиты: карточка «быстро» и финальная */
  --slab:linear-gradient(180deg,#080a1e 0%,#0a0c26 55%,#0d0b30 100%);
  --slab-2:linear-gradient(180deg,#0b0e28 0%,#141046 100%);
  --final-glow:radial-gradient(closest-side, rgba(110,85,255,.55), transparent 72%);
  --grid-line:rgba(140,160,255,.12);

  /* схема подписки: провода, пакеты, ярлыки */
  --wire:rgba(160,180,255,.5);
  --wire-a:#6f86ff;
  --wire-b:#9ab0ff;
  --pkt:#cfe0ff;
  --pkt-glow:rgba(150,185,255,.9);
  --pkt-alt:#dcc9ff;
  --pkt-alt-glow:rgba(190,160,255,.9);
  --badge-fg:#cfd8ff;
  --badge-bg:rgba(120,140,255,.12);
  --badge-line:rgba(150,170,255,.28);
  --chip-ok-fg:#8ff0bd;
  --chip-ok-bg:rgba(110,240,165,.12);
  --chip-ok-line:rgba(110,240,165,.35);
  --chip-alt-fg:#c3b2ff;
  --chip-alt-bg:rgba(160,140,255,.12);
  --chip-alt-line:rgba(170,150,255,.35);

  /* комета, искры, галочки */
  --comet:rgba(255,255,255,.95);
  --comet-soft:rgba(200,215,255,.15);
  --comet-head:#fff;
  --comet-glow:rgba(170,190,255,.6);
  --comet-head-glow:rgba(180,200,255,.85);
  --spark:#dbe4ff;
  --art-comet-bg:radial-gradient(circle at 30% 20%, rgba(60,50,200,.5), transparent 60%);
  --cell-bg:rgba(120,140,255,.10);
  --cell-line:rgba(190,205,255,.55);
  --cell-glow:0 0 40px rgba(110,120,255,.3);
  --tick-bg:rgba(120,140,255,.18);
  --tick-line:rgba(160,180,255,.45);
  --check-ink:#dbe4ff;

  /* орбиты вокруг шара — они лежат на фоне страницы, а не на шаре */
  --orbit-line:rgba(140,165,255,.14);
  --orbit-line-2:rgba(180,150,255,.12);
  --orbit-dot:#dbe6ff;
  --orbit-dot-glow:rgba(150,185,255,.65);
  --orbit-dot-2:#e2d5ff;
  --orbit-dot-2-glow:rgba(190,160,255,.6);

  /* тарифы, вопросы, лента сервисов */
  --plan-shadow:0 24px 80px rgba(50,40,180,.32);
  --plan-glow:radial-gradient(closest-side, rgba(90,70,240,.26), transparent 70%);
  --plan-glow-hi:radial-gradient(closest-side, rgba(120,95,255,.42), transparent 70%);
  --qa-bg:rgba(17,19,45,.6);
  --tile:#080a16;
  --tile-hi:#0b0e1e;
  --tile-ic:#04050d;

  /* Шар в разделе про защиту. Единственный крупный объект, у которого
     своя светотень: в тёмной теме он светится изнутри, в светлой это
     матовый лиловый шар на бумаге. Тёмным его в светлой теме оставить
     нельзя — заголовок раздела заходит на его низ и стал бы нечитаемым. */
  --sphere-bg:
    radial-gradient(circle at 50% 36%, rgba(120,110,255,.42), rgba(40,28,140,.5) 46%, rgba(8,8,30,.95) 74%),
    radial-gradient(circle at 50% 50%, rgba(50,38,190,.45), transparent 70%);
  --sphere-shadow:0 0 110px rgba(70,50,210,.35), inset 0 -30px 90px rgba(0,0,0,.65);
  --sphere-dot:rgba(200,218,255,.85);
  --sphere-dot-2:rgba(150,180,255,.6);
  --sphere-shine:radial-gradient(circle at 62% 22%, rgba(255,255,255,.20), transparent 42%);
  --sphere-scan:linear-gradient(90deg, transparent, rgba(160,190,255,.16) 45%, rgba(210,225,255,.28) 55%, transparent);
  --sphere-grid:#8ea6ff;

  /* Экран телефона. Раньше он был нарисован цветами прямо в правилах —
     и оставался чёрным на светлой теме, единственным тёмным пятном на
     странице. Токены отдельные, а не общие: это макет чужого приложения
     внутри страницы, у него своя глубина, и подмешивать в него --card
     значило бы растворить корпус в фоне. */
  --ph-bg:linear-gradient(180deg,#0b0d24 0%,#090b1c 55%,#0e0a2c 100%);
  --ph-fg:#eaefff;
  --ph-fg-2:#c8d2f7;
  --ph-dim:#9aa5cd;
  --ph-cap:#cfd7f7;
  --ph-line:rgba(255,255,255,.08);
  --ph-line-2:rgba(234,239,255,.5);
  --ph-tile:rgba(255,255,255,.07);
  --ph-ic:#c9d3ff;
  --ph-btn:rgba(10,12,32,.8);
  --ph-btn-fg:#e7ecff;
  --ph-btn-cap:#b9c3ee;
  --ph-pkt:#bcd2ff;
  --ph-pkt-glow:rgba(150,180,255,.7);
  --ph-globe-core:#3b5cff;
  --ph-globe-edge:#0a0f3a;
  --ph-globe-line:#7f9dff;
  --ph-globe-dot:#cfe0ff;
  --tile-shadow:none;

  --font-display:"Chakra Petch","Inter",sans-serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --nav-h:74px;
  --pad:34px;
  --maxw:1200px;
  --r:24px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--txt);
  font-family:var(--font-body);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
body.menu-open{overflow:hidden}
img,svg{max-width:100%}
h1,h2,h3,.plan-price b,.step-num,.node-name,.logo-mark,.pre-name,.foot-brand,.phone-logo{
  font-family:var(--font-display);
}

/* ---------- animated fog background ---------- */
.vanta-bg{
  position:fixed;inset:0;z-index:-1;
  background:var(--bg);
  opacity:0;transition:opacity 1.4s ease;
}
.vanta-bg.on{opacity:1}
.vanta-bg canvas{display:block}

/* ---------- layout ---------- */
.section{
  width:100%;max-width:calc(var(--maxw) + var(--pad)*2);
  margin:0 auto;padding:clamp(72px,9vw,130px) var(--pad);
}
.sec-head{max-width:720px;margin:0 auto;text-align:center}
.sec-title{font-size:clamp(28px,3.6vw,46px);font-weight:600;letter-spacing:-.01em;line-height:1.15}
.sec-sub{margin-top:16px;font-size:clamp(14.5px,1.4vw,16.5px);line-height:1.65;color:var(--muted)}

.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.3,1)}
.reveal.in{opacity:1;transform:none}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;font-weight:500;white-space:nowrap;text-align:center;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn-white{background:var(--btn-bg);color:var(--btn-fg);box-shadow:var(--btn-shadow)}
.btn-white:hover{transform:translateY(-2px);box-shadow:var(--btn-shadow-hi)}
/* Главное действие сайта. Фирменный цвет, а не «белая на тёмном»: с
   неё начинается весь путь до покупки, и она обязана выделяться среди
   остальных кнопок страницы, а не сливаться с ними. */
.btn-fill{
  background:var(--fill);color:var(--fill-fg);
  border:1px solid var(--fill-line);box-shadow:var(--fill-shadow);
}
.btn-fill:hover{transform:translateY(-2px);box-shadow:var(--fill-shadow),0 0 0 6px var(--accent-soft)}
.btn-ghost{
  background:var(--surface);color:var(--txt);border:1px solid var(--line-2);
}
.btn-ghost:hover{background:var(--surface-2);transform:translateY(-2px)}
.btn-sm{padding:11px 22px;font-size:13.5px}
.btn-lg{padding:16px 38px;font-size:15.5px;min-height:54px}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:80;
  transition:background .35s ease, backdrop-filter .35s ease, border-color .35s ease;
  border-bottom:1px solid transparent;
}
.nav.scrolled{background:var(--nav-bg);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
/* Раньше шапка была флексом, а ссылки центрировались через margin:0 auto.
   Так они встают по центру ОСТАВШЕГОСЯ места: слева капсула логотипа шириной
   под 200 px, справа одно слово — ссылки уезжали влево. Сетка из трёх колонок
   с одинаковыми крайними ставит их ровно по центру шапки. */
.nav-inner{
  height:var(--nav-h);
  width:100%;max-width:calc(1440px + var(--pad)*2);margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;
}
.logo-mark{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 18px 9px 13px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line-2);
  font-weight:500;font-size:13.5px;letter-spacing:.22em;white-space:nowrap;
}
/* Знак идёт светлой F: чёрная на тёмной шапке пропадала бы. */
.logo-img{display:block;height:20px;width:auto}
.nav-links{display:flex;align-items:center;gap:30px;justify-self:center}
.nav-links a{font-size:13.5px;color:var(--nav-link);opacity:.85;transition:opacity .2s}
.nav-links a:hover{opacity:1}
.nav-right{display:flex;align-items:center;gap:14px;justify-self:end}
.login{font-size:13.5px;color:var(--nav-link);opacity:.9}
.login:hover{opacity:1}
/* Кабинет — главная кнопка сайта. Белая: на тёмном фоне это самый
   сильный контраст, сильнее любой заливки цветом, и она сразу читается
   как основное действие. Форма та же, что у капсулы логотипа, — шапка
   остаётся парной. */
.btn-cab{
  display:inline-flex;align-items:center;gap:9px;
  padding:10px 19px 10px 13px;border-radius:999px;white-space:nowrap;
  font-family:var(--font-display);
  font-size:12.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--btn-fg);
  background:var(--btn-bg);
  border:1px solid var(--btn-border);
  box-shadow:var(--btn-shadow);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
/* Значок контурный: залитый силуэт спорил бы с надписью. */
.cab-mark{display:block;flex:none;opacity:.75}
.btn-cab:hover{
  transform:translateY(-1px);
  box-shadow:var(--btn-shadow-hi);
}

.burger{
  display:none;width:42px;height:42px;border-radius:12px;
  background:var(--surface-2);border:1px solid var(--line-2);
  cursor:pointer;position:relative;
}
.burger span{
  position:absolute;left:11px;width:20px;height:1.6px;background:var(--txt);border-radius:2px;
  transition:transform .3s ease, opacity .3s ease;
}
.burger span:nth-child(1){top:17px}
.burger span:nth-child(2){top:23px}
.nav.open .burger span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.nav.open .burger span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

/* Меню на телефоне — не выпадающий список со служебными линейками, а лист
   во весь экран в том же стекле, что и карточки сайта. */
.mobile-menu{
  display:none;position:fixed;inset:var(--nav-h) 0 0;z-index:70;
  flex-direction:column;justify-content:space-between;gap:22px;
  padding:22px var(--pad) calc(26px + env(safe-area-inset-bottom));
  background:var(--menu-bg);
  backdrop-filter:blur(18px);
  overflow-y:auto;overscroll-behavior:contain;
}
.mm-list{display:flex;flex-direction:column;gap:10px}
.mm-link{
  display:flex;align-items:center;justify-content:space-between;
  padding:17px 18px;border-radius:18px;
  font-family:var(--font-display);font-size:17px;font-weight:500;letter-spacing:.01em;
  color:var(--txt);
  background:var(--card);
  border:1px solid var(--line);
  transition:border-color .25s ease, transform .25s ease, background .25s ease;
}
.mm-link::after{  /* шеврон вместо служебной стрелки-глифа */
  content:"";width:7px;height:7px;flex:none;
  border:solid var(--chevron);border-width:0 1.5px 1.5px 0;
  transform:rotate(-45deg);margin-right:3px;
}
.mm-link:active{transform:scale(.985)}
.mm-link:hover{border-color:var(--accent-line)}

.mm-actions{display:flex;flex-direction:column;gap:12px}
.mm-cab{
  display:block;text-align:center;padding:17px 20px;border-radius:18px;
  font-size:16px;font-weight:600;color:var(--fill-fg);
  background:var(--fill);
  border:1px solid var(--fill-line);
  box-shadow:var(--fill-shadow);
}
.mm-ghost{
  display:block;text-align:center;padding:16px 20px;border-radius:18px;
  font-size:15px;color:var(--txt);
  background:var(--surface);border:1px solid var(--line);
}

/* Появление с лёгкой лесенкой. Задержки заданы у самих строк: сокращённая
   запись animation сбрасывает animation-delay, поэтому она идёт первой. */
body.menu-open .mm-link,
body.menu-open .mm-actions > *{animation:mmIn 420ms cubic-bezier(.2,.8,.3,1) backwards}
body.menu-open .mm-link:nth-child(2){animation-delay:45ms}
body.menu-open .mm-link:nth-child(3){animation-delay:90ms}
body.menu-open .mm-link:nth-child(4){animation-delay:135ms}
body.menu-open .mm-link:nth-child(5){animation-delay:180ms}
body.menu-open .mm-actions > a:nth-child(1){animation-delay:215ms}
body.menu-open .mm-actions > a:nth-child(2){animation-delay:250ms}
body.menu-open .mm-actions > *:nth-child(3){animation-delay:285ms}
@keyframes mmIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- preloader ---------- */
.preloader{
  position:fixed;inset:0;z-index:200;background:var(--bg-deep);
  display:grid;place-items:center;
  transition:opacity .7s ease .15s, visibility .7s .15s;
  /* Внутри лежит blur(70px) на пол-экрана. Без подсказки браузер
     перерисовывает это размытие на каждом кадре фейда — ровно тогда,
     когда стартует интро. С will-change фейд уходит на композитор. */
  will-change:opacity;
}
.preloader::before{
  content:"";position:absolute;width:70vmin;height:70vmin;border-radius:50%;
  background:radial-gradient(circle, var(--pre-blob), transparent 65%);filter:blur(70px);
}
.preloader.done{opacity:0;visibility:hidden}
.pre-inner{position:relative;display:grid;justify-items:center}
.pre-ring{position:relative;width:118px;height:118px;display:grid;place-items:center}
.pre-svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.pre-track{fill:none;stroke:var(--line);stroke-width:2}
.pre-bar{
  fill:none;stroke:var(--pre-bar);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:339.3;stroke-dashoffset:339.3;
  filter:drop-shadow(0 0 6px var(--pre-bar-glow));
  transition:stroke-dashoffset .35s cubic-bezier(.3,.9,.3,1);
}
.pre-pct{font-family:var(--font-display);font-size:21px;color:var(--txt)}
.pre-pct::after{content:"%";font-size:11px;margin-left:2px;opacity:.6;vertical-align:top}
.pre-name{margin-top:28px;font-size:14px;letter-spacing:.5em;padding-left:.5em;color:var(--txt)}
.pre-hint{margin-top:10px;font-size:11.5px;color:var(--dim);animation:hintPulse 1.9s ease-in-out infinite}
@keyframes hintPulse{0%,100%{opacity:.45}50%{opacity:.95}}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:100vh;min-height:100svh;overflow:hidden;
  /* Диаметр круга нужен обоим: и самой сцене, и подписи под ней —
     она встаёт ровно посередине между низом круга и низом экрана. */
  --d:min(58vh, 86vw, 700px);
  --d:min(58svh, 86vw, 700px);
}
.hero-bg{position:absolute;inset:0;pointer-events:none}
.glow{position:absolute;filter:blur(120px);opacity:var(--glow-o)}
.glow-left{width:60vw;height:60vw;left:-25vw;top:-10vw;background:radial-gradient(circle,var(--glow-a),transparent 65%)}
.glow-right{width:55vw;height:55vw;right:-20vw;bottom:-15vw;background:radial-gradient(circle,var(--glow-b),transparent 65%)}

/* Круг стоит в центре экрана по вертикали, а не под шапкой: шапка
   прозрачная и лежит поверх, поэтому отсчитывать от неё нечего. */
.stage{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:var(--d);height:var(--d);
}
.ring{
  position:absolute;inset:0;
  transform:scale(2.35) translateY(-7%);
  transform-origin:50% 50%;
  /* opacity здесь тоже меняется — при скролле. Объявляем оба свойства,
     иначе слой переподнимается на первом же кадре прокрутки. */
  will-change:transform,opacity;
  backface-visibility:hidden;
}
/* Промежуточный кадр на 55% ломал плавность: easing применяется к каждому
   отрезку отдельно, поэтому круг тормозил на середине и снова разгонялся.
   Два кадра и одна кривая — уменьшение идёт непрерывно. */
body.loaded .ring{animation:ringIn 4600ms cubic-bezier(.19,.73,.14,1) forwards}
@keyframes ringIn{
  from{transform:scale(2.35) translateY(-7%)}
  to{transform:scale(1) translateY(0)}
}
/* Прогрев под прелоадером: показываем кольцо в конечном масштабе, чтобы
   браузер растеризовал маски и конический градиент заранее. */
body.warm .ring{transform:scale(1) translateY(0)}
.orb{position:absolute;inset:0;border-radius:50%}
.orb-line,.orb-halo{position:absolute;inset:0;border-radius:50%;pointer-events:none}
.orb-line{
  background:var(--orb-line);
  -webkit-mask:
    radial-gradient(closest-side circle, transparent 0 calc(100% - 2.2px), #000 calc(100% - 2.2px) 100%, transparent 100%),
    linear-gradient(to bottom, transparent 4%, rgba(0,0,0,.45) 24%, #000 52%);
  -webkit-mask-composite:source-in;
  mask:
    radial-gradient(closest-side circle, transparent 0 calc(100% - 2.2px), #000 calc(100% - 2.2px) 100%, transparent 100%),
    linear-gradient(to bottom, transparent 4%, rgba(0,0,0,.45) 24%, #000 52%);
  mask-composite:intersect;
}
.orb-halo{
  background:var(--orb-halo);
  -webkit-mask:
    radial-gradient(closest-side circle, transparent 0 calc(100% - 16px), #000 calc(100% - 6px) 100%, transparent 100%),
    linear-gradient(to bottom, transparent 6%, rgba(0,0,0,.4) 26%, #000 54%);
  -webkit-mask-composite:source-in;
  mask:
    radial-gradient(closest-side circle, transparent 0 calc(100% - 16px), #000 calc(100% - 6px) 100%, transparent 100%),
    linear-gradient(to bottom, transparent 6%, rgba(0,0,0,.4) 26%, #000 54%);
  mask-composite:intersect;
  filter:blur(13px);opacity:var(--orb-halo-o);
  animation:breathe 6s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.55}50%{opacity:.85}}
.orbit{position:absolute;inset:0;border-radius:50%;animation:spinSlow 22s linear infinite;will-change:transform}
@keyframes spinSlow{from{transform:rotate(20deg)}to{transform:rotate(380deg)}}
.flare{
  position:absolute;top:-11px;left:50%;width:22px;height:22px;border-radius:50%;
  transform:translateX(-50%);
  background:var(--flare);
  box-shadow:var(--flare-shadow);
}

/* the wordmark sits in the optical centre of the circle */
/* Это h1 страницы: сам знак и есть её заголовок. Браузерные отступы и
   размер шрифта у h1 свои, поэтому сбрасываем явно. */
.wordmark{
  margin:0;font-size:inherit;font-weight:inherit;
  position:absolute;inset:0;z-index:3;
  will-change:transform,opacity;
  display:flex;align-items:center;justify-content:center;
  gap:calc(var(--d) * .07);
  font-weight:600;font-size:calc(var(--d) * .17);
  line-height:1;letter-spacing:.02em;color:var(--ink);
  text-shadow:var(--wordmark-shadow);
  pointer-events:none;
}
.ltr{opacity:0;transform:translateY(14px) scale(.9);filter:blur(6px)}
body.loaded .ltr{animation:ltrIn 1500ms cubic-bezier(.22,.8,.28,1) forwards}
body.loaded .l-x{animation-delay:560ms}
body.loaded .l-e{animation-delay:850ms}
body.loaded .l-f{animation-delay:1150ms}
body.loaded .l-i{animation-delay:1400ms}
body.loaded .l-d{animation-delay:1650ms}
@keyframes ltrIn{to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}

/* Середина полосы между низом круга и низом экрана. Низ круга —
   50% + d/2, значит середина остатка это 50% + d/2 + (50% - d/2)/2,
   то есть 75% + d/4. Считаем, а не подбираем отступ: круг меняет размер
   вместе с экраном, и подобранное значение разъезжалось бы. */
.hero-copy{
  position:absolute;left:50%;top:calc(75% + var(--d) / 4);
  transform:translate(-50%,-50%);
  z-index:4;text-align:center;width:min(92vw,760px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  opacity:0;
}
body.loaded .hero-copy{animation:fadeUp 1300ms ease forwards 2900ms}
/* Кнопка первого экрана — единственное действие страницы, поэтому крупнее
   обычной большой и с запасом по ширине под одно слово. */
.btn-hero{padding:18px 54px;font-size:16.5px;min-height:58px}
.hero-note{
  margin-top:14px;max-width:340px;font-size:12.5px;line-height:1.5;color:var(--muted);
}
@keyframes fadeUp{
  from{opacity:0;transform:translate(-50%,calc(-50% + 18px))}
  to{opacity:1;transform:translate(-50%,-50%)}
}
/* ---------- подсказка «листайте вниз» ----------
   Луч бежит по тонкой линии сверху вниз и стрелка провожает его — движение
   само показывает направление, поэтому подписи не нужно. Появляется после
   заставки: во время интро на экране и так всё движется. */
.scroll-hint{
  position:absolute;left:50%;bottom:clamp(12px,2.6vh,28px);
  transform:translateX(-50%);
  z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  color:var(--hint);
  opacity:0;
  transition:color .25s ease;
}
.scroll-hint:hover{color:var(--ink)}
body.loaded .scroll-hint{animation:hintIn 900ms ease forwards 4800ms}
@keyframes hintIn{
  from{opacity:0;transform:translate(-50%,10px)}
  to{opacity:1;transform:translate(-50%,0)}
}
.sh-line{
  position:relative;width:1px;height:28px;overflow:hidden;
  background:var(--hint-line);
}
.sh-line::after{
  content:"";position:absolute;left:0;top:0;width:1px;height:13px;
  background:linear-gradient(to bottom,transparent,var(--hint-beam));
  animation:shBeam 2.4s cubic-bezier(.55,0,.45,1) infinite;
}
@keyframes shBeam{
  0%{transform:translateY(-15px);opacity:0}
  22%{opacity:1}
  100%{transform:translateY(28px);opacity:0}
}
.sh-arrow{display:block;animation:shBob 2.4s cubic-bezier(.55,0,.45,1) infinite}
@keyframes shBob{
  0%,100%{transform:translateY(0);opacity:.7}
  50%{transform:translateY(4px);opacity:1}
}

.hero-title{
  font-weight:500;letter-spacing:.06em;
  font-size:clamp(18px,2.2vw,29px);margin-bottom:24px;
}
.hero-note{margin-top:16px;font-size:13px;color:var(--muted)}

/* Пауза здесь не годится: WebKit на iOS продолжает отсчитывать
   animation-delay у приостановленной анимации, и к моменту снятия паузы
   часть букв «догоняла» разом. Поэтому анимации объявлены под body.loaded
   и до загрузки просто не существуют. Бесконечные вращения можно и паузить —
   у них нет задержки.
   Вращение и «дыхание» держим выключенными до конца интро: пока кольцо
   уменьшается, лишняя анимация внутри него заставляет перерисовывать
   размытый слой на каждом кадре. */
body:not(.intro-done) .orb-halo,
body:not(.intro-done) .orbit{animation-play-state:paused}

/* ---------- fast / stable / simple ---------- */
.fast-card{
  position:relative;overflow:hidden;border-radius:32px;isolation:isolate;
  background:var(--slab);
  border:1px solid var(--line);
  display:grid;grid-template-columns:1.05fr .95fr;align-items:end;gap:40px;
  padding:clamp(48px,6vw,92px) clamp(24px,4.6vw,70px) 0;
}
/* Ровная сетка — та же, что в карточке «Соединение переживает переезд».
   Раньше здесь крутился второй WebGL-контекст с дымом; он же был лишней
   нагрузкой на прокрутку. */
.grid-floor{
  position:absolute;inset:0;z-index:1;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:62px 62px;background-position:center;
  -webkit-mask-image:radial-gradient(120% 105% at 50% 100%, #000 35%, rgba(0,0,0,.55) 70%, transparent 96%);
  mask-image:radial-gradient(120% 105% at 50% 100%, #000 35%, rgba(0,0,0,.55) 70%, transparent 96%);
  pointer-events:none;
}
.fast-left{position:relative;z-index:3;padding-bottom:clamp(48px,7vw,110px)}
.fast-title{font-size:clamp(34px,4.6vw,62px);font-weight:600;line-height:1.08;letter-spacing:-.02em}
.fast-title span{display:block}
.fast-sub{margin-top:20px;font-size:clamp(14.5px,1.4vw,16px);color:var(--muted);max-width:420px}
.fast-cta{display:flex;align-items:center;gap:20px;margin-top:32px;flex-wrap:wrap}
.fast-note{font-size:12.5px;line-height:1.4;color:var(--muted)}
.fast-right{position:relative;z-index:3;display:flex;justify-content:center;align-self:end}

/* phone mockup */
/* Рамка — PNG с прозрачным экраном 1179x2556 внутри кадра 1359x2736.
   Отсюда и проценты: по горизонтали 90/1359, по вертикали 90/2736.
   Скругление экрана 165 px = 14% его ширины и 6.45% его высоты. */
.phone{
  --pw:328px;      /* ширина всего корпуса */
  --cut:120px;     /* насколько корпус уходит за нижний край карточки */
  position:relative;
  width:min(var(--pw),100%);
  aspect-ratio:1359/2736;
  margin-bottom:calc(var(--cut) * -1);
}
.phone::before{  /* свечение под корпусом */
  content:"";position:absolute;inset:8% 3% 12%;border-radius:44px;
  box-shadow:0 -12px 70px rgba(80,60,220,.45);
}
.phone-frame{
  position:absolute;inset:0;z-index:3;
  width:100%;height:100%;
  pointer-events:none;user-select:none;
}
.phone-screen{
  position:absolute;top:3.29%;left:6.62%;right:6.62%;bottom:3.29%;
  border-radius:14% / 6.45%;
  overflow:hidden;z-index:2;
  background:var(--ph-bg);
  display:flex;flex-direction:column;
}
/* Статус-бар встаёт по бокам от «острова»: тот нарисован прямо в рамке. */
.phone-status{
  display:flex;align-items:center;justify-content:space-between;
  padding:2.6% 8% 0;
  font-family:var(--font-body);font-size:11.5px;font-weight:600;color:var(--ph-fg);
}
.status-icons{display:flex;align-items:center;gap:5px;color:var(--ph-fg)}
.status-icons svg{display:block}
.ic-bat{
  position:relative;width:20px;height:10.5px;border-radius:3px;
  border:1px solid var(--ph-line-2);
}
.ic-bat::before{content:"";position:absolute;inset:1.5px;width:68%;border-radius:1.5px;background:var(--ph-fg)}
.ic-bat::after{content:"";position:absolute;right:-3px;top:3px;width:1.6px;height:4px;
  border-radius:0 1.5px 1.5px 0;background:var(--ph-line-2)}

.phone-ui{
  flex:1;display:flex;flex-direction:column;
  padding:5% 8% calc(var(--cut) + 14px);
}
.phone-top{display:flex;align-items:center;justify-content:space-between}
.phone-gear{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--ph-tile);color:var(--ph-ic)}
.phone-logo{font-size:12.5px;letter-spacing:.2em}
.phone-star{color:#f5d64e;font-size:14px}
.phone-country{display:flex;align-items:center;gap:9px;justify-content:center;margin-top:22px;font-size:13.5px}
.proto-dot{width:8px;height:8px;border-radius:50%;background:#f5c451;box-shadow:0 0 10px 2px rgba(245,196,81,.45);transition:background .4s, box-shadow .4s}
.phone.on .proto-dot{background:#6ef0a5;box-shadow:0 0 10px 2px rgba(110,240,165,.5)}
.phone-proto{transition:opacity .35s ease}

.phone-globe{position:relative;margin-top:12px;display:grid;place-items:center}
.globe-svg{width:min(230px,72vw);height:auto;animation:spinGlobe 26s linear infinite}
@keyframes spinGlobe{to{transform:rotate(360deg)}}

/* packets flying into the tunnel */
.packets{position:absolute;inset:0;display:block;pointer-events:none}
.packets i{
  position:absolute;left:50%;top:50%;width:4px;height:4px;border-radius:50%;
  background:var(--ph-pkt);box-shadow:0 0 8px 2px var(--ph-pkt-glow);
  transform:rotate(var(--a)) translateX(105px) scale(.4);
  animation:packetIn 2.4s cubic-bezier(.5,0,.4,1) infinite;
  animation-delay:var(--t);opacity:0;
}
@keyframes packetIn{
  0%{transform:rotate(var(--a)) translateX(112px) scale(.35);opacity:0}
  15%{opacity:1}
  85%{opacity:.9}
  100%{transform:rotate(var(--a)) translateX(46px) scale(1);opacity:0}
}

.connect{
  position:absolute;width:92px;height:92px;border-radius:50%;
  background:var(--ph-btn);border:none;cursor:pointer;display:grid;place-items:center;
}
.connect-ring{
  position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(150,120,255,.9);
  box-shadow:0 0 24px rgba(120,90,255,.55), inset 0 0 18px rgba(120,90,255,.3);
  transition:border-color .5s ease, box-shadow .5s ease;
}
.phone.on .connect-ring{border-color:rgba(110,240,180,.85);box-shadow:0 0 26px rgba(80,220,160,.45), inset 0 0 18px rgba(80,220,160,.25)}
.connect-pulse{
  position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(150,170,255,.55);
  animation:ripple 2.4s ease-out infinite;
}
@keyframes ripple{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.55);opacity:0}}
.connect-inner{display:grid;place-items:center;gap:2px;color:var(--ph-btn-fg);text-align:center}
.connect-mark{font-size:22px;line-height:1}
.connect-label{font-size:10px;color:var(--ph-btn-cap);transition:opacity .35s ease}

.phone-meter{display:flex;gap:14px;margin-top:18px;padding:0 4px}
.meter{display:flex;align-items:center;gap:8px;flex:1;font-size:11px;color:var(--ph-dim)}
.meter-dir{font-size:12px;color:var(--ph-fg-2)}
.meter-bar{position:relative;flex:1;height:4px;border-radius:3px;background:var(--ph-tile);overflow:hidden}
.meter-bar i{
  position:absolute;inset:0;display:block;border-radius:3px;
  background:linear-gradient(90deg, rgba(120,150,255,.2), #8aa4ff, rgba(120,150,255,.2));
  background-size:60% 100%;background-repeat:no-repeat;
  animation:traffic 1.9s ease-in-out infinite;
}
.meter-bar i.slow{animation-duration:3.1s;animation-delay:.4s;background-image:linear-gradient(90deg, rgba(150,120,255,.2), #a98aff, rgba(150,120,255,.2))}
@keyframes traffic{0%{background-position:-60% 0}100%{background-position:160% 0}}

.phone-cancel{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin-top:auto;padding:16px 0 20px;font-size:13px;color:var(--ph-cap);
  border-top:1px solid var(--ph-line);
}
.phone-cancel .x{opacity:.7}

/* ---------- flow: one subscription, two protocols ---------- */
.flow{
  margin-top:clamp(40px,5vw,64px);
  display:grid;grid-template-columns:minmax(240px,1fr) 160px minmax(300px,1.15fr);
  align-items:center;gap:0;
}
.flow-node{
  border-radius:var(--r);padding:26px 28px;
  background:var(--card);border:1px solid var(--line);
}
.flow-src{display:grid;gap:8px;text-align:left;padding:32px}
.node-tag{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.node-title{font-family:var(--font-display);font-size:30px;font-weight:600;letter-spacing:.06em}
.node-desc{font-size:14px;color:var(--muted)}
.node-badge{
  justify-self:start;margin-top:10px;padding:7px 14px;border-radius:999px;
  font-size:12px;color:var(--badge-fg);background:var(--badge-bg);border:1px solid var(--badge-line);
}
.flow-wires{display:grid;place-items:center;height:260px}
.flow-wires svg{width:160px;height:260px;overflow:visible}
.wire{fill:none;stroke:url(#wireGrad);stroke-width:1.4;stroke-dasharray:5 7;animation:dash 1.6s linear infinite}
@keyframes dash{to{stroke-dashoffset:-24}}
.pkt{fill:var(--pkt);filter:drop-shadow(0 0 6px var(--pkt-glow))}
.pkt-alt{fill:var(--pkt-alt);filter:drop-shadow(0 0 6px var(--pkt-alt-glow))}
.flow-branches{display:grid;gap:18px}
.node-head{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.node-name{font-size:22px;font-weight:600;letter-spacing:.04em}
.node-chip{padding:5px 12px;border-radius:999px;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.chip-main{background:var(--chip-ok-bg);border:1px solid var(--chip-ok-line);color:var(--chip-ok-fg)}
.chip-alt{background:var(--chip-alt-bg);border:1px solid var(--chip-alt-line);color:var(--chip-alt-fg)}
.flow-node p{font-size:14.5px;line-height:1.6;color:var(--muted)}
.node-apps{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.node-apps span{
  padding:6px 12px;border-radius:9px;font-size:12px;color:var(--muted);
  background:var(--surface);border:1px solid var(--line);
}

/* ---------- protection ---------- */
.protect{text-align:center}
.sphere-wrap{
  position:relative;display:grid;place-items:center;
  height:clamp(260px,36vw,420px);margin-bottom:clamp(-30px,-2vw,-10px);
}
.sphere{
  position:relative;width:clamp(220px,32vw,390px);aspect-ratio:1/1;border-radius:50%;
  overflow:hidden;
  background:var(--sphere-bg);
  box-shadow:var(--sphere-shadow);
  animation:breathe 8s ease-in-out infinite;
}
/* точки на поверхности: два слоя с разной плотностью, едут по кругу */
.sphere-dots{
  position:absolute;inset:0;border-radius:50%;
  background-image:radial-gradient(var(--sphere-dot) 1.05px, transparent 1.15px);
  background-size:13px 13px;
  -webkit-mask-image:radial-gradient(circle at 42% 38%, #000 8%, rgba(0,0,0,.65) 46%, rgba(0,0,0,.15) 74%, transparent 88%);
  mask-image:radial-gradient(circle at 42% 38%, #000 8%, rgba(0,0,0,.65) 46%, rgba(0,0,0,.15) 74%, transparent 88%);
  animation:dotsSpin 18s linear infinite;
  opacity:.85;
}
.sphere-dots-2{
  background-image:radial-gradient(var(--sphere-dot-2) .9px, transparent 1px);
  background-size:22px 22px;
  animation-duration:27s;animation-direction:reverse;opacity:.55;
}
@keyframes dotsSpin{from{background-position:0 0}to{background-position:130px 0}}

.sphere-grid{position:absolute;inset:0;width:100%;height:100%;opacity:.55;animation:gridTilt 14s ease-in-out infinite}
@keyframes gridTilt{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}

.sphere-shine{
  position:absolute;inset:0;border-radius:50%;
  background:var(--sphere-shine);
}
/* световая волна, пробегающая по шару */
.sphere-scan{
  position:absolute;left:-40%;top:0;width:60%;height:100%;
  background:var(--sphere-scan);
  filter:blur(6px);
  animation:scan 6.5s ease-in-out infinite;
}
@keyframes scan{0%{transform:translateX(0)}55%,100%{transform:translateX(300%)}}

/* спутники на орбите вокруг шара */
.sphere-orbit{
  position:absolute;width:clamp(280px,40vw,490px);aspect-ratio:1/1;border-radius:50%;
  border:1px solid var(--orbit-line);
  transform:rotateX(72deg);
  animation:orbitSpin 16s linear infinite;
}
.sphere-orbit-2{
  width:clamp(240px,35vw,430px);
  border-color:var(--orbit-line-2);
  transform:rotateX(64deg) rotateZ(38deg);
  animation:orbitSpin2 11s linear infinite reverse;
}
.sphere-orbit i{
  position:absolute;top:-4px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;
  background:var(--orbit-dot);box-shadow:0 0 14px 4px var(--orbit-dot-glow);
}
.sphere-orbit-2 i{background:var(--orbit-dot-2);box-shadow:0 0 12px 4px var(--orbit-dot-2-glow)}
@keyframes orbitSpin{from{transform:rotateX(72deg) rotateZ(0)}to{transform:rotateX(72deg) rotateZ(360deg)}}
@keyframes orbitSpin2{from{transform:rotateX(64deg) rotateZ(38deg)}to{transform:rotateX(64deg) rotateZ(398deg)}}

.comet{
  position:absolute;top:16%;left:50%;width:clamp(140px,22vw,230px);height:3px;
  transform:translateX(-40%) rotate(28deg);
  background:linear-gradient(90deg, transparent, var(--comet-soft) 20%, var(--comet));
  border-radius:999px;box-shadow:0 0 26px var(--comet-glow);
}
.comet i{
  position:absolute;right:-5px;top:50%;transform:translateY(-50%);
  width:13px;height:13px;border-radius:50%;background:var(--comet-head);box-shadow:0 0 24px 6px var(--comet-head-glow);
}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:clamp(44px,5vw,70px);text-align:center}
.card{
  border-radius:var(--r);padding:0 0 34px;overflow:hidden;
  background:var(--card);border:1px solid var(--line);
  display:flex;flex-direction:column;
}
.card h3{padding:0 clamp(22px,3vw,40px);margin-bottom:12px;font-size:19px;font-weight:600}
.card p{padding:0 clamp(22px,3vw,40px);font-size:14.5px;line-height:1.6;color:var(--muted)}
.card-art{position:relative;height:clamp(180px,20vw,240px);margin-bottom:26px;overflow:hidden}
.card-art-comet{background:var(--art-comet-bg)}
.mini-comet{
  position:absolute;top:34%;left:14%;width:60%;height:2px;transform:rotate(34deg);
  background:linear-gradient(90deg,transparent,var(--comet));
  box-shadow:0 0 18px var(--comet-glow);
  animation:cometRun 5s ease-in-out infinite;
}
@keyframes cometRun{0%,100%{transform:rotate(34deg) translateX(-14px);opacity:.55}50%{transform:rotate(34deg) translateX(14px);opacity:1}}
.mini-comet::after{
  content:"";position:absolute;right:-4px;top:50%;transform:translateY(-50%);
  width:9px;height:9px;border-radius:50%;background:var(--comet-head);box-shadow:0 0 18px 5px var(--comet-head-glow);
}
.spark{position:absolute;width:2px;height:2px;border-radius:50%;background:var(--spark);opacity:.7}
.s1{top:22%;left:62%}.s2{top:64%;left:34%}.s3{top:75%;left:74%}
.card-art-grid{
  display:grid;place-items:center;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:62px 62px;background-position:center;
}
.check-cell{
  width:62px;height:62px;display:grid;place-items:center;
  border:1px solid var(--cell-line);background:var(--cell-bg);
  box-shadow:var(--cell-glow);
  animation:breathe 4.5s ease-in-out infinite;
}

/* ---------- price ---------- */
.plans{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;
  align-items:stretch;
  width:min(880px,100%);margin:clamp(36px,4vw,52px) auto 0;
}
.plan{
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  padding:clamp(28px,3.4vw,38px);border-radius:26px;
  background:var(--card);
  border:1px solid var(--line);
}
.plan-best{
  border-color:var(--accent-line);
  box-shadow:var(--plan-shadow);
}
.plan-glow{
  position:absolute;left:50%;top:-45%;width:130%;height:80%;transform:translateX(-50%);
  background:var(--plan-glow);
  filter:blur(30px);pointer-events:none;
}
.plan-best .plan-glow{background:var(--plan-glow-hi)}
.plan-head{position:relative;display:grid;gap:10px;margin-bottom:22px}
.plan-name{font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.plan-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.plan-price b{font-size:clamp(36px,4.4vw,46px);font-weight:600;line-height:1}
.plan-price span{font-size:14px;color:var(--muted)}
.plan-list{position:relative;list-style:none;margin:0 0 26px;display:grid;gap:12px;flex:1}
.plan-list li{display:flex;align-items:flex-start;gap:12px;font-size:14.5px;color:var(--txt-2);text-align:left}
.plan-list i{
  flex:none;width:18px;height:18px;margin-top:2px;border-radius:50%;position:relative;
  background:var(--tick-bg);border:1px solid var(--tick-line);
}
.plan-list i::after{
  content:"";position:absolute;left:5.5px;top:3.5px;width:5px;height:9px;
  border:solid var(--check-ink);border-width:0 1.6px 1.6px 0;transform:rotate(42deg);
}
.plan-cta{position:relative;width:100%;max-width:none}
.plan-note{position:relative;margin-top:14px;text-align:center;font-size:12px;color:var(--dim)}
/* Четыре срока в ряд. Карточка при этом становится узкой, поэтому список
   внутри неё короче, а подпись про продление вынесена из каждой карточки
   под всю сетку: четыре одинаковые строки читались бы как шум. */
.plans-4{width:min(1180px,100%);grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.plans-4 .plan{padding:clamp(22px,2.2vw,28px);border-radius:22px}
/* Наклейки «выгода» в этой сетке нет намеренно: в узкой карточке она
   налезала на название срока, а поставленная строкой выше — сбивала
   выравнивание всех четырёх. Выгодный тариф и так отличается рамкой,
   свечением и залитой кнопкой, а цифра дня написана в его списке. */
.plans-4 .plan-price b{font-size:clamp(30px,3vw,38px)}
.plans-4 .plan-list{gap:10px;margin-bottom:22px}
.plans-4 .plan-list li{font-size:13.5px}
.plan-foot{margin:22px auto 0;text-align:center;font-size:12.5px;color:var(--dim)}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:clamp(36px,4vw,52px)}
.step{padding:clamp(26px,3vw,34px);border-radius:22px;background:var(--card);border:1px solid var(--line)}
.step-num{display:inline-block;margin-bottom:16px;font-size:13px;letter-spacing:.2em;color:var(--accent-txt)}
.step h3{font-size:19px;font-weight:600;margin-bottom:10px}
.step p{font-size:14.5px;line-height:1.65;color:var(--muted)}
.step code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;color:var(--txt-2)}

/* ---------- faq ---------- */
.faq-list{width:min(860px,100%);margin:clamp(32px,4vw,46px) auto 0;display:grid;gap:12px}
.qa{border-radius:18px;padding:0 clamp(18px,2.4vw,26px);background:var(--qa-bg);border:1px solid var(--line)}
.qa summary{
  list-style:none;cursor:pointer;position:relative;
  padding:21px 38px 21px 0;font-size:clamp(15px,1.6vw,16.5px);font-weight:500;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;margin-top:-6px;
  border:solid var(--chevron);border-width:0 1.6px 1.6px 0;transform:rotate(45deg);transition:transform .25s ease;
}
.qa[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.qa p{padding:0 6px 22px 0;font-size:14.5px;line-height:1.7;color:var(--muted)}
.qa a{color:var(--link);text-decoration:underline;text-underline-offset:3px}

/* ---------- final cta ---------- */
.final-card{
  position:relative;overflow:hidden;text-align:center;border-radius:28px;
  padding:clamp(52px,7vw,80px) clamp(22px,4vw,40px);
  background:var(--slab-2);
  border:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;
}
.final-glow{
  position:absolute;left:50%;bottom:-55%;width:90%;height:110%;transform:translateX(-50%);
  background:var(--final-glow);filter:blur(40px);pointer-events:none;
}
.final-card h2{position:relative;font-size:clamp(26px,3.2vw,42px);font-weight:600;letter-spacing:-.01em}
.final-card p{position:relative;margin:14px 0 30px;font-size:clamp(14.5px,1.5vw,16px);color:var(--muted);max-width:520px}
.final-card .btn{position:relative}

/* ---------- footer ---------- */
.footer{
  width:100%;max-width:calc(var(--maxw) + var(--pad)*2);margin:0 auto;
  padding:40px var(--pad) 56px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--muted);
}
.foot-row{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot-brand{letter-spacing:.22em;color:var(--txt);font-size:13px}
.foot-links{display:flex;gap:22px;flex-wrap:wrap}
.foot-links a:hover{color:var(--ink)}
.foot-about{
  max-width:640px;margin:22px auto 0;text-align:center;
  font-size:12.5px;line-height:1.6;color:var(--dim);
}
.foot-note{margin-top:22px;color:var(--dim);line-height:1.6}

/* =================================================================
   responsive
   ================================================================= */
@media (max-width:1080px){
  /* Скрытые ссылки исчезают из сетки целиком, и .nav-right становится
     ВТОРЫМ элементом — то есть попадает в среднюю колонку «auto» и встаёт
     по центру. Поэтому на узких экранах колонок должно быть две. */
  .nav-inner{grid-template-columns:1fr auto}
  .nav-links{display:none}
  .burger{display:block}
  body.menu-open .mobile-menu{display:flex}
  .nav.open{background:var(--nav-bg-solid);backdrop-filter:blur(14px)}
  .fast-card{grid-template-columns:1fr;gap:24px;text-align:left}
  .fast-sub{max-width:none}
  .fast-right{justify-content:center}
  .cards{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr;width:min(560px,100%)}
  .plans-4{grid-template-columns:repeat(2,minmax(0,1fr));width:min(760px,100%)}
  /* мобильная схема: вертикальная шина с ответвлениями и бегущими пакетами */
  .flow{grid-template-columns:1fr;gap:0;justify-items:stretch}
  .flow-src{width:100%;text-align:center;justify-items:center}
  .node-badge{justify-self:center}

  .flow-wires{width:100%;height:58px;position:relative;display:block}
  .flow-wires svg{display:none}
  .flow-wires::before{
    content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;
    background:repeating-linear-gradient(to bottom, var(--wire) 0 6px, transparent 6px 13px);
    animation:wireDown 1.2s linear infinite;
  }
  .flow-wires::after{
    content:"";position:absolute;left:50%;margin-left:-3px;width:6px;height:6px;border-radius:50%;
    background:var(--pkt);box-shadow:0 0 10px 3px var(--pkt-glow);
    animation:pktDown 2.1s ease-in-out infinite;
  }
  @keyframes wireDown{from{background-position:0 0}to{background-position:0 13px}}
  @keyframes pktDown{0%{top:-6px;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:100%;opacity:0}}

  .flow-branches{width:100%;position:relative;padding-left:30px;gap:18px}
  .flow-branches::before{
    content:"";position:absolute;left:7px;top:34px;bottom:34px;width:2px;
    background:repeating-linear-gradient(to bottom, var(--wire) 0 6px, transparent 6px 13px);
    animation:wireDown 1.4s linear infinite;
  }
  .flow-branches .flow-node{position:relative}
  .flow-branches .flow-node::before{
    content:"";position:absolute;left:-23px;top:34px;width:23px;height:2px;
    background:repeating-linear-gradient(90deg, var(--wire) 0 5px, transparent 5px 10px);
    animation:wireRight 1.2s linear infinite;
  }
  @keyframes wireRight{from{background-position:0 0}to{background-position:10px 0}}
  .flow-branches .flow-node::after{
    content:"";position:absolute;left:-27px;top:30px;width:10px;height:10px;border-radius:50%;
    background:var(--pkt);box-shadow:0 0 12px 3px var(--pkt-glow);
    animation:nodePulse 2.6s ease-in-out infinite;
  }
  .flow-branches .flow-node:last-child::after{animation-delay:1.3s}
  @keyframes nodePulse{0%,100%{transform:scale(.75);opacity:.55}50%{transform:scale(1.1);opacity:1}}
}
@media (max-width:760px){
  :root{--pad:18px;--nav-h:66px}
  .logo-mark{gap:8px;padding:8px 15px 8px 11px;font-size:12px;letter-spacing:.18em}
  .logo-img{height:18px}
  /* Вместо полноэкранного шейдера — статичный градиент того же настроения. */
  .vanta-bg{
    opacity:1;
    background:var(--fog);
  }
  .plans-4{grid-template-columns:1fr;width:min(420px,100%)}
  .login{display:none}
  .btn-cab{display:none}      /* на телефоне кабинет живёт в листе меню */
  .nav-right{gap:10px}
  .btn-lg{padding:15px 26px;font-size:15px;width:100%;max-width:340px}
  .hero-copy .btn-lg{width:auto;min-width:250px}
  /* Телефон: две строки сетки. Круг центрируется в свободном пространстве
     сверху, текст прижимается к низу — как на десктопе, где он стоит на
     bottom:6vh. Флексом с justify-content:center текст липнет к кругу. */
  .hero{
    min-height:100svh;
    display:grid;grid-template-rows:1fr auto;justify-items:center;
    padding:calc(var(--nav-h) + 2vh) 0 15vh;
    /* Всё, что зависит от высоты экрана, считаем в svh. С vh мобильный
       Chrome при прокрутке прячет адресную строку, высота вьюпорта скачком
       меняется — и сцена пересчитывается прямо посреди скролла. Это и был
       рывок. */
    padding:calc(var(--nav-h) + 2svh) 0 15svh;
  }
  .stage{
    position:relative;left:auto;top:auto;transform:none;flex:none;
    align-self:center;
    --d:min(42vh, 80vw);
    --d:min(42svh, 80vw);
  }
  .hero-copy{
    position:static;transform:none;bottom:auto;top:auto;
    align-self:end;
    width:100%;padding:0 var(--pad);
    margin-top:clamp(18px,3.5vh,38px);
    margin-top:clamp(18px,3.5svh,38px);
  }
  /* ---- заставка на телефоне: короткая и без эффектов ----
     Десктопные 4.6 с с длинным «хвостом» на телефоне читались как
     подвисание: круг почти доезжал и потом еле полз, а текст выскакивал
     в тишине. Здесь всё укладывается в 1.3 с, кривые обычные.
     Блок медиазапроса идёт ниже по файлу, поэтому при равной
     специфичности выигрывает он. */
  .ring{transform:scale(1.5)}
  body.loaded .ring{animation:ringInFlat 900ms cubic-bezier(.25,.86,.36,1) forwards}
  @keyframes ringInFlat{from{transform:scale(1.5)}to{transform:scale(1)}}

  body.loaded .ltr{animation:ltrInFlat 620ms cubic-bezier(.22,.8,.28,1) forwards}
  body.loaded .l-x{animation-delay:90ms}
  body.loaded .l-e{animation-delay:180ms}
  body.loaded .l-f{animation-delay:270ms}
  body.loaded .l-i{animation-delay:360ms}
  body.loaded .l-d{animation-delay:450ms}

  body.loaded .hero-copy{animation:fadeUpFlat 620ms ease forwards 720ms}
  body.loaded .scroll-hint{animation-delay:1500ms}

  /* filter:blur на четырёх элементах телефон тянет тяжело и рвано.
     Оставляем только сдвиг, масштаб и прозрачность — они композитятся
     на GPU и идут гладко. */
  .ltr{filter:none}
  /* Ореол кольца — это blur(13px) поверх конического градиента с двойной
     маской. Пока кольцо уменьшается, слой размывается заново на каждом
     кадре: телефон это не тянет. Меняем на обычный радиальный градиент —
     свечение то же, стоимость нулевая. */
  .orb-halo{
    filter:none;
    /* Свечение живёт узкой полосой у самой кромки: заливка от 63%, как было
       в первом варианте, подсвечивала весь круг изнутри. Вертикальная маска
       оставлена — верх должен гаснуть, как на десктопе. */
    background:var(--orb-halo-flat);
    -webkit-mask:linear-gradient(to bottom, transparent 6%, rgba(0,0,0,.4) 26%, #000 54%);
    mask:linear-gradient(to bottom, transparent 6%, rgba(0,0,0,.4) 26%, #000 54%);
    -webkit-mask-composite:source-over;
    mask-composite:add;
    opacity:.85;
  }
  @keyframes ltrInFlat{to{opacity:1;transform:translateY(0) scale(1)}}
  @keyframes fadeUpFlat{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  .hero-title{letter-spacing:.04em}
  .fast-card{border-radius:26px;padding-left:20px;padding-right:20px}
  .phone{--pw:300px;--cut:104px}
  .fast-cta{flex-direction:column;align-items:stretch;gap:14px}
  .fast-note{text-align:center}
  .flow-node{padding:22px 20px}
  .node-title{font-size:26px}
  .sec-head{padding:0 2px}
  .footer{text-align:center}
  .foot-row{justify-content:center}
  .foot-links{justify-content:center;gap:16px}
}
@media (max-width:400px){
  .node-apps span{font-size:11px;padding:5px 10px}
  .plan-price b{font-size:38px}
}

/* ---------- лента сервисов ----------
   Две дорожки едут навстречу друг другу. Внутри каждой содержимое лежит
   дважды: анимация сдвигает дорожку ровно на половину её ширины, поэтому
   вторая копия встаёт на место первой и стыка не видно. */
.ticker{
  margin-top:clamp(36px,4vw,56px);
  display:flex;flex-direction:column;gap:14px;
  /* края растворяются, а не обрубаются рамкой секции */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.ticker-row{overflow:hidden}
.ticker-track{
  display:flex;gap:14px;width:max-content;
  animation:svc-run 46s linear infinite;
}
.ticker-back{animation-direction:reverse}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes svc-run{to{transform:translateX(-50%)}}

/* Плитка темнее фона секции, а не светлее: цвет держит только логотип,
   и он один во всей плитке яркий. Подсветка фирменным цветом появляется
   при наведении — до него плитки не спорят ни друг с другом, ни с
   заголовком. */
.svc{
  display:flex;align-items:center;gap:12px;
  padding:11px 20px 11px 11px;border-radius:18px;white-space:nowrap;
  background:var(--tile);
  border:1px solid var(--line);
  box-shadow:var(--tile-shadow);
  transition:border-color .25s ease, background .25s ease,
             transform .25s ease, box-shadow .25s ease;
}
.svc:hover{
  transform:translateY(-2px);
  background:var(--tile-hi);
  border-color:color-mix(in srgb, var(--svc) 40%, transparent);
  box-shadow:0 10px 30px color-mix(in srgb, var(--svc) 18%, transparent);
}
.svc-ic{
  display:grid;place-items:center;flex:none;
  width:44px;height:44px;border-radius:13px;
  color:var(--svc);
  background:var(--tile-ic);
  border:1px solid var(--line);
}
.svc-name{font-size:14px;font-weight:500;letter-spacing:.01em;color:var(--txt)}

@media (max-width:760px){
  .ticker-track{animation-duration:32s;gap:10px}
  .ticker{gap:10px}
  .svc{padding:8px 15px 8px 8px;border-radius:15px;gap:10px}
  .svc-ic{width:36px;height:36px;border-radius:11px}
  .svc-ic svg{width:20px;height:20px}
  .svc-name{font-size:12.5px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .ltr,.hero-copy{opacity:1;transform:none;filter:none}
  .reveal{opacity:1;transform:none}
  .ticker-track{animation:none}
}

/* ---------- сайт внутри Telegram ----------
   Окно мини-приложения меньше экрана и уже имеет собственную шапку сверху,
   поэтому свою делаем ниже, а высоту героя считаем по видимой части. */
/* Переменную ставим на body, а не на .nav: от неё считаются и высота
   героя, и отступы меню — на .nav она осталась бы только внутри шапки. */
body.tg{--nav-h:58px}
body.tg .footer{padding-bottom:calc(28px + env(safe-area-inset-bottom))}

/* =================================================================
   светлая тема
   =================================================================
   Не «инверсия» тёмной, а её пара: бумага с холодным лиловым уклоном
   вместо чёрного, чернила вместо белого текста, тот же фиолетовый знака
   FIXED, опущенный на шаг глубже — на белом #6133ee светится и плывёт,
   #5325d8 держит строку.

   Что переворачивается по смыслу, а не по цвету: главная кнопка. На
   тёмном самый сильный контраст — белая заливка, на светлом — чернильная.
   Кнопка остаётся самым заметным элементом шапки, меняется только чем
   именно она этого добивается.

   Круг на первом экране в тёмной теме нарисован светом: белые участки
   конического градиента и есть блик. На бумаге светить нечем, поэтому
   градиент переложен на чернила и индиго — круг читается как проведённая
   линия, а не как свечение. Ореол при этом остаётся цветным: он даёт
   кругу объём.

   Три состояния темы: явно выбранная метка data-theme на <html>, и её
   отсутствие — «как в системе». Поэтому светлые значения объявлены
   дважды: под системную настройку (с защитой от явно выбранной тёмной)
   и под явно выбранную светлую, чтобы переключатель побеждал систему в
   обе стороны. Блоки обязаны совпадать — править только вместе. */

@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
  --bg:#f2f3f9;
  --bg-deep:#e9ebf5;
  --txt:#111327;
  --txt-2:#282e4d;
  --muted:#535a7c;
  --dim:#737a99;
  --ink:#0a0c1c;
  --line:rgba(17,19,40,.10);
  --line-2:rgba(17,19,40,.16);
  --surface:rgba(17,19,40,.04);
  --surface-2:rgba(17,19,40,.07);
  --card:linear-gradient(180deg,#fff,#fbfbfe);
  --accent:#5325d8;
  --accent-soft:rgba(83,37,216,.10);
  --accent-txt:#5325d8;
  --accent-line:rgba(83,37,216,.30);
  --link:#4a2ad0;
  --chevron:rgba(40,45,90,.5);

  --nav-bg:rgba(242,243,249,.78);
  --nav-bg-solid:rgba(244,245,251,.95);
  --nav-link:#2b3050;
  --menu-bg:radial-gradient(120% 60% at 50% 0%, rgba(97,51,238,.08), transparent 62%),
            rgba(244,245,251,.97);

  --btn-fg:#fff;
  --btn-bg:linear-gradient(180deg,#20233f,#12142b);
  --btn-border:rgba(10,12,30,.9);
  --btn-shadow:0 8px 24px rgba(28,32,80,.16);
  --btn-shadow-hi:0 14px 34px rgba(28,32,80,.26);
  --fill:linear-gradient(180deg,#6f3df5,#5325d8);
  --fill-fg:#fff;
  --fill-line:rgba(83,37,216,.55);
  --fill-shadow:0 10px 26px rgba(83,37,216,.28);

  --pre-bar:#5325d8;
  --pre-bar-glow:rgba(83,37,216,.40);
  --pre-blob:rgba(120,100,255,.18);

  --glow-o:.5;
  --glow-a:rgba(110,120,255,.30);
  --glow-b:rgba(165,110,255,.24);
  --orb-line:conic-gradient(from 180deg,
    rgba(17,19,40,.92) 0%, rgba(58,52,175,.85) 14%, rgba(45,70,215,.80) 30%,
    rgba(150,60,215,.70) 44%, rgba(20,22,48,.90) 56%, rgba(52,78,220,.80) 72%,
    rgba(70,62,190,.85) 88%, rgba(17,19,40,.92) 100%);
  --orb-halo:conic-gradient(from 180deg,
    rgba(95,110,240,.42), rgba(55,75,220,.32) 25%, rgba(170,90,235,.26) 45%,
    rgba(105,125,245,.42) 60%, rgba(60,80,220,.32) 80%, rgba(95,110,240,.42));
  --orb-halo-o:.6;
  --orb-halo-flat:radial-gradient(closest-side circle,
    transparent 0 89%, rgba(70,85,230,.38) 96%,
    rgba(130,90,240,.28) 99%, transparent 100%);
  --flare:radial-gradient(circle,#fff 0 16%, rgba(110,85,245,.9) 38%, rgba(120,150,255,0) 72%);
  --flare-shadow:0 0 26px 7px rgba(95,70,235,.35);
  --wordmark-shadow:0 0 34px rgba(90,75,225,.16);
  --hint:rgba(40,45,90,.6);
  --hint-line:linear-gradient(to bottom,rgba(17,19,40,.05),rgba(17,19,40,.22));
  --hint-beam:#4a35d4;
  --fog:radial-gradient(85% 55% at 50% 0%, rgba(110,120,255,.18), transparent 62%),
        radial-gradient(75% 50% at 82% 100%, rgba(165,110,255,.14), transparent 62%),
        var(--bg);

  --slab:linear-gradient(180deg,#fff 0%,#f8f8ff 55%,#f4f1ff 100%);
  --slab-2:linear-gradient(180deg,#fff 0%,#f1edff 100%);
  --final-glow:radial-gradient(closest-side, rgba(110,85,255,.22), transparent 72%);
  --grid-line:rgba(60,55,160,.10);

  --wire:rgba(83,37,216,.42);
  --wire-a:#5325d8;
  --wire-b:#7b4bf0;
  --pkt:#4a35d4;
  --pkt-glow:rgba(80,60,225,.45);
  --pkt-alt:#8b3fd8;
  --pkt-alt-glow:rgba(150,70,225,.45);
  --badge-fg:#372a9c;
  --badge-bg:rgba(83,37,216,.07);
  --badge-line:rgba(83,37,216,.20);
  --chip-ok-fg:#0b7a4d;
  --chip-ok-bg:rgba(11,122,77,.09);
  --chip-ok-line:rgba(11,122,77,.26);
  --chip-alt-fg:#5325d8;
  --chip-alt-bg:rgba(83,37,216,.09);
  --chip-alt-line:rgba(83,37,216,.24);

  --comet:rgba(40,36,140,.90);
  --comet-soft:rgba(90,85,200,.14);
  --comet-head:#3b2fb8;
  --comet-glow:rgba(80,60,220,.35);
  --comet-head-glow:rgba(80,60,220,.35);
  --spark:#6a5ae0;
  --art-comet-bg:radial-gradient(circle at 30% 20%, rgba(120,105,255,.20), transparent 60%);
  --cell-bg:rgba(83,37,216,.06);
  --cell-line:rgba(83,37,216,.32);
  --cell-glow:0 0 40px rgba(83,37,216,.14);
  --tick-bg:rgba(83,37,216,.10);
  --tick-line:rgba(83,37,216,.34);
  --check-ink:#5325d8;

  --orbit-line:rgba(60,55,170,.16);
  --orbit-line-2:rgba(120,80,200,.14);
  --orbit-dot:#4a3ad0;
  --orbit-dot-glow:rgba(80,60,220,.35);
  --orbit-dot-2:#8b4fd8;
  --orbit-dot-2-glow:rgba(150,80,220,.32);

  --plan-shadow:0 22px 60px rgba(40,36,120,.12);
  --plan-glow:radial-gradient(closest-side, rgba(110,90,245,.14), transparent 70%);
  --plan-glow-hi:radial-gradient(closest-side, rgba(110,90,245,.22), transparent 70%);
  --qa-bg:#fff;
  --tile:#fff;
  --tile-hi:#fff;
  --tile-ic:#eef0f9;
  --sphere-bg:
    radial-gradient(circle at 50% 34%, rgba(255,255,255,.95), rgba(214,210,250,.92) 46%, rgba(150,142,225,.95) 76%),
    radial-gradient(circle at 50% 50%, rgba(150,140,240,.5), transparent 70%),
    #e8e6f8;
  --sphere-shadow:0 34px 90px rgba(60,50,180,.20), inset 0 -30px 90px rgba(55,45,150,.30);
  --sphere-dot:rgba(48,42,130,.42);
  --sphere-dot-2:rgba(48,42,130,.24);
  --sphere-shine:radial-gradient(circle at 62% 22%, rgba(255,255,255,.75), transparent 42%);
  --sphere-scan:linear-gradient(90deg, transparent, rgba(70,60,190,.10) 45%, rgba(60,50,180,.16) 55%, transparent);
  --sphere-grid:#4a3fb0;

  /* Экран телефона в светлой теме. Не инверсия тёмного: это макет
     приложения, и на свету он должен выглядеть как приложение на свету —
     светлая подложка, тёмный текст, тот же фирменный акцент. */
  --ph-bg:linear-gradient(180deg,#f7f8fd 0%,#eef0fa 55%,#e9ebf8 100%);
  --ph-fg:#14162c;
  --ph-fg-2:#2b3157;
  --ph-dim:#5f6688;
  --ph-cap:#3a4066;
  --ph-line:rgba(17,19,40,.10);
  --ph-line-2:rgba(17,19,40,.35);
  --ph-tile:rgba(17,19,40,.06);
  --ph-ic:#4a4f75;
  --ph-btn:rgba(255,255,255,.92);
  --ph-btn-fg:#1a1d38;
  --ph-btn-cap:#5f6688;
  --ph-pkt:#5b46d8;
  --ph-pkt-glow:rgba(91,70,216,.45);
  --ph-globe-core:#6f5cf0;
  --ph-globe-edge:#e9ebf8;
  --ph-globe-line:#7a6ae0;
  --ph-globe-dot:#4a3fb0;
  /* Белая плитка на почти белом фоне сама себя не показывает: границы
     мало, нужна и лёгкая тень. */
  --tile-shadow:0 4px 14px rgba(28,32,80,.05);
  }
  /* Единственное место в файле, где тема выбирает не токен, а одно из
     двух значений, лежащих в разметке. Цвет логотипа — это данные бренда,
     а не тема: у X и ChatGPT он белый, и на бумаге его не видно. Генератор
     ленты выдаёт для таких плиток второй цвет, --svc-lt. */
  :root:not([data-theme="dark"]) .svc-ic{color:var(--svc-lt,var(--svc))}
  :root:not([data-theme="dark"]) .tg-sun{display:none}
  :root:not([data-theme="dark"]) .tg-moon{display:block}
}

:root[data-theme="light"]{
  --bg:#f2f3f9;
  --bg-deep:#e9ebf5;
  --txt:#111327;
  --txt-2:#282e4d;
  --muted:#535a7c;
  --dim:#737a99;
  --ink:#0a0c1c;
  --line:rgba(17,19,40,.10);
  --line-2:rgba(17,19,40,.16);
  --surface:rgba(17,19,40,.04);
  --surface-2:rgba(17,19,40,.07);
  --card:linear-gradient(180deg,#fff,#fbfbfe);
  --accent:#5325d8;
  --accent-soft:rgba(83,37,216,.10);
  --accent-txt:#5325d8;
  --accent-line:rgba(83,37,216,.30);
  --link:#4a2ad0;
  --chevron:rgba(40,45,90,.5);

  --nav-bg:rgba(242,243,249,.78);
  --nav-bg-solid:rgba(244,245,251,.95);
  --nav-link:#2b3050;
  --menu-bg:radial-gradient(120% 60% at 50% 0%, rgba(97,51,238,.08), transparent 62%),
            rgba(244,245,251,.97);

  --btn-fg:#fff;
  --btn-bg:linear-gradient(180deg,#20233f,#12142b);
  --btn-border:rgba(10,12,30,.9);
  --btn-shadow:0 8px 24px rgba(28,32,80,.16);
  --btn-shadow-hi:0 14px 34px rgba(28,32,80,.26);
  --fill:linear-gradient(180deg,#6f3df5,#5325d8);
  --fill-fg:#fff;
  --fill-line:rgba(83,37,216,.55);
  --fill-shadow:0 10px 26px rgba(83,37,216,.28);

  --pre-bar:#5325d8;
  --pre-bar-glow:rgba(83,37,216,.40);
  --pre-blob:rgba(120,100,255,.18);

  --glow-o:.5;
  --glow-a:rgba(110,120,255,.30);
  --glow-b:rgba(165,110,255,.24);
  --orb-line:conic-gradient(from 180deg,
    rgba(17,19,40,.92) 0%, rgba(58,52,175,.85) 14%, rgba(45,70,215,.80) 30%,
    rgba(150,60,215,.70) 44%, rgba(20,22,48,.90) 56%, rgba(52,78,220,.80) 72%,
    rgba(70,62,190,.85) 88%, rgba(17,19,40,.92) 100%);
  --orb-halo:conic-gradient(from 180deg,
    rgba(95,110,240,.42), rgba(55,75,220,.32) 25%, rgba(170,90,235,.26) 45%,
    rgba(105,125,245,.42) 60%, rgba(60,80,220,.32) 80%, rgba(95,110,240,.42));
  --orb-halo-o:.6;
  --orb-halo-flat:radial-gradient(closest-side circle,
    transparent 0 89%, rgba(70,85,230,.38) 96%,
    rgba(130,90,240,.28) 99%, transparent 100%);
  --flare:radial-gradient(circle,#fff 0 16%, rgba(110,85,245,.9) 38%, rgba(120,150,255,0) 72%);
  --flare-shadow:0 0 26px 7px rgba(95,70,235,.35);
  --wordmark-shadow:0 0 34px rgba(90,75,225,.16);
  --hint:rgba(40,45,90,.6);
  --hint-line:linear-gradient(to bottom,rgba(17,19,40,.05),rgba(17,19,40,.22));
  --hint-beam:#4a35d4;
  --fog:radial-gradient(85% 55% at 50% 0%, rgba(110,120,255,.18), transparent 62%),
        radial-gradient(75% 50% at 82% 100%, rgba(165,110,255,.14), transparent 62%),
        var(--bg);

  --slab:linear-gradient(180deg,#fff 0%,#f8f8ff 55%,#f4f1ff 100%);
  --slab-2:linear-gradient(180deg,#fff 0%,#f1edff 100%);
  --final-glow:radial-gradient(closest-side, rgba(110,85,255,.22), transparent 72%);
  --grid-line:rgba(60,55,160,.10);

  --wire:rgba(83,37,216,.42);
  --wire-a:#5325d8;
  --wire-b:#7b4bf0;
  --pkt:#4a35d4;
  --pkt-glow:rgba(80,60,225,.45);
  --pkt-alt:#8b3fd8;
  --pkt-alt-glow:rgba(150,70,225,.45);
  --badge-fg:#372a9c;
  --badge-bg:rgba(83,37,216,.07);
  --badge-line:rgba(83,37,216,.20);
  --chip-ok-fg:#0b7a4d;
  --chip-ok-bg:rgba(11,122,77,.09);
  --chip-ok-line:rgba(11,122,77,.26);
  --chip-alt-fg:#5325d8;
  --chip-alt-bg:rgba(83,37,216,.09);
  --chip-alt-line:rgba(83,37,216,.24);

  --comet:rgba(40,36,140,.90);
  --comet-soft:rgba(90,85,200,.14);
  --comet-head:#3b2fb8;
  --comet-glow:rgba(80,60,220,.35);
  --comet-head-glow:rgba(80,60,220,.35);
  --spark:#6a5ae0;
  --art-comet-bg:radial-gradient(circle at 30% 20%, rgba(120,105,255,.20), transparent 60%);
  --cell-bg:rgba(83,37,216,.06);
  --cell-line:rgba(83,37,216,.32);
  --cell-glow:0 0 40px rgba(83,37,216,.14);
  --tick-bg:rgba(83,37,216,.10);
  --tick-line:rgba(83,37,216,.34);
  --check-ink:#5325d8;

  --orbit-line:rgba(60,55,170,.16);
  --orbit-line-2:rgba(120,80,200,.14);
  --orbit-dot:#4a3ad0;
  --orbit-dot-glow:rgba(80,60,220,.35);
  --orbit-dot-2:#8b4fd8;
  --orbit-dot-2-glow:rgba(150,80,220,.32);

  --plan-shadow:0 22px 60px rgba(40,36,120,.12);
  --plan-glow:radial-gradient(closest-side, rgba(110,90,245,.14), transparent 70%);
  --plan-glow-hi:radial-gradient(closest-side, rgba(110,90,245,.22), transparent 70%);
  --qa-bg:#fff;
  --tile:#fff;
  --tile-hi:#fff;
  --tile-ic:#eef0f9;
  --sphere-bg:
    radial-gradient(circle at 50% 34%, rgba(255,255,255,.95), rgba(214,210,250,.92) 46%, rgba(150,142,225,.95) 76%),
    radial-gradient(circle at 50% 50%, rgba(150,140,240,.5), transparent 70%),
    #e8e6f8;
  --sphere-shadow:0 34px 90px rgba(60,50,180,.20), inset 0 -30px 90px rgba(55,45,150,.30);
  --sphere-dot:rgba(48,42,130,.42);
  --sphere-dot-2:rgba(48,42,130,.24);
  --sphere-shine:radial-gradient(circle at 62% 22%, rgba(255,255,255,.75), transparent 42%);
  --sphere-scan:linear-gradient(90deg, transparent, rgba(70,60,190,.10) 45%, rgba(60,50,180,.16) 55%, transparent);
  --sphere-grid:#4a3fb0;

  /* Экран телефона в светлой теме. Не инверсия тёмного: это макет
     приложения, и на свету он должен выглядеть как приложение на свету —
     светлая подложка, тёмный текст, тот же фирменный акцент. */
  --ph-bg:linear-gradient(180deg,#f7f8fd 0%,#eef0fa 55%,#e9ebf8 100%);
  --ph-fg:#14162c;
  --ph-fg-2:#2b3157;
  --ph-dim:#5f6688;
  --ph-cap:#3a4066;
  --ph-line:rgba(17,19,40,.10);
  --ph-line-2:rgba(17,19,40,.35);
  --ph-tile:rgba(17,19,40,.06);
  --ph-ic:#4a4f75;
  --ph-btn:rgba(255,255,255,.92);
  --ph-btn-fg:#1a1d38;
  --ph-btn-cap:#5f6688;
  --ph-pkt:#5b46d8;
  --ph-pkt-glow:rgba(91,70,216,.45);
  --ph-globe-core:#6f5cf0;
  --ph-globe-edge:#e9ebf8;
  --ph-globe-line:#7a6ae0;
  --ph-globe-dot:#4a3fb0;
  /* Белая плитка на почти белом фоне сама себя не показывает: границы
     мало, нужна и лёгкая тень. */
  --tile-shadow:0 4px 14px rgba(28,32,80,.05);
}
:root[data-theme="light"] .svc-ic{color:var(--svc-lt,var(--svc))}
:root[data-theme="light"] .tg-sun{display:none}
:root[data-theme="light"] .tg-moon{display:block}

/* Знак FIXED — картинка со светлой половиной, на бумаге она пропадала.
   Второй файл, а не фильтр: инверсия увела бы фиолетовую половину в
   зелёный. Оба лежат друг на друге, тема показывает нужный. */
.logo-on-light{display:none}
:root[data-theme="light"] .logo-on-dark{display:none}
:root[data-theme="light"] .logo-on-light{display:block}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .logo-on-dark{display:none}
  :root:not([data-theme="dark"]) .logo-on-light{display:block}
}

/* ---------- переключатель темы ----------
   Показывает не текущую тему, а ту, в которую переключит: в тёмной это
   солнце, в светлой — луна. Иначе кнопка читается как индикатор, и по ней
   не нажимают. */
.theme-tgl{
  display:inline-grid;place-items:center;flex:none;
  width:38px;height:38px;border-radius:999px;line-height:0;
  background:var(--surface);border:1px solid var(--line-2);
  color:var(--nav-link);cursor:pointer;
  transition:background .25s ease, color .25s ease, transform .2s ease;
}
.theme-tgl:hover{background:var(--surface-2);color:var(--txt);transform:translateY(-1px)}
.tg-moon{display:none}
.tg-sun{display:block}
/* В листе меню переключатель — обычная строка действий рядом с кабинетом
   и поддержкой, поэтому и оформление у него от .mm-ghost. */
.mm-theme{display:block;width:100%;font-family:var(--font-body)}

/* текст только для поиска и экранных дикторов */
.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}