/* ══════════════ KARUBO — shared design system (multi-page) ══════════════ */
:root{
  color-scheme: dark;
  --ink:#0A0A0C; --bg:#0A0A0C; --surface:#101014; --surface-2:#17171C; --line:#26262E;
  --text:#E9E3D6; --dim:#9C978B; --muted:#4A4740;
  --lime:#C6FF3D; --husk:#E9E3D6; --gold:#F5A623; --cyan:#3DE7FF;
  --acc:var(--lime);
  --glow:0 0 16px rgba(198,255,61,.45); --grid:rgba(198,255,61,.02);
  --display:"Outfit",system-ui,sans-serif; --cyr:"Manrope",var(--display);
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --maxw:1160px; --pad:clamp(20px,5vw,72px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
::selection{background:var(--lime);color:var(--ink)}
body{background:var(--bg);color:var(--text);font-family:var(--mono);font-size:14px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative}
a{color:var(--lime);text-decoration:none} button{font-family:inherit}
a,button,.clickable{cursor:crosshair}
/* custom carob cursor active → hide native pointers, canvas draws the reticle */
html.kcur a,html.kcur button,html.kcur input,html.kcur .clickable,html.kcur{cursor:none}
.gold{color:var(--gold)} .lm{color:var(--lime)} .hk{color:var(--husk)} .mono{font-family:var(--mono)}

/* ── background layers ─────────────────────────────────── */
#sim{position:fixed;inset:0;z-index:0;pointer-events:none;background:#0a0a0c;opacity:1;transition:opacity 1.2s}
body.booted #sim{opacity:.26}
.grid-bg{position:fixed;inset:0;z-index:1;pointer-events:none;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:64px 64px}
/* digital carob cursor */
#kcur{position:fixed;inset:0;z-index:10000;pointer-events:none;display:none}
html.kcur #kcur{display:block}
/* VHS scanline / tracking overlay (calm — must never wash out buttons) */
.vhs{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.16;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.4) 3px,transparent 4px)}
@media (prefers-reduced-motion: no-preference){.vhs{animation:vhsRoll 6s linear infinite}}
@keyframes vhsRoll{from{background-position:0 0}to{background-position:0 120px}}
/* subtle real-texture overlay */
.tex{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.1;background:url("assets/karubo-tex.jpg") center/cover;mix-blend-mode:soft-light}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);position:relative;z-index:2}

