:root { --navy:#090b10; --ink:#202a3a; --muted:#646d7b; --blue:#5577aa; --blue-dark:#344e78; --light-blue:#8db5e7; --mist:#e8edf5; --paper:#f6f7f9; --white:#fff; --line:#d9e0e9; --max:1160px; --shadow:0 18px 48px rgba(9,11,16,.12); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:88px; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.65 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
.skip-link { position:absolute; left:12px; top:-60px; z-index:120; padding:10px 16px; border-radius:8px; background:white; }
.skip-link:focus { top:12px; }
.wrap { width:min(calc(100% - 40px),var(--max)); margin-inline:auto; }
.resource-hero { position:relative; overflow:hidden; padding:84px 0 76px; background-color:#eaf0f7; background-image:linear-gradient(rgba(85,119,170,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(85,119,170,.075) 1px,transparent 1px),radial-gradient(circle at 88% 15%,rgba(141,181,231,.34),transparent 30%); background-size:32px 32px,32px 32px,auto; }
.resource-hero::after { content:""; position:absolute; inset:14px; border:1px solid rgba(85,119,170,.16); border-radius:28px; pointer-events:none; }
.eyebrow { display:inline-flex; align-items:center; gap:9px; margin:0 0 17px; color:var(--blue-dark); font-size:.78rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.eyebrow::before { content:""; width:24px; height:3px; border-radius:99px; background:var(--light-blue); }
h1,h2,h3 { color:var(--navy); line-height:1.12; letter-spacing:-.035em; }
h1 { max-width:900px; margin:0 0 20px; font:700 clamp(2.7rem,6vw,5rem)/1.04 Georgia,"Times New Roman",serif; }
h2 { margin:0 0 14px; font:700 clamp(2rem,4vw,3.1rem)/1.1 Georgia,"Times New Roman",serif; }
h3 { margin:0 0 10px; font-size:1.38rem; }
.hero-lead { max-width:790px; margin:0; color:var(--muted); font-size:clamp(1.04rem,2vw,1.19rem); }
.important-note { max-width:900px; margin:27px 0 0; padding:17px 20px; border-left:4px solid var(--blue); border-radius:0 14px 14px 0; background:rgba(255,255,255,.72); color:var(--blue-dark); }
.resource-section { padding:76px 0; }
.section-head { max-width:780px; margin-bottom:34px; }
.section-head p { margin:0; color:var(--muted); font-size:1.04rem; }
.board-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.board-card { display:flex; flex-direction:column; padding:29px; border:1px solid var(--line); border-radius:23px; background:white; box-shadow:0 12px 32px rgba(9,11,16,.055); }
.board-name { align-self:flex-start; margin-bottom:19px; padding:6px 11px; border-radius:999px; background:var(--mist); color:var(--blue-dark); font-size:.72rem; font-weight:900; letter-spacing:.09em; text-transform:uppercase; }
.code { margin:0 0 16px; color:var(--blue-dark); font-size:.88rem; font-weight:850; }
.board-card p { margin:0 0 16px; color:var(--muted); }
.board-card ul { margin:0 0 24px; padding-left:20px; color:var(--muted); }
.board-card li { margin:7px 0; }
.official-links { display:grid; gap:9px; margin-top:auto; }
.official-link { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 15px; border-radius:999px; background:var(--blue); color:white; font-weight:850; text-align:center; text-decoration:none; }
.official-link:hover { background:var(--blue-dark); }
.official-link.secondary { border:1px solid var(--line); background:var(--paper); color:var(--blue-dark); }
.official-link.secondary:hover { background:var(--mist); }
.topic-section { background:linear-gradient(145deg,#090b10,#263650); color:white; }
.topic-section h2,.topic-section h3 { color:white; }
.topic-section .section-head p { color:#c0ccda; }
.topic-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:17px; }
.topic { padding:23px; border:1px solid rgba(255,255,255,.15); border-radius:18px; background:rgba(255,255,255,.06); }
.topic p { margin:0; color:#cbd6e4; }
.next-step { padding:68px 0; background:linear-gradient(145deg,#e8edf5,#d8e3f0); text-align:center; }
.next-step p { max-width:700px; margin:0 auto 20px; color:var(--muted); }
.button { display:inline-flex; padding:13px 22px; border-radius:999px; background:var(--navy); color:white; font-weight:850; text-decoration:none; }
footer { padding:28px 0; background:#050609; color:#b7c3d5; font-size:.85rem; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; }
footer a { color:white; text-underline-offset:3px; }
.social-links { display:flex; gap:10px; }
.social-icon { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border:1px solid rgba(255,255,255,.26); border-radius:50%; }
.social-icon img { width:18px; height:18px; }
@media(max-width:900px){ .board-grid,.topic-grid{grid-template-columns:1fr;} }
@media(max-width:650px){ .wrap{width:min(calc(100% - 28px),var(--max));}.resource-hero{padding:58px 0}.resource-section{padding:58px 0}.board-card{padding:24px}.footer-inner{align-items:flex-start;flex-direction:column} }
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto}*,*::before,*::after{transition:none!important} }