:root {
  --bg: #0f141b;
  --panel: #141b24;
  --text: #ebf2f7;
  --muted: #a8b4c3;
  --line: #243041;
  --accent: #1f7db7;
  --accent-2: #35a9ff;
}

body {
  background: radial-gradient(1200px 600px at 85% -10%, #1f2b3a, var(--bg));
  color: var(--text);
}

a { color: #74c4ff; }

.topbar { background: rgba(12,17,24,.8); backdrop-filter: blur(8px); }
.brand { color: var(--text); font-weight: 700; }
nav a { color: var(--muted); text-decoration: none; }
nav a:hover { color: var(--text); }

.footer-links a {
  color: var(--muted);
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--text);
}

.hero, .panel {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #141d29, #10161f);
}
.kicker { text-transform: uppercase; letter-spacing: .12em; color: var(--accent-2); font-size: .8rem; }

.site-card {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  background: #0d131b;
}

pre {
  background: #111822;
  border: 1px solid #2a3647;
  padding: 12px;
  border-radius: 10px;
  color: #d9e8f7;
}

.text-muted { color: var(--muted) !important; }

.feature-strip {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid #2e4762;
  border-radius: 10px;
  background: #102131;
  color: #b9dbf7;
}

code { color: #a7dbff; }

.btn-outline-light {
  border-color: #3a5168;
  color: #d8ecff;
}

.btn-outline-light:hover {
  background: #1f2f41;
  border-color: #4a6682;
}

pre { white-space: pre-wrap; }

@media (max-width: 700px) {
  pre { font-size: .8rem; }
}