/* ── Дракон VPS — дизайн-система (мягкая тёмная, графит) ─────────────────────
   Сдержанный премиум: графитовый фон, мягкие карточки, хайрлайн-бордеры,
   зелёный акцент — редко (CTA и мелкие детали). Без неона/aurora/мерцаний. */

@font-face{font-family:'Unbounded';src:url('../fonts/Unbounded-ExtraBold.ttf') format('truetype');font-weight:800;font-display:swap;}
@font-face{font-family:'Rubik';src:url('../fonts/Rubik-Regular.ttf') format('truetype');font-weight:400;font-display:swap;}

:root{
  /* Палитра единая с личным кабинетом (dashboard) — near-black green */
  --bg:#0f172a;
  --bg-2:#172033;
  --surface:#1e293b;
  --surface-2:#172033;
  --surface-hi:#334155;
  --line:rgba(148,163,184,.14);
  --line-2:rgba(148,163,184,.22);

  --accent:#2EE66B;
  --accent-2:#4dff86;
  --accent-dim:#16A34A;
  --accent-soft:rgba(46,230,107,.12);
  --accent-ring:rgba(46,230,107,.25);

  --gold:#f0b04a;
  --gold-soft:rgba(240,176,74,.12);

  --text:#f1f5f9;
  --text-2:#94a3b8;
  --text-muted:#64748b;

  --maxw:1140px;
  --r:18px;
  --r-sm:12px;
  --shadow:0 1px 0 rgba(255,255,255,.03),0 18px 40px -28px rgba(0,0,0,.55);

  /* Совместимость со старыми токенами (dashboard.css/login) */
  --card:var(--surface);
  --card-2:var(--surface-2);
  --card-hi:var(--surface-hi);
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
/* Мягкая защита картинок от скачивания/перетаскивания/long-press */
img{-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;user-drag:none;
  -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;}
body{
  font-family:'Rubik',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg);color:var(--text);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative;
}
/* Очень тонкая сетка + мягкое пятно света — вместо неоновой aurora */
body::before{
  content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(900px 520px at 78% -8%,rgba(46,230,107,.06),transparent 60%),
    radial-gradient(760px 500px at -6% 12%,rgba(46,230,107,.04),transparent 60%),
    linear-gradient(180deg,#172033,var(--bg) 40%);
}

h1,h2,h3,.display{font-weight:700;letter-spacing:-.02em;line-height:1.12;}
.brand .name,.wordmark{font-family:'Unbounded','Rubik',sans-serif;font-weight:800;letter-spacing:-.02em;}
a{color:inherit;text-decoration:none;}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.accent{color:var(--accent);}
.gold{color:var(--gold);}
.muted{color:var(--text-2);}

/* ── Кнопки ─────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:12px 22px;border-radius:11px;
  font-family:'Rubik',sans-serif;font-weight:500;font-size:15px;cursor:pointer;border:1px solid transparent;
  transition:transform .16s ease,background .18s,border-color .18s,box-shadow .18s;white-space:nowrap;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--accent);color:#062012;font-weight:700;
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 6px 22px -8px rgba(46,230,107,.6),0 0 26px -8px rgba(46,230,107,.55);}
.btn-primary:hover{background:var(--accent-2);
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 8px 26px -8px rgba(46,230,107,.7),0 0 34px -6px rgba(46,230,107,.6);}
.btn-ghost{background:rgba(255,255,255,.03);color:var(--text);border-color:var(--line-2);}
.btn-ghost:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.22);}
.btn svg{width:18px;height:18px;}
.btn-sm{padding:9px 16px;font-size:14px;border-radius:10px;}
.btn-lg{padding:15px 28px;font-size:16px;border-radius:13px;}

/* ── Хедер ──────────────────────────────────────────────────────────────── */
.header{position:sticky;top:0;z-index:100;background:rgba(15,23,42,.72);backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--line);}
.header .wrap{display:flex;align-items:center;justify-content:space-between;height:66px;}
.brand{display:flex;align-items:center;gap:10px;}
.brand img{width:30px;height:30px;}
.brand .name{font-size:18px;}
.nav{display:flex;align-items:center;gap:6px;}
.nav a.link{color:var(--text-2);font-size:14.5px;padding:8px 12px;border-radius:9px;transition:color .15s,background .15s;}
.nav a.link:hover{color:var(--text);background:rgba(255,255,255,.04);}
.nav .sep{width:1px;height:22px;background:var(--line);margin:0 8px;}
.burger{display:none;width:42px;height:42px;border-radius:11px;border:1px solid var(--line-2);
  background:rgba(255,255,255,.03);cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px;}
