:root {
  --brand: #001F54;
  --text: #0E1A2B;
  --muted: #4A5C73;
  --border: #E3E8EF;
  --bg: #F6F8FB;
  --card: #FFFFFF;
}

@media (prefers-color-scheme: dark) {
  :root {
    --text: #F2F5F9;
    --muted: #9AABC0;
    --border: #22324A;
    --bg: #0A1220;
    --card: #111C2E;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

header {
  background: var(--brand);
  color: #FFFFFF;
  padding: 28px 20px;
}

header .inner, main {
  max-width: 760px;
  margin: 0 auto;
}

header .brand {
  font-weight: 800;
  letter-spacing: 0.02em;
  opacity: 0.85;
  font-size: 14px;
  text-transform: uppercase;
}

header h1 {
  margin: 6px 0 4px;
  font-size: 28px;
  line-height: 1.2;
}

header p {
  margin: 0;
  opacity: 0.8;
  font-size: 14px;
}

header nav {
  margin-top: 14px;
  font-size: 14px;
}

header nav a {
  color: #FFFFFF;
  margin-right: 16px;
}

main {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  margin-top: -12px;
  margin-bottom: 40px;
  padding: 8px 28px 28px;
}

h2 {
  font-size: 19px;
  margin: 28px 0 8px;
}

h3 {
  font-size: 16px;
  margin: 18px 0 6px;
}

p, li { color: var(--text); }

.muted { color: var(--muted); }

a { color: inherit; }

main a { color: var(--brand); font-weight: 600; }

@media (prefers-color-scheme: dark) {
  main a { color: #8FB4FF; }
}

ul { padding-left: 22px; }

@media (max-width: 800px) {
  main { margin: -12px 12px 32px; padding: 4px 18px 22px; }
}