/* ── PRELOADER ─────────────────────────────────────────── */
.loader{position:fixed;inset:0;z-index:200;background:#050506;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;transition:opacity .6s,visibility .6s}
.loader.hidden{opacity:0;visibility:hidden}
.loader pre{font-family:var(--mono);font-size:12px;line-height:1.15;color:var(--lime);text-shadow:0 0 10px rgba(198,255,61,.5);margin:0}
.loader .txt{font-family:var(--mono);font-size:10.5px;letter-spacing:.4em;text-transform:uppercase;color:var(--dim);min-height:1.2em}
.loader .bar{width:200px;height:2px;background:#1a1a1f;overflow:hidden}
.loader .bar b{display:block;height:100%;width:0;background:var(--lime);box-shadow:0 0 10px var(--lime)}

/* ── GATE ──────────────────────────────────────────────── */
.gate{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:70px var(--pad);gap:22px;z-index:2}
.gate::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(58% 42% at 50% 47%,color-mix(in srgb,var(--bg) 80%,transparent) 0%,color-mix(in srgb,var(--bg) 30%,transparent) 54%,transparent 82%)}
.gate>h1,.gate>.line,.gate>.sub,.gate>.micro,.gate>.field,.gate>.msg,.gate>.hint{position:relative;z-index:1}
.gate h1{font-family:var(--display);font-weight:900;font-size:clamp(58px,15vw,180px);line-height:.85;letter-spacing:-.03em;text-transform:uppercase;color:var(--lime);text-shadow:0 0 34px rgba(198,255,61,.35)}
.gate .line{font-family:var(--display);font-weight:300;font-size:clamp(20px,4vw,38px);line-height:1.2;color:var(--text);max-width:18ch;text-shadow:0 2px 18px rgba(0,0,0,.5)}
.gate .line em{font-style:normal;color:var(--lime);text-shadow:0 0 18px rgba(198,255,61,.45)}
.gate .sub{font-family:var(--mono);font-size:clamp(11.5px,2.5vw,14px);line-height:1.7;color:var(--husk);max-width:50ch;text-shadow:0 1px 10px rgba(0,0,0,.55)}
.gate .micro{font-family:var(--mono);font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--dim);margin-top:2px}
.gate .field{display:flex;border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 74%,transparent);backdrop-filter:blur(6px);width:100%;max-width:420px;margin-top:8px}
.gate .field:focus-within{border-color:var(--lime)}
.gate .field input{flex:1;background:transparent;border:0;color:var(--text);font-family:var(--mono);font-size:15px;letter-spacing:.2em;text-transform:uppercase;padding:15px 16px;outline:none;min-width:0}
.gate .field input::placeholder{color:var(--dim)}
.gate .field button{background:transparent;border:0;border-left:1px solid var(--line);color:var(--lime);font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;padding:0 20px}
.gate .field button:hover{background:var(--lime);color:var(--ink)}
.gate .msg{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;min-height:1.3em;color:var(--dim);display:flex;gap:8px;align-items:center}
.gate .msg .d{width:6px;height:6px;border-radius:50%}
.gate .msg[data-s="err"]{color:#FF3DA6}.gate .msg[data-s="err"] .d{background:#FF3DA6}
.gate .msg[data-s="ok"]{color:var(--lime)}.gate .msg[data-s="ok"] .d{background:var(--lime)}
.gate .hint{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--muted);text-transform:uppercase}
.gate .hint span{color:var(--gold)}

/* ── APP / PAGE shell ──────────────────────────────────── */
.app{display:none} .app.on{display:block}
body.booted .sec,body.booted .cta,body.booted .foot,body.booted .plate{background:var(--bg);position:relative;z-index:1}
.topbar{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:52px}
.tb-brand{font-family:var(--display);font-weight:900;font-size:16px;letter-spacing:5px;text-transform:uppercase;color:var(--lime);display:flex;align-items:center;gap:9px}
.tb-brand a{color:inherit;display:inline-flex;align-items:center;gap:8px}
.tbmk{flex:none;color:var(--lime)}
.tb-nav{display:flex;gap:16px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;overflow-x:auto;scrollbar-width:none}
.tb-nav::-webkit-scrollbar{display:none}.tb-nav a{color:var(--dim);white-space:nowrap}.tb-nav a:hover,.tb-nav a.here{color:var(--lime)}
@media(max-width:820px){.tb-nav{display:none}}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px var(--lime);vertical-align:middle}
@media (prefers-reduced-motion: no-preference){.dot.blink{animation:blink 2s infinite}@keyframes blink{0%,70%{opacity:1}71%,100%{opacity:.2}}}

.sec-tag{font-size:10px;letter-spacing:.42em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;display:flex;align-items:center;gap:12px}
.sec-tag::before{content:"";width:34px;height:1px;background:var(--lime)}
.sec-tag b{color:var(--lime)}