.burger span{display:block;width:18px;height:2px;border-radius:2px;background:var(--text);transition:.2s;}
.mobile-menu{display:none;}
@media(max-width:860px){
  .nav{display:none;}
  .burger{display:flex;}
  .theme-toggle{display:none;}            /* на мобилке тема меняется свитчем в меню */
  .hide-mobile{display:none !important;}

  /* ── Мобильное меню — нижний лист (bottom sheet) с карточками ── */
  /* Пока закрыто — полностью невидимо (visibility:hidden), чтобы оверлей и его
     backdrop-filter не рендерились и не забеливали страницу на мобильных. */
  .mobile-menu{display:block;position:fixed;inset:0;z-index:120;pointer-events:none;
    visibility:hidden;transition:visibility 0s .3s;}
  /* Фон — заблюренный сайт + лёгкий скрим. БЕЗ анимации opacity: связка
     opacity+backdrop-filter на мобильных рендерится белым. Показ/скрытие —
     через visibility родителя. */
  .mobile-menu::before{content:'';position:absolute;inset:0;background:rgba(6,10,16,.55);
    -webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);}
  .mobile-menu.open{pointer-events:auto;visibility:visible;transition:visibility 0s;}
  .mm-sheet{position:absolute;left:0;right:0;bottom:0;background:var(--bg-2);
    border-top:1px solid var(--line);border-radius:22px 22px 0 0;
    padding:12px 16px calc(18px + env(safe-area-inset-bottom));
    transform:translateY(105%);transition:transform .32s cubic-bezier(.4,.15,.2,1);
    box-shadow:0 -24px 60px rgba(0,0,0,.45);}
  .mobile-menu.open .mm-sheet{transform:none;}
  .mm-handle{width:42px;height:4px;border-radius:2px;background:var(--line-2);margin:2px auto 16px;}
  .mm-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .mm-card{display:flex;align-items:center;justify-content:center;text-align:center;padding:18px 12px;
    border-radius:15px;background:var(--surface);border:1px solid var(--line);
    color:var(--text);font-size:15px;font-weight:600;transition:.15s;}
  .mm-card:active{transform:scale(.97);border-color:var(--accent-ring);}
  .mm-theme{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;
    padding:14px 16px;border-radius:15px;background:var(--surface);border:1px solid var(--line);
    color:var(--text);font-size:14.5px;font-weight:600;}
  .theme-switch{position:relative;width:62px;height:32px;flex-shrink:0;border:none;padding:0;background:transparent;cursor:pointer;}
  .theme-switch .ts-track{position:absolute;inset:0;border-radius:999px;background:var(--surface-hi);
    border:1px solid var(--line-2);transition:.2s;}
  .theme-switch .ts-thumb{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;
    background:var(--accent);transition:left .22s cubic-bezier(.4,.15,.2,1);box-shadow:0 2px 6px rgba(0,0,0,.3);}
  html.light .theme-switch .ts-thumb{left:35px;}
  .mm-download{width:100%;margin-top:12px;}
  body.menu-open{overflow:hidden;}
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero{position:relative;padding:80px 0 72px;overflow:hidden;}
.hero::before{content:'';position:absolute;z-index:-1;width:760px;height:760px;border-radius:50%;
  top:-360px;right:-160px;background:radial-gradient(circle,rgba(46,230,107,.10),transparent 62%);filter:blur(10px);}
.hero .grid{display:grid;grid-template-columns:1fr 1.06fr;gap:44px;align-items:center;}
.hero-pill{display:inline-flex;align-items:center;gap:9px;padding:7px 15px 7px 11px;border-radius:999px;
  background:var(--accent-soft);border:1px solid var(--accent-ring);color:var(--accent);
  font-size:13px;font-weight:600;margin-bottom:22px;}
.hero-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 3px rgba(46,230,107,.18);}
.eyebrow{display:inline-flex;align-items:center;gap:9px;padding:6px 13px 6px 7px;border-radius:999px;
  background:rgba(255,255,255,.035);border:1px solid var(--line-2);color:var(--text-2);
  font-size:13px;font-weight:500;margin-bottom:24px;}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);}
