/* ============================================================
   GLOBAL — reset, base, typography, components
   ============================================================ */

@import url('./tokens.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Inter+Tight:wght@500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: hsl(var(--bg-void));
  color: hsl(var(--fg-primary));
}

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

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul, ol { list-style: none; }

/* ── Containers ───────────────────────────────────── */
.container        { max-width: 1280px; margin-inline: auto; padding-inline: var(--space-6); }
.container-wide   { max-width: 1440px; margin-inline: auto; padding-inline: var(--space-6); }
.container-narrow { max-width: 760px;  margin-inline: auto; padding-inline: var(--space-6); }
.container-prose  { max-width: 65ch;   margin-inline: auto; padding-inline: var(--space-6); }

@media (max-width: 640px) {
  .container, .container-wide, .container-narrow, .container-prose { padding-inline: var(--space-5); }
}

/* ── Section padding ─────────────────────────────── */
section { padding: var(--space-20) 0; position: relative; }
@media (min-width: 768px) { section { padding: var(--space-32) 0; } }

.bg-void { background: hsl(var(--bg-void)); }
.bg-deep { background: hsl(var(--bg-deep)); }
.bg-base { background: hsl(var(--bg-base)); }
.bg-elevated { background: hsl(var(--bg-elevated)); }

/* ── Typography ──────────────────────────────────── */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: hsl(var(--accent-electric));
  margin-bottom: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.eyebrow::before {
  content: "";
  width: 24px; height: 1px;
  background: hsl(var(--accent-electric));
  display: inline-block;
}

.h1 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 0.98;
  color: hsl(var(--fg-pure));
}
.h1-display {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: hsl(var(--fg-pure));
}
.gradient-word {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 24px hsl(var(--accent-electric) / 0.4));
}

.h2 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: hsl(var(--fg-pure));
}
.h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: hsl(var(--fg-pure));
}
.h4 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: hsl(var(--fg-pure));
}

.lead {
  font-size: var(--text-lg);
  line-height: 1.55;
  color: hsl(var(--fg-secondary));
  max-width: 60ch;
}
.body   { font-size: var(--text-base); line-height: 1.65; color: hsl(var(--fg-primary)); max-width: 65ch; }
.body p + p { margin-top: var(--space-5); }
.muted  { color: hsl(var(--fg-secondary)); }
.quiet  { color: hsl(var(--fg-tertiary)); }

.stat {
  font-family: var(--font-display);
  font-size: clamp(4rem, 12vw, 9rem);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 0.9;
  background: var(--gradient-stat);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 48px hsl(var(--accent-electric) / 0.4));
}

/* ── Buttons ─────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.875rem 1.5rem;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: -0.005em;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-out);
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn-primary {
  background: var(--gradient-cta);
  color: hsl(var(--fg-pure));
  box-shadow: var(--glow-md), inset 0 1px 0 hsl(0 0% 100% / 0.18);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--glow-lg), inset 0 1px 0 hsl(0 0% 100% / 0.18);
}
.btn-secondary {
  background: hsl(var(--accent-electric) / 0.04);
  color: hsl(var(--accent-electric));
  border-color: hsl(var(--accent-electric) / 0.3);
  backdrop-filter: blur(8px);
}
.btn-secondary:hover {
  border-color: hsl(var(--accent-electric));
  background: hsl(var(--accent-electric) / 0.08);
  box-shadow: var(--glow-sm);
}
.btn-lg { padding: 1.05rem 1.75rem; font-size: var(--text-lg); }

.btn-arrow {
  transition: transform var(--duration-base) var(--ease-out);
}
.btn:hover .btn-arrow { transform: translateX(3px); }

/* ── Card ────────────────────────────────────────── */
.card {
  position: relative;
  background: linear-gradient(180deg, hsl(var(--bg-elevated)), hsl(var(--bg-base)));
  border: 1px solid hsl(var(--border-subtle));
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--inner-highlight), var(--shadow-md);
  transition: transform var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.card:hover {
  transform: translateY(-4px);
  border-color: hsl(var(--accent-electric) / 0.35);
  box-shadow: var(--inner-highlight), var(--shadow-lg), var(--glow-md);
}
.card-link {
  margin-top: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: hsl(var(--accent-electric));
  font-size: var(--text-sm);
  font-weight: 500;
}
.card-link svg { transition: transform var(--duration-base) var(--ease-out); }
.card:hover .card-link svg { transform: translateX(3px); }

/* ── Icon tile ───────────────────────────────────── */
.icon-tile {
  width: 56px; height: 56px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, hsl(var(--bg-elevated)), hsl(var(--bg-base)));
  border: 1px solid hsl(var(--accent-electric) / 0.25);
  box-shadow: var(--inner-highlight), var(--glow-sm);
  display: grid;
  place-items: center;
  color: hsl(var(--accent-electric));
  margin-bottom: var(--space-5);
}
.icon-tile svg { width: 24px; height: 24px; stroke-width: 1.5; }

/* ── Grain ───────────────────────────────────────── */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ── Section divider ─────────────────────────────── */
.divider {
  height: 1px;
  background: var(--gradient-divider);
  border: 0;
  margin: 0;
}

/* ── Pills ───────────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius-full);
  border: 1px solid hsl(var(--border-medium));
  background: hsl(var(--bg-base));
  color: hsl(var(--fg-secondary));
  font-size: var(--text-sm);
  font-weight: 500;
  transition: all var(--duration-base) var(--ease-out);
}
.pill:hover {
  border-color: hsl(var(--accent-electric) / 0.4);
  color: hsl(var(--accent-electric));
}

/* ── Form ────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.field label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: hsl(var(--fg-secondary));
  letter-spacing: -0.005em;
}
.field input, .field textarea, .field select {
  width: 100%;
  padding: 0.875rem 1rem;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: hsl(var(--fg-pure));
  background: hsl(var(--bg-deep));
  border: 1px solid hsl(var(--border-medium));
  border-radius: var(--radius-md);
  transition: border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 0;
  border-color: hsl(var(--accent-electric));
  box-shadow: 0 0 0 3px hsl(var(--accent-electric) / 0.15);
}
.field textarea { min-height: 120px; resize: vertical; }

/* ── Reveal animation ────────────────────────────── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-stagger="1"] { transition-delay: 50ms; }
.reveal[data-stagger="2"] { transition-delay: 100ms; }
.reveal[data-stagger="3"] { transition-delay: 150ms; }
.reveal[data-stagger="4"] { transition-delay: 200ms; }
.reveal[data-stagger="5"] { transition-delay: 250ms; }

/* ── Reduced motion ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ── Utility helpers ─────────────────────────────── */
.flex { display: flex; }
.grid { display: grid; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
.gap-12 { gap: var(--space-12); }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.flex-col { flex-direction: column; }
.text-center { text-align: center; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.mb-16 { margin-bottom: var(--space-16); }

/* ── Skip to content (a11y) ──────────────────────── */
.skip-link {
  position: absolute; top: -40px; left: 8px;
  background: hsl(var(--accent-electric));
  color: hsl(var(--bg-void));
  padding: 8px 12px;
  z-index: 100;
  border-radius: var(--radius-sm);
  font-weight: 600;
}
.skip-link:focus { top: 8px; }