.hero{padding:clamp(56px,12vh,120px) 0 clamp(40px,8vh,80px);position:relative}
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,transparent 0%,color-mix(in srgb,var(--bg) 42%,transparent) 46%,color-mix(in srgb,var(--bg) 86%,transparent) 100%)}
.hero .wrap{position:relative;z-index:2}
.hero h2{font-family:var(--display);font-weight:900;font-size:clamp(34px,7vw,84px);line-height:.98;letter-spacing:-.03em;text-transform:uppercase;max-width:15ch;text-shadow:0 2px 22px rgba(0,0,0,.45)}
.hero h2 .lm{color:var(--lime);text-shadow:0 0 26px rgba(198,255,61,.4)}
.hero .say{max-width:56ch;color:var(--husk);font-size:15px;line-height:1.75;margin-top:24px;text-shadow:0 1px 10px rgba(0,0,0,.4)}
.hero .say b{color:var(--text);font-weight:500}
.hero .facts{display:flex;flex-wrap:wrap;gap:24px 44px;margin-top:34px}
.fact .n{font-family:var(--display);font-weight:900;font-size:clamp(24px,5vw,42px);color:var(--lime);line-height:1;text-shadow:0 2px 16px rgba(0,0,0,.55)}
.fact .l{font-size:10px;letter-spacing:.18em;color:var(--dim);text-transform:uppercase;margin-top:8px;text-shadow:0 1px 8px rgba(0,0,0,.6)}
/* manifest play chip */
.mfab{display:inline-flex;align-items:center;gap:12px;margin-top:32px;font-family:var(--mono);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--text);background:transparent;border:1px solid color-mix(in srgb,var(--lime) 30%,var(--line));padding:16px 30px}
.mfab:hover{color:var(--lime);border-color:color-mix(in srgb,var(--lime) 55%,var(--line));background:color-mix(in srgb,var(--lime) 6%,transparent)}
.mfab i{width:0;height:0;border-left:12px solid var(--gold);border-top:8px solid transparent;border-bottom:8px solid transparent}

