:root{
  --bg:#0b100e; --surf:#121a17; --surf2:#17221d; --line:#2a3a33;
  --ink:#e8efe9; --mute:#a2b3a9; --lime:#d5f25a; --lime-d:#b8d63c; --coral:#ff9a73;
  --head:"Geologica","Segoe UI",system-ui,sans-serif;
  --body:"Golos Text","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --pad:clamp(20px,5vw,64px);
  --hh:64px;
}
*{box-sizing:border-box}
html{scroll-padding-top:var(--hh);background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1rem/1.65 var(--body);overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--head);margin:0;line-height:1.08;letter-spacing:-.015em}
h1{font-size:clamp(2.5rem,9.5vw,5.6rem);font-weight:700}
h1 em{font-style:normal;color:var(--lime)}
h2{font-size:clamp(1.9rem,5.5vw,3.2rem);font-weight:700}
h3{font-size:1.25rem;font-weight:500}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--pad)}
.wrap--narrow{max-width:820px}

/* stage: fixed background with the WebGL canvas and SVG fallback */
.stage{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.stage__gl{position:absolute;inset:0;width:100%;height:100%;display:none}
.gl-on .stage__gl{display:block}
.stage__fb{position:absolute;width:min(78vw,420px);top:11vh;left:50%;translate:-50% 0;transition:opacity .4s}
.gl-on .stage__fb{display:none}
.fb{opacity:0;transition:opacity .5s}
[data-scene="0"] .fb--0,[data-scene="1"] .fb--1,[data-scene="2"] .fb--2,[data-scene="3"] .fb--3{opacity:1}
body:not([data-scene]) .fb--0{opacity:1}
.stage--off{visibility:hidden}

/* header: kit pill, fixed over the stage */
.kit-nav{position:fixed;inset:var(--kit-nav-top) 0 auto 0;margin:0;--kit-nav-font:var(--body);--kit-nav-bg:rgba(18,26,23,.88);--kit-nav-fg:var(--ink);--kit-nav-fg-muted:#b5c4ba;--kit-nav-border:var(--line);--kit-nav-hover:rgba(213,242,90,.1);--kit-nav-current-bg:var(--lime);--kit-nav-current-fg:#0b100e;--kit-nav-focus:var(--lime);--kit-nav-panel-bg:var(--surf);--kit-nav-blur:blur(10px);
  --kit-contacts-fg:var(--ink);--kit-contacts-border:var(--line);--kit-contacts-hover:rgba(213,242,90,.1);--kit-contacts-focus:var(--lime);--kit-sk-base:#17221d;--kit-sk-highlight:rgba(213,242,90,.12);--kit-sk-radius:50%}
.kit-nav__brand{font-family:var(--head);letter-spacing:.04em;gap:8px}
.kit-nav__brand b{color:var(--lime);font-weight:700}
.brand__mark{width:16px;height:16px;border-radius:50%;border:4px solid var(--lime)}
.tag{font:500 .68rem var(--mono);text-transform:uppercase;letter-spacing:.1em;border:1px solid var(--lime);color:var(--lime);border-radius:99px;padding:1px 8px;margin-left:4px}
.stats{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:32px;font:400 .82rem var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--mute)}
.stats b{font:700 1.6rem var(--head);color:var(--lime);margin-right:4px;letter-spacing:0}
.stage>.stage__in{position:absolute;inset:0}
.stage__orb{position:absolute;width:min(60vw,320px);aspect-ratio:1;top:calc(11vh + 40px);left:50%;translate:-50% 0}
@media (min-width:860px){.stage__orb{left:auto;right:calc(6vw + 50px);translate:0 0;top:50%;margin-top:-160px}}

/* shared bits */
.eyebrow{display:flex;align-items:center;gap:10px;font:500 .78rem var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--lime);margin-bottom:18px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px var(--lime)}
.lead{font-size:1.1rem;color:var(--mute);max-width:34rem;margin-top:20px}
.note{color:var(--mute);margin-top:14px;max-width:40rem}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:99px;border:1.5px solid var(--line);background:rgba(18,26,23,.7);color:var(--ink);font:600 .95rem var(--body);text-decoration:none;cursor:pointer;transition:transform .2s,background .2s,border-color .2s}
.btn:hover{border-color:var(--lime);transform:translateY(-2px)}
.btn--main{background:var(--lime);color:#0b100e;border-color:var(--lime)}
.btn--main:hover{background:var(--lime-d)}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* hero + story are transparent so the canvas shows through */
.zone{position:relative;z-index:1}
.hero{min-height:100svh;display:flex;align-items:flex-end;padding:calc(var(--hh) + 24px) 0 48px}
.hero__in{max-width:1200px}
.hero h1,.hero .lead,.hero .eyebrow,.hero .cta,.hero .scrollhint{max-width:36rem}
.scrollhint{margin-top:36px;font:400 .78rem var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--mute)}
.hero .eyebrow,.hero h1,.hero .lead,.hero .cta,.scrollhint{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.hero h1{animation-delay:.08s}.hero .lead{animation-delay:.16s}.hero .cta{animation-delay:.24s}.scrollhint{animation-delay:.32s}
@keyframes rise{from{opacity:0;transform:translateY(24px)}}

.story{position:relative}
.js .story{height:420svh}
.story__sticky{padding:56px 0}
.js .story__sticky{position:sticky;top:0;height:100svh;padding:0;display:flex;align-items:flex-end}
.story__in{position:relative;padding-bottom:40px}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:20px;max-width:30rem}
.step{background:rgba(11,16,14,.78);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:20px;padding:22px}
.step h3{font-size:clamp(1.35rem,4.5vw,1.9rem);font-weight:700;margin-bottom:10px}
.step p:last-child{color:var(--mute)}
.step .eyebrow{margin-bottom:12px}
.js .steps{display:block;position:relative;min-height:15.5rem}
.js .step{position:absolute;left:0;right:0;bottom:0;opacity:0;transform:translateY(18px);pointer-events:none;transition:opacity .45s,transform .45s}
.js [data-step="0"] .step[data-i="0"],.js [data-step="1"] .step[data-i="1"],.js [data-step="2"] .step[data-i="2"],.js [data-step="3"] .step[data-i="3"]{opacity:1;transform:none;pointer-events:auto}
.rail{display:none}
.js .rail{display:block;position:absolute;right:var(--pad);top:calc(var(--hh) + 24px);bottom:40px;width:3px;background:var(--line);border-radius:3px;overflow:hidden}
.rail i{display:block;width:100%;height:calc(var(--p,0) * 100%);background:var(--lime)}

