@import url('/assets/fonts.css?v=redesign2');
/* ════════════════════════════════════════════════════════════
   SAFFER — Platinum-редизайн (кинематографичный)
   Display: Unbounded · Body: Golos Text (self-host, privacy-friendly)
   Дизайн-система + перестил боевых классов всех страниц + лендинг-кинематографика.
   ════════════════════════════════════════════════════════════ */

:root{
  --plat-1:#ffffff; --plat-2:#e4edf7; --plat-3:#c2cedd; --plat-4:#8a9ab0;
  --plat-grad:linear-gradient(155deg,#ffffff 0%,#c2cedd 42%,#8a9ab0 76%,#e4edf7 100%);
  --bg:#080b12; --bg-deep:#05070c; --panel:#0f1320;
  --glass:rgba(255,255,255,.045); --border:rgba(255,255,255,.09); --border-plat:rgba(194,206,221,.32);
  --text:#eef3fb; --muted:#8a9ab0;
  --paper:#f5f7fb; --paper-2:#ffffff; --ink:#0c0f16; --ink-2:#4a5568; --ln:rgba(12,15,22,.09);
  --ok:#7fd6a6; --ember:#e7c277;
  --disp:'Unbounded',system-ui,sans-serif;
  --body:'Golos Text',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --maxw:1160px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg-deep);color:var(--text);
  font-family:var(--body);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
img,svg,video{display:block;max-width:100%}
::selection{background:rgba(194,206,221,.25);color:#fff}
.light ::selection{background:rgba(12,15,22,.14);color:var(--ink)}

.container{max-width:var(--maxw);margin:0 auto;padding:0 24px;
  padding-left:calc(24px + env(safe-area-inset-left,0px));padding-right:calc(24px + env(safe-area-inset-right,0px))}
a,button{-webkit-tap-highlight-color:transparent}
.container.narrow{max-width:820px}
.narrow{max-width:820px;margin-left:auto;margin-right:auto}
.center{text-align:center}
.mt-s{margin-top:12px}.mt-m{margin-top:26px}
.hint{font-size:13px;color:var(--muted)}
.section .hint,.section-tight .hint,.light .hint{color:var(--ink-2)}/*M4: контраст мелкого текста на светлых секциях*/
.hint a{text-decoration:underline;text-underline-offset:3px}

/* ─── Noise grain ─── */
#noise{
  position:fixed;inset:-50%;z-index:70;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 9s steps(6) infinite;
}
@keyframes grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,3%)}}

/* ─── Custom cursor ─── */
#cursor,#cursorRing{position:fixed;top:0;left:0;pointer-events:none;z-index:99;border-radius:50%}
#cursor{width:7px;height:7px;background:var(--plat-2);transform:translate(-50%,-50%)}
#cursorRing{width:34px;height:34px;border:1px solid rgba(194,206,221,.55);transform:translate(-50%,-50%);
  transition:width .3s var(--ease),height .3s var(--ease),opacity .3s;mix-blend-mode:difference}