/* shared CTA buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:14px 24px;border:1px solid var(--lime);color:var(--lime);position:relative;overflow:hidden;background:transparent;transition:color .25s,border-color .25s}
.btn span{position:relative;z-index:2}
.btn::before{content:"";position:absolute;inset:0;z-index:0;background:var(--lime);transform:translateX(-101%);transition:transform .3s}
.btn:hover::before,.btn:focus-visible::before{transform:translateX(0)}
.btn.gold{border-color:var(--gold);color:var(--gold)}.btn.gold::before{background:var(--gold)}
.btn.ghost{border-color:var(--line);color:var(--dim)}.btn.ghost::before{display:none}.btn.ghost:hover,.btn.ghost:focus-visible{color:var(--text);border-color:var(--dim);background:transparent}
/* hover colour restated AFTER variants so it always wins (fixes gold-on-gold) */
.btn:hover,.btn:focus-visible{color:var(--ink)}
.btn.ghost:hover,.btn.ghost:focus-visible{color:var(--text)}
.btn:focus-visible{outline:2px solid var(--husk);outline-offset:3px}
@media (prefers-reduced-motion: reduce){.btn::before{transition:none}}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* ── FILM section (video underlay) + full-bleed band ───── */
.sec.film{position:relative;overflow:hidden;background:#050506}
.film .film-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.4;z-index:0;filter:saturate(.92) contrast(1.05)}
.film::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(10,10,12,.52) 0%,rgba(10,10,12,.62) 55%,rgba(10,10,12,.82) 100%)}
.film .wrap{position:relative;z-index:2}
.film .filmcap{position:absolute;left:var(--pad);bottom:14px;z-index:2;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.film .filmcap b{color:var(--lime)}
.filmband{position:relative;height:min(52vh,440px);overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#050506}
.filmband video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
.filmband::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,12,.7),transparent 45%,transparent 60%,rgba(10,10,12,.7)),linear-gradient(180deg,transparent 60%,rgba(10,10,12,.6))}
.filmband .cap{position:absolute;left:var(--pad);bottom:16px;z-index:2;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.filmband .cap b{color:var(--lime)}
.filmband.empty{display:none}

.sec{padding:clamp(52px,9vh,100px) 0;border-top:1px solid var(--line);position:relative}
.sec h3.h{font-family:var(--cyr);font-weight:800;font-size:clamp(28px,5.5vw,54px);line-height:1.04;letter-spacing:-.02em;margin-bottom:14px}
.sec h3.h .accent{color:var(--lime)}
.sec .lede{max-width:62ch;color:var(--husk);font-size:14px;line-height:1.75;margin-bottom:34px}
.sec .lede b{color:var(--text)}

/* philosophy pull */
.pull{max-width:30ch;font-family:var(--display);font-weight:300;font-size:clamp(26px,5vw,52px);line-height:1.08;letter-spacing:-.01em;margin-bottom:26px}
.pull b{font-weight:800;color:var(--lime)}
.body-lg{max-width:60ch;color:var(--husk);font-size:15px;line-height:1.85}
.body-lg b{color:var(--text)}

/* deposit access-code field */
.paycode{margin-top:4px;border-top:1px solid var(--line);padding-top:16px}
.paycode .or{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.cfield{display:flex;border:1px solid var(--line);background:color-mix(in srgb,var(--surface-2) 82%,transparent)}
.cfield:focus-within{border-color:var(--lime)}
.cfield input{flex:1;background:transparent;border:0;color:var(--text);font-family:var(--mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;padding:12px 14px;outline:none;min-width:0}
.cfield input::placeholder{color:var(--muted)}
.cfield button{background:transparent;border:0;border-left:1px solid var(--line);color:var(--lime);font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:0 16px;white-space:nowrap}
.cfield button:hover{background:var(--lime);color:var(--ink)}
.cmsg{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;min-height:1.3em;margin-top:8px;color:var(--dim)}
.cmsg[data-s="err"]{color:#FF3DA6}
.cmsg[data-s="ok"]{color:var(--lime)}

/* ── AGENTS ──────────────────────────────────────────── */
.activate{margin-top:30px;max-width:560px;border:1px solid color-mix(in srgb,var(--gold) 20%,var(--line));background:color-mix(in srgb,var(--gold) 4%,transparent);padding:18px}
.activate .or{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
/* ── AGENTS — specimen catalog ──────────────────────────── */
.agent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.agent{position:relative;isolation:isolate;background:var(--surface);padding:24px 22px 20px;display:flex;flex-direction:column;gap:11px;cursor:pointer;text-align:left;width:100%;border:0;font:inherit;color:inherit;overflow:hidden;transition:background .3s,transform .3s}
.agent::before{content:"";position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,var(--lime),transparent);transform:scaleX(0);transform-origin:left;transition:transform .45s ease;z-index:1}
.agent:hover,.agent:focus-visible{background:color-mix(in srgb,var(--lime) 5%,var(--surface));z-index:2}
.agent:hover{transform:translateY(-2px)}
.agent:hover::before,.agent:focus-visible::before{transform:scaleX(1)}
.agent:focus-visible{outline:none}
.agent .ag-reticle{position:absolute;inset:9px;pointer-events:none;opacity:0;transition:opacity .3s;background:linear-gradient(var(--lime),var(--lime)) 0 0/11px 1px no-repeat,linear-gradient(var(--lime),var(--lime)) 0 0/1px 11px no-repeat,linear-gradient(var(--lime),var(--lime)) 100% 0/11px 1px no-repeat,linear-gradient(var(--lime),var(--lime)) 100% 0/1px 11px no-repeat,linear-gradient(var(--lime),var(--lime)) 0 100%/11px 1px no-repeat,linear-gradient(var(--lime),var(--lime)) 0 100%/1px 11px no-repeat,linear-gradient(var(--lime),var(--lime)) 100% 100%/11px 1px no-repeat,linear-gradient(var(--lime),var(--lime)) 100% 100%/1px 11px no-repeat}
.agent:hover .ag-reticle,.agent:focus-visible .ag-reticle{opacity:.55}
.agent .ag-hd{display:flex;align-items:center;justify-content:space-between;gap:10px}
.agent .ag-tag{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--lime);border:1px solid color-mix(in srgb,var(--lime) 28%,var(--line));padding:4px 8px;transition:background .25s,color .25s,border-color .25s}
.agent:hover .ag-tag,.agent:focus-visible .ag-tag{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.agent .ag-no{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--muted)}
.agent .ag-name{font-family:var(--display);font-weight:900;font-size:clamp(23px,3vw,29px);line-height:.98;letter-spacing:-.015em;margin-top:2px}
.agent .ag-line{font-size:12.5px;color:var(--husk);line-height:1.5;font-weight:500;flex:1}
.agent .ag-more{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);transition:color .25s}
.agent .ag-more::after{content:"→";display:inline-block;transition:transform .25s}
.agent:hover .ag-more,.agent:focus-visible .ag-more{color:var(--lime)}
.agent:hover .ag-more::after,.agent:focus-visible .ag-more::after{transform:translateX(4px)}
.agent-grid.locked .ag-more{color:var(--gold)}
.agent-grid.locked .ag-more::before{content:"🔒 "}
html.kcur .agent{cursor:none}
@media (prefers-reduced-motion:no-preference){.agent{animation:agIn .5s both;animation-delay:calc(var(--i,0)*18ms)}@keyframes agIn{from{opacity:0}to{opacity:1}}}

/* agent dossier overlay (value, agents scope) */
.agv{position:fixed;inset:0;z-index:9999;background:rgba(4,4,6,.86);backdrop-filter:blur(7px);display:none;align-items:center;justify-content:center;padding:20px}
.agv.on{display:flex;animation:agvBg .3s ease}
@keyframes agvBg{from{opacity:0}to{opacity:1}}
.agv-card{position:relative;max-width:min(94vw,540px);max-height:88vh;overflow:auto;background:linear-gradient(180deg,var(--surface),var(--bg) 70%);border:1px solid var(--line);padding:38px 32px 32px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.agv-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--lime),transparent 72%)}
.agv.on .agv-card{animation:agvIn .42s cubic-bezier(.2,.8,.2,1) both}
@keyframes agvIn{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
.agv-card .x{position:absolute;top:14px;right:14px;width:34px;height:34px;background:transparent;border:1px solid var(--line);color:var(--dim);font-family:var(--mono);font-size:13px;cursor:pointer;transition:.2s}
.agv-card .x:hover{border-color:var(--lime);color:var(--lime)}
.agv-hd{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.agv-tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);background:var(--lime);padding:4px 9px}
.agv-no{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.agv-name{font-family:var(--display);font-weight:900;font-size:clamp(30px,6vw,44px);line-height:.95;letter-spacing:-.025em;text-transform:uppercase;margin-top:14px}
.agv-line{font-size:15px;color:var(--text);line-height:1.5;margin-top:10px;font-weight:600}
.agv-sec{margin-top:20px}
.agv-k{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:7px}
.agv-desc{font-size:13.5px;color:var(--husk);line-height:1.7}
.agv-demo{margin-top:20px}
.agv-dk{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:9px}
.demo-log{border:1px solid var(--line);background:color-mix(in srgb,var(--lime) 3%,var(--bg));font-family:var(--mono);font-size:12px;line-height:1.55}
.demo-row{display:grid;grid-template-columns:74px 1fr;gap:10px;padding:10px 12px;border-top:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
.demo-row:first-child{border-top:0}
.demo-k{font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);padding-top:3px;align-self:start;word-break:break-word}
.demo-row.run .demo-k{color:var(--lime)}
.demo-row.out .demo-k{color:var(--gold)}
.demo-t{color:var(--husk)}
.demo-row.run .demo-t,.demo-row.out .demo-t{color:var(--text)}
.agv-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:16px}
.agv-stats .stat{background:var(--surface);padding:12px 14px}
.stat-n{font-family:var(--display);font-weight:900;font-size:clamp(18px,3.4vw,24px);line-height:1;letter-spacing:-.01em;color:var(--lime)}
.stat-l{font-family:var(--mono);font-size:8.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--dim);margin-top:6px;line-height:1.3}
.agv-problem{font-size:13.5px;color:var(--husk);line-height:1.7}
.agv-metarow{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:16px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.agv-mcell .agv-k{margin-bottom:8px}
.agv-for{font-family:var(--mono);font-size:11.5px;color:var(--husk);line-height:1.5}
.agv-stack,.agv-pairs{display:flex;flex-wrap:wrap;gap:5px}
.schip{font-family:var(--mono);font-size:9px;letter-spacing:.03em;color:var(--dim);border:1px solid var(--line);padding:4px 7px}
.pchip{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--lime);border:1px solid color-mix(in srgb,var(--lime) 28%,var(--line));padding:4px 8px}
.pchip.lnk{cursor:pointer;transition:background .2s,color .2s}
.pchip.lnk:hover{background:var(--lime);color:var(--ink)}
html.kcur .pchip.lnk{cursor:none}
.agv-value{margin-top:18px;border:1px solid color-mix(in srgb,var(--gold) 28%,var(--line));border-left:2px solid var(--gold);padding:14px 16px;background:color-mix(in srgb,var(--gold) 6%,transparent)}
.agv-vlabel{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:7px}
.agv-value p{font-size:13.5px;color:var(--text);line-height:1.6}
html.kcur .agv-card .x{cursor:none}
@media (prefers-reduced-motion:reduce){.agv.on,.agv.on .agv-card,.agent{animation:none}}

