*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x); }
.section { padding-block: var(--gap); }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--accent); flex: none; }
.h1 { font-family: var(--font-display); font-size: clamp(36px, 8.5vw, 104px); line-height: 1; font-weight: 700; letter-spacing: -.02em; overflow-wrap: break-word; }
.h2 { font-family: var(--font-display); font-size: clamp(28px, 4vw, 48px); line-height: 1.06; font-weight: 600; letter-spacing: -.02em; }
.lead { font-size: clamp(18px, 2vw, 22px); color: var(--text-2); max-width: 38ch; }
.btn { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 500; padding: 14px 22px; border-radius: 999px; border: 1px solid var(--line); transition: background .15s, color .15s; }
.btn-accent { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn-accent:hover { filter: brightness(1.06); }
.btn-ghost:hover { background: var(--surface-2); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Scroll reveal ── */
[data-reveal], [data-reveal-children] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1);
}
[data-reveal].is-visible, [data-reveal-children] > .is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal-children] > * { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ── Lane reveal: section titles wipe in laterally ("out of the lane") ── */
[data-reveal-lane] {
  clip-path: inset(0 102% 0 0);
  transform: translateX(-22px);
  transition: clip-path .85s cubic-bezier(.16, 1, .3, 1), transform .85s cubic-bezier(.16, 1, .3, 1);
  will-change: clip-path, transform;
}
[data-reveal-lane].is-visible { clip-path: inset(0 0 0 0); transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal-lane] { clip-path: none !important; transform: none !important; transition: none; }
}

/* ── Film grain texture ── */
.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Lap line: scroll progress as a racing line ── */
.lapline { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; pointer-events: none; }
.lapline__fill { display: block; height: 100%; width: 0; background: var(--accent); position: relative; }
.lapline__fill::after {
  content: ''; position: absolute; right: -3px; top: 50%; transform: translateY(-50%);
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 10px 2px rgba(200, 241, 53, .7);
}

/* ── Lenis smooth scroll ── */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }