/* ============ Sudar VPN — design system ============ */
:root{
  --bg:#0D0F14;
  --bg-2:#11151B;--surf-1:#11151B;--surf-2:#151A22;
  --surface:rgba(255,255,255,.045);
  --surface-2:rgba(255,255,255,.07);
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);
  --text:#F4F6FA;
  --text-2:#8E96A3;
  --text-3:#5F6874;
  --accent:#0A84FF;
  --accent-2:#0A84FF;
  --accent-glow:rgba(10,132,255,.36);
  --ok:#34d17b;
  --danger:#ff5d5d;
  --r:18px;
  --r-sm:12px;
  --header-h:64px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
/* Серая плашка, которую Safari и Chrome на телефоне рисуют поверх нажатого
   элемента, выключена для всего сайта. Свойство наследуется, поэтому одного
   правила на html хватает на любые ссылки, кнопки и вопросы FAQ. Раньше оно
   стояло только на части элементов (.btn, .burger, плитки оплаты) — отсюда
   «не везде». Фокус с клавиатуры (:focus-visible) это не затрагивает. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:400 16px/1.6 Inter,-apple-system,'Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(1100px 520px at 50% -8%,rgba(50,100,255,.13),transparent 62%),
    radial-gradient(800px 500px at 85% 30%,rgba(50,100,255,.05),transparent 60%),
    radial-gradient(2px 2px at 20% 30%,rgba(244,246,250,.05) 50%,transparent 51%),
    radial-gradient(2px 2px at 70% 60%,rgba(244,246,250,.04) 50%,transparent 51%),
    radial-gradient(2px 2px at 40% 80%,rgba(244,246,250,.04) 50%,transparent 51%);
}
body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.28;background-image:radial-gradient(circle,rgba(139,160,219,.25) 0 1px,transparent 1.35px);background-size:36px 36px;mask-image:linear-gradient(180deg,#000 0,transparent 14%,#000 34%,#000 78%,transparent 100%)}
h1,h2,h3{font-family:Unbounded,Inter,sans-serif;font-weight:600;line-height:1.15;margin:0 0 .5em;letter-spacing:-.01em}
/* Заголовки страниц набираются ровно как заголовки секций на главной
   (эталон — «Для всех ваших устройств»): Unbounded 600 с трекингом -.025em,
   то же, что задаёт .section-head h2. Раньше h1 шёл весом 700 и трекингом
   -.01em — заметно жирнее и разреженнее эталона.
   Потолок 50px — тот же, что у заголовка хиро (.hero-copy h1), у которого
   своё исключение (Inter 750) и он этой правкой не затрагивается. */
h1{font-size:clamp(30px,6vw,50px);font-weight:600;letter-spacing:-.025em}
h2{font-size:clamp(24px,4vw,38px);letter-spacing:-.025em}
h3{font-size:clamp(17px,2.5vw,21px)}
p{margin:0 0 1em;color:var(--text-2)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:rgba(50,100,255,.4)}

.container{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}
@media(min-width:768px){.container{padding:0 32px}}

/* ---------- header ---------- */
.header{
  position:fixed;top:0;left:0;right:0;z-index:50;height:var(--header-h);
  background:rgba(13,15,20,.94);
  border-bottom:1px solid var(--line);
}
.header-in{display:flex;align-items:center;justify-content:space-between;height:100%}
.brand{display:flex;align-items:center;gap:4px;font-family:Unbounded,sans-serif;font-weight:600;font-size:15px;letter-spacing:.04em}
.brand img{height:40px;width:auto;aspect-ratio:1/1}
.nav{display:none;gap:28px;font-size:14px;color:var(--text-2)}
.nav a{transition:color .25s}
.nav a:hover,.nav a[aria-current]{color:var(--text)}
@media(min-width:900px){.nav{display:flex}}
.header-cta{display:none;gap:10px;align-items:center}
@media(min-width:900px){.header-cta{display:flex}}
.burger{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:44px;height:44px;padding:0;background:none;border:0;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;cursor:pointer}
.burger span{width:24px;height:2px;border-radius:2px;background:var(--text);transform-origin:center;transition:transform .46s var(--ease),opacity .3s var(--ease)}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0;transform:scaleX(0)}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(min-width:900px){.burger{display:none}}
@media(prefers-reduced-motion:reduce){.burger span{transition:none}}
/* open/close choreography adapted from apple.com's globalnav mobile flyout:
   panel fades in on its own blur/backdrop (already the site's own
   mobile-menu background), while each link fades + rises 4px in a
   top-to-bottom cascade (20ms apart, matching Apple's own stagger step) —
   eased with the site's own --ease instead of Apple's cubic-bezier(.4,0,.6,1).
   Closing skips the cascade for a quick, uniform fade, matching Apple's own
   asymmetry between an elegant staggered opening and an instant close. */
.mobile-menu{
  position:fixed;top:0;left:0;right:0;height:100vh;height:100dvh;z-index:49;
  padding:calc(var(--header-h) + 12px) 20px 24px;
  background:rgba(13,15,20,.94);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:4px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .46s var(--ease),visibility 0s linear .46s;
}
.mobile-menu.open{
  opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity .46s var(--ease) 120ms,visibility 0s linear;
}
/* ">" (direct child) on purpose: .mobile-menu-cta's two <a>.btn buttons are
   also descendants of .mobile-menu, and a plain "a" here was bleeding this
   nav-link styling (huge font, padding, border-bottom, its own fade/nth-child
   delay) into them on top of .btn's own rules — which is why they rendered
   off-style instead of as normal site buttons. */
.mobile-menu > a{
  padding:14px 4px;
  font:600 clamp(17px,2.5vw,21px)/1.3 Inter,sans-serif;
  border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(-4px);
  transition:opacity .46s var(--ease),transform .46s var(--ease),color .28s ease;
}
.mobile-menu.open > a{opacity:1;transform:translateY(0)}
.mobile-menu > a:nth-child(1){transition-delay:120ms}
.mobile-menu > a:nth-child(2){transition-delay:150ms}
.mobile-menu > a:nth-child(3){transition-delay:180ms}
.mobile-menu > a:nth-child(4){transition-delay:210ms}
.mobile-menu > a:nth-child(5){transition-delay:240ms}
.mobile-menu:not(.open) > a{transition-duration:.3s;transition-delay:0s}
/* bottom-pinned CTA pair — same buttons/classes as the desktop header-cta,
   pushed to the foot of the flex column so they stay put like on desktop.
   Single column: Личный кабинет above, Купить VPN below, same order as
   the markup and as the desktop header-cta reads left-to-right. */
.mobile-menu-cta{
  display:grid;grid-template-columns:1fr;gap:10px;margin-top:auto;padding-top:20px;
  opacity:0;transform:translateY(-4px);
  transition:opacity .46s var(--ease) 260ms,transform .46s var(--ease) 260ms;
}
.mobile-menu.open .mobile-menu-cta{opacity:1;transform:translateY(0)}
.mobile-menu:not(.open) .mobile-menu-cta{transition-duration:.3s;transition-delay:0s}
@media(prefers-reduced-motion:reduce){
  .mobile-menu,.mobile-menu a,.mobile-menu-cta{transition:none}
}
html.menu-open,html.menu-open body{overflow:hidden}

/* ---------- buttons ---------- */
/* глобальный сброс нативного оформления <button>: элементный селектор
   слабее любого класса, поэтому осознанные рамки (стеклянные .btn-ghost,
   .promo-pill-submit, focus-visible) не затрагиваются — убирается только
   браузерный контур по умолчанию */
button{-webkit-appearance:none;appearance:none;border:0;font:inherit}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:50px;padding:0 26px;border-radius:14px;border:1px solid transparent;
  font:600 15px/1 Inter,sans-serif;color:var(--text);cursor:pointer;white-space:nowrap;
  transition:transform .25s var(--ease),box-shadow .25s,background .25s,border-color .25s;
  -webkit-tap-highlight-color:transparent;user-select:none;
}
.btn:active{transform:scale(.98)}
.btn-primary{
  background:linear-gradient(180deg,var(--accent-2),var(--accent));
  box-shadow:0 1px 0 rgba(255,255,255,.15) inset,0 8px 24px -8px var(--accent-glow);
}
.btn-primary:hover{box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 10px 32px -6px var(--accent-glow)}
.btn-ghost{background:var(--surface);border-color:var(--line)}
.btn-ghost:hover{background:var(--surface-2);border-color:var(--line-2)}
.btn-lg{height:56px;padding:0 32px;font-size:16px;border-radius:16px}
.btn-sm{height:40px;padding:0 18px;font-size:14px;border-radius:12px}
.btn-block{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}

/* ---------- glass card ---------- */
.card{
  position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.card-pad{padding:24px}
@media(min-width:768px){.card-pad{padding:32px}}

/* ---------- inputs ---------- */
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:13px;font-weight:500;color:var(--text-2)}
.input{
  height:52px;padding:0 16px;border-radius:14px;width:100%;
  background:rgba(0,0,0,.25);border:1px solid var(--line);color:var(--text);
  font:500 16px Inter,sans-serif;outline:none;transition:border-color .25s,box-shadow .25s;
}
.input::placeholder{color:var(--text-3)}
.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(50,100,255,.18)}

/* ---------- misc ---------- */
.badge{
  display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);font-size:13px;color:var(--text-2);
}
.badge .dot{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}
.hairline{height:1px;background:var(--line);border:0;margin:0}
.section{position:relative;z-index:1;padding:72px 0}
@media(min-width:768px){.section{padding:110px 0}}
.section-head{max-width:640px;margin-bottom:40px}
@media(min-width:768px){.section-head{margin-bottom:56px}}
.eyebrow{font:600 12px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin-bottom:14px}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* footer */
.footer{border-top:1px solid var(--line);padding:48px 0 32px;position:relative;z-index:1}
.footer-grid{display:grid;grid-template-columns:1fr;gap:32px}
@media(min-width:768px){.footer-grid{grid-template-columns:2fr 1fr 1fr 1fr}}
.footer h4{font:600 13px Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin:0 0 14px}
.footer a{display:block;padding:5px 0;font-size:14px;color:var(--text-2);transition:color .25s}
.footer a:hover{color:var(--text)}
.footer-bottom{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;margin-top:40px;padding-top:24px;border-top:1px solid var(--line);font-size:13px;color:var(--text-3)}

/* noise overlay for depth */
.noise{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- landing ---------- */
.hero{position:relative;padding:calc(var(--header-h) + 48px) 0 40px;z-index:1;overflow:hidden}
@media(min-width:900px){.hero{padding:calc(var(--header-h) + 84px) 0 90px}}
.hero-grid{display:grid;grid-template-columns:1fr;gap:8px;align-items:center}
@media(min-width:900px){.hero-grid{grid-template-columns:1.05fr .95fr;gap:40px}}
.hero-copy{max-width:560px;position:relative;z-index:2}
.hero-copy .badge{margin-bottom:22px}
.hero-sub{font-size:clamp(16px,2vw,19px);max-width:460px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-globe{position:relative;display:flex;justify-content:center;margin:0 -20px}
.hero-globe canvas{display:block;max-width:100%}
.hero-globe::after{content:'';position:absolute;inset:auto 0 -1px;height:120px;
  background:linear-gradient(180deg,transparent,var(--bg));pointer-events:none}
@media(max-width:899px){
  .hero-globe{order:1;margin:8px auto -40px;max-width:340px;opacity:.95}
  .hero{padding-bottom:0}
}

/* v10 — devices section: calm graphite tiles, no blue selection glow */
#apps{padding-top:72px!important}
#apps .section-head{margin-bottom:30px}
#apps .section-head h2{margin-bottom:14px}
#apps .section-head p{max-width:680px}
#apps .platforms{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
#apps .platform{
  min-height:47px;
  padding:0 17px;
  gap:10px;
  color:#F4F4F4;
  background:#353535;
  border:0;
  border-radius:11px;
  box-shadow:none;
  font:600 16px/1 Inter,sans-serif;
  transform:none;
  transition:background-color .22s ease,color .22s ease,transform .22s ease;
}
#apps .platform:hover{color:#fff;background:#3C3C3C}
#apps .platform.is-active{color:#fff;background:#484848;border:0;box-shadow:none}
#apps .platform svg{width:21px;height:21px}
#apps .platform:focus-visible{outline:2px solid rgba(244,246,250,.72);outline-offset:3px}
#apps .platform-showcase{
  margin-top:24px;
  min-height:430px;
  padding:0;
  display:grid;
  grid-template-columns:minmax(260px,.72fr) minmax(0,1.55fr);
  overflow:hidden;
  color:#fff;
  background:#242424;
  border:0;
  border-radius:40px;
  box-shadow:none;
}
#apps .platform-showcase.is-switching{animation:deviceTileSwitch .32s ease both}
@keyframes deviceTileSwitch{0%{opacity:.76;transform:translateY(3px) scale(.996)}100%{opacity:1;transform:none}}
#apps .platform-copy{
  min-width:0;
  padding:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
#apps .platform-copy h3{
  margin:0;
  max-width:270px;
  color:#fff;
  font:700 clamp(27px,2.25vw,36px)/1.12 Inter,sans-serif;
  letter-spacing:-1.1px;
}
#apps .platform-guide{
  min-width:0;
  padding:38px 40px 34px;
  display:flex;
  flex-direction:column;
  border-left:1px solid rgba(255,255,255,.09);
}
#apps .platform-guide-title{
  margin-bottom:24px;
  color:#fff;
  font:700 28px/1 Inter,sans-serif;
  letter-spacing:-.55px;
}
#apps .platform-steps{
  margin:0;
  padding-left:25px;
  display:grid;
  gap:17px;
  color:#F2F2F2;
  font:500 16px/1.55 Inter,sans-serif;
}
#apps .platform-steps li{padding-left:3px}
#apps .platform-steps strong{color:#fff;font-weight:600}
#apps .platform-steps a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.38);text-underline-offset:3px}
#apps .platform-guide-action{margin-top:28px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1)}
#apps .platform-download{
  min-height:50px;
  width:max-content;
  max-width:100%;
  padding:0 21px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:#fff;
  background:#353535;
  border-radius:13px;
  font:600 15px/1 Inter,sans-serif;
  transition:background-color .22s ease,transform .22s ease;
}
#apps .platform-download:hover{color:#fff;background:#404040}

@media(max-width:899px){
  #apps{padding-top:54px!important}
  #apps .platform-showcase{grid-template-columns:1fr;border-radius:30px}
  #apps .platform-copy{min-height:150px;padding:30px 24px}
  #apps .platform-copy h3{font-size:31px}
  #apps .platform-guide{padding:30px 26px 28px;border-left:0;border-top:1px solid rgba(255,255,255,.09)}
}
@media(max-width:560px){
  #apps .section-head{margin-bottom:24px}
  #apps .section-head h2{font-size:34px}
  #apps .platforms{gap:8px}
  #apps .platform{flex:1 1 calc(50% - 4px);min-height:44px;padding:0 12px;font-size:14px;border-radius:10px}
  #apps .platform-showcase{margin-top:18px;border-radius:26px}
  #apps .platform-copy{min-height:128px;padding:26px 20px}
  #apps .platform-copy h3{font-size:27px}
  #apps .platform-guide{padding:26px 20px 24px}
  #apps .platform-guide-title{margin-bottom:20px;font-size:24px}
  #apps .platform-steps{padding-left:21px;gap:15px;font-size:15px;line-height:1.52}
  #apps .platform-guide-action{margin-top:24px;padding-top:20px}
  #apps .platform-download{width:100%;justify-content:center;text-align:center}
}

.hero-note{display:flex;gap:18px;flex-wrap:wrap;margin-top:26px;font-size:13px;color:var(--text-3)}
.hero-note span{display:inline-flex;align-items:center;gap:7px}
.hero-note svg{width:14px;height:14px;stroke:var(--text-3)}

.platforms{display:flex;flex-wrap:wrap;gap:10px}
.platform{
  display:inline-flex;align-items:center;gap:9px;padding:12px 20px;border-radius:14px;
  background:var(--surface);border:1px solid var(--line);font:500 14px Inter,sans-serif;
  color:var(--text-2);transition:border-color .25s,color .25s,transform .25s var(--ease);
}
.platform:hover{border-color:var(--line-2);color:var(--text)}
.platform svg{width:18px;height:18px;fill:currentColor}

.feat-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:768px){.feat-grid{grid-template-columns:repeat(3,1fr);gap:18px}}
.feat{padding:28px}
.feat-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:rgba(50,100,255,.12);border:1px solid rgba(50,100,255,.25);margin-bottom:18px}
.feat-icon svg{width:20px;height:20px;stroke:#7d9bff}
.feat h3{margin-bottom:10px}
.feat ul{margin:0;padding:0;list-style:none;color:var(--text-2);font-size:14.5px;display:flex;flex-direction:column;gap:8px}
.feat li{display:flex;gap:10px;align-items:flex-start}
.feat li::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--accent-2);margin-top:9px;flex-shrink:0}

.steps{display:grid;grid-template-columns:1fr;gap:14px;counter-reset:step}
@media(min-width:768px){.steps{grid-template-columns:repeat(3,1fr);gap:18px}}
.step{padding:28px;counter-increment:step}
.step-num{font-family:Unbounded,sans-serif;font-size:13px;font-weight:600;color:var(--text-3);letter-spacing:.1em;margin-bottom:16px}
.step-num::before{content:'0' counter(step);font-size:28px;color:var(--text);display:block;margin-bottom:4px}

.included{display:grid;grid-template-columns:1fr;gap:2px}
@media(min-width:700px){.included{grid-template-columns:1fr 1fr}}
.included-item{display:flex;align-items:center;gap:14px;padding:17px 6px;border-bottom:1px solid var(--line);font-size:15px;color:var(--text-2)}
.included-item svg{width:18px;height:18px;stroke:var(--ok);flex-shrink:0}

.cta-band{position:relative;overflow:hidden;text-align:center;padding:56px 24px}
@media(min-width:768px){.cta-band{padding:80px 48px}}
.cta-band::before{content:'';position:absolute;inset:0;
  background:radial-gradient(600px 300px at 50% 120%,rgba(50,100,255,.22),transparent 70%);pointer-events:none}
.cta-band h2{margin-bottom:12px}
.price-hero{font-family:Unbounded,sans-serif;font-size:clamp(40px,8vw,72px);font-weight:700;line-height:1;margin:18px 0 6px;font-variant-numeric:tabular-nums}
.price-hero small{font-size:.35em;font-weight:600;color:var(--text-2)}

/* ---------- flow pages ---------- */
.flow-main{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:calc(var(--header-h) + 32px) 20px 48px;position:relative;z-index:1}
.flow-card{width:100%;max-width:440px}
.flow-wide{max-width:920px}
.flow-title{text-align:center;margin-bottom:8px}
.flow-sub{text-align:center;font-size:15px;margin-bottom:28px}
.stack{display:flex;flex-direction:column;gap:12px}

/* plans */
.plans{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:20px}
@media(min-width:768px){.plans{grid-template-columns:repeat(2,1fr);gap:14px}}
.plan{
  position:relative;display:flex;align-items:center;gap:16px;padding:20px 22px;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  transition:border-color .25s,background .25s,box-shadow .25s;-webkit-tap-highlight-color:transparent;
}
.plan:hover{border-color:var(--line-2)}
.plan input{position:absolute;opacity:0;pointer-events:none}
.plan .radio{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line-2);flex-shrink:0;position:relative;transition:border-color .2s}
.plan .radio::after{content:'';position:absolute;inset:4px;border-radius:50%;background:var(--accent-2);transform:scale(0);transition:transform .2s var(--ease)}
.plan.selected{border-color:var(--accent);background:rgba(50,100,255,.07);box-shadow:0 0 0 1px var(--accent),0 8px 32px -12px var(--accent-glow)}
.plan.selected .radio{border-color:var(--accent-2)}
.plan.selected .radio::after{transform:scale(1)}
.plan-body{flex:1;min-width:0}
.plan-name{display:block;font:600 16px Inter,sans-serif;color:var(--text)}
.plan-meta{display:block;font-size:13px;color:var(--text-3);margin-top:2px}
.plan-price{font-family:Unbounded,sans-serif;font-weight:600;font-size:19px;white-space:nowrap;font-variant-numeric:tabular-nums}
.plan-price small{font-size:12px;color:var(--text-3);display:block;text-align:right;font-family:Inter;font-weight:500}
.plan-tag{position:absolute;top:-9px;right:16px;padding:3px 10px;border-radius:999px;font:600 11px Inter,sans-serif;
  background:linear-gradient(180deg,var(--accent-2),var(--accent));letter-spacing:.03em}
.plan-trial{grid-column:1/-1}

/* promo */
.promo-toggle{background:none;border:0;color:var(--text-2);font:500 14px Inter,sans-serif;cursor:pointer;
  padding:8px;display:inline-flex;align-items:center;gap:6px;transition:color .2s}
.promo-toggle:hover{color:var(--text)}
.promo-row{display:none;gap:10px;margin-top:10px}
.promo-row.open{display:flex}
.promo-row .input{flex:1}
.promo-msg{margin-top:8px;min-height:22px}
/* on mobile the pricing columns stack, so a taller message here pushes
   "Включено в подписку" down; the success text ("Промокод применён: …")
   reliably wraps to 2 lines at mobile width — reserve that height upfront
   so the result never shifts layout */
@media(max-width:979px){.promo-msg{min-height:44px}}
.promo-ok{color:var(--ok);font-size:13.5px;text-align:center;display:none;opacity:0;filter:blur(3px);transition:opacity .3s var(--ease),filter .3s var(--ease)}
.promo-err{color:var(--danger);font-size:13.5px;text-align:center;display:none;opacity:0;filter:blur(3px);transition:opacity .3s var(--ease),filter .3s var(--ease)}
.promo-ok.show,.promo-err.show{opacity:1;filter:blur(0)}
@media(prefers-reduced-motion:reduce){.promo-ok,.promo-err{transition:none;filter:none}}

