/* BrightToken demo — design system
   Motion & depth follow emilkowalski/skills (apple-design, emil-design-eng)
   and the spring-curve approach from kinetics.colorion.co  */

@font-face{
  font-family:'Bruno Ace SC';
  font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/bruno-ace-sc.woff2) format('woff2');
}
:root{
  /* ink */
  --ink:#0b0d12; --ink2:#3a4150; --mut:#666d7b; --faint:#78808f;   /* both clear 4.5:1 on white */
  --line:#dcdfe6; --hair:#eceef2;
  --bg:#fff; --bg2:#f6f7f9; --bg3:#eff1f5;
  --blue:#0071e3; --blue2:#0077ed; --blueSoft:#e9f2fe;
  --ok:#12875a; --okbg:#e6f5ee;
  --acc:#c8102e; --acc2:#a30d25; --accSoft:#fdeef0;
  --gold:#9a6b00;

  /* widths — the page must fill a large display */
  --xw:1680px;   /* full canvas: tables, grids, hero */
  --wide:1400px; /* standard sections */
  --mx:1120px;   /* reading measure */

  /* easing — built-in curves are too weak */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  --t-press:140ms; --t-ui:200ms; --t-panel:280ms;

  /* elevation — layered and slightly cool-tinted; a hairline ring plus two
     shadow distances is what reads as "material", one flat shadow never does */
  --e1:0 1px 1px rgba(16,24,40,.04), 0 3px 8px -2px rgba(16,24,40,.06),
       0 0 0 1px rgba(16,24,40,.045);
  --e2:0 2px 4px rgba(16,24,40,.05), 0 14px 30px -10px rgba(16,24,40,.13),
       0 0 0 1px rgba(16,24,40,.05);
  --e3:0 6px 14px -4px rgba(8,12,24,.12), 0 34px 80px -24px rgba(8,12,24,.38);
  --ring:0 0 0 4px rgba(200,16,46,.15);
}

/* ============ browser surfaces: the parts we didn't draw ============
   Selection, caret, focus, scrollbar and form accents all ship with browser
   defaults that belong to no design system. Theme them from the palette. */
::selection{background:rgba(200,16,46,.14);color:var(--ink)}
section.dark ::selection{background:rgba(232,74,94,.3);color:#fff}
:root{accent-color:var(--acc)}
input,textarea{caret-color:var(--ink)}   /* a red caret reads as a glitch, not a brand */
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:6px}
html{scrollbar-color:#c6cbd8 transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:#c6cbd8;border-radius:99px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#aab1c2}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:110px}
body{
  margin:0;background:var(--bg);color:var(--ink);
  overflow-x:clip;   /* decorative glows may bleed past the edge — never scroll for them */
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",
    "Segoe UI Variable Display","Segoe UI",Inter,Roboto,"Helvetica Neue","Microsoft YaHei",Arial,sans-serif;
  font-size:17px;line-height:1.5;letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
p{margin:0}
img,svg{display:block;max-width:100%}

/* type: hierarchy = size + weight + leading + size-specific tracking */
h1,h2,h3,h4{margin:0;font-weight:600}
h1{font-size:clamp(42px,4.9vw,74px);line-height:1;letter-spacing:-.036em}
h2{font-size:clamp(31px,3.3vw,54px);line-height:1.04;letter-spacing:-.03em}
h3{font-size:19px;line-height:1.24;letter-spacing:-.018em}
h4{font-size:15px;line-height:1.3;letter-spacing:-.01em}
.display{font-size:clamp(52px,6vw,84px);line-height:1;letter-spacing:-.038em}

.wrap{max-width:var(--mx);margin:0 auto;padding:0 clamp(18px,2vw,30px)}
.wide{max-width:var(--wide);margin:0 auto;padding:0 clamp(18px,2vw,30px)}
.xw{max-width:var(--xw);margin:0 auto;padding:0 clamp(18px,2vw,30px)}

/* ============ demo strip ============ */
.demo{background:var(--ink);color:#e8eaef;font-size:12px;line-height:1.5;padding:9px 0;
  text-align:center;letter-spacing:-.005em}
.demo b{color:#ffd60a;font-weight:600}

/* ============ chrome ============ */
.navtop{background:rgba(246,247,249,.86);backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);font-size:12.5px}
.navtop .xw{display:flex;align-items:center;gap:24px;height:38px}
.navtop a{color:var(--mut);transition:color var(--t-ui) var(--ease-out)}
.navtop .sp{margin-left:auto}
.lang{display:inline-flex;background:rgba(11,13,18,.06);border-radius:980px;padding:2px}
.lang button{border:0;background:none;padding:3px 11px;font:600 11px/1.4 inherit;color:var(--mut);
  cursor:pointer;border-radius:980px;letter-spacing:.02em;
  transition:background var(--t-ui) var(--ease-out),color var(--t-ui) var(--ease-out)}
.lang button.on{background:#fff;color:var(--ink);box-shadow:var(--e1)}

/* translucent chrome + scroll-edge mask instead of a hard 1px rule */
/* the whole top chrome pins as one unit: demo strip, subnav, main nav */
.chrome{position:sticky;top:0;z-index:60}
.nav{background:rgba(255,255,255,.7);
  backdrop-filter:saturate(180%) blur(24px);-webkit-backdrop-filter:saturate(180%) blur(24px)}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:-22px;height:22px;pointer-events:none;
  background:linear-gradient(rgba(255,255,255,.7),rgba(255,255,255,0))}
.nav .xw{display:flex;align-items:center;gap:30px;height:56px}
.logo{display:flex;align-items:center;font-family:'Bruno Ace SC',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:15.5px;font-weight:400;letter-spacing:.005em;white-space:nowrap}
.logo i{width:.6em;height:.6em;border-radius:50%;border:.115em solid var(--acc);
  box-sizing:border-box;display:inline-block;margin:0 .06em;transform:translateY(.03em)}
/* v104: не-MOCK индикатор (реальный Market вместо демо-мока) — только класс, без инлайновой раскладки */
.stgbadge{display:inline-flex;align-items:center;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:9.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#8a5a00;
  background:#fdf1cf;border:1px solid #f2dfa0;border-radius:99px;padding:3px 8px;margin-left:8px;
  vertical-align:2px;white-space:nowrap}
footer .stgbadge{margin:10px 0 0}
.nav nav{display:flex;gap:26px;font-size:13.5px;letter-spacing:-.008em}
.nav nav a{color:var(--ink2);position:relative;padding:4px 0;
  transition:color var(--t-ui) var(--ease-out)}
.nav nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;
  background:var(--acc);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-ui) var(--ease-out)}
