:root {
  --bg: #0b0b12;
  --panel: #141423;
  --text: #f5f7ff;
  --muted: #a6adcc;
  --accent: #8ab4ff;
  --line: #23263a;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: radial-gradient(1200px 700px at 10% -10%, #1b1f40 0, var(--bg) 50%);
  color: var(--text);
  line-height: 1.6;
}
.wrap { width: min(1000px, 92vw); margin: 0 auto; }
header { padding: 5rem 0 2rem; }
.kicker { letter-spacing: .12em; color: var(--accent); font-weight: 700; font-size: .85rem; }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.1; margin: .2rem 0 1rem; }
.lead { color: var(--muted); max-width: 70ch; }
.cta-row { margin-top: 1.4rem; display: flex; gap: .8rem; }
.btn {
  background: var(--accent);
  color: #091021;
  text-decoration: none;
  font-weight: 700;
  padding: .7rem 1rem;
  border-radius: .75rem;
}
.btn.ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  padding: 1rem 0 3rem;
}
.card {
  background: linear-gradient(180deg, #171a2d, var(--panel));
  border: 1px solid var(--line);
  border-radius: 1rem;
  padding: 1rem 1.1rem;
}
.card h2 { margin-top: .2rem; font-size: 1.05rem; }
.card p, .card li { color: var(--muted); }
.foot {
  border-top: 1px solid var(--line);
  padding: 1.5rem 0 2rem;
  color: var(--muted);
}