#cursorRing.hover{width:58px;height:58px}
@media (pointer:coarse){#cursor,#cursorRing{display:none}}
body.has-cursor,body.has-cursor a,body.has-cursor button{cursor:none}

/* ─── Preloader ─── */
#loader{display:none}
body.js #loader{position:fixed;inset:0;z-index:100;background:var(--bg-deep);display:flex;align-items:center;justify-content:center;transition:transform .8s var(--ease)}
#loader.done{transform:translateY(-101%)}
.ld-inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:22px}
.ld-shield{width:88px}
.ld-path{stroke:#c2cedd;stroke-width:2.4;fill:none;stroke-dasharray:340;stroke-dashoffset:340;animation:draw 1.1s var(--ease) forwards}
.ld-ff path{fill:rgba(194,206,221,0);animation:ffin .5s .7s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes ffin{to{fill:rgba(194,206,221,.9)}}
.ld-word{font-family:var(--disp);font-weight:700;letter-spacing:.42em;font-size:13px;color:var(--plat-3);padding-left:.42em}
.ld-pct{position:absolute;bottom:-56px;font-family:var(--mono);font-size:12px;color:var(--muted)}

/* ─── Nav (боевой класс .nav — перестил) ─── */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;transition:background .4s,backdrop-filter .4s,padding .4s;padding:16px 0}
.nav.scrolled{background:rgba(5,7,12,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--border);padding:10px 0}
.nav-inner{display:flex;align-items:center;gap:34px}
.nav-logo{display:flex;align-items:center;gap:11px;min-height:44px}
.nav-logo img{width:26px}
.wordmark{font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:.3em;padding-left:.3em}
.nav-links{display:flex;align-items:center;gap:26px;margin-left:auto}
.nav-links a:not(.btn){font-size:14px;color:var(--muted);transition:color .25s;position:relative}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-4px;height:1px;width:0;background:var(--plat-3);transition:width .3s var(--ease)}
.nav-links a:not(.btn):hover{color:var(--text)}
.nav-links a:not(.btn):hover::after{width:100%}
.btn-cab{padding:10px 18px !important;font-size:12px !important;gap:7px;min-width:44px;min-height:44px;border:1px solid var(--border-plat);border-radius:999px}
.btn-cab:hover{border-color:var(--plat-3);background:rgba(194,206,221,.07)}
.btn-cab svg{width:15px;height:15px}
@media (max-width:640px){.nav-links a:not(.btn){display:none}}

/* ─── Buttons ─── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 30px;border-radius:999px;max-width:100%;text-align:center;
  font-family:var(--disp);font-weight:500;font-size:13px;letter-spacing:.04em;
  transition:transform .3s var(--ease),box-shadow .3s,background .3s,border-color .3s,color .3s;will-change:transform}
.btn svg{width:17px;height:17px}
.btn-primary{background:linear-gradient(155deg,#fff 0%,#c2cedd 45%,#9fb0c6 100%);color:#0c0e13;box-shadow:0 8px 30px -10px rgba(194,206,221,.45)}
.btn-primary:hover{box-shadow:0 12px 44px -10px rgba(194,206,221,.65);transform:translateY(-2px)}
.btn-ghost{border:1px solid var(--border-plat);color:var(--plat-2)}
.btn-ghost:hover{border-color:var(--plat-3);background:rgba(194,206,221,.07)}
.btn-lg{padding:18px 40px;font-size:14px}
.btn-xl{padding:20px 44px;font-size:15px}
.btn-block{display:flex;width:100%;white-space:normal;overflow-wrap:anywhere}
/* тёмная кнопка на светлом фоне */
.light .btn-ghost,.section .btn-ghost,.section-tight .btn-ghost{border-color:var(--ln);color:var(--ink)}
.light .btn-ghost:hover,.section .btn-ghost:hover{border-color:rgba(12,15,22,.3);background:rgba(12,15,22,.04)}

/* ════ 1 · HERO (кинематографичный, лендинг) ════ */
.hero{position:relative;height:100vh;height:100svh}
.hero-sticky{position:relative;height:100%;overflow:hidden;
  background:radial-gradient(1100px 640px at 14% -8%,rgba(194,206,221,.07),transparent 60%),
            radial-gradient(900px 520px at 100% 4%,rgba(138,154,176,.06),transparent 60%),var(--bg-deep)}
body.hero-scrub .hero{height:var(--hero-scroll,260vh)}
body.hero-scrub .hero-sticky{position:sticky;top:0;height:100vh;height:100svh}
.hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,7,12,0) 0%,rgba(5,7,12,0) 34%,rgba(5,7,12,.5) 60%,rgba(5,7,12,.88) 100%)}
.hero-content{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  text-align:center;padding:0 24px 11vh;text-shadow:0 2px 30px rgba(5,7,12,.8);
  padding-left:calc(24px + env(safe-area-inset-left,0px));padding-right:calc(24px + env(safe-area-inset-right,0px))}
