:root{--navy:#14213d;--orange:#f58220;--yel:#fccd28;--ink:#222;--bg:#fbfaf6}
*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6}
header{background:var(--navy);color:#fff;text-align:center;padding:3rem 1rem 2.5rem}
header h1{margin:.2rem 0;font-size:clamp(2.2rem,8vw,3.6rem);letter-spacing:.02em}header h1 span{color:var(--orange)}
.hat{font-size:3rem}.tag{font-size:1.15rem;opacity:.9;margin:.5rem auto 1.5rem;max-width:32rem}
.btns{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.btn{display:inline-block;padding:.7rem 1.2rem;border-radius:999px;background:var(--orange);color:#fff;text-decoration:none;font-weight:700}
.btn.alt{background:#fff;color:var(--navy)}
main{max-width:56rem;margin:0 auto;padding:2rem 1rem}h2{color:var(--navy);border-bottom:4px solid var(--yel);display:inline-block}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:1rem}
.card{background:#fff;border-radius:1rem;padding:1.2rem;box-shadow:0 2px 8px rgba(0,0,0,.08);border-top:6px solid var(--orange)}
.card h3{margin:.2rem 0;color:var(--navy)}.card .role{font-weight:700;color:var(--orange);margin:0 0 .4rem}
.note{background:#fff7d6;border-left:6px solid var(--yel);padding:1rem;border-radius:.5rem;margin-top:2rem}
footer{background:var(--navy);color:#cfd6e4;text-align:center;padding:1.5rem 1rem;font-size:.9rem}footer a{color:#fff}
.doc{max-width:46rem}.doc h1{color:var(--navy)}