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

:root{
  --bg:#0b0b0b;--bg2:#141414;--bg3:#1c1c1c;
  --tx:#f5f5f5;--tx2:#cfcfcf;--mu:#8b8b8b;
  --c:#b9ff3c;--ln:rgba(255,255,255,.1);--ln2:rgba(185,255,60,.45);
  --err:#ff8a7a;
  --w:1160px;--pad:clamp(20px,5vw,40px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font:400 17px/1.6 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--tx);background:radial-gradient(ellipse 70% 900px at 80% 0,rgba(185,255,60,.08),transparent 70%) no-repeat,var(--bg);font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--c);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--w);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

/* bar */
.bar{display:flex;justify-content:space-between;align-items:center;height:72px}
.logo{font-weight:900;font-size:17px;letter-spacing:.08em;text-decoration:none;color:var(--tx)}
.logo span{color:var(--c);margin:0 .28em}
.logo.small{font-size:14px}
.bar-cta{font-weight:600;font-size:15px;text-decoration:none;color:var(--tx2);padding:8px 0;border-bottom:1px solid var(--ln2)}
.bar-cta:hover{color:var(--c)}

/* type */
h1,h2{font-weight:900;text-transform:uppercase;letter-spacing:-.015em;line-height:1.02}
h1{font-size:clamp(34px,6.4vw,68px);max-width:14ch;text-wrap:balance}
h2{font-size:clamp(26px,3.6vw,40px);max-width:20ch;text-wrap:balance;margin-bottom:28px}

