:root {
  --bg: #0b1021;
  --card: #121735;
  --text: #e8ecff;
  --muted: #b6bce3;
  --accent: #7c4dff;
  --accent2: #1ee2b2;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 18px;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial;
  color: var(--text);
  background: radial-gradient(1200px 600px at 10% -10%, #1a255a33, transparent),
              radial-gradient(1000px 500px at 110% 0%, #0ec2ff22, transparent),
              linear-gradient(180deg, #0b1021 0%, #0a0e1d 100%);
}
.container { max-width: 1040px; margin: 0 auto; padding: 28px; }

header { text-align: center; padding: 36px 0 20px; }

h1 { font: 800 40px/1.1 Inter, system-ui; margin: 18px auto 14px; }
h2 { font: 800 28px/1.15 Inter; margin: 0 0 12px; }
p { color: var(--muted); font-size: 16px; }

.footer { margin: 50px 0 20px; color: #95a0d6; text-align: center; font-size: 14px; }

/* ✅ Navbar */
.navbar {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 30px;
}
.navbar a {
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 12px;
  transition: background 0.3s;
}
.navbar a:hover {
  background: var(--accent);
  color: #fff;
}
.navbar a.active {
  background: var(--accent2);
  color: #000;
}