:root {
  --bg: #070b18;
  --panel: rgba(18, 24, 48, .78);
  --line: rgba(255,255,255,.10);
  --text: #eef2ff;
  --muted: #aeb8d4;
  --accent: #c084fc;
  --accent2: #f472b6;
  --max: 1100px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 15% 10%, rgba(192,132,252,.18), transparent 30%),
    radial-gradient(circle at 85% 20%, rgba(244,114,182,.14), transparent 30%),
    linear-gradient(145deg, #050816, #0b1024 55%, #12091c);
}
.wrap { width: min(var(--max), calc(100% - 32px)); margin: auto; }
.hero { padding: 72px 0 36px; }
.badge {
  display: inline-block; padding: 8px 14px; border: 1px solid var(--line);
  border-radius: 999px; background: rgba(255,255,255,.05); color: #ddd6fe;
  font-size: .86rem;
}
h1 {
  margin: 18px 0 12px; font-size: clamp(2.4rem, 6vw, 5rem);
  line-height: 1.02; letter-spacing: -.045em;
  background: linear-gradient(90deg, #fff, #d8b4fe, #f9a8d4);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lead { max-width: 760px; color: var(--muted); font-size: 1.12rem; line-height: 1.75; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap: 18px; margin: 30px 0; }
.card {
  padding: 24px; border: 1px solid var(--line); border-radius: 22px;
  background: var(--panel); backdrop-filter: blur(14px);
  box-shadow: 0 20px 60px rgba(0,0,0,.24);
}
.card h2 { margin-top: 0; }
a.btn {
  display: inline-block; margin: 7px 8px 7px 0; padding: 11px 16px;
  border-radius: 12px; text-decoration: none; color: white;
  border: 1px solid var(--line); background: rgba(255,255,255,.07);
}
a.btn.primary { background: linear-gradient(90deg, #9333ea, #db2777); border: 0; }
footer { padding: 30px 0 60px; color: #8792b1; font-size: .9rem; }
code { color: #e9d5ff; }
@media (max-width: 600px) { .hero { padding-top: 45px; } }