*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#ebebe9; --panel:#f5f5f3; --panel-2:#fbfbfa; --line:#cdcdc9; --strong:#0d0d0d;
  --text:#0d0d0d; --muted:#5c5c58; --faint:#9b9b96;
  --violet:#7c5cff; --violet-ink:#ffffff; --violet-soft:#e4ddff;
  --lime:#d4ff3a; --lime-ink:#0d0d0d;
  --ok:#1e9a52; --danger:#d43a2a;
  --px1:#dcdcd8; --px2:#b9b9b4; --px3:#8a8a84; --px4:#4b4b47; --px5:#1c1c1a;
  --code-bg:#0f0f10; --code-text:#e9e9e6; --code-muted:#7d7d78;
  --display:"Oswald","Arial Narrow",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,"Segoe UI Symbol","Apple Symbols",monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0c0c0d; --panel:#131315; --panel-2:#18181a; --line:#2b2b2f; --strong:#f1f1ee;
    --text:#f1f1ee; --muted:#a2a29d; --faint:#65655f;
    --violet:#9783ff; --violet-ink:#0c0c0d; --violet-soft:#221c46;
    --px1:#2a2a2d; --px2:#3d3d41; --px3:#626267; --px4:#a3a3a8; --px5:#ececef;
    --code-bg:#000; --code-text:#e9e9e6;
  }
}
:root[data-theme="dark"]{
  --bg:#0c0c0d; --panel:#131315; --panel-2:#18181a; --line:#2b2b2f; --strong:#f1f1ee;
  --text:#f1f1ee; --muted:#a2a29d; --faint:#65655f;
  --violet:#9783ff; --violet-ink:#0c0c0d; --violet-soft:#221c46;
  --px1:#2a2a2d; --px2:#3d3d41; --px3:#626267; --px4:#a3a3a8; --px5:#ececef;
  --code-bg:#000; --code-text:#e9e9e6;
}
html{scroll-behavior:smooth;overflow-x:clip}
body{background:var(--bg);color:var(--text);font-family:var(--mono);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .25s,color .25s}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
.frame{max-width:1280px;margin:0 auto;border-left:1px solid var(--line);border-right:1px solid var(--line);min-height:100vh;display:flex;flex-direction:column}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hbar{max-width:1280px;margin:0 auto;display:flex;align-items:stretch;height:64px;border-left:1px solid var(--line);border-right:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;padding:0 24px;border-right:1px solid var(--line);font-weight:700;letter-spacing:.02em}
.brand svg{width:26px;height:28px;color:var(--text)}
.brand .cur{color:var(--violet);animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
nav.menu{display:flex;align-items:center;gap:6px;padding:0 20px;flex:1;font-size:12px;text-transform:uppercase;letter-spacing:.06em}
nav.menu a{padding:6px 8px;color:var(--text)}
nav.menu a:hover{color:var(--violet)}
nav.menu i{color:var(--violet);font-style:normal;opacity:.7}
.sys{display:flex;flex-direction:column;justify-content:center;padding:0 18px;border-left:1px solid var(--line);font-size:10px;line-height:1.5;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.sys b{color:var(--text);font-weight:500}
.sys .dot{display:inline-block;width:6px;height:6px;background:var(--ok);margin-right:6px;vertical-align:1px}
.hdr-actions{display:flex;align-items:center;gap:10px;padding:0 16px;border-left:1px solid var(--line)}
.theme{width:38px;height:38px;border:1px solid var(--line);display:grid;place-items:center;font-size:14px}
.theme:hover{border-color:var(--strong)}
.theme .sun{display:none}
:root[data-theme="dark"] .theme .sun{display:inline}
:root[data-theme="dark"] .theme .moon{display:none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .theme .sun{display:inline}:root:not([data-theme="light"]) .theme .moon{display:none}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:14px;padding:14px 20px;font-family:var(--mono);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;border:1px solid var(--strong);transition:transform .12s,background .2s,color .2s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn .ar{font-size:15px;line-height:1}
.btn-dark{background:var(--strong);color:var(--bg)}
.btn-dark:hover{background:var(--violet);border-color:var(--violet);color:var(--violet-ink)}
.btn-ghost{background:transparent}
.btn-ghost:hover{background:var(--strong);color:var(--bg)}
.btn-sm{padding:10px 14px;font-size:11px}
.btn-link{border:none;padding:14px 4px;display:inline-flex;gap:12px;align-items:center;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.btn-link:hover{color:var(--violet)}

/* ---------- sections ---------- */
main{display:flex;flex-direction:column}
.sec{position:relative;border-bottom:1px solid var(--line);padding:72px 48px}
.sec::before,.sec::after{content:"+";position:absolute;top:-11px;color:var(--faint);font-size:16px;line-height:1;background:var(--bg);padding:2px 0}
.sec::before{left:-6px}
.sec::after{right:-6px}
.lbl{display:flex;gap:14px;align-items:baseline;font-size:12px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:36px}
.lbl .n{color:var(--violet);font-weight:700}
h1,h2,h3{font-family:var(--display);text-transform:uppercase;font-weight:600;letter-spacing:-.005em;line-height:1.08}
h2{font-size:clamp(34px,4.6vw,60px);max-width:820px}
h2 .v{color:var(--violet)}
.sub{color:var(--muted);max-width:560px;margin-top:18px;font-size:14px}
.tag{color:var(--violet);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(13px,1.3vw,16px)}
.mark{background:var(--lime);color:var(--lime-ink);padding:.02em .1em 0;display:inline-block;line-height:.98;margin:.04em 0}
.chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);padding:4px 10px;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.chip .dot{width:6px;height:6px;background:var(--ok)}
.chip.on{color:var(--text);border-color:var(--strong)}
.chip.soon .dot{background:var(--faint)}
/* class="tbd" — данные, которые заказчик впишет сам (найти поиском по tbd); визуально не выделяются */
.plus-grid{background-image:radial-gradient(circle,var(--line) 1px,transparent 1.2px);background-size:22px 22px}

/* ---------- pixel DB illustration ---------- */
.art{position:relative;width:100%;min-height:440px;display:flex;align-items:center;justify-content:center}
.art svg.pix{width:min(100%,420px);height:auto;display:block}
.pix .c1{fill:var(--px1)} .pix .c2{fill:var(--px2)} .pix .c3{fill:var(--px3)} .pix .c4{fill:var(--px4)} .pix .c5{fill:var(--px5)}
.pix .cv{fill:var(--violet)} .pix .cl{fill:var(--lime)}
.pix .gl{stroke:var(--line);stroke-width:1;fill:none}
.pix .flick{animation:flick 2.6s steps(1) infinite}
@keyframes flick{0%{opacity:1}40%{opacity:.15}55%{opacity:1}80%{opacity:.4}}
.art .ov{position:absolute;font-size:11px;text-transform:uppercase;letter-spacing:.05em;line-height:1.5}
.art .ov.tl{top:8px;left:8px}
.art .ov.tl b{color:var(--violet)}
.art .ov.br{bottom:8px;right:8px;color:var(--muted)}
.art .ov.coord{right:0;top:58%;border:1px solid var(--strong);background:color-mix(in srgb,var(--lime) 30%,var(--panel-2));padding:10px 14px;font-size:11px}
.art .x{position:absolute;color:var(--violet);font-size:18px;line-height:1}
.art .crosshair{position:absolute;width:26px;height:26px;border:1px solid var(--faint);border-radius:50%}
.art .crosshair::before,.art .crosshair::after{content:"";position:absolute;background:var(--faint)}
.art .crosshair::before{left:50%;top:-6px;bottom:-6px;width:1px}
.art .crosshair::after{top:50%;left:-6px;right:-6px;height:1px}

/* ---------- hero (shared) ---------- */
.hero{display:none;padding:0;border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:56px 1.25fr 1fr}
.rail{border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:24px 0;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--violet)}
.rail .vt{writing-mode:vertical-rl;transform:rotate(180deg)}
.rail .tick{display:flex;flex-direction:column;gap:10px}
.rail .tick i{display:block;width:10px;height:1px;background:var(--faint)}
.hero-copy{padding:64px 48px 56px;border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:center}
.hero-copy .lbl{margin-bottom:28px}
.hero h1{font-size:clamp(46px,6.4vw,92px)}
.hero .tag{margin-top:22px}
.hero .lead{color:var(--muted);max-width:500px;margin-top:18px;font-size:14px}
.hero .lead b{color:var(--text);font-weight:500}
.actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:32px}
.trust{display:flex;gap:18px;flex-wrap:wrap;margin-top:28px;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.trust span::before{content:"■";color:var(--lime);margin-right:7px;-webkit-text-stroke:1px var(--strong);font-size:9px;vertical-align:1px}
.hero-side{padding:28px;display:flex;align-items:center;justify-content:center;position:relative}

/* ---------- console mock ---------- */
.console{width:100%;max-width:520px;background:var(--panel-2);border:1px solid var(--strong);box-shadow:8px 8px 0 var(--violet)}
.c-head{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line);font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.c-head b{color:var(--text)}
.ok-pill{display:inline-flex;align-items:center;gap:6px;color:var(--ok);border:1px solid currentColor;padding:1px 8px;font-size:10px;text-transform:uppercase;letter-spacing:.05em}
.ok-pill::before{content:"";width:6px;height:6px;background:currentColor}
.c-log{padding:12px 14px;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)}
.c-log div{opacity:0;animation:logIn .3s forwards}
.c-log div:nth-child(1){animation-delay:.2s}.c-log div:nth-child(2){animation-delay:.8s}.c-log div:nth-child(3){animation-delay:1.4s}.c-log div:nth-child(4){animation-delay:2s}
.c-log .g{color:var(--ok)} .c-log .p{color:var(--violet)}
@keyframes logIn{to{opacity:1}}
.c-rows{padding:12px 14px;display:grid;grid-template-columns:110px 1fr;gap:5px 12px;font-size:12px}
.c-rows dt{color:var(--muted)}
.c-rows dd{font-weight:500}
.dbar{height:8px;border:1px solid var(--strong);margin-top:6px;position:relative;background:repeating-linear-gradient(90deg,transparent 0 6px,var(--line) 6px 7px)}
.dbar i{position:absolute;inset:0 auto 0 0;background:var(--violet)}
.c-tabs{display:flex;flex-wrap:wrap;gap:4px;padding:12px 14px 0}
.c-tabs button{font-size:11px;padding:4px 9px;border:1px solid var(--line);color:var(--muted)}
.c-tabs button:hover{color:var(--text);border-color:var(--strong)}
.c-tabs button.on{background:var(--strong);color:var(--bg);border-color:var(--strong)}
.code{margin:10px 14px 14px;background:var(--code-bg);color:var(--code-text);border:1px solid var(--strong);display:flex;align-items:flex-start}
.code pre{flex:1;min-width:0;padding:12px 14px;font-family:var(--mono);font-size:11.5px;line-height:1.65;white-space:pre-wrap;word-break:break-all}
.code pre .cm{color:var(--code-muted)} .code pre .k{color:#b3a4ff} .code pre .s{color:var(--lime)}
.copy{background:var(--lime);color:var(--lime-ink);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:8px 10px;margin:6px;flex-shrink:0;border:1px solid var(--strong)}
.copy:hover{background:var(--violet);color:var(--violet-ink)}
.c-foot{display:flex;justify-content:space-between;padding:0 14px 12px;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}

/* ---------- variant B hero ---------- */
.scen{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:34px}
.scen button{padding:18px 16px;text-align:left;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:6px;transition:background .2s}
.scen button:last-child{border-right:none}
.scen button .t{font-family:var(--display);font-size:22px;text-transform:uppercase;line-height:1}
.scen button .d{font-size:11px;color:var(--muted)}
.scen button .k{font-size:10px;color:var(--violet);letter-spacing:.08em}
.scen button:hover{background:var(--panel)}
.scen button.on{background:var(--strong);color:var(--bg)}
.scen button.on .d{color:color-mix(in srgb,var(--bg) 70%,transparent)}
.scen button.on .k{color:var(--lime)}
.scen-panel{display:none;margin-top:26px}
.scen-panel.on{display:block}
.scen-panel ul{list-style:none;display:grid;gap:8px;margin-top:14px}
.scen-panel li{display:flex;gap:10px}
.scen-panel li::before{content:"→";color:var(--violet);font-weight:700}

/* ---------- variant C hero ---------- */
.hero-c .hero-grid{grid-template-columns:56px 1fr 1fr}
.hero-c h1{font-size:clamp(50px,6.6vw,100px)}
.hero-c .art{min-height:560px}
.hero-c .art svg.pix{width:min(100%,520px)}
.hero-c .facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.hero-c .facts div{padding:16px 20px;border-right:1px solid var(--line)}
.hero-c .facts div:last-child{border-right:none}
.hero-c .facts b{display:block;font-family:var(--display);font-size:30px;line-height:1.1;font-weight:600}
.hero-c .facts span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}

/* ---------- langs strip ---------- */
.langs{padding:22px 48px;display:flex;align-items:center;gap:32px;flex-wrap:wrap}
.langs .lbl{margin:0;color:var(--muted)}
.langs .items{display:flex;gap:10px 30px;flex-wrap:wrap;flex:1 1 360px;justify-content:space-between}
.langs .items span{font-family:var(--display);font-size:24px;text-transform:uppercase;font-weight:600;color:var(--muted);transition:color .2s}
.langs .items span:hover{color:var(--violet)}

/* ---------- who ---------- */
.who-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line)}
.who{padding:28px;border-right:1px solid var(--line);position:relative;background:var(--panel)}
.who:last-child{border-right:none}
.who.main{background:var(--strong);color:var(--bg)}
.who.main p{color:color-mix(in srgb,var(--bg) 72%,transparent)}
.who .ico{width:44px;height:44px;margin-bottom:22px}
.who .ico rect{fill:currentColor}
.who .ico .a{fill:var(--violet)}
.who.main .ico .a{fill:var(--lime)}
.who h3{font-size:28px;margin-bottom:10px}
.who p{color:var(--muted);font-size:13px}
.who .ribbon{position:absolute;top:0;right:0;background:var(--lime);color:var(--lime-ink);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:4px 10px}
.who ul{list-style:none;margin-top:16px;display:grid;gap:6px;font-size:12px}
.who li::before{content:"+ ";color:var(--violet);font-weight:700}
.who.main li::before{color:var(--lime)}

