:root { color-scheme: dark; --bg:#0b1220; --panel:#142139; --text:#eaf0fc; --muted:#afc0d9; --accent:#79b8ff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); font: 1rem/1.65 system-ui,-apple-system,Segoe UI,sans-serif; }
a { color:var(--accent); } a:focus-visible { outline:3px solid #fff; outline-offset:4px; }
.skip-link { position:absolute; top:-100px; left:12px; padding:10px; background:white; color:black; } .skip-link:focus { top:8px; }
.site-header { border-bottom:1px solid #253550; } nav { max-width:1050px; margin:auto; display:flex; align-items:center; justify-content:space-between; padding:16px 24px; gap:18px; } nav div { display:flex; flex-wrap:wrap; gap:20px; } .brand { font-size:1.15rem; font-weight:800; }
main { max-width:1050px; padding:0 24px; margin:auto; } section { padding:55px 0; border-bottom:1px solid #253550; } .hero { padding:85px 0; } h1 { font-size:clamp(2.6rem,7vw,4.5rem); line-height:1.1; margin:12px 0; } h2 { font-size:2rem; } h3 { margin-top:0; } p { max-width:65ch; } .eyebrow,.note { color:var(--muted); } .cta { display:inline-block; background:var(--accent); color:#081426; font-weight:700; text-decoration:none; border-radius:10px; padding:10px 17px; margin-top:12px; }
.tags { display:flex; flex-wrap:wrap; gap:10px; padding:0; list-style:none; }.tags li { padding:5px 13px; background:var(--panel); border-radius:999px; } .cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(225px,1fr)); gap:16px; }.card { background:var(--panel); padding:23px; border:1px solid #344460; border-radius:14px; }
footer { max-width:1050px; margin:auto; padding:24px; color:var(--muted); } @media(max-width:560px){nav { align-items:flex-start; flex-direction:column; } section { padding:35px 0; }}