.eyebrow b{color:var(--text);font-weight:600;}
.hero h1{font-size:clamp(36px,5vw,58px);letter-spacing:-.03em;}
.hero h1 .accent{color:var(--accent);}
.hero .sub{max-width:508px;margin:22px 0 0;color:var(--text-2);font-size:clamp(15px,1.5vw,18px);}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px;}
.hero .stats{display:flex;gap:38px;margin-top:40px;flex-wrap:wrap;}
.hero .stats .n{font-family:'Unbounded',sans-serif;font-size:25px;line-height:1;}
.hero .stats .l{color:var(--text-2);font-size:13px;margin-top:6px;}
@media(max-width:920px){
  .hero .grid{grid-template-columns:1fr;gap:34px;text-align:center;}
  .hero .sub{margin-left:auto;margin-right:auto;}
  .hero .cta,.hero .stats{justify-content:center;}
  .hero-visual{order:-1;}
}

/* ── Визуал hero: ноутбук + телефон ─────────────────────────────────────── */
/* hero-visual растянут на колонку, flex-end -> сцену жмём вправо; сцена = размер ноутбука */
.hero-visual{position:relative;display:flex;justify-content:flex-end;padding:10px 0 24px;}
.hv-stage{position:relative;width:min(580px,100%);margin-right:-12%;}
.hv-stage::before{content:'';position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);
  width:540px;height:420px;border-radius:50%;z-index:0;
  background:radial-gradient(circle,rgba(46,230,107,.16),transparent 66%);filter:blur(28px);}
.laptop{position:relative;z-index:1;display:block;width:100%;height:auto;
  filter:drop-shadow(0 34px 50px rgba(0,0,0,.58));}
/* Телефон — внахлёст левого-нижнего угла ноутбука (специфичность бьёт .phone) */
.hv-stage .phone-sm{position:absolute;left:2%;bottom:0;z-index:3;
  transform:scale(.5);transform-origin:bottom left;}
.phone{width:250px;height:516px;border-radius:42px;background:linear-gradient(165deg,#333b47,#0f1218);
  padding:9px;box-shadow:0 48px 96px -42px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.06),
  inset 0 0 0 2px rgba(0,0,0,.5);position:relative;}
/* Боковые кнопки: питание справа, качелька громкости слева */
.phone::before{content:'';position:absolute;right:-3px;top:150px;width:3px;height:66px;border-radius:0 3px 3px 0;
  background:linear-gradient(#454e5b,#191e26);}
.phone::after{content:'';position:absolute;left:-3px;top:116px;width:3px;height:40px;border-radius:3px 0 0 3px;
  background:linear-gradient(#454e5b,#191e26);box-shadow:0 54px 0 -1px #3c4551;}
.phone .screen{width:100%;height:100%;border-radius:34px;background:var(--bg-2);overflow:hidden;position:relative;}
.phone .screen .shot-fill{width:100%;height:100%;object-fit:cover;display:block;}
.phone .screen .glare{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(130deg,rgba(255,255,255,.16),rgba(255,255,255,0) 28%,transparent 66%,rgba(255,255,255,.05));
  mix-blend-mode:screen;opacity:.55;}

@media(max-width:920px){.hero-visual{justify-content:center;}.hv-stage{margin-right:0;}}
@media(max-width:560px){.hv-stage .phone-sm{transform:scale(.44);}}

/* ── Секции ─────────────────────────────────────────────────────────────── */
section{padding:72px 0;position:relative;}
.kicker{display:block;text-align:center;color:var(--accent);font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px;}
.section-head{text-align:center;max-width:640px;margin:0 auto 48px;}
.section-head h2{font-size:clamp(26px,3.6vw,40px);letter-spacing:-.025em;}
.section-head p{color:var(--text-2);margin-top:14px;font-size:16.5px;}

/* ── Полоса «На любое устройство» ───────────────────────────────────────── */
.devices-strip{padding:30px 0;}
.devices-strip .ds-title{text-align:center;color:var(--text-muted);font-size:13px;font-weight:500;
  letter-spacing:.04em;text-transform:uppercase;margin-bottom:20px;}
.devices-strip .ds-icons{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 20px;}
.os-ic{display:flex;align-items:center;gap:10px;padding:11px 18px;border-radius:12px;
  background:var(--surface);border:1px solid var(--line);color:var(--text-2);
  transition:color .18s,border-color .18s,transform .18s;}
.os-ic:hover{color:var(--text);border-color:var(--line-2);transform:translateY(-2px);}
.os-ic svg{width:22px;height:22px;color:var(--text);opacity:.85;}
.os-ic span{font-size:14.5px;font-weight:500;}
@media(max-width:560px){.os-ic{padding:9px 13px;}.os-ic span{font-size:13px;}.os-ic svg{width:19px;height:19px;}}

/* ── Фичи (отдельные карточки) ──────────────────────────────────────────── */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
/* Полупрозрачные «стеклянные» карточки + подсветка-прожектор за курсором */
.feat{position:relative;border-radius:20px;padding:24px 24px 34px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.04),transparent 42%),var(--surface);
  border:1px solid var(--line);
  box-shadow:0 14px 40px -30px rgba(0,0,0,.7);
  transition:transform .25s ease,border-color .25s,background .25s;}
/* Верхняя акцент-линия */
.feat::before{content:'';position:absolute;inset:0 0 auto 0;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0;transition:opacity .25s;}
/* Прожектор, следующий за курсором (--mx/--my задаёт JS) */
.feat::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,0),rgba(46,230,107,.16),transparent 60%);}
.feat:hover{transform:translateY(-5px);border-color:rgba(46,230,107,.32);
  background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 42%),var(--surface-hi);}
