/* Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
img, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Typography */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); letter-spacing: -0.02em; }
h3 { font-size: var(--text-h3); letter-spacing: -0.01em; line-height: 1.2; }
p { text-wrap: pretty; }
:is(h1, h2) + p { margin-top: var(--space-6); }
h3 + p { margin-top: var(--space-2); }

.text-gradient {
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lead { font-size: var(--text-lg); color: var(--color-muted); max-width: 32em; }
.kicker {
  font: 600 0.8125rem var(--font-display);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-cyan);
}

/* Layout */
.container { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.8rem 1.5rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out), background var(--duration-fast);
}
.btn-primary { background: #fff; color: #000; }
.btn-primary:hover { transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--color-text); border-color: var(--color-line-strong); }
.btn-ghost:hover { background: #ffffff0d; }

:focus-visible { outline: 2px solid var(--color-cyan); outline-offset: 3px; }

/* Backdrop: glows + grid + grain, fixed behind all content */
.backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.backdrop .glow { position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.5; }
.backdrop .glow-1 { width: 640px; height: 640px; top: -220px; left: 42%; background: var(--color-violet); animation: drift-1 24s ease-in-out infinite alternate; }
.backdrop .glow-2 { width: 520px; height: 520px; bottom: -240px; right: -120px; background: var(--color-teal-deep); animation: drift-2 30s ease-in-out infinite alternate; }
.backdrop .glow-3 { width: 420px; height: 420px; bottom: -220px; left: -140px; background: var(--color-rose-deep); opacity: 0.3; animation: drift-1 36s ease-in-out infinite alternate-reverse; }
.backdrop .grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--color-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 65% 30%, #000 0, transparent 70%);
}
.backdrop .grain {
  position: absolute;
  inset: 0;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes drift-1 { to { transform: translate(-80px, 60px) scale(1.08); } }
@keyframes drift-2 { to { transform: translate(60px, -70px) scale(0.94); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}