:root{--bg:#0E0A19;--bg2:#1A1429;--line:#2B2342;--ac:#B09CFF;--ac2:#8B6CF0;--hi:#D3C8FF;--tx:#ECEBF3;--mut:#A39EB8;--r:10px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(900px 500px at 85% -5%,#2a1d52 0,transparent 60%),var(--bg);color:var(--tx);font:400 17px/1.6 Onest,system-ui,sans-serif}
h1,h2,h3,.logo{font-family:Geologica,Onest,sans-serif;letter-spacing:-.01em;line-height:1.15;margin:0}
a{color:var(--hi)}a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--ac);outline-offset:3px;border-radius:6px}
.top{display:flex;align-items:center;gap:24px;max-width:1160px;margin:0 auto;padding:18px 16px}
.logo{display:flex;gap:10px;align-items:center;font-weight:700;font-size:20px;color:var(--tx);text-decoration:none}
nav{display:flex;gap:20px;margin-left:auto;flex-wrap:wrap}nav a,.lang{color:var(--mut);text-decoration:none;font-size:15px}nav a:hover,.lang:hover{color:var(--tx)}
.lang{border:1px solid var(--line);padding:4px 12px;border-radius:999px}
main,footer{max-width:1160px;margin:0 auto;padding:0 16px}
section{padding:72px 0}h2{font-size:clamp(26px,3.4vw,38px);margin-bottom:12px}.sub{color:var(--mut);max-width:62ch;margin:0 0 28px}
.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:center;padding-top:40px}
.hero h1{font-size:clamp(34px,5vw,58px);font-weight:700}.lead{color:var(--mut);font-size:19px;max-width:48ch;margin:20px 0 28px}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin:0}
.btn{display:inline-block;background:var(--ac);color:#1a1033;font-weight:600;padding:12px 22px;border-radius:var(--r);text-decoration:none;transition:background .15s}
.btn:hover{background:var(--hi)}.btn.ghost{background:transparent;color:var(--hi);border:1px solid var(--line)}.btn.ghost:hover{border-color:var(--ac)}
.shot{margin:0;position:relative}.shot img{width:100%;height:auto;border-radius:12px;border:1px solid var(--line);box-shadow:0 30px 80px #000a,0 0 0 1px #8b6cf022;position:relative}
.orbit{position:absolute;right:-9%;bottom:-18%;width:60%;z-index:-1;fill:none;stroke:var(--ac2);stroke-opacity:.4;animation:spin 90s linear infinite}
.orbit circle:last-child{stroke-dasharray:3 8}@keyframes spin{to{transform:rotate(360deg)}}
.phases{padding:0}.phases ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:12px;background:var(--bg2);overflow:hidden}
.phases li{padding:20px 22px}.phases li+li{border-left:1px solid var(--line)}.phases b{display:block;font-family:Geologica;font-size:18px;color:var(--hi);margin-bottom:6px}.phases span{color:var(--mut);font-size:15px;line-height:1.45;display:block}
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:0 32px;border-top:1px solid var(--line)}
.feats article{padding:26px 0;border-bottom:1px solid var(--line)}.feats h3{font-size:19px;margin-bottom:8px}.feats p{margin:0;color:var(--mut);font-size:16px}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}.tabs button{font:inherit;font-size:15px;color:var(--mut);background:transparent;border:1px solid var(--line);padding:8px 18px;border-radius:999px;cursor:pointer}
.tabs button.on{color:var(--tx);border-color:var(--ac);background:var(--bg2)}
.theme-view img{width:100%;height:auto;border-radius:12px;border:1px solid var(--line);display:block}
#theme-cap{margin:14px 0 0;color:var(--mut)}#theme-cap b{color:var(--tx);font-family:Geologica}#theme-cap em{font-style:normal;color:var(--ac);margin-left:8px;font-size:14px}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px}
.plan{border:1px solid var(--line);border-radius:12px;padding:26px;background:var(--bg2)}.plan.best{border-color:var(--ac2);box-shadow:0 0 0 1px #8b6cf055,0 20px 50px #8b6cf01f}
.plan h3{font-size:20px}.price{font-family:Geologica;font-size:28px;font-weight:700;margin:12px 0 2px;color:var(--hi)}.note{color:var(--mut);margin:0 0 16px;font-size:15px;min-height:1.6em}
.plan ul{margin:0;padding:0;list-style:none}.plan li{padding:7px 0 7px 22px;position:relative;border-top:1px solid var(--line);font-size:16px}.plan li:before{content:"";position:absolute;left:2px;top:15px;width:8px;height:8px;border-radius:50%;background:var(--ac)}
.dl{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.dl article{border:1px solid var(--line);border-radius:12px;padding:26px;background:var(--bg2)}.dl h3{font-size:21px;margin-bottom:8px}.dl p{color:var(--mut);margin:0 0 14px}.dl .ver{min-height:1.6em;color:var(--hi)}
.all{margin:18px 0}.warn{border-left:3px solid var(--ac2);padding:4px 0 4px 20px;margin-top:24px;max-width:70ch}.warn h3{font-size:18px;margin-bottom:6px}.warn p{margin:0;color:var(--mut)}
details{border-top:1px solid var(--line);padding:16px 0;max-width:80ch}details:last-child{border-bottom:1px solid var(--line)}summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:16px}summary::after{content:"+";color:var(--ac);font-size:22px;line-height:1}details[open] summary::after{content:"–"}details p{color:var(--mut);margin:10px 0 0}
footer{padding-top:40px;padding-bottom:60px;color:var(--mut);font-size:14px;border-top:1px solid var(--line)}footer p{margin:6px 0}
.doc{max-width:760px;padding-top:30px;padding-bottom:60px}.doc h1{font-size:36px;margin-bottom:12px}.doc h2{font-size:20px;margin:28px 0 6px}.doc p{margin:0 0 8px;color:var(--mut)}.draft{border:1px dashed var(--ac2);padding:10px 14px;border-radius:8px;color:var(--hi)!important}
@media(max-width:900px){.hero,.plans,.dl{grid-template-columns:1fr}.feats{grid-template-columns:1fr 1fr}.phases ol{grid-template-columns:1fr 1fr}.phases li:nth-child(3){border-left:0}.phases li:nth-child(n+3){border-top:1px solid var(--line)}.top{flex-wrap:wrap}nav{order:3;margin-left:0;width:100%}.lang{margin-left:auto}.orbit{display:none}}
@media(max-width:560px){.feats,.phases ol{grid-template-columns:1fr}.phases li+li{border-left:0;border-top:1px solid var(--line)}section{padding:48px 0}}
@media(prefers-reduced-motion:reduce){.orbit{animation:none}html{scroll-behavior:auto}}

/* сравнение тем */
.cmp-pick{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:16px;color:var(--mut);font-size:15px}.cmp-pick select{font:inherit;color:var(--tx);background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:6px 10px;margin-left:6px}
.cmp{--p:50%;position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line);line-height:0;user-select:none;touch-action:pan-y}
.cmp img{width:100%;height:auto;display:block}.cmp-top{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.cmp-line{position:absolute;top:0;bottom:0;left:var(--p);width:2px;margin-left:-1px;background:var(--hi);box-shadow:0 0 18px var(--ac2);pointer-events:none}
.cmp-line::after{content:"";position:absolute;top:50%;left:50%;width:34px;height:34px;margin:-17px;border-radius:50%;background:var(--bg);border:2px solid var(--hi)}
.cmp input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}.cmp:focus-within{outline:2px solid var(--ac);outline-offset:3px}
/* карточки: свет за курсором и глиф тарифа */
.plan,.dl article{position:relative;overflow:hidden}
.plan::before,.dl article::before{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,0),#8b6cf026,transparent 70%);opacity:0;transition:opacity .25s;pointer-events:none}
.plan:hover::before,.dl article:hover::before{opacity:1}
.glyph{position:absolute;right:-30px;top:-30px;width:150px;height:150px;opacity:.16;pointer-events:none;background:conic-gradient(from 0deg,var(--ac2),transparent 30%,var(--ac2) 60%,transparent);-webkit-mask:radial-gradient(circle,transparent 46%,#000 47%,#000 50%,transparent 51%,transparent 62%,#000 63%,#000 65%,transparent 66%);mask:radial-gradient(circle,transparent 46%,#000 47%,#000 50%,transparent 51%,transparent 62%,#000 63%,#000 65%,transparent 66%)}
.plan[data-g=pro] .glyph{-webkit-mask:radial-gradient(circle,transparent 46%,#000 47%,#000 50%,transparent 51%);mask:radial-gradient(circle,transparent 46%,#000 47%,#000 50%,transparent 51%);animation:spin 60s linear infinite}
.plan[data-g=max] .glyph{opacity:.28;animation:spin 40s linear infinite reverse}
.plan[data-g=free] .glyph{opacity:.1}
/* этапы матча */
.phases li{transition:background .5s}.phases li.now{background:linear-gradient(#8b6cf01c,transparent)}.phases li::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--ac)}.phases li{position:relative}.phases li.now::after{animation:fill 2.6s linear forwards}@keyframes fill{to{width:100%}}
/* появление при прокрутке и вход hero */
.rv{opacity:0;transform:translateY(14px);transition:opacity .6s ease var(--d,0ms),transform .6s ease var(--d,0ms)}.rv.in{opacity:1;transform:none}
.rise h1,.rise .lead,.rise .cta{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}.rise .lead{animation-delay:.12s}.rise .cta{animation-delay:.24s}@keyframes rise{from{opacity:0;transform:translateY(18px)}}
.shot img{transition:transform .25s ease-out,box-shadow .3s}.shot{animation:rise 1s .15s cubic-bezier(.2,.7,.2,1) both}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.rise h1,.rise .lead,.rise .cta,.shot,.glyph{animation:none}}
.acct{max-width:980px}.acct .sub{max-width:60ch}#acc-msg,#acc-pay-msg{color:var(--hi);min-height:1.6em;margin:12px 0}
.acc-who{display:flex;align-items:center;gap:14px;margin:8px 0 24px}.acc-who img{border-radius:50%;border:1px solid var(--line)}.acc-who b{font-family:Geologica;font-size:20px;margin-right:auto}
.acct .plans{grid-template-columns:repeat(2,1fr)}.acct .plan .btn{margin-top:6px;cursor:pointer;border:0;font:inherit;font-weight:600}
#acc-key{border:1px solid var(--ac2);border-radius:12px;padding:20px;background:var(--bg2);margin-top:16px}#acc-key code{display:block;word-break:break-all;background:var(--bg);padding:12px;border-radius:8px;margin:10px 0;color:var(--hi);font-size:13px;line-height:1.4}
.acc-link{color:var(--hi)!important;border-color:var(--ac2)}
@media(max-width:900px){.acct .plans{grid-template-columns:1fr}}

/* ===== дорогой слой ===== */
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
body{background:var(--bg)}
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.bg canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.8}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;will-change:transform}
.b1{width:620px;height:620px;left:-8%;top:-10%;background:#5b3fd0;animation:drift1 28s ease-in-out infinite alternate}
.b2{width:520px;height:520px;right:-6%;top:18%;background:#2a3fa8;opacity:.4;animation:drift2 34s ease-in-out infinite alternate}
.b3{width:440px;height:440px;left:30%;bottom:-18%;background:#b2478f;opacity:.22;animation:drift3 40s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(18vw,16vh) scale(1.2)}}@keyframes drift2{to{transform:translate(-14vw,22vh) scale(.85)}}@keyframes drift3{to{transform:translate(-22vw,-12vh) scale(1.25)}}
.bg::after{content:"";position:absolute;inset:0;opacity:.07;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>")}
.spot{position:fixed;left:0;top:0;width:540px;height:540px;margin:-270px;border-radius:50%;pointer-events:none;z-index:-1;background:radial-gradient(circle,#b09cff1f,transparent 65%);transform:translate(var(--sx,50vw),var(--sy,30vh));transition:opacity .4s;opacity:0}
.spot.on{opacity:1}
/* hero: заголовок со световым проходом и плавающие фрагменты интерфейса */
.hero h1{background:linear-gradient(100deg,var(--tx) 40%,#fff 48%,var(--hi) 52%,var(--tx) 60%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:rise .8s cubic-bezier(.2,.7,.2,1) both,sheen 2.6s .9s ease-out 1 both}
@keyframes sheen{from{background-position:120% 0}to{background-position:-20% 0}}
.shot{perspective:1200px}
.shot>img{transform-style:preserve-3d}
.frag{position:absolute;z-index:2;border-radius:10px;border:1px solid #b09cff55;background-image:url(/shots/home-vision.webp);background-repeat:no-repeat;box-shadow:0 18px 50px #000a,0 0 30px #8b6cf033;transform:translate(calc(var(--px,0)*1px),calc(var(--py,0)*1px));transition:transform .2s ease-out;animation:bob 7s ease-in-out infinite alternate}
.frag::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,#ffffff26,transparent 40%)}
.f1{left:-2%;top:-9%;width:288px;height:90px;background-size:1280px 800px;background-position:-97px -115px;animation-delay:-2s}
.f2{right:-5%;bottom:-8%;width:372px;height:58px;background-size:1280px 800px;background-position:-885px -232px}
.f3{left:-5%;bottom:6%;width:80px;height:66px;background-size:1280px 800px;background-position:-8px -85px;animation-delay:-4s}
@keyframes bob{to{margin-top:-12px}}
/* лента */
.ribbon{overflow:hidden;border-block:1px solid var(--line);margin:56px 0 0;padding:14px 0;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.ribbon div{display:flex;gap:44px;width:max-content;animation:belt 48s linear infinite}
.ribbon span{font-family:Geologica;font-size:17px;color:var(--mut);white-space:nowrap;display:flex;align-items:center;gap:44px}
.ribbon span::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--ac2);box-shadow:0 0 12px var(--ac)}
@keyframes belt{to{transform:translateX(-50%)}}
/* вращающаяся световая кромка у главных карточек */
.plan.best,.dl article:first-child{border-color:transparent;background:linear-gradient(var(--bg2),var(--bg2)) padding-box,conic-gradient(from var(--ang),#8b6cf0,#ec7fc8 25%,#e8c26b 40%,#5b8dff 65%,#8b6cf0) border-box;border:1px solid transparent;animation:edge 7s linear infinite}
@keyframes edge{to{--ang:360deg}}
.plan.best{box-shadow:0 24px 70px #8b6cf033}
/* цвет раздела тем подстраивается под выбранную тему */
#themes{--ac:#B09CFF;--ac2:#8B6CF0;transition:none}
#themes[data-theme=yin]{--ac:#e8c26b;--ac2:#b8923a}#themes[data-theme=yang]{--ac:#9ad6a4;--ac2:#4f9a63}#themes[data-theme=noir]{--ac:#7fa6ff;--ac2:#3d63d9}#themes[data-theme=aegis]{--ac:#ff7a7a;--ac2:#b32d3a}
#themes .theme-view{position:relative}#themes .theme-view::before{content:"";position:absolute;inset:-30px;z-index:-1;background:radial-gradient(60% 60% at 50% 50%,var(--ac2),transparent 70%);opacity:.3;filter:blur(30px);transition:background .5s}
#themes .theme-view img{transition:opacity .35s,transform .5s;box-shadow:0 30px 90px #000a,0 0 0 1px color-mix(in srgb,var(--ac) 35%,transparent)}
#themes .theme-view img.swap{opacity:0;transform:scale(.985)}
#themes .tabs button.on{border-color:var(--ac);box-shadow:0 0 22px color-mix(in srgb,var(--ac2) 45%,transparent)}
h2{background:linear-gradient(90deg,var(--tx),var(--hi));-webkit-background-clip:text;background-clip:text;color:transparent}
.feats article{transition:transform .3s,border-color .3s}.feats article:hover{transform:translateY(-3px);border-color:var(--ac2)}
@media(max-width:900px){.frag{display:none}.spot{display:none}.blob{filter:blur(70px)}}
@media(prefers-reduced-motion:reduce){.blob,.frag,.ribbon div,.plan.best,.dl article:first-child{animation:none}.hero h1{animation:none;color:var(--tx);background:none}.spot{display:none}}

/* что нового */
.upds{max-width:820px}.upd{border-top:1px solid var(--line);padding:26px 0}.upd header{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;color:var(--mut);font-size:14px;margin-bottom:8px}
.upd .ver{font-family:Geologica;color:var(--hi);border:1px solid var(--ac2);border-radius:6px;padding:1px 9px}.upd .by{margin-left:auto}
.upd h2{font-size:22px;margin:0 0 8px;-webkit-text-fill-color:var(--tx);background:none;color:var(--tx)}.upd h3{font-size:15px;margin:14px 0 4px;color:var(--ac)}
.upd .story{color:var(--tx);margin:0 0 10px}.upd ul{margin:0;padding-left:20px;color:var(--mut)}.upd li{margin:4px 0}
#upd-more{margin-top:20px;cursor:pointer;font:inherit}
.staff-name{--sn:#b09cff;color:var(--sn);font-weight:600}
.staff-fx-glow{text-shadow:0 0 8px var(--sn),0 0 18px color-mix(in srgb,var(--sn) 55%,transparent)}
.staff-fx-pulse{animation:staff-pulse 2.4s ease-in-out infinite}
.staff-fx-flicker{text-shadow:0 0 10px var(--sn);animation:staff-flicker 2.8s steps(1,end) infinite}
.staff-fx-shimmer{background:linear-gradient(100deg,var(--sn) 35%,#fff 50%,var(--sn) 65%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:staff-shimmer 3s linear infinite}
.staff-fx-rainbow{background:linear-gradient(90deg,#ff5d6c,#ffc35d,#7bd88f,#5db7ff,#b07bff,#ff5d6c) 0 0/300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:staff-shimmer 5s linear infinite}
@keyframes staff-pulse{50%{text-shadow:0 0 14px var(--sn),0 0 28px var(--sn);opacity:.78}}
@keyframes staff-flicker{0%,100%{opacity:1;text-shadow:0 0 12px var(--sn)}8%{opacity:.35;text-shadow:none}10%{opacity:1}34%{opacity:.6}36%{opacity:1;text-shadow:0 0 16px var(--sn)}62%{opacity:.4;text-shadow:none}64%{opacity:1}}
@keyframes staff-shimmer{to{background-position:-250% 0}}
@media(prefers-reduced-motion:reduce){.staff-name{animation:none!important}}
.was{font-size:.62em;font-weight:500;color:var(--mut);text-decoration:line-through;text-decoration-thickness:2px;margin-right:2px}
.sale-badge{display:inline-block;margin:0 0 14px;padding:8px 14px;border-radius:999px;border:1px solid var(--hi);color:var(--hi);font-weight:700;background:rgba(176,156,255,.12)}