/* sections with an opaque background */
.sec{position:relative;z-index:2;background:var(--bg);padding:clamp(72px,12vw,140px) 0}
.sec--alt{background:var(--surf)}
.feat{list-style:none;margin:40px 0 0;padding:0;border-top:1px solid var(--line)}
.feat li{display:grid;grid-template-columns:3rem 1fr;gap:4px 12px;padding:22px 0;border-bottom:1px solid var(--line)}
.feat .num{grid-row:span 2;font:500 .78rem var(--mono);color:var(--lime);letter-spacing:.14em;padding-top:.6em}
.feat h3{font-size:clamp(1.3rem,3.5vw,1.9rem);font-weight:700}
.feat p{color:var(--mute);max-width:34rem}
@media (min-width:860px){
  .feat li{grid-template-columns:4rem 1fr 1.2fr;align-items:baseline;gap:24px}
  .feat .num{grid-row:auto}
}
.foot__contacts{margin-top:16px}
.foot__label{font:500 .72rem var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--lime);margin-bottom:10px}
.foot__links{display:flex;gap:24px;margin-top:16px}

.specs{margin:40px 0 0;display:grid;gap:0;border-top:1px solid var(--line)}
.specs div{display:grid;gap:4px;padding:16px 0;border-bottom:1px solid var(--line)}
.specs dt{font:500 .78rem var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--mute)}
.specs dd{margin:0;font:500 1.15rem var(--head)}
@media (min-width:700px){.specs{grid-template-columns:1fr 1fr;column-gap:56px}}

/* comparison: stacked cards on mobile, table from 760px */
.cmp{width:100%;margin-top:36px;border-collapse:collapse}
.cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.cmp tr{display:block;border:1px solid var(--line);border-radius:16px;padding:14px 18px;margin-bottom:12px;background:var(--surf)}
.cmp tbody th{display:block;text-align:left;font:500 1.05rem var(--head);padding-bottom:8px}
.cmp td{display:flex;justify-content:space-between;gap:12px;padding:6px 0;color:var(--mute);border-top:1px dashed var(--line)}
.cmp td::before{content:attr(data-l);font:400 .78rem var(--mono);text-transform:uppercase;letter-spacing:.08em;align-self:center}
.cmp .cmp__me{color:var(--lime);font-weight:600}
@media (min-width:760px){
  .cmp thead{position:static;width:auto;height:auto;clip:auto;overflow:visible}
  .cmp tr{display:table-row;border:0;border-radius:0;padding:0;margin:0;background:none}
  .cmp th,.cmp td{display:table-cell;padding:18px 14px;border-bottom:1px solid var(--line);border-top:0;text-align:left}
  .cmp thead th{font:500 .78rem var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--mute)}
  .cmp thead .cmp__me{color:var(--lime)}
  .cmp td::before{content:none}
  .cmp tbody th{padding-bottom:18px}
  .cmp .cmp__me{background:rgba(213,242,90,.06)}
}

/* preorder */
.pre{display:grid;gap:40px}
.plans{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px}
.plan{border:1px solid var(--line);border-radius:20px;padding:22px;background:var(--bg)}
.plan--hi{border-color:var(--lime)}
.plan h3{font-size:1.5rem;font-weight:700}
.price{font:700 1.7rem var(--head);margin:8px 0}
.price small{font:400 .75rem var(--mono);color:var(--coral);text-transform:uppercase;letter-spacing:.1em;margin-left:6px}
.plan p:last-child{color:var(--mute)}
.form{background:var(--bg);border:1px solid var(--line);border-radius:24px;padding:clamp(20px,4vw,36px);align-self:start}
.form label:not(.check){display:block;font:500 .78rem var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--mute);margin-top:18px}
.form input[type=text],.form input[type=email],.form select{width:100%;min-height:48px;margin-top:8px;padding:0 14px;background:var(--surf);color:var(--ink);border:1.5px solid var(--line);border-radius:12px;font:inherit}
.form input[aria-invalid=true],.form select[aria-invalid=true]{border-color:var(--coral)}
.check{display:flex;gap:12px;align-items:flex-start;margin-top:20px;cursor:pointer;color:var(--ink)}
.check input{width:22px;height:22px;margin-top:2px;accent-color:var(--lime);flex:none}
.err{min-height:0;color:var(--coral);font-size:.88rem;margin-top:6px}
.form .btn{width:100%;margin-top:24px}
.status{margin-top:14px;color:var(--lime);font-weight:500}
.fine{color:var(--mute);font-size:.85rem;margin-top:10px}
@media (min-width:900px){.pre{grid-template-columns:1fr 1fr;gap:64px}}

.faq{margin-top:32px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;font:500 1.1rem var(--head);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:50%;translate:0 -50%;font:400 1.6rem var(--mono);color:var(--lime);transition:rotate .2s}
.faq details[open] summary::after{rotate:45deg}
.faq details p{color:var(--mute);padding:0 0 22px;max-width:40rem}

.foot{position:relative;z-index:2;background:var(--bg);border-top:1px solid var(--line);padding:40px 0}
.foot__in{display:grid;gap:8px;color:var(--mute)}
.foot b{color:var(--ink)}

/* desktop: text left, object right */
@media (min-width:860px){
  .hero{align-items:center;padding-bottom:0}
  .js .story__sticky{align-items:center}
  .story__in{padding-bottom:0}
  .stage__fb{left:auto;right:6vw;translate:0 0;top:50%;margin-top:-210px;width:420px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
.nf{max-width:760px;padding-top:clamp(64px,14vh,140px);padding-bottom:64px}