.feat:hover::before,.feat:hover::after{opacity:1;}
/* Крупная иконка-изображение за слоем карточки (фон под текстом) */
.feat-wm{position:absolute;right:2px;bottom:2px;width:88px;height:88px;z-index:0;pointer-events:none;
  color:var(--accent);opacity:.11;transition:opacity .3s ease,transform .35s ease;}
.feat-wm svg{width:100%;height:100%;}
.feat:hover .feat-wm{opacity:.15;transform:scale(1.06) rotate(-5deg);}
/* Текст — поверх фоновых слоёв */
.feat h3,.feat p{position:relative;z-index:1;}
.feat h3{font-size:17.5px;margin-bottom:7px;letter-spacing:-.01em;}
.feat p{color:var(--text-2);font-size:13.6px;line-height:1.5;}
@media(max-width:860px){
  /* Мобилка: горизонтальная лента со свайпом */
  .feat-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    gap:14px;padding:2px 24px 14px;margin:0 -24px;scrollbar-width:none;}
  .feat-grid::-webkit-scrollbar{display:none;}
  .feat{scroll-snap-align:center;}
  .feat:hover{transform:none;}
}

/* ── Как это работает — зигзаг с крупными цифрами ───────────────────────── */
.steps.zigzag{display:flex;flex-direction:column;gap:20px;max-width:920px;margin:0 auto;}
.zstep{position:relative;display:flex;align-items:center;gap:26px;width:72%;overflow:hidden;
  padding:30px 34px;border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.04),transparent 42%),var(--surface);
  border:1px solid var(--line);
  box-shadow:0 16px 44px -30px rgba(0,0,0,.7);
  transition:transform .2s ease,border-color .2s,background .2s;}
.zstep:nth-child(even){align-self:flex-end;}   /* зигзаг: 2-й шаг справа */
.zstep:nth-child(odd){align-self:flex-start;}
.zstep:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.16);
  background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 42%),var(--surface-hi);}
.znum{flex-shrink:0;font-family:'Unbounded',sans-serif;font-size:64px;line-height:.9;letter-spacing:-.04em;
  background:linear-gradient(180deg,rgba(46,230,107,.42),rgba(46,230,107,.12));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:1px rgba(46,230,107,.35);}
.zstep h3{font-size:19px;margin-bottom:7px;letter-spacing:-.01em;}
.zstep p{color:var(--text-2);font-size:14.5px;}
@media(max-width:760px){
  .steps.zigzag{gap:14px;}
  .zstep{width:100%;align-self:stretch;gap:18px;padding:22px 22px;}
  .znum{font-size:48px;}
}
@media(max-width:440px){
  .zstep{flex-direction:column;align-items:flex-start;gap:6px;}
  .znum{font-size:40px;}
}

/* ── Сравнение ──────────────────────────────────────────────────────────── */
.compare{max-width:840px;margin:0 auto;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);}
.compare .crow{display:grid;grid-template-columns:1.4fr 1fr 1fr;align-items:center;}
.compare .crow+.crow{border-top:1px solid var(--line);}
.compare .crow>div{padding:16px 20px;font-size:14.5px;}
.compare .chead{background:var(--surface-2);font-weight:600;}
.compare .chead .us{color:var(--accent);}
.compare .cfeat{color:var(--text-2);}
.compare .cell{display:flex;align-items:center;gap:8px;}
.compare .cell.no{color:var(--text-muted);}
.compare .cell svg{width:17px;height:17px;flex-shrink:0;}
.compare .cell.yes svg{color:var(--accent);}
.compare .cell.no svg{color:var(--text-muted);}
.compare .col-us{background:rgba(46,230,107,.05);}
@media(max-width:640px){.compare .crow{grid-template-columns:1.2fr .8fr .8fr;}.compare .crow>div{padding:13px 12px;font-size:13px;}}

