/* ============================================================================
   base.css — Reset + base elements + shared utilities/components.
   Loads AFTER tokens.css. Section files add their own scoped styles on top.
   ============================================================================ */

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

html { -webkit-text-size-adjust: 100%; }

body {
  background: rgb(var(--c-bg));
  color: rgb(var(--c-ink));
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.04;
}

::selection { background: rgb(var(--c-accent)); color: rgb(var(--c-on-accent)); }

/* ---- Layout helpers ---- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container-narrow { width: 100%; max-width: var(--container-narrow); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--space-xl); }
.stack > * + * { margin-top: var(--space-s); }

/* ---- Type helpers ---- */
.eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(var(--c-accent));
}
.display { font-size: var(--step-4); }
.h1 { font-size: var(--step-3); }
.h2 { font-size: var(--step-2); }
.h3 { font-size: var(--step-1); }
.lead { font-size: var(--step-1); color: rgb(var(--c-muted)); line-height: 1.4; }
.muted { color: rgb(var(--c-muted)); }
.balance { text-wrap: balance; }
.accent { color: rgb(var(--c-accent)); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border-radius: var(--radius-pill);
  font-weight: 600; font-size: var(--step-0);
  padding: 0.85rem 1.6rem;
  transition: transform var(--dur-fast) var(--ease-out-expo),
    background-color var(--dur-fast), color var(--dur-fast), opacity var(--dur-fast);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: rgb(var(--c-accent)); color: rgb(var(--c-on-accent)); }
.btn-solid { background: rgb(var(--c-brand)); color: rgb(var(--c-on-brand)); }
.btn-ghost { border: 1px solid rgb(var(--c-line)); color: rgb(var(--c-ink)); }
.btn-ghost:hover { background: rgb(var(--c-ink) / 0.04); }

/* ---- Surfaces ---- */
.card {
  background: rgb(var(--c-surface));
  border: 1px solid rgb(var(--c-line));
  border-radius: var(--radius-m);
}
.mesh {
  background:
    radial-gradient(60% 60% at 18% 20%, rgb(var(--c-brand) / 0.16), transparent 60%),
    radial-gradient(50% 50% at 88% 12%, rgb(var(--c-accent) / 0.13), transparent 55%),
    radial-gradient(64% 80% at 72% 92%, rgb(var(--c-brand-2) / 0.13), transparent 60%);
}
.hairline { border: 0; border-top: 1px solid rgb(var(--c-line)); }

/* ---- Grid helpers ---- */
.grid { display: grid; gap: var(--space-m); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ---- Animation initial states (GSAP reveals from these) ----
   Elements with [data-animate] start hidden; animations.js animates them in.
   If JS fails or is disabled, this fallback reveals them so content is never
   lost. */
[data-animate] { opacity: 1; }
.js [data-animate] { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .js [data-animate] { opacity: 1 !important; transform: none !important; }
}