:root { color-scheme: dark; --bg:#090b14; --panel:#121526; --text:#f5f2ff; --muted:#b9b4ca; --accent:#d98cff; --line:#2c3046; }
* { box-sizing:border-box; }
html { font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; background:var(--bg); color:var(--text); }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 75% 0%,#322044 0,transparent 38rem),var(--bg); }
a { color:inherit; }
.shell { width:min(1080px,calc(100% - 2rem)); margin:auto; }
header { border-bottom:1px solid var(--line); }
nav { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.brand { font-size:1.15rem; font-weight:750; text-decoration:none; letter-spacing:-.03em; }
.brand span { color:var(--accent); }
.links { display:flex; flex-wrap:wrap; gap:1.25rem; color:var(--muted); font-size:.92rem; }
.links a { text-decoration:none; }
.links a:hover,.links a[aria-current="page"] { color:var(--text); }
main { padding:clamp(4rem,10vw,8rem) 0; }
.hero { max-width:760px; }
.eyebrow { color:var(--accent); font-size:.8rem; font-weight:750; letter-spacing:.13em; text-transform:uppercase; }
h1 { margin:.8rem 0 1.25rem; font-size:clamp(2.6rem,7vw,5.6rem); line-height:.98; letter-spacing:-.055em; }
h2 { margin:2.5rem 0 .7rem; font-size:1.35rem; }
p,li { color:var(--muted); line-height:1.75; }
.lede { font-size:clamp(1.05rem,2vw,1.3rem); max-width:660px; }
.actions { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; }
.button { display:inline-block; padding:.8rem 1.1rem; border:1px solid var(--accent); border-radius:.65rem; background:var(--accent); color:#160d1b; font-weight:750; text-decoration:none; }
.button.secondary { background:transparent; color:var(--text); border-color:var(--line); }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:4rem; }
.card { padding:1.35rem; background:color-mix(in srgb,var(--panel) 88%,transparent); border:1px solid var(--line); border-radius:1rem; }
.card h2 { margin:0 0 .45rem; }
.content { max-width:760px; }
.content h1 { font-size:clamp(2.4rem,6vw,4.2rem); }
.notice { margin-top:2rem; padding:1rem 1.2rem; border-left:3px solid var(--accent); background:var(--panel); }
footer { padding:2rem 0; border-top:1px solid var(--line); color:var(--muted); font-size:.85rem; }
footer .shell { display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
@media (max-width:720px) { nav { align-items:flex-start; padding:1.1rem 0; flex-direction:column; } .grid { grid-template-columns:1fr; } main { padding-top:3rem; } }