.hero-content .container{display:flex;flex-direction:column;align-items:center;padding:0}
.hero-kicker{font-family:var(--mono);font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);margin-bottom:26px}
#heroTitle{font-family:var(--disp);font-weight:700;font-size:clamp(2rem,5.6vw,4.4rem);line-height:1.12;letter-spacing:-.01em;max-width:16ch}
#heroTitle .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
#heroTitle .c{display:inline-block;transition:transform .9s var(--ease);transition-delay:calc(var(--i)*26ms);
  background:var(--plat-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
body.js #heroTitle .c{transform:translateY(115%)}
body.ready #heroTitle .c{transform:translateY(0)}
.hero-sub{margin-top:26px;max-width:46ch;color:var(--muted);font-size:17px}
.hero-cta{display:flex;gap:16px;margin-top:38px;flex-wrap:wrap;justify-content:center}
.hero-note{margin-top:18px;font-size:13.5px;color:var(--muted)}
.cta-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
/* гейт прогрессивного улучшения: прячем ТОЛЬКО при живом JS (body.js ставит сам скрипт).
   Иначе не выполнившийся app.js — заблокирован, оборвался, SyntaxError на старом Safari —
   оставлял герой без кикера, подзаголовка и ОБЕИХ кнопок CTA (ревизия 08.08.2026) */
.rv-load{transition:opacity .9s var(--ease),transform .9s var(--ease)}
body.js .rv-load{opacity:0;transform:translateY(22px)}
body.ready .rv-load{opacity:1;transform:none}
body.ready .hero-kicker{transition-delay:.55s}
body.ready .hero-sub{transition-delay:.7s}
body.ready .hero-cta{transition-delay:.85s}
body.ready .hero-note{transition-delay:1s}
body.ready .hero-hint{transition-delay:1.15s}
.hero-hint{position:absolute;bottom:calc(30px + env(safe-area-inset-bottom,0px));left:0;right:0;z-index:2;display:flex;flex-direction:column;align-items:center;gap:12px;
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--muted);text-transform:uppercase}
.hint-line{width:1px;height:44px;overflow:hidden;position:relative;background:rgba(194,206,221,.15)}
.hint-line::after{content:"";position:absolute;left:0;top:-50%;width:100%;height:50%;background:var(--plat-2);animation:hint 1.8s var(--ease) infinite}
@keyframes hint{to{top:110%}}

/* ════ 2 · Marquee ════ */
.marquee{background:var(--bg-deep);border-top:1px solid var(--border);border-bottom:1px solid var(--border);overflow:hidden;padding:20px 0;position:relative;z-index:2}
.mq-track{display:flex;width:max-content;animation:mq 40s linear infinite}
.mq-set{display:flex;align-items:center;gap:34px;padding-right:34px}
.mq-set span{font-family:var(--disp);font-weight:400;font-size:14px;letter-spacing:.06em;color:var(--plat-3);white-space:nowrap}
.mq-set i{font-style:normal;color:var(--plat-4);font-size:11px}
@keyframes mq{to{transform:translateX(-50%)}}