/* locked activate pulse */
.activate.pulse{animation:agpulse .5s ease}
@keyframes agpulse{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
@media (prefers-reduced-motion: reduce){.activate.pulse{animation:none}}
/* contact box (reuses .cfield / .cmsg) */
.contactbox{max-width:440px;margin:22px auto 0;text-align:left}
.gate-contact{width:100%;max-width:420px;margin-top:6px}
.gate-nocode{background:transparent;border:0;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);cursor:crosshair;padding:4px}
.gate-nocode:hover{color:var(--lime)} html.kcur .gate-nocode{cursor:none}
.gate>.gate-nocode,.gate>.gate-contact{position:relative;z-index:1}

/* services */
.svc-list{border:1px solid var(--line);margin-top:6px}
.svc{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(14px,3vw,30px);align-items:center;padding:22px 24px;background:var(--surface);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.svc:last-child{border-bottom:0}
.svc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--lime);transform:scaleY(0);transform-origin:top;transition:transform .4s}
.svc:hover::before{transform:scaleY(1)}
@media (prefers-reduced-motion: reduce){.svc::before{transition:none}}
.svc .idx{font-family:var(--display);font-weight:900;font-size:22px;color:var(--muted);line-height:1}
.svc .bd h4{font-family:var(--display);font-weight:800;font-size:clamp(17px,2.6vw,22px);line-height:1.05}
.svc .bd p{font-size:12.5px;color:var(--husk);line-height:1.6;margin-top:6px;max-width:66ch}
.svc .price{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);text-align:right;white-space:nowrap}
@media(max-width:680px){.svc{grid-template-columns:auto 1fr}.svc .price{grid-column:1/-1;text-align:left;padding-left:38px}}