/* checkout */
.pay-methods{display:flex;flex-direction:column;gap:12px;margin-bottom:22px}
.pay-method{
  display:flex;align-items:center;gap:16px;padding:18px 20px;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  transition:border-color .25s,background .25s;-webkit-tap-highlight-color:transparent;
}
.pay-method:hover{border-color:var(--line-2)}
.pay-method.selected{border-color:var(--accent-2);background:rgba(50,100,255,.08);box-shadow:0 0 0 1px var(--accent-2),0 0 30px -6px var(--accent-glow)}
.pay-icon{width:42px;height:42px;border-radius:11px;background:var(--surface-2);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pay-icon svg{width:21px;height:21px;stroke:var(--text-2)}
.pay-name{font:600 15px Inter,sans-serif}
.pay-desc{font-size:13px;color:var(--text-3);margin-top:1px}
.summary{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:18px 20px;border-radius:var(--r);background:rgba(0,0,0,.25);border:1px solid var(--line);margin-bottom:20px;
}
.summary-label{font-size:13px;color:var(--text-3)}
.summary-plan{font:600 15px Inter,sans-serif;margin-top:2px}
.summary-price{font-family:Unbounded,sans-serif;font-weight:600;font-size:20px;font-variant-numeric:tabular-nums;white-space:nowrap}
.legal-note{font-size:12.5px;color:var(--text-3);text-align:center;line-height:1.55;margin-top:16px}
.legal-note a{color:var(--text-2);text-decoration:underline;text-underline-offset:2px}

/* payment loader */
/* Экран «Создаём ваш платёж». Раньше переключался display:none/flex, то есть
   возникал рывком. Теперь всегда во флексе, а показ — по прозрачности, чтобы
   появлялся мягко, тем же ease, что и остальные появления на сайте.
   visibility и pointer-events выключены в покое, иначе невидимый слой
   перехватывал бы клики по странице. */
.loader-overlay{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;
  background:rgba(13,15,20,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding:20px}
/* Показ и скрытие — переключением display: это происходит мгновенно и не
   зависит ни от чего. Мягкость даёт анимация появления, а не переход между
   состояниями. Разница принципиальная: если переход почему-то не отработает
   (в фоновой вкладке он не идёт), при затухании через opacity экран остался
   бы непрозрачным и навсегда закрыл страницу. С анимацией худший случай —
   экран просто появится без плавности. */
.loader-overlay.show{display:flex;animation:loaderIn .3s var(--ease)}
@keyframes loaderIn{from{opacity:0}to{opacity:1}}
.loader-box{text-align:center;max-width:340px}
.loader-overlay.show .loader-box{animation:loaderBoxIn .45s var(--ease)}
@keyframes loaderBoxIn{from{transform:translateY(8px)}to{transform:none}}

/* Виджет CloudPayments вставляет в НАШУ страницу собственный индикатор —
   прозрачный слой с кольцом (id payment-loading-overlay-…, z-index 9999).
   Он всплывал поверх нашего, и человек видел два индикатора подряд.
   Гасим только его: элемент остаётся в DOM и виджет сам удаляет его, когда
   открывает окно оплаты, — на логику это не влияет.
   Селектор по началу id: числовой суффикс зависит от версии виджета. */
[id^="payment-loading-overlay"]{display:none!important}

@media(prefers-reduced-motion:reduce){
  .loader-overlay.show,.loader-overlay.show .loader-box{animation:none}
}
.spinner{width:52px;height:52px;margin:0 auto 24px;border-radius:50%;
  border:2px solid var(--line-2);border-top-color:var(--accent-2);animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loader-box h3{font-family:Inter;font-weight:600;font-size:17px}
.loader-box p{font-size:14px}

/* Логотип на карточке успеха. Класс .success-brand в разметке был, а правила
   для него — нет, поэтому работал только .brand: флекс-контейнер во всю ширину
   с прижатием к левому краю. Остальное содержимое карточки центрировано
   через text-align у .login-content, а флекс на него не реагирует — нужен
   именно justify-content. */
.success-brand{
  justify-content:center;
  /* Знак вплотную упирался в заголовок — зазор был ровно 0. Взято 22px:
     ровно столько отделяет фирменный знак от содержимого в карточке
     «Включено в подписку» (.included-card-logo-row), то есть значение уже
     принято на сайте для этой же пары «знак ↔ текст», а не подобрано на глаз.
     Внутренние отступы карточки (8px заголовок, 24px подпись) не трогаем —
     22px крупнее внутриблочных и не спорит с внешними. На узких экранах
     16px, как и у того же знака в карточке подписки. */
  margin-bottom:22px;
}
@media(max-width:620px){.success-brand{margin-bottom:16px}}

/* success / key */
.key-wrap{margin:26px 0 22px}
.key-value{
  font-family:'SF Mono',ui-monospace,Menlo,monospace;font-size:clamp(17px,4.5vw,22px);letter-spacing:.1em;
  text-align:center;padding:20px 16px;border-radius:var(--r);background:rgba(0,0,0,.3);
  border:1px solid rgba(50,100,255,.4);box-shadow:0 0 40px -12px var(--accent-glow);user-select:all;word-break:break-all;
}
.success-check{width:76px;height:76px;margin:0 auto 22px;border-radius:50%;
  background:rgba(52,209,123,.1);border:1px solid rgba(52,209,123,.35);
  display:flex;align-items:center;justify-content:center;animation:pop .5s var(--ease) both}
.success-check svg{width:36px;height:36px;fill:none;stroke:var(--ok);stroke-dasharray:32;stroke-dashoffset:32;animation:dash .55s .25s var(--ease) forwards}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes dash{to{stroke-dashoffset:0}}

/* cabinet */
.cab-grid{display:grid;grid-template-columns:1fr;gap:14px;width:100%;max-width:720px}
@media(min-width:768px){.cab-grid{grid-template-columns:1fr 1fr}}
.cab-stat{padding:22px}
.cab-stat .label{font-size:13px;color:var(--text-3);margin-bottom:6px}
.cab-stat .value{font:600 20px Inter,sans-serif}
.cab-key{grid-column:1/-1}
.status-pill{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;font:600 13px Inter,sans-serif}
.status-active{background:rgba(52,209,123,.12);color:var(--ok);border:1px solid rgba(52,209,123,.3)}
.status-off{background:rgba(255,93,93,.1);color:var(--danger);border:1px solid rgba(255,93,93,.3)}

/* legal */
.legal-page{max-width:760px;margin:0 auto;padding:calc(var(--header-h) + 48px) 20px 80px;position:relative;z-index:1}
.legal-page h1{font-size:clamp(26px,4vw,36px);margin-bottom:8px}
.legal-page .updated{font-size:13px;color:var(--text-3);margin-bottom:36px}
.legal-page h2{font-size:20px;margin-top:36px}
.legal-page p,.legal-page li{color:var(--text-2);font-size:15px}

.rub{font-family:Inter,sans-serif;font-weight:600}
/* ===== Оповещения (порт @shugar/toast, см. assets/js/store.js) ==========
   Геометрию задаёт JS: он выставляет transform и высоту контейнера.
   Здесь вид и переход. Кривая и длительность — из компонента. */
.toaster{
  position:fixed;right:16px;bottom:16px;z-index:9999;
  width:420px;max-width:calc(100vw - 32px);
  pointer-events:none;
}
.toaster-in{position:relative;width:100%;pointer-events:auto}
.toast{
  position:absolute;right:0;bottom:0;width:100%;box-sizing:border-box;
  padding:16px;border-radius:12px;
  background:#242424;border:1px solid rgba(255,255,255,.1);color:#F4F6FA;
  transition:all .35s cubic-bezier(.25,.75,.6,.98);
}
/* типы. success синий — так же, как в оригинале, только синий взят наш */
.toast-success{background:#3264FF;border-color:#3264FF;color:#fff}
.toast-error{background:var(--danger);border-color:var(--danger);color:#fff}
.toast-warning{background:#E0A32E;border-color:#E0A32E;color:#161616}
.toast-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.toast-text{font:500 14px/21px Inter,sans-serif;min-width:0}
.toast-actions{display:flex;gap:4px;flex:none}
.toast-btn{
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;padding:0;border:0;border-radius:8px;
  background:none;color:currentColor;cursor:pointer;
  transition:background-color .15s ease;
}
.toast-btn:hover{background:rgba(255,255,255,.12)}
.toast-warning .toast-btn:hover{background:rgba(0,0,0,.12)}
.toast-btn:focus-visible{outline:2px solid currentColor;outline-offset:2px}
@media(max-width:620px){
  .toaster{right:12px;left:12px;bottom:12px;width:auto}
  .toast{padding:14px}
  .toast-row{gap:12px}
}
@media(prefers-reduced-motion:reduce){
  .toast{transition:opacity .2s linear}
}

/* ============ v3 components (21st.dev adapted, unified system) ============ */
/* hero robot stage */
.robot-stage{position:relative;height:clamp(380px,46vw,620px);display:flex;align-items:flex-end;justify-content:center}
.robot-stage canvas{position:absolute;inset:0;width:100%!important;height:100%!important;opacity:0;transition:opacity .8s var(--ease)}
.robot-stage.live canvas{opacity:1}
.robot-poster{position:absolute;inset:0;background:center bottom/contain no-repeat;transition:opacity .8s var(--ease)}
.robot-stage.live .robot-poster{opacity:0}
.robot-chest-logo{position:absolute;z-index:3;width:7.5%;aspect-ratio:533/588;pointer-events:none;
  background:url(/assets/img/logo-white.png) center/contain no-repeat;opacity:0;transition:opacity 1.4s var(--ease);
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.6));mix-blend-mode:screen}
.robot-chest-logo.show{opacity:.92}
@media(max-width:899px){.robot-stage{margin:0 -4px -40px}}

/* container scroll phone */
.scroll-phone-wrap{perspective:1100px;display:flex;justify-content:center}
.phone{width:min(320px,78vw);aspect-ratio:320/660;border-radius:44px;position:relative;
  background:#0B0D11;border:1.5px solid rgba(244,246,250,.14);
  box-shadow:0 0 0 6px #05070B,0 30px 80px -20px rgba(0,0,0,.85),0 8px 30px rgba(50,100,255,.12);
  transform:rotateX(24deg) scale(.94);transform-origin:center top;
  transition:transform .1s linear;overflow:hidden}
.phone::before{content:'';position:absolute;top:12px;left:50%;transform:translateX(-50%);width:88px;height:22px;border-radius:12px;background:#05070B;z-index:5}
.phone-screen{position:absolute;inset:0;padding:44px 22px 18px;display:flex;flex-direction:column;align-items:center;background:linear-gradient(180deg,#0B0D11,#0D1016)}
.ps-title{font:600 17px Inter,sans-serif;color:var(--text);margin:10px 0 0}
.ps-shield{width:84px;height:92px;margin:34px auto 26px;position:relative;opacity:.85}
.ps-power{width:104px;height:104px;border-radius:50%;margin:0 auto;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 40%,#181D26,#101419);border:1.5px solid rgba(244,246,250,.16);
  transition:border-color .5s,box-shadow .5s}
.ps-power svg{width:38px;height:38px;stroke:var(--text-2);transition:stroke .5s}
.phone.on .ps-power{border-color:rgba(72,220,130,.5);box-shadow:0 0 34px -6px rgba(72,220,130,.35);background:radial-gradient(circle at 50% 40%,#12211A,#0E1712)}
.phone.on .ps-power svg{stroke:#48DC82}
.ps-status{margin-top:22px;text-align:center}
.ps-status .st1{font:600 15.5px Inter;color:var(--text);display:flex;gap:8px;align-items:center;justify-content:center}
.ps-status .st1 .dot2{width:7px;height:7px;border-radius:50%;background:#48DC82;box-shadow:0 0 8px #48DC82;display:none}
.phone.on .ps-status .st1 .dot2{display:inline-block}
.ps-status .st2{font:400 13px Inter;color:var(--text-3);margin-top:5px}
.ps-timer{font:600 34px/1 'SF Mono',ui-monospace,monospace;color:var(--text);margin-top:16px;letter-spacing:.06em;
  font-variant-numeric:tabular-nums;opacity:0;transition:opacity .5s}
.phone.on .ps-timer{opacity:1}
.ps-nav{margin-top:auto;width:100%;display:flex;justify-content:space-around;padding:12px 6px;border-radius:22px;
  background:#12151C;border:1px solid rgba(244,246,250,.07)}
.ps-nav div{display:flex;flex-direction:column;align-items:center;gap:4px;font:500 10.5px Inter;color:var(--text-3)}
.ps-nav div:first-child{color:var(--accent-2)}
.ps-nav svg{width:17px;height:17px;stroke:currentColor}

/* dotted surface section */
.dotted-sec{position:relative;overflow:hidden}
.dotted-sec canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.55}
.dotted-sec .in-front{position:relative;z-index:2}
.stat-row{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:34px}
@media(min-width:768px){.stat-row{grid-template-columns:repeat(4,1fr)}}
.stat{padding:20px 22px;border-radius:16px;background:rgba(17,21,27,.72);border:1px solid var(--line);backdrop-filter:blur(6px)}
.stat b{display:block;font:600 24px/1.1 Unbounded;color:var(--text);margin-bottom:6px}
.stat span{font:400 13px Inter;color:var(--text-2)}

/* glowing cards */
.glow-card{position:relative;border-radius:18px;background:var(--surf-1);border:1px solid var(--line);padding:28px;overflow:hidden}
.glow-card::before{content:'';position:absolute;inset:-1px;border-radius:18px;padding:1px;opacity:var(--go,0);
  background:radial-gradient(220px circle at var(--gx,50%) var(--gy,50%),rgba(50,100,255,.75),transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  transition:opacity .3s;pointer-events:none}
.glow-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:900px){.glow-grid{grid-template-columns:repeat(3,1fr)}}

/* spotlight feature blocks */
.spot{display:grid;grid-template-columns:1fr;gap:26px;align-items:center;padding:38px 0;border-top:1px solid var(--line)}
@media(min-width:900px){.spot{grid-template-columns:1fr 1fr;gap:70px;padding:64px 0}
  .spot.flip .spot-visual{order:2}}
.spot h3{font-size:clamp(20px,3vw,28px)}
.spot p{font-size:15.5px;max-width:430px}
.spot-visual{position:relative;height:230px;border-radius:20px;overflow:hidden;
  background:linear-gradient(160deg,var(--surf-2),#0D1016);border:1px solid var(--line)}
@media(min-width:900px){.spot-visual{height:290px}}
.spot-visual .sv-ico{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.spot-visual .sv-ico svg{width:84px;height:84px;stroke:#5B8CFF;stroke-width:1.1;filter:drop-shadow(0 10px 30px rgba(50,100,255,.4))}
.spot-visual::after{content:'';position:absolute;inset:0;background:radial-gradient(60% 80% at 50% 110%,rgba(50,100,255,.18),transparent 70%)}
.spot-kpi{display:flex;gap:26px;margin-top:20px}
.spot-kpi div b{display:block;font:600 20px Unbounded;color:var(--text)}
.spot-kpi div span{font:400 12.5px Inter;color:var(--text-3)}

/* orbital timeline */
.orbit-wrap{position:relative;width:min(560px,92vw);aspect-ratio:1;margin:10px auto 0;display:none}
@media(min-width:900px){.orbit-wrap{display:block}}
.orbit-ring{position:absolute;inset:0;border-radius:50%;border:1px dashed rgba(244,246,250,.12)}
.orbit-ring.r2{inset:17%;border-style:solid;border-color:rgba(244,246,250,.07)}
.orbit-core{position:absolute;inset:36%;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:radial-gradient(circle at 50% 35%,#1A2130,#10141B);border:1px solid rgba(50,100,255,.35);
  box-shadow:0 0 60px -12px rgba(50,100,255,.45)}
.orbit-core img{width:44px;height:auto;opacity:.95}
.orbit-core span{font:600 11px Inter;letter-spacing:.14em;color:var(--text-2);text-transform:uppercase}
.orbit-node{position:absolute;width:190px;padding:16px 18px;border-radius:16px;background:rgba(17,21,27,.9);
  border:1px solid var(--line-2);backdrop-filter:blur(6px)}
.orbit-node .num{font:600 11px 'SF Mono',monospace;color:var(--accent-2);letter-spacing:.14em;margin-bottom:6px}
.orbit-node b{display:block;font:600 15px Inter;color:var(--text);margin-bottom:4px}
.orbit-node span{font:400 12.5px Inter;color:var(--text-2);line-height:1.45}
.orbit-node::before{content:'';position:absolute;width:9px;height:9px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 10px var(--accent-2)}
.orbit-node.n1::before{bottom:-5px;left:50%;margin-left:-4px}
.orbit-node.n2::before{right:-5px;top:50%;margin-top:-4px}
.orbit-node.n3::before{left:-5px;top:50%;margin-top:-4px}
.vtl{display:flex;flex-direction:column;gap:0;position:relative;margin-top:6px}
@media(min-width:900px){.vtl{display:none}}
.vtl::before{content:'';position:absolute;left:10px;top:8px;bottom:8px;width:1px;background:linear-gradient(180deg,var(--accent-2),rgba(50,100,255,.06))}
.vtl-step{position:relative;padding:0 0 30px 40px}
.vtl-step::before{content:'';position:absolute;left:4px;top:5px;width:13px;height:13px;border-radius:50%;background:var(--bg);border:2px solid var(--accent-2);box-shadow:0 0 12px rgba(50,100,255,.5)}
.vtl-step .num{font:600 11px 'SF Mono',monospace;color:var(--accent-2);letter-spacing:.14em;margin-bottom:4px}
.vtl-step b{font:600 15.5px Inter;color:var(--text)}
.vtl-step p{font-size:14px;margin:4px 0 0}

/* bento */
.bento{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:900px){.bento{grid-template-columns:repeat(3,1fr)}}
.bento-cell{border-radius:18px;background:var(--surf-1);border:1px solid var(--line);padding:26px}
.bento-cell h3{font-size:17px;display:flex;align-items:center;gap:10px;margin-bottom:14px}
.bento-cell h3 svg{width:18px;height:18px;stroke:#5B8CFF}
.bento-cell ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px;font-size:14px;color:var(--text-2)}
.bento-cell li{display:flex;gap:9px;align-items:flex-start}
.bento-cell li svg{width:15px;height:15px;stroke:var(--ok);flex-shrink:0;margin-top:3px}

/* FAQ accordion */
.faq{max-width:760px;margin:0 auto;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;background:none;border:0;
  padding:20px 4px;cursor:pointer;font:500 15.5px Inter,sans-serif;color:var(--text);text-align:left}
.faq-q .plus{position:relative;width:16px;height:16px;flex-shrink:0}
.faq-q .plus::before,.faq-q .plus::after{content:'';position:absolute;background:var(--accent-2);transition:transform .3s var(--ease)}
.faq-q .plus::before{left:0;right:0;top:7px;height:2px}
.faq-q .plus::after{top:0;bottom:0;left:7px;width:2px}
.faq-item.open .plus::after{transform:scaleY(0)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.faq-a p{padding:0 4px 20px;font-size:14.5px;margin:0}

/* pricing polish */
.plan .save{display:inline-block;margin-top:6px;font:600 11.5px Inter;color:#48DC82;background:rgba(72,220,130,.1);
  border:1px solid rgba(72,220,130,.25);padding:3px 8px;border-radius:6px}

/* success — фирменный логотип на плитке-подложке вместо самодельного
   мультяшного щита: тот же .png, что в шапке сайта, крупнее и в плоской
   вложенной плитке (--surface-2/var(--line)) — .flow-card на этой странице
   стеклянная (семья B), поэтому подложка тоже стеклянная, а не графитовая,
   чтобы не смешивать две поверхностные системы внутри одной карточки */
.success-logo{
  width:104px;height:104px;margin:0 auto 20px;border-radius:var(--r);
  background:var(--surface-2);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
}
.success-logo img{width:64px;height:71px;display:block}

/* kabinet status extras */
.progress{height:6px;border-radius:99px;background:rgba(244,246,250,.08);overflow:hidden;margin-top:12px}
.progress i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent-2),#5B8CFF)}

/* missing helpers */
.ed-ico{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:rgba(50,100,255,.10);border:1px solid rgba(50,100,255,.28);flex-shrink:0}
.ed-ico svg{width:19px;height:19px;stroke:#6FA0FF}

/* ============ v4 premium art direction ============ */
:root{
  --bg:#0D0F14;
  --bg-warm:#151617;
  --panel:rgba(17,21,27,.78);
  --panel-strong:rgba(21,26,34,.92);
  --blue-soft:rgba(50,100,255,.13);
  --shadow:0 30px 100px rgba(0,0,0,.42);
}
body{
  background:
    radial-gradient(900px 680px at 50% -120px,rgba(50,100,255,.10),transparent 68%),
    linear-gradient(180deg,#111317 0,#0D0F14 26%,#111215 72%,#0D0F14 100%);
}
body::before{
  background:
    radial-gradient(900px 540px at 75% 4%,rgba(50,100,255,.11),transparent 68%),
    radial-gradient(760px 520px at 15% 36%,rgba(78,103,175,.055),transparent 72%),
    linear-gradient(115deg,rgba(255,255,255,.013),transparent 24% 76%,rgba(255,255,255,.01));
}
main,.footer,.header{position:relative}
main{z-index:2}
.noise{z-index:1;opacity:.022}
.header{background:rgba(13,15,20,.68);box-shadow:0 14px 50px rgba(0,0,0,.18)}
.header::after{content:"";position:absolute;left:50%;bottom:-1px;width:min(1120px,calc(100% - 40px));height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent)}
.brand{letter-spacing:.055em}
.brand img{filter:drop-shadow(0 0 12px rgba(244,246,250,.12))}
.nav{gap:32px}
.nav a{position:relative}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-10px;height:1px;background:var(--accent-2);transition:right .3s var(--ease)}
.nav a:hover::after{right:0}
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;inset:-1px;background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.13) 48%,transparent 70%);transform:translateX(-130%);transition:transform .75s var(--ease);pointer-events:none}
.btn:hover::after{transform:translateX(130%)}
.btn-primary{background:linear-gradient(145deg,#3A6CFF 0,#3264FF 46%,#2349CB 100%);border-color:rgba(255,255,255,.12)}
.btn-ghost{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));box-shadow:0 1px 0 rgba(255,255,255,.04) inset}
.section{padding:92px 0}
.section::before{content:"";position:absolute;left:50%;top:0;width:min(1120px,calc(100% - 40px));height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.055),transparent)}
.section-head{position:relative}
.section-head h2{max-width:760px;letter-spacing:-.025em}
.section-head p{font-size:16px;max-width:590px}
.eyebrow{color:#6F7890;letter-spacing:.18em}
.eyebrow::before{content:"";display:inline-block;width:22px;height:1px;background:var(--accent-2);vertical-align:middle;margin-right:10px;box-shadow:0 0 10px rgba(50,100,255,.7)}
.reveal{transform:translateY(24px);filter:blur(3px);transition:opacity .65s var(--ease),transform .65s var(--ease),filter .65s var(--ease)}
.reveal.in{filter:none}

/* Hero: one premium Spline scene with poster-first loading */
.hero{min-height:760px;padding:calc(var(--header-h) + 56px) 0 52px;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(520px 520px at 76% 48%,rgba(50,100,255,.13),transparent 72%),
  linear-gradient(90deg,rgba(13,15,20,.98) 0,rgba(13,15,20,.82) 42%,rgba(13,15,20,.18) 75%,rgba(13,15,20,.7) 100%);z-index:-1}
.hero::after{content:"";position:absolute;left:50%;bottom:0;width:min(1160px,calc(100% - 32px));height:190px;transform:translateX(-50%);background:linear-gradient(180deg,transparent,#0D0F14 82%);pointer-events:none;z-index:0}
.hero-grid{position:relative;min-height:630px;grid-template-columns:minmax(0,1fr) minmax(420px,.95fr);gap:54px}
.hero-copy{max-width:610px;padding:32px 0;z-index:5;transform:translateY(-68px)}
.hero-copy h1{font-size:clamp(44px,4.7vw,64px);line-height:1.02;letter-spacing:-.045em;margin-bottom:24px;text-wrap:balance}
.hero-copy h1 span{display:block;color:#AFC0FF;text-shadow:0 0 34px rgba(50,100,255,.28)}
.hero-sub{font-size:18px;line-height:1.72;color:#A4ABB7;max-width:520px}
.hero-copy .badge{background:rgba(17,21,27,.68);box-shadow:0 16px 42px rgba(0,0,0,.22),0 1px 0 rgba(255,255,255,.035) inset}
.hero-cta{margin-top:34px}
.hero-note{margin-top:30px;gap:22px}
.hero-note span{color:#747D8B}
.robot-stage{height:620px;align-self:stretch;border-radius:34px;overflow:hidden;border:1px solid rgba(255,255,255,.075);background:
  radial-gradient(65% 55% at 50% 36%,rgba(55,84,168,.18),transparent 72%),
  linear-gradient(155deg,rgba(23,27,35,.76),rgba(8,10,14,.44));box-shadow:var(--shadow),0 1px 0 rgba(255,255,255,.04) inset;isolation:isolate}
.robot-stage::before{content:"";position:absolute;inset:14px;border:1px solid rgba(255,255,255,.045);border-radius:24px;z-index:4;pointer-events:none}
.robot-stage::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:
  linear-gradient(180deg,transparent 48%,rgba(5,7,11,.46) 100%),
  repeating-linear-gradient(90deg,transparent 0 73px,rgba(255,255,255,.022) 74px),
  repeating-linear-gradient(0deg,transparent 0 73px,rgba(255,255,255,.018) 74px);mask-image:linear-gradient(180deg,transparent 8%,#000 40%,#000)}
.robot-poster{background-image:url(/assets/img/robot-poster-clean.png)!important;background-size:cover;background-position:center}
.robot-stage canvas{z-index:1;filter:saturate(.82) contrast(1.06)}
.robot-chest-logo{display:block;left:50%!important;top:52%!important;width:10%!important;transform:translate(-50%,-50%);background-image:url(/assets/img/logo-master-transparent.png);z-index:6;opacity:.92!important;filter:drop-shadow(0 3px 9px rgba(0,0,0,.72))}
.robot-stage.live .robot-poster{opacity:0;transition-delay:.16s}
.hero-scene-meta{position:absolute;left:24px;right:24px;bottom:22px;z-index:7;display:flex;align-items:end;justify-content:space-between;gap:16px;pointer-events:none}
.hero-scene-label{font:600 11px/1.35 Inter;text-transform:uppercase;letter-spacing:.15em;color:#96A0B0}
.hero-scene-label b{display:block;font:600 15px/1.25 Unbounded;color:var(--text);letter-spacing:-.01em;text-transform:none;margin-top:7px}
.hero-scene-live{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:999px;background:rgba(8,10,14,.64);border:1px solid rgba(255,255,255,.1);font:600 11px Inter;color:#C8CED8;backdrop-filter:blur(12px)}
.hero-scene-live i{width:7px;height:7px;border-radius:50%;background:#4BE08B;box-shadow:0 0 12px #4BE08B}

/* Unified platform selector and one responsive mockup */
#apps .section-head{margin-bottom:30px}
.platforms{gap:9px}
.platform{appearance:none;cursor:pointer;min-height:46px}
.platform.is-active{color:var(--text);border-color:rgba(50,100,255,.55);background:linear-gradient(180deg,rgba(50,100,255,.15),rgba(50,100,255,.055));box-shadow:0 10px 34px -18px rgba(50,100,255,.75)}
.platform-showcase{margin-top:28px;border:1px solid var(--line);border-radius:26px;display:grid;grid-template-columns:.82fr 1.18fr;min-height:310px;overflow:hidden;background:linear-gradient(145deg,rgba(22,27,35,.94),rgba(12,15,21,.84));box-shadow:0 34px 90px -50px rgba(0,0,0,.9)}
.platform-copy{padding:38px;display:flex;flex-direction:column;justify-content:center}
.platform-copy .mini{font:600 11px Inter;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2)}
.platform-copy h3{font-size:24px;margin:10px 0 12px}
.platform-copy p{font-size:14.5px;max-width:390px;margin:0}
.platform-visual{position:relative;overflow:hidden;border-left:1px solid var(--line);background:
  radial-gradient(380px 240px at 50% 110%,rgba(50,100,255,.22),transparent 70%),
  linear-gradient(135deg,rgba(255,255,255,.02),transparent 55%)}
.platform-window{position:absolute;left:12%;right:8%;top:18%;height:72%;border-radius:18px 18px 0 0;border:1px solid rgba(255,255,255,.13);background:#0A0C11;box-shadow:0 28px 70px rgba(0,0,0,.55);transform:perspective(900px) rotateY(-7deg);transition:transform .6s var(--ease)}
.platform-window::before{content:"";display:block;height:28px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.04),transparent)}
.platform-window::after{content:"";position:absolute;left:28px;right:28px;top:58px;height:110px;border-radius:14px;background:radial-gradient(circle at 50% 45%,rgba(50,100,255,.28),transparent 34%),linear-gradient(145deg,#151A22,#0D1016);border:1px solid var(--line);box-shadow:0 0 50px rgba(50,100,255,.08) inset}
.platform-glyph{position:absolute;left:50%;top:52%;z-index:2;transform:translate(-50%,-50%);font:700 21px Unbounded;color:#E7ECF8;text-shadow:0 0 24px rgba(50,100,255,.42)}
.platform-window .conn{position:absolute;left:50%;bottom:24px;z-index:2;transform:translateX(-50%);font:600 11px Inter;color:#57DD90;white-space:nowrap}

/* App screenshot-inspired container-scroll composition */
#phoneWrap{min-height:900px;padding-top:80px!important}
#phoneWrap .section-head{position:relative;z-index:3}
.scroll-phone-wrap{position:relative;min-height:680px;align-items:flex-start;padding-top:34px}
.scroll-phone-wrap::before{content:"";position:absolute;left:8%;right:8%;top:24%;bottom:0;border-radius:34px;background:
  radial-gradient(48% 70% at 50% 40%,rgba(50,100,255,.19),transparent 72%),
  linear-gradient(180deg,rgba(18,22,29,.76),rgba(9,11,15,.18));border:1px solid rgba(255,255,255,.055);box-shadow:0 40px 110px -55px rgba(50,100,255,.32)}
.scroll-phone-wrap::after{content:"";position:absolute;left:16%;right:16%;bottom:28px;height:100px;background:radial-gradient(ellipse,rgba(0,0,0,.72),transparent 68%);filter:blur(18px)}
.phone{z-index:2;width:min(340px,78vw);border-color:rgba(255,255,255,.22);box-shadow:0 0 0 7px #05070B,0 45px 100px -25px rgba(0,0,0,.9),0 12px 50px rgba(50,100,255,.18)}

/* Infrastructure: a restrained dotted surface, no extra WebGL */
.dotted-sec{margin:0 auto;width:min(1260px,calc(100% - 28px));border-radius:32px;padding:90px 0;background:
  radial-gradient(600px 360px at 74% 40%,rgba(50,100,255,.13),transparent 70%),
  linear-gradient(145deg,rgba(22,27,35,.9),rgba(12,15,20,.88));border:1px solid rgba(255,255,255,.07);box-shadow:0 40px 120px -75px rgba(50,100,255,.35),0 1px 0 rgba(255,255,255,.04) inset}
.dotted-sec::before{display:none}
.dotted-sec canvas{opacity:.42;mask-image:linear-gradient(90deg,transparent,#000 18%,#000 86%,transparent)}
.stat-row{gap:12px}
.stat{min-height:132px;padding:24px;background:rgba(10,13,18,.58);border-color:rgba(255,255,255,.08);transition:transform .35s var(--ease),border-color .35s,background .35s}
.stat:hover{transform:translateY(-5px);border-color:rgba(50,100,255,.28);background:rgba(15,19,27,.72)}
.stat b{font-size:22px;margin-bottom:14px}

/* Delicate glow cards with real 3D assets */
.glow-grid{gap:18px}
.glow-card{min-height:330px;padding:30px;background:linear-gradient(155deg,rgba(23,28,36,.94),rgba(14,17,23,.92));box-shadow:0 24px 70px -48px rgba(0,0,0,.9);display:flex;flex-direction:column}
.glow-card::after{content:"";position:absolute;inset:auto -20% -55% 20%;height:80%;background:radial-gradient(circle,rgba(50,100,255,.10),transparent 70%);pointer-events:none}
.glow-card .feature-3d{position:absolute;right:14px;top:8px;width:142px;height:142px;object-fit:contain;filter:drop-shadow(0 24px 28px rgba(0,0,0,.42));transform:rotate(-2deg);transition:transform .55s var(--ease)}
.glow-card:hover .feature-3d{transform:translateY(-6px) rotate(2deg) scale(1.025)}
.glow-card h3{margin-top:auto;position:relative;z-index:2}
.glow-card ul{position:relative;z-index:2}
.glow-card .ed-ico{display:none}

/* Large feature spotlights */
.spot{position:relative;padding:74px 0;min-height:430px}
.spot::before{content:"";position:absolute;left:-28px;right:-28px;top:18px;bottom:18px;border-radius:26px;background:linear-gradient(130deg,rgba(255,255,255,.022),transparent 55%);opacity:0;transition:opacity .45s}
.spot:hover::before{opacity:1}
.spot>div:first-child{position:relative;z-index:2;padding:0 20px}
.spot:nth-child(even)>div:first-child{order:2}
.spot-visual{height:330px;border-radius:28px;background:
  radial-gradient(160px 180px at 50% 52%,rgba(50,100,255,.22),transparent 72%),
  linear-gradient(155deg,#171C25,#0B0E13);box-shadow:0 40px 90px -52px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.045) inset}
.spot-visual::before{content:"";position:absolute;inset:18px;border-radius:19px;border:1px solid rgba(255,255,255,.045);background:repeating-linear-gradient(90deg,transparent 0 52px,rgba(255,255,255,.017) 53px)}
.spot-visual .sv-ico svg{width:98px;height:98px;filter:drop-shadow(0 16px 34px rgba(50,100,255,.55))}
.spot-kpi div{padding-right:28px;border-right:1px solid var(--line)}
.spot-kpi div:last-child{border-right:0}

/* Orbital timeline and bento */
.orbit-wrap{width:min(620px,92vw)}
.orbit-ring{box-shadow:0 0 80px rgba(50,100,255,.035) inset}
.orbit-ring::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:#7B9AFF;left:50%;top:-4px;box-shadow:0 0 16px #3264FF;animation:orbitPulse 3.2s ease-in-out infinite}
@keyframes orbitPulse{0%,100%{opacity:.38;transform:scale(.8)}50%{opacity:1;transform:scale(1.25)}}
.orbit-core{inset:34%;box-shadow:0 0 100px -24px rgba(50,100,255,.62)}
.orbit-node{box-shadow:0 22px 60px -36px rgba(0,0,0,.85);transition:transform .35s var(--ease),border-color .35s}
.orbit-node:hover{transform:translateY(-4px);border-color:rgba(50,100,255,.42)}
.orbit-node.n1:hover{transform:translateX(-50%) translateY(-4px)!important}
.bento{grid-template-columns:1.08fr .92fr .92fr;gap:18px}
.bento-cell{min-height:240px;padding:30px;background:linear-gradient(145deg,rgba(23,28,36,.9),rgba(13,16,22,.92));box-shadow:0 26px 70px -54px rgba(0,0,0,.9);transition:transform .35s var(--ease),border-color .35s}
.bento-cell:first-child{grid-row:span 2;min-height:420px;background:
  radial-gradient(300px 220px at 35% 100%,rgba(50,100,255,.18),transparent 72%),
  linear-gradient(145deg,rgba(23,28,36,.96),rgba(13,16,22,.94))}
.bento-cell:hover{transform:translateY(-5px);border-color:rgba(50,100,255,.25)}
.bento-cell h3{font-size:19px}
.bento-cell li{padding:8px 0;border-bottom:1px solid rgba(255,255,255,.045)}
.bento-cell li:last-child{border-bottom:0}

.cta-band{border-color:rgba(50,100,255,.22);background:
  radial-gradient(720px 320px at 50% 115%,rgba(50,100,255,.24),transparent 70%),
  linear-gradient(140deg,rgba(22,27,35,.96),rgba(14,17,23,.96));box-shadow:0 40px 100px -60px rgba(50,100,255,.55),0 1px 0 rgba(255,255,255,.045) inset}
.cta-band::after{content:"";position:absolute;inset:16px;border-radius:calc(var(--r) - 4px);border:1px solid rgba(255,255,255,.045);pointer-events:none}
.faq{background:rgba(14,17,23,.38);border:1px solid var(--line);border-radius:22px;padding:0 24px;overflow:hidden}
.faq-item:last-child{border-bottom:0}
.faq-q{min-height:66px}
.faq-q:focus-visible,.burger:focus-visible,.platform:focus-visible{outline:2px solid #7F9CFF;outline-offset:3px}

/* Premium flow pages */
.flow-main{padding-top:calc(var(--header-h) + 58px);padding-bottom:70px}
.flow-main::before{content:"";position:absolute;width:min(760px,90vw);height:min(760px,90vw);left:50%;top:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(50,100,255,.10),transparent 66%);pointer-events:none}
.flow-card{position:relative;z-index:2;padding:34px;border-radius:28px;background:linear-gradient(150deg,rgba(24,29,38,.90),rgba(13,16,22,.88));border:1px solid rgba(255,255,255,.085);box-shadow:0 40px 120px -54px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.055) inset}
.flow-wide{max-width:960px;padding:40px}
.plans{gap:15px}
.plan{min-height:106px;background:rgba(7,9,13,.3);border-color:rgba(255,255,255,.08)}
.plan.selected{background:linear-gradient(145deg,rgba(50,100,255,.13),rgba(50,100,255,.035));box-shadow:0 0 0 1px var(--accent),0 20px 50px -30px rgba(50,100,255,.65)}
.pay-method{background:rgba(7,9,13,.3)}
.summary{background:rgba(5,7,10,.34)}
.page-login .flow-card{max-width:520px;padding:42px}
.page-login .flow-card::before{content:"";display:block;width:56px;height:62px;margin:0 auto 24px;background:url(/assets/img/logo-master-transparent.png) center/contain no-repeat;opacity:.86;filter:drop-shadow(0 0 24px rgba(50,100,255,.2))}
.page-cabinet .flow-main{justify-content:flex-start}
.page-cabinet .cab-grid{max-width:900px;grid-template-columns:repeat(2,1fr);gap:16px}
.page-cabinet .cab-grid>h1{margin-top:28px;margin-bottom:18px}
.page-cabinet .cab-stat{background:linear-gradient(145deg,rgba(23,28,36,.9),rgba(13,16,22,.9));border-color:rgba(255,255,255,.075);min-height:142px}
.page-cabinet .cab-key{min-height:auto}
.status-pill{box-shadow:0 0 28px -12px rgba(52,209,123,.7)}
.legal-page{max-width:920px;padding-top:calc(var(--header-h) + 70px)}
.legal-page::before{content:"";position:absolute;left:0;right:0;top:calc(var(--header-h) + 34px);height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}
.legal-page h1{letter-spacing:-.03em}
.legal-page h2{padding-top:8px;border-top:1px solid rgba(255,255,255,.055)}
.legal-page a{color:#AFC0FF}
.legal-toc{display:flex;flex-direction:column;gap:9px;margin:30px 0 44px;padding:24px;border-radius:18px;background:rgba(17,21,27,.68);border:1px solid var(--line)}
.legal-toc b{font:600 13px Inter;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin-bottom:4px}
.legal-toc a{font-size:14px;color:var(--text-2);width:max-content}
.legal-toc a:hover{color:var(--text)}
.footer{background:rgba(9,11,15,.46);backdrop-filter:blur(8px)}

@media(max-width:899px){
  .section{padding:72px 0}
  .hero{min-height:auto;padding-top:calc(var(--header-h) + 7px);padding-bottom:0}
  .hero::before{background:radial-gradient(360px 420px at 50% 68%,rgba(50,100,255,.12),transparent 72%)}
  .hero-grid{grid-template-columns:minmax(0,1fr);min-height:0;gap:8px;min-width:0}
  .hero-copy{padding:10px 0 0;min-width:0;transform:none}
  .hero-copy h1{font-size:clamp(34px,9.5vw,42px);max-width:100%;overflow-wrap:anywhere}
  .hero-copy h1 span{display:inline;color:inherit;text-shadow:none}
  .hero-sub{font-size:16px;line-height:1.65}
  .hero-cta{display:grid;grid-template-columns:1fr;gap:10px}
  .hero-cta .btn{width:100%}
  .hero-note{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin-top:22px}
  .robot-stage{height:480px;margin:26px 0 -10px;border-radius:26px;background:radial-gradient(60% 55% at 50% 42%,rgba(50,100,255,.14),transparent 75%)}
  .robot-poster{background-size:cover;background-position:center top}
  .hero-scene-meta{left:18px;right:18px;bottom:18px}
  .hero-scene-label b{font-size:13px}
  .platform-showcase{grid-template-columns:1fr;min-height:490px}
  .platform-copy{padding:28px}
  .platform-visual{border-left:0;border-top:1px solid var(--line);min-height:270px}
  #phoneWrap{min-height:790px}
  .scroll-phone-wrap{min-height:620px}
  .scroll-phone-wrap::before{left:0;right:0;top:24%;border-radius:26px}
  .dotted-sec{width:calc(100% - 20px);padding:70px 0;border-radius:26px}
  .glow-card{min-height:290px}
  .glow-card .feature-3d{width:124px;height:124px}
  .spot{min-height:0;padding:54px 0;gap:28px}
  .spot:nth-child(even)>div:first-child{order:initial}
  .spot>div:first-child{padding:0}
  .spot-visual{height:250px}
  .bento{grid-template-columns:1fr}
  .bento-cell,.bento-cell:first-child{grid-row:auto;min-height:220px}
  .flow-card,.flow-wide{padding:26px 20px;border-radius:24px}
  .page-cabinet .cab-grid{grid-template-columns:1fr}
  .page-cabinet .cab-key{grid-column:1}
}

@media(max-width:560px){
  .header{height:60px}
  .hero-copy .badge{font-size:11.5px;padding:7px 11px}
  .hero-note{grid-template-columns:1fr}
  .robot-stage{height:410px}
  .hero-scene-live{display:none}
  .platform{flex:1 1 calc(50% - 6px);justify-content:center;padding:10px 12px}
  .platform-copy h3{font-size:21px}
  .stat{min-height:122px;padding:18px}
  .stat b{font-size:18px}
  .stat span{font-size:11.5px}
  .glow-card{padding:24px}
  .faq{padding:0 16px}
  .faq-q{font-size:14.5px}
}

@media(prefers-reduced-motion:reduce){
  #ambientNetwork{display:none}
  .reveal{filter:none}
  .orbit-ring::after{animation:none}
  .btn::after{display:none}
  .glow-card .feature-3d,.spot,.stat,.bento-cell{transition:none}
}

/* ============ v5 ash-gray surface + full-viewport robot ============ */
:root{
  --bg:#E7E8EA;
  --bg-2:#E7E8EA;
  --surf-1:#F1F2F3;
  --surf-2:#FFFFFF;
  --surface:rgba(255,255,255,.58);
  --surface-2:rgba(255,255,255,.82);
  --line:rgba(24,29,38,.14);
  --line-2:rgba(24,29,38,.26);
  --text:#12161D;
  --text-2:#58616D;
  --text-3:#7A838E;
  --accent:#2A55D9;
  --accent-2:#3264FF;
  --accent-glow:rgba(50,100,255,.3);
  --shadow:0 30px 90px rgba(52,60,72,.18);
}
html,body{background:#E7E8EA!important;color:var(--text)}
body{
  background:
    radial-gradient(1000px 620px at 50% -180px,rgba(255,255,255,.9),transparent 70%),
    linear-gradient(180deg,#E7E8EA 0,#E7E8EA 100%)!important;
}
body::before{
  background:
    radial-gradient(760px 500px at 78% 2%,rgba(50,100,255,.09),transparent 72%),
    radial-gradient(620px 420px at 12% 28%,rgba(255,255,255,.42),transparent 70%);
}
body::after{opacity:.18;background-image:radial-gradient(circle,rgba(75,91,115,.32) 0 1px,transparent 1.35px);mask-image:linear-gradient(180deg,#000 0,transparent 14%,#000 34%,#000 78%,transparent 100%)}
main{background:transparent}
.header{position:fixed;background:rgba(231,232,234,.86)!important;border-bottom:1px solid rgba(24,29,38,.12);box-shadow:0 12px 34px rgba(60,68,78,.08);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.header::after{background:linear-gradient(90deg,transparent,rgba(24,29,38,.15),transparent)}
.brand{color:#141820}
.nav{color:#58616D}
.nav a:hover,.nav a[aria-current]{color:#12161D}
.header-cta .btn-ghost{color:#1B212A}
.mobile-menu{background:rgba(231,232,234,.96);border-bottom-color:rgba(24,29,38,.14);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.mobile-menu > a{color:#58616D;border-bottom-color:rgba(24,29,38,.12)}
.burger span{background:#141820}
.btn-ghost{color:#1B212A;background:rgba(255,255,255,.54);border-color:rgba(24,29,38,.16);box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 8px 24px rgba(62,70,82,.08)}
.btn-ghost:hover{background:#fff;border-color:rgba(24,29,38,.28)}
.section::before{background:linear-gradient(90deg,transparent,rgba(24,29,38,.16),transparent)}
.eyebrow{color:#737D89}
.eyebrow::before{box-shadow:0 0 10px rgba(50,100,255,.5)}
.hero{background:#E7E8EA}
.hero::before{background:
  radial-gradient(540px 540px at 76% 48%,rgba(50,100,255,.13),transparent 72%),
  linear-gradient(90deg,rgba(231,232,234,.98) 0,rgba(231,232,234,.86) 44%,rgba(231,232,234,.26) 78%,rgba(231,232,234,.82) 100%)}
.hero::after{background:linear-gradient(180deg,transparent,#E7E8EA 88%)}
.hero-sub{color:#59636F}
.hero-copy .badge{background:rgba(255,255,255,.56);border-color:rgba(24,29,38,.14);box-shadow:0 14px 36px rgba(61,70,82,.1),0 1px 0 rgba(255,255,255,.85) inset}
.hero-note span{color:#6F7884}
.hero-note svg{stroke:#737D89}
.robot-stage{background:
  radial-gradient(68% 58% at 50% 38%,rgba(50,100,255,.16),transparent 72%),
  linear-gradient(145deg,rgba(244,245,246,.94),rgba(214,217,221,.8));
  border-color:rgba(24,29,38,.13);box-shadow:0 28px 82px rgba(63,71,83,.2),0 1px 0 rgba(255,255,255,.85) inset}
.robot-stage::before{border-color:rgba(24,29,38,.12);box-shadow:0 0 30px rgba(255,255,255,.42) inset}
.robot-stage::after{z-index:3;background:
  radial-gradient(ellipse 64% 74% at 50% 47%,transparent 44%,rgba(231,232,234,.1) 63%,rgba(231,232,234,.72) 84%,#E7E8EA 100%),
  linear-gradient(180deg,transparent 55%,rgba(231,232,234,.55) 100%);mask-image:none;opacity:.96}
.robot-stage .robot-poster,.robot-stage canvas{mask-image:radial-gradient(ellipse 72% 78% at 50% 46%,#000 40%,rgba(0,0,0,.98) 57%,rgba(0,0,0,.72) 76%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 72% 78% at 50% 46%,#000 40%,rgba(0,0,0,.98) 57%,rgba(0,0,0,.72) 76%,transparent 100%)}
.robot-stage canvas{pointer-events:none}
.robot-chest-logo{filter:drop-shadow(0 3px 9px rgba(0,0,0,.48))}
.hero-scene-label{color:#68727E}
.hero-scene-label b{color:#151A21}
.hero-scene-live{background:rgba(255,255,255,.72);border-color:rgba(24,29,38,.13);color:#4E5864;box-shadow:0 12px 30px rgba(58,67,79,.1)}
.platform-showcase,.glow-card,.bento-cell,.flow-card,.legal-toc,.faq,.summary,.pay-method{background:linear-gradient(145deg,rgba(249,250,250,.86),rgba(231,233,235,.72));border-color:rgba(24,29,38,.13);box-shadow:0 28px 70px rgba(65,73,84,.12),0 1px 0 rgba(255,255,255,.88) inset}
.platform-visual{background:radial-gradient(380px 240px at 50% 110%,rgba(50,100,255,.18),transparent 70%),linear-gradient(135deg,rgba(255,255,255,.58),rgba(211,215,220,.44));border-color:rgba(24,29,38,.12)}
.platform-window{background:#F7F8F9;border-color:rgba(24,29,38,.16);box-shadow:0 28px 70px rgba(45,53,64,.22)}
.platform-window::before{border-bottom-color:rgba(24,29,38,.11);background:linear-gradient(180deg,rgba(24,29,38,.06),transparent)}
.platform-window::after{background:radial-gradient(circle at 50% 45%,rgba(50,100,255,.25),transparent 34%),linear-gradient(145deg,#E8EBEF,#F8F9FA);border-color:rgba(24,29,38,.12);box-shadow:0 0 50px rgba(50,100,255,.1) inset}
.platform-copy p,.feature-text,.legal-page p{color:#58616D}
.platform-glyph{color:#1A2028;text-shadow:0 0 24px rgba(50,100,255,.2)}
.stat{background:rgba(255,255,255,.56);border-color:rgba(24,29,38,.13);box-shadow:0 18px 46px rgba(59,67,78,.1)}
.stat:hover{background:#fff;border-color:rgba(50,100,255,.32)}
.dotted-sec{background:linear-gradient(145deg,rgba(247,248,249,.88),rgba(219,222,226,.78));border-color:rgba(24,29,38,.13);box-shadow:0 34px 90px rgba(59,68,80,.14),0 1px 0 rgba(255,255,255,.8) inset}
.dotted-sec canvas{opacity:.32}
.glow-card::after{background:radial-gradient(circle,rgba(50,100,255,.12),transparent 70%)}
.spot::before{background:linear-gradient(130deg,rgba(255,255,255,.58),transparent 55%)}
.spot-visual{background:radial-gradient(160px 180px at 50% 52%,rgba(50,100,255,.2),transparent 72%),linear-gradient(155deg,#F7F8F9,#DCE0E4);box-shadow:0 34px 78px rgba(63,72,84,.16),0 1px 0 rgba(255,255,255,.9) inset}
.spot-visual::before{border-color:rgba(24,29,38,.08)}
.orbit-ring{box-shadow:0 0 80px rgba(50,100,255,.08) inset}
.orbit-node{background:rgba(255,255,255,.76);border-color:rgba(24,29,38,.14);box-shadow:0 22px 60px rgba(55,64,76,.15)}
.orbit-core{background:linear-gradient(145deg,#3264FF,#2142B4);box-shadow:0 0 100px -24px rgba(50,100,255,.56)}
.cta-band{background:radial-gradient(720px 320px at 50% 115%,rgba(50,100,255,.2),transparent 70%),linear-gradient(140deg,rgba(247,248,249,.94),rgba(218,222,226,.84));border-color:rgba(50,100,255,.24);box-shadow:0 34px 90px rgba(55,64,76,.16),0 1px 0 rgba(255,255,255,.88) inset}
.faq-q,.faq-a{color:#1A2028}
.faq-a{color:#58616D}
.footer{background:rgba(220,222,225,.62);border-top-color:rgba(24,29,38,.14);backdrop-filter:blur(12px)}
.footer a{color:#59636F}.footer a:hover{color:#12161D}.footer h4{color:#737D89}.footer-bottom{border-top-color:rgba(24,29,38,.13);color:#7A838E}
.flow-main::before{background:radial-gradient(circle,rgba(50,100,255,.1),transparent 66%)}
.flow-card h1,.flow-card h2,.flow-card h3,.legal-page h1,.legal-page h2,.legal-page h3{color:#141920}
.plan,.pay-method{background:rgba(255,255,255,.58);border-color:rgba(24,29,38,.14)}
.plan.selected{background:linear-gradient(145deg,rgba(50,100,255,.13),rgba(50,100,255,.04));box-shadow:0 0 0 1px var(--accent),0 20px 50px -30px rgba(50,100,255,.45)}
.input{background:rgba(255,255,255,.72);border-color:rgba(24,29,38,.16);color:#141920}.input::placeholder{color:#8A929C}
.legal-page::before{background:linear-gradient(90deg,transparent,rgba(24,29,38,.14),transparent)}
.legal-page h2{border-top-color:rgba(24,29,38,.12)}
.legal-page a{color:#214CCF}
.status-pill{box-shadow:0 0 28px -12px rgba(52,160,102,.45)}
.page-login .flow-card::before{filter:drop-shadow(0 0 24px rgba(50,100,255,.18))}

@media(max-width:899px){
  .hero{background:#E7E8EA}
  .hero::before{background:radial-gradient(380px 440px at 50% 68%,rgba(50,100,255,.12),transparent 72%)}
  .robot-stage{background:radial-gradient(60% 55% at 50% 42%,rgba(50,100,255,.12),transparent 75%),linear-gradient(145deg,#F4F5F6,#DCE0E4)}
}

/* Hero copy follows the selected reference: one promise, one CTA, one trial note. */
.hero-copy h1{max-width:620px;color:#151A21}
.hero-copy h1 span{color:#151A21;text-shadow:none}
.hero-sub{max-width:500px;font-size:19px;line-height:1.55;color:#515B67}
.hero-cta{align-items:center;gap:22px;margin-top:34px}
.hero-cta .btn-primary{min-width:164px}
.hero-trial{font-size:16px;color:#6A737E;white-space:nowrap}
.hero-scene-meta{display:none}
@media(max-width:899px){
  .hero-copy h1{max-width:560px}
  .hero-sub{font-size:17px;max-width:480px}
  .hero-cta{display:flex;flex-wrap:wrap;gap:14px 18px}
  .hero-cta .btn-primary{width:auto}
  .hero-trial{font-size:14px}
}
@media(max-width:420px){
  .hero-cta{align-items:flex-start;flex-direction:column;gap:12px}
  .hero-cta .btn-primary{width:100%}
  .hero-trial{font-size:13px}
}

/* ============ v6 silver canvas + unbounded robot ============ */
:root{
  --bg:#E7E8EA;
  --bg-2:#E7E8EA;
  --bg-warm:#E7E8EA;
  --surf-1:#F1F2F4;
  --surf-2:#DDE0E4;
  --panel:rgba(255,255,255,.58);
  --panel-strong:rgba(248,249,250,.9);
  --surface:rgba(255,255,255,.52);
  --surface-2:rgba(255,255,255,.78);
  --line:rgba(17,22,31,.11);
  --line-2:rgba(17,22,31,.2);
  --text:#12161D;
  --text-2:#5F6773;
  --text-3:#626B77;
  --accent:#2857E8;
  --accent-2:#3264FF;
  --accent-glow:rgba(50,100,255,.3);
  --shadow:0 28px 80px rgba(28,34,44,.12);
}
html{background:#E7E8EA}
body{background:#E7E8EA;color:var(--text)}
body::before,body::after,.noise{display:none}
::selection{background:rgba(50,100,255,.22)}

.header{background:rgba(231,232,234,.93);box-shadow:0 14px 50px rgba(31,37,48,.07)}
.header::after{background:linear-gradient(90deg,transparent,rgba(19,25,35,.16),transparent)}
.header .brand img{filter:brightness(0) drop-shadow(0 4px 10px rgba(20,24,31,.1))}
.mobile-menu{background:rgba(231,232,234,.97)}
.btn-ghost{color:var(--text);background:rgba(255,255,255,.46);border-color:rgba(17,22,31,.14);box-shadow:0 1px 0 rgba(255,255,255,.75) inset}
.btn-ghost:hover{background:rgba(255,255,255,.76);border-color:rgba(17,22,31,.22)}
.btn-primary{color:#F4F6FA}
.section::before{background:linear-gradient(90deg,transparent,rgba(17,22,31,.1),transparent)}
.eyebrow{color:#5E6877}
.reveal{filter:blur(2px)}

/* Hero is one continuous surface; the scene has no visible card boundary. */
.hero{background:#E7E8EA}
.hero::before{background:none}
.hero::after{background:linear-gradient(180deg,transparent,#E7E8EA 86%)}
.hero-copy h1 span{color:#3264FF;text-shadow:0 12px 38px rgba(50,100,255,.16)}
.hero-sub{color:#5F6773}
.hero-copy .badge{background:rgba(255,255,255,.48);border-color:rgba(17,22,31,.1);box-shadow:0 15px 40px rgba(32,39,52,.07),0 1px 0 rgba(255,255,255,.8) inset}
.hero-note span{color:#68717E}
.robot-stage{overflow:hidden;border:0;border-radius:0;background:#E7E8EA;box-shadow:none;isolation:isolate}
.robot-stage::before{inset:8% 3%;z-index:3;border:0;border-radius:50%;background:radial-gradient(ellipse at 50% 48%,rgba(255,255,255,.46),rgba(50,100,255,.055) 46%,transparent 72%);filter:blur(22px)}
.robot-stage::after{inset:-2px;z-index:5;border-radius:0;background:
  linear-gradient(90deg,#E7E8EA 0,rgba(231,232,234,.94) 7%,rgba(231,232,234,.55) 17%,transparent 30%,transparent 70%,rgba(231,232,234,.55) 83%,rgba(231,232,234,.94) 93%,#E7E8EA 100%),
  linear-gradient(180deg,#E7E8EA 0,rgba(231,232,234,.84) 8%,rgba(231,232,234,.35) 20%,transparent 31%,transparent 69%,rgba(231,232,234,.4) 81%,rgba(231,232,234,.94) 93%,#E7E8EA 100%);pointer-events:none}
.robot-stage canvas,.robot-poster{z-index:2;transition:opacity .65s var(--ease)}
.robot-stage canvas{filter:none}
.robot-poster{filter:saturate(.78) contrast(1.05)}
.robot-poster{background-image:url(/assets/img/robot-poster-silver.png)!important;background-size:cover;background-position:center;position:absolute;inset:0;width:auto;height:auto}
.robot-stage.live .robot-poster{transition-delay:0s}
#chestLogo,.robot-chest-logo{display:none!important}
.hero-scene-meta{z-index:8}
.hero-scene-label{color:#596273;text-shadow:0 1px rgba(255,255,255,.7)}
.hero-scene-label b{color:#171C24}
.hero-scene-live{color:#26303B;background:rgba(255,255,255,.64);border-color:rgba(17,22,31,.11);box-shadow:0 12px 30px rgba(32,39,52,.08)}

.card,.platform-showcase,.glow-card,.bento-cell,.faq,.flow-card,.cab-stat{background:rgba(255,255,255,.52);border-color:rgba(17,22,31,.1);box-shadow:0 24px 70px -48px rgba(31,38,50,.25),0 1px 0 rgba(255,255,255,.75) inset}
.platform.is-active{color:var(--text);background:rgba(50,100,255,.11);border-color:rgba(50,100,255,.42)}
.platform-showcase{background:linear-gradient(145deg,rgba(255,255,255,.7),rgba(222,225,230,.65))}
.platform-visual{border-color:rgba(17,22,31,.1);background:radial-gradient(380px 240px at 50% 110%,rgba(50,100,255,.14),transparent 70%),linear-gradient(135deg,rgba(255,255,255,.52),transparent 58%)}
.platform-window{background:#F7F8FA;border-color:rgba(17,22,31,.15);box-shadow:0 28px 65px rgba(31,38,50,.14)}
.platform-window::before{border-color:rgba(17,22,31,.09);background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(220,223,228,.55))}
.platform-window::after{background:radial-gradient(circle at 50% 45%,rgba(50,100,255,.2),transparent 34%),linear-gradient(145deg,#EDF0F4,#DDE1E7);border-color:rgba(17,22,31,.1);box-shadow:0 0 42px rgba(50,100,255,.06) inset}
.platform-glyph{color:#172033;text-shadow:0 0 22px rgba(50,100,255,.25)}

/* The phone remains a truthful dark product mockup inside the silver page. */
.phone{--text:#F4F6FA;--text-2:#8E96A3;--text-3:#69717E}
.scroll-phone-wrap::before{background:radial-gradient(48% 70% at 50% 40%,rgba(50,100,255,.15),transparent 72%),linear-gradient(180deg,rgba(255,255,255,.55),rgba(215,218,223,.22));border-color:rgba(17,22,31,.08);box-shadow:0 42px 100px -62px rgba(31,38,50,.28)}

.dotted-sec{background:radial-gradient(600px 360px at 74% 40%,rgba(50,100,255,.1),transparent 70%),rgba(255,255,255,.42);border-color:rgba(17,22,31,.1);box-shadow:0 35px 90px -66px rgba(31,38,50,.28),0 1px 0 rgba(255,255,255,.7) inset}
.dotted-sec canvas{opacity:.28}
.stat{background:rgba(255,255,255,.56);border-color:rgba(17,22,31,.1);box-shadow:0 18px 46px -38px rgba(31,38,50,.22)}
.stat:hover{background:rgba(255,255,255,.8);border-color:rgba(50,100,255,.28)}
.glow-card::after{background:radial-gradient(circle,rgba(50,100,255,.085),transparent 70%)}
.glow-card{background:linear-gradient(155deg,rgba(255,255,255,.78),rgba(224,227,232,.68))}
.spot::before{background:linear-gradient(130deg,rgba(255,255,255,.4),transparent 58%)}
.spot-visual{background:radial-gradient(160px 180px at 50% 52%,rgba(50,100,255,.17),transparent 72%),linear-gradient(155deg,#F4F5F7,#D9DDE3);border-color:rgba(17,22,31,.1);box-shadow:0 35px 78px -58px rgba(31,38,50,.24),0 1px 0 rgba(255,255,255,.8) inset}
.spot-visual::before{border-color:rgba(17,22,31,.06);background:repeating-linear-gradient(90deg,transparent 0 52px,rgba(17,22,31,.025) 53px)}
.orbit-ring{border-color:rgba(17,22,31,.16)}
.orbit-ring.r2{border-color:rgba(17,22,31,.09)}
.orbit-core{background:radial-gradient(circle at 50% 35%,#FFFFFF,#DDE2EA);border-color:rgba(50,100,255,.32);box-shadow:0 0 74px -20px rgba(50,100,255,.32)}
.orbit-core img{filter:invert(1)}
.orbit-core span{color:#5D6674}
.orbit-node{background:rgba(255,255,255,.72);border-color:rgba(17,22,31,.13);box-shadow:0 20px 48px -36px rgba(31,38,50,.3)}
.vtl-step::before{background:#E7E8EA}
.bento-cell{background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(223,226,231,.66))}
.bento-cell:first-child{background:radial-gradient(300px 220px at 35% 100%,rgba(50,100,255,.13),transparent 72%),linear-gradient(145deg,rgba(255,255,255,.8),rgba(222,225,230,.72))}
.cta-band{background:radial-gradient(720px 320px at 50% 115%,rgba(50,100,255,.17),transparent 70%),rgba(255,255,255,.57);border-color:rgba(50,100,255,.2);box-shadow:0 36px 86px -62px rgba(50,100,255,.32),0 1px 0 rgba(255,255,255,.8) inset}
.cta-band::after{border-color:rgba(17,22,31,.07)}
.faq{background:rgba(255,255,255,.4)}

.flow-main::before{background:radial-gradient(circle,rgba(50,100,255,.09),transparent 66%)}
.flow-card{background:linear-gradient(150deg,rgba(255,255,255,.78),rgba(222,225,230,.72));border-color:rgba(17,22,31,.11);box-shadow:0 38px 100px -58px rgba(31,38,50,.28),0 1px 0 rgba(255,255,255,.8) inset}
.input{background:rgba(255,255,255,.66);border-color:rgba(17,22,31,.14);color:var(--text)}
.plan,.pay-method{background:rgba(255,255,255,.48);border-color:rgba(17,22,31,.11)}
.plan.selected,.pay-method.selected{background:rgba(50,100,255,.1)}
.plan-tag{color:#F4F6FA}
.pay-icon{background:rgba(255,255,255,.62)}
.summary,.key-value{background:rgba(255,255,255,.55)}
.loader-overlay{background:rgba(231,232,234,.92)}
.progress{background:rgba(17,22,31,.09)}
.legal-page::before{background:linear-gradient(90deg,transparent,rgba(17,22,31,.11),transparent)}
.legal-page h2{border-color:rgba(17,22,31,.08)}
.legal-toc{background:rgba(255,255,255,.48);border-color:rgba(17,22,31,.1)}
.page-login .flow-card::before{filter:brightness(0) drop-shadow(0 0 20px rgba(50,100,255,.12))}
.footer{background:rgba(231,232,234,.76);border-color:rgba(17,22,31,.1);backdrop-filter:none}
.toast{color:#F4F6FA;background:rgba(22,27,35,.94);border-color:rgba(255,255,255,.14)}

@media(max-width:899px){
  .hero::before{background:none}
  .robot-stage{background:#E7E8EA}
  .robot-stage::after{background:
    linear-gradient(90deg,#E7E8EA 0,transparent 16%,transparent 84%,#E7E8EA 100%),
    linear-gradient(180deg,transparent 62%,rgba(231,232,234,.92) 90%,#E7E8EA 100%)}
}

/* Keep the two promise lines intact while preserving Sudar's blue accent. */
.hero-copy h1{font-family:Inter,-apple-system,'Segoe UI',sans-serif;font-size:clamp(40px,3.6vw,50px);font-weight:700;line-height:1.07;letter-spacing:-.055em}
.hero-copy h1 span{font-family:inherit;color:#3264FF;text-shadow:0 12px 38px rgba(50,100,255,.16)}
.btn-primary{background:linear-gradient(180deg,#168CF7 0%,#1489F4 55%,#0B79E6 100%);box-shadow:0 14px 28px rgba(20,137,244,.24),0 1px 0 rgba(255,255,255,.24) inset}
.btn-primary:hover{background:linear-gradient(180deg,#2596FA 0%,#168CF7 55%,#0B79E6 100%);box-shadow:0 18px 34px rgba(20,137,244,.3),0 1px 0 rgba(255,255,255,.28) inset}
.btn-primary:focus-visible{outline:3px solid rgba(20,137,244,.28);outline-offset:3px}
@media(max-width:899px){
  .hero-copy h1{font-size:clamp(35px,9.5vw,44px);letter-spacing:-.045em}
}

/* ============ v7 graphite canvas ============ */
:root{
  --bg:#1C1C1C;--bg-2:#1C1C1C;--bg-warm:#1C1C1C;
  --surf-1:#222326;--surf-2:#282A2F;
  --panel:rgba(255,255,255,.045);--panel-strong:rgba(255,255,255,.075);
  --surface:rgba(255,255,255,.045);--surface-2:rgba(255,255,255,.075);
  --line:rgba(255,255,255,.1);--line-2:rgba(255,255,255,.18);
  --text:#F4F6FA;--text-2:#A3A9B2;--text-3:#737B87;
  --shadow:0 28px 80px rgba(0,0,0,.28);
}
html,body{background:#1C1C1C!important;color:var(--text)}
body{background:#1C1C1C!important}
html{overflow-x:hidden}
.header{background:rgba(28,28,28,.58)!important;border-bottom-color:rgba(255,255,255,.09);box-shadow:0 14px 50px rgba(0,0,0,.2);-webkit-backdrop-filter:blur(22px)!important;backdrop-filter:blur(22px)!important}
.header::after,.section::before{background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent)}
.header .brand img{filter:none}
.brand,.nav a:hover,.nav a[aria-current]{color:var(--text)}
.nav,.mobile-menu > a{color:var(--text-2)}
.mobile-menu{background:var(--bg);border-bottom-color:var(--line);-webkit-backdrop-filter:none;backdrop-filter:none}
.mobile-menu > a{color:var(--text)}
.burger span{background:var(--text)}
.btn-ghost,.header-cta .btn-ghost{color:var(--text);background:rgba(255,255,255,.055);border-color:var(--line);box-shadow:0 1px 0 rgba(255,255,255,.08) inset}
.btn-ghost:hover{background:rgba(255,255,255,.09);border-color:var(--line-2)}
.hero{background:#1C1C1C}
.hero::after{background:linear-gradient(180deg,transparent,#1C1C1C 86%)}
.hero-copy h1,.hero-copy h1 span{color:var(--text)}
.hero-copy h1 span{color:#3264FF}
.hero-sub,.hero-trial,.hero-note span{color:var(--text-2)}
.robot-stage{background:#1C1C1C}
.robot-stage::before{background:radial-gradient(ellipse at 50% 48%,rgba(50,100,255,.12),rgba(50,100,255,.035) 46%,transparent 72%)}
.robot-stage::after{background:
  linear-gradient(90deg,#1C1C1C 0,rgba(28,28,28,.94) 7%,rgba(28,28,28,.55) 17%,transparent 30%,transparent 70%,rgba(28,28,28,.55) 83%,rgba(28,28,28,.94) 93%,#1C1C1C 100%),
  linear-gradient(180deg,#1C1C1C 0,rgba(28,28,28,.84) 8%,rgba(28,28,28,.35) 20%,transparent 31%,transparent 69%,rgba(28,28,28,.4) 81%,rgba(28,28,28,.94) 93%,#1C1C1C 100%)}
.robot-poster{background-image:url(/assets/img/robot-poster-graphite.png)!important;filter:saturate(.86) contrast(1.04)}
.card,.platform-showcase,.glow-card,.bento-cell,.faq,.flow-card,.cab-stat,.stat,.dotted-sec,.orbit-node,.legal-toc,.summary,.key-value,.plan,.pay-method{
  color:var(--text);background:rgba(255,255,255,.045);border-color:var(--line);box-shadow:0 28px 70px -48px rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.055) inset
}
.platform-showcase,.glow-card,.bento-cell,.flow-card{background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.025))}
.platform-copy p,.feature-text,.legal-page p,.faq-a{color:var(--text-2)}
.platform-visual,.spot-visual,.scroll-phone-wrap::before{background:radial-gradient(420px 260px at 50% 100%,rgba(50,100,255,.13),transparent 72%),rgba(255,255,255,.025);border-color:var(--line)}
.platform-window{background:#222429;border-color:var(--line);box-shadow:0 28px 65px rgba(0,0,0,.32)}
.platform-window::before{background:rgba(255,255,255,.035);border-color:var(--line)}
.platform-window::after{background:radial-gradient(circle at 50% 45%,rgba(50,100,255,.2),transparent 34%),linear-gradient(145deg,#24272D,#191B20);border-color:var(--line)}
.platform-glyph,.faq-q,.flow-card h1,.flow-card h2,.flow-card h3,.legal-page h1,.legal-page h2,.legal-page h3{color:var(--text)}
.spot::before{background:linear-gradient(130deg,rgba(255,255,255,.08),transparent 58%)}
.orbit-ring,.orbit-ring.r2{border-color:rgba(255,255,255,.1)}
.orbit-core{background:radial-gradient(circle at 50% 35%,#2A2D34,#17191E);border-color:rgba(50,100,255,.34)}
.orbit-core span{color:var(--text-2)}
.vtl-step::before{background:#1C1C1C}
.cta-band{background:radial-gradient(720px 320px at 50% 115%,rgba(50,100,255,.17),transparent 70%),rgba(255,255,255,.045);border-color:rgba(50,100,255,.22);box-shadow:0 36px 86px -62px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.06) inset}
.input{background:rgba(0,0,0,.22);border-color:var(--line);color:var(--text)}
.pay-icon{background:rgba(255,255,255,.07)}
.progress{background:rgba(255,255,255,.09)}
.loader-overlay{background:rgba(28,28,28,.94)}
.footer{background:#1C1C1C;border-color:var(--line)}
.footer a{color:var(--text-2)}.footer a:hover{color:var(--text)}.footer h4,.footer-bottom{color:var(--text-3)}
@media(max-width:899px){
  .hero,.robot-stage{background:#1C1C1C}
  .robot-stage::after{background:linear-gradient(90deg,#1C1C1C 0,transparent 16%,transparent 84%,#1C1C1C 100%),linear-gradient(180deg,transparent 62%,rgba(28,28,28,.92) 90%,#1C1C1C 100%)}
}

/* ============ v8 hero WebGL stage: one full-width canvas, no robot window ============ */
.hero{
  position:relative;
  overflow:hidden;
  background:#1C1C1C!important;
}
.hero .hero-grid{
  position:relative;
  z-index:4;
  display:flex;
  align-items:center;
  grid-template-columns:none!important;
  gap:0;
}
.hero-copy{
  position:relative;
  z-index:5;
  max-width:min(610px,52vw);
  pointer-events:auto;
}
.robot-stage{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  isolation:auto!important;
  pointer-events:none;
  z-index:1;
}
.robot-stage::before,
.robot-stage::after{
  content:none!important;
  display:none!important;
}
.robot-stage canvas,
.robot-stage .robot-poster{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  background-color:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:none!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
  pointer-events:none!important;
}
/* Появление сцены. Раньше здесь было transition:none!important и canvas
   просто мгновенно подменял постер — резкий скачок. Постер и 3D-сцена
   отличаются масштабом и позой, поэтому чистый кроссфейд двух картинок дал
   бы заметное двоение; вместо него сцена проявляется с лёгким доводом
   масштаба (.985 → 1) — глаз читает это как материализацию объекта, а не как
   подмену кадра, и рассинхрон не бросается в глаза.
   Кривая — общая для сайта var(--ease). */
/* Положение сцены задаётся переменными, а состояние .live меняет ТОЛЬКО
   масштаб. Иначе правило .robot-stage.live canvas (специфичность выше, чем у
   мобильного медиазапроса) перебивало мобильное позиционирование и на телефоне
   робота уносило вправо десктопным translateX — он оказывался обрезан. */
.robot-stage{
  --robot-handoff-duration:.18s;
  --robot-handoff-ease:cubic-bezier(.22,.61,.36,1);
}
.robot-stage canvas{
  --robot-x:clamp(160px,22vw,360px);
  --robot-y:0px;
  --robot-scale:1;
  z-index:2;
  visibility:hidden!important;
  opacity:0;
  transform:translate3d(var(--robot-x),var(--robot-y),0) scale(var(--robot-scale));
  transform-origin:58% 50%;
  /* Canvas становится полностью непрозрачным мгновенно, пока его закрывает
     непрозрачный постер. Затем растворяется только верхний слой. Это сохраняет
     постоянный контраст робота: у прежнего двойного fade оба слоя были
     полупрозрачными в середине и силуэт на мгновение терял глубину. */
  transition:none!important;
}
.robot-stage[data-spline-state="loading"] canvas,
.robot-stage[data-spline-state="retrying"] canvas{
  will-change:opacity,transform;
}
.robot-stage.live canvas{
  visibility:visible!important;
  opacity:1;
}
.robot-stage.robot-settled canvas{will-change:auto}
@media(prefers-reduced-motion:reduce){
  .robot-stage canvas{transition:none!important}
}
/* Статичный постер-заглушка ОТКЛЮЧЁН.

   Он изображал робота в другой позе и другого размера, чем реальная сцена
   (у постера руки опущены и фигура мельче, у сцены руки разведены и фигура
   крупнее). Из-за этого пользователь видел подряд два разных робота, и это
   читалось как ступени — сколько бы ни длился кроссфейд, менялся сам объект,
   а не его прозрачность.

   Теперь робот появляется РОВНО ОДИН РАЗ и сразу настоящий: пока сцена
   грузится, на месте героя остаётся спокойный фирменный градиент сцены, затем
   робот мягко проявляется. Ступеней нет по построению, а не за счёт подбора
   таймингов. Чтобы вернуть мгновенную заглушку без шва, нужен постер,
   отрисованный из этой же сцены в этой же геометрии. */
/* Постер-заглушка снова включена: она нужна, чтобы робот был виден сразу.
   Десктопная картинка совпадает со сценой по позе и положению (проверено
   наложением), поэтому здесь геометрия прежняя. */
.robot-first-frame{
  position:absolute;
  inset:0;
  z-index:1;
  display:block;
  width:100%;
  height:100%;
  overflow:hidden;
  opacity:1;
  visibility:visible;
  pointer-events:none;
  transform:translate3d(clamp(160px,22vw,360px),0,0) scale(1);
  transform-origin:58% 50%;
  will-change:opacity;
  /* Однослойное растворение короче прежнего перехода (180 вместо 220 мс).
     Кривая быстро проходит техническую подмену и очень мягко закрывает хвост. */
  transition:opacity var(--robot-handoff-duration) var(--robot-handoff-ease),
    visibility 0s linear var(--robot-handoff-duration);
}
@media(prefers-reduced-motion:reduce){
  .robot-first-frame{transition:opacity .01s linear,visibility 0s linear .01s}
}
.robot-first-frame img{
  display:block;
  width:100%;
  height:100%;
  object-fit:fill;
  user-select:none;
}
.robot-stage.live .robot-first-frame{
  opacity:0;
  visibility:hidden;
}
.robot-stage.robot-settled .robot-first-frame{will-change:auto}
.robot-stage .robot-poster{
  z-index:1;
  opacity:1;
  background-color:#1C1C1C!important;
  background-size:clamp(600px,52vw,760px) auto!important;
  background-position:right clamp(-52px,-2vw,-20px) bottom -154px!important;
  background-repeat:no-repeat!important;
  transition:opacity .35s ease!important;
  background-image:url(/assets/img/robot-poster-transparent.png)!important;
}
.robot-stage.live .robot-poster{
  opacity:0!important;
  visibility:hidden;
  transition:opacity .35s ease,visibility 0s linear .35s!important;
}

@media(max-width:899px){
  .hero{
    min-height:720px;
    padding-bottom:27px;
  }
  .hero .hero-grid{
    min-height:680px;
    align-items:flex-start;
    padding-top:10px;
  }
  .hero-copy{
    max-width:100%;
  }
  .robot-stage{
    top:58%!important;
    bottom:-90px!important;
    height:auto!important;
    opacity:1;
  }
  .robot-stage canvas{
    top:0!important;
    bottom:auto!important;
    left:-18%!important;
    right:-18%!important;
    width:136%!important;
    /* ФИКСИРОВАННЫЕ ПРОПОРЦИИ — ключевой момент.
       Spline подгоняет кадрирование сцены под соотношение сторон канваса. Пока
       высота зависела от высоты блока (а она на iPhone плавает вместе с
       адресной строкой Safari), сцена перекадрировалась и робот получался
       крупнее/мельче, тогда как статичный постер просто растягивался — отсюда
       и был скачок размера при подмене. С жёстким соотношением кадрирование
       детерминировано и совпадает с постером на любой высоте экрана. */
    height:auto!important;
    aspect-ratio:414/325;
    /* на телефоне робот стоит по центру: десктопного смещения вправо здесь
       быть не должно, иначе он уезжает за край и обрезается */
    --robot-x:0px;
    --robot-y:12px;
    /* масштаб постоянный — сцена не «расширяется» при появлении */
    --robot-scale:.78;
    transform-origin:center top;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
  }
  .robot-stage.live canvas{opacity:1}
  /* На мобильной постер — это КАДР САМОЙ СЦЕНЫ (assets/img/robot-scene-mobile.webp),
     снятый с канваса. Поэтому ему задаётся РОВНО та же геометрия и тот же
     transform, что и канвасу: одинаковый бокс + object-fit:fill => картинка
     ложится на сцену пиксель в пиксель, и подмена не видна вовсе.
     Прежняя картинка robot-first-frame-mobile.jpg показывала другую позу
     (руки опущены против разведённых у сцены) — отсюда и были «ступени». */
  .robot-first-frame{
    top:0;
    left:-18%;
    right:-18%;
    width:136%;
    /* те же фиксированные пропорции, что и у канваса */
    height:auto;
    aspect-ratio:414/325;
    transform:translate3d(0,12px,0) scale(.78);
    transform-origin:center top;
  }
  .robot-first-frame img{object-fit:fill}
  .robot-stage .robot-poster{
    background-size:clamp(360px,108vw,460px) auto!important;
    background-position:center bottom -54px!important;
  }
}

.robot-stage[data-spline-state="fallback"] canvas,
.robot-stage[data-spline-state="context-lost"] canvas{
  opacity:0!important;
  visibility:hidden!important;
}

/* v13 - infrastructure: CDN globe and location tiles */
#infrastructure{
  padding-top:92px;
  padding-bottom:110px;
}
#infrastructure .section-head{
  margin-bottom:34px;
}
#infrastructure .section-head h2{
  margin-bottom:14px;
}
#infrastructure .section-head p{
  max-width:680px;
  color:#8E96A3;
}
.infrastructure-grid{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(440px,1.08fr);
  gap:24px;
  align-items:stretch;
}
.infra-globe-wrap{
  position:relative;
  min-height:560px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
  background:transparent;
  border-radius:0;
}
.infra-globe-wrap > div:not(.infra-globe-labels){
  width:min(100%,560px)!important;
  height:auto!important;
  aspect-ratio:1;
  flex:0 0 auto;
}
#infraGlobe{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  aspect-ratio:1;
  height:auto;
  opacity:0;
  cursor:grab;
  touch-action:pan-y;
  transition:opacity .8s ease;
}
#infraGlobe.is-ready{opacity:.7}
#infraGlobe.is-dragging{cursor:grabbing}
.infra-globe-labels{
  display:contents;
}
.globe-marker-label,
.globe-traffic-label{
  position:absolute;
  z-index:3;
  left:anchor(center);
  bottom:anchor(top);
  translate:-50% 0;
  white-space:nowrap;
  pointer-events:none;
}
.globe-marker-label{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  opacity:var(--marker-visible,0);
  filter:blur(calc((1 - var(--marker-visible,0)) * 8px));
  transition:opacity .3s ease,filter .3s ease;
}
.globe-marker-pyramid{
  position:relative;
  width:12px;
  height:12px;
  transform-style:preserve-3d;
  animation:globe-pyramid-spin 4s linear infinite;
}
.globe-marker-face{
  position:absolute;
  left:-.5px;
  top:0;
  width:0;
  height:0;
  border-left:6.5px solid transparent;
  border-right:6.5px solid transparent;
  border-bottom:13px solid #111;
  transform-origin:center bottom;
}
.globe-marker-face-1{transform:rotateY(0deg) translateZ(4px) rotateX(19.5deg)}
.globe-marker-face-2{border-bottom-color:#333;transform:rotateY(120deg) translateZ(4px) rotateX(19.5deg)}
.globe-marker-face-3{border-bottom-color:#555;transform:rotateY(240deg) translateZ(4px) rotateX(19.5deg)}
.globe-marker-face-4{border-bottom-color:#222;transform:rotateX(-90deg) rotateZ(60deg) translateY(4px)}
.globe-marker-region{
  padding:2px 6px;
  color:#000;
  background:#fff;
  border-radius:3px;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
  font:500 .55rem/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.05em;
}
.globe-traffic-label{
  padding:3px 8px;
  color:#fff;
  background:#000;
  border-radius:4px;
  font:500 .5rem/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;
  opacity:var(--arc-visible,0);
  filter:blur(calc((1 - var(--arc-visible,0)) * 8px));
  transition:opacity .3s ease,filter .3s ease;
}
@keyframes globe-pyramid-spin{
  from{transform:rotateX(20deg) rotateY(0deg)}
  to{transform:rotateX(20deg) rotateY(360deg)}
}
@media(prefers-reduced-motion:reduce){
  .globe-marker-pyramid{animation:none}
  .globe-marker-label,.globe-traffic-label{transition:none;filter:none}
}
.infra-locations{
  padding:36px;
  background:#242424;
  border-radius:40px;
}
.infra-locations h3{
  margin:0 0 24px;
  color:#F4F6FA;
  font:700 28px/1.15 Inter,sans-serif;
  letter-spacing:-.7px;
}
.location-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.location-tile{
  min-height:47px;
  padding:0 17px;
  display:flex;
  align-items:center;
  gap:10px;
  color:#F4F6FA;
  background:#353535;
  border-radius:11px;
  cursor:default;
  transition:none;
}
.location-tile span{
  width:30px;
  flex:0 0 30px;
  color:#8E96A3;
  font:600 13px/1 Inter,sans-serif;
  letter-spacing:0;
}
.location-tile strong{
  min-width:0;
  color:#F4F6FA;
  font:600 16px/1 Inter,sans-serif;
  letter-spacing:0;
}
@media(max-width:980px){
  #infrastructure{padding-top:72px;padding-bottom:90px}
  .infrastructure-grid{grid-template-columns:1fr;gap:18px}
  .infra-globe-wrap{min-height:520px}
  .infra-globe-wrap > div:not(.infra-globe-labels){width:min(100%,560px)!important}
}

/* На очень узких экранах (320-380px) сетка локаций в две колонки оставляет
   под название страны около 60px, а «Нидерланды» требуют 88px, «Финляндия»
   78px. Это одно слово, переносить негде — текст вылезал за пределы плитки.
   Замерено на живой странице при 320px. Одна колонка даёт названию всю
   ширину; сам вид плиток не меняется. */
@media(max-width:380px){
  .location-grid{grid-template-columns:1fr}
}

/* Страховка от длинных русских слов. Заголовок «Серверы и инфраструктура»
   на 320px требовал 304px при контейнере 280px: слово «инфраструктура» не
   помещается и вылезает наружу. break-word разрешает разорвать только такое
   слово — на текстах, которые и так помещаются, ничего не меняется. */
.section-head h2,.section-head h1,.infra-locations h3,.location-tile strong{
  overflow-wrap:break-word;
}

@media(max-width:560px){
  #infrastructure{padding-top:58px;padding-bottom:72px}
  #infrastructure .section-head{margin-bottom:26px}
  #infrastructure .section-head h2{font-size:29px;letter-spacing:-1.15px}
  .infra-globe-wrap{min-height:350px;border-radius:0}
  .infra-globe-wrap > div:not(.infra-globe-labels){width:118%!important;max-width:none}
  #infraGlobe{width:100%;max-width:none}
  .infra-locations{padding:24px 18px;border-radius:26px}
  .infra-locations h3{margin-bottom:18px;font-size:24px}
  .location-grid{gap:8px}
  .location-tile{min-height:44px;padding:0 12px;gap:8px;border-radius:10px}
  .location-tile span{width:26px;flex-basis:26px;font-size:11px}
  .location-tile strong{font-size:14px}
  .location-tile-long{padding-inline:8px;gap:6px}
  .location-tile-long span{width:24px;flex-basis:24px}
  .location-tile-long strong{font-size:13px;letter-spacing:-.15px;white-space:nowrap}
}

@media(pointer:coarse){
  #infraGlobe{cursor:default}
}

/* v16 - unified app-blue buttons and white account CTA */
:root{
  --accent:#0A84FF;
  --accent-2:#0A84FF;
  --accent-glow:rgba(10,132,255,.36);
}
/* Синие кнопки однотонные: ни верхней светлой линии, ни бегущего блика —
   только сплошная заливка. Раньше inset-подсветка сверху давала глянцевую
   грань, а .btn::after прогонял по кнопке светлую полосу при наведении. */
.btn-primary,
.btn-primary:focus-visible{
  color:#fff;
  background:#3264FF;
  border-color:#3264FF;
  box-shadow:none;
}
.btn-primary:hover{
  color:#fff;
  background:#3B6CFF;
  border-color:#3B6CFF;
  box-shadow:none;
}
/* блик отключён только у синих: у .btn-ghost он остаётся как был */
.btn-primary::after{display:none}
.header-cta a[href="/kabinet/"].btn,
.mobile-menu-cta a[href="/kabinet/"].btn{
  color:#111;
  background:#fff;
  border-color:rgba(255,255,255,.92);
  box-shadow:0 10px 24px rgba(0,0,0,.18),0 1px 0 rgba(255,255,255,.9) inset;
}
.header-cta a[href="/kabinet/"].btn:hover,
.mobile-menu-cta a[href="/kabinet/"].btn:hover{
  color:#111;
  background:#fff;
  border-color:#fff;
  filter:brightness(.96);
}

/* v18 - original Aceternity Glowing Effect mechanics in the static stack */
#features .section-head{margin-bottom:38px}
#features .section-head h2{margin:0}
.glow-grid{grid-template-columns:1fr;gap:16px}
.glow-card{
  position:relative;
  min-height:258px;
  padding:0;
  border:0;
  border-radius:40px;
  background:transparent;
  box-shadow:none;
  overflow:hidden;
  isolation:isolate;
}
.glow-card::before,.glow-card::after{content:none}
.glow-card-inner{
  position:relative;
  z-index:1;
  min-height:inherit;
  height:100%;
  padding:24px 180px 24px 24px;
  overflow:hidden;
  border:0;
  border-radius:inherit;
  background:#242424;
  box-shadow:none;
}
.glow-effect-fallback{
  display:none;
}
.glow-effect{
  --blur:0px;
  --spread:40;
  --start:0;
  --active:0;
  --glow-border-width:3px;
  --gradient:
    radial-gradient(circle,#dd7bbb 10%,#dd7bbb00 20%),
    radial-gradient(circle at 40% 40%,#d79f1e 5%,#d79f1e00 15%),
    radial-gradient(circle at 60% 60%,#5a922c 10%,#5a922c00 20%),
    radial-gradient(circle at 40% 60%,#4c7894 10%,#4c789400 20%),
    repeating-conic-gradient(from 236.84deg at 50% 50%,#dd7bbb 0%,#d79f1e 5%,#5a922c 10%,#4c7894 15%,#dd7bbb 20%);
  position:absolute;
  inset:0;
  z-index:2;
  border-radius:inherit;
  opacity:1;
  pointer-events:none;
}
.glow-effect-layer{position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.glow-effect-layer::after{
  content:"";
  position:absolute;
  inset:0;
  border:var(--glow-border-width) solid transparent;
  border-radius:inherit;
  background:var(--gradient);
  background-attachment:fixed;
  opacity:var(--active);
  transition:opacity .3s ease;
  -webkit-mask-clip:padding-box,border-box;
  -webkit-mask-composite:source-in;
  -webkit-mask-image:linear-gradient(#0000,#0000),conic-gradient(from calc((var(--start) - var(--spread)) * 1deg),#0000 0deg,#fff,#0000 calc(var(--spread) * 2deg));
  mask-clip:padding-box,border-box;
  mask-composite:intersect;
  mask-image:linear-gradient(#0000,#0000),conic-gradient(from calc((var(--start) - var(--spread)) * 1deg),#0000 0deg,#fff,#0000 calc(var(--spread) * 2deg));
  pointer-events:none;
}
.glow-card h3{position:relative;z-index:2;margin:0 0 20px;font-size:clamp(22px,2vw,28px);line-height:1.12;letter-spacing:-.025em}
.glow-card ul{position:relative;z-index:2;margin:0;padding:0;list-style:none;color:var(--text-2);font-size:16px;line-height:1.48;display:flex;flex-direction:column;gap:10px}
.glow-card li{position:relative;padding-left:18px}
.glow-card li::before{content:"";position:absolute;left:0;top:.68em;width:5px;height:5px;border-radius:50%;background:#8E96A3}
.glow-card .feature-3d{position:absolute;right:14px;top:50%;width:148px;height:148px;object-fit:contain;transform:translateY(-50%);filter:drop-shadow(0 22px 28px rgba(0,0,0,.34));z-index:1;transition:none}
.glow-card:hover .feature-3d{transform:translateY(-50%)}
@media(min-width:900px){
  .glow-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .glow-card-wide{grid-column:1/-1;min-height:240px}
  .glow-card-wide .glow-card-inner{min-height:inherit;padding-right:198px}
  .glow-card-wide .feature-3d{right:24px;width:164px;height:164px}
}
@media(max-width:899px){
  .glow-card{min-height:250px;border-radius:30px}
  .glow-card-inner{min-height:inherit}
}
@media(max-width:600px){
  #features .section-head{margin-bottom:28px}
  .glow-card{min-height:auto;padding:0;border-radius:26px}
  .glow-card-inner,.glow-card-wide .glow-card-inner{min-height:0;padding:24px 24px 150px;border-radius:inherit}
  .glow-card h3{font-size:22px;margin-bottom:16px}
  .glow-card ul{font-size:15px;line-height:1.45;gap:9px}
  .glow-card .feature-3d,.glow-card-wide .feature-3d{top:auto;right:10px;bottom:0;width:132px;height:132px;transform:none}
  .glow-card:hover .feature-3d{transform:none}
}
@media(prefers-reduced-motion:reduce){
  .glow-effect{display:none}
  .glow-effect-layer::after{transition:none}
}

/* ===== features: site-blue glow + location-tile style list items ===== */
.glow-effect{
  --gradient:
    radial-gradient(circle,#58D7FF 10%,#58D7FF00 20%),
    radial-gradient(circle at 40% 40%,#3264FF 5%,#3264FF00 15%),
    radial-gradient(circle at 60% 60%,#2A55D9 10%,#2A55D900 20%),
    radial-gradient(circle at 40% 60%,#5B8CFF 10%,#5B8CFF00 20%),
    repeating-conic-gradient(from 236.84deg at 50% 50%,#3264FF 0%,#58D7FF 5%,#2A55D9 10%,#5B8CFF 15%,#3264FF 20%);
}


/* inner feature card = exact platform-showcase surface (Sudar для iPhone) */
.glow-card-inner{
  background:#242424;
  border:0;
  border-radius:inherit;
  box-shadow:none;
}

/* ===== included-in-subscription: site-style tiles ===== */
.included-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,auto);grid-auto-flow:column;gap:10px}
@media(max-width:980px){.included-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,auto)}}
@media(max-width:620px){.included-grid{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row;gap:8px}}
.included-tile{
  display:flex;align-items:center;gap:13px;
  min-height:56px;padding:13px 17px;
  background:#353535;border-radius:11px;
  color:#F4F6FA;
}
.included-tile strong{font:600 15px/1.35 Inter,sans-serif;letter-spacing:0;min-width:0}
.ok-chip{
  flex:0 0 27px;width:27px;height:27px;border-radius:8px;
  background:rgba(72,220,130,.16);
  display:flex;align-items:center;justify-content:center;
}
.ok-chip svg{width:18px;height:18px;stroke:#5CE596}
@media(max-width:620px){.included-tile{min-height:50px;padding:12px 14px;border-radius:10px}}

/* ===== how-to-use: numbered steps (Sota-style, site colors) ===== */
.howto{display:flex;flex-direction:column;gap:22px;max-width:680px}
.howto-step{display:flex;align-items:center;gap:20px}
.howto-num{
  flex:0 0 56px;width:56px;height:56px;border-radius:16px;
  background:#353535;color:#F4F6FA;
  display:flex;align-items:center;justify-content:center;
  font:600 25px/1 Inter,sans-serif;
}
.howto-step p{margin:0;font:500 17px/1.5 Inter,sans-serif;color:#F4F6FA;max-width:500px}
.howto-step p strong{font-weight:700}
@media(max-width:620px){
  .howto{gap:14px}
  .howto-step{gap:14px}
  .howto-num{flex-basis:48px;width:48px;height:48px;border-radius:14px;font-size:21px}
  .howto-step p{font-size:15px}
}

/* ===== try-band: bright blue offer tile + refined outline shimmer ===== */
.section.no-rule::before{display:none}
.try-band{
  position:relative;
  border-radius:44px;
  padding:66px 44px 62px;
  text-align:center;
  color:#fff;
  background:
    radial-gradient(120% 180% at 8% 110%, rgba(255,255,255,.16), transparent 52%),
    linear-gradient(135deg,#3B74FF 0%,#3264FF 48%,#2A55D9 100%);
  box-shadow:0 30px 80px -40px rgba(50,100,255,.55);
  overflow:hidden;
}
.try-band h2{margin:0;color:#fff;font-size:clamp(28px,4.4vw,50px)}
.try-band p{margin:16px auto 34px;max-width:560px;font:500 18px/1.5 Inter,sans-serif;color:rgba(255,255,255,.92)}
@property --try-shimmer-angle{
  syntax:"<angle>";
  initial-value:0deg;
  inherits:false;
}
.try-btn{
  --try-shimmer-angle:0deg;
  --try-shimmer-speed:9.5s;
  --try-lift:0px;
  --try-press:1;
  position:relative;
  z-index:0;
  display:inline-flex;align-items:center;justify-content:center;
  height:58px;padding:0 36px;border-radius:16px;
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg,#161A22 0%,#0D0F14 58%,#090B10 100%);
  color:#F4F6FA;
  font:600 16px/1 Inter,sans-serif;
  box-shadow:
    0 18px 34px -10px rgba(5,8,15,.55),
    0 1px 0 rgba(255,255,255,.08) inset,
    0 -1px 0 rgba(0,0,0,.62) inset;
  transform:translateY(var(--try-lift)) scale(var(--try-press));
  transition:transform .32s var(--ease),box-shadow .32s var(--ease),background .32s var(--ease);
  overflow:visible;
  isolation:isolate;
  white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
}
.try-btn::before{
  content:"";
  position:absolute;
  inset:-1px;
  z-index:1;
  padding:1.5px;
  border-radius:inherit;
  pointer-events:none;
  background:conic-gradient(
    from var(--try-shimmer-angle),
    transparent 0deg,
    transparent 130deg,
    rgba(110,155,255,.035) 190deg,
    rgba(130,170,255,.14) 232deg,
    rgba(175,205,255,.4) 268deg,
    rgba(255,255,255,.94) 294deg,
    #fff 305deg,
    rgba(255,255,255,.5) 314deg,
    rgba(150,190,255,.12) 325deg,
    transparent 340deg,
    transparent 360deg
  );
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,.6))
    drop-shadow(0 0 6px rgba(140,180,255,.5))
    drop-shadow(0 0 15px rgba(70,130,255,.32));
  animation:tryOutlineShimmer var(--try-shimmer-speed) linear infinite;
  transition:filter .4s var(--ease);
}
.try-btn:hover::before{
  filter:
    drop-shadow(0 0 3px rgba(255,255,255,.85))
    drop-shadow(0 0 10px rgba(150,190,255,.7))
    drop-shadow(0 0 24px rgba(70,130,255,.5));
}
.try-btn::after{
  content:"";
  position:absolute;
  inset:1px;
  z-index:0;
  border:1px solid rgba(255,255,255,.055);
  border-radius:15px;
  box-shadow:0 7px 12px rgba(255,255,255,.025) inset;
  pointer-events:none;
}
.try-btn-label{position:relative;z-index:2}
@keyframes tryOutlineShimmer{to{--try-shimmer-angle:360deg}}
.try-btn:hover{
  --try-lift:0px;   /* подъём убран: кнопка не всплывает при наведении */
  background:linear-gradient(180deg,#1B202A 0%,#101319 58%,#0A0D12 100%);
  box-shadow:
    0 26px 46px -12px rgba(5,8,15,.62),
    0 1px 0 rgba(255,255,255,.12) inset,
    0 -1px 0 rgba(0,0,0,.7) inset;
}
.try-btn:active{--try-press:.985;transition-duration:.11s}
.try-btn:focus-visible{
  outline:2px solid rgba(255,255,255,.92);
  outline-offset:4px;
}
@media(max-width:620px){
  .try-band{border-radius:30px;padding:44px 22px 42px}
  .try-band p{font-size:15.5px;margin:12px auto 26px}
  .try-btn{height:52px;padding:0 28px;width:100%;max-width:340px}
}
@media(prefers-reduced-motion:reduce){
  .try-btn::before{animation:none;--try-shimmer-angle:312deg}
}

/* ===== support block (Sota-style) ===== */
#support .section-head{margin-bottom:22px}
.support-lead{
  margin:0 0 44px;
  font:600 clamp(18px,2.3vw,24px)/1.55 Inter,sans-serif;
  color:#F4F6FA;
  max-width:760px;
}
.support-lead a{color:#5B8CFF;text-decoration:none;transition:color .2s ease}
.support-lead a:hover{color:#7FA6FF}
.support-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:900px){.support-cards{grid-template-columns:1fr;gap:12px}}
.support-card{
  background:#242424;
  border-radius:24px;
  padding:30px 28px;
}
.support-card svg{width:26px;height:26px;stroke:#F4F6FA;display:block;margin-bottom:24px}
.support-card p{margin:0;font:600 17px/1.5 Inter,sans-serif;color:#F4F6FA}
@media(max-width:620px){
  .support-card{border-radius:18px;padding:24px 20px}
  .support-card p{font-size:15.5px}
  .support-lead{margin-bottom:30px}
}

/* v20.16 - keep the robot visible on short mobile landscape screens */
@media(max-width:899px) and (orientation:landscape) and (max-height:560px){
  .hero{min-height:520px}
  .hero .hero-grid{min-height:480px;align-items:flex-start}
  .hero-copy{max-width:54%}
  .hero-copy h1{font-size:clamp(28px,4.5vw,38px)}
  .hero-sub{font-size:14px;line-height:1.45}
  .hero-cta{margin-top:18px}
  .hero-trial{font-size:12px}
  .robot-stage{
    top:60px!important;
    left:48%!important;
    right:0!important;
    bottom:0!important;
    width:52%!important;
    height:auto!important;
  }
  .robot-stage canvas{
    left:-18%!important;
    right:-18%!important;
    width:136%!important;
    --robot-x:0px;
    --robot-y:8px;
    /* масштаб постоянный — без «расширения» при появлении */
    --robot-scale:.88;
  }
  .robot-first-frame{top:0;width:100%;aspect-ratio:390/315}
}

/* v20.18 — Sota-inspired footer: brand/actions row + calm navigation row */
.footer.footer-sota{
  padding:76px 0 24px;
  border-top:0;
  background:#191919;
  color:#F7F7F7;
}
.footer-sota .container{max-width:1160px;position:relative;z-index:1}
.footer-primary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
}
.footer-sota .footer-brand{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:0;
  color:#F7F7F7;
  font:600 15px/1 Unbounded,sans-serif;
  letter-spacing:.055em;
  white-space:nowrap;
}
.footer-brand img{
  display:block;
  width:auto;
  height:40px;
  aspect-ratio:1/1;
  filter:none;
}
.footer-actions{display:flex;align-items:center;gap:10px}
.footer-sota .footer-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 22px;
  border:1px solid transparent;
  border-radius:10px;
  font:600 14px/1 Inter,sans-serif;
  white-space:nowrap;
  transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease;
}
/* подъём при наведении убран по просьбе: кнопка остаётся на месте */
.footer-sota .footer-action:focus-visible,
.footer-sota .footer-nav a:focus-visible,
.footer-sota .footer-legal a:focus-visible{outline:2px solid #fff;outline-offset:4px}
.footer-sota .footer-action-secondary{
  color:#111318;
  background:#F7F7F7;
  border-color:#F7F7F7;
  box-shadow:0 8px 22px rgba(0,0,0,.18);
}
.footer-sota .footer-action-secondary:hover{color:#111318;background:#fff}
.footer-sota .footer-action-primary{
  color:#fff;
  background:#3264FF;
  border-color:#3264FF;
  box-shadow:none;
}
.footer-sota .footer-action-primary:hover{color:#fff;background:#3B6CFF;box-shadow:none}
.footer-nav{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  align-items:start;
  gap:24px;
  margin-top:58px;
}
.footer-nav-col{display:flex;flex-direction:column;gap:6px}
.footer-sota .footer-nav a{
  display:block;
  width:max-content;
  padding:2px 0;
  color:#F2F2F2;
  font:600 14px/1.3 Inter,sans-serif;
  transition:color .18s ease,opacity .18s ease;
}
.footer-sota .footer-nav a:hover{color:#fff;opacity:.72}
/* app-store / google-play row — pixel-exact copy of the 21st.dev "Footer 2"
   (sshahaider) AppStoreButton/PlayStoreButton at the user's direct request
   (measured off the live rendered component: #171717 bg, #fafafa icon/text,
   44px height, 8px radius, 20px icon, 8px gaps, 10px/16px two-line text) —
   left un-adapted to the site's flat-tile family by design, per that request */
.footer-apps{display:flex;flex-wrap:wrap;gap:16px;margin-top:40px}
.footer-app-btn{
  display:inline-flex!important;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:8px 16px!important;
  background:#E4E4E7;border-radius:6px;color:#18181B!important;
  transition:background-color .2s ease,transform .2s var(--ease)!important;
}
.footer-app-btn:hover{background:rgba(228,228,231,.9)}
.footer-app-btn:active{transform:scale(.98)}
.footer-app-btn svg{width:20px;height:20px;flex-shrink:0;fill:currentColor}
.footer-app-btn-text{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding-right:8px}
.footer-app-btn-text small{font:500 10px/10px Inter,sans-serif;letter-spacing:-.5px}
.footer-app-btn-text strong{font:700 16px/16px Inter,sans-serif}
.footer-app-btn-google .footer-app-btn-text small{font-weight:500}
.footer-sota .footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-top:38px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.08);
  color:#777B83;
  font:500 12px/1.4 Inter,sans-serif;
}
.footer-legal{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:18px}
.footer-sota .footer-legal a{display:block;padding:2px 0;color:#8D9199;font-size:12px;transition:color .18s ease}
.footer-sota .footer-legal a:hover{color:#F2F2F2}
/* footer floor glow — mechanic adapted from the 21st.dev "Ruixen Gradient
   Footer" (blurred vertical bars, bell-curve heights, grows as you reach
   the true bottom of the page): recolored to the site's own blue accents
   (--accent/#5B8CFF/#7FA6FF, already used elsewhere) instead of the
   reference's literal rainbow, and kept to a modest 160px so it reads as
   the same restrained ambient glow already used around the site, not a
   new decorative effect. */
.footer-glow{
  position:absolute;left:0;right:0;bottom:0;height:160px;
  overflow:hidden;pointer-events:none;opacity:.5;
  transform-origin:bottom;transform:scaleY(.16);
  will-change:transform;
}
.footer-glow svg{display:block;width:100%;height:100%}
@media(max-width:720px){
  .footer.footer-sota{padding:38px 0 24px}
  .footer-primary{align-items:stretch;flex-direction:column;gap:26px}
  .footer-sota .footer-brand{align-self:center}
  .footer-actions{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:10px}
  .footer-sota .footer-action{min-width:0;padding:0 12px;font-size:13px}
  .footer-nav{grid-template-columns:1fr 1fr;gap:22px 26px;margin-top:40px}
  .footer-sota .footer-nav a{font-size:14px}
  .footer-apps{margin-top:32px}
  .footer-sota .footer-bottom{align-items:flex-start;flex-direction:column;margin-top:52px;padding-top:18px}
  .footer-legal{justify-content:flex-start;gap:12px 18px}
}
@media(max-width:370px){
  .footer-actions{grid-template-columns:1fr}
}

/* v20.20 — requested header navigation and FAQ policies page */
.nav{gap:22px;font-size:15px;font-family:Inter,sans-serif;font-weight:500}
.nav a[aria-current="page"]{color:var(--text)}
.nav a[aria-current="page"]::after{right:0}
@media(max-width:1019px){
  .nav,.header-cta{display:none}
  .burger{display:flex}
}
@media(min-width:1020px){
  .nav,.header-cta{display:flex}
  .burger{display:none}
}
.policy-page{
  max-width:920px;
  padding-top:calc(var(--header-h) + 64px);
}
.policy-tabs{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin:0 0 44px;
  overflow-x:auto;
  padding-bottom:2px;
  scrollbar-width:none;
}
.policy-tabs::-webkit-scrollbar{display:none}
.policy-tab{
  min-height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.075);
  background:rgba(255,255,255,.04);
  color:var(--text-2);
  text-align:center;
  font:700 13px/1.25 Inter,sans-serif;
  transition:background .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease;
}
.policy-tab:hover{color:var(--text);border-color:rgba(255,255,255,.14)}
.policy-tab.is-active{
  color:var(--text);
  border-color:rgba(50,100,255,.5);
  background:linear-gradient(145deg,rgba(50,100,255,.18),rgba(255,255,255,.045));
  box-shadow:0 18px 44px -30px rgba(50,100,255,.72),0 1px 0 rgba(255,255,255,.08) inset;
}
.policy-tab-icon{
  width:24px;
  height:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  border-radius:8px;
  background:rgba(255,255,255,.08);
  color:#AFC0FF;
  font:800 13px/1 Inter,sans-serif;
}
.policy-panel{
  animation:policyPanelIn .28s var(--ease);
}
.policy-panel[hidden]{display:none}
.policy-panel h1{margin-bottom:12px}
.policy-panel h2{
  margin-top:34px;
  padding-top:0;
  border-top:0;
}
.policy-panel p{
  max-width:780px;
  font-size:17px;
  line-height:1.72;
}
@keyframes policyPanelIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
@media(max-width:720px){
  .policy-page{padding-top:calc(var(--header-h) + 62px)}
  .policy-tabs{
    display:flex;
    gap:8px;
    margin-left:-6px;
    margin-right:-6px;
    padding:0 6px 4px;
  }
  .policy-tab{
    min-width:160px;
    min-height:58px;
    justify-content:flex-start;
    text-align:left;
  }
  .policy-tab:first-child{min-width:112px}
  .policy-panel p{font-size:16px;line-height:1.68}
}

/* ===== v20.42 — pricing tab, rebuilt strictly in the homepage design
   system (see /root/DESIGN_SYSTEM.md). Mechanic/animation kept from the
   21st.dev "Pricing Interaction" component (sliding highlight track,
   selectable rows); every color/radius/spacing/type value below comes
   from the homepage's own flat-graphite tile family (#242424/#353535,
   no border, no shadow) instead of the glass .plan/.flow-card system
   used on other flow pages. ===== */

#pricing-plans .section-head{margin-bottom:30px}
#payment-methods .section-head{margin-bottom:30px}

.pricing-shell{
  display:grid;grid-template-columns:1fr;gap:18px;align-items:start;
}
@media(min-width:980px){.pricing-shell{grid-template-columns:1.35fr .85fr;gap:24px}}

/* plans + its "Подключить" CTA share one column, so the button sits under
   the price tiles on the left instead of centered under both columns */
.plans-column{display:flex;flex-direction:column;gap:20px}

/* plan rows: flat graphite tile, selection shown only by the sliding
   highlight track (not by per-row border/background changes) */
.plans-list{position:relative;display:flex;flex-direction:column;gap:12px}
.pplan{
  position:relative;z-index:2;display:flex;align-items:center;gap:16px;
  padding:20px 24px;cursor:pointer;
  background:#242424;border-radius:var(--r);
  transition:background-color .22s ease;-webkit-tap-highlight-color:transparent;
}
.pplan:hover{background:#2A2A2A}
.pplan>input{position:absolute;opacity:0;pointer-events:none}
.pplan-radio{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line-2);flex-shrink:0;position:relative;transition:border-color .2s}
.pplan-radio::after{content:'';position:absolute;inset:4px;border-radius:50%;background:var(--accent);transform:scale(0);transition:transform .2s var(--ease)}
.pplan.selected .pplan-radio{border-color:var(--accent)}
.pplan.selected .pplan-radio::after{transform:scale(1)}
.pplan-body{flex:1;min-width:0}
.pplan-name{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font:600 16px Inter,sans-serif;color:var(--text)}
.pplan-meta{display:block;font-size:13px;color:var(--text-3);margin-top:8px}
.pplan-price{font-family:Unbounded,sans-serif;font-weight:600;font-size:19px;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--text)}
/* inline badge next to the plan name — same placement the 21st.dev
   reference uses ("Starter Popular") — not an absolute corner overlay:
   at only 12px gap between tiles, a badge tall enough to clear the
   sliding-highlight frame above would have to dip into the tile above it,
   which is what made it look crooked. Inline avoids that entirely. */
.pplan-tag{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font:600 11px/1.4 Inter,sans-serif;
  background:#3264FF;letter-spacing:.03em;color:#fff}
.pplan-save{display:inline-block;margin-top:6px;font:600 11.5px Inter;color:#48DC82;background:rgba(72,220,130,.1);
  border:1px solid rgba(72,220,130,.25);padding:3px 8px;border-radius:6px}

/* promo code entry — mechanic adapted from the 21st.dev "Animated Search
   Bar": the pill morphs from a compact label into an input via a width
   transition, and a separate circular submit button slides in from
   behind it — matching the reference's actual two-part cluster (input
   pill + a distinct circular icon button with visible daylight between
   them), not a single fused pill. Every reveal (label→input, circle-in)
   uses the site's own signature "premium" motion recipe — the same
   opacity+blur+transform combination `.reveal` uses site-wide — instead
   of a flat opacity fade, which is what the reference's own SearchIcon/
   InfoIcon animations use blur for too (just via Framer Motion filter
   springs there, var(--ease) transitions here). Site adaptation: glass-
   system surface + border on both parts (this is a form control, not a
   content tile — see DESIGN_SYSTEM.md §0), the site's own accent color,
   and the reference's decorative gooey-blur SVG filter + live-search
   results dropdown are dropped entirely — irrelevant to a single promo
   field and not part of this site's visual language. */
/* .promo-cluster's own box is what gets centered (margin:auto) — it must
   reserve room for the submit button too, not just the pill, otherwise
   the button hangs outside the centered box with nothing balancing it on
   the left. That's what made the open state read crooked and overflow
   the container on narrow phones. Closed width stays pill-only (190px,
   already centered correctly with nothing else visible); open width is
   the full composite: 220 (open pill) + 12 (gap) + 44 (submit) = 276. */
.promo-cluster{position:relative;width:190px;height:44px;margin:16px auto 0;transition:width .5s var(--ease)}
/* below 980px plans-column and included-card stack; the pill sits 36px
   under the button (20px column gap + its own 16px margin-top) — match
   that same 36px below it before included-card (18px grid gap needs
   18px more) so the pill reads centered between the two */
@media(max-width:979px){.promo-cluster{margin-bottom:18px}}
.promo-cluster.open{width:276px;max-width:100%}
.promo-pill{
  position:absolute;left:0;top:0;width:190px;height:44px;display:inline-flex;align-items:center;
  border-radius:999px;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);
  transition:width .5s var(--ease),border-color .25s,background-color .25s,box-shadow .25s;
}
.promo-cluster.open .promo-pill{width:220px}
.promo-pill.open{border-color:var(--line-2);background:rgba(0,0,0,.25)}
.promo-pill:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(10,132,255,.18)}
.promo-pill-toggle{
  position:absolute;inset:0;z-index:1;display:flex;align-items:center;gap:6px;justify-content:center;
  background:none;border:0;padding:0;cursor:pointer;white-space:nowrap;
  font:500 13px Inter,sans-serif;color:var(--text-2);
  transition:opacity .3s var(--ease),filter .3s var(--ease);
}
.promo-pill-toggle:hover{color:var(--text)}
.promo-pill.open .promo-pill-toggle{opacity:0;filter:blur(4px);pointer-events:none}
.promo-pill-input{
  flex:1;min-width:0;height:100%;padding:0 20px;
  background:none;border:0;color:var(--text);font:500 14px Inter,sans-serif;outline:none;
  opacity:0;filter:blur(4px);pointer-events:none;
  transition:opacity .4s var(--ease) .18s,filter .4s var(--ease) .18s;
}
.promo-pill-input::placeholder{color:var(--text-3)}
.promo-pill.open .promo-pill-input{opacity:1;filter:blur(0);pointer-events:auto}
/* the submit button — a distinct circle beside the pill, not nested
   inside it: slides in from behind with a deliberate travel distance
   (48px, echoing the reference's own x:-50→x:16 slide), resolving into
   focus via blur+scale+fade together rather than popping in flat */
.promo-pill-submit{
  position:absolute;top:0;right:0;
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface);border:1px solid var(--line);color:var(--text-2);cursor:pointer;
  opacity:0;filter:blur(4px);transform:translateX(-48px) scale(.8);pointer-events:none;
  transition:opacity .45s var(--ease) .22s,filter .45s var(--ease) .22s,
    transform .55s var(--ease) .22s,color .2s,background-color .2s,border-color .2s;
}
.promo-cluster.open .promo-pill-submit{opacity:1;filter:blur(0);transform:translateX(0) scale(1);pointer-events:auto}
.promo-pill-submit:hover{color:#fff;background:#3264FF;border-color:#3264FF}
.promo-pill-submit:active{transform:scale(.94)}
.promo-pill-submit[disabled]{opacity:.4;pointer-events:none}
/* ===== gooey-слой промокода (механика 21st.dev "Animated Search Bar") =====
   Фильтр нельзя навесить прямо на пилюлю и кнопку: их фон --surface это
   rgba(255,255,255,.045), а порог фильтра (18a-15) обнуляет всё, что светлее
   ~0.83 альфы, — плашки просто исчезли бы. Поэтому под настоящими элементами
   лежит отдельный слой из двух НЕПРОЗРАЧНЫХ фигур: фильтруется только он,
   а текст, иконки и рамки остаются поверх и не размываются.
   Цвета фигур — это те же --surface и rgba(0,0,0,.25), заранее сведённые с
   фоном страницы #1C1C1C: 38,38,38 и 21,21,21. Поэтому вид не меняется. */
.promo-goo{display:none}
html.goo-on .promo-goo{
  display:block;position:absolute;inset:0;pointer-events:none;
  filter:url(#promoGoo);
}
/* Порог фильтра съедает край: для гауссова размытия sigma=5 граница уходит
   внутрь на Ф^-1(0.833)*sigma = 4.83px с каждой стороны, и заливка оказалась
   бы заметно меньше настоящей рамки. Компенсируем ровно этой величиной через
   spread box-shadow того же цвета — он раздувает фигуру равномерно и, в
   отличие от увеличенных width/height, корректно масштабируется вместе с
   transform кнопки. */
.promo-goo-pill,.promo-goo-dot{
  position:absolute;top:0;background:rgb(38,38,38);
  box-shadow:0 0 0 5px rgb(38,38,38);
}
.promo-goo-pill{
  left:0;width:190px;height:44px;border-radius:999px;
  transition:width .5s var(--ease),background-color .25s,box-shadow .25s;
}
.promo-cluster.open .promo-goo-pill{
  width:220px;background:rgb(21,21,21);box-shadow:0 0 0 5px rgb(21,21,21);
}
/* тайминги дословно повторяют кнопку, иначе подложка отставала бы от неё */
.promo-goo-dot{
  right:0;width:44px;height:44px;border-radius:50%;
  opacity:0;transform:translateX(-48px) scale(.8);
  transition:opacity .45s var(--ease) .22s,transform .55s var(--ease) .22s;
}
.promo-cluster.open .promo-goo-dot{opacity:1;transform:translateX(0) scale(1)}
/* при включённом goo фон рисует подложка: если оставить его и на самих
   элементах, полупрозрачная заливка легла бы поверх плашки и стала светлее.
   :not(:hover) — чтобы синяя заливка кнопки при наведении не пропала. */
html.goo-on .promo-pill,
html.goo-on .promo-pill-submit:not(:hover){background:transparent}

@media(prefers-reduced-motion:reduce){
  .promo-pill,.promo-pill-toggle,.promo-pill-input,.promo-pill-submit{transition:none;filter:none}
  .promo-goo{display:none}
}

/* the one selection indicator — matches the 21st.dev "Pricing Interaction"
   reference mechanic exactly: a single bordered frame, painted ON TOP of
   the rows (z-index above .pplan, same stacking order as the reference's
   own last-in-DOM overlay div), sliding via translateY with a plain
   transform transition. Adapted to this site: accent-colored 2px border
   instead of the reference's literal black (invisible on our dark tiles),
   no glow/box-shadow (flat-tile family stays flat per DESIGN_SYSTEM.md §8),
   and height is measured per-row in JS instead of the reference's fixed
   88px, because our rows vary in height (save-tag badges) while the
   reference's three rows are uniform. */
/* .co-highlight — та же самая рамка на /checkout/ (группа способов оплаты).
   Правило общее намеренно: механика выделения на обеих страницах должна быть
   буквально одна и та же, а не «похожая». Отличается только радиус — плитки
   .co-tile скруглены на 16px против var(--r)=18px у .pplan. */
.pricing-highlight,.co-highlight{
  position:absolute;left:0;right:0;top:0;height:0;z-index:3;
  border-radius:var(--r);pointer-events:none;
  border:2px solid var(--accent);
  transition:transform .3s var(--ease),height .3s var(--ease);
}
.co-highlight{border-radius:16px}
@media(prefers-reduced-motion:reduce){.pricing-highlight,.co-highlight{transition:none}}

/* "Включено в подписку" — same wrapper/tile pattern as the homepage's
   infra-locations + location-grid (card holding a grid of small tiles) */
.included-card{padding:36px;background:#242424;border-radius:40px}
/* в узкой боковой колонке заголовок берёт масштаб h3 — иначе базовые 38px
   переносятся на две строки и спорят с заголовком страницы (см.
   DESIGN_SYSTEM.md, раздел 7: намеренный масштаб под контекст сайдбара) */
.included-card h2{margin:0 0 18px;font-size:clamp(17px,2.5vw,21px)}
.included-card .included-grid{
  grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row;gap:10px;
}
/* brand mark, bottom-right — in normal flow after the tiles (not an
   overlay), so it never collides with or hides behind tile content */
.included-card-logo-row{display:flex;justify-content:flex-end;margin-top:22px}
.included-card-logo{width:56px;height:auto;opacity:.4;pointer-events:none;user-select:none}
@media(max-width:620px){
  .included-card{padding:24px 18px;border-radius:26px}
  .included-card-logo-row{margin-top:16px}
  .included-card-logo{width:44px}
}

/* payment methods — same tile pattern as the homepage's support-cards */
.payment-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:900px){.payment-grid{grid-template-columns:1fr;gap:12px}}
.payment-tile{background:#242424;border-radius:24px;padding:30px 28px}
.payment-tile svg{width:26px;height:26px;stroke:#F4F6FA;display:block;margin-bottom:24px}
/* Ряд логотипов вместо прежней контурной иконки. Отступ 24px тот же, что был
   у неё, — вертикальный ритм плитки не меняется. Классы .pay-mark--* общие с
   /checkout/, поэтому знаки там и здесь одного размера, один в один. */
.payment-tile .pay-marks{margin-bottom:24px}
.pay-mark--sbp{height:24px}
.payment-tile p{margin:0;font:600 17px/1.5 Inter,sans-serif;color:#F4F6FA;display:flex;flex-direction:column;gap:4px}
.payment-tile p span{font:500 14px/1.4 Inter,sans-serif;color:var(--text-3)}
@media(max-width:620px){
  .payment-tile{border-radius:18px;padding:24px 20px}
  .payment-tile p{font-size:15.5px}
}

/* login — точь-в-точь визуал 21st.dev sign-in-flow-1: чёрный фон + canvas-реализация dot-matrix reveal.
   Логика входа (проверка ключа, редирект) — своя, Sudar; шапка сайта не трогается. */
.page-login{background:#000!important}
html:has(body.page-login){background:#000!important}
.login-main{position:relative;overflow:hidden;min-height:100vh;min-height:100dvh;padding-top:var(--header-h);background:#000;display:flex;flex-direction:column}
.login-canvas-wrap{position:absolute;inset:0;z-index:0}
/* v25.0: размытие снято — в компоненте точки рисуются чёткими квадратами,
   без filter:blur; это часть их «проработки» */
.login-canvas-wrap canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
/* v24.8: слой опущен на высоту хедера и обрезан overflow'ом .login-main —
   верхние 64px градиента точно так же скрыты за фиксированным хедером, так что
   видимое затемнение снизу и сверху совпадает при любой высоте экрана */
.login-bottomfade{position:absolute;bottom:calc(var(--header-h) * -1);left:0;right:0;height:33%;z-index:0;pointer-events:none;background:linear-gradient(to top,#000,transparent)}
/* v25.1: глубина центра тем же слоем-виньеткой компонента, но плотнее:
   добавлены две промежуточные точки, которые держат затемнение выше линейного
   спада (на 20% радиуса .94 вместо .80, на 50% — .62 вместо .50). Крайние
   точки не тронуты — центр по-прежнему чёрный, край по-прежнему прозрачный,
   резкой границы нет */
.login-vignette{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(circle at 50% 50%,rgba(0,0,0,1) 0%,rgba(0,0,0,.94) 20%,rgba(0,0,0,.62) 50%,transparent 100%)}
.login-topfade{position:absolute;top:0;left:0;right:0;height:33%;z-index:0;pointer-events:none;background:linear-gradient(to bottom,#000,transparent)}
.login-content{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 20px 48px;text-align:center}
.login-card h1,.login-card .login-view-title{font-family:Unbounded,Inter,sans-serif;font-weight:600;font-size:clamp(20px,3.2vw,26px);line-height:1.2;letter-spacing:-.01em;color:#fff;margin:0 0 8px;outline:none}
.login-sub{font:400 14px/1.5 Inter,sans-serif;color:rgba(255,255,255,.7);margin:0 0 24px}

/* карточка входа — плоская графитовая плитка Sudar (семья #242424, та же
   поверхность, что у #apps .platform-showcase / .included-card): без
   стекла, без border, без box-shadow — контраст даёт только сама заливка
   на чёрном фоне страницы входа */
.login-card{
  position:relative;width:100%;max-width:440px;padding:36px 34px;box-sizing:border-box;
  border-radius:40px;background:#242424;border:0;box-shadow:none;
}
@media(max-width:899px){.login-card{border-radius:30px}}
.login-field{position:relative;margin-bottom:14px}
.login-field .input{height:56px;border-radius:16px;padding-right:48px;background:#404040;border-color:transparent}
.login-field .input:focus{border-color:var(--accent)}
.login-eye{
  position:absolute;right:4px;top:6px;width:44px;height:44px;border:0;background:none;
  color:var(--text-3);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:color .2s ease;
}
.login-eye:hover{color:var(--text)}
.login-eye svg{width:20px;height:20px;stroke-width:2}
.login-eye-hide{display:none}
.login-eye.is-showing .login-eye-show{display:none}
.login-eye.is-showing .login-eye-hide{display:block}
.login-err{display:none;color:var(--danger);font-size:13.5px;margin:-2px 0 12px}
.login-divider{display:flex;align-items:center;gap:12px;margin:22px 0 16px}
.login-divider::before,.login-divider::after{content:"";flex:1;height:1px;background:var(--line)}
.login-divider span{font-size:13.5px;color:var(--text-3);white-space:nowrap}
.login-btn-white{
  display:flex;align-items:center;justify-content:center;width:100%;height:50px;
  border:0;-webkit-appearance:none;appearance:none;cursor:pointer;
  border-radius:14px;background:#fff;color:#111;font:600 15px Inter,sans-serif;
  text-decoration:none;transition:filter .2s ease,transform .25s var(--ease);
  box-shadow:0 10px 24px rgba(0,0,0,.22),0 1px 0 rgba(255,255,255,.9) inset;
}
.login-btn-white:hover{filter:brightness(.96)}
.login-help{
  display:block;margin-top:18px;font:500 14px Inter,sans-serif;color:rgba(255,255,255,.5);
  text-decoration:none;transition:color .2s ease;
}
.login-help:hover{color:#fff}
.login-legal{font:400 13px/1.5 Inter,sans-serif;color:rgba(255,255,255,.4);margin-top:16px}

/* флоу «Сгенерировать» — три вида внутри одной .login-card; переключение
   фирменным premium-reveal (opacity+blur+translateY, как .reveal),
   canvas-фон живёт вне карточки и не перезагружается между шагами */
.login-view{display:none}
.login-view.active{display:block;animation:loginViewIn .45s var(--ease)}
@keyframes loginViewIn{from{opacity:0;transform:translateY(14px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.login-back{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:18px;
  background:none;border:0;cursor:pointer;padding:8px 0;
  font:500 14px Inter,sans-serif;color:rgba(255,255,255,.5);transition:color .2s ease;
}
.login-back:hover{color:#fff}
.login-back svg{width:16px;height:16px;stroke-width:2}
.key-tile{background:#404040;border-radius:16px;padding:18px 20px;margin-bottom:12px;text-align:center}
.key-tile-label{display:block;font:600 11px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin-bottom:10px}
.key-tile-value{display:block;font:600 17px/1.45 'SF Mono',ui-monospace,Menlo,monospace;letter-spacing:.04em;color:var(--accent);word-break:break-all;font-variant-numeric:tabular-nums}
.key-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.key-action{
  display:flex;align-items:center;justify-content:center;gap:8px;height:48px;
  border-radius:14px;border:0;background:#404040;color:var(--text);
  font:600 14px Inter,sans-serif;cursor:pointer;
  transition:background-color .2s ease,transform .25s var(--ease);
}
.key-action:hover{background:#4A4A4A}
.key-action:active{transform:scale(.98)}
.key-action svg{width:17px;height:17px;stroke-width:2;flex:none}
.key-warning{
  display:flex;gap:12px;align-items:flex-start;text-align:left;
  background:rgba(255,93,93,.09);border-radius:16px;padding:16px 18px;margin-bottom:16px;
}
.key-warning svg{flex:none;width:20px;height:20px;stroke-width:2;color:var(--danger);margin-top:1px}
.key-warning p{margin:0;font:500 13.5px/1.55 Inter,sans-serif;color:var(--text)}
.key-confirm{display:flex;align-items:center;gap:11px;cursor:pointer;margin-bottom:16px;text-align:left;user-select:none}
.key-confirm input{position:absolute;opacity:0;pointer-events:none}
.key-confirm-box{
  flex:none;width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;
  transition:background-color .2s var(--ease),border-color .2s var(--ease);
}
.key-confirm-box svg{width:12px;height:12px;stroke-width:3;color:#fff;opacity:0;transform:scale(.5);transition:opacity .2s var(--ease),transform .2s var(--ease)}
.key-confirm input:checked+.key-confirm-box{background:var(--accent);border-color:var(--accent)}
.key-confirm input:checked+.key-confirm-box svg{opacity:1;transform:scale(1)}
.key-confirm input:focus-visible+.key-confirm-box{outline:2px solid var(--accent);outline-offset:3px}
.key-confirm-text{font:500 14px/1.4 Inter,sans-serif;color:var(--text)}
.btn-spinner{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:btnSpin .8s linear infinite;flex:none}
@keyframes btnSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
  .login-view.active{animation:none}
  .key-action,.key-confirm-box,.key-confirm-box svg{transition:none}
  .btn-spinner{animation:none;display:none}
}
@media(max-width:480px){.login-content{padding:40px 20px 40px}.login-card{padding:28px 20px;border-radius:26px}}

/* ===== v24.9 — раздел правовых документов («Политики и условия»).
   Механика взята со страницы политик Sota: длинный документ слева +
   липкое оглавление справа с подсветкой текущего раздела при скролле.
   Всё оформление — существующая плоская графитовая система Sudar
   (семья A из DESIGN_SYSTEM.md, раздел 0): заливка #242424/#353535,
   без border, без теней; сетка и отступы повторяют .pricing-shell и
   .included-card со страницы /podpiska/. ===== */

.doc-page{padding:calc(var(--header-h) + 44px) 0 92px}
@media(max-width:899px){.doc-page{padding:calc(var(--header-h) + 34px) 0 72px}}

.doc-head{max-width:760px;margin-bottom:30px}
.doc-head h1{margin:0 0 12px}
.doc-updated{
  display:inline-flex;align-items:center;gap:8px;
  min-height:34px;padding:0 14px;border-radius:999px;
  background:#242424;color:var(--text-3);
  font:600 13px/1 Inter,sans-serif;font-variant-numeric:tabular-nums;
}
.doc-lead{margin:18px 0 0;max-width:640px;font-size:16px;color:var(--text-2)}

.doc-shell{display:grid;grid-template-columns:1fr;gap:18px;align-items:start}
@media(min-width:980px){.doc-shell{grid-template-columns:1.35fr .85fr;gap:24px}}

/* ---- текст документа ---- */
.doc-body{min-width:0;padding:36px;background:#242424;border-radius:40px}
.doc-body section{scroll-margin-top:calc(var(--header-h) + 24px)}
.doc-body section + section{margin-top:34px;padding-top:30px;border-top:1px solid rgba(255,255,255,.07)}
/* заголовки разделов документа — тот же Unbounded 600, что и все заголовки
   сайта (эталон — секции главной); раньше здесь был Inter 750 и разделы
   выбивались из общей типографики */
.doc-body h2{
  margin:0 0 12px;color:#fff;
  font:600 clamp(19px,1.7vw,23px)/1.25 Unbounded,Inter,sans-serif;
  letter-spacing:-.025em;
}
.doc-body h2 .doc-num{color:var(--text-3);font-variant-numeric:tabular-nums;margin-right:9px}
.doc-body p{margin:0;color:#D9DBE0;font:400 16px/1.72 Inter,sans-serif;max-width:640px}
.doc-body p + p,.doc-body ul + p{margin-top:13px}
.doc-body ul{margin:13px 0 0;padding:0;list-style:none;display:grid;gap:9px;max-width:640px}
.doc-body li{
  position:relative;padding-left:19px;
  color:#D9DBE0;font:400 16px/1.6 Inter,sans-serif;
}
.doc-body li::before{
  content:"";position:absolute;left:2px;top:10px;
  width:5px;height:5px;border-radius:50%;background:var(--text-3);
}
.doc-body a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.38);text-underline-offset:3px}
.doc-body a:hover{text-decoration-color:#fff}
@media(max-width:620px){
  .doc-body{padding:24px 18px;border-radius:26px}
  .doc-body p,.doc-body li{font-size:15.5px}
  .doc-body section + section{margin-top:28px;padding-top:24px}
}

/* ---- липкое оглавление ---- */
.doc-aside{min-width:0;display:grid;gap:12px}
@media(min-width:980px){.doc-aside{position:sticky;top:calc(var(--header-h) + 24px)}}
.doc-nav{padding:28px 24px;background:#242424;border-radius:40px}
.doc-nav-title{
  margin:0 0 16px;color:var(--text-3);
  font:600 12px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;
}
.doc-nav ol{margin:0;padding:0;list-style:none;display:grid;gap:2px}
.doc-nav a{
  display:flex;gap:10px;padding:9px 12px;border-radius:10px;
  color:var(--text-2);font:500 14px/1.4 Inter,sans-serif;
  transition:color .22s var(--ease),background-color .22s var(--ease);
}
.doc-nav a span{font-variant-numeric:tabular-nums;color:var(--text-3);transition:color .22s var(--ease)}
.doc-nav a:hover{color:var(--text);background:#353535}
.doc-nav a.is-current{color:#fff;background:#353535}
.doc-nav a.is-current span{color:var(--accent)}
.doc-nav a:focus-visible{outline:2px solid rgba(244,246,250,.72);outline-offset:2px}

/* ---- ссылки на соседние документы ---- */
.doc-links{display:grid;gap:8px}
.doc-link{
  display:flex;align-items:center;gap:13px;
  min-height:56px;padding:13px 17px;
  background:#353535;border-radius:11px;color:#F4F6FA;
  transition:background-color .22s var(--ease),transform .22s var(--ease);
}
.doc-link:hover{background:#3C3C3C}
.doc-link:focus-visible{outline:2px solid rgba(244,246,250,.72);outline-offset:3px}
.doc-link strong{font:600 15px/1.35 Inter,sans-serif;min-width:0}
.doc-link svg{width:18px;height:18px;flex:0 0 18px;stroke:var(--text-3);fill:none;stroke-width:2;margin-left:auto}
@media(max-width:620px){
  .doc-nav{padding:24px 18px;border-radius:26px}
  .doc-link{min-height:50px;padding:12px 14px;border-radius:10px}
}
@media(prefers-reduced-motion:reduce){
  .doc-nav a,.doc-link{transition:none}
}

/* body во всём проекте имеет overflow-x:hidden, из-за чего он сам становится
   контейнером прокрутки — и position:sticky внутри него не срабатывает.
   overflow-x:clip обрезает горизонтальное переполнение точно так же, но
   контейнер прокрутки не создаёт, поэтому липкое оглавление документа
   работает. hidden оставлен первым — как запасной вариант для браузеров
   без поддержки clip. */
body.page-legal{overflow-x:hidden;overflow-x:clip}
/* та же поломка sticky от глобального body{overflow-x:hidden} — теперь на
   .cab-side (сайдбар кабинета, position:sticky). Без clip его позиция могла
   плавать между разными страницами кабинета вместо того, чтобы всегда стоять
   на одном месте. */
body.page-cab{overflow-x:hidden;overflow-x:clip}

/* ===== FAQ (/faq/) — вопрос-ответ аккордеон.
   Структура ориентирована на sotavpn.com/ru/faq (заголовок → поиск →
   список вопросов → блок поддержки), но целиком на графитовой плоской
   системе Sudar (DESIGN_SYSTEM.md, раздел 0-A): список — тот же флэт-
   контейнер #242424/radius 40, что и .doc-body на страницах /legal/, с такими же
   hairline-разделителями между пунктами вместо border вокруг каждого.
   Поле поиска — стеклянная система (раздел 0-B): это форма, не плитка. */

.faq-page{padding:calc(var(--header-h) + 44px) 0 0}
@media(max-width:899px){.faq-page{padding-top:calc(var(--header-h) + 34px)}}

/* заголовок страницы — та же шкала, что у заголовка секции на главной
   («Для всех ваших устройств»): h1 остаётся h1 семантически, но получает
   типографику базового h2 */
.faq-head h1{font-size:clamp(24px,4vw,38px);font-weight:600;max-width:760px;letter-spacing:-.025em;margin-bottom:14px}

.qa-search{position:relative;margin-bottom:32px}
.qa-search-icon{
  position:absolute;top:50%;left:18px;transform:translateY(-50%);
  width:20px;height:20px;stroke:var(--text-3);fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;
}
.qa-search .input{padding-left:50px}

.qa-list{background:#242424;border-radius:40px;padding:12px 36px}
@media(max-width:620px){.qa-list{padding:6px 18px;border-radius:26px}}

.qa-item{border-top:1px solid rgba(255,255,255,.07)}
.qa-item:first-child{border-top:0}
.qa-item[hidden]{display:none}

.qa-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:24px 0;background:none;text-align:left;cursor:pointer;
  color:var(--text);font:600 17px/1.4 Inter,sans-serif;
  transition:color .22s var(--ease);
}
.qa-q:hover{color:#fff}
.qa-item.is-open .qa-q{color:var(--accent)}
.qa-q:focus-visible{outline:2px solid rgba(244,246,250,.72);outline-offset:3px;border-radius:8px}

.qa-chevron{
  flex:0 0 20px;width:20px;height:20px;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .3s var(--ease);
}
.qa-item.is-open .qa-chevron{transform:rotate(180deg)}

.qa-a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.qa-a-in{padding-bottom:24px}
.qa-a p{margin:0;color:#D9DBE0;font:400 16px/1.72 Inter,sans-serif;max-width:640px}
.qa-a p+p,.qa-a ul+p{margin-top:13px}
.qa-a ul{margin:13px 0 0;padding:0;list-style:none;display:grid;gap:9px;max-width:640px}
.qa-a li{position:relative;padding-left:19px;color:#D9DBE0;font:400 16px/1.6 Inter,sans-serif}
.qa-a li::before{content:"";position:absolute;left:2px;top:10px;width:5px;height:5px;border-radius:50%;background:var(--text-3)}
.qa-a a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.38);text-underline-offset:3px}
.qa-a a:hover{text-decoration-color:#fff}

.qa-empty{display:none;margin:0;padding:40px 0;text-align:center;color:var(--text-3);font-size:15px}
.qa-list.is-empty .qa-empty{display:block}

@media(max-width:620px){
  .qa-q{padding:18px 0;font-size:16px}
  .qa-a p,.qa-a li{font-size:15.5px}
  .qa-a-in{padding-bottom:18px}
}

/* ритм как у секций главной: разделительная линия стоит на границе, и
   сверху (margin) и снизу (padding) от неё — одинаковые 92px, как между
   .section на главной (её padding-bottom + padding-top соседней секции).
   Перед футером линии нет — на главной её там тоже нет. */
.qa-help{position:relative;margin-top:92px;padding:92px 0}
.qa-help::before,.qa-docs::before{content:"";position:absolute;left:50%;top:0;width:min(1120px,calc(100% - 40px));height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--line-2),transparent)}
@media(max-width:899px){.qa-help{margin-top:72px;padding:72px 0}}
.qa-help h2{max-width:640px}
.qa-help-lead{
  margin:12px 0 44px;
  font:600 clamp(18px,2.3vw,24px)/1.55 Inter,sans-serif;
  color:#F4F6FA;max-width:760px;
}
.qa-help-lead a{color:#5B8CFF;text-decoration:none;transition:color .2s ease}
.qa-help-lead a:hover{color:#7FA6FF}
@media(max-width:620px){.qa-help-lead{margin-bottom:30px}}

/* ссылки на документы отделены такой же линией и тем же ритмом, что и
   блок «Остались вопросы?» выше */
.qa-docs{position:relative;display:grid;grid-template-columns:1fr;gap:8px;margin-top:92px;padding-top:92px}
@media(max-width:899px){.qa-docs{margin-top:72px;padding-top:72px}}

@media(prefers-reduced-motion:reduce){
  .qa-chevron,.qa-q,.qa-a{transition:none}
}

/* ===== оформление подписки (/checkout/).
   Раскладка переиспользует .pricing-shell + .plans-column + .included-card
   с /podpiska/ один в один: слева шаги, справа та же боковая карточка —
   покупатель проходит «тариф → оплата» в одной и той же сетке, без смены
   визуального языка. Плитки — плоская графитовая семья A (#242424 карточка,
   #353535 вложенные строки), поле ввода — тот же плоский #404040, что на
   /login/. Ничего нового не вводится. ===== */
#checkout .section-head{margin-bottom:30px}
.co-head h1{margin:0}
.co-back{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;
  font:500 14px Inter,sans-serif;color:var(--text-3);
  text-decoration:none;transition:color .2s ease;
}
.co-back:hover{color:var(--text)}
.co-back svg{width:16px;height:16px;stroke-width:2}
.co-back:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* шаги: тот же premium-reveal, что у видов на /login/ */
.co-view{display:none}
.co-view.active{display:flex;flex-direction:column;gap:20px;animation:coViewIn .45s var(--ease)}
@keyframes coViewIn{from{opacity:0;transform:translateY(14px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}

.co-card{position:relative;padding:32px;background:#242424;border-radius:40px}
.co-card-title{font:600 clamp(17px,2.5vw,21px)/1.25 Unbounded,Inter,sans-serif;
  letter-spacing:-.01em;color:var(--text);margin:0 0 16px;outline:none}
.co-input{height:56px;border-radius:16px;background:#404040;border-color:transparent}
.co-input:focus{border-color:transparent;box-shadow:none}
.co-input.is-invalid{border-color:var(--danger)}
.co-hint{font:400 13.5px/1.5 Inter,sans-serif;color:var(--text-3);margin:10px 0 0}
.co-err{display:none;font:500 13.5px/1.5 Inter,sans-serif;color:var(--danger);margin:10px 0 0}
.co-err.show{display:block}

/* строки выбора — вложенные плитки #353535, как .included-tile/.location-tile.
   position:relative — система отсчёта для скользящей рамки .co-highlight
   (offsetTop плиток меряется от .co-tiles, как на /podpiska/ от .plans-list) */
.co-tiles{position:relative;display:flex;flex-direction:column;gap:10px}
.co-tile{
  position:relative;z-index:2;
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  min-height:72px;padding:14px 18px;border-radius:16px;
  background:#353535;color:var(--text);cursor:pointer;
  /* прозрачная рамка остаётся: она держит геометрию, чтобы скользящая
     рамка ложилась ровно в границы плитки и ничего не «прыгало» */
  border:2px solid transparent;
  transition:background-color .22s ease,transform .25s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.co-tile:hover{background:#3C3C3C}
.co-tile:active{transform:scale(.995)}
.co-tile:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* выбранное состояние показывает ТОЛЬКО скользящая рамка — ровно как
   .pplan.selected на /podpiska/, где строка сама по себе не меняет ни
   фон, ни бордер. Иначе получилось бы два индикатора вместо одного. */
/* Контейнер иконки без заливки: раньше под знаком был серый квадрат, но рядом
   с фирменными знаками (СБП, монеты), у которых своя форма, он читался как
   лишняя рамка. Размер 40x40 сохранён — он держит выравнивание строк. */
.co-tile-icon{flex:none;display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;color:var(--text-2);
  /* цвет догоняет рамку, а не переключается мгновенно */
  transition:color .2s var(--ease)}
.co-tile-icon svg{width:30px;height:30px}
/* У фирменных знаков (монеты, СБП) своя заливка, поэтому серый квадрат-подложка
   под ними лишний — он читался бы как рамка вокруг знака. Только для них.
   width:auto обязателен: монеты квадратные, а знак СБП выше, чем шире, и
   жёсткая ширина его бы сплющила. */
.co-tile-icon--brand img{display:block;height:32px;width:auto;max-width:36px}
.co-tile.is-selected .co-tile-icon{color:var(--accent)}
.co-tile-body{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.co-tile-name{font:600 15.5px/1.3 Inter,sans-serif;color:var(--text)}
.co-tile-meta{font:400 13px/1.35 Inter,sans-serif;color:var(--text-3)}
.co-tile-go{flex:none;display:flex;align-items:center;color:var(--text-3);
  transition:color .2s ease,transform .25s var(--ease)}
.co-tile-go svg{width:18px;height:18px}
.co-tile:hover .co-tile-go{color:var(--text);transform:translateX(2px)}

/* Группа способов оплаты: марки платёжных систем в ряд сверху, название под
   ними. Высота у каждой марки своя — у логотипов разные пропорции, и если
   тянуть их к одной высоте, Visa (широкий низкий вензель) зрительно
   раздувается рядом с круглыми монетами. Значения взяты из соотношений
   самих логотипов, а не подобраны на глаз.
   Правило заужено до #groups: на шагах 2а/2б/2в те же .co-tile остаются
   строками со стрелкой. */
#groups .co-tile{
  flex-direction:column;align-items:flex-start;
  /* Просвет между знаками и названием — половина внешнего отступа (10 против
     20). При равных значениях, как было (16 против 20), строка и логотипы
     читались как два отдельных элемента; вдвое меньший внутренний просвет
     собирает их в одну группу. Пропорция сохранена и на мобильной: 8 против 16. */
  gap:10px;
  min-height:0;padding:20px 22px;
}
#groups .co-tile-name{font:600 16px/1.3 Inter,sans-serif}
.pay-marks{display:flex;align-items:center;gap:10px;height:24px}
.pay-mark{display:block;width:auto;flex:none}
/* «мир» и Visa — оба прописные логотипы, начертание занимает всю высоту
   своего бокса, поэтому одинаковая высота бокса даёт одинаковую высоту букв.
   Было 21px против 12px у Visa — «МИР» выглядел почти вдвое крупнее. */
.pay-mark--mir{height:12px}
.pay-mark--mc{height:20px}
.pay-mark--visa{height:12px}
.pay-mark--coin{height:24px}
@media(max-width:620px){
  #groups .co-tile{padding:16px 18px;gap:8px}
  #groups .co-tile-name{font-size:15px}
  .pay-marks{height:20px}
  .pay-mark--mir{height:10px}
  .pay-mark--mc{height:17px}
  .pay-mark--visa{height:10px}
  .pay-mark--coin{height:20px}
}

/* Согласия перед оплатой (/checkout/). Квадрат галочки повторяет геометрию
   плиток способов оплаты: та же подложка #353535, тот же радиус в масштабе
   22px, тот же синий акцент, что и у выбранной плитки. Галочка рисуется
   обводкой по dash-offset — если переходы не выполняются (фоновая вкладка),
   она просто появляется целиком, а не пропадает. */
/* Таблица в правовых документах. На узком экране уезжает горизонтально
   внутри своей обёртки, страница при этом не едет. */
.doc-table-wrap{overflow-x:auto;margin:18px 0;-webkit-overflow-scrolling:touch}
.doc-table{border-collapse:collapse;width:100%;min-width:520px;
  font:400 14px/1.5 Inter,sans-serif;color:var(--text-2)}
.doc-table th,.doc-table td{padding:12px 14px;text-align:left;
  border-bottom:1px solid rgba(255,255,255,.08)}
.doc-table th{color:var(--text);font-weight:600;white-space:nowrap}
.doc-table tr:last-child td{border-bottom:none}
.plans-renew-note{margin:16px 0 0;font:400 13.5px/1.6 Inter,sans-serif;color:var(--text-3);text-align:center}
.plans-renew-note b{color:var(--text-2);font-weight:600}
.plans-renew-note a{color:var(--text-2);text-decoration:underline;text-underline-offset:2px}
.co-plan-renew{margin:12px 0 0;font:400 13px/1.55 Inter,sans-serif;color:var(--text-3)}
.co-consent{margin-top:24px;padding-top:24px;border-top:1px solid rgba(255,255,255,.08);
  display:flex;flex-direction:column;gap:14px}
.co-check{display:flex;align-items:flex-start;gap:12px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.co-check input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.co-check-box{flex:none;width:22px;height:22px;margin-top:1px;border-radius:7px;
  background:#353535;border:2px solid transparent;display:grid;place-items:center;
  transition:background-color .2s ease,border-color .2s ease}
.co-check-box svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:2.8;
  stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:22;stroke-dashoffset:22;
  transition:stroke-dashoffset .26s var(--ease)}
.co-check:hover .co-check-box{background:#3F3F3F}
.co-check input:checked+.co-check-box{background:var(--accent);border-color:var(--accent)}
.co-check input:checked+.co-check-box svg{stroke-dashoffset:0}
.co-check input:focus-visible+.co-check-box{box-shadow:0 0 0 3px var(--accent-glow)}
.co-check-text{font:400 13.5px/1.6 Inter,sans-serif;color:var(--text-2)}
.co-check-text a{color:var(--text);text-decoration:underline;text-underline-offset:2px}
.co-check-text b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.co-consent-note{margin:0;font:400 12.5px/1.55 Inter,sans-serif;color:var(--text-3)}
/* обязательная галочка не отмечена — подсвечиваем её рамкой после клика по оплате */
.co-consent.is-missing .co-check input:not(:checked)+.co-check-box{border-color:var(--danger)}
/* плитки способов оплаты до принятия условий */
.co-tiles.is-locked .co-tile{opacity:.42}
.co-tiles.is-locked .co-tile:hover{background:#353535}

.co-legal{font:400 13px/1.6 Inter,sans-serif;color:var(--text-3);text-align:center;margin:0}
.co-legal a{color:var(--text-2);text-decoration:underline;text-underline-offset:2px;transition:color .2s ease}
.co-legal a:hover{color:var(--text)}

/* Карточка «Электронная почта» была выше сводки «Вы выбрали» ровно на одну
   строку подсказки (20px текста + 10px отступа) — всё остальное у них уже
   совпадает: паддинг 32px, заголовок, элемент высотой 56px. На десктопе, где
   карточки стоят рядом и их нижние края должны совпадать, подсказка уходит из
   потока в свободное место справа от заголовка: текст сохраняется, а высота
   карточки становится равна сводке. top:35px — это паддинг 32px плюс 3px,
   на которые строка 20.25px центрируется в заголовке 26.25px.
   Ниже 980px колонки складываются друг под друга, выравнивать нечего —
   подсказка возвращается в поток под поле. */
@media(min-width:980px){
  #emailHint{
    position:absolute;top:35px;right:32px;margin:0;
    max-width:50%;text-align:right;
  }
}

/* Боковая сводка — .included-card плюс плитка выбранного тарифа сверху.
   «Вы выбрали» намеренно НЕ h2: в карточке уже есть один крупный заголовок
   Unbounded («Что в подписке»), и второй такой же рядом ломал бы иерархию —
   выбранный тариф это факт, а не раздел. Поэтому надпись-подпись тем же
   приёмом, что .key-tile-label на экране ключа: мелкий капс с разрядкой. */
/* карточки сайдбара («Вы выбрали» + «Включено в подписку») имеют одинаковую
   заливку #242424, поэтому без зазора сливались в один сплошной блок —
   особенно заметно на мобильной, где сайдбар встаёт под основную колонку.
   Тот же gap:20px, что между .co-card в левой колонке (.co-view). */
.co-aside{display:flex;flex-direction:column;gap:20px;
  position:sticky;top:calc(var(--header-h) + 24px)}
.co-plan-label{font:600 11px/1 Inter,sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3);margin:0 0 12px}
.co-plan{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:56px;padding:13px 17px;border-radius:11px;background:#353535;
}
.co-plan-name{font:600 15px/1.35 Inter,sans-serif;color:var(--text);min-width:0}
.co-plan-price{font:600 17px Unbounded,sans-serif;color:var(--text);
  white-space:nowrap;font-variant-numeric:tabular-nums}
.co-plan-promo{font:500 13px/1.45 Inter,sans-serif;color:var(--ok);margin:10px 0 0}
.co-aside-next{margin-top:26px}

@media(max-width:979px){
  .co-aside{position:static}
}
@media(max-width:620px){
  .co-card{padding:24px 18px;border-radius:26px}
  .co-tile{min-height:66px;padding:12px 14px;border-radius:14px;gap:12px}
  .co-highlight{border-radius:14px}
  .co-tile-icon{width:36px;height:36px}
  .co-tile-icon svg{width:26px;height:26px}
  .co-tile-icon--brand img{height:28px;max-width:32px}
}
@media(prefers-reduced-motion:reduce){
  .co-view.active{animation:none}
  .co-tile,.co-tile-go{transition:none}
}

/* ===== личный кабинет: сайдбар + контент.
   Плоские графитовые плитки семьи A (#242424 контейнеры, #353535 вложенные),
   без border/box-shadow — разделение только заливкой, как на главной и /podpiska/.
   Фон — тот же чёрный canvas с точками, что на /login/ (общий шейдер
   /assets/js/dot-canvas.js, общие слои .login-canvas-wrap/.login-vignette/
   .login-topfade/.login-bottomfade — переиспользованы как есть, без
   дублирования CSS под новым именем). ===== */
.page-cab .flow-main::before{display:none}
.page-cab{background:#000!important}
html:has(body.page-cab){background:#000!important}
.cab-main{
  position:relative;overflow:hidden;z-index:1;background:#000;
  min-height:100svh;min-height:100dvh;
  /* У страницы больше нет отдельного 80px «подвала» после последней плитки.
     Оставляем только живой композиционный отступ: компактный на телефоне,
     чуть свободнее на широком экране и не меньше системной safe-area iPhone. */
  --cab-page-end-gap:clamp(24px,4vw,48px);
  padding:calc(var(--header-h) + 40px) 0 max(var(--cab-page-end-gap),env(safe-area-inset-bottom,0px));
}
/* Фон-точки в кабинете: слои те же, что на /login/, но с двумя поправками
   под другой тип страницы.
   1. Крепление. /login/ — ровно один экран, слои там absolute внутри секции.
      Кабинет прокручивается, и absolute-слой растянулся бы на всю высоту
      документа: центр волны появления уехал бы за пределы экрана, а canvas
      раздулся бы до высоты всей страницы. Поэтому здесь fixed по вьюпорту —
      точки стоят на месте, контент скользит поверх.
   2. Сила виньетки. На /login/ она гасит центр почти в ноль, чтобы выделить
      одну маленькую карточку по центру пустого экрана. В кабинете контент
      занимает всю ширину, и та же виньетка глушила поле точек целиком —
      фон переставал читаться вообще. Здесь она мягче и вытянута по ширине:
      точки видны по периметру как фактура, а к центру уходят под контент. */
.page-cab .login-canvas-wrap,
.page-cab .login-vignette{position:fixed}
/* 3. Высота. Слои прибиты к верху и держат высоту «большого» экрана — 100lvh,
   как при спрятанной панели браузера, — вместо inset:0. С inset:0 они ходили
   за панелью Safari/Chrome, которая прячется и выезжает при прокрутке: высота
   менялась десятки раз за жест (замер в Safari iOS 26: 26 раз, 796↔836px),
   canvas на мгновение растягивался, а после пересоздания буфера сетка точек
   перецентровывалась — фон дёргался. Теперь высота постоянная, буфер canvas
   не пересоздаётся; когда панель видна, низ слоя просто уходит под неё.
   На ПК 100lvh равен высоте окна — там ничего не меняется. */
.page-cab .login-canvas-wrap{top:0;right:0;left:0;bottom:auto;height:100vh;height:100lvh}
.page-cab .login-vignette{top:0;right:0;left:0;bottom:auto;height:100vh;height:100lvh;
  background:radial-gradient(ellipse 125% 105% at 50% 45%,
    rgba(0,0,0,.94) 0%,rgba(0,0,0,.88) 34%,rgba(0,0,0,.68) 66%,rgba(0,0,0,.4) 100%)}
/* В кабинете верхняя и нижняя растушёвки от экрана входа не нужны.
   При fixed-креплении нижний слой занимал примерно 12% окна и на iOS/ПК
   читался как отдельный чёрный прямоугольник. Отключаем оба слоя целиком:
   canvas и мягкая виньетка теперь непрерывно покрывают весь viewport. */
.page-cab .login-topfade,
.page-cab .login-bottomfade{display:none}

.cab-shell{position:relative;z-index:1;display:grid;grid-template-columns:280px minmax(0,1fr);gap:24px;align-items:start}
/* minmax(0,...), а не голый 1fr: у грид-трека иначе автоматический минимум
   равен min-content его содержимого — без этого любой не сжимающийся
   контент внутри (длинная строка, ряд плиток) распирает весь трек шире
   вьюпорта, и всё .cab-content с кнопками съезжает и обрезается по правому
   краю. Живой баг с телефона, в песочнице браузера (там resize не меняет
   реальный вьюпорт) не воспроизводился — оставляем minmax(0,1fr) и здесь
   как защиту на будущее, даже после того как сайдбар на мобильном скрыт
   (см. .cab-side ниже). */
@media(max-width:980px){.cab-shell{grid-template-columns:minmax(0,1fr);gap:16px}}

/* тарифы внутри кабинета переиспользуют блок выбора плана с /podpiska/ один в
   один — контейнер расширен ровно на ширину сайдбара+отступа (280+24px), чтобы
   .pricing-shell получал те же 1136px и не переносил текст по словам, что и
   на самой странице /podpiska/ */
.page-tariffs .cab-shell{max-width:1504px}

/* --- сайдбар --- */
.cab-side{
  background:#242424;border-radius:24px;padding:14px;
  display:flex;flex-direction:column;justify-content:space-between;gap:28px;
  position:sticky;top:calc(var(--header-h) + 24px);
}
/* На мобильном сайдбар как отдельная колонка не помещается вменяемо —
   раньше здесь была горизонтальная лента с прокруткой, но реальный
   телефон показал: видно 2-3 пункта из 6 без единой подсказки, что дальше
   можно скроллить, плюс это и было тем самым источником переполнения (см.
   .cab-shell выше). Вместо второго независимого способа навигации на
   мобильном используем уже существующий бургер сайта — та же навигация,
   что в сайдбаре, живёт в .mobile-menu (см. mobile_nav_items() в
   gen_kabinet.py и стили ниже). Сайдбар как блок просто скрыт. */
@media(max-width:980px){
  .cab-side{display:none}
}
.cab-nav{display:flex;flex-direction:column;gap:2px}
.cab-nav-item{
  display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:12px;
  font:500 15px Inter,sans-serif;color:var(--text);white-space:nowrap;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.cab-nav-item svg{
  width:19px;height:19px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}
.cab-nav-item:hover{background:#2E2E2E}
.cab-nav-item.is-active{background:#353535}
.cab-nav-item:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.cab-logout{
  display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:12px;width:100%;
  background:none;border:0;cursor:pointer;text-align:left;
  font:500 15px Inter,sans-serif;color:var(--text-2);
  transition:background .2s var(--ease),color .2s var(--ease);
}
.cab-logout svg{
  width:19px;height:19px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}
.cab-logout:hover{background:#2E2E2E;color:var(--text)}
.cab-logout:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* --- та же навигация внутри мобильной шторки (.mobile-menu) ---
   .mobile-menu > a задаёт сайтовым ссылкам свой вид (крупный шрифт, отступ,
   border-bottom построчно) — специфичность ".mobile-menu > a" (0,1,1) выше
   голого ".cab-nav-item"/".cab-logout" (0,1,0), поэтому без явного
   переопределения эти правила проросли бы поверх и сломали вид плашки.
   Переопределяем только на страницах кабинета — на остальном сайте
   .mobile-menu показывает обычную навигацию и её не трогаем. */
.page-cab .mobile-menu{gap:2px}
.page-cab .mobile-menu > a.cab-nav-item{
  padding:13px 14px;border-bottom:0;font:500 15px Inter,sans-serif;
}
.page-cab .mobile-menu > a:nth-child(6){transition-delay:270ms}
/* margin-top:auto + padding-top:20px из базового .mobile-menu-cta не
   трогаем — именно они прижимают «Выйти из аккаунта» к низу шторки с
   воздухом сверху, как и .cab-logout на десктопном сайдбаре
   (justify-content:space-between). Разделение только пустым пространством,
   без границы — плоские плашки кабинета нигде не используют border (см.
   общий комментарий вверху файла). */
@media(prefers-reduced-motion:reduce){
  .page-cab .mobile-menu > a.cab-nav-item{transition:none}
}

/* атрибут hidden должен побеждать display у .btn/.cab-modal (иначе элемент остаётся видимым) */
.cab-main [hidden],.cab-modal[hidden]{display:none}

/* --- контент --- */
.cab-content{display:flex;flex-direction:column;gap:16px;min-width:0}
.cab-title{margin:0 0 6px;font-size:clamp(26px,4vw,38px)}
.cab-card{background:#242424;border-radius:24px;padding:30px 28px}
@media(max-width:620px){.cab-card{border-radius:18px;padding:24px 20px}}

/* --- карточка подписки --- */
.cab-sub{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.cab-sub-art{width:132px;height:132px;flex:none;object-fit:contain;filter:drop-shadow(0 22px 28px rgba(0,0,0,.34))}
.cab-sub-body{flex:1 1 240px;min-width:0}
.cab-sub-label{margin:0 0 6px;font:500 14px Inter,sans-serif;color:var(--text-3)}
.cab-sub-status{margin:0;font-family:Unbounded,Inter,sans-serif;font-weight:600;font-size:clamp(22px,3.2vw,30px);line-height:1.15;letter-spacing:-.01em;color:var(--text)}
.cab-sub-note{margin:10px 0 0;font:400 15px/1.5 Inter,sans-serif;color:var(--text-2);max-width:420px}
.cab-sub-note b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.cab-sub .btn{flex:none}
@media(max-width:620px){
  .cab-sub{gap:18px}
  .cab-sub-art{width:96px;height:96px}
  .cab-sub .btn{width:100%}
}

/* --- три плитки-ссылки (помощь / канал / отзывы) --- */
.cab-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:900px){.cab-links{grid-template-columns:1fr;gap:12px}}
.cab-link{
  display:flex;flex-direction:column;gap:22px;
  background:#242424;border-radius:24px;padding:24px 22px;
  transition:background .25s var(--ease),transform .25s var(--ease);
}
.cab-link:hover{background:#2A2A2A}
.cab-link:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.cab-link svg{width:24px;height:24px;fill:none;stroke:#F4F6FA;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cab-link-title{font:600 16px Inter,sans-serif;color:#F4F6FA}
.cab-link-meta{display:flex;align-items:center;gap:6px;font:500 13.5px Inter,sans-serif;color:var(--text-3)}
.cab-link-meta svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.2}
@media(max-width:620px){.cab-link{border-radius:18px;padding:20px 18px;gap:16px}}

/* --- блок «скачайте приложение» --- */
.cab-apps{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cab-apps-copy h2{margin:0 0 6px;font:600 17px/1.4 Unbounded,Inter,sans-serif;letter-spacing:-.025em;color:#F4F6FA}
.cab-apps-copy p{margin:0;font:400 14.5px/1.5 Inter,sans-serif;color:var(--text-2)}
.cab-apps-list{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;flex:1 1 280px;min-width:0}
.cab-app{
  display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:11px;
  background:#353535;font:500 14px Inter,sans-serif;color:#F4F6FA;white-space:nowrap;
  transition:background .2s var(--ease),transform .25s var(--ease);
}
.cab-app svg{width:16px;height:16px;fill:currentColor;stroke:none}
.cab-app:hover{background:#3C3C3C}
.cab-app:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:620px){.cab-apps-list{justify-content:flex-start}}

/* --- строки (история операций / список платформ) --- */
.cab-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:#242424;border-radius:18px;padding:18px 22px;
}
.cab-row + .cab-row{margin-top:10px}
.cab-row-main{font:500 15px Inter,sans-serif;color:var(--text-2)}
.cab-row-main b{color:var(--text);font-weight:600}
.cab-row-amount{font:600 15px Inter,sans-serif;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.cab-row.is-failed .cab-row-main{color:var(--danger)}
a.cab-row{transition:background .25s var(--ease)}
a.cab-row:hover{background:#2A2A2A}
a.cab-row:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.cab-row-arrow{width:16px;height:16px;flex:none;fill:none;stroke:var(--text-3);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:620px){.cab-row{padding:16px 18px;border-radius:14px}}

/* --- пустое состояние --- */
.cab-empty{display:flex;flex-direction:column;align-items:center;gap:16px;padding:56px 24px;text-align:center}
.cab-empty svg{width:44px;height:44px;fill:none;stroke:var(--text-3);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cab-empty p{margin:0;font:500 15px Inter,sans-serif;color:var(--text-2)}

/* --- ключ доступа: одна плитка #353535, значение + иконки-кнопки в строке
   (показать/скрыть, скопировать) — без отдельного ряда кнопок под полем */
.cab-key-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px}
.cab-key-value{
  flex:1 1 260px;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:#353535;border-radius:12px;padding:14px 8px 14px 16px;
}
.cab-key-value>span:first-child{
  min-width:0;font:500 15px 'SF Mono',ui-monospace,Menlo,monospace;letter-spacing:.06em;color:var(--text);
  word-break:break-all;
}
.cab-key-icons{display:flex;gap:2px;flex:none}
.cab-key-icon-btn{
  display:flex;align-items:center;justify-content:center;width:36px;height:36px;flex:none;
  border:0;border-radius:10px;background:none;color:var(--text-3);cursor:pointer;
  transition:background-color .2s ease,color .2s ease;
}
.cab-key-icon-btn:hover{background:#3C3C3C;color:var(--text)}
.cab-key-icon-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cab-key-icon-btn svg{width:18px;height:18px;stroke-width:2;flex:none}
.cab-key-icon-btn .cab-eye-hide{display:none}
.cab-key-icon-btn.is-showing .cab-eye-show{display:none}
.cab-key-icon-btn.is-showing .cab-eye-hide{display:block}
.cab-modal-text{margin:0 0 22px;font:400 14.5px/1.55 Inter,sans-serif;color:var(--text-2)}
.cab-key-actions{display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:620px){.cab-key-actions .btn{flex:1;min-width:140px}}
@media(prefers-reduced-motion:reduce){.cab-key-icon-btn{transition:none}}

/* --- модалка выхода --- */
.cab-modal{
  position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(10,12,16,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .28s var(--ease),visibility 0s linear .28s;
}
.cab-modal.open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .28s var(--ease),visibility 0s linear}
.cab-modal-box{
  background:#242424;border-radius:24px;padding:30px 28px;width:100%;max-width:400px;text-align:center;
  transform:translateY(10px) scale(.98);transition:transform .28s var(--ease);
}
.cab-modal.open .cab-modal-box{transform:translateY(0) scale(1)}
.cab-modal-box h2{margin:0 0 22px;font-size:clamp(18px,2.4vw,21px)}
.cab-modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:420px){.cab-modal-actions{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  .cab-modal,.cab-modal-box,.cab-link,.cab-app,.cab-nav-item,.cab-logout,a.cab-row{transition:none}
}

/* v136 — one restrained editorial rhythm for the entire home page.
   Only opacity and a small compositor transform move during scrolling: this
   stays smooth on iPhone and keeps cards crisp throughout the transition. */
.reveal,.reveal-item{
  opacity:1;
  transform:none;
  filter:none;
}
.reveal.reveal-group{
  opacity:1;
  transform:none;
  filter:none;
  transition:none;
}
html.reveal-ready .reveal:not(.reveal-group):not(.in),
html.reveal-ready .reveal-item:not(.in){
  opacity:0;
  transform:translate3d(0,18px,0);
}
html.reveal-ready .reveal:not(.reveal-group),
html.reveal-ready .reveal-item{
  transition:
    opacity .68s cubic-bezier(.16,1,.3,1),
    transform .68s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--reveal-order,0) * 52ms);
}
html.reveal-ready .reveal.in,
html.reveal-ready .reveal-item.in{
  opacity:1;
  transform:none;
}

/* Cards receive a nearly imperceptible depth settle. Text remains unscaled,
   so headings never wobble or lose sharpness. */
html.reveal-ready :is(.glow-grid,.included-grid,.howto,.support-cards,.platforms).reveal-group>.reveal-item:not(.in){
  transform:translate3d(0,20px,0) scale(.992);
  transform-origin:50% 100%;
}
#apps .platforms.reveal-group>.platform.reveal-item{
  transition:
    background-color .22s ease,
    color .22s ease,
    opacity .68s cubic-bezier(.16,1,.3,1),
    transform .68s cubic-bezier(.16,1,.3,1);
  transition-delay:
    0s,
    0s,
    calc(var(--reveal-order,0) * 52ms),
    calc(var(--reveal-order,0) * 52ms);
}
@media(max-width:899px){
  html.reveal-ready .reveal:not(.reveal-group):not(.in),
  html.reveal-ready .reveal-item:not(.in){transform:translate3d(0,14px,0)}
  html.reveal-ready .reveal:not(.reveal-group),
  html.reveal-ready .reveal-item{
    transition-duration:.6s;
    transition-delay:calc(var(--reveal-order,0) * 38ms);
  }
  html.reveal-ready :is(.glow-grid,.included-grid,.howto,.support-cards,.platforms).reveal-group>.reveal-item:not(.in){
    transform:translate3d(0,15px,0) scale(.995);
  }
  #apps .platforms.reveal-group>.platform.reveal-item{
    transition-duration:.22s,.22s,.6s,.6s;
    transition-delay:0s,0s,calc(var(--reveal-order,0) * 38ms),calc(var(--reveal-order,0) * 38ms);
  }
}
@media(prefers-reduced-motion:reduce){
  .reveal,.reveal-item{
    opacity:1;
    transform:none;
    filter:none;
    transition:none;
  }
}