:root{
  --bg:#0b1220;
  --fg:#0f172a;
  --card:#f3f4f6;
  --muted:#6b7280;
  --brand:#111827;
  --max:1000px;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.55;color:#111;background:#fff}
header{background:var(--bg);color:#fff;padding:48px 20px}
header .wrap{max-width:var(--max);margin:0 auto;position:relative}
.header-top-right{position:absolute;top:-32px;right:0;font-size:11px;opacity:.7;font-weight:500;text-transform:uppercase;letter-spacing:.8px;text-align:right;line-height:1.2}
@media (max-width: 600px) {
  .header-top-right { top:-38px; font-size:9px; max-width:140px; }
}
header h1{margin:0 0 8px;font-size:40px;line-height:1.1}
header p{margin:0;opacity:.9}
nav{background:var(--brand)}
nav .wrap{max-width:var(--max);margin:0 auto;display:flex;gap:14px;flex-wrap:wrap;padding:10px 20px}
nav a{color:#fff;text-decoration:none;opacity:.9;padding:6px 8px;border-radius:8px}
nav a:hover{opacity:1;text-decoration:underline}
main{max-width:var(--max);margin:0 auto;padding:22px 20px}
.card{background:var(--card);border-radius:14px;padding:18px;margin:16px 0}
h2{margin:0 0 10px}
h3{margin:18px 0 8px}
small, .muted{color:var(--muted)}
footer{border-top:1px solid #e5e7eb;padding:18px 20px;text-align:center;color:var(--muted)}
ul{margin:8px 0 0 18px}
a{color:#0b57d0}