/* ── Плавающие бейджи протоколов/безопасности вокруг таблицы ─────────────── */
#why{overflow:hidden;}
.orbit{position:absolute;inset:0;z-index:0;pointer-events:none;}
#why .section-head,#why .compare{position:relative;z-index:1;}
.orb{--c:#8892a0;position:absolute;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;
  color:var(--c);backdrop-filter:blur(8px);
  border:1px solid color-mix(in srgb,var(--c) 34%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 15%,rgba(255,255,255,.02)),rgba(255,255,255,.015));
  box-shadow:0 14px 34px -16px rgba(0,0,0,.6),0 0 26px -8px color-mix(in srgb,var(--c) 55%,transparent);
  animation:orbFloat 6s ease-in-out infinite;}
.orb svg{width:24px;height:24px;}
@keyframes orbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
/* Слева и справа по три — зеркально, чуть ближе к таблице; свой цвет по смыслу */
.orb-1{--c:#E5484D;top:13%;left:9%;width:50px;height:50px;animation-delay:-.2s;}   /* WireGuard */
.orb-2{--c:#2EE66B;top:47%;left:5.5%;animation-delay:-2.4s;}                        /* Шифрование */
.orb-3{--c:#F0883E;bottom:16%;left:10%;width:46px;height:46px;animation-delay:-1.3s;} /* OpenVPN */
.orb-4{--c:#6E8BFF;top:13%;right:9%;width:50px;height:50px;animation-delay:-3s;}     /* Приватность */
.orb-5{--c:#2EE66B;top:47%;right:5.5%;animation-delay:-.9s;}                         /* Обход */
.orb-6{--c:#2EE66B;bottom:16%;right:10%;width:46px;height:46px;animation-delay:-1.8s;} /* Ключи */
@media(prefers-reduced-motion:reduce){.orb{animation:none;}}
@media(max-width:1040px){.orb-2,.orb-5{display:none;}}
@media(max-width:760px){.orbit{display:none;}}

/* ── Витрина приложения — карусель премиум-карточек (картинка + текст) ───── */
.pocket-carousel{position:relative;max-width:900px;margin:0 auto;}
.car-viewport{overflow:hidden;padding:10px 4px;}
.car-track{display:flex;transition:transform .55s cubic-bezier(.4,0,.2,1);}
.car-slide{flex:0 0 100%;padding:0 6px;}
/* Премиум-карточка — широкая и невысокая */
.pcard{position:relative;display:grid;grid-template-columns:146px 1fr;gap:34px;align-items:center;
  padding:22px 36px;border-radius:22px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.04),transparent 42%),var(--surface);
  border:1px solid var(--line);
  box-shadow:0 20px 50px -34px rgba(0,0,0,.75);
  transition:border-color .25s,background .25s;}
.pcard:hover{border-color:rgba(46,230,107,.28);
  background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 42%),var(--surface-hi);}
/* Значок-иконка за слоем (как в «Возможностях») — .feat-wm переиспользуется */
.pcard .feat-wm{right:-10px;bottom:-14px;width:120px;height:120px;}
/* Симметричные иконки (глобус, мультиплатформа) не режем — показываем целиком в углу */
.car-slide:nth-child(2) .feat-wm,
.car-slide:nth-child(3) .feat-wm{right:30px;bottom:22px;width:86px;height:86px;opacity:.12;}
/* Скриншот телефона с зелёным гало */
.pcard-media{position:relative;display:flex;justify-content:center;}
.pcard-media::before{content:'';position:absolute;inset:8% 10%;z-index:0;border-radius:50%;
  background:radial-gradient(circle,rgba(46,230,107,.22),transparent 68%);filter:blur(24px);}
.phone-shot{position:relative;z-index:1;width:146px;max-width:42vw;border-radius:20px;overflow:hidden;
  border:1px solid rgba(255,255,255,.1);background:var(--bg-2);
  box-shadow:0 26px 52px -28px rgba(0,0,0,.8),0 0 0 6px rgba(255,255,255,.02);}
.phone-shot img{width:100%;height:auto;display:block;}
/* Текст */
.pcard-body{position:relative;z-index:1;}
.pcard-tag{display:inline-block;padding:5px 11px;border-radius:7px;margin-bottom:13px;
  font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-ring);}
.pcard-body h3{font-size:clamp(19px,2.1vw,23px);letter-spacing:-.02em;margin-bottom:10px;}
.pcard-body p{color:var(--text-2);font-size:14.5px;max-width:540px;}
/* Стрелки */
.car-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:rgba(28,34,43,.82);border:1px solid var(--line-2);color:var(--text);
  backdrop-filter:blur(8px);box-shadow:0 12px 30px -14px rgba(0,0,0,.7);
  transition:background .18s,border-color .18s,transform .18s;}
.car-arrow:hover{background:var(--surface-hi);border-color:rgba(255,255,255,.24);}
.car-arrow:active{transform:translateY(-50%) scale(.94);}
.car-arrow svg{width:19px;height:19px;}
.car-arrow.prev{left:-18px;} .car-arrow.next{right:-18px;}
/* Точки-индикаторы */
.car-dots{display:flex;justify-content:center;gap:8px;margin-top:22px;}
.car-dot{width:8px;height:8px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--surface-hi);transition:width .25s,background .25s;}
.car-dot.active{width:22px;border-radius:5px;background:var(--accent);}
@media(max-width:620px){
  .pcard{grid-template-columns:1fr;gap:18px;justify-items:center;text-align:center;padding:24px 20px;}
  .pcard-body p{margin:0 auto;}
  .phone-shot{width:158px;}
  .car-arrow.prev{left:-6px;} .car-arrow.next{right:-6px;}
}