/* ---------- how ---------- */
.how{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:start}
.how.wide{grid-template-columns:1fr}
.how.wide > div{max-width:900px}
.steps{display:grid;border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:96px 1fr auto;gap:18px;padding:22px 0;border-bottom:1px solid var(--line);align-items:start}
.step .num{font-family:var(--display);font-size:68px;line-height:.8;font-weight:600;color:transparent;-webkit-text-stroke:1.5px var(--text)}
.step:hover .num{color:var(--violet);-webkit-text-stroke-color:var(--violet)}
.step h3{font-size:24px;margin-bottom:6px}
.step p{color:var(--muted);font-size:13px}
.step .time{font-size:10px;text-transform:uppercase;letter-spacing:.06em;border:1px solid var(--line);padding:3px 8px;white-space:nowrap}
details.more{border:1px solid var(--line);margin-top:22px;background:var(--panel)}
details.more summary{list-style:none;cursor:pointer;padding:14px 18px;display:flex;justify-content:space-between;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
details.more summary::-webkit-details-marker{display:none}
details.more summary::after{content:"+";color:var(--violet);font-size:16px;line-height:1}
details.more[open] summary::after{content:"−"}
details.more ol{padding:0 18px 18px 38px;color:var(--muted);font-size:13px;display:grid;gap:6px}
details.more ol b{color:var(--text);font-weight:500}

/* ---------- compare ---------- */
.cmp{width:100%;border-collapse:collapse;font-size:13px}
.cmp th,.cmp td{text-align:left;padding:16px 18px;border-bottom:1px solid var(--line);vertical-align:top}
.cmp thead th{font-family:var(--display);font-size:22px;text-transform:uppercase;font-weight:600;border-bottom:1px solid var(--strong)}
.cmp thead th.us{background:var(--violet);color:var(--violet-ink)}
.cmp td:first-child{color:var(--muted);text-transform:uppercase;font-size:11px;letter-spacing:.05em;width:24%}
.cmp td.bad::before{content:"✕  ";color:var(--danger);font-weight:700}
.cmp td.good{background:color-mix(in srgb,var(--violet) 7%,transparent);font-weight:500}
.cmp td.good::before{content:"✓  ";color:var(--ok);font-weight:700}

/* ---------- status ---------- */
.status-wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.status-card{border:1px solid var(--strong);background:var(--panel-2)}
.s-head{display:flex;justify-content:space-between;padding:12px 18px;border-bottom:1px solid var(--line);font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.s-head span{color:var(--muted)}
.s-rows{padding:8px 18px}
.s-row{display:grid;grid-template-columns:150px 1fr 110px;gap:14px;align-items:center;padding:9px 0;font-size:12px;text-transform:uppercase;letter-spacing:.03em}
.s-row .bar{height:6px;background:var(--line);position:relative}
.s-row .bar i{position:absolute;inset:0 auto 0 0;background:var(--violet);animation:grow 1.4s ease both}
@keyframes grow{from{width:0}}
.s-row .val{text-align:right;font-weight:500}
.s-svc{display:flex;flex-wrap:wrap;gap:6px;padding:4px 18px 16px}
.s-ok{margin:0 18px 18px;background:var(--lime);color:var(--lime-ink);display:flex;justify-content:space-between;align-items:center;padding:10px 14px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;border:1px solid var(--strong)}
.s-ok i{width:10px;height:10px;border-radius:50%;background:var(--lime-ink);animation:blink 1.6s steps(1) infinite}
.guar{list-style:none;display:grid;gap:0;margin-top:26px;border-top:1px solid var(--line)}
.guar li{display:grid;grid-template-columns:32px 1fr;padding:14px 0;border-bottom:1px solid var(--line);font-size:13px}
.guar li b{display:block;font-size:13px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px}
.guar li span{color:var(--muted)}
.guar li::before{content:"■";color:var(--violet)}

/* ---------- pricing & products ---------- */
.price-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;border:1px solid var(--line)}
.p-card{padding:32px;border-right:1px solid var(--line);display:flex;flex-direction:column}
.p-card:last-child{border-right:none}
.p-card.free{background:var(--strong);color:var(--bg)}
.p-card .k{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--violet);font-weight:700}
.p-card.free .k{color:var(--lime)}
.p-card .big{font-family:var(--display);font-size:96px;font-weight:600;line-height:1;margin:18px 0 4px}
.p-card .big small{font-family:var(--mono);font-size:13px;font-weight:400;opacity:.65;margin-left:8px;text-transform:none}
.p-card ul{list-style:none;margin:22px 0 28px;border-top:1px solid color-mix(in srgb,currentColor 18%,transparent)}
.p-card li{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid color-mix(in srgb,currentColor 18%,transparent);font-size:12px}
.p-card li span:first-child{opacity:.65}
.p-card .btn{margin-top:auto;justify-content:space-between}
.p-card.free .btn{background:var(--lime);color:var(--lime-ink);border-color:var(--lime)}
.p-card.free .btn:hover{background:var(--violet);border-color:var(--violet);color:var(--violet-ink)}
.p-card h3{font-size:34px;margin:16px 0 8px}
.p-card p{color:var(--muted);font-size:13px}
.p-card.soon{background:repeating-linear-gradient(135deg,transparent 0 10px,color-mix(in srgb,var(--line) 45%,transparent) 10px 11px)}
.prod-list{display:grid;gap:10px;margin-top:22px}
.prod{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line);padding:12px 14px;background:var(--panel-2)}
.prod b{font-family:var(--display);font-size:22px;text-transform:uppercase;font-weight:600}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px}
.faq{border-top:1px solid var(--strong)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:44px 1fr 24px;padding:18px 0;font-size:14px;font-weight:500;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary .q{color:var(--violet);font-size:11px;font-weight:700}
.faq summary::after{content:"+";font-size:18px;color:var(--violet);text-align:right}
.faq details[open] summary::after{content:"−"}
.faq .a{padding:0 24px 20px 44px;color:var(--muted);font-size:13px}
.disk{margin-top:14px;border:1px solid var(--line);padding:14px;background:var(--panel-2)}
.disk .track{height:22px;border:1px solid var(--strong);position:relative;background:repeating-linear-gradient(90deg,transparent 0 9px,var(--line) 9px 10px)}
.disk .fill{position:absolute;inset:0 auto 0 0;background:var(--violet);transition:width .5s,background .3s;display:flex;align-items:center;justify-content:flex-end;padding-right:6px;font-size:10px;color:var(--violet-ink);font-weight:700}
.disk .fill.ro{background:var(--strong);color:var(--bg)}
.disk .fill.over{background:var(--danger);color:#fff}
.disk .m80{position:absolute;left:80%;top:-4px;bottom:-4px;width:1px;background:var(--danger)}
.disk .btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.disk .btns button{font-size:11px;border:1px solid var(--line);padding:4px 9px}
.disk .btns button.on{background:var(--strong);color:var(--bg);border-color:var(--strong)}
.disk .hint{margin-top:10px;font-size:12px;color:var(--text);min-height:20px}
.help{border:1px solid var(--line);padding:22px;margin-top:26px;background:var(--panel)}
.help b{display:block;font-family:var(--display);font-size:24px;text-transform:uppercase;font-weight:600;margin-bottom:6px}
.help p{color:var(--muted);font-size:13px;margin-bottom:16px}

/* ---------- final CTA strip ---------- */
.cta{display:grid;grid-template-columns:1fr 1.4fr 1fr;border-bottom:1px solid var(--line);font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.cta>div{padding:22px 24px;display:flex;align-items:center;gap:10px}
.cta .l{border-right:1px solid var(--line)}
.cta .l::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 1px var(--strong)}
.cta a.go{background:var(--violet);color:var(--violet-ink);justify-content:center;font-family:var(--display);font-size:clamp(24px,3vw,40px);font-weight:600;letter-spacing:.01em;padding:28px 24px;transition:background .2s}
.cta a.go:hover{background:var(--strong);color:var(--bg)}
.cta a.go .cur{animation:blink 1.1s steps(1) infinite}
.cta .r{border-left:1px solid var(--line);justify-content:space-between;color:var(--muted)}

/* ---------- footer ---------- */
footer{display:grid;grid-template-columns:1.2fr repeat(3,1fr) 1.3fr;gap:0;font-size:12px}
footer>div{padding:36px 24px;border-right:1px solid var(--line)}
footer>div:last-child{border-right:none}
footer h5{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:500;margin-bottom:14px}
footer a{display:block;margin-bottom:7px}
footer a:hover{color:var(--violet)}
footer .brand{padding:0;border:none;margin-bottom:14px}
footer .copy-r{color:var(--muted);text-transform:uppercase;font-size:11px;letter-spacing:.04em}
.node{display:flex;gap:16px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}
.node b{color:var(--violet)}
.node span{color:var(--faint)}
svg.dots{width:100%;height:auto;display:block}
svg.dots circle{fill:var(--line)}
svg.dots circle.hi{fill:var(--violet)}

/* ---------- порядок блоков ---------- */
#langs{order:2} #who{order:3} #products{order:4} #status{order:5} #how{order:6} #compare{order:7} #pricing{order:8} #faq{order:9}

/* ---------- new badge ---------- */
.new-badge{display:inline-flex;align-items:stretch;border:1px solid var(--strong);font-size:11px;text-transform:uppercase;letter-spacing:.05em;margin:-8px 0 26px;align-self:flex-start;transition:background .2s}
.new-badge b{background:var(--violet);color:var(--violet-ink);padding:6px 10px;font-weight:700}
.new-badge span{padding:6px 12px;background:var(--panel-2)}
.new-badge i{font-style:normal;padding:6px 10px;border-left:1px solid var(--strong);background:var(--lime);color:var(--lime-ink);font-weight:700}
.new-badge:hover span{background:var(--strong);color:var(--bg)}

/* ---------- products ---------- */
.prod-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line)}
.pc{padding:32px;border-right:1px solid var(--line);display:flex;flex-direction:column;position:relative;background:var(--panel)}
.pc:last-child{border-right:none}
.pc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.pc-top .k{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--violet);font-weight:700}
.pc h3{font-size:clamp(44px,5vw,72px);margin-bottom:10px}
.pc .what{font-size:14px;margin-bottom:6px;font-weight:500}
.pc p{color:var(--muted);font-size:13px;max-width:460px}
.pc ul{list-style:none;margin:20px 0 22px;display:grid;gap:7px;font-size:12px}
.pc li::before{content:"+ ";color:var(--violet);font-weight:700}
.pc .line{font-size:11px;background:var(--code-bg);color:var(--code-text);border:1px solid var(--strong);padding:10px 12px;margin-bottom:22px;word-break:break-all}
.pc .line .s{color:var(--lime)}
.pc .btn{margin-top:auto;align-self:flex-start}
.pc .ribbon{position:absolute;top:0;right:0;background:var(--lime);color:var(--lime-ink);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:4px 10px}
.prod-more{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;border:1px solid var(--line);border-top:none;padding:14px 32px;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);background:repeating-linear-gradient(135deg,transparent 0 10px,color-mix(in srgb,var(--line) 45%,transparent) 10px 11px)}
@media (max-width:760px){.prod-grid{grid-template-columns:1fr}.pc{border-right:none;border-bottom:1px solid var(--line);padding:24px 16px}.prod-more{padding:14px 16px}}

