*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; color-scheme: dark; }

html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* Scroll-lock while the mobile menu or the intro overlay is open. Applied
   on html (not via an inline body.style.overflow toggle) so it reliably
   locks the viewport regardless of how html/body propagate overflow. */
html.nav-open,
html.intro-lock {
  overflow-y: hidden;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-dim);
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0;
  line-height: 1;
  letter-spacing: -0.02em;
  text-wrap: balance;
  font-weight: 800;
}

.mono {
  font-family: var(--font-mono);
  font-weight: 500;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin-bottom: 1.2em;
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--accent);
  display: inline-block;
}

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section { padding-block: clamp(72px, 11vw, 160px); }

.divider { border-top: 1px solid var(--border); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.98rem;
  padding: 1em 1.7em;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out-expo),
              background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 0 0 0 var(--accent-glow);
}
.btn-primary:hover { box-shadow: 0 8px 30px -6px var(--accent-glow); }
.btn-outline {
  border-color: var(--border-strong);
  color: var(--ink);
  background: transparent;
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent-2); }
.btn .arrow { transition: transform var(--dur-fast) var(--ease-out-expo); }
.btn:hover .arrow { transform: translateX(4px); }

/* ---------- Central scroll-reveal system ----------
   Gated behind html.js: if the boot script never runs (blocked script,
   file:// CORS, a crashed module), [data-reveal] elements simply render
   in their normal, fully-visible state instead of staying hidden forever. */
.js [data-reveal] { will-change: opacity, transform, filter, clip-path; }

.js [data-reveal="mask"] {
  clip-path: inset(0 0 100% 0);
  opacity: 1;
  transition: clip-path var(--dur-slow) var(--ease-out-expo);
}
.js [data-reveal="mask"].is-revealed { clip-path: inset(0 0 0% 0); }

.js [data-reveal="scale"] {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity var(--dur-base) var(--ease-out-expo),
              transform var(--dur-base) var(--ease-out-expo);
}
.js [data-reveal="scale"].is-revealed { opacity: 1; transform: scale(1); }

.js [data-reveal="blur"] {
  opacity: 0;
  filter: blur(14px);
  transition: opacity var(--dur-base) var(--ease-out-expo),
              filter var(--dur-base) var(--ease-out-expo);
}
.js [data-reveal="blur"].is-revealed { opacity: 1; filter: blur(0); }

.js [data-reveal="slide-left"] {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity var(--dur-base) var(--ease-out-expo),
              transform var(--dur-base) var(--ease-out-expo);
}
.js [data-reveal="slide-left"].is-revealed { opacity: 1; transform: translateX(0); }

.js [data-reveal="slide-right"] {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity var(--dur-base) var(--ease-out-expo),
              transform var(--dur-base) var(--ease-out-expo);
}
.js [data-reveal="slide-right"].is-revealed { opacity: 1; transform: translateX(0); }

.js [data-reveal-delay="1"] { transition-delay: 90ms; }
.js [data-reveal-delay="2"] { transition-delay: 180ms; }
.js [data-reveal-delay="3"] { transition-delay: 270ms; }
.js [data-reveal-delay="4"] { transition-delay: 360ms; }
.js [data-reveal-delay="5"] { transition-delay: 450ms; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}