.nav nav a.cur{color:var(--ink)}
.nav nav a.cur::after{transform:scaleX(1)}
/* one-line nav with logical drop-downs: hover or keyboard focus opens.
   The menu is a rich panel: icon chip, title, one-line promise. */
.dd{position:relative;display:inline-flex}
.dd .ddt{display:inline-flex;align-items:center;gap:5px}
.dd .ddt svg{width:11px;height:11px;color:var(--faint);
  transition:transform var(--t-ui) var(--ease-out)}
.dd:hover .ddt svg,.dd:focus-within .ddt svg{transform:rotate(180deg);color:var(--ink)}
.dd .ddt::before{content:"";position:absolute;left:-10px;right:-10px;top:0;height:48px}
.ddm{position:absolute;top:calc(100% + 14px);left:-14px;min-width:344px;z-index:70;
  background:#fff;border-radius:18px;padding:9px;display:none;
  box-shadow:0 4px 12px rgba(8,12,24,.07), 0 32px 80px -20px rgba(8,12,24,.3),
             0 0 0 1px rgba(16,24,40,.06), inset 0 1px 0 #fff}
.ddm::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.dd:hover .ddm,.dd:focus-within .ddm,.dd.open .ddm{display:block;animation:ddin .2s var(--ease-out)}
@keyframes ddin{from{opacity:0;transform:translateY(7px) scale(.985)}}
html.motion-off .dd:hover .ddm{animation:none}
.ddm a{display:flex;gap:12px;align-items:flex-start;padding:11px 12px;border-radius:12px}
.ddm a::after{display:none}
.ddm .icw{width:36px;height:36px;border-radius:11px;background:var(--accSoft);
  display:grid;place-items:center;flex:0 0 36px;
  transition:background var(--t-ui) var(--ease-out)}
.ddm .icw svg{width:17px;height:17px;color:var(--acc)}
.ddm b{display:block;font-size:13.5px;font-weight:600;color:var(--ink);
  letter-spacing:-.012em;line-height:1.3}
.ddm i{display:block;font-style:normal;font-size:12px;color:var(--mut);
  margin-top:2px;letter-spacing:-.006em;line-height:1.4;white-space:normal}
@media (hover:hover){
  .ddm a:hover{background:var(--bg2)}
  .ddm a:hover .icw{background:#fbe2e6}
}
.nav .sp .tg{color:var(--ink2);font-size:13px}
/* kbd is now a real button */
.nav .sp button.kbd{border:1px solid var(--line);background:var(--bg2);cursor:pointer;
  font-family:inherit;transition:border-color var(--t-ui) var(--ease-out)}
@media (hover:hover){ .nav .sp button.kbd:hover{border-color:var(--ink2);color:var(--ink)} }
/* signed-in avatar chip */
.avchip{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;
  letter-spacing:-.01em;color:var(--ink);background:var(--bg2);border-radius:999px;
  padding:6px 13px 6px 6px}
.avchip i{width:22px;height:22px;border-radius:50%;flex:0 0 22px;
  background:linear-gradient(135deg,var(--acc),#ee6a52)}
@media (hover:hover){ .avchip:hover{background:var(--bg3)} }
.ddm-r{left:auto;right:-6px}

/* ---------- ⌘K command palette ---------- */
#cmdk{position:fixed;inset:0;z-index:180;background:rgba(10,12,17,.4);
  backdrop-filter:blur(3px);display:none;align-items:flex-start;justify-content:center;
  padding:min(16vh,150px) 20px 20px}
#cmdk.on{display:flex;animation:povin .16s var(--ease-out)}
.cmdkbox{width:min(560px,100%);background:#fff;border-radius:16px;overflow:hidden;
  box-shadow:0 30px 90px -20px rgba(8,12,24,.5), 0 0 0 1px rgba(16,24,40,.06);
  animation:pin .2s var(--ease-out)}
html.motion-off #cmdk.on,html.motion-off .cmdkbox{animation:none}
#cmdkq{width:100%;border:0;outline:0;font-family:inherit;font-size:16px;
  letter-spacing:-.014em;color:var(--ink);padding:17px 20px;border-bottom:1px solid var(--hair)}
#cmdkq::placeholder{color:var(--faint)}
.cmdklist{max-height:342px;overflow-y:auto;padding:7px}
.cmdklist a{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 13px;border-radius:10px;font-size:14px;color:var(--ink);letter-spacing:-.01em}
.cmdklist a em{font-style:normal;font-size:11px;color:var(--faint);
  border:1px solid var(--hair);border-radius:6px;padding:2px 8px;flex:0 0 auto}
.cmdklist a.on{background:var(--bg2)}
.cmdklist a.on em{color:var(--mut)}
.cmdknone{padding:18px;text-align:center;font-size:13px;color:var(--faint)}
.cmdkhint{display:flex;gap:14px;justify-content:flex-end;padding:9px 16px;
  border-top:1px solid var(--hair);font-size:11px;color:var(--faint)}

/* ---------- consent bar ---------- */
#consent{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:105;
  display:flex;align-items:center;gap:18px;max-width:min(92vw,640px);
  background:#16181d;color:#d6d9e0;border-radius:14px;padding:13px 18px;
  font-size:12.5px;line-height:1.5;letter-spacing:-.008em;
  box-shadow:0 18px 50px -12px rgba(0,0,0,.5);transition:opacity .25s}
#consent a{color:#ff9182;text-decoration:underline;text-underline-offset:2px}
#consent .cbtns{display:flex;gap:8px;flex:0 0 auto}
#consent button{border:1px solid rgba(255,255,255,.22);background:none;color:#fff;
  border-radius:9px;padding:7px 14px;font:600 12px inherit;font-family:inherit;cursor:pointer}
