:root {
  --bg: #04070d;
  --bg-2: #070c16;
  --panel: rgba(255, 255, 255, 0.025);
  --panel-border: rgba(120, 170, 255, 0.10);
  --text: #eef3fb;
  --text-dim: #8a98b0;
  --muted: #6b7a93;
  --blue: #2f7dff;
  --blue-bright: #4f9dff;
  --blue-glow: #1e6bff;
  --accent: #58b2ff;
  --radius: 16px;
  --maxw: 1180px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: "Space Grotesk", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.bg-wrap {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(1100px 600px at 50% -10%, rgba(47, 125, 255, 0.18), transparent 60%),
    radial-gradient(900px 700px at 85% 20%, rgba(40, 90, 200, 0.10), transparent 55%),
    radial-gradient(800px 600px at 10% 80%, rgba(30, 107, 255, 0.08), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}
.grid-overlay {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    radial-gradient(circle, rgba(120, 170, 255, 0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 80%);
}

h1 {
  font-size: clamp(3.2rem, 8vw, 6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 26px;
  background: linear-gradient(180deg, #ffffff 30%, #b9cdf0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
h2 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  background: linear-gradient(180deg, #fff, #c2d4f5);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: none; }