/* ── Дракон на ПК ───────────────────────────────────────────────────────── */
.desktop-showcase{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:1000px;margin:0 auto;}
.desktop-showcase::before{content:'';position:absolute;z-index:-1;inset:-10% 8% 30% 8%;
  background:radial-gradient(60% 100% at 50% 0,rgba(46,230,107,.12),transparent 72%);filter:blur(34px);}
.ds-shot{margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--line-2);
  box-shadow:0 34px 70px -36px rgba(0,0,0,.75);background:var(--surface);
  transition:transform .28s ease,box-shadow .28s;}
.ds-shot:hover{transform:translateY(-5px);box-shadow:0 46px 88px -34px rgba(0,0,0,.82);}
.ds-shot img{width:100%;height:auto;display:block;}   /* без повторного кропа */
.ds-shot figcaption{padding:12px 16px;font-size:13px;color:var(--text-2);
  border-top:1px solid var(--line);background:linear-gradient(180deg,transparent,rgba(255,255,255,.02));}
@media(max-width:760px){.desktop-showcase{grid-template-columns:1fr;}}

/* ── Скачивание (прямые ссылки) ─────────────────────────────────────────── */
.downloads{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:900px;margin:0 auto;}
.dl{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:30px 24px;
  transition:transform .18s,border-color .18s,background .18s;box-shadow:var(--shadow);}
.dl:hover{transform:translateY(-4px);border-color:var(--line-2);background:var(--surface-2);}
.dl .os{width:52px;height:52px;border-radius:14px;background:var(--surface-hi);display:grid;place-items:center;margin-bottom:8px;}
.dl .os svg{width:28px;height:28px;color:var(--text);}
.dl h3{font-size:17px;}
.dl .meta{color:var(--text-2);font-size:13px;margin-bottom:14px;}
.dl .btn{width:100%;}
.dl.soon{opacity:.68;}
.dl.soon .btn{background:rgba(255,255,255,.04);color:var(--text-2);border:1px solid var(--line-2);box-shadow:none;cursor:default;}
@media(max-width:760px){.downloads{grid-template-columns:1fr;}}