#consent button.ok{background:#fff;color:#16181d;border-color:#fff}
@media(max-width:640px){#consent{flex-direction:column;align-items:stretch;text-align:center}}

/* invalid form shake (shared by checkout and forms) */
@keyframes btshake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.inv{border-color:var(--acc)!important;animation:btshake .3s var(--ease-out)}
html.motion-off .inv{animation:none}
.nav .sp{margin-left:auto;display:flex;gap:16px;align-items:center;font-size:13.5px}
.kbd{border:1px solid var(--line);border-radius:7px;padding:2px 7px;font-size:11px;color:var(--mut);
  background:#fff}
@media (hover:hover) and (pointer:fine){
  .navtop a:hover{color:var(--ink)}
  .nav nav a:hover{color:var(--ink)}
  .nav nav a:hover::after{transform:scaleX(1)}
}

/* ============ buttons ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid transparent;
  border-radius:980px;cursor:pointer;font:500 17px/1.2 inherit;letter-spacing:-.014em;padding:13px 25px;
  white-space:nowrap;
  transition:background var(--t-ui) var(--ease-out),color var(--t-ui) var(--ease-out),
             border-color var(--t-ui) var(--ease-out),box-shadow var(--t-ui) var(--ease-out),
             transform var(--t-press) var(--ease-out)}
.btn:active{transform:scale(.97)}
/* Primary = machined ink. One accent (red) lives in the type; buttons stay
   monochrome with real depth — highlight on top, tight contact shadow, soft throw. */
.btn-p{background:linear-gradient(180deg,#2c313a,#12151b);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),
             0 1px 2px rgba(8,12,24,.4), 0 12px 28px -10px rgba(8,12,24,.5)}
.btn-o{border-color:var(--line);color:var(--ink);background:rgba(255,255,255,.7)}
.btn-d{background:var(--ink);color:#fff;box-shadow:var(--e2)}
.btn-g{background:var(--bg2);color:var(--ink);border-color:var(--hair)}
.btn-s{font-size:14px;padding:8px 17px}
.btn-xs{font-size:12.5px;padding:6px 13px}
@media (hover:hover) and (pointer:fine){
  .btn-p:hover{background:linear-gradient(180deg,#383e49,#171b22);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.2),
               0 2px 4px rgba(8,12,24,.4), 0 16px 34px -10px rgba(8,12,24,.55)}
  .btn-o:hover{border-color:var(--ink2);background:#fff}
  .btn-d:hover{background:#000}
  .btn-g:hover{background:var(--bg3)}
}
.lnk{color:var(--acc);font-weight:500;font-size:17px;letter-spacing:-.014em;display:inline-flex;align-items:center;gap:2px;
  transition:gap var(--t-ui) var(--ease-out)}
.lnk::after{content:"\203A";font-size:20px;line-height:1;position:relative;top:-1px}
.lnk-s{font-size:14px}
.lnk-s::after{font-size:17px}
@media (hover:hover) and (pointer:fine){ .lnk:hover{gap:6px;text-decoration:underline} }

/* ============ page head ============ */
.phead{padding:clamp(36px,4vw,52px) 0 36px;text-align:center}
.phead.left{text-align:left}
/* the kicker is a category label, not the message — it gets grey, and the
   accent is reserved for the key phrase inside the headline itself */
.kicker{font-size:12.5px;font-weight:600;color:var(--mut);margin-bottom:12px;
  letter-spacing:.09em;text-transform:uppercase}
h1 em,h2 em{font-style:normal;font-weight:700;
  background:linear-gradient(100deg,#c8102e 10%,#ee6a52 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.phead h1{max-width:19ch;margin:0 auto}
.phead.left h1{margin:0}
.lead{font-size:17.5px;line-height:1.5;color:var(--mut);max-width:54ch;margin-top:14px;
  font-weight:400;letter-spacing:-.012em}
.phead .lead{margin-left:auto;margin-right:auto}
.phead.left .lead{margin-left:0}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}
/* the hero vendor strip is first-screen content: no reveal engine may ever
   dim it, including a stale cached script setting inline opacity */
#vrow,#vrow *,.herovend .cap2{opacity:1!important;transform:none!important}
/* sections carry their own ground: the body backdrop is scroll-dimmed near
   the dark act, and must never leak through content surfaces */
section{padding:clamp(40px,4.2vw,68px) 0;background:var(--bg)}
.alt{background:var(--bg2)}
.tight{padding:30px 0}

/* ============ stat strip ============ */
.stats{display:flex;flex-wrap:wrap;background:#fff;border-radius:18px;box-shadow:var(--e2);
  overflow:hidden}
.stats div{flex:1 1 0;min-width:150px;padding:24px 16px;text-align:center;position:relative}
.stats div+div::before{content:"";position:absolute;left:0;top:26%;bottom:26%;width:1px;background:var(--hair)}
.stats b{display:block;font-size:clamp(28px,2.5vw,38px);font-weight:600;letter-spacing:-.034em;line-height:1.05}
.stats span{font-size:12px;color:var(--mut);letter-spacing:-.004em}

/* ============ cards — raised, layered shadow, lifts on hover ============ */
.grid{display:grid;gap:clamp(13px,1.1vw,18px);margin-top:28px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:linear-gradient(180deg,#fff,#fbfbfd);border-radius:16px;padding:24px 22px;
  text-align:left;box-shadow:inset 0 1px 0 #fff, var(--e1);
  transition:box-shadow var(--t-panel) var(--ease-out),transform var(--t-panel) var(--ease-out)}
.card h3{margin-bottom:7px}
.card p{font-size:14.5px;line-height:1.5;color:var(--mut)}
.card .num{font-size:34px;font-weight:600;letter-spacing:-.034em;margin-bottom:6px;line-height:1}
/* flat grid variant: same rhythm, no card chrome — two identical card walls
   on one page read as a template, so the second one sheds its boxes */
.gflat .card{background:none;box-shadow:none;border-radius:0;padding:18px 4px 0;
  border-top:1px solid var(--line)}
@media (hover:hover) and (pointer:fine){
  .gflat .card:hover{box-shadow:none;transform:none}
}
.card .ic{margin-bottom:13px;display:grid;place-items:center;width:38px;height:38px;
  border-radius:11px;background:var(--accSoft);color:var(--acc)}
.ic svg{display:block;width:20px;height:20px}
.mic svg{display:block;width:16px;height:16px}
@media (hover:hover) and (pointer:fine){
  .card:hover{box-shadow:var(--e2);transform:translateY(-3px)}
}

/* ============ tables ============ */
.tblwrap{background:#fff;border-radius:20px;box-shadow:var(--e1);overflow:hidden}
.tbl{width:100%;border-collapse:collapse;font-size:15.5px;letter-spacing:-.008em}
.tbl th{font-size:12px;font-weight:600;color:var(--mut);text-align:right;padding:16px 18px;
  letter-spacing:.01em;white-space:nowrap;background:var(--bg2)}
.tbl th:first-child{text-align:left}
.tbl td{padding:17px 18px;text-align:right;border-top:1px solid var(--hair);font-variant-numeric:tabular-nums}
.tbl td:first-child{text-align:left;font-weight:500}
.tbl tbody tr{transition:background var(--t-ui) var(--ease-out)}
@media (hover:hover) and (pointer:fine){ .tbl tbody tr:hover{background:var(--bg2)} }
.tiny{font-size:12.5px;color:var(--mut);display:block;font-weight:400;letter-spacing:0}
.win{color:var(--ok);font-weight:600}
.best{color:var(--acc);font-weight:600}
.scr{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ============ dark section — the page's one black act ============
   Rounded shoulders make it read as a black sheet laid over the page,
   not a hard colour switch. */
section.dark{background:linear-gradient(180deg,#0c0e13,#0a0c10);color:#e9ecf2;
  border-radius:clamp(22px,2.8vw,36px) clamp(22px,2.8vw,36px) 0 0;
  box-shadow:0 -22px 48px -24px rgba(8,12,24,.35)}   /* the sheet casts light up-shadow — no raw rim */
section.dark h2{color:#fff}
section.dark h2 em{background:linear-gradient(100deg,#ff8d7c,#ffc9a3);
  -webkit-background-clip:text;background-clip:text;color:transparent}
section.dark .kicker{color:#7e8695}
section.dark .lead{color:#9aa2b1}
section.dark .lnk{color:#ff9182}
.dark .vc{background:linear-gradient(180deg,#151924,#0e1119);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 0 0 1px rgba(255,255,255,.06),
             0 28px 70px -28px rgba(0,0,0,.85)}
.dark .vc .nm{color:#fff}
.dark .vc .sub2,.dark .vc .pl{color:#8b93a2}
.dark .vc .pr{color:#fff}
.dark .vc .rw{border-top-color:rgba(255,255,255,.09);color:#c6ccd8}
.dark .vc.us{background:linear-gradient(180deg,#1d1418,#130e12);
  box-shadow:inset 0 1px 0 rgba(255,141,124,.16), 0 0 0 1.5px rgba(200,16,46,.6),
             0 30px 74px -26px rgba(0,0,0,.9)}
.dark .vc.us .pr{background:linear-gradient(100deg,#ff8d7c,#ffc9a3);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.dark .stats{background:transparent;box-shadow:none;border-radius:0;
  border-top:1px solid rgba(255,255,255,.1);margin-top:44px}
.dark .stats div+div::before{background:rgba(255,255,255,.08)}
.dark .stats b{color:#fff}
.dark .stats span{color:#828a99}

/* ============ pills ============ */
.pill{display:inline-block;font-size:11.5px;font-weight:600;border-radius:980px;padding:4px 11px;
  letter-spacing:0;background:var(--bg3);color:var(--ink2)}
.pill.ok{background:var(--okbg);color:var(--ok)}
.pill.red{background:var(--accSoft);color:var(--acc)}
.pill.blue{background:#eaeef5;color:#44506a}   /* neutral info tag: the accent stays red-only */
.badge{display:inline-block;font-size:11px;font-weight:600;color:var(--gold);background:#fff6dd;
  border-radius:980px;padding:5px 12px;letter-spacing:0;vertical-align:middle;margin-left:12px}

/* ============ code ============ */
pre{margin:0;text-align:left;font:13px/1.75 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:0;color:#dfe3ea;background:#0e1016;border-radius:16px;padding:22px;overflow-x:auto}
pre.lite{background:var(--bg2);color:var(--ink2);overflow-x:auto;max-width:100%;min-width:0}
.k{color:#ff9182}.s{color:#a9e6ad}.c{color:#7f8794}.n{color:#f3d67e}.g{color:#a9e6ad}

/* ============ bars ============ */
.bar-t{height:8px;border-radius:980px;background:var(--hair);overflow:hidden}
.bar-t i{display:block;height:100%;border-radius:980px;background:#8f9aae;
  transform-origin:left;animation:grow 900ms var(--ease-out) both}
.bar-t i.us{background:linear-gradient(90deg,var(--acc),#ee6a52)}
.bar-t i.ok{background:var(--ok)}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ============ faq ============ */
details{border-bottom:1px solid var(--hair)}
details:first-of-type{border-top:1px solid var(--hair)}
summary{cursor:pointer;list-style:none;padding:24px 0;font-size:19px;font-weight:600;letter-spacing:-.018em;
  letter-spacing:-.018em;display:flex;justify-content:space-between;gap:22px;align-items:center;
  transition:color var(--t-ui) var(--ease-out)}
summary::-webkit-details-marker{display:none}
summary::after{content:"";width:13px;height:13px;flex:0 0 13px;position:relative;
  background:
    linear-gradient(var(--acc),var(--acc)) center/13px 1.8px no-repeat,
    linear-gradient(var(--acc),var(--acc)) center/1.8px 13px no-repeat;
  transition:transform var(--t-panel) var(--ease-spring)}
details[open] summary::after{transform:rotate(90deg);
  background:linear-gradient(var(--acc),var(--acc)) center/13px 1.8px no-repeat}
details p{padding:0 0 26px;color:var(--mut);font-size:16.5px;line-height:1.6;max-width:66ch}
@media (hover:hover) and (pointer:fine){ summary:hover{color:var(--acc)} }

/* ============ final + footer ============ */
.final{text-align:center;padding:clamp(72px,8vw,124px) 0}
.cta{display:flex;gap:24px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:32px}
footer{background:var(--bg2);padding:52px 0 60px;font-size:12.5px;line-height:1.65;color:var(--mut)}
.fg{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:36px}
footer h4{font-size:12px;font-weight:600;color:var(--ink);margin:0 0 12px;letter-spacing:0}
footer a{display:block;margin-bottom:9px;color:var(--mut);transition:color var(--t-ui) var(--ease-out)}
@media (hover:hover) and (pointer:fine){ footer a:hover{color:var(--ink)} }
.req{margin-top:38px;padding-top:22px;border-top:1px solid var(--line)}

/* ============ skeletons ============
   Shown while data is being fetched. They mirror the real layout, so nothing
   jumps when the content lands. */
.sk{position:relative;overflow:hidden;background:var(--bg3);border-radius:7px;
  display:block}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);
  animation:shimmer 1.35s var(--ease-in-out) infinite}
.alt .sk,.card .sk{background:#e7e9ee}
@keyframes shimmer{100%{transform:translateX(100%)}}
.sk-t{height:11px}
.sk-h{height:17px;border-radius:8px}
.sk-b{height:34px;border-radius:10px}
.skrow{padding:22px 0;border-top:1px solid var(--hair)}
.skrow:first-child{border-top:0}
.sk-fade{animation:skIn 420ms var(--ease-out) both}
@keyframes skIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  html:not(.motion-on) .sk::after{animation:none;opacity:.5;transform:none}
}

/* ============ entrance: stagger, never from scale(0) ============ */
.rise{opacity:0;transform:translateY(10px) scale(.985);
  animation:rise 520ms var(--ease-out) both}
@keyframes rise{to{opacity:1;transform:none}}
.st>*{opacity:0;transform:translateY(10px);animation:rise 480ms var(--ease-out) both}
.st>*:nth-child(1){animation-delay:0ms}
.st>*:nth-child(2){animation-delay:50ms}
.st>*:nth-child(3){animation-delay:100ms}
.st>*:nth-child(4){animation-delay:150ms}
.st>*:nth-child(5){animation-delay:200ms}
.st>*:nth-child(6){animation-delay:250ms}
.st>*:nth-child(7){animation-delay:300ms}
.reveal{opacity:0;transform:translateY(14px)}
.reveal.in{opacity:1;transform:none;
  transition:opacity 620ms var(--ease-out),transform 620ms var(--ease-out)}

/* scroll reveal — never from scale(0); a real rise, staggered, ease-out only */
[data-rv]{opacity:0;transform:translateY(30px) scale(.985)}
[data-rv].in{opacity:1;transform:none;
  transition:opacity 700ms var(--ease-out) var(--d,0ms),
             transform 780ms var(--ease-out) var(--d,0ms)}

/* ============ responsive ============ */
@media(max-width:1180px){
  .g4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .g4,.g3,.g2,.fg{grid-template-columns:1fr}
  .nav nav,.navtop a:not(.tg){display:none}
  .stats div+div::before{display:none}
}
@media(max-width:560px){
  .nav .sp .kbd{display:none}
  .nav .xw,.navtop .xw{gap:14px}
  .stats div{flex:1 1 50%}
  .btn{font-size:15.5px;padding:11px 20px}
  .nav .stgbadge{display:none}   /* v104: тесно рядом с логотипом на мобильном — метка остаётся в футере */
}
@media(max-width:400px){
  .nav .sp a:not(.btn){display:none}
  .navtop .tg{display:none}
}
table,pre,input,textarea,select{max-width:100%}

/* ============ accessibility ============ */
/* OS "reduce motion" — honoured unless ?motion=1 forced it back on */
@media (prefers-reduced-motion:reduce){
  html:not(.motion-on){scroll-behavior:auto}
  html:not(.motion-on) *,html:not(.motion-on) *::before,html:not(.motion-on) *::after{
    animation-duration:1ms!important;animation-delay:0ms!important;
    /* infinite loops must STOP, not strobe at 1ms */
    animation-iteration-count:1!important;
    transition-duration:1ms!important}
  html:not(.motion-on) .reveal,html:not(.motion-on) .rise,html:not(.motion-on) .st>*{
    opacity:1;transform:none}
  html:not(.motion-on) [data-rv]{opacity:1!important;transform:none!important}
}
/* ?motion=0 — force everything static regardless of the OS */
html.motion-off *,html.motion-off *::before,html.motion-off *::after{
  animation-duration:1ms!important;animation-delay:0ms!important;
  transition-duration:1ms!important}
html.motion-off .reveal,html.motion-off .rise,html.motion-off .st>*{opacity:1;transform:none}
html.motion-off [data-rv]{opacity:1!important;transform:none!important}
@media (prefers-reduced-transparency:reduce){
  .nav,.navtop{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav::after{display:none}
}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:10px}


/* v1.5: атрибут hidden побеждает display у .btn/.plans/.payplans и т.п. */
[hidden]{display:none!important}

/* ============ shared demo checkout (pay.js) ============ */
/* ---------- demo checkout sheet ---------- */
.payov{position:fixed;inset:0;z-index:120;background:rgba(10,12,17,.44);
  backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;padding:20px}
.payov.on{display:flex;animation:povin .22s var(--ease-out)}
@keyframes povin{from{opacity:0}}
.pay{width:min(880px,100%);max-height:min(92svh,720px);background:#fff;border-radius:22px;
  box-shadow:0 40px 120px -24px rgba(8,12,24,.5);display:grid;
  grid-template-columns:296px minmax(0,1fr);overflow:hidden;position:relative;
  animation:pin .26s var(--ease-out)}
@keyframes pin{from{opacity:0;transform:translateY(14px) scale(.985)}}
html.motion-off .payov.on,html.motion-off .pay{animation:none}
.payx{position:absolute;top:14px;right:14px;z-index:5;width:32px;height:32px;border:0;
  border-radius:50%;background:var(--bg2);color:var(--ink2);cursor:pointer;
  display:grid;place-items:center}
.payx svg{width:15px;height:15px}
@media (hover:hover){ .payx:hover{background:var(--bg3);color:var(--ink)} }

/* plan switcher inside the sheet */
.payplans{display:flex;gap:6px;margin-top:10px}
.payplans button{flex:1;border:1px solid var(--line);background:#fff;border-radius:9px;
  padding:7px 4px;font:600 11.5px inherit;font-family:inherit;color:var(--ink2);cursor:pointer}
.payplans button.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* left: the order */
.psum{background:var(--bg2);padding:26px 24px;display:flex;flex-direction:column;min-width:0}
.psum .cap{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
.psum h3{font-size:19px;margin-top:12px}
.psum .tk{font-size:13.5px;color:var(--ink2);margin-top:3px}
.psum .rows{margin-top:20px;display:grid;gap:9px;font-size:13px;color:var(--ink2)}
.psum .rows>div{display:flex;justify-content:space-between;gap:10px}
.psum .rows b{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.psum .tot{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:baseline}
.psum .tot span{font-size:13px;color:var(--mut)}
.psum .tot b{font-size:24px;font-weight:650;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pdemo{margin-top:14px;display:flex;gap:7px;align-items:flex-start;font-size:11.5px;line-height:1.45;
  color:#8a6d1a;background:#fdf6e3;border-radius:10px;padding:9px 11px}
.pdemo svg{width:13px;height:13px;flex:0 0 13px;margin-top:1px}

/* right: methods + forms */
.pbody{padding:26px 28px;overflow-y:auto;min-width:0}
.ptabs{display:inline-flex;gap:4px;background:var(--bg2);border-radius:11px;padding:4px}
.ptabs button{border:0;background:none;border-radius:8px;padding:7px 14px;cursor:pointer;
  font:600 12.5px inherit;font-family:inherit;letter-spacing:-.01em;color:var(--mut)}
.ptabs button.on{background:#fff;color:var(--ink);box-shadow:var(--e1)}
.pform{margin-top:22px;display:none}
.pform.on{display:block}
.pfrow{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.pfrow.one{grid-template-columns:1fr}
.pf{margin-bottom:12px}
.pf label{display:block;font-size:12px;color:var(--mut);margin-bottom:5px;letter-spacing:-.006em}
.pf input{width:100%;border:1px solid var(--line);border-radius:11px;background:#fff;
  font-family:inherit;font-size:14.5px;letter-spacing:-.01em;color:var(--ink);
  padding:11px 13px;outline:0;transition:border-color var(--t-ui) var(--ease-out)}
.pf input:focus{border-color:var(--ink2)}
.pf input::placeholder{color:var(--faint)}
.pcards{display:flex;gap:6px;margin-top:8px}
.pcards span{font-size:10.5px;font-weight:700;letter-spacing:.04em;color:var(--faint);
  border:1px solid var(--hair);border-radius:6px;padding:3px 8px}
.paybtn{width:100%;margin-top:8px}
.psec{display:flex;gap:6px;align-items:center;justify-content:center;margin-top:12px;
  font-size:11.5px;color:var(--faint)}
.psec svg{width:12px;height:12px}

/* v1.5 checkout: способ оплаты выбирается здесь, реквизиты — на странице шлюза (YooKassa) */
.pmeth{margin-top:18px;font-size:13.5px;color:var(--ink2);line-height:1.6}
.pnotice{font-size:12px;color:var(--mut);margin-top:12px;line-height:1.55}
.pnotice b{color:var(--ink);font-weight:600}
.pcnote{font-size:11.5px;color:var(--mut);margin-top:9px;line-height:1.5}
.pwspin{width:26px;height:26px;border-radius:50%;border:3px solid rgba(138,109,26,.25);
  border-top-color:#8a6d1a;animation:pspin .8s linear infinite}
.pokic.wait{background:#fdf6e3;color:#8a6d1a}
.pokic.fail{background:var(--accSoft);color:var(--acc)}

/* processing + success */
.pspin{width:15px;height:15px;border-radius:50%;border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;animation:pspin .7s linear infinite}
@keyframes pspin{to{transform:rotate(360deg)}}
.pok{display:none;text-align:center;padding:34px 10px 20px}
.pok.on{display:block}
.pokic{width:58px;height:58px;border-radius:50%;background:#e7f6ec;color:var(--ok);
  display:grid;place-items:center;margin:0 auto 18px;animation:pin .3s var(--ease-out)}
.pokic svg{width:26px;height:26px}
.pok h3{font-size:20px}
.pok p{font-size:13.5px;color:var(--mut);margin-top:8px;line-height:1.6}
.pok .btn{margin-top:22px}

@media(max-width:760px){
  .payov{padding:0;align-items:flex-end}
  .pay{grid-template-columns:1fr;border-radius:20px 20px 0 0;max-height:94svh}
  .psum{padding:20px 22px 14px}
  .psum .tot{margin-top:14px}
}

.card{min-width:0}

/* ---------- v98: плавающий виджет поддержки (лончер в стиле Intercom) ---------- */
#supBtn{position:fixed;right:22px;bottom:22px;z-index:118;width:54px;height:54px;border-radius:50%;
  border:0;cursor:pointer;background:var(--ink);color:#fff;display:grid;place-items:center;
  box-shadow:0 10px 30px -8px rgba(8,12,24,.45);transition:transform var(--t-ui) var(--ease-out)}
@media (hover:hover){ #supBtn:hover{transform:scale(1.06)} }
#supBtn svg{width:24px;height:24px}
#supBtn .ic-x{display:none}
#supBtn.open .ic-chat{display:none}
#supBtn.open .ic-x{display:block}
#supPanel{position:fixed;right:22px;bottom:88px;z-index:119;width:min(360px,calc(100vw - 32px));
  background:#fff;border-radius:18px;box-shadow:0 30px 80px -18px rgba(8,12,24,.4);
  display:none;flex-direction:column;overflow:hidden;max-height:min(540px,calc(100svh - 120px))}
#supPanel.on{display:flex;animation:supin .22s var(--ease-out)}
@keyframes supin{from{opacity:0;transform:translateY(10px)}}
html.motion-off #supPanel.on{animation:none}
.suphead{background:var(--ink);color:#fff;padding:15px 18px;flex:0 0 auto}
.suphead b{display:block;font-size:14.5px;letter-spacing:-.01em}
.suphead span{display:block;font-size:11.5px;opacity:.75;margin-top:3px}
.supdot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#37c978;margin-right:6px;vertical-align:1px}
#supBody{padding:14px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;flex:1;background:var(--bg2);min-height:120px}
.supmsg{max-width:86%;background:#fff;border-radius:12px 12px 12px 4px;padding:9px 12px;font-size:12.5px;
  line-height:1.5;color:var(--ink2);box-shadow:var(--e1);align-self:flex-start}
.supmsg.me{align-self:flex-end;background:var(--ink);color:#fff;border-radius:12px 12px 4px 12px}
.supquick{display:flex;gap:6px;flex-wrap:wrap;padding:10px 14px;background:var(--bg2);flex:0 0 auto}
.supquick a{font-size:11.5px;font-weight:600;color:var(--ink2);background:#fff;border:1px solid var(--line);
  border-radius:99px;padding:6px 11px}
@media (hover:hover){ .supquick a:hover{border-color:var(--ink2);color:var(--ink)} }
.supform{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--hair);background:#fff;flex:0 0 auto}
.supform input{flex:1;border:1px solid var(--line);border-radius:10px;font-family:inherit;font-size:13px;
  color:var(--ink);padding:9px 12px;outline:0;min-width:0}
.supform input:focus{border-color:var(--ink2)}
.supform button{border:0;background:var(--acc);color:#fff;border-radius:10px;width:38px;flex:0 0 38px;
  cursor:pointer;display:grid;place-items:center}
.supform button svg{width:16px;height:16px}
@media(max-width:640px){#supBtn{right:14px;bottom:14px;width:50px;height:50px}#supPanel{right:14px;bottom:74px}}