/* Ocean blue palette */
:root {
  --bg: #0b1e2d;
  --panel: #0f2a3b;
  --accent: #1f6fb2;
  --accent-2: #39a0ed;
  --text: #e7eef7;
  --muted: #a9c3d9;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: linear-gradient(180deg, var(--bg), #081521);
  color: var(--text);
}
header {
  background: #1f6fb2;
  border-bottom: 1px solid #39a0ed;
  position: sticky; top: 0; z-index: 10;
}
nav { max-width: 980px; margin: 0 auto; display: flex; align-items: center; gap: 24px; padding: 12px 16px; }
nav a.logo { font-weight: 700; color: #fff; text-decoration: none; letter-spacing: .3px; }
nav .spacer { flex: 1; }
nav a { color: #e7eef7; text-decoration: none; }
nav a:hover { color: #39a0ed; }
.hero { max-width: 980px; margin: 48px auto 16px; padding: 0 16px; }
.hero h1 { font-size: clamp(28px, 4vw, 40px); margin: 0 0 8px; }
.hero p { color: var(--muted); max-width: 60ch; }
.panel { max-width: 980px; margin: 24px auto; padding: 16px; }
.card { background: var(--panel); border: 1px solid rgba(57, 160, 237, 0.18); border-radius: 12px; padding: 20px; margin-bottom: 16px; }
.card h2 { margin-top: 0; font-size: 20px; }
.btn {
  display: inline-block; background: var(--accent); color: white; padding: 10px 14px;
  border-radius: 8px; text-decoration: none; border: 1px solid rgba(0,0,0,.2);
}
.btn:hover { background: var(--accent-2); }
footer { max-width: 980px; margin: 40px auto; padding: 0 16px 48px; color: var(--muted); font-size: 14px; }
code, pre { background: #0a1926; color: #d6ecff; padding: 2px 4px; border-radius: 4px; }
form label { display: block; margin: 10px 0 6px; }
input, textarea { width: 100%; padding: 10px; border-radius: 8px; border: 1px solid rgba(57, 160, 237, 0.25); background: #0a1926; color: var(--text); }
input::placeholder, textarea::placeholder { color: #7ea6c5; }
small.note { color: var(--muted); display: block; margin-top: 6px; }
hr { border: none; border-top: 1px solid rgba(57, 160, 237, 0.18); margin: 24px 0; }
@media (prefers-color-scheme: light) {
  :root { --bg: #f3f8fd; --panel: #ffffff; --text: #0b1e2d; --muted: #35546c; }
  body { background: #f3f8fd; }
}