:root{
  --bg:#000;--panel:#0b0b0e;--panel2:#121217;--line:rgba(255,255,255,.09);--line2:rgba(255,255,255,.17);
  --text:#f5f5f7;--muted:#9d9daa;--dim:#6c6c78;--accent:#a78bfa;--accent2:#5eead4;--pink:#f0abfc;
  --ok:#4ade80;--warn:#fbbf24;--err:#f87171;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;color:var(--text);font:16px/1.6 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;min-height:100vh;
  background:radial-gradient(1100px 520px at 50% -140px,rgba(167,139,250,.34),transparent 70%),
             radial-gradient(700px 360px at 90% 18%,rgba(94,234,212,.07),transparent 70%),radial-gradient(640px 900px at -10% 55%,rgba(124,92,245,.34),transparent 70%),radial-gradient(640px 900px at 110% 80%,rgba(94,234,212,.24),transparent 70%),radial-gradient(500px 500px at 105% 8%,rgba(167,139,250,.14),transparent 70%),var(--bg);background-attachment:fixed}
a{color:var(--text);text-decoration:none;transition:color .2s}
a:hover{color:var(--accent)}
::selection{background:rgba(167,139,250,.4)}
.wrap{max-width:1060px;margin:0 auto;padding:0 20px}

/* шапка */
header.top{position:sticky;top:0;z-index:30;backdrop-filter:blur(16px) saturate(1.4);background:rgba(0,0,0,.55);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;height:62px;gap:14px}
.logo{font-weight:800;letter-spacing:-.5px;font-size:19px;position:relative;display:inline-block}
.logo i{font-style:normal;color:var(--accent);transition:color .3s}
.logo:hover{background:linear-gradient(100deg,#fff,#a78bfa,#5eead4,#f0abfc,#fff);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:flow 2.4s linear infinite;filter:drop-shadow(0 0 14px rgba(167,139,250,.45))}
.logo:hover i{color:transparent}
@keyframes flow{to{background-position:-300% 0}}
nav.links{display:flex;gap:6px;align-items:center;font-size:14px}
nav.links a.l{color:var(--muted);padding:7px 12px;border-radius:999px;transition:.2s}
nav.links a.l:hover,nav.links a.l.on{color:var(--text);background:rgba(255,255,255,.07)}
.lang{background:transparent;border:1px solid var(--line2);color:var(--text);border-radius:999px;padding:5px 12px;font:600 12px var(--mono);cursor:pointer;transition:.2s}
.lang:hover{background:rgba(255,255,255,.08)}

/* кнопки */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:999px;padding:12px 24px;font:600 15px Inter,sans-serif;cursor:pointer;background:var(--text);color:#000;transition:transform .2s var(--ease),box-shadow .2s,background .2s}
.btn:hover{background:#fff;color:#000;box-shadow:0 10px 30px rgba(167,139,250,.28)}
.btn:active{transform:translateY(0)}
.btn:after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(167,139,250,.35),transparent);transform:skewX(-20deg);transition:left .6s}
.btn:hover:after{left:140%}
.btn.ghost{background:rgba(255,255,255,.04);color:#fff;border-color:rgba(255,255,255,.32)}
.btn.ghost:hover{background:rgba(167,139,250,.18);color:#fff;border-color:#a78bfa;box-shadow:0 8px 24px rgba(167,139,250,.25)}
.btn.ghost:after{display:none}
.btn.violet{background:linear-gradient(100deg,#b69cff,#7c5cf5);color:#0a0a0a;box-shadow:0 6px 22px rgba(124,92,245,.35)}
.btn.violet:hover{background:linear-gradient(100deg,#b9a1ff,#8f72ff);color:#0a0a0a}
.btn.sm{padding:9px 18px;font-size:14px}
.btn.danger{background:transparent;color:var(--err);border-color:rgba(248,113,113,.35)}
.btn.danger:hover{background:rgba(248,113,113,.1);color:var(--err);box-shadow:none}
.btn[disabled]{opacity:.5;cursor:default;transform:none;box-shadow:none}
.row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* главная */
.hero{padding:96px 0 30px;text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:6px 15px;margin-bottom:24px;background:rgba(255,255,255,.02)}
.eyebrow b{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(74,222,128,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
.hero h1{font-size:clamp(40px,7.6vw,82px);line-height:1;letter-spacing:-.035em;word-spacing:.1em;margin:0 0 22px;font-weight:800}
.hero h1 em{font-style:normal;background:linear-gradient(100deg,#fff 0%,#a78bfa 35%,#5eead4 70%,#f0abfc 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:flow2 7s ease-in-out infinite alternate}
@keyframes flow2{to{background-position:100% 0}}
.hero p.lead{max-width:580px;margin:0 auto 32px;color:var(--muted);font-size:18.5px}

.mock{margin:56px auto 0;max-width:680px;border:1px solid var(--line2);border-radius:22px;background:linear-gradient(180deg,rgba(18,18,23,.92),rgba(8,8,11,.92));text-align:left;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.7),0 0 120px rgba(167,139,250,.1)}
.mock .bar{display:flex;align-items:center;gap:8px;padding:13px 18px;border-bottom:1px solid var(--line);font:500 12px var(--mono);color:var(--dim)}
.mock .dot{width:10px;height:10px;border-radius:50%;background:#2a2a31}
.mock .bar .st{margin-left:auto;display:flex;align-items:center;gap:7px;color:var(--warn);transition:color .4s}
.mock .bar .st:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--warn);animation:pulse 1.2s infinite;transition:background .4s}
.mock .bar .st .sd{display:none}
.mock .bar .st.on{color:var(--ok)}
.mock .bar .st.on:before{background:var(--ok);animation:pulse 2s infinite}
.mock .bar .st.on .sc{display:none}
.mock .bar .st.on .sd{display:inline}
.mock .rows{padding:6px}
.mock .r{display:flex;align-items:center;gap:13px;padding:11px 14px;border-radius:14px;transition:background .35s,transform .35s var(--ease);position:relative}
.mock .r .f{font-size:24px;width:30px;text-align:center}
.mock .r b{font-weight:650;font-size:15px;display:block;line-height:1.3}
.mock .r small{display:block;color:var(--dim);font-size:12.5px}
.mock .r .pill{margin-left:auto;font:500 12px var(--mono);color:var(--ok);border:1px solid rgba(74,222,128,.28);border-radius:999px;padding:2px 10px;min-width:64px;text-align:center;transition:.3s}
.mock .r .pill.slow{color:var(--warn);border-color:rgba(251,191,36,.3)}
.mock .r .pill.none{color:var(--dim);border-color:var(--line)}
.mock .r.run{background:rgba(255,255,255,.07)}
.mock .r.sel.ok{background:linear-gradient(100deg,rgba(74,222,128,.17),rgba(94,234,212,.07))}
.mock .r.sel.ok:before{background:linear-gradient(var(--ok),var(--accent2))}
.mock .r.sel.ok .tick{color:var(--ok)}
.mock .r.sel{background:linear-gradient(100deg,rgba(167,139,250,.16),rgba(94,234,212,.08));transform:scale(1.012)}
.mock .r.sel:before{content:"";position:absolute;left:0;top:14%;bottom:14%;width:3px;border-radius:3px;background:linear-gradient(var(--accent),var(--accent2))}
.mock .r .tick{opacity:0;color:var(--accent2);font-size:15px;transition:.3s}
.mock .r.sel .tick{opacity:1}
.note-mono{font:12px var(--mono);color:var(--dim);text-align:center;margin-top:12px}

/* секции */
section{padding:76px 0}
.kick{font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}
h2{font-size:clamp(28px,4.4vw,44px);letter-spacing:-1.3px;line-height:1.08;margin:0 0 12px;font-weight:800}
.sub{color:var(--muted);max-width:580px;margin:0 0 36px}
.grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.g3{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.cell{background:var(--bg);padding:28px;transition:background .3s;position:relative}
.cell:hover{background:rgba(167,139,250,.05)}
.cell .ic{font-size:30px;margin-bottom:14px;display:inline-block;transition:transform .35s var(--ease)}
.cell:hover .ic{transform:scale(1.18) rotate(-6deg)}
.cell h3{margin:0 0 6px;font-size:18px;letter-spacing:-.3px}
.cell p{margin:0;color:var(--muted);font-size:15px}
.cell p a{color:var(--accent)}

/* страны */
.servers{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.chip{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:999px;padding:9px 18px;font-size:14.5px;background:var(--panel);transition:border-color .3s,transform .3s var(--ease);cursor:default;isolation:isolate}
.chip:before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .35s;background:var(--g)}
.chip:hover{transform:translateY(-3px);border-color:var(--line2)}
.chip:hover:before{opacity:.92}
.chip:hover{color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.55);border-color:rgba(255,255,255,.35);box-shadow:0 8px 26px rgba(0,0,0,.35)}
.chip[data-c=de]{--g:linear-gradient(100deg,#1a1a1a,#e00000,#ffcc00)}
.chip[data-c=pl]{--g:linear-gradient(100deg,#e8e8e8,#e0103a)}
.chip[data-c=fi]{--g:linear-gradient(100deg,#e8e8e8,#1d5cf0)}
.chip[data-c=nl]{--g:linear-gradient(100deg,#d4202f,#e8e8e8,#1f4fc4)}
.chip[data-c=us]{--g:linear-gradient(100deg,#d4203a,#e8e8e8,#2b3a9e)}
.chip[data-c=ru]{--g:linear-gradient(100deg,#e8e8e8,#1d5cf0,#e01f1f)}

/* тарифы */
.incl{display:flex;flex-wrap:wrap;gap:10px 22px;margin:0 0 26px;color:var(--muted);font-size:15px}
.incl span{display:inline-flex;gap:8px;align-items:center}
.plans{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.plan{position:relative;border:1px solid var(--line);border-radius:22px;padding:28px;background:linear-gradient(180deg,var(--panel2),var(--panel));transition:transform .3s var(--ease),border-color .3s;display:flex;flex-direction:column}
.plan:hover{border-color:rgba(255,255,255,.28);box-shadow:0 14px 40px rgba(124,92,245,.12)}
.plan.best{border:1px solid transparent;background:linear-gradient(180deg,var(--panel2),var(--panel)) padding-box,conic-gradient(from var(--a,0deg),#a78bfa,#5eead4,#f0abfc,#a78bfa) border-box;animation:spin 6s linear infinite;box-shadow:0 0 70px rgba(167,139,250,.14)}
@property --a{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes spin{to{--a:360deg}}
.plan .tag{position:absolute;top:-12px;left:26px;background:linear-gradient(100deg,#a78bfa,#5eead4);color:#05050a;font:700 11px var(--mono);padding:4px 12px;border-radius:999px;letter-spacing:.05em}
.plan h3{margin:0;font-size:15px;color:var(--muted);font-weight:500;display:flex;align-items:center;gap:8px}
.price{display:flex;align-items:baseline;gap:8px;margin:12px 0 2px}
.price b{font-size:48px;letter-spacing:-1.8px;line-height:1;font-weight:800}
.price span{color:var(--muted);font-size:14px}
.plan .per{color:var(--dim);font-size:13.5px;min-height:22px;margin-bottom:6px}
.plan .usd{color:var(--dim);font:12px var(--mono);margin-bottom:18px;min-height:18px}
.plan .btn{margin-top:auto;width:100%}
.plan p.d{color:var(--muted);font-size:14.5px;margin:8px 0 18px}
.plan.free{background:linear-gradient(180deg,rgba(94,234,212,.07),var(--panel))}
.cur{margin-top:20px;border:1px solid var(--line);border-radius:16px;padding:16px 18px;background:rgba(255,255,255,.02);color:var(--muted);font-size:14.5px;display:flex;gap:12px;align-items:flex-start}
.cur b{color:var(--text)}
.cur>div{min-width:0;flex:1;overflow-wrap:anywhere}
.cur .ci{flex:none;font-size:18px;line-height:1.4}

/* шаги / FAQ */
.steps{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:20px;overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.faq{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--panel)}
details{border-bottom:1px solid var(--line);padding:0 22px}
details:last-child{border:0}
summary{cursor:pointer;font-weight:600;padding:18px 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";color:var(--dim);font:300 26px var(--mono);transition:transform .3s var(--ease)}
details[open] summary:after{transform:rotate(45deg);color:var(--accent)}
details p{margin:0 0 20px;color:var(--muted);max-width:720px}
details p a{color:var(--accent);text-decoration:underline;text-decoration-color:rgba(167,139,250,.4)}
.help{margin-top:22px;border:1px solid var(--line);border-radius:20px;padding:26px;display:flex;gap:18px;justify-content:space-between;align-items:center;flex-wrap:wrap;background:linear-gradient(100deg,rgba(167,139,250,.1),rgba(94,234,212,.05))}
.help h3{margin:0 0 4px;font-size:19px}
.help p{margin:0;color:var(--muted);font-size:15px}

/* подвал */
footer{border-top:1px solid var(--line);padding:34px 0 54px;color:var(--dim);font-size:14px;margin-top:30px}
footer .wrap{display:flex;gap:22px;flex-wrap:wrap;justify-content:space-between}
footer nav{display:flex;gap:20px;flex-wrap:wrap}
footer a{color:var(--muted)}
footer a:hover{color:var(--text)}
.draft{background:#17130a;color:#ffd27a;text-align:center;font:500 12px var(--mono);padding:7px}
.notice{background:rgba(255,200,87,.07);border:1px solid rgba(255,200,87,.25);color:#ffd27a;border-radius:14px;padding:13px 16px;font-size:14.5px;margin:0 0 18px}

/* установка */
.os-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 24px}
.os-tabs button{background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:9px 18px;font:500 14px Inter,sans-serif;cursor:pointer;transition:.2s}
.os-tabs button:hover{color:var(--text);border-color:var(--line2)}
.os-tabs button.on{background:var(--text);color:#000;border-color:var(--text)}
.os{display:none}.os.on{display:block;animation:fade .35s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.opt{border:1px solid var(--line);border-radius:18px;padding:22px 24px;margin-bottom:12px;background:var(--panel);display:flex;gap:18px;justify-content:space-between;align-items:center;flex-wrap:wrap;transition:border-color .25s,transform .25s var(--ease)}
.opt:hover{border-color:var(--line2)}
.opt.rec{border-color:rgba(167,139,250,.35);background:linear-gradient(100deg,rgba(167,139,250,.08),var(--panel))}
.opt .t{flex:1;min-width:240px}
.opt h3{margin:0 0 5px;font-size:17.5px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.opt p{margin:0;color:var(--muted);font-size:14.5px}
.star{font:600 11.5px Inter,sans-serif;color:var(--accent);background:rgba(167,139,250,.14);border-radius:999px;padding:3px 10px}
ol.list{counter-reset:s;list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:18px;background:var(--panel);overflow:hidden}
ol.list li{counter-increment:s;padding:18px 20px 18px 66px;position:relative;border-bottom:1px solid var(--line)}
ol.list li:last-child{border:0}
ol.list li:before{content:counter(s);position:absolute;left:20px;top:18px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:600 13px var(--mono);color:var(--accent);background:rgba(167,139,250,.13)}
ol.list li b{display:block}
ol.list li span.s{display:block;color:var(--muted);font-size:14.5px;margin-top:2px}
.kbd{font:12.5px var(--mono);background:rgba(255,255,255,.08);border-radius:6px;padding:2px 7px}

/* окна */
dialog{border:1px solid var(--line2);border-radius:22px;padding:28px;max-width:450px;width:calc(100% - 28px);background:#0d0d11;color:var(--text);box-shadow:0 50px 120px rgba(0,0,0,.85)}
dialog[open]{animation:pop .3s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
dialog::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(5px)}
dialog h3{margin:0 0 4px;font-size:21px;letter-spacing:-.4px}
dialog .sum{color:var(--muted);font-size:14.5px;margin-bottom:18px}
label.f{display:block;font:500 12px var(--mono);color:var(--muted);margin:0 0 7px;letter-spacing:.05em}
input[type=email],input[type=text],input[type=password]{width:100%;background:#000;border:1px solid var(--line2);border-radius:13px;padding:14px 15px;color:var(--text);font:16px Inter,sans-serif;outline:none;transition:border-color .2s,box-shadow .2s}
input[type=email]:focus,input[type=text]:focus,input[type=password]:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(167,139,250,.14)}
.chk{display:flex;gap:10px;align-items:flex-start;margin:16px 0;font-size:13.5px;color:var(--muted);line-height:1.5}
.chk input{margin-top:3px;accent-color:var(--accent)}
.chk a{color:var(--text);text-decoration:underline;text-decoration-color:var(--line2)}
.err{color:var(--err);font-size:14px;min-height:20px;margin:0 0 8px}
.hp{position:absolute;left:-9999px;opacity:0}
.small{color:var(--dim);font-size:12.5px;margin:14px 0 0}

/* спасибо + кабинет */
.ty{max-width:600px;margin:64px auto 40px;text-align:center}
.spin{width:36px;height:36px;border:3px solid var(--line2);border-top-color:var(--accent);border-radius:50%;margin:0 auto 20px;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.claim{display:flex;gap:12px;align-items:center;justify-content:center;border:1px dashed var(--line2);border-radius:16px;padding:14px;margin:14px 0;font:700 24px var(--mono);letter-spacing:.16em}
.card{border:1px solid var(--line);border-radius:20px;padding:22px 24px;background:var(--panel);text-align:left;margin:14px 0}
.card h3{margin:0 0 6px;font-size:16.5px}
.card p{margin:0;color:var(--muted);font-size:14.5px}
.pagehead{padding:56px 0 8px}
.dash{column-width:310px;column-gap:16px;margin-top:22px}
.dash>*{break-inside:avoid;margin:0 0 16px!important}
.dash>.wide,.dash>.help{column-span:all}
.dash .card{margin:0}
.dash .wide{grid-column:1/-1}
.statrow{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.ring{--p:0;width:118px;height:118px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--accent) calc(var(--p)*1%),rgba(255,255,255,.07) 0);position:relative;flex:none;transition:--p 1s}
.ring:before{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--panel)}
.ring span{position:relative;font:800 26px Inter,sans-serif;letter-spacing:-1px;text-align:center;line-height:1.1}
.ring span small{display:block;font:500 11px var(--mono);color:var(--dim);letter-spacing:.04em}
.badge2{display:inline-flex;align-items:center;gap:7px;font:600 12.5px Inter,sans-serif;border-radius:999px;padding:4px 12px;border:1px solid var(--line2)}
.badge2.ok{color:var(--ok);border-color:rgba(74,222,128,.35);background:rgba(74,222,128,.08)}
.badge2.bad{color:var(--err);border-color:rgba(248,113,113,.35);background:rgba(248,113,113,.08)}
.badge2.pause{color:var(--warn);border-color:rgba(251,191,36,.35);background:rgba(251,191,36,.08)}
.bar2{height:8px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;margin:10px 0 4px}
.bar2 i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width 1s var(--ease)}
.dev{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.dev:last-child{border:0}
.dev .di{font-size:24px}
.dev .dn{flex:1;min-width:0}
.dev .dn b{display:block;font-size:15px;line-height:1.35}
.dev .dn small{color:var(--dim);font-size:12.5px}
table.pay{width:100%;border-collapse:collapse;font-size:14.5px}
table.pay td,table.pay th{padding:11px 4px;border-bottom:1px solid var(--line);text-align:left}
table.pay th{color:var(--dim);font:500 12px var(--mono);letter-spacing:.05em}
table.pay tr:last-child td{border:0}
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,30px);background:#17171c;border:1px solid var(--line2);border-radius:14px;padding:12px 20px;font-size:14.5px;opacity:0;pointer-events:none;transition:.35s var(--ease);z-index:99;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.tabs2{display:flex;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:4px;margin:0 0 20px;width:max-content;max-width:100%}
.tabs2 button{background:transparent;border:0;color:var(--muted);border-radius:999px;padding:9px 18px;font:500 14px Inter,sans-serif;cursor:pointer;transition:.2s}
.tabs2 button.on{background:var(--text);color:#000}
.pane{display:none}.pane.on{display:block;animation:fade .3s var(--ease)}

/* анимация появления */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}

/* язык */
html:not(.en) [data-en]{display:none!important}
html.en [data-ru]{display:none!important}

@media(max-width:620px){
  nav.links a.l.hs{display:none}
  .hero{padding-top:58px}
  section{padding:54px 0}
  .mock .r small{display:none}
  .ring{width:100px;height:100px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
}

.plan.wide{flex-direction:row;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}
.plan.wide .wtxt{flex:1;min-width:260px}
.plan.wide .btn{width:auto;margin-top:0;min-width:200px}

.seg{display:flex;gap:6px;background:#000;border:1px solid var(--line);border-radius:999px;padding:4px;margin-bottom:18px}
.seg button{flex:1;border:0;background:transparent;color:var(--muted);font:600 14.5px Inter,sans-serif;padding:10px;border-radius:999px;cursor:pointer;transition:.2s}
.seg button.on{background:var(--text);color:#000}
.auth form{display:flex;flex-direction:column;gap:6px}
.auth label.f{margin-top:8px}
.auth-links{display:flex;justify-content:center;gap:18px;margin-top:12px;font-size:14px}
.auth-links a{color:var(--muted);text-decoration:underline}
.auth-links a:hover{color:var(--text)}

.hero-cta{gap:12px;flex-wrap:wrap}
.hero-cta .btn.ghost{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.28)}
.hero-cta .btn.ghost:hover{background:linear-gradient(100deg,#b69cff,#7c5cf5);border-color:transparent;color:#0a0a0a;box-shadow:0 10px 30px rgba(124,92,245,.4)}

.plan .btn:hover{transform:none}
.plan .btn:after{display:none}
.regwrap{padding:4px 22px 22px}
.reg .rs{display:flex;gap:22px;align-items:center;justify-content:space-between;flex-wrap:wrap;border-top:1px solid var(--line);padding:18px 0}
.reg .rs:first-child{border-top:0}
.reg .rt{display:flex;gap:14px;flex:1;min-width:240px}
.reg .n{flex:none;width:30px;height:30px;border-radius:50%;background:rgba(167,139,250,.16);color:var(--accent);font:600 14px var(--mono);display:grid;place-items:center}
.reg .rt b{display:block;margin-bottom:3px}
.reg .rt p{margin:0;color:var(--muted);font-size:14.5px;padding:0}
.ios{width:250px;flex:none;background:#1c1c1e;border:1px solid #2c2c2e;border-radius:18px;padding:10px 10px 12px;font:14px -apple-system,Inter,sans-serif}
.ios .it{text-align:center;font-weight:600;color:#fff;padding:4px 0 10px;font-size:14px}
.ios .ir{display:flex;justify-content:space-between;gap:8px;align-items:center;background:#2c2c2e;color:#e5e5ea;padding:11px 12px;border-radius:10px;margin-bottom:4px}
.ios .ir i{color:#6e6e73;font-style:normal}
.ios .ir.hl{outline:2px solid #a78bfa;outline-offset:-2px;background:rgba(167,139,250,.18);color:#fff}
@media(max-width:620px){.ios{width:100%}}

html,body{overflow-x:hidden}
@media(max-width:620px){
  header.top .wrap{gap:6px}
  .logo{font-size:17px}
  nav.links{gap:0;font-size:13px}
  nav.links a.l{padding:6px 7px}
  nav.links .lang{padding:5px 9px;margin-left:4px;font-size:12px}
}
.shot{flex:none;width:230px;border-radius:22px;border:1px solid #2c2c2e;overflow:hidden;background:#f2f2f7}
.shot img{display:block;width:100%;height:auto}
@media(max-width:620px){.shot{width:min(260px,100%)}}

.swatches{display:flex;gap:10px;flex-wrap:wrap}
.sw{display:flex;align-items:center;gap:9px;border:1px solid var(--line2);background:rgba(255,255,255,.03);color:var(--text);border-radius:999px;padding:8px 14px 8px 9px;font:600 14px Inter,sans-serif;cursor:pointer;transition:.2s}
.sw i{width:20px;height:20px;border-radius:50%;display:block;box-shadow:0 0 0 2px rgba(255,255,255,.12) inset}
.sw:hover{border-color:rgba(255,255,255,.4)}
.sw.on{border-color:var(--accent);background:rgba(167,139,250,.14)}

.notice.ok{background:rgba(94,230,160,.08);border-color:rgba(94,230,160,.3);color:#7ff0b4}

.devb{display:inline-flex;align-items:center;gap:6px;margin-left:8px;padding:3px 10px;border:1px solid rgba(255,200,87,.35);border-radius:999px;font:600 11px var(--mono);letter-spacing:.04em;color:#ffd27a;text-transform:uppercase;vertical-align:middle}
.devb i{width:7px;height:7px;border-radius:50%;background:#ffc857;animation:devp 1.6s ease-in-out infinite}
@keyframes devp{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}

nav.links a.l.cta{color:#fff;font-weight:600;background:rgba(167,139,250,.12);border:1px solid rgba(167,139,250,.6);padding:6px 14px}
nav.links a.l.cta:hover,nav.links a.l.cta.on{color:#0a0a0a;background:linear-gradient(100deg,#b69cff,#7c5cf5);border-color:transparent;box-shadow:0 6px 20px rgba(124,92,245,.35)}
@media(max-width:560px){nav.links a.l.cta{padding:5px 11px}}

/* голографические акценты: цвет и блик зависят от прокрутки, курсора и наклона телефона */
:root{--hx:30%;--sx:-30%;
  --holo:linear-gradient(115deg,#ffffff 0%,#c4b5fd 14%,#7dd3fc 28%,#f0abfc 42%,#fde68a 54%,#86efac 66%,#a78bfa 80%,#ffffff 100%);
  --sheen:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.85) 50%,transparent 62%)}
.hero h1,.pagehead h2{
  background:var(--sheen) var(--sx) 0/260% 100% no-repeat,var(--holo) var(--hx) 0/320% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.hero h1{filter:drop-shadow(0 0 24px rgba(167,139,250,.25))}
.hero h1 em{background:none;animation:none;color:inherit;-webkit-text-fill-color:inherit}
.plan .tag{background:var(--sheen) var(--sx) 0/260% 100% no-repeat,var(--holo) var(--hx) 0/320% 100%;color:#07050f}
.plan.best{box-shadow:0 0 0 1px rgba(196,181,253,.35),0 12px 40px rgba(124,92,245,.18)}
.badge2.ok,.kick{background:var(--holo) var(--hx) 0/320% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

@media(max-width:640px){
  footer{padding:26px 0 calc(40px + env(safe-area-inset-bottom));font-size:13.5px}
  footer .wrap{flex-direction:column;flex-wrap:nowrap;gap:20px}
  footer .wrap>div:first-child{line-height:1.7}
  footer nav{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px}
}

.auth .err:empty,#authform .err:empty{display:none}

.ring.inf{background:conic-gradient(from var(--hd,0deg),#c4b5fd,#7dd3fc,#f0abfc,#fde68a,#86efac,#a78bfa,#c4b5fd);box-shadow:0 0 28px rgba(167,139,250,.25)}

.dash>.wide:not(:first-child),.dash>.help{margin-top:16px!important}

/* ---------- админ-панель ---------- */
.adtabs{display:flex;gap:6px;margin:22px 0 18px;padding:5px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.03);overflow-x:auto;width:fit-content;max-width:100%}
.adtabs button{border:0;background:none;color:var(--muted);font:600 14px Inter,sans-serif;padding:9px 18px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:.2s}
.adtabs button:hover{color:var(--text)}
.adtabs button.on{background:var(--text);color:#000}
.stats{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.scard{border:1px solid var(--line);border-radius:20px;background:var(--panel);padding:18px 20px;display:flex;flex-direction:column;gap:4px;transition:border-color .2s}
.scard:hover{border-color:var(--line2)}
.scard.accent{border-color:rgba(167,139,250,.4);background:linear-gradient(160deg,rgba(167,139,250,.14),var(--panel) 60%)}
.scard .sl{font:600 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.scard .sv{font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1.15}
.scard .ss{font-size:13px;color:var(--muted)}
.adgrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-top:14px;align-items:start}
.adgrid .card h3{margin:0 0 14px;font-size:16px}
.adgrid .card h3+.pr,.adgrid .card .pr+h3{margin-top:18px}
.bars{display:flex;align-items:flex-end;gap:5px;height:130px;padding-top:6px}
.bcol{flex:1;height:100%;display:flex;align-items:flex-end;cursor:default}
.bars .bar{display:block;width:100%;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#c4b5fd,#7c5cf5);min-height:3px;opacity:.9;transition:opacity .2s,transform .2s}
.bcol:hover .bar{opacity:1;transform:scaleY(1.03)}
.axis{display:flex;justify-content:space-between;font:500 11px var(--mono);color:var(--dim);margin-top:8px}
.seg2{display:flex;height:12px;border-radius:99px;overflow:hidden;background:rgba(255,255,255,.06)}
.seg2 i{display:block;height:100%}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:12px 0 4px;font-size:13px;color:var(--muted)}
.legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px}
.plist,.sect{display:flex;flex-direction:column}
.pr{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.pr:last-child{border-bottom:0}
.pr span{color:var(--muted);min-width:0;overflow-wrap:anywhere}
.pr b{font-weight:700;white-space:nowrap}
.pr.link{cursor:pointer}.pr.link:hover span{color:var(--text)}
.adbar{display:flex;flex-direction:column;gap:12px;margin-bottom:14px}
.adbar input{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:13px 16px;color:var(--text);font:15px Inter,sans-serif}
.adbar input:focus{outline:0;border-color:var(--accent)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
#ad-app .chip{border:1px solid var(--line2);background:rgba(255,255,255,.03);color:var(--muted);border-radius:999px;padding:6px 14px;font:600 13px Inter,sans-serif;cursor:pointer;transition:.2s}
#ad-app .chip:hover{color:var(--text);border-color:var(--accent)}
#ad-app .chip.on{background:var(--text);color:#000;border-color:var(--text)}
.ulist{border:1px solid var(--line);border-radius:20px;background:var(--panel);overflow:hidden}
.ulist>p{padding:18px 20px;margin:0}
.urow{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .15s}
.urow:last-child{border-bottom:0}
.urow:hover{background:rgba(167,139,250,.07)}
.uname{min-width:0;display:flex;flex-direction:column}
.uname b{overflow-wrap:anywhere}
.uname small,.umeta small{color:var(--dim);font-size:12.5px;overflow-wrap:anywhere}
.umeta{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none}
.apill{display:inline-block;font:700 11.5px var(--mono);letter-spacing:.03em;padding:3px 10px;border-radius:99px;border:1px solid var(--line2);color:var(--muted);margin-left:4px}
.apill.ok{color:#4ade80;border-color:rgba(74,222,128,.4);background:rgba(74,222,128,.08)}
.apill.bad{color:#f87171;border-color:rgba(248,113,113,.4);background:rgba(248,113,113,.08)}
.apill.dim{color:var(--dim)}
.apill.holo{border-color:rgba(196,181,253,.5);background:var(--holo) var(--hx) 0/320% 100%;color:#07050f}
.pager{display:flex;align-items:center;justify-content:center;gap:14px;margin:16px 0}
.pager .btn[disabled]{opacity:.35;pointer-events:none}
#ad-dlg{width:min(620px,calc(100vw - 24px));max-height:calc(100vh - 40px);border:1px solid var(--line2);border-radius:24px;background:var(--panel);color:var(--text);padding:0}
#ad-dlg::backdrop{background:rgba(0,0,0,.65);backdrop-filter:blur(4px)}
#ad-dlg-body{padding:22px 24px 26px}
#ad-dlg .dh{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
#ad-dlg .dh h3{margin:0;font-size:22px;overflow-wrap:anywhere}
#ad-dlg .dh small{color:var(--dim);font-family:var(--mono)}
.kvs{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.kv{display:flex;flex-direction:column;padding:9px 0;border-bottom:1px solid var(--line);min-width:0}
.kv span{font:600 11px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--dim)}
.kv b{font-weight:600;font-size:14.5px;overflow-wrap:anywhere}
#ad-dlg .sect{margin-top:22px}
#ad-dlg h4{margin:0 0 8px;font-size:15px}
.grant{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.grant input{width:90px;background:#000;border:1px solid var(--line2);border-radius:12px;padding:9px 12px;color:var(--text);font:15px Inter,sans-serif}
@media(max-width:560px){.kvs{grid-template-columns:1fr}.urow{padding:13px 14px}#ad-dlg-body{padding:18px 16px 22px}}

/* админка: графики, управление, серверы, анимации */
.bars{gap:6px;height:150px;padding-top:26px}
.bcol{position:relative;flex-direction:column;justify-content:flex-end;align-items:stretch;padding-bottom:34px}
.bcol .bar{height:var(--h,3%);transform-origin:bottom;animation:grow .7s var(--ease) both;display:block;width:100%}
@keyframes grow{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:.9}}
.blab{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;line-height:1.1;color:var(--dim)}
.blab b{font:600 11px var(--mono);color:var(--muted)}.blab small{font:500 9.5px var(--mono);text-transform:uppercase}
.bcol.today .blab b{color:var(--text)}.bcol.today .bar{filter:brightness(1.25)}
.btip{position:absolute;bottom:calc(100% - 26px);left:50%;transform:translate(-50%,6px);background:#000;border:1px solid var(--line2);border-radius:8px;padding:3px 8px;font:600 11.5px var(--mono);white-space:nowrap;opacity:0;pointer-events:none;transition:.18s;z-index:2}
.bcol:hover .btip{opacity:1;transform:translate(-50%,0)}
.bars{height:190px}
.mrow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.mrow>span{color:var(--muted);font-size:14px;flex:1 1 180px}
.mrow.col{flex-direction:column;align-items:stretch}
.mctl{display:flex;gap:8px;align-items:center}
.mctl input,#ad-dlg textarea,.promoform input,.promoform select{background:#000;border:1px solid var(--line2);border-radius:12px;padding:9px 12px;color:var(--text);font:15px Inter,sans-serif;width:90px}
#ad-dlg textarea{width:100%;resize:vertical}
.promoform select{width:auto}
.srv{gap:6px}.srvtop{display:flex;align-items:center;gap:10px;font-size:17px;margin-bottom:4px}
.srvtop .dot{width:10px;height:10px;border-radius:50%;background:#52525b;flex:none}
.srvtop .dot.ok{background:#4ade80;box-shadow:0 0 0 0 rgba(74,222,128,.6);animation:pulse 2s infinite}
.srvtop .dot.bad{background:#f87171}
.srv.down{border-color:rgba(248,113,113,.45)}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
.fadein{animation:fadeup .45s var(--ease) both}
@keyframes fadeup{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.skel{display:grid;gap:12px}
.skel i{display:block;height:74px;border-radius:18px;background:linear-gradient(100deg,rgba(255,255,255,.04) 30%,rgba(255,255,255,.1) 50%,rgba(255,255,255,.04) 70%) 0 0/300% 100%;animation:shimmer 1.4s linear infinite}
@keyframes shimmer{to{background-position:-300% 0}}
#ad-dlg[open]{animation:dlgin .32s var(--ease)}
@keyframes dlgin{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}

/* ---------- плавные анимации ---------- */
@property --p{syntax:'<number>';inherits:false;initial-value:0}
@view-transition{navigation:auto}
::view-transition-old(root){animation:.18s ease both vt-out}
::view-transition-new(root){animation:.32s var(--ease) both vt-in}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}
body{animation:pagein .6s var(--ease) both}
@keyframes pagein{from{opacity:0}to{opacity:1}}
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .rv.in{opacity:1;transform:none}
header.top{transition:background .3s,box-shadow .3s,border-color .3s}
header.top.scrolled{background:rgba(0,0,0,.78);box-shadow:0 8px 30px rgba(0,0,0,.35)}
.card:hover,.scard:hover,.cell:hover,.plan:not(.best):hover{background-image:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(167,139,250,.11),transparent 62%)}
.card,.scard,.cell,.plan{transition:border-color .3s,box-shadow .3s}
.btn{transition:transform .18s var(--ease),box-shadow .25s,background .25s,color .25s,border-color .25s,opacity .25s}
.btn:active{transform:scale(.97)}
#ad-app .chip:active,.adtabs button:active,.sw:active{transform:scale(.96)}
:root{interpolate-size:allow-keywords}
details::details-content{overflow:clip;block-size:0;opacity:0;transition:block-size .38s var(--ease),opacity .3s,content-visibility .38s allow-discrete}
details[open]::details-content{block-size:auto;opacity:1}
.toast{transition:opacity .35s var(--ease),transform .35s var(--ease)}
@media(prefers-reduced-motion:reduce){body{animation:none}.js .rv{opacity:1;transform:none;transition:none}*{scroll-behavior:auto!important}}

/* страница пользователя в админке */
.uhead{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:14px}
.avatar{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;font:800 28px Inter,sans-serif;color:#07050f;background:linear-gradient(135deg,#c4b5fd,#7dd3fc);flex:none}
.uhmid{flex:1;min-width:220px}.uhmid h2{margin:0 0 8px;font-size:26px;overflow-wrap:anywhere;background:none;-webkit-text-fill-color:currentColor;color:var(--text)}
.uhsub{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.uhsub .apill{margin:0}
.uhsub a.chip{display:inline-block}
.uhright{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.ugrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
.ugrid .span2{grid-column:span 2}
.ublock h3{margin:0 0 14px;font-size:16px}
.ublock h4{margin:18px 0 8px;font-size:14px;color:var(--muted)}
.ublock.danger{border-color:rgba(248,113,113,.3);background:linear-gradient(160deg,rgba(248,113,113,.07),var(--panel) 60%)}
.bigrow{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.bigdays{min-width:120px;text-align:center;padding:14px 18px;border-radius:20px;border:1px solid var(--line2);background:rgba(167,139,250,.08)}
.bigdays b{display:block;font-size:44px;line-height:1;letter-spacing:-.04em}
.bigdays small{color:var(--muted);font-size:12px}
.bigi{flex:1;min-width:220px}
.trow{display:flex;align-items:center;gap:12px;padding:7px 0;font-size:14px}
.trow>span{width:70px;color:var(--muted);flex:none}.trow>b{min-width:80px;text-align:right}
.tbar{flex:1;height:8px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.tbar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#7c5cf5,#7dd3fc);transition:width .9s var(--ease)}
.pw{display:flex;gap:8px;align-items:center}
.pw a.chip{padding:3px 10px;font-size:12px}
.mctl select,.mrow>select,.mrow select{background:#000;border:1px solid var(--line2);border-radius:12px;padding:9px 12px;color:var(--text);font:14px Inter,sans-serif;max-width:100%}
.prog{height:8px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden;margin-top:14px}
.prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,#7c5cf5,#86efac);transition:width .6s var(--ease)}
.card textarea{background:#000;border:1px solid var(--line2);border-radius:12px;padding:10px 12px;color:var(--text);font:15px Inter,sans-serif;width:100%;resize:vertical}
@media(max-width:980px){.ugrid{grid-template-columns:1fr 1fr}.ugrid .span2{grid-column:span 2}}
@media(max-width:640px){.ugrid{grid-template-columns:1fr}.ugrid .span2{grid-column:auto}.uhright{align-items:flex-start;width:100%}}

.ugrid{display:block;column-width:300px;column-gap:14px}
.ugrid>.ublock{break-inside:avoid;margin:0 0 14px!important;display:block}
.ugrid .span2{column-span:none}
.mctl{flex-wrap:wrap;justify-content:flex-end}
.mrow{min-width:0}