/* hero */
.hero{display:grid;gap:56px;padding-top:clamp(32px,7vw,80px);padding-bottom:clamp(64px,9vw,112px)}
.lede{font-size:clamp(18px,1.9vw,20px);color:var(--tx2);max-width:36em;margin-top:28px}
.price{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 24px;margin:36px 0 32px;padding-top:24px;border-top:1px solid var(--ln2);max-width:36em}
.price-num{font-weight:900;font-size:clamp(44px,6vw,60px);line-height:1;letter-spacing:-.03em;color:var(--c)}
.price-num small{font-size:.36em;font-weight:600;letter-spacing:0;color:var(--tx2)}
.price-note{flex:1 1 220px;font-size:15px;color:var(--mu);line-height:1.5}
.btn{display:inline-block;background:var(--c);color:#0b0b0b;font:700 16px/1 Inter,system-ui,sans-serif;text-decoration:none;border:0;border-radius:10px;padding:18px 26px;cursor:pointer;transition:background .15s,transform .15s}
.btn:hover{background:#cfff7a}
.btn:active{transform:translateY(1px)}
.btn:disabled{background:var(--bg3);color:var(--mu);cursor:default}
.sig{margin-top:22px;font-size:14px;color:var(--mu)}

/* phone mock: the one loud element */
.phone{align-self:start;justify-self:center;width:min(100%,380px);background:#17212b;border-radius:28px;border:1px solid var(--ln);overflow:hidden;box-shadow:0 30px 80px -30px rgba(185,255,60,.25)}
.phone-head{display:flex;gap:12px;align-items:center;padding:16px 18px;background:#1f2c38;font-size:15px;line-height:1.25}
.phone-head b{display:block;font-weight:600}
.phone-head i{font-style:normal;font-size:13px;color:#7f91a4}
.ava{width:38px;height:38px;border-radius:50%;background:var(--c);color:#0b0b0b;display:grid;place-items:center;font-weight:900}
.chat{padding:18px 14px 20px;display:flex;flex-direction:column;gap:8px;font-size:15px;line-height:1.4;min-height:340px;
  background:#0e1621}
.msg{max-width:86%;padding:9px 13px;border-radius:16px}
.msg.me{align-self:flex-end;background:#2b5278;border-bottom-right-radius:5px}
.msg.bot{align-self:flex-start;background:#182533;border-bottom-left-radius:5px}
.check{list-style:none;margin-top:8px}
.check li{position:relative;padding:5px 0 5px 28px;color:#dfe6ec}
.check li:before{content:"";position:absolute;left:0;top:7px;width:16px;height:16px;border:1.5px solid #5d7389;border-radius:4px}
.check li.done:before{background:var(--c);border-color:var(--c)}
.check li.done:after{content:"";position:absolute;left:5px;top:10px;width:5px;height:8px;border:solid #0b0b0b;border-width:0 2px 2px 0;transform:rotate(45deg)}
.check li.done{color:#9fb0c0;text-decoration:line-through;text-decoration-color:#5d7389}
.keys{display:grid;grid-template-columns:1fr 1fr;gap:6px;max-width:86%}
.keys span{text-align:center;font-size:14px;font-weight:600;padding:9px 6px;border-radius:10px;background:rgba(185,255,60,.13);color:var(--c)}
.phone figcaption{font-size:12.5px;color:#7f91a4;padding:12px 18px 14px;background:#17212b;line-height:1.4}

@media (prefers-reduced-motion:no-preference){
  .chat>*{opacity:0;transform:translateY(8px);animation:pop .45s cubic-bezier(.2,.7,.2,1) forwards}
  .chat>:nth-child(1){animation-delay:.35s}
  .chat>:nth-child(2){animation-delay:1.1s}
  .chat>:nth-child(3){animation-delay:1.6s}
  .chat>:nth-child(4){animation-delay:2.6s}
  @keyframes pop{to{opacity:1;transform:none}}
}

/* sections */
.story,.kit,.proof,.steps,.faq{padding-top:clamp(56px,8vw,96px);padding-bottom:clamp(56px,8vw,96px);border-top:1px solid var(--ln)}
.story-body{max-width:38em;display:grid;gap:18px;color:var(--tx2);font-size:clamp(17px,1.8vw,19px)}
.story-body p:first-child{color:var(--tx)}

.kit-list{display:grid;gap:0;border-top:1px solid var(--ln2)}
.kit-list>div{display:grid;gap:6px;padding:22px 0;border-bottom:1px solid var(--ln)}
.kit-list dt{font-weight:600;font-size:19px;line-height:1.3}
.kit-list dd{color:var(--tx2);max-width:40em}
.kit-note{margin-top:24px;font-size:15px;color:var(--mu);max-width:40em;padding-left:16px;border-left:2px solid var(--c)}

.proof-list{list-style:none;display:grid;gap:0}
.proof-list li{padding:22px 0;border-bottom:1px solid var(--ln);display:grid;gap:4px}
.proof-list li:first-child{border-top:1px solid var(--ln)}
.proof-list a{font-weight:900;font-size:clamp(24px,3.2vw,34px);letter-spacing:-.02em;text-decoration:none;line-height:1.15;width:max-content;max-width:100%}
.proof-list a:hover{color:var(--c)}
.proof-list p{color:var(--tx2);max-width:36em}

.step-list{list-style:none;counter-reset:s;display:grid;gap:28px}
.step-list li{counter-increment:s;position:relative;padding-top:18px;border-top:1px solid var(--ln2)}
.step-list li:before{content:counter(s);display:block;font-weight:900;font-size:28px;line-height:1;color:var(--c);margin-bottom:12px}
.step-list b{display:block;font-weight:600;font-size:18px;line-height:1.3;margin-bottom:6px}
.step-list p{color:var(--tx2);font-size:16px}

/* join */
.join{background:var(--bg2);border-top:1px solid var(--ln2);border-bottom:1px solid var(--ln);padding:clamp(56px,8vw,96px) 0;scroll-margin-top:0}
.join-in{display:grid;gap:40px}
.join-copy p{color:var(--tx2);max-width:30em}
.form{display:grid;gap:22px;max-width:560px}
.field{display:grid;gap:8px;border:0;min-width:0}
.field label,.field legend{font-weight:600;font-size:15px}
.field legend{margin-bottom:8px}
.opt{font-weight:400;color:var(--mu)}
input,textarea{font:inherit;font-size:17px;color:var(--tx);background:var(--bg);border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:14px 16px;width:100%;transition:border-color .15s}
textarea{resize:vertical;min-height:96px;line-height:1.45}
input::placeholder,textarea::placeholder{color:#6a6a6a}
input:focus,textarea:focus{outline:none;border-color:var(--c)}
input[aria-invalid=true]{border-color:var(--err)}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.seg label{position:relative;font-weight:600}
.seg input{position:absolute;opacity:0;width:1px;height:1px}
.seg span{display:block;text-align:center;padding:13px 8px;border:1px solid rgba(255,255,255,.18);border-radius:10px;cursor:pointer;color:var(--tx2);transition:border-color .15s,background .15s,color .15s}
.seg label:hover span{border-color:var(--ln2)}
.seg input:checked+span{background:var(--c);border-color:var(--c);color:#0b0b0b}
.seg input:focus-visible+span{outline:2px solid var(--c);outline-offset:3px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .btn{justify-self:start}
.msg-out{min-height:1.5em;font-size:16px;color:var(--tx2)}
.msg-out.ok{color:var(--c);font-weight:600}
.msg-out.err{color:var(--err)}

/* faq */
.faq details{border-bottom:1px solid var(--ln);max-width:46em}
.faq details:first-of-type{border-top:1px solid var(--ln)}
.faq summary{cursor:pointer;list-style:none;font-weight:600;font-size:18px;padding:20px 40px 20px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:4px;top:16px;font-size:24px;font-weight:400;color:var(--c);transition:transform .2s}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq details p{color:var(--tx2);padding:0 0 22px;max-width:40em}

.foot{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;align-items:center;padding-top:32px;padding-bottom:40px;font-size:14px;color:var(--mu)}

@media (min-width:900px){
  .hero{grid-template-columns:1.25fr .9fr;align-items:center}
  .kit-list>div{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:32px}
  .proof-list li{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:32px;align-items:baseline}
  .step-list{grid-template-columns:repeat(3,1fr);gap:32px}
  .join-in{grid-template-columns:1fr 1.15fr;align-items:start}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* portal additions (checkout CTA, login link, test note, footer links) */
.bar-nav{display:flex;gap:22px;align-items:center}
.bar-in{font-weight:600;font-size:15px;text-decoration:none;color:var(--tx2)}
.bar-in:hover{color:var(--c)}
.tnote{font-size:13px;color:#0b0b0b;background:#ffd66b;display:inline-block;padding:6px 10px;border-radius:6px;margin:16px 0 0}
.cta-row{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center}
.ghost{font-weight:600;font-size:15px;color:var(--tx2);text-decoration:none;border-bottom:1px solid var(--ln2);padding:4px 0}
.ghost:hover{color:var(--c)}
.foot{align-items:flex-start}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 18px}
.foot-links a{color:var(--mu)}
.op{flex-basis:100%;margin-top:4px}