* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: system-ui, 'Segoe UI', Arial, sans-serif;
  background: #0f1a33;
  color: #e6ecf7;
  line-height: 1.6;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 24px;
  background: #16234a;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

nav { display: flex; gap: 8px; }
nav a {
  padding: 6px 14px;
  border-radius: 999px;
  color: #a9b6d3;
  text-decoration: none;
}
nav a.active { background: #1d63ed; color: #fff; }

main {
  flex: 1;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 24px;
}
main.center { text-align: center; display: flex; flex-direction: column; justify-content: center; }

h1 { margin: 0 0 16px; font-size: 30px; }
h1.big { font-size: 72px; color: #8fb3ff; margin: 0; }
p { color: #c3cde3; margin: 0 0 12px; }
.muted { color: #8090b0; font-size: 14px; margin-top: 24px; }
code { background: #16234a; padding: 2px 8px; border-radius: 6px; color: #8fb3ff; }
a { color: #8fb3ff; }

footer { padding: 16px 24px; font-size: 13px; color: #8090b0; text-align: center; }