/* deposit */
.deposit{display:grid;grid-template-columns:1.25fr 1fr;gap:2px;border:1px solid var(--line);margin-top:6px}
.deposit>div{background:var(--surface);padding:28px 26px}
.deposit .amt{font-family:var(--display);font-weight:900;font-size:clamp(46px,9vw,92px);color:var(--gold);line-height:.86;text-shadow:0 0 30px rgba(245,166,35,.3)}
.deposit .amt small{display:block;font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-top:12px}
.deposit .foot-note{font-size:10.5px;color:var(--muted);line-height:1.6;margin-top:12px}
.deposit .pay{display:flex;flex-direction:column;gap:14px;justify-content:center}
.deposit .pay .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--lime)}
.deposit .chip{display:flex;gap:8px;flex-wrap:wrap}
.deposit .chip span{font-family:var(--mono);font-size:10px;letter-spacing:.06em;border:1px solid var(--line);padding:7px 11px;color:var(--husk)}
@media(max-width:680px){.deposit{grid-template-columns:1fr}}

/* page head (sub-pages) */
.pagehead{padding:clamp(70px,14vh,150px) 0 clamp(28px,6vh,56px);position:relative}
.pagehead h1{font-family:var(--display);font-weight:900;font-size:clamp(36px,8vw,88px);line-height:.98;letter-spacing:-.03em;text-transform:uppercase;max-width:17ch}
.pagehead h1 .lm{color:var(--lime)}
.pagehead .intro{max-width:64ch;color:var(--husk);font-size:14px;line-height:1.75;margin-top:22px}
.pagehead .intro b{color:var(--text)}
.tierleg{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:22px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.tierleg span{border:1px solid var(--line);padding:5px 9px}
.tierleg b.t1{color:var(--gold)} .tierleg b.t2{color:var(--lime)} .tierleg b.t3{color:var(--cyan)}
.plate{padding:clamp(28px,6vh,64px) 0;border-top:1px solid var(--line);position:relative}

/* networks catalog table (spheres) */
.sph-wrap{border:1px solid var(--line);overflow-x:auto;-webkit-overflow-scrolling:touch}
.sph-table{width:100%;border-collapse:collapse;min-width:660px;font-family:var(--mono)}
.sph-table th{text-align:left;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:400;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--surface-2);white-space:nowrap}
.sph-table td{padding:15px 18px;border-bottom:1px solid var(--line);font-size:13px;color:var(--text);vertical-align:middle}
.sph-table tbody tr:last-child td{border-bottom:0}
.sph-table tbody tr{transition:background .2s}
.sph-table tbody tr:hover{background:var(--surface)}
.sph-table .nm{font-family:var(--display);font-weight:800;font-size:15px;color:var(--text);white-space:nowrap}
.sph-table .geo{font-size:11px;letter-spacing:.06em;color:var(--husk);white-space:nowrap}
.sph-table .price{font-family:var(--display);font-weight:900;font-size:16px;white-space:nowrap}
.sph-table .price.t1{color:var(--gold)} .sph-table .price.t2{color:var(--lime)} .sph-table .price.t3{color:var(--cyan)}
.sph-table .demo{font-size:11px;color:var(--dim)}
.sph-table .reach{font-family:var(--display);font-weight:800;font-size:14px;color:var(--text);white-space:nowrap}
.sph-table .reach small{display:block;font-family:var(--mono);font-weight:400;font-size:10px;color:var(--dim);letter-spacing:.04em}
@media (prefers-reduced-motion: reduce){.sph-table tbody tr{transition:none}}

