:root{
  --bg:#0b0d12; --bg2:#0f1220; --fg:#e6e9f2; --muted:#9aa3b2; --acc:#7ddcff;
  --glass:rgba(255,255,255,.06); --glass-b:rgba(255,255,255,.12);
  --radius:18px; --shadow:0 10px 30px rgba(0,0,0,.35); --max:1100px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background: radial-gradient(1200px 800px at 10% -10%, #1a2040 0%, #0c0f1c 40%, var(--bg) 100%); color:var(--fg);
  font:16px/1.55 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial; overflow-x:hidden}
a{color:inherit; text-decoration:none}

.nav{position:fixed; left:20px; right:20px; top:20px; z-index:50; display:flex; align-items:center; justify-content:space-between;
  backdrop-filter: blur(10px); background:var(--glass); border:1px solid var(--glass-b); border-radius:var(--radius);
  padding:10px 14px; box-shadow:var(--shadow)}
.brand{font-weight:800; letter-spacing:.4px}
.brand .dot{color:var(--acc)}
.links{display:flex; gap:12px}
.links a{padding:.45rem .9rem; border-radius:999px; border:1px solid rgba(255,255,255,.14); background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); font-weight:600}
.links a:hover{border-color:rgba(125,220,255,.7)}
.links a.primary{border-color:rgba(125,220,255,.55)}
.links a.active{box-shadow:0 0 0 1px rgba(125,220,255,.35) inset}

.hero{position:relative; height:100vh; display:grid; place-items:center; overflow:hidden}
.hero.compact{height:70vh}
#webgl{position:absolute; inset:0; pointer-events:none}
.hero-inner{position:relative; z-index:1; text-align:center; max-width:850px; padding:0 18px}
.kicker{color:var(--acc); font-weight:800; letter-spacing:.25em; text-transform:uppercase; font-size:.8rem}
h1{margin:.5rem 0 1rem; font-size:clamp(2.2rem, 5vw, 4rem); line-height:1.05}
.sub{color:var(--muted); font-size:clamp(1rem, 1.7vw, 1.2rem)}
.cta{margin-top:18px; display:flex; gap:10px; justify-content:center}
.btn{padding:.6rem 1rem; border-radius:999px; border:1px solid rgba(255,255,255,.18); background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); font-weight:700}
.btn.primary{border-color:rgba(125,220,255,.6)}
.scrollhint{position:absolute; bottom:24px; left:50%; transform:translateX(-50%); color:var(--muted); font-size:.85rem}

section{padding:96px 18px; background:linear-gradient(180deg, transparent, rgba(255,255,255,.02))}
.container{max-width:var(--max); margin:0 auto}
.heading{font-size:clamp(1.8rem,4vw,2.4rem); margin:0 0 12px}
.lead{color:var(--muted); max-width:820px}

.grid{margin-top:24px; display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:18px}
.card{position:relative; display:block; border-radius:var(--radius); overflow:hidden; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--glass-b); box-shadow:var(--shadow); transition:transform .2s ease, border-color .2s ease}
.card:hover{transform:translateY(-4px) scale(1.01); border-color:rgba(125,220,255,.35)}
.thumb{height:165px; background:linear-gradient(120deg, #263057, #1a1f38); display:grid; place-items:center; color:#cfe9ff; font-weight:800}
.content{padding:14px}
.meta{margin-top:8px; color:var(--muted); font-size:.9rem}

.pillrow{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}
.pill{border:1px solid rgba(255,255,255,.14); padding:.4rem .8rem; border-radius:999px; background:rgba(255,255,255,.05)}
.linkslist{list-style:none; padding:0; margin:10px 0}
.linkslist li{margin:10px 0}
.inline{color:var(--acc); border-bottom:1px dashed rgba(125,220,255,.5)}

.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}

footer{padding:60px 18px; text-align:center; color:var(--muted)}