/* ════ 3 · Туннель (лендинг) ════ */
#features.tunnel{height:380vh;position:relative;background:var(--bg-deep)}
.tn-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--bg-deep)}
.tn-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.tn-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(72% 62% at 50% 50%,rgba(5,7,12,.80) 0%,rgba(5,7,12,.58) 38%,rgba(5,7,12,.34) 68%,rgba(5,7,12,.72) 100%)}
.tn-panel{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);width:min(800px,92vw);text-align:center;pointer-events:none}
body.js .tn-panel{opacity:0}
.tn-num{font-family:var(--mono);font-size:13px;letter-spacing:.35em;color:var(--plat-4);margin-bottom:18px}
.tn-panel h2{font-family:var(--disp);font-weight:700;font-size:clamp(2rem,5.8vw,3.9rem);letter-spacing:-.01em;overflow-wrap:break-word;
  background:var(--plat-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;margin-bottom:20px}
.tn-panel p{color:var(--muted);font-size:17px;max-width:42ch;margin:0 auto;text-shadow:0 2px 24px rgba(5,7,12,.9)}
.tn-progress{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:2;width:120px;height:2px;background:rgba(194,206,221,.14);border-radius:2px;overflow:hidden}
#tnBar{display:block;height:100%;width:0;background:var(--plat-grad)}

/* ════ 4 · Счётчики: тьма → свет ════ */
#stats{background:linear-gradient(180deg,var(--bg-deep) 0%,#20242e 30%,#aab3c2 62%,var(--paper) 84%);padding:44vh 0 110px}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:900px){.stats-grid{grid-template-columns:repeat(2,1fr);gap:34px}}
.stat{text-align:center;color:var(--ink)}
.stat-num{font-family:var(--disp);font-weight:800;font-size:clamp(3rem,7vw,5.4rem);line-height:1;
  background:linear-gradient(155deg,#2a3242 0%,#5c6c84 60%,#8a9ab0 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.stat-cap{margin-top:12px;color:var(--ink-2);font-size:15px}

/* ════ Светлые секции (боевые классы .section) ════ */
.section,.light{background:var(--paper);color:var(--ink);padding:110px 0}
.section-tight{background:var(--paper);color:var(--ink);padding:70px 0}
.section+.section,.section+.section-tight,.section-tight+.section{padding-top:0}
.pricing-head{max-width:720px;margin:0 auto 44px;text-align:center}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-2)}
.hero .eyebrow{color:var(--muted)}
h1,h2,h3{font-family:var(--disp);letter-spacing:-.01em;line-height:1.16;overflow-wrap:break-word}/*M2: длинные заголовки не обрезаются*/
.section h2,.section-tight h2{font-weight:700;font-size:clamp(1.8rem,4vw,3rem)}
.lede{color:var(--ink-2);font-size:17px;max-width:60ch;margin-left:auto;margin-right:auto}
.hero .lede{color:var(--muted)}

/* ── Bento / features (боевые .bento .feature) ── */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px}
@media (max-width:900px){.bento{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}
/* iPad portrait (641-900): две колонки вместо одной узкой */
@media (min-width:641px) and (max-width:900px){.bento{grid-template-columns:repeat(2,1fr);max-width:none}}
.feature{background:var(--paper-2);border:1px solid var(--ln);border-radius:20px;padding:30px 28px;transition:transform .4s var(--ease),box-shadow .4s}
.feature:hover{transform:translateY(-5px);box-shadow:0 26px 54px -30px rgba(12,15,22,.24)}
.feature-ico{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;
  background:linear-gradient(155deg,#0c0f16,#232a38);border:1px solid var(--border)}
.feature-ico svg{width:22px;height:22px;color:var(--plat-3)}
.feature h3{font-weight:700;font-size:18px;margin-bottom:9px}
.feature p{font-size:14.5px;color:var(--ink-2)}

/* ── Callouts (боевые .callouts .callout) ── */
.callouts{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media (max-width:760px){.callouts{grid-template-columns:1fr}}
.callout{display:flex;gap:18px;background:var(--paper-2);border:1px solid var(--ln);border-radius:18px;padding:26px 26px}
.callout.accent{background:linear-gradient(#0c0f16,#0c0f16) padding-box,var(--plat-grad) border-box;border:1px solid transparent;color:var(--text)}
.callout.accent h3{color:var(--text)}.callout.accent p{color:var(--muted)}
.callout-ico{flex:none;width:44px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:rgba(12,15,22,.05);border:1px solid var(--ln)}
.callout.accent .callout-ico{background:rgba(255,255,255,.06);border-color:var(--border)}
.callout-ico svg{width:21px;height:21px;color:var(--plat-4)}
.callout.accent .callout-ico svg{color:var(--plat-2)}
.callout h3{font-weight:700;font-size:16.5px;margin-bottom:7px}
.callout p{font-size:14px;color:var(--ink-2)}

/* ── Продукт: ЛК-мокап (лендинг) ── */
.device-stage{position:relative;display:flex;justify-content:center;align-items:flex-end;gap:0;padding:20px 0 10px}
.browser-frame{width:min(680px,92%);border-radius:16px;overflow:hidden;background:#0c0f16;color:var(--text);box-shadow:0 40px 90px -30px rgba(12,15,22,.45);border:1px solid rgba(255,255,255,.08)}
.bf-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;background:#141927;border-bottom:1px solid var(--border)}
.bf-bar i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.14)}
.bf-bar i:first-child{background:#e58a8a}.bf-bar i:nth-child(2){background:#e7c277}.bf-bar i:nth-child(3){background:#7fd6a6}
.bf-url{margin-left:12px;font-family:var(--mono);font-size:12px;color:var(--muted);background:rgba(255,255,255,.05);padding:4px 14px;border-radius:7px}
.bf-body{padding:26px 28px 30px}
.bf-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.bf-brand{font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.28em}
.bf-balance{color:var(--muted);font-size:14px}.bf-balance b{color:var(--text);font-size:16px}
.bf-card{background:var(--glass);border:1px solid var(--border);border-radius:14px;padding:20px 22px}
.bf-row{display:flex;justify-content:space-between;font-size:14px;padding:6px 0}
.bf-row span{color:var(--muted)}
.bf-key{margin-top:16px;text-align:center;padding:13px;border-radius:10px;background:linear-gradient(155deg,#fff 0%,#c2cedd 45%,#9fb0c6 100%);color:#0c0e13;font-family:var(--disp);font-weight:500;font-size:13px}
.bf-chips{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.bf-chips span{font-size:12px;color:var(--plat-3);border:1px solid var(--border-plat);padding:5px 13px;border-radius:999px}
.phone-frame{width:210px;margin-left:-70px;margin-bottom:-34px;position:relative;z-index:2;border-radius:34px;background:#0c0f16;color:var(--text);border:1px solid rgba(255,255,255,.12);box-shadow:0 46px 90px -26px rgba(12,15,22,.55);padding:10px;transform:rotate(4deg)}
.pf-notch{width:74px;height:20px;background:#05070c;border-radius:12px;margin:2px auto 10px}
.pf-screen{border-radius:24px;background:radial-gradient(140px 140px at 50% 68%,rgba(127,214,166,.13),transparent 70%),#080b12;padding:28px 16px 34px;text-align:center;position:relative;overflow:hidden}
.pf-status{display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--disp);font-weight:500;font-size:13px}
.pf-status i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 12px var(--ok);animation:pulse 2.2s infinite}
@keyframes pulse{50%{opacity:.4}}
.pf-loc{color:var(--muted);font-size:11px;margin-top:8px}
.pf-ping{font-family:var(--mono);font-size:11px;color:var(--ok);margin-top:4px}
.pf-ring{width:98px;height:98px;margin:22px auto 0;border-radius:50%;border:1px solid rgba(127,214,166,.4);position:relative}
.pf-ring::after{content:"";position:absolute;inset:12px;border-radius:50%;border:1px solid rgba(194,206,221,.25)}
@media (max-width:720px){.phone-frame{display:none}}

/* ════ Тарифы (боевые .dur-toggle .plans .plan — новая механика выбора) ════ */
.dur-toggle{display:inline-flex;gap:4px;background:#e8ecf3;border-radius:999px;padding:5px;margin:6px auto 0}
.dur-toggle button{padding:10px 20px;border-radius:999px;font-size:14px;font-weight:500;color:var(--ink-2);white-space:nowrap;transition:background .3s,color .3s,box-shadow .3s}
.dur-toggle button.active,.dur-toggle button.on{background:var(--ink);color:#fff;box-shadow:0 6px 18px -8px rgba(12,15,22,.5)}
.dur-toggle .save{margin-left:7px;font-size:11px;color:#186a42;font-weight:600}
.dur-toggle button.active .save,.dur-toggle button.on .save{color:#7fd6a6}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch;margin-top:44px}
@media (max-width:900px){.plans{grid-template-columns:1fr;max-width:440px;margin-inline:auto}}
.plan{background:var(--paper-2);border:1px solid var(--ln);border-radius:22px;padding:34px 30px;display:flex;flex-direction:column;cursor:pointer;min-width:0;
  transition:transform .4s var(--ease),box-shadow .4s,background .3s,border-color .3s;position:relative}
.plan:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(12,15,22,.25)}
.plan:not(.featured):hover{background:var(--paper);border-color:rgba(12,15,22,.16)}
.plan.featured{color:var(--text);border-color:transparent;background:linear-gradient(#0c0f16,#0c0f16) padding-box,var(--plat-grad) border-box;box-shadow:0 34px 80px -30px rgba(12,15,22,.5)}
.plan-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:linear-gradient(155deg,#fff,#c2cedd);color:#0c0e13;
  font-family:var(--disp);font-weight:500;font-size:11px;letter-spacing:.08em;padding:6px 16px;border-radius:999px;white-space:nowrap;transition:opacity .35s var(--ease)}
.plan:not(.popular) .plan-badge{opacity:0}
.plan-name{font-family:var(--disp);font-weight:700;font-size:19px;overflow-wrap:anywhere}
.plan-devices{font-size:14px;color:var(--ink-2);margin-top:5px;overflow-wrap:anywhere}
.plan.featured .plan-devices{color:var(--muted)}
.plan-price{font-family:var(--disp);font-weight:800;font-size:clamp(2rem,3.2vw,2.6rem);margin-top:24px;line-height:1;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;min-width:0}
.plan-price .amount{min-width:0;overflow-wrap:anywhere}
.plan-price .cur{font-size:.45em;font-weight:500}
.plan-per{font-size:13px;color:var(--ink-2);margin-top:9px;min-height:19px}
.plan.featured .plan-per{color:var(--muted)}
.plan-feats{list-style:none;margin:24px 0 30px;display:grid;gap:11px;font-size:14px;color:var(--ink-2)}
.plan.featured .plan-feats{color:var(--muted)}
.plan-feats li{display:flex;align-items:flex-start;gap:9px;min-width:0}
.plan-feats li span{min-width:0;overflow-wrap:anywhere}
.plan-feats svg{flex:none;width:16px;height:16px;color:var(--plat-4);margin-top:2px}
.plan.featured .plan-feats svg{color:var(--ok)}
.plan .btn{margin-top:auto}
.plan:not(.featured) .btn-primary{background:transparent;border:1px solid var(--ink);color:var(--ink);box-shadow:none}
.plan:not(.featured) .btn-primary:hover{background:var(--ink);color:#fff}
.price-flip{animation:flip .45s var(--ease)}
@keyframes flip{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}
.status-pending{display:flex;justify-content:center;padding:40px 0}
.spin{display:inline-block;width:18px;height:18px;border:2px solid rgba(12,15,22,.15);border-top-color:var(--ink);border-radius:50%;animation:spin .8s linear infinite}
.spin-lg{width:30px;height:30px;border-width:3px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ════ Шаги (боевые .steps .step .platforms .platform) ════ */
.steps{display:grid;gap:20px;margin-top:40px}
.step{background:var(--paper-2);border:1px solid var(--ln);border-radius:20px;padding:30px 30px;position:relative;overflow:hidden}
.step-head{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.step-num{flex:none;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-weight:700;font-size:18px;color:var(--ink);background:linear-gradient(155deg,#fff,#c2cedd)}
.step-title{font-family:var(--disp);font-weight:700;font-size:18px}
.step-desc{font-size:14.5px;color:var(--ink-2)}
.platforms{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:18px 0 4px}
@media (max-width:560px){.platforms{grid-template-columns:1fr}}
.platform{display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:12px;border:1px solid var(--ln);background:var(--paper);
  font-family:var(--disp);font-weight:500;font-size:13.5px;color:var(--ink);transition:transform .3s var(--ease),border-color .3s,background .3s}
.platform:hover{transform:translateY(-2px);border-color:rgba(12,15,22,.28);background:#fff}
.platform svg{flex:none;width:20px;height:20px;color:var(--ink)}
.platform img{flex:none;width:20px;height:20px;border-radius:5px}

/* ════ FAQ (лендинг + faq.html) ════ */
.faq-list{border-top:1px solid var(--ln);margin-top:36px}
.faq-item{border-bottom:1px solid var(--ln)}
.faq-q{width:100%;text-align:left;padding:22px 44px 22px 2px;font-family:var(--disp);font-weight:500;font-size:16px;position:relative;transition:color .25s}
.faq-q::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-family:var(--body);font-weight:400;font-size:26px;color:var(--ink-2);transition:transform .4s var(--ease)}
.faq-item.open .faq-q::after{transform:translateY(-50%) rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.faq-a p{padding:0 40px 24px 2px;color:var(--ink-2);font-size:15px;max-width:62ch}

/* ════ Финал ════ */
#cta{position:relative;overflow:hidden;background:var(--bg-deep);padding:170px 0 190px;text-align:center}
.cta-glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58vw 34vh at 50% 108%,rgba(231,194,119,.14),transparent 65%),
            radial-gradient(40vw 30vh at 18% 112%,rgba(194,206,221,.08),transparent 60%),
            radial-gradient(900px 400px at 85% -10%,rgba(138,154,176,.06),transparent 60%)}
.cta-inner{position:relative;z-index:2}
#cta h2{font-family:var(--disp);font-weight:700;font-size:clamp(2.4rem,6.4vw,5rem);line-height:1.1;letter-spacing:-.01em;
  background:var(--plat-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
#cta p{color:var(--muted);margin:26px 0 44px;font-size:17px}

/* ════ Footer (боевой .footer) ════ */
.footer{background:var(--bg-deep);border-top:1px solid var(--border);overflow:hidden;padding:60px 0 calc(46px + env(safe-area-inset-bottom,0px));position:relative}
.ft-word{font-family:var(--disp);font-weight:800;font-size:clamp(4rem,15.5vw,13.5rem);line-height:.85;text-align:center;letter-spacing:.02em;user-select:none;
  background:linear-gradient(180deg,rgba(194,206,221,.16),rgba(194,206,221,.015));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;margin-bottom:54px}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:34px;flex-wrap:wrap;margin-bottom:26px}
.footer-links{display:flex;gap:22px;flex-wrap:wrap}
.footer-links a{display:inline-flex;align-items:center;min-height:44px;font-size:13.5px;color:var(--muted);transition:color .25s}
.footer-links a:hover{color:var(--text)}
.footer-legal{font-size:12.5px;color:var(--muted);line-height:1.8;max-width:60ch}

/* ════ Keyboard focus ════ */
.btn:focus-visible,.plan:focus-visible,.dur-toggle button:focus-visible,.faq-q:focus-visible,
.nav-logo:focus-visible,.nav-links a:focus-visible,.footer-links a:focus-visible{
  outline:2px solid var(--plat-3);outline-offset:3px;
}

/* ════ Reveal on scroll ════ */
/* Гейт .js (ревизия 08.08.2026): без выполнившегося app.js контент виден сразу —
   иначе любая ошибка загрузки скрипта оставляла страницу пустой. */
body.js .rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
body.js .rv.in{opacity:1;transform:none}

/* ════ Мобайл ════ */
@media (max-width:640px){
  .section,.light{padding:74px 0}
  .section-tight{padding:52px 0}
  #cta{padding:112px 0 124px}
  .pricing-head{margin-bottom:34px}
  /*M12: селектор сроков переносится в 2 ряда вместо обрезания*/
  .dur-toggle{display:flex;flex-wrap:wrap;width:100%;border-radius:18px}
  .dur-toggle button{flex:1 1 40%;min-width:0;padding:11px 8px;font-size:12.5px}
}

/* ════ Reduced motion (H1: гасим движение, показываем все 3 панели туннеля) ════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  #noise,.mq-track,.hint-line::after,.pf-status i{animation:none!important}
  .hero{height:auto}
  #features.tunnel{height:auto}
  .hero-sticky{position:relative;height:100svh}
  .tn-sticky{position:relative;height:auto;padding:72px 0}
  .tn-panel{position:relative;left:auto;top:auto;transform:none!important;opacity:1!important;width:min(700px,92%);margin:0 auto 44px;pointer-events:auto}
  .tn-panel:last-of-type{margin-bottom:0}
  .tn-progress{display:none}
  .rv,.rv-load{opacity:1;transform:none}
  #heroTitle .c{transform:none}
}