/* ── Тарифы ─────────────────────────────────────────────────────────────── */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1080px;margin:0 auto;}
.plan{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:30px;box-shadow:var(--shadow);}
.plan.pro{border-color:var(--accent-ring);background:linear-gradient(180deg,rgba(46,230,107,.06),var(--surface));}
/* Огненный Премиум и золотой Ультра — как в приложении */
.plan.fire{background:linear-gradient(150deg,#FF8A3D 0%,#E23B2E 52%,#7A1512 100%);border-color:rgba(226,59,46,.5);color:#fff;box-shadow:0 22px 46px -24px rgba(226,59,46,.6);}
.plan.fire .pname,.plan.fire .price,.plan.fire li b{color:#fff;}
.plan.fire li{color:rgba(255,255,255,.85);}
.plan.fire li svg{color:#fff;}
.plan.fire .price span{color:rgba(255,255,255,.8);}
.plan.fire .btn{background:#fff;color:#7a1512;border:none;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.45);}
.plan.fire .btn:hover{background:#ffe9e2;box-shadow:0 12px 28px -10px rgba(0,0,0,.55);}
.plan.gold{background:linear-gradient(150deg,#F7E3A6 0%,#E3B457 52%,#9A6E22 100%);border-color:rgba(154,110,34,.55);color:#2A1D06;box-shadow:0 22px 46px -24px rgba(227,180,87,.6);}
.plan.gold .pname,.plan.gold .price,.plan.gold li b{color:#2A1D06;}
.plan.gold li{color:#4A3411;}
.plan.gold li svg{color:#7A1512;}
.plan.gold .price span{color:#4A3411;}
.plan.gold .btn{background:#2A1D06;color:#F7E3A6;border:none;
  box-shadow:0 10px 24px -10px rgba(90,60,10,.5);}
.plan.gold .btn:hover{background:#3a2a0c;box-shadow:0 12px 28px -10px rgba(90,60,10,.6);}
.plan .pname{font-family:'Unbounded',sans-serif;font-size:19px;}
.plan .badge{position:absolute;top:26px;right:26px;background:var(--accent-soft);color:var(--accent);
  font-size:12px;font-weight:600;padding:5px 12px;border-radius:999px;border:1px solid var(--accent-ring);}
.plan .price{margin:16px 0 4px;font-family:'Unbounded',sans-serif;font-size:34px;}
.plan .price span{font-family:'Rubik';font-size:15px;color:var(--text-2);font-weight:400;}
.plan ul{list-style:none;margin:22px 0 24px;display:flex;flex-direction:column;gap:12px;}
.plan li{display:flex;align-items:center;gap:11px;font-size:14.5px;color:var(--text-2);}
.plan li b{color:var(--text);font-weight:500;}
.plan li svg{width:18px;height:18px;color:var(--accent);flex-shrink:0;}
.plan .btn{width:100%;margin-top:auto;}
/* Мобилка: тарифы листаются горизонтально (справа налево). Ставим ПОСЛЕ базового
   .plans{display:grid}, чтобы победить по порядку источника. */
@media(max-width:860px){
  .plans{display:flex;grid-template-columns:none;overflow-x:auto;gap:14px;
    scroll-snap-type:x mandatory;padding:2px 4px 10px;max-width:none;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .plans::-webkit-scrollbar{display:none;}
  .plans>.plan{flex:0 0 82%;scroll-snap-align:center;opacity:1;transform:none;}
}

/* ── FAQ (аккордеон) ────────────────────────────────────────────────────── */
.faq{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:10px;}
.qa{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;transition:border-color .18s;}
.qa[open]{border-color:var(--line-2);}
.qa summary{list-style:none;cursor:pointer;padding:19px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-size:15.5px;font-weight:500;}
.qa summary::-webkit-details-marker{display:none;}
.qa summary .pl{position:relative;width:18px;height:18px;flex-shrink:0;}
.qa summary .pl::before,.qa summary .pl::after{content:'';position:absolute;background:var(--text-2);border-radius:2px;transition:.2s;}
.qa summary .pl::before{top:8px;left:0;width:18px;height:2px;}
.qa summary .pl::after{left:8px;top:0;width:2px;height:18px;}
.qa[open] summary .pl::after{transform:scaleY(0);}
.qa .a{padding:0 22px 20px;color:var(--text-2);font-size:14.5px;}

/* ── CTA-полоса ─────────────────────────────────────────────────────────── */
.cta-band .box{position:relative;text-align:center;border-radius:24px;padding:60px 28px;overflow:hidden;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));border:1px solid var(--line-2);box-shadow:var(--shadow);}
.cta-band .box::before{content:'';position:absolute;width:520px;height:280px;top:-140px;left:50%;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(46,230,107,.16),transparent 60%);filter:blur(28px);}
.cta-band h2{font-size:clamp(24px,3.6vw,38px);position:relative;letter-spacing:-.025em;}
.cta-band p{color:var(--text-2);margin:14px auto 0;max-width:520px;position:relative;}
.cta-band .cta{margin-top:28px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;position:relative;}
/* На мобилке кнопки «Скачать приложение» и «Личный кабинет» одинакового размера */
@media(max-width:640px){
  .cta-band .cta{flex-direction:column;align-items:stretch;}
  .cta-band .cta .btn{width:100%;}
}

/* ── Футер ──────────────────────────────────────────────────────────────── */
.footer{border-top:1px solid var(--line);padding:40px 0;color:var(--text-2);}
.footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap;}
.footer .links{display:flex;gap:22px;flex-wrap:wrap;}
.footer a{color:var(--text-2);font-size:14px;transition:color .15s;}
.footer a:hover{color:var(--text);}
.footer .small{font-size:13px;color:var(--text-muted);}

/* Появление при скролле */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease;}
.reveal.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}}

/* ── Правая часть шапки + переключатель темы ────────────────────────────── */
.header-right{display:flex;align-items:center;gap:12px;}
.theme-toggle{width:42px;height:42px;border-radius:11px;flex-shrink:0;
  border:1px solid var(--line-2);background:rgba(255,255,255,.03);color:var(--text);
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  transition:color .18s,border-color .18s,background .18s,transform .18s;}
.theme-toggle:hover{color:var(--accent);border-color:var(--accent-ring);background:rgba(255,255,255,.06);}
.theme-toggle:active{transform:scale(.94);}
.theme-toggle svg{width:20px;height:20px;}
.theme-toggle .i-moon{display:none;}
html.light .theme-toggle .i-sun{display:none;}
html.light .theme-toggle .i-moon{display:inline;}

/* ════════════════════════════════════════════════════════════════════════
   СВЕТЛАЯ ТЕМА — html.light переопределяет токены и «стеклянные» карточки
   ════════════════════════════════════════════════════════════════════════ */
html.light{
  --bg:#eef1f6;
  --bg-2:#e6eaf0;
  --surface:#ffffff;
  --surface-2:#f5f7fa;
  --surface-hi:#e9edf3;
  --line:rgba(16,26,40,.10);
  --line-2:rgba(16,26,40,.16);
  --text:#15202b;
  --text-2:#586472;
  --text-muted:#8a94a2;
  --accent-ring:rgba(46,230,107,.32);
  --shadow:0 1px 0 rgba(255,255,255,.6),0 18px 40px -28px rgba(20,30,50,.28);
}
html.light body::before{
  background:
    radial-gradient(900px 520px at 78% -8%,rgba(46,230,107,.10),transparent 60%),
    radial-gradient(760px 500px at -6% 12%,rgba(46,230,107,.07),transparent 60%),
    linear-gradient(180deg,#e6eaf0,var(--bg) 40%);
}
html.light .header{background:rgba(255,255,255,.75);}
html.light .btn-ghost{background:rgba(16,26,40,.035);}
html.light .btn-ghost:hover{background:rgba(16,26,40,.07);border-color:rgba(16,26,40,.2);}
html.light .nav a.link:hover{background:rgba(16,26,40,.05);}
html.light .theme-toggle{background:rgba(16,26,40,.035);}
html.light .theme-toggle:hover{background:rgba(16,26,40,.07);}
html.light .burger{background:rgba(16,26,40,.035);}
html.light .mobile-menu{background:var(--surface);}

/* «Стеклянные» карточки → плотный белый с мягкой тенью (стекло на свету слепнет) */
html.light .feat,
html.light .zstep,
html.light .pcard{
  background:#ffffff;border-color:var(--line);backdrop-filter:none;
  box-shadow:0 14px 36px -24px rgba(20,30,50,.35);}
html.light .feat:hover,
html.light .zstep:hover,
html.light .pcard:hover{background:#ffffff;border-color:var(--accent-ring);}
html.light .feat::after{background:radial-gradient(360px circle at var(--mx,50%) var(--my,0),rgba(46,230,107,.10),transparent 60%);}

html.light .car-arrow{background:#ffffff;border-color:var(--line-2);color:var(--text);}
html.light .car-arrow:hover{background:var(--surface-hi);}
html.light .phone-shot,
html.light .ds-shot,
html.light .os-ic,
html.light .dl,
html.light .plan,
html.light .qa,
html.light .compare{background:var(--surface);}
html.light .compare .chead{background:var(--surface-2);}
html.light .dl:hover{background:var(--surface-2);}
html.light .plan.pro{background:linear-gradient(180deg,rgba(46,230,107,.08),var(--surface));}
/* Огненный/золотой градиенты должны применяться и в светлой теме */
html.light .plan.fire{background:linear-gradient(150deg,#FF8A3D 0%,#E23B2E 52%,#7A1512 100%);}
html.light .plan.gold{background:linear-gradient(150deg,#F7E3A6 0%,#E3B457 52%,#9A6E22 100%);}
html.light .cta-band .box{background:linear-gradient(180deg,#ffffff,var(--surface-2));border-color:var(--line-2);}
html.light .car-dot{background:var(--surface-hi);}