/* calculator */
.calc-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 26px}
.calc-tabs button{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);background:transparent;border:1px solid var(--line);padding:10px 18px}
.calc-tabs button:hover{color:var(--lime);border-color:color-mix(in srgb,var(--lime) 40%,var(--line))}
.calc-tabs button.on{color:var(--ink);background:var(--lime);border-color:var(--lime)}
.calc{display:grid;grid-template-columns:1fr 1fr;gap:2px;border:1px solid var(--line)}
.calc>div{background:var(--surface);padding:26px}
.calc .field-l{display:flex;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--lime);margin:18px 0 8px}
.calc .col-in>.field-l:first-child{margin-top:0}
.calc .field-l b{color:var(--text);font-family:var(--display);font-weight:800}
.calc input[type=range]{width:100%;accent-color:var(--lime);cursor:crosshair}
.calc .seg{display:flex;gap:4px;flex-wrap:wrap}
.calc .seg button{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;border:1px solid var(--line);background:transparent;color:var(--dim);padding:8px 11px}
.calc .seg button.on{color:var(--ink);background:var(--husk);border-color:var(--husk)}
.calc .col-out{display:flex;flex-direction:column}
.calc .out-tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.calc .big{font-family:var(--display);font-weight:900;font-size:clamp(30px,5.5vw,50px);color:var(--gold);line-height:1;margin:2px 0 4px;text-shadow:0 0 22px rgba(245,166,35,.25)}
.calc .orow{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:13px}
.calc .orow .k{color:var(--dim);font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
.calc .orow .v{color:var(--text);text-align:right;font-weight:500}
.calc .orow .v.save{color:var(--lime)}
.calc .result{font-size:13px;color:var(--husk);line-height:1.65;margin:16px 0 4px}
.calc .result b{color:var(--text)}
.disc{font-size:10.5px;color:var(--muted);margin-top:20px;line-height:1.6;max-width:70ch}
@media(max-width:680px){.calc{grid-template-columns:1fr}}

/* cta */
.cta{border-top:1px solid var(--line);text-align:center;padding:clamp(60px,11vh,120px) 0}
.cta h3{font-family:var(--display);font-weight:900;font-size:clamp(28px,6vw,58px);line-height:1;letter-spacing:-.02em;text-transform:uppercase}
.cta h3 .lm{color:var(--lime);text-shadow:0 0 22px rgba(198,255,61,.35)}
.cta p{max-width:46ch;margin:18px auto 0;color:var(--husk);font-size:13.5px;line-height:1.7}
.cta .btn-row{justify-content:center}

.foot{border-top:1px solid var(--line);padding:40px 0 26px}
.foot .g{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-end}
.foot .b{font-family:var(--display);font-weight:900;font-size:26px;letter-spacing:4px;text-transform:uppercase;color:var(--lime);display:flex;align-items:center;gap:10px}
.foot .meta{font-size:10px;letter-spacing:.16em;color:var(--dim);text-transform:uppercase;line-height:2;text-align:right}.foot .meta b{color:var(--lime)}
@media(max-width:640px){.foot .g{flex-direction:column;align-items:flex-start}.foot .meta{text-align:left}}
.silent{font-size:10px;letter-spacing:.32em;color:var(--muted);text-transform:uppercase;text-align:center;margin-top:30px}
/* language toggle (unobtrusive) */
.langtoggle{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:20px;font-family:var(--mono);font-size:10px;letter-spacing:.14em}
.langtoggle button{background:transparent;border:0;color:var(--muted);font:inherit;letter-spacing:inherit;text-transform:uppercase;padding:2px 4px;cursor:crosshair}
.langtoggle button.on{color:var(--lime)} .langtoggle button:hover{color:var(--husk)}
.langtoggle i{color:var(--muted);font-style:normal}
.gate-lang{position:absolute;bottom:18px;left:0;right:0;z-index:1;margin-top:0}
html.kcur .langtoggle button{cursor:none}

/* manifest video overlay */
.vov{position:fixed;inset:0;z-index:9999;background:rgba(4,4,6,.92);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:20px}
.vov.on{display:flex}
.vov video{max-width:min(94vw,440px);max-height:86vh;border:1px solid var(--line);box-shadow:0 0 60px rgba(0,0,0,.7)}
.vov .x{position:absolute;top:16px;right:18px;width:40px;height:40px;background:transparent;border:1px solid var(--line);color:var(--text);font-family:var(--mono);font-size:15px}
.vov .x:hover{border-color:var(--lime);color:var(--lime)}

.ticker{position:fixed;bottom:0;left:0;right:0;z-index:55;background:#050506;border-top:1px solid var(--line);overflow:hidden;height:32px;display:none;align-items:center}
body.booted .ticker{display:flex}
.ticker-run{display:flex;gap:38px;white-space:nowrap;padding-left:100%;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
@media (prefers-reduced-motion: no-preference){.ticker-run{animation:tick 34s linear infinite}}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker-run i{width:6px;height:6px;border-radius:50%;background:var(--lime);display:inline-block;margin-right:7px}
.ticker-run .g i{background:var(--gold)}.ticker-run .c i{background:var(--cyan)}
body.booted{padding-bottom:32px}

@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
@media (prefers-reduced-motion: no-preference){html.js [data-anim]{opacity:0;transform:translateY(20px);transition:opacity .6s,transform .6s}html.js [data-anim].vis{opacity:1;transform:none}}