/* ---------- responsive ---------- */
@media (max-width:1060px){
  nav.menu,.sys{display:none}
  .hbar{justify-content:space-between}
  .hero-grid,.hero-c .hero-grid{grid-template-columns:1fr}
  .rail{display:none}
  .hero-copy{border-right:none;border-bottom:1px solid var(--line)}
  .how,.status-wrap,.faq-grid{grid-template-columns:1fr}
  .price-grid{grid-template-columns:1fr}
  .p-card{border-right:none;border-bottom:1px solid var(--line)}
  footer{grid-template-columns:1fr 1fr}
  footer>div{border-bottom:1px solid var(--line)}
}
@media (max-width:760px){
  .sec{padding:52px 16px}
  .hero-copy{padding:40px 16px}
  .hero-side{padding:28px 16px 44px}
  .langs{padding-left:16px;padding-right:16px}
  .langs .items{justify-content:flex-start;gap:6px 22px}
  .langs .items span{font-size:20px}
  .frame{overflow-x:clip}
  .who-grid,.scen{grid-template-columns:1fr}
  .who,.scen button{border-right:none;border-bottom:1px solid var(--line)}
  .hero-c .facts{grid-template-columns:1fr 1fr}
  .hero-c .facts div:nth-child(2){border-right:none}
  .hero-c .facts div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .hero-c .art{min-height:380px}
  .art{min-height:340px}
  .art .ov.coord{top:auto;bottom:40px}
  .step{grid-template-columns:64px 1fr}
  .step .num{font-size:52px}
  .step .time{grid-column:2;justify-self:start}
  .s-row{grid-template-columns:1fr 90px}
  .s-row .bar{grid-column:1/-1;order:3}
  .cmp thead th{font-size:16px}
  .cmp th,.cmp td{padding:12px 8px}
  .cmp td:first-child{width:30%}
  .cta{grid-template-columns:1fr}
  .cta .l,.cta .r{border:none}
  footer{grid-template-columns:1fr}
  footer>div{border-right:none}
  .brand{padding:0 14px}
  .hdr-actions{padding:0 10px;gap:6px}
  .hdr-actions .login{display:none}
  .console{box-shadow:5px 5px 0 var(--violet)}
}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}.c-log div{opacity:1}}