:root{--hf:Unbounded,"Arial Black",system-ui,sans-serif;--bf:"Golos Text",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--g:#17824a;--lime:#d8f36b;--bg:#fbfaf4;--bg2:#eef2e4;--tx:#13261b;--mu:#586a5e;--bd:#d3dccb;--line:#0f2a1d;--card:#fff;--sh:#0f2a1d;--hl:#d8f36b;--bsh:#0f2a1d;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0b1711;--bg2:#10201a;--tx:#ecf3e6;--mu:#9db1a2;--bd:#27402f;--line:#3a5a44;--card:#122319;--sh:#d8f36b;--hl:rgba(216,243,107,.3);--bsh:#6fae7f}}
:root[data-theme="dark"]{--bg:#0b1711;--bg2:#10201a;--tx:#ecf3e6;--mu:#9db1a2;--bd:#27402f;--line:#3a5a44;--card:#122319;--sh:#d8f36b;--hl:rgba(216,243,107,.3);--bsh:#6fae7f}
*{box-sizing:border-box}html,body{overflow-x:clip}
html{scroll-behavior:smooth;scroll-padding-top:calc(72px + env(safe-area-inset-top,0px))}
body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.6 var(--bf);-webkit-font-smoothing:antialiased}
h1,h2,h3,.price,.logo,.n,.stk,.sum b{font-family:var(--hf)}
.w{max-width:1100px;margin:0 auto;padding:0 20px}
#bar{position:fixed;top:0;left:0;right:0;height:3px;background:var(--g);transform:scaleX(0);transform-origin:0 50%;z-index:30}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(8px);border-bottom:1.5px solid var(--line)}
nav{display:flex;align-items:center;justify-content:space-between;height:68px;transition:height .3s}
header.sm nav{height:54px}
.logo{font-weight:600;font-size:19px;color:var(--tx);text-decoration:none;display:flex;gap:9px;align-items:center;letter-spacing:-.02em}
.logo i{width:24px;height:24px;border-radius:7px;background:var(--lime);border:1.5px solid #0f2a1d;display:inline-block;transform:rotate(-8deg);transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.logo:hover i{transform:rotate(25deg) scale(1.1)}
nav a.l{position:relative;color:var(--mu);text-decoration:none;margin-left:24px;font-size:15px;font-weight:500;transition:color .2s}
nav a.l:after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;background:var(--g);transform:scaleX(0);transform-origin:left;transition:transform .25s}
nav a.l:hover{color:var(--tx)}nav a.l:hover:after{transform:scaleX(1)}
@media(max-width:760px){nav a.l{display:none}}
.btn{display:inline-block;border:1.5px solid #0f2a1d;cursor:pointer;background:var(--lime);color:#0f2a1d;font:600 15px/1 var(--bf);padding:15px 24px;border-radius:10px;text-decoration:none;box-shadow:4px 4px 0 var(--bsh);transition:transform .18s,box-shadow .18s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--bsh)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--bsh)}
.btn.o{background:transparent;color:var(--tx);border-color:var(--line)}
.btn[disabled]{opacity:.6;cursor:wait}
.ar{display:inline-block;transition:transform .2s;margin-left:4px}.btn:hover .ar{transform:translateX(5px)}
.hero{position:relative;overflow:hidden;padding:64px 0 110px;background-image:radial-gradient(var(--bd) 1.2px,transparent 1.2px);background-size:22px 22px}
.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(380px circle at var(--mx,72%) var(--my,30%),rgba(216,243,107,.5),transparent 70%);pointer-events:none;transition:background-position .2s}
.hero .w{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;position:relative}
@media(max-width:860px){.hero .w{grid-template-columns:1fr;gap:56px}}
.tag{display:inline-block;border:1.5px solid var(--line);padding:5px 13px;border-radius:99px;font-size:13px;font-weight:600;background:var(--card)}
h1{font-weight:600;font-size:clamp(24px,3.5vw,40px);line-height:1.12;margin:22px 0 20px;letter-spacing:-.035em}
.sw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.sw>span{display:inline-block;transform:translateY(110%);transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.go .sw>span{transform:none}
mark{color:inherit;background:linear-gradient(var(--hl),var(--hl)) 0 90%/0% 45% no-repeat;transition:background-size .8s .55s cubic-bezier(.2,.8,.2,1)}
.go mark{background-size:100% 45%}
.lead{color:var(--mu);font-size:18px;max-width:500px}
.cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.pn{position:relative;perspective:900px}
.stk{position:absolute;right:-6px;top:-34px;width:104px;height:104px;border-radius:50%;background:var(--lime);color:#0f2a1d;border:1.5px solid #0f2a1d;display:grid;place-items:center;text-align:center;font-weight:600;font-size:12px;line-height:1.2;transform:rotate(10deg);animation:wob 5s ease-in-out infinite;z-index:2}
@keyframes wob{50%{transform:rotate(-7deg) scale(1.06)}}
.mock{position:relative;background:#0c3b26;color:#e9f6df;border:1.5px solid #0f2a1d;border-radius:14px;padding:18px 20px 20px;box-shadow:8px 8px 0 var(--sh);transition:transform .2s ease-out;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
.mock .hd{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.8;margin-bottom:6px}
.live:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#7CFC9A;margin-right:7px;animation:bl 1.2s infinite}
@keyframes bl{50%{opacity:.2}}
.row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px dashed rgba(233,246,223,.2);font-size:14px}
.row.in{animation:rin .6s cubic-bezier(.2,.8,.2,1)}
@keyframes rin{from{opacity:0;transform:translateY(-16px);background:rgba(216,243,107,.25)}}
.ok{color:#8fe3a4;font-weight:700}.late{color:#ffc46b;font-weight:700}
.cnt{margin:14px 0 8px;font-size:13px;opacity:.9}.cnt b{font:600 22px var(--hf);color:var(--lime)}
.pb{height:6px;background:rgba(233,246,223,.15);border-radius:9px;overflow:hidden}
.pb i{display:block;height:100%;width:86%;background:var(--lime);transition:width .6s}
.mq{position:relative;z-index:2;background:var(--g);color:#fff;transform:rotate(-1.2deg);margin:-34px -3vw 0;overflow:hidden;border-block:1.5px solid #0f2a1d}
.mq div{display:flex;width:max-content;will-change:transform;padding:15px 0;font:600 14px var(--hf);letter-spacing:.05em;text-transform:uppercase}
.mq span{padding:0 22px;white-space:nowrap}.mq span:after{content:"✦";margin-left:44px;color:var(--lime)}
section{padding:96px 0}
.alt{background:var(--bg2);border-block:1.5px solid var(--line)}
h2{font-weight:600;font-size:clamp(20px,2.5vw,30px);line-height:1.15;margin:0 0 12px;letter-spacing:-.025em;text-align:left}
.sub{color:var(--mu);max-width:540px;margin:0 0 46px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.card{position:relative;background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:26px;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.card:hover{transform:translate(-4px,-4px);box-shadow:6px 6px 0 var(--sh)}
.card h3{margin:0 0 8px;font-size:14px;letter-spacing:-.01em}.card p{margin:0;color:var(--mu);font-size:15px}
.n{display:block;font-weight:600;font-size:13px;color:var(--g);margin-bottom:24px}
.n:after{content:"";display:block;height:3px;width:26px;background:var(--lime);margin-top:9px;transition:width .3s}
.card:hover .n:after{width:64px}
.steps{counter-reset:s}
.steps .card{padding-top:78px}
.steps .card:before{counter-increment:s;content:"0" counter(s);position:absolute;top:18px;left:26px;font:600 30px var(--hf);color:var(--g);letter-spacing:-.04em}
.price{font-weight:600;font-size:22px;color:var(--g);margin:12px 0 4px;letter-spacing:-.03em}
.price small{font:500 12px var(--bf);color:var(--mu);letter-spacing:0}
.card ul{padding-left:18px;color:var(--mu);font-size:15px;margin:14px 0 0}
.hot{background:var(--lime);color:#0f2a1d;border-color:#0f2a1d}
.hot .price,.hot h3,.hot b{color:#0f2a1d}.hot ul,.hot small{color:#2b4a36!important}
.ord{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:start}
@media(max-width:820px){.ord{grid-template-columns:1fr}}
form{background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:28px;box-shadow:8px 8px 0 var(--sh)}
label{display:block;font-size:14px;font-weight:600;margin:14px 0 6px}
input,select{width:100%;padding:13px 14px;border-radius:10px;border:1.5px solid var(--line);background:var(--bg);color:var(--tx);font:inherit;transition:box-shadow .2s,transform .2s}
input:focus,select:focus{outline:0;box-shadow:4px 4px 0 var(--lime);transform:translate(-1px,-1px);border-color:var(--g)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pay{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pay label{margin:0;border:1.5px solid var(--line);border-radius:10px;padding:12px 6px;text-align:center;cursor:pointer;font-weight:500;font-size:14px;transition:.2s}
.pay label:hover{transform:translateY(-2px)}
.pay input{display:none}
.pay label:has(input:checked){background:var(--lime);color:#0f2a1d;font-weight:700;border-color:#0f2a1d}
.chk{display:flex;gap:10px;font-weight:400;font-size:13px;color:var(--mu);align-items:flex-start}
.chk input{width:18px;height:18px;margin-top:2px;accent-color:var(--g);flex:none}
.chk a{color:var(--g);font-weight:600}
.sum{display:flex;justify-content:space-between;align-items:center;font-size:17px;font-weight:600;margin:22px 0 16px}
.sum b{color:var(--g);font-size:22px}
.msg{display:none;margin-top:16px;padding:14px;border-radius:10px;background:var(--bg2);border:1.5px solid var(--g);font-size:14px}
footer{background:#0c3b26;color:#cfe5d6;padding:48px 0 30px;font-size:14px}
footer a{color:var(--lime)}footer p{margin:6px 0}
.rq{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.leg{opacity:.7;font-size:12px;margin-top:24px;border-top:1px solid #24502f;padding-top:16px}
dialog{max-width:640px;width:calc(100% - 32px);max-height:80vh;border:1.5px solid var(--line);border-radius:14px;background:var(--card);color:var(--tx);padding:26px}
dialog::backdrop{background:rgba(0,0,0,.5)}
dialog h3{margin-top:0}dialog p{font-size:14px;color:var(--mu)}
.ck{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));max-width:560px;margin:auto;background:var(--card);border:1.5px solid var(--line);border-radius:12px;padding:16px;box-shadow:5px 5px 0 var(--sh);z-index:20;font-size:13px;display:flex;gap:14px;align-items:center;transform:translateY(160%);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.ck.s{transform:none}.ck .btn{padding:10px 18px;font-size:14px;flex:none}
.rv{opacity:0;transform:translateY(32px) rotate(.5deg);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.errorlist{list-style:none;margin:6px 0 0;padding:0;color:#dc2626;font-size:13px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.alert{padding:12px 14px;border-radius:10px;background:#fef2f2;border:1.5px solid #fecaca;color:#b91c1c;font-size:14px;margin-bottom:12px}
.page{padding:56px 0 80px;max-width:760px}.page h1{font-size:26px;margin-top:0}.page h2{font-size:18px;margin:28px 0 8px}
.page p,.page li{color:var(--mu);font-size:15px}
.page .note{background:var(--bg2);border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;font-size:13px}
.status{max-width:560px;margin:70px auto;text-align:center}.status .big{font-size:52px}
.badge{display:inline-block;padding:4px 12px;border-radius:99px;background:var(--lime);color:#0f2a1d;font-weight:600;font-size:14px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv,.sw>span{opacity:1;transform:none}mark{background-size:100% 45%}html{scroll-behavior:auto}}
/* спокойная версия: мягкие тени и тонкие линии, акцент только на главном */
:root{--line:#d9e1d2;--sh:rgba(15,42,29,.16);--hl:#e4efca;--lime:#e4efca;--bg:#fcfcf8;--bg2:#f4f7ef;--bsh:rgba(15,42,29,.2)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--line:#2b4535;--sh:rgba(0,0,0,.45);--hl:rgba(216,243,107,.16);--lime:#274232}}
:root[data-theme="dark"]{--line:#2b4535;--sh:rgba(0,0,0,.45);--hl:rgba(216,243,107,.16);--lime:#274232}
h1,h2{font-weight:500}
header{border-bottom:1px solid var(--line)}
.logo i{background:var(--g);border:0;transform:none;border-radius:8px}
.logo:hover i{transform:rotate(8deg)}
.btn{background:var(--g);color:#fff;border:0;border-radius:12px;padding:15px 26px;box-shadow:0 8px 18px -8px rgba(23,130,74,.6)}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 24px -10px rgba(23,130,74,.65)}
.btn:active{transform:none;box-shadow:0 3px 8px -4px rgba(23,130,74,.5)}
.btn.o{background:transparent;color:var(--tx);border:1px solid var(--line);box-shadow:none}
.btn.o:hover{border-color:var(--g);box-shadow:none}
.tag{border-color:var(--line);font-weight:500;color:var(--mu);background:transparent}
.hero{background-image:none;padding-bottom:84px}
.hero:before{background:radial-gradient(520px circle at var(--mx,72%) var(--my,30%),rgba(23,130,74,.09),transparent 70%)}
mark{background-size:0% 38%}.go mark{background-size:100% 38%}
.stk{width:auto;height:auto;border-radius:12px;padding:8px 14px;top:-46px;right:18px;transform:none;animation:none;background:var(--card);color:var(--tx);border:1px solid var(--line);font-weight:500;line-height:1.3;box-shadow:0 10px 24px -12px var(--sh);display:block;text-align:left}
.mock{background:#10402b;border:0;border-radius:18px;box-shadow:0 30px 60px -28px rgba(12,59,38,.6)}
.cnt b{color:#cfe8a0}.pb i{background:#8fd6a3}
.mq{transform:none;margin:0;background:var(--bg2);color:var(--mu);border-block:1px solid var(--line)}
.mq div{font:500 12px var(--bf);letter-spacing:.16em;padding:17px 0}
.mq span:after{content:"•";color:var(--g);opacity:.45}
.alt{border-block:1px solid var(--line)}
.card{border:1px solid var(--line);border-radius:16px;box-shadow:0 1px 2px rgba(15,42,29,.04)}
.card:hover{transform:translateY(-3px);box-shadow:0 16px 32px -20px var(--sh)}
.n:after{height:2px;background:var(--g);opacity:.35}
.steps .card:before{opacity:.5}
.price{color:var(--tx)}
.hot{background:var(--card);color:inherit;border:2px solid var(--g);box-shadow:0 20px 44px -26px rgba(23,130,74,.5)}
.hot .price{color:var(--g)}.hot h3,.hot b{color:var(--tx)}.hot ul,.hot small{color:var(--mu)!important}
form{border:1px solid var(--line);border-radius:18px;box-shadow:0 28px 56px -34px var(--sh)}
input,select{border:1px solid var(--line)}
input:focus,select:focus{box-shadow:0 0 0 4px rgba(23,130,74,.14);transform:none;border-color:var(--g)}
.pay label{border:1px solid var(--line)}
.pay label:has(input:checked){background:rgba(23,130,74,.1);color:var(--g);border-color:var(--g)}
.ck{border:1px solid var(--line);box-shadow:0 14px 34px -16px var(--sh)}
dialog{border:1px solid var(--line)}
.badge{background:rgba(23,130,74,.12);color:var(--g)}
footer a{color:#bfe3c8}
.rv{transform:translateY(20px);transition-duration:.9s}