@property --angle { syntax:'<angle>'; initial-value:0deg; inherits:false; }
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg-void:#000;--bg-surface:#060810;--bg-raised:#0a1220;--bg-card:#0d1628;--bg-deep:#030611;
  --ocean-abyssal:#041e33;--ocean-dim:#0c4a6e;--ocean-muted:#075985;--ocean-core:#0369a1;
  --ocean-bright:#0ea5e9;--ocean-vivid:#38bdf8;--ocean-hot:#7dd3fc;--ocean-white:#e0f2fe;
  --coral:#f97316;--bio:#22d3ee;--gold:#fbbf24;--sea-foam:#d1fae5;
  --glow-subtle:0 0 4px rgba(14,165,233,.3);
  --glow-medium:0 0 12px rgba(14,165,233,.4),0 0 4px rgba(14,165,233,.6);
  --glow-intense:0 0 20px rgba(14,165,233,.5),0 0 8px rgba(14,165,233,.7),0 0 40px rgba(14,165,233,.2);
  --glow-neon:0 0 4px #0ea5e9,0 0 12px rgba(14,165,233,.6),0 0 30px rgba(14,165,233,.3),0 0 60px rgba(14,165,233,.15);
  --glow-coral:0 0 12px rgba(249,115,22,.4),0 0 30px rgba(249,115,22,.15);
  --font-display:'Orbitron',sans-serif;--font-body:'Rajdhani',sans-serif;--font-mono:'JetBrains Mono',monospace;
  --ease-smooth:cubic-bezier(.4,0,.2,1);--ease-bounce:cubic-bezier(.34,1.56,.64,1);--ease-spring:cubic-bezier(.175,.885,.32,1.275);
}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{background:var(--bg-void);color:#e2e8f0;font-family:var(--font-body);font-weight:400;line-height:1.6;overflow-x:hidden;cursor:default}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;background:
  radial-gradient(ellipse at top,rgba(14,165,233,.08),transparent 60%),
  radial-gradient(ellipse at bottom,rgba(7,89,133,.06),transparent 60%);}
body::after{content:'';position:fixed;inset:0;pointer-events:none;opacity:.025;z-index:1;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E")}
a{color:var(--ocean-bright);text-decoration:none;transition:color .2s,text-shadow .2s}
a:hover{color:var(--ocean-vivid);text-shadow:0 0 8px rgba(56,189,248,.5)}
::selection{background:rgba(14,165,233,.3);color:#fff}

/* Boot overlay */
#bootOverlay{position:fixed;inset:0;background:var(--bg-void);z-index:10000;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .8s .3s,visibility 0s 1.1s;font-family:var(--font-mono);font-size:.85rem;color:var(--ocean-vivid)}
#bootOverlay.hidden{opacity:0;visibility:hidden}
#bootOverlay .boot-logo{font-family:var(--font-display);font-size:3rem;font-weight:900;letter-spacing:.2em;color:var(--ocean-vivid);margin-bottom:2rem;text-shadow:var(--glow-medium);opacity:0;animation:bootLogoIn 1.2s .1s var(--ease-smooth) forwards}
#bootOverlay .boot-trident{font-size:2.5rem;color:var(--ocean-bright);margin-bottom:1rem;opacity:0;animation:bootTridentIn 1s var(--ease-spring) forwards}
#bootOverlay .boot-lines{min-height:120px;text-align:left;min-width:280px}
#bootOverlay .boot-line{opacity:0;animation:bootLineIn .4s forwards}
#bootOverlay .boot-line:nth-child(1){animation-delay:.8s}
#bootOverlay .boot-line:nth-child(2){animation-delay:1.0s}
#bootOverlay .boot-line:nth-child(3){animation-delay:1.2s}
#bootOverlay .boot-line:nth-child(4){animation-delay:1.4s}
#bootOverlay .boot-line .ok{color:#22c55e}
#bootOverlay .boot-line .dim{color:#64748b}
@keyframes bootLogoIn{0%{opacity:0;letter-spacing:.5em;filter:blur(8px)}100%{opacity:1;letter-spacing:.2em;filter:blur(0)}}
@keyframes bootTridentIn{0%{opacity:0;transform:scale(.5) rotate(-20deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes bootLineIn{to{opacity:1}}

/* Scroll progress */
#scrollProgress{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,var(--ocean-core),var(--ocean-vivid),var(--bio));box-shadow:var(--glow-medium);z-index:1001;transition:width .1s;width:0}

/* HUD (top-right floating status) */
#hud{position:fixed;top:1rem;right:1rem;z-index:999;font-family:var(--font-mono);font-size:.7rem;color:var(--ocean-bright);background:rgba(6,8,16,.7);backdrop-filter:blur(10px);border:1px solid rgba(14,165,233,.15);border-radius:6px;padding:.4rem .7rem;letter-spacing:.05em;display:none;opacity:0;transition:opacity .4s}
#hud.visible{display:block;opacity:1}
#hud .hud-row{display:flex;gap:.5rem;align-items:center}
#hud .hud-dot{width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 4px #22c55e;animation:pulse 1.5s infinite}
@media(max-width:900px){#hud{display:none !important}}

/* Nav */
nav{position:fixed;top:0;width:100%;z-index:1000;padding:1rem 2rem;display:flex;align-items:center;justify-content:space-between;transition:all .3s var(--ease-smooth)}
nav.scrolled{background:rgba(0,0,0,.85);backdrop-filter:blur(20px) saturate(1.2);border-bottom:1px solid rgba(14,165,233,.1)}
.nav-logo{font-family:var(--font-display);font-size:.9rem;font-weight:700;letter-spacing:.15em;display:flex;align-items:center;gap:.75rem;color:var(--ocean-vivid)}
.nav-logo .icon{width:32px;height:32px;border:1.5px solid var(--ocean-bright);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:900;box-shadow:var(--glow-subtle);transition:all .3s;position:relative;overflow:hidden}
.nav-logo .icon::after{content:'';position:absolute;inset:0;background:conic-gradient(from var(--angle),transparent,rgba(14,165,233,.4),transparent);animation:spin 3s linear infinite;opacity:0}
.nav-logo:hover .icon::after{opacity:1}
@keyframes spin{to{--angle:360deg}}
.nav-logo:hover .icon{box-shadow:var(--glow-medium);border-color:var(--ocean-vivid)}
.nav-links{display:flex;gap:1.5rem;list-style:none;align-items:center}
.nav-links a{font-family:var(--font-body);font-weight:500;font-size:.92rem;color:#94a3b8;transition:color .2s;position:relative}
.nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:1px;background:var(--ocean-bright);transition:width .3s}
.nav-links a:hover,.nav-links a.active{color:var(--ocean-bright)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}

/* Page headers (non-hero pages) */
.page-head{max-width:1200px;margin:0 auto;padding:8rem 2rem 3rem;position:relative}
.page-head .kicker{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ocean-bright);margin-bottom:.75rem}
.page-head h1{font-family:var(--font-display);font-size:clamp(2.4rem,5vw,4rem);font-weight:700;letter-spacing:.04em;margin-bottom:1rem;background:linear-gradient(135deg,var(--ocean-vivid),var(--ocean-hot),#fff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.page-head .lede{color:#94a3b8;font-size:1.1rem;max-width:780px;line-height:1.6}

/* Hero */
#hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;padding:2rem;overflow:hidden}
#heroCanvas{position:absolute;inset:0;z-index:0}
#causticLayer{position:absolute;inset:0;z-index:0;opacity:.4;mix-blend-mode:screen;pointer-events:none}
.hero-content{position:relative;z-index:2}
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ocean-bright);border:1px solid rgba(14,165,233,.3);padding:.4rem 1rem;border-radius:100px;margin-bottom:1.5rem;background:rgba(14,165,233,.05);backdrop-filter:blur(8px)}
.hero-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--ocean-bright);box-shadow:var(--glow-subtle);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}}
.hero-title{font-family:var(--font-display);font-size:clamp(2.8rem,8vw,6rem);font-weight:900;letter-spacing:.08em;line-height:1;margin-bottom:1rem;background:linear-gradient(135deg,var(--ocean-vivid),var(--ocean-hot),#fff,var(--bio));background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:titleGradient 8s ease infinite;filter:drop-shadow(0 0 30px rgba(14,165,233,.3))}
@keyframes titleGradient{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.hero-epithet{font-family:var(--font-display);font-size:clamp(.8rem,1.3vw,1rem);letter-spacing:.5em;color:var(--ocean-muted);margin-bottom:1.5rem;text-transform:uppercase}
.hero-sub{font-size:clamp(1rem,2vw,1.35rem);color:#cbd5e1;max-width:620px;margin:0 auto 2rem;font-weight:300;line-height:1.5}
.hero-sub .hl{color:var(--ocean-bright);font-weight:500}
.hero-prompt{display:inline-flex;align-items:center;gap:.75rem;font-family:var(--font-mono);font-size:.85rem;padding:.7rem 1.2rem;background:rgba(6,8,16,.75);border:1px solid rgba(14,165,233,.25);border-radius:6px;margin-bottom:2rem;backdrop-filter:blur(10px);max-width:92vw;overflow:hidden;text-align:left}
.hero-prompt .prompt-dollar{color:var(--coral)}
.hero-prompt .prompt-cmd{color:var(--ocean-hot)}
.hero-prompt .prompt-arg{color:#cbd5e1}
.hero-prompt .prompt-flag{color:var(--gold)}
.hero-prompt .prompt-cursor{display:inline-block;width:8px;height:1em;background:var(--ocean-hot);animation:blink 1s infinite;vertical-align:middle;margin-left:2px}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.hero-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.btn{font-family:var(--font-body);font-weight:600;font-size:1rem;padding:.8rem 2rem;border-radius:8px;border:none;cursor:pointer;transition:all .3s var(--ease-bounce);display:inline-flex;align-items:center;gap:.5rem;position:relative;overflow:hidden;letter-spacing:.02em}
.btn-primary{background:linear-gradient(135deg,var(--ocean-core),var(--ocean-bright));color:#fff;box-shadow:var(--glow-medium)}
.btn-primary::before{content:'';position:absolute;inset:-2px;background:linear-gradient(135deg,var(--ocean-vivid),var(--bio));border-radius:8px;z-index:-1;opacity:0;transition:opacity .3s;filter:blur(8px)}
.btn-primary:hover{transform:translateY(-2px) scale(1.03);box-shadow:var(--glow-intense)}
.btn-primary:hover::before{opacity:1}
.btn-secondary{background:transparent;color:var(--ocean-bright);border:1px solid rgba(14,165,233,.4)}
.btn-secondary:hover{background:rgba(14,165,233,.1);border-color:var(--ocean-bright);transform:translateY(-2px)}
.hero-stats{display:flex;gap:3rem;justify-content:center;margin-top:3rem;flex-wrap:wrap}
.hero-stat{text-align:center;min-width:90px}
.hero-stat .num{font-family:var(--font-display);font-size:2.5rem;font-weight:900;color:var(--ocean-vivid);text-shadow:0 0 20px rgba(14,165,233,.4);line-height:1}
.hero-stat .label{font-size:.78rem;color:#64748b;text-transform:uppercase;letter-spacing:.15em;margin-top:.25rem}
.hero-scroll{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);font-family:var(--font-mono);font-size:.7rem;color:var(--ocean-muted);letter-spacing:.2em;writing-mode:vertical-rl;animation:scrollCue 2s infinite}
@keyframes scrollCue{0%,100%{transform:translateX(-50%) translateY(0);opacity:.4}50%{transform:translateX(-50%) translateY(8px);opacity:1}}

/* Section base */
section{padding:7rem 2rem;max-width:1200px;margin:0 auto;position:relative}
.section-label{font-family:var(--font-mono);font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ocean-bright);margin-bottom:1rem;display:flex;align-items:center;gap:1rem}
.section-label::before{content:'';width:40px;height:1px;background:var(--ocean-bright);box-shadow:0 0 4px var(--ocean-bright)}
.section-title{font-family:var(--font-display);font-size:clamp(1.8rem,4vw,2.8rem);font-weight:700;letter-spacing:.04em;margin-bottom:1rem;color:#f1f5f9}
.section-desc{color:#94a3b8;font-size:1.1rem;max-width:720px;margin-bottom:3rem}

/* Wave divider (between sections) */
.wave-divider{display:block;width:100%;height:60px;margin:-30px 0}

/* Stats ticker */
.ticker{overflow:hidden;border-top:1px solid rgba(14,165,233,.1);border-bottom:1px solid rgba(14,165,233,.1);background:rgba(6,8,16,.5);padding:.75rem 0;margin:0 -2rem}
.ticker-track{display:flex;gap:4rem;animation:ticker 60s linear infinite;font-family:var(--font-mono);font-size:.85rem;color:var(--ocean-muted);white-space:nowrap;padding-left:4rem}
.ticker-track span{letter-spacing:.1em}
.ticker-track .val{color:var(--ocean-vivid)}
@keyframes ticker{to{transform:translateX(-50%)}}

/* Feature grid */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1.5rem}
.feature-card{background:linear-gradient(180deg,var(--bg-raised),var(--bg-card));border:1px solid rgba(14,165,233,.08);border-radius:14px;padding:1.75rem 1.5rem;transition:all .4s var(--ease-smooth);position:relative;overflow:hidden;cursor:default}
.feature-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--ocean-bright),transparent);opacity:0;transition:opacity .3s}
.feature-card::after{content:'';position:absolute;inset:-1px;border-radius:14px;padding:1px;background:linear-gradient(135deg,rgba(14,165,233,.3),transparent,rgba(34,211,238,.2));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s;pointer-events:none}
.feature-card:hover{transform:translateY(-4px);border-color:transparent;box-shadow:0 20px 48px rgba(0,0,0,.5),0 0 40px rgba(14,165,233,.15)}
.feature-card:hover::before,.feature-card:hover::after{opacity:1}
.feature-card .fc-head{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem}
.feature-card .fc-glyph{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(14,165,233,.3);border-radius:8px;background:rgba(14,165,233,.05);flex-shrink:0;transition:all .3s}
.feature-card:hover .fc-glyph{box-shadow:0 0 12px rgba(14,165,233,.3);border-color:var(--ocean-bright);transform:rotate(5deg) scale(1.05)}
.feature-card .fc-glyph svg{width:20px;height:20px;stroke:var(--ocean-vivid);fill:none;stroke-width:1.5}
.feature-card h3{font-family:var(--font-display);font-size:.95rem;font-weight:600;color:var(--ocean-vivid);letter-spacing:.05em;flex:1}
.feature-card p{font-size:.92rem;color:#a3b4cf;line-height:1.55}
.feature-card .count{font-family:var(--font-mono);font-size:.72rem;color:var(--ocean-muted);margin-top:.9rem;letter-spacing:.1em;display:flex;align-items:center;gap:.5rem}
.feature-card .count::before{content:'';width:8px;height:8px;border:1px solid var(--ocean-muted);transform:rotate(45deg)}

/* Page-teaser cards (home → subpage links) */
.teaser-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.25rem;margin-top:2rem}
.teaser{background:linear-gradient(180deg,var(--bg-raised),var(--bg-card));border:1px solid rgba(14,165,233,.1);border-radius:14px;padding:1.5rem;transition:all .35s var(--ease-smooth);text-decoration:none;color:inherit;position:relative;overflow:hidden;display:block}
.teaser::before{content:'';position:absolute;inset:-1px;border-radius:14px;padding:1px;background:linear-gradient(135deg,rgba(14,165,233,.35),transparent 50%,rgba(34,211,238,.2));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s;pointer-events:none}
.teaser:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.45),0 0 28px rgba(14,165,233,.12)}
.teaser:hover::before{opacity:1}
.teaser .t-num{font-family:var(--font-mono);font-size:.75rem;color:var(--ocean-muted);letter-spacing:.22em}
.teaser h3{font-family:var(--font-display);font-size:1.2rem;color:var(--ocean-vivid);margin:.6rem 0 .5rem;letter-spacing:.04em}
.teaser p{font-size:.93rem;color:#a3b4cf;line-height:1.55}
.teaser .t-arrow{margin-top:1rem;font-family:var(--font-mono);font-size:.85rem;color:var(--ocean-bright);letter-spacing:.08em;display:flex;align-items:center;gap:.35rem;transition:gap .25s}
.teaser:hover .t-arrow{gap:.7rem;color:var(--ocean-vivid)}

/* Hardware */
.hw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.5rem}
.hw-card{background:linear-gradient(180deg,var(--bg-raised),var(--bg-card));border:1px solid rgba(14,165,233,.08);border-radius:14px;padding:2rem;transition:all .3s;position:relative;overflow:hidden}
.hw-card::before{content:'';position:absolute;top:0;right:0;width:80px;height:80px;background:radial-gradient(circle at top right,rgba(14,165,233,.15),transparent 70%);pointer-events:none}
.hw-card:hover{border-color:rgba(14,165,233,.25);box-shadow:0 12px 32px rgba(0,0,0,.4)}
.hw-card h3{font-family:var(--font-display);font-size:1rem;color:var(--ocean-vivid);margin-bottom:1rem;display:flex;align-items:center;gap:.6rem;letter-spacing:.05em}
.hw-card h3 .chip{font-family:var(--font-mono);font-size:.65rem;color:var(--coral);border:1px solid rgba(249,115,22,.3);padding:2px 6px;border-radius:4px;font-weight:400}
.hw-card table{width:100%;font-size:.86rem}
.hw-card td{padding:.4rem 0;color:#a3b4cf;border-bottom:1px solid rgba(255,255,255,.03)}
.hw-card td:first-child{color:#cbd5e1;font-weight:500;width:38%;font-size:.8rem;letter-spacing:.03em}

/* Roadmap */
.roadmap{position:relative;padding-left:2.5rem}
.roadmap::before{content:'';position:absolute;left:.9rem;top:.5rem;bottom:.5rem;width:2px;background:linear-gradient(180deg,var(--ocean-vivid),var(--ocean-core),var(--ocean-muted),transparent);border-radius:2px}
.rm-item{position:relative;margin-bottom:2.5rem}
.rm-item::before{content:'';position:absolute;left:-1.6rem;top:1rem;width:14px;height:14px;border-radius:50%;background:var(--bg-void);border:2px solid var(--ocean-bright);box-shadow:0 0 8px var(--ocean-bright)}
.rm-item.shipped::before{background:var(--ocean-bright)}
.rm-item.current::before{animation:rmPulse 1.8s infinite}
.rm-item.planned::before{border-color:var(--ocean-muted);box-shadow:none}
@keyframes rmPulse{0%,100%{box-shadow:0 0 0 0 rgba(14,165,233,.6),0 0 8px var(--ocean-bright)}50%{box-shadow:0 0 0 8px rgba(14,165,233,0),0 0 8px var(--ocean-bright)}}
.rm-card{background:linear-gradient(180deg,var(--bg-raised),var(--bg-card));border:1px solid rgba(14,165,233,.08);border-radius:12px;padding:1.25rem 1.5rem;transition:all .3s}
.rm-card:hover{border-color:rgba(14,165,233,.2);transform:translateX(4px)}
.rm-head{display:flex;align-items:baseline;gap:.75rem;margin-bottom:.4rem;flex-wrap:wrap}
.rm-ver{font-family:var(--font-display);font-size:1.1rem;font-weight:700;color:var(--ocean-vivid);letter-spacing:.05em}
.rm-date{font-family:var(--font-mono);font-size:.72rem;color:var(--ocean-muted);letter-spacing:.1em}
.rm-tag{font-family:var(--font-mono);font-size:.65rem;padding:2px 8px;border-radius:100px;letter-spacing:.1em;text-transform:uppercase}
.rm-tag.shipped{background:rgba(34,197,94,.1);color:#22c55e;border:1px solid rgba(34,197,94,.25)}
.rm-tag.current{background:rgba(14,165,233,.1);color:var(--ocean-bright);border:1px solid rgba(14,165,233,.3)}
.rm-tag.planned{background:rgba(148,163,184,.06);color:#94a3b8;border:1px solid rgba(148,163,184,.2)}
.rm-title{font-family:var(--font-display);font-size:1rem;color:#e2e8f0;margin-bottom:.5rem;letter-spacing:.03em}
.rm-body{color:#94a3b8;font-size:.92rem;line-height:1.5}
.rm-body ul{list-style:none;padding:0;margin-top:.5rem}
.rm-body li{padding:.25rem 0;padding-left:1.2rem;position:relative;color:#a3b4cf;font-size:.88rem}
.rm-body li::before{content:'▸';position:absolute;left:0;color:var(--ocean-bright);font-size:.7rem;top:.45rem}

/* Theme cards */
.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem}
.theme-card{background:var(--bg-raised);border-radius:10px;padding:1rem;text-align:center;border:1px solid rgba(255,255,255,.05);transition:all .3s var(--ease-smooth);position:relative;overflow:hidden}
.theme-card:hover{border-color:rgba(14,165,233,.3);transform:translateY(-3px) scale(1.02)}
.theme-swatch{width:100%;height:44px;border-radius:6px;margin-bottom:.75rem;position:relative;overflow:hidden}
.theme-swatch::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,.2) 50%,transparent 60%);transform:translateX(-100%);transition:transform .6s}
.theme-card:hover .theme-swatch::after{transform:translateX(100%)}
.theme-card .name{font-family:var(--font-display);font-size:.75rem;color:#e2e8f0;letter-spacing:.1em}

/* Testers */
.testers-intro{color:#94a3b8;font-size:1.05rem;max-width:780px;margin-bottom:2rem}
.testers-intro code{background:rgba(14,165,233,.1);padding:1px 6px;border-radius:4px;color:var(--ocean-vivid);font-family:var(--font-mono);font-size:.85em}
.test-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem;margin-bottom:2rem}
.test-card{background:linear-gradient(180deg,var(--bg-raised),var(--bg-card));border:1px solid rgba(14,165,233,.1);border-radius:14px;padding:1.5rem;position:relative;overflow:hidden}
.test-card::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%;background:var(--ocean-bright)}
.test-card.p1::before{background:var(--coral);box-shadow:0 0 12px rgba(249,115,22,.4)}
.test-card.p2::before{background:var(--ocean-vivid);box-shadow:0 0 12px rgba(56,189,248,.4)}
.test-card.p3::before{background:var(--gold);box-shadow:0 0 12px rgba(251,191,36,.4)}
.test-card.p4::before{background:var(--bio)}
.test-prio{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.2em;color:var(--ocean-muted);text-transform:uppercase;margin-bottom:.4rem}
.test-card h3{font-family:var(--font-display);font-size:.95rem;color:#f1f5f9;margin-bottom:.6rem;letter-spacing:.05em}
.test-card p{font-size:.88rem;color:#a3b4cf;line-height:1.5;margin-bottom:.75rem}
.test-steps{list-style:none;padding:0;font-size:.85rem;color:#cbd5e1}
.test-steps li{padding:.2rem 0 .2rem 1.2rem;position:relative;line-height:1.4}
.test-steps li::before{content:'▸';position:absolute;left:0;color:var(--ocean-bright);font-size:.7rem;top:.3rem}
.test-note{margin-top:.75rem;padding:.6rem .75rem;background:rgba(251,191,36,.06);border-left:2px solid var(--gold);font-size:.82rem;color:#cbd5e1;border-radius:4px}
.test-report{background:linear-gradient(180deg,var(--bg-raised),var(--bg-card));border:1px solid rgba(14,165,233,.08);border-radius:12px;padding:1.5rem;margin-top:1rem}
.test-report h4{font-family:var(--font-display);font-size:.9rem;color:var(--ocean-vivid);margin-bottom:.75rem;letter-spacing:.05em}
.test-report ul{list-style:none;padding:0;font-size:.88rem;color:#a3b4cf}
.test-report li{padding:.25rem 0 .25rem 1.2rem;position:relative}
.test-report li::before{content:'—';position:absolute;left:0;color:var(--ocean-muted)}

/* Credits / shoutouts */
.credits-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem}
.credit-card{display:flex;align-items:center;gap:.9rem;background:var(--bg-raised);border:1px solid rgba(14,165,233,.06);border-radius:10px;padding:.9rem 1rem;transition:all .3s;text-decoration:none}
.credit-card:hover{border-color:rgba(14,165,233,.25);background:var(--bg-card);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.3)}
.credit-card .avatar{width:40px;height:40px;border-radius:8px;flex-shrink:0;background:linear-gradient(135deg,var(--ocean-core),var(--ocean-muted));display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:900;font-size:.9rem;color:#fff;overflow:hidden;border:1px solid rgba(14,165,233,.2)}
.credit-card .avatar img{width:100%;height:100%;object-fit:cover;display:block}
.credit-card .meta{flex:1;min-width:0}
.credit-card .handle{font-family:var(--font-mono);font-size:.75rem;color:var(--ocean-bright);letter-spacing:.04em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.credit-card .role{font-size:.78rem;color:#94a3b8;line-height:1.3;margin-top:2px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.credit-card .arrow{color:var(--ocean-muted);opacity:.5;transition:all .2s;flex-shrink:0}
.credit-card:hover .arrow{opacity:1;transform:translateX(2px);color:var(--ocean-bright)}

/* Download CTA */
.cta-section{text-align:center;padding:8rem 2rem;position:relative;max-width:900px;margin:0 auto}
.cta-section::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:80%;height:1px;background:linear-gradient(90deg,transparent,var(--ocean-bright),transparent)}
.cta-section .btn-primary{font-size:1.2rem;padding:1.1rem 3rem}
.cta-version{font-family:var(--font-mono);font-size:.8rem;color:#64748b;margin-top:1rem;letter-spacing:.1em}
.cta-install{margin-top:2rem;text-align:left;display:inline-block;background:rgba(6,8,16,.7);border:1px solid rgba(14,165,233,.15);border-radius:8px;padding:1rem 1.5rem;font-family:var(--font-mono);font-size:.85rem;color:#a3b4cf}
.cta-install .prompt-dollar{color:var(--coral);margin-right:.5rem}
.cta-install .comment{color:var(--ocean-muted)}

/* Footer */
footer{border-top:1px solid rgba(14,165,233,.08);padding:4rem 2rem 2rem;text-align:center;position:relative}
footer::before{content:'';position:absolute;top:-1px;left:50%;transform:translateX(-50%);width:120px;height:3px;background:var(--ocean-vivid);box-shadow:var(--glow-medium);border-radius:100px}
footer .foot-glyph{font-family:var(--font-display);font-size:2rem;color:var(--ocean-vivid);letter-spacing:.3em;margin-bottom:1rem}
footer .suite-label{font-family:var(--font-mono);font-size:.7rem;color:var(--ocean-muted);letter-spacing:.2em;margin-bottom:1rem}
footer .suite-links{display:flex;gap:2rem;justify-content:center;flex-wrap:wrap;margin-bottom:2rem}
footer .suite-links a{font-family:var(--font-mono);font-size:.8rem;color:#64748b;letter-spacing:.1em;transition:color .2s}
footer .suite-links a:hover{color:var(--ocean-bright)}
footer .copy{font-family:var(--font-mono);font-size:.72rem;color:#334155;letter-spacing:.1em}

/* Scroll reveal */
.reveal{opacity:0;transform:translateY(40px);transition:all .8s var(--ease-smooth)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-left{opacity:0;transform:translateX(-40px);transition:all .8s var(--ease-smooth)}
.reveal-left.visible{opacity:1;transform:translateX(0)}

/* ─────────────────────────────────────────
 *  PREEM PASS — cyber/tech visual polish
 * ───────────────────────────────────────── */

/* CRT scanline overlay (applied to <body>). Very subtle. */
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:2;opacity:.35;background:
  radial-gradient(ellipse at top,rgba(14,165,233,.09),transparent 60%),
  radial-gradient(ellipse at bottom,rgba(7,89,133,.06),transparent 60%),
  repeating-linear-gradient(to bottom,transparent 0,transparent 2px,rgba(14,165,233,.022) 3px,transparent 4px);}
/* CRT soft vignette + RGB subpixel shimmer */
html::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:3;background:
  radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.45) 100%),
  repeating-linear-gradient(90deg,rgba(255,0,80,.010) 0,rgba(0,255,180,.010) 1px,rgba(0,120,255,.010) 2px);mix-blend-mode:overlay;opacity:.7}

/* Rolling chromatic scanline that sweeps once every 7s */
#crtSweep{position:fixed;top:-4rem;left:0;right:0;height:6rem;pointer-events:none;z-index:4;
  background:linear-gradient(180deg,transparent 0%,rgba(14,165,233,.06) 45%,rgba(125,211,252,.10) 50%,rgba(14,165,233,.06) 55%,transparent 100%);
  animation:crtSweep 7s linear infinite;mix-blend-mode:screen}
@keyframes crtSweep{0%{top:-6rem}100%{top:110vh}}

/* Matrix rain layer (behind everything) */
#matrixRain{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.25}

/* Corner brackets — stamp on any container to make it feel like a HUD frame */
.frame{position:relative}
.frame::before,.frame::after,.frame>.cnr-tl,.frame>.cnr-tr,.frame>.cnr-bl,.frame>.cnr-br{
  content:'';position:absolute;width:14px;height:14px;border:1.5px solid var(--ocean-bright);pointer-events:none;z-index:5}
.frame::before{top:-2px;left:-2px;border-right:none;border-bottom:none}
.frame::after{top:-2px;right:-2px;border-left:none;border-bottom:none}
.frame>.cnr-bl{bottom:-2px;left:-2px;border-right:none;border-top:none}
.frame>.cnr-br{bottom:-2px;right:-2px;border-left:none;border-top:none}

/* Page-head turns into a hollow HUD panel with corner ticks */
.page-head{border-top:1px solid rgba(14,165,233,.12);border-bottom:1px solid rgba(14,165,233,.12);background:
  linear-gradient(180deg,rgba(14,165,233,.03),transparent 60%);position:relative;overflow:hidden}
.page-head::before{content:'';position:absolute;top:6rem;right:2rem;width:12rem;height:12rem;
  background:conic-gradient(from 0deg,rgba(14,165,233,.12),transparent 30%,rgba(34,211,238,.12) 55%,transparent 80%);
  filter:blur(30px);animation:huddle 12s linear infinite;pointer-events:none;border-radius:50%}
@keyframes huddle{to{transform:rotate(360deg)}}
.page-head h1{position:relative;z-index:1}
.page-head::after{content:'';position:absolute;left:0;bottom:-1px;width:160px;height:2px;background:var(--ocean-vivid);box-shadow:var(--glow-medium)}

/* Hex-grid faint backdrop element */
.hexgrid{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.45;background-image:
  linear-gradient(30deg,transparent 47%,rgba(14,165,233,.08) 49%,rgba(14,165,233,.08) 51%,transparent 53%),
  linear-gradient(-30deg,transparent 47%,rgba(14,165,233,.08) 49%,rgba(14,165,233,.08) 51%,transparent 53%),
  linear-gradient(90deg,transparent 47%,rgba(14,165,233,.06) 49%,rgba(14,165,233,.06) 51%,transparent 53%);
  background-size:42px 72px,42px 72px,42px 72px;mask-image:radial-gradient(ellipse at center,#000 20%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse at center,#000 20%,transparent 80%)}

/* Glitch effect on hero title */
.hero-title{position:relative}
.hero-title[data-text]::before,.hero-title[data-text]::after{content:attr(data-text);position:absolute;inset:0;background:inherit;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;pointer-events:none;mix-blend-mode:screen}
.hero-title[data-text]::before{left:2px;text-shadow:-2px 0 rgba(255,0,120,.6);clip-path:polygon(0 0,100% 0,100% 48%,0 48%);animation:glitchTop 6s infinite steps(1)}
.hero-title[data-text]::after {left:-2px;text-shadow:2px 0 rgba(0,255,255,.6);clip-path:polygon(0 52%,100% 52%,100% 100%,0 100%);animation:glitchBot 6s infinite steps(1)}
@keyframes glitchTop{0%,97%,100%{transform:translate(0)}97.5%{transform:translate(-3px,-1px)}98%{transform:translate(4px,1px)}98.5%{transform:translate(-2px,0)}99%{transform:translate(3px,1px)}99.5%{transform:translate(0,-1px)}}
@keyframes glitchBot{0%,97%,100%{transform:translate(0)}97.5%{transform:translate(3px,1px)}98%{transform:translate(-4px,-1px)}98.5%{transform:translate(2px,0)}99%{transform:translate(-3px,-1px)}99.5%{transform:translate(0,1px)}}

/* Nav becomes a denser HUD bar with a technical read-out on the right */
nav{border-bottom:1px solid transparent;transition:background .3s,border-color .3s,box-shadow .3s}
nav.scrolled{box-shadow:0 12px 40px -20px rgba(14,165,233,.4)}
.nav-logo .icon{background:linear-gradient(135deg,rgba(14,165,233,.25),transparent 60%)}
.nav-logo .icon::before{content:'';position:absolute;inset:3px;border:1px dashed rgba(14,165,233,.3);border-radius:4px;animation:spin 18s linear infinite reverse}
.nav-links a{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase}
.nav-links a::before{content:'[';opacity:0;margin-right:.15rem;color:var(--ocean-bright);transition:opacity .25s}
.nav-links a::after{content:']';opacity:0;margin-left:.15rem;color:var(--ocean-bright);transition:opacity .25s;background:none;width:auto;height:auto;bottom:auto;left:auto;position:static;transition:opacity .25s}
.nav-links a:hover::before,.nav-links a.active::before,
.nav-links a:hover::after,.nav-links a.active::after{opacity:1}

/* Card sheen — thin diagonal light that sweeps once on hover */
.feature-card .sheen,.teaser .sheen,.hw-card .sheen,.rm-card .sheen{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(125deg,transparent 38%,rgba(255,255,255,.08) 50%,transparent 62%);transform:translateX(-120%);transition:transform .9s var(--ease-smooth)}
.feature-card:hover .sheen,.teaser:hover .sheen,.hw-card:hover .sheen,.rm-card:hover .sheen{transform:translateX(120%)}
/* Pseudo equivalent that doesn't require an extra DOM node */
.feature-card::after{background:linear-gradient(135deg,rgba(14,165,233,.3),transparent,rgba(34,211,238,.2))}

/* Terminal readout strip — drop under page heads for that "console ready" feel */
.console-strip{max-width:1200px;margin:-1rem auto 1rem;padding:0 2rem}
.console-strip .console-bar{display:flex;gap:1.5rem;align-items:center;padding:.6rem 1rem;border:1px solid rgba(14,165,233,.14);border-radius:6px;background:rgba(6,10,22,.85);backdrop-filter:blur(10px);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;color:#64748b;flex-wrap:wrap;position:relative;overflow:hidden}
.console-strip .console-bar::before{content:'';position:absolute;left:0;top:0;height:100%;width:3px;background:linear-gradient(180deg,var(--ocean-vivid),var(--bio));box-shadow:0 0 8px var(--ocean-bright)}
.console-strip .ck{color:#22c55e}.console-strip .nm{color:var(--ocean-vivid)}
.console-strip .vk{color:var(--gold)}
.console-strip .blink{animation:blink 1.2s infinite;color:var(--ocean-vivid)}

/* Big "v0.4" chip for feature cards */
.chip-ship{display:inline-block;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;padding:.15rem .45rem;border-radius:3px;background:rgba(34,197,94,.12);color:#22c55e;border:1px solid rgba(34,197,94,.35);margin-left:.4rem;vertical-align:middle}

/* Section title: add a mono count badge */
.section-title .tag{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.18em;color:var(--ocean-muted);vertical-align:middle;margin-left:1rem;border:1px solid rgba(14,165,233,.2);padding:.2rem .55rem;border-radius:3px}

/* Badge ticker: second ticker line for the hero */
.sub-ticker{position:relative;background:transparent;border:none;padding:0;margin-top:.5rem;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}

/* Hero badge upgrade — pulsing "LIVE" strip */
.hero-badge{position:relative}
.hero-badge::before{content:'';position:absolute;inset:-1px;border-radius:100px;padding:1px;background:conic-gradient(from var(--angle),rgba(14,165,233,.8),transparent 40%,rgba(34,211,238,.8),transparent 80%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 4s linear infinite;opacity:.9}

/* Cursor-following spotlight (subtle; set from JS) */
#spotlight{position:fixed;pointer-events:none;z-index:1;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(14,165,233,.12) 0%,transparent 70%);mix-blend-mode:screen;transform:translate(-50%,-50%);transition:opacity .3s;opacity:0}
body.has-cursor #spotlight{opacity:1}
@media(hover:none){#spotlight{display:none}}

/* Data stream panel — terminal-style box that we can drop anywhere */
.stream-panel{background:rgba(4,8,18,.92);border:1px solid rgba(14,165,233,.18);border-radius:8px;font-family:var(--font-mono);font-size:.82rem;color:#cbd5e1;padding:.9rem 1.1rem;line-height:1.55;position:relative;overflow:hidden}
.stream-panel::before{content:'';position:absolute;left:0;top:0;height:100%;width:2px;background:linear-gradient(180deg,var(--ocean-vivid),var(--bio));box-shadow:0 0 6px var(--ocean-bright)}
.stream-panel .dim{color:#64748b}.stream-panel .good{color:#22c55e}.stream-panel .warn{color:var(--gold)}.stream-panel .hot{color:var(--coral)}.stream-panel .ocean{color:var(--ocean-vivid)}
.stream-panel .head{display:flex;gap:.5rem;align-items:center;font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ocean-bright);margin-bottom:.5rem;padding-bottom:.4rem;border-bottom:1px dashed rgba(14,165,233,.1)}
.stream-panel .head .led{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 6px #22c55e;animation:pulse 1.5s infinite}

/* Bigger hero stat numbers with glow + monospace underscore for depth */
.hero-stat .num{background:linear-gradient(180deg,#e0f2fe 0%,var(--ocean-vivid) 80%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;position:relative;display:inline-block}
.hero-stat .num::after{content:'';display:block;width:40%;height:1px;background:var(--ocean-bright);margin:.25rem auto 0;box-shadow:0 0 4px var(--ocean-bright);opacity:.6}

/* Make .count pills more HUD-like */
.feature-card .count{font-family:var(--font-mono);text-transform:uppercase}
.feature-card .count::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(14,165,233,.3),transparent);margin-left:.5rem}

/* Download / CTA: give it a "deploying" loader feel */
.cta-section .btn-primary{position:relative}
.cta-section .btn-primary::after{content:'';position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);width:70%;height:2px;background:linear-gradient(90deg,transparent,var(--ocean-vivid),transparent);animation:cta-sweep 2.5s linear infinite}
@keyframes cta-sweep{0%{opacity:0;transform:translateX(-70%)}10%,90%{opacity:1}100%{opacity:0;transform:translateX(70%)}}

/* Footer gets a dense glyph bar */
footer::after{content:'01001000 01010101 01001110 01010100  ·  01010010 01010101 01001110  ·  01010011 01001000 01001001 01010000';display:block;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.08em;color:#1e293b;margin-top:1.5rem;opacity:.6}

/* Mobile */
@media(max-width:768px){
  .nav-links{display:none}
  .hero-stats{gap:1.25rem;margin-top:2rem}
  .hero-stat{min-width:80px}
  .hero-stat .num{font-size:1.8rem}
  .hero-btns{flex-direction:column;align-items:stretch;width:100%;max-width:320px}
  .hero-prompt{font-size:.7rem}
  section{padding:4rem 1.25rem}
  .page-head{padding:6rem 1.25rem 2rem}
  .credits-grid{grid-template-columns:1fr}
  #spotlight{display:none}
}