@font-face{font-family:Inter;font-weight:100 900;font-display:swap;src:url(/fonts/inter-cyrillic-wght-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Inter;font-weight:100 900;font-display:swap;src:url(/fonts/inter-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{--bg:#09080F;--ink:#F4F2FA;--mu:#A9A4BC;--line:rgba(255,255,255,.1);--glass:rgba(255,255,255,.05);--v:#8B6CFF;--t:#2DE0C6;--lime:#C8FF3D;--limed:#9BD11A}
*{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;font:400 16px/1.6 Inter,system-ui,sans-serif;color:var(--ink);background:radial-gradient(70% 40% at 85% -5%,rgba(139,108,255,.35),transparent 70%),radial-gradient(60% 35% at 0 20%,rgba(45,224,198,.14),transparent 70%),var(--bg);background-repeat:no-repeat;padding-bottom:92px;overflow-wrap:break-word}
h1,h2{font-family:Inter,system-ui,sans-serif;font-weight:700;line-height:1.1;margin:0 0 .6em;letter-spacing:-.03em}
h1{font-size:clamp(2rem,10vw,3.8rem);font-weight:800}
h2{font-size:clamp(1.55rem,7vw,2.3rem)}
p{margin:0 0 .8em}
em{font-style:normal;background:linear-gradient(100deg,#B7A5FF,#38F0D2);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.wrap{max-width:1100px;margin:0 auto;padding:0 16px}
.btn{position:relative;display:block;width:100%;background:var(--lime);color:#0B0A12;font:700 1.05rem/1.2 Inter,sans-serif;text-decoration:none;text-align:center;padding:18px 22px;border-radius:16px;border:0;box-shadow:0 0 0 1px rgba(255,255,255,.2) inset,0 10px 40px -8px rgba(200,255,61,.55);cursor:pointer;transition:transform .2s,box-shadow .2s;letter-spacing:-.01em}
.btn:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(255,255,255,.3) inset,0 14px 50px -6px rgba(200,255,61,.75)}
.btn:active{transform:scale(.985)}
:focus-visible{outline:3px solid var(--t);outline-offset:3px;border-radius:12px}
.hero{padding:22px 0 36px}
.brand{margin:0 0 30px}
.logo{margin:0;font:800 1.1rem/1.1 Inter,sans-serif;letter-spacing:-.03em;display:flex;flex-direction:column}
.logo span{margin-top:5px;font:500 .74rem/1.25 Inter,sans-serif;color:var(--mu);letter-spacing:0}
.hero .lead{color:#C9C5D8;font-size:1.05rem;margin:0 0 24px;max-width:34em}
/* bento */
main{display:grid;gap:12px;max-width:1100px;margin:0 auto;padding:0 12px}
.sec{position:relative;background:var(--glass);border:1px solid var(--line);border-radius:28px;padding:26px 0;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);overflow:hidden}
.sec .wrap{padding:0 20px;max-width:none}
.sec::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent)}
.path{list-style:none;margin:0;padding:0}
.path li{position:relative;display:flex;gap:14px;padding:0 0 20px}
.path li:last-child{padding-bottom:0}
.path li:not(:last-child)::before{content:"";position:absolute;left:17px;top:40px;bottom:4px;width:1px;background:linear-gradient(var(--line),transparent)}
.path .dot{flex:none;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font:700 .9rem Inter,sans-serif;background:rgba(255,255,255,.08);border:1px solid var(--line);color:var(--ink)}
.path .done .dot{background:var(--lime);color:#0B0A12;border:0}
.path .done b,.path .done b em{color:var(--lime);background:none;-webkit-text-fill-color:currentColor}
.path .now .dot{background:linear-gradient(135deg,var(--v),var(--t));color:#0B0A12;border:0}
.path .now b{background:linear-gradient(90deg,var(--b,#6C8CFF),var(--v),var(--t));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;width:fit-content}
.path b{display:block;font-size:1.05rem;letter-spacing:-.01em}
.path span.t{color:var(--mu);font-size:.95rem}
.card{background:rgba(9,8,15,.55);border:1px solid var(--line);border-radius:22px;padding:22px 18px}
.was{margin:0;font:600 2rem/1.15 Inter,sans-serif;color:#9C97B0}
.was s{text-decoration-thickness:3px;text-decoration-color:currentColor}
.price{font:800 clamp(2.6rem,12vw,3.8rem)/1.05 Inter,sans-serif;letter-spacing:-.04em;margin:2px 0 4px}
.price .cur{font:500 .38em Inter,sans-serif;color:var(--mu);letter-spacing:0}
.price .promo{display:block;margin-top:10px;font:600 .95rem/1.3 Inter,sans-serif;letter-spacing:0}
.price .cap{display:block;margin-top:6px;font:400 .95rem/1.3 Inter,sans-serif;color:var(--mu);letter-spacing:0}
.in{list-style:none;margin:18px 0 22px;padding:0}
.in li{padding:10px 0 10px 34px;position:relative;border-top:1px solid var(--line)}
.in li::before{content:"✓";position:absolute;left:0;top:10px;width:22px;height:22px;border-radius:8px;background:rgba(45,224,198,.16);color:var(--t);font:700 .8rem/22px Inter,sans-serif;text-align:center}
.two{display:grid;gap:12px}
.mini{background:rgba(9,8,15,.5);border:1px solid var(--line);border-radius:22px;padding:22px 20px;transition:border-color .3s,transform .3s}
.mini:hover{border-color:rgba(139,108,255,.6);transform:translateY(-3px)}
.mini h3{font:700 1.05rem/1.3 Inter,sans-serif;margin:0 0 10px}
.mini p{margin:0;font-size:.95rem;font-weight:400;line-height:1.5;color:#C9C5D8}
.paynote{color:#C9C5D8;margin:0 0 20px}
.order-form{display:grid;gap:14px;margin:0;max-width:420px}
.order-form .field{display:grid;gap:6px;margin:0;font:600 .9rem/1.3 Inter,sans-serif;color:var(--ink)}
.order-form .field small{font-weight:500;color:var(--mu)}
.order-form input[type=text]{width:100%;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:rgba(9,8,15,.55);color:var(--ink);font:500 1rem/1.3 Inter,sans-serif;outline:none;transition:border-color .2s,box-shadow .2s}
.order-form input[type=text]::placeholder{color:#7A758F}
.order-form input[type=text]:focus{border-color:rgba(139,108,255,.7);box-shadow:0 0 0 3px rgba(139,108,255,.25)}
.order-form .btn{margin-top:4px}
.order-form .btn:disabled{opacity:.7;cursor:default;transform:none;box-shadow:0 0 0 1px rgba(255,255,255,.15) inset,0 8px 30px -10px rgba(200,255,61,.35)}
.order-form{position:relative}.order-form .hp{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);border:0;white-space:nowrap}
.paymsg{margin:4px 0 0;font-weight:600;color:#FFD3B8}
.paymsg.ok{color:#C8FF3D}
.paymsg.err{color:#FFB4A2}
details{background:rgba(9,8,15,.5);border:1px solid var(--line);border-radius:18px;margin:0 0 10px;transition:border-color .3s,background .3s}
details[open]{border-color:rgba(139,108,255,.55);background:rgba(139,108,255,.1)}
summary{cursor:pointer;font-weight:600;padding:17px 18px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:56px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";flex:none;width:28px;height:28px;border-radius:9px;border:1px solid var(--line);color:var(--t);display:grid;place-items:center;font-size:1.2rem;line-height:1;transition:transform .3s}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 18px 18px;margin:0;color:#C9C5D8;animation:fi .35s ease}
@keyframes fi{from{opacity:0;transform:translateY(-6px)}}
footer{padding:26px 0 10px;color:var(--mu);font-size:.9rem}
footer a{color:#CFC4FF}
footer .ft{margin:0}footer .ft b{font-weight:700;color:var(--ink)}footer .mission{margin:6px 0 0;color:var(--mu);font-size:.95rem}
.bar{position:fixed;left:0;right:0;bottom:0;z-index:5;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(9,8,15,.8);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--line);transition:transform .3s}
.bar.off{transform:translateY(110%)}
.bar .btn{padding:15px 12px;font-size:1rem}
.hero .brand,.hero h1,.hero .lead,.hero .phone,.hero #cta{animation:up .7s cubic-bezier(.2,.7,.2,1) both}
.hero h1{animation-delay:.08s}.hero .lead{animation-delay:.16s}.hero .phone{animation-delay:.22s}.hero #cta{animation-delay:.3s}
@keyframes up{from{opacity:0;transform:translateY(14px)}}

/* v4: компактний перший екран */
.hero{padding:18px 0 26px}
.brand{margin:0 0 20px}
.hero h1{font-size:clamp(1.85rem,8.6vw,3.6rem);margin:0 0 16px}
.hrow{display:flex;gap:14px;align-items:flex-start;margin:0 0 12px}
.htxt{flex:1;min-width:0}
.fast{margin:0 0 10px;display:flex;flex-direction:column;gap:3px}
.fast b{font:700 1.12rem/1.3 Inter,sans-serif;letter-spacing:-.01em;color:var(--lime)}
.fast span{font-size:.88rem;line-height:1.4;color:var(--mu)}
.hero .lead{color:#C9C5D8;font-size:.95rem;line-height:1.5;margin:0}
.lead2{color:#C9C5D8;font-size:.95rem;line-height:1.5;margin:0 0 12px}
.shot{flex:none;width:clamp(112px,32vw,150px);position:relative;display:block;border:1px solid rgba(255,255,255,.25);border-radius:20px;overflow:hidden;background:#15131f;padding:4px;box-shadow:0 0 0 1px rgba(255,255,255,.04),0 20px 40px -16px rgba(0,0,0,.8)}
.shot::before{content:"";position:absolute;inset:8% 6% 6%;background:conic-gradient(from 200deg,var(--v),var(--t),var(--v));filter:blur(40px);opacity:.45;z-index:-1;border-radius:50%}
.shot img{display:block;width:100%;height:auto;aspect-ratio:360/702;border-radius:16px}
.dom{margin:0 0 14px;padding:10px 14px;border:1px solid rgba(45,224,198,.35);background:rgba(45,224,198,.08);border-radius:14px;font-size:.92rem;line-height:1.4;color:#C9C5D8}
.dom-n{display:block;margin-top:2px;font-weight:700;color:var(--t);font-size:1.02rem;letter-spacing:-.01em}
.hprice{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px;margin:0 0 14px}
.hprice .price{margin:0;font-size:clamp(2.1rem,10vw,3rem)}
.hprice .split{margin:0;color:var(--mu);font-size:.92rem;line-height:1.35}
.ctas{display:grid;gap:10px}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:0 0 0 1px rgba(255,255,255,.28) inset}
.btn.ghost:hover{box-shadow:0 0 0 1px rgba(255,255,255,.5) inset}
.sec{padding:24px 0}
.sec .wrap{padding:0 16px}
.card{padding:20px 16px}
.nw{white-space:nowrap}
.sec h2{font-size:clamp(1.45rem,6.4vw,2.2rem)}
.mini{padding:18px 18px}
.mini .num{display:inline-block;margin:0 0 6px;font:800 .9rem/1 Inter,sans-serif;background:linear-gradient(100deg,#B7A5FF,#38F0D2);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.mini h3{margin:0 0 6px}
.sub{color:#C9C5D8;margin:-4px 0 18px}
.path li{padding:0 0 16px}
.ready{margin:18px 0 0;padding:14px 16px;border-radius:16px;background:rgba(200,255,61,.08);border:1px solid rgba(200,255,61,.25);color:var(--ink);font-size:.95rem;line-height:1.5}
main .sec.work{background:linear-gradient(160deg,rgba(139,108,255,.22),rgba(255,255,255,.04) 55%)}
main .sec.buy{background:linear-gradient(160deg,rgba(45,224,198,.14),rgba(255,255,255,.04) 60%)}
.card h2{font-size:clamp(1.4rem,6.2vw,2rem);margin:0 0 12px}
.inc-h,.parts-h{margin:0 0 4px;font-weight:600}
.in{margin:6px 0 16px}
.in li{padding:8px 0 8px 34px;font-size:.95rem;line-height:1.4}
.in li::before{top:8px}
.parts{margin:0 0 18px;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.parts p{margin:0 0 4px;font-size:.95rem;line-height:1.45;color:#C9C5D8}.parts p:last-child{margin:0}
.parts b{color:var(--ink)}
.note{margin:12px 0 0;color:#C9C5D8;font-size:.95rem;text-align:center}
.order-form{margin:16px 0 0;scroll-margin-top:16px;background:rgba(9,8,15,.55);border:1px solid var(--line);border-radius:22px;padding:20px 16px;max-width:none}
.order-form fieldset{border:0;padding:0;margin:0;min-width:0}
.order-form legend{padding:0;margin:0 0 6px;font:600 .9rem/1.3 Inter,sans-serif}
.opt{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:rgba(9,8,15,.55);cursor:pointer;font:500 .95rem/1.3 Inter,sans-serif;margin:0 0 8px}
.opt:last-child{margin:0}
.opt input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--lime)}
.opt:has(input:checked){border-color:rgba(200,255,61,.6);background:rgba(200,255,61,.07)}
.fin{text-align:center}
.fin .wrap{display:flex;flex-direction:column;align-items:center}
.fin-logo{margin:0;font:800 1.5rem/1.1 Inter,sans-serif;letter-spacing:-.03em}
.fin-t{color:var(--mu);margin:6px 0 18px}
main{margin-bottom:16px}
.hero .brand,.hero h1,.hero .hrow,.hero .ctas{animation:up .6s cubic-bezier(.2,.7,.2,1) both}
.hero h1{animation-delay:.06s}.hero .hrow{animation-delay:.12s}.hero .ctas{animation-delay:.18s}
@media(max-width:370px){.hrow{gap:12px}.shot{width:104px}.fast b{font-size:1.05rem}.hero .lead,.lead2{font-size:.92rem}.brand{margin:0 0 16px}}
@media(min-width:640px){.btn{max-width:420px}.ctas{grid-template-columns:repeat(2,minmax(0,1fr));max-width:620px}.ctas .btn{max-width:none}.bar .btn{max-width:420px;margin:0 auto}.wrap{padding:0 24px}.two{grid-template-columns:1fr 1fr}.fin .btn{margin:0 auto}.note{text-align:left}}
@media(min-width:900px){
 .hero{padding:26px 0 48px}
 .hero.has-shot .wrap{display:grid;grid-template-columns:1fr 300px;column-gap:64px;grid-template-areas:"brand brand" "h1 shot" "txt shot" "lead2 shot" "dom shot" "price shot" "cta shot" "sp shot";grid-template-rows:auto auto auto auto auto auto auto 1fr}
 .hero.has-shot .hrow{display:contents}
 .hero.has-shot .htxt{grid-area:txt;margin:0 0 12px}
 .hero.has-shot .shot{grid-area:shot;width:300px;align-self:start;margin-top:8px;border-radius:30px;padding:6px}
 .hero.has-shot .shot img{border-radius:24px}
 .brand{grid-area:brand;margin:0 0 28px}.hero h1{grid-area:h1;font-size:3.4rem}.lead2{grid-area:lead2}.dom{grid-area:dom;width:fit-content}.hprice{grid-area:price}.ctas{grid-area:cta}
 .hero .wrap{max-width:1100px}
 .hero:not(.has-shot) .wrap>*{max-width:760px}
 .fast b{font-size:1.3rem}.hero .lead,.lead2{font-size:1.05rem}
 main{grid-template-columns:repeat(6,1fr);gap:16px;padding:0 24px}
 main .sec{padding:32px 0}
 .sec .wrap{padding:0 28px}
 main .sec.why{grid-column:span 6}
 main .sec.work{grid-column:span 3}
 main .sec.how{grid-column:span 3}
 main .sec.buy{grid-column:span 6}
 main .sec.faq{grid-column:span 6}
 main .sec.fin{grid-column:span 6}
 .two{grid-template-columns:1fr 1fr}
 .buy .wrap{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
 .buy .order-form{margin:0;padding:26px 24px}
 .note{text-align:center}
 .card .btn{max-width:none}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}