/* ── Tokens (dark theme) ────────────────────────────────────────────── */
:root {
  --accent: oklch(0.72 0.16 295);
  --accent-bright: oklch(0.78 0.18 295);
  --accent-dark: oklch(0.32 0.10 280);
  --accent-glow: oklch(0.72 0.16 295 / 0.30);

  --bg: #0a0612;
  --bg-alt: #120c1f;
  --bg-warm: #1a1230;
  --bg-panel: #14102a;

  --fg: #f5f0eb;
  --fg-soft: rgba(245, 240, 235, 0.86);
  --fg-mute: rgba(245, 240, 235, 0.60);
  --fg-faint: rgba(245, 240, 235, 0.36);
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30), 0 2px 6px rgba(0, 0, 0, 0.20);
  --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.30);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.50);

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --serif: var(--sans);
  --brand-serif: "Fraunces", "Times New Roman", Georgia, serif;
  --brand-color: #ffffff;

  --container: 1200px;
  --gutter: clamp(20px, 5vw, 56px);
  --section-pad: clamp(96px, 12vw, 160px);

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Hero gradients */
  --hero-dark: linear-gradient(135deg, #060410 0%, #0f0820 35%, #1c0e3a 70%, #2a1550 100%);
  --hero-light: linear-gradient(135deg, #b8a0d8 0%, #d8b0c8 30%, #f0c4a8 55%, #d8a8d0 80%, #a890c8 100%);
}

/* ── Reset ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  font-feature-settings: "ss01", "cv11";
}
img, svg, canvas { display: block; max-width: 100%; }
button { font-family: inherit; }
a { color: inherit; }

/* ── Typography ─────────────────────────────────────────────────────── */
.t-display {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(48px, 8vw, 104px);
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.t-h1 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.t-h2 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.t-h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.018em;
}
.t-lede {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--fg-soft);
}
.t-body {
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg-soft);
}
.t-eyebrow {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg-mute);
}
.t-mute { color: var(--fg-mute); }

strong { font-weight: 600; color: var(--fg); }
h1 em, h2 em, h3 em, .hero__heading em, .pillar__heading em, .step__heading em {
  font-style: normal;
  font-weight: 800;
  letter-spacing: -0.04em;
}

/* ── Layout primitives ──────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
section { position: relative; }

.section-head {
  max-width: 760px;
  margin: 0 0 clamp(48px, 7vw, 88px);
}
.section-head__heading {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin: 14px 0 18px;
}
.section-head__lede {
  margin: 0;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.55;
  color: var(--fg-soft);
  max-width: 620px;
}

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  min-height: 44px;
  padding: 0 22px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: -0.005em;
  cursor: pointer;
  text-decoration: none;
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease), background 160ms var(--ease), border-color 160ms var(--ease);
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }

.btn--primary {
  background: #ffffff;
  color: #0a0612;
}
.btn--primary:hover { background: #f0eae3; }

.btn--accent {
  background: var(--accent);
  color: #fff;
}
.btn--accent:hover { filter: brightness(1.08); }

.btn--ghost {
  background: transparent;
  color: var(--fg);
  border-color: rgba(255, 255, 255, 0.22);
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.40); }

.btn--lg {
  height: 54px;
  padding: 0 26px;
  font-size: 15.5px;
}

/* ── Reveal ─────────────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

::selection { background: var(--accent); color: #fff; }