:root {
  --bg:#08111f; --bg2:#0f1c31; --panel:rgba(14,26,46,.62); --panel2:rgba(19,34,59,.92);
  --border:rgba(160,205,255,.22); --text:#f4f8ff; --muted:#a9bdd8; --accent:#66d7ff; --accent2:#78ffcb; --shadow:0 24px 70px rgba(0,0,0,.38);
}
* { box-sizing:border-box; }
body {
  margin:0; min-height:100vh; font-family:"Outfit","Segoe UI Variable","Segoe UI",sans-serif; color:var(--text);
  background:radial-gradient(circle at top left, rgba(102,215,255,.14), transparent 28%), radial-gradient(circle at 85% 15%, rgba(120,255,203,.12), transparent 25%), linear-gradient(160deg, var(--bg) 0%, var(--bg2) 100%);
}
code { font-family:Consolas,"Courier New",monospace; }
.bg { position:fixed; inset:0; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size:40px 40px; mask-image:radial-gradient(circle at center, black 42%, transparent 100%); }
.hero,main { position:relative; z-index:1; }
.hero { padding:4rem clamp(1.25rem,3vw,3rem) 2rem; }
.eyebrow { text-transform:uppercase; letter-spacing:.18em; color:var(--accent2); font-size:.72rem; }
.hero-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(280px,1fr); gap:1.5rem; align-items:end; }
h1 { margin:.5rem 0 1rem; max-width:11ch; font-size:clamp(3rem,9vw,6rem); line-height:.95; }
.lede,.panel p,.desc { color:var(--muted); line-height:1.6; }
.glass { border:1px solid var(--border); background:var(--panel); backdrop-filter:blur(24px); box-shadow:var(--shadow); border-radius:24px; }
.panel { padding:1.5rem; }
main { padding:0 clamp(1.25rem,3vw,3rem) 4rem; }
.toolbar { display:flex; flex-wrap:wrap; gap:.75rem; padding:1rem; margin-bottom:2rem; }
.chip { display:inline-flex; align-items:center; justify-content:center; min-width:92px; padding:.8rem 1rem; border-radius:999px; color:var(--text); text-decoration:none; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); }
.chip-primary { background:linear-gradient(135deg, var(--accent), #4f8cff); color:#04111d; font-weight:700; }
.section-head { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(240px,.8fr); gap:1rem; align-items:end; margin-bottom:1rem; }
.sections { display:grid; gap:1.5rem; }
.resource-section { display:grid; gap:.9rem; }
.resource-head { display:flex; align-items:end; justify-content:space-between; gap:1rem; }
.resource-head h3 { margin:.15rem 0 0; font-size:1.4rem; }
.link-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:1rem; }
.card { padding:1.25rem; transition:transform .16s ease,border-color .16s ease,background .16s ease; }
.card:hover { transform:translateY(-4px); border-color:rgba(120,255,203,.42); background:var(--panel2); }
.card-meta { display:flex; justify-content:space-between; gap:.5rem; }
.badge,.category { display:inline-flex; padding:.3rem .55rem; border-radius:999px; font-size:.72rem; }
.badge { color:#07111d; background:linear-gradient(135deg, var(--accent2), #d8ff7a); font-weight:700; }
.category { background:rgba(255,255,255,.08); color:var(--muted); }
.title { margin:.9rem 0 .5rem; font-size:1.1rem; }
.action { display:inline-flex; margin-top:1rem; color:var(--accent); text-decoration:none; font-weight:600; }
@media (max-width:800px) { .hero-grid,.section-head { grid-template-columns:1fr; } h1 { max-width:none; } }