/* ═══════════════════════════════════════════════════════════════════
   BASE — reset, typography, layout primitives, utilities
   ═══════════════════════════════════════════════════════════════════ */

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

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchors clear the fixed nav */
  scroll-padding-top: calc(var(--nav-h) + var(--sp-8));
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  background: var(--bg-0);
  color: var(--tx-1);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  font-weight: 400;
  overflow-x: clip;
  /* Opt into the tabular/contextual features Inter ships */
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  transition: background-color var(--t-base), color var(--t-base);
}

/* Locked while the preloader or the mobile menu is open */
body.is-locked { overflow: hidden; }

img, svg, video, canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

img { border-style: none; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
}

button { cursor: pointer; }

a {
  color: inherit;
  text-decoration: none;
}

ul, ol { list-style: none; }

::selection {
  background: rgba(var(--ac-1-rgb), 0.28);
  color: var(--tx-0);
}

/* ─────────────────────────────────────────────
   SCROLLBAR
   ───────────────────────────────────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--brd-3) transparent;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-0); }

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(var(--ac-1-rgb), 0.5), rgba(var(--ac-2-rgb), 0.5));
  border: 2px solid var(--bg-0);
  border-radius: var(--r-full);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--ac-1), var(--ac-2));
}

/* ─────────────────────────────────────────────
   TYPOGRAPHY
   ───────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--tx-0);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  text-wrap: balance;
}

h1 { font-size: var(--fs-4xl); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
h2 { font-size: var(--fs-3xl); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-md); }
h6 { font-size: var(--fs-base); }

p { text-wrap: pretty; }

strong, b {
  color: var(--tx-0);
  font-weight: 600;
}

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

blockquote { quotes: none; }

/* Gradient-filled text. Needs a solid fallback first for
   browsers that ignore background-clip:text. */
.grad-text {
  color: var(--ac-1);
  background: var(--grad-text);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .grad-text {
    -webkit-text-fill-color: currentColor;
    background: none;
  }
}

/* The accent word inside a heading */
.accent {
  position: relative;
  color: var(--ac-1);
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .accent { -webkit-text-fill-color: currentColor; }
}

/* Mono micro-label. Used for eyebrows, meta, telemetry. */
.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--tx-2);
}

.link-accent {
  color: var(--ac-1);
  font-weight: 500;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--t-base), color var(--t-fast);
}

.link-accent:hover {
  background-size: 100% 1px;
  color: var(--ac-3);
}

/* ─────────────────────────────────────────────
   LAYOUT PRIMITIVES
   ───────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--sp-gutter);
}

.container--wide { max-width: var(--max-w-wide); }
.container--narrow { max-width: 940px; }
.container--text { max-width: var(--max-w-text); }

.section {
  position: relative;
  padding-block: var(--sp-section);
}

.section--tight { padding-block: clamp(3rem, 6vw, 5.5rem); }

/* Alternating band. The pseudo-element keeps the fixed aurora
   visible through it rather than painting flat over it. */
.section--alt::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--bg-1) 12%,
    var(--bg-1) 88%,
    transparent 100%
  );
  opacity: 0.82;
  pointer-events: none;
  z-index: -1;
}

/* Hairline rules that fade out at both ends */
.section--ruled { border-block: 1px solid transparent; }

.rule {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--brd-2) 20%, var(--brd-2) 80%, transparent);
}

/* ─────────────────────────────────────────────
   SECTION HEADINGS
   ───────────────────────────────────────────── */
.sect-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  max-width: 780px;
}

.sect-head--center {
  margin-inline: auto;
  text-align: center;
  align-items: center;
}

.sect-title {
  font-size: var(--fs-3xl);
  margin: 0;
}

.sect-desc {
  font-size: var(--fs-md);
  color: var(--tx-2);
  max-width: 62ch;
  margin: 0;
}

.sect-head--center .sect-desc { margin-inline: auto; }

/* Eyebrow — small capsule above a section title */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  align-self: flex-start;
  padding: 0.4rem 0.85rem 0.4rem 0.7rem;
  border-radius: var(--r-full);
  background: var(--glass-2);
  border: 1px solid var(--brd-1);
  backdrop-filter: blur(var(--blur-sm));
  -webkit-backdrop-filter: blur(var(--blur-sm));
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--tx-2);
  white-space: nowrap;
}

.sect-head--center .eyebrow { align-self: center; }

.eyebrow svg {
  width: 13px;
  height: 13px;
  color: var(--ac-1);
  flex-shrink: 0;
}

.eyebrow--accent {
  border-color: var(--brd-accent);
  background: var(--ac-1-dim);
  color: var(--ac-1);
}

/* Short gradient underline used beneath big titles */
.title-rule {
  width: 84px;
  height: 3px;
  border-radius: var(--r-full);
  background: var(--grad-brand);
  box-shadow: 0 0 18px rgba(var(--ac-1-rgb), 0.6);
}

/* ─────────────────────────────────────────────
   SVG ICON SIZING
   ───────────────────────────────────────────── */
.ico {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke-width: 1.75;
}

.ico-xs { width: 13px; height: 13px; }
.ico-sm { width: 16px; height: 16px; }
.ico-md { width: 22px; height: 22px; }
.ico-lg { width: 28px; height: 28px; }
.ico-xl { width: 36px; height: 36px; }

/* ─────────────────────────────────────────────
   ACCESSIBILITY
   ───────────────────────────────────────────── */
.skip-link {
  position: fixed;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: 10000;
  padding: 0.7rem 1.2rem;
  border-radius: var(--r-md);
  background: var(--ac-1);
  color: var(--tx-inv);
  font-weight: 600;
  font-size: var(--fs-sm);
  transform: translateY(-160%);
  transition: transform var(--t-base);
}

.skip-link:focus-visible { transform: translateY(0); }

:focus-visible {
  outline: 2px solid var(--ac-1);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* Mouse users don't get outlines; keyboard users always do. */
:focus:not(:focus-visible) { outline: none; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ─────────────────────────────────────────────
   UTILITIES
   ───────────────────────────────────────────── */
.hidden { display: none !important; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.relative { position: relative; }

.stack   { display: flex; flex-direction: column; }
.row     { display: flex; align-items: center; }
.wrap    { flex-wrap: wrap; }
.between { justify-content: space-between; }

.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.gap-6 { gap: var(--sp-6); }
.gap-8 { gap: var(--sp-8); }

.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.mt-12 { margin-top: var(--sp-12); }

.text-1 { color: var(--tx-1); }
.text-2 { color: var(--tx-2); }
.text-3 { color: var(--tx-3); }
.text-0 { color: var(--tx-0); }

.body-lg {
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--tx-1);
}

.body-lg strong { color: var(--tx-0); }