/* ============================================================
   VCC, Base styles
   Modern CSS reset, typography, layout utilities
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-height) + 16px);
}

body {
  font-family: var(--font-brand);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--text-primary);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100vh;
}

/* Image and media defaults */
img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
svg { flex-shrink: 0; }

/* Form element inheritance */
input, button, textarea, select { font: inherit; color: inherit; }
button { background: transparent; border: none; cursor: pointer; }

/* Links */
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
button:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ============================================================
   Typography
   ============================================================ */

/* Headlines use Geist Light by brand spec, except impact scale */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-brand);
  font-weight: var(--fw-light);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--text-primary);
  text-wrap: balance;
  overflow-wrap: break-word;
}

.impact {
  font-size: var(--fs-impact);
  font-weight: var(--fw-bold);
  line-height: var(--lh-impact);
  letter-spacing: var(--ls-heading);
  text-wrap: balance;
}

.h-hero      { font-size: var(--fs-hero);      font-weight: var(--fw-light); }
.h-primary   { font-size: var(--fs-primary);   font-weight: var(--fw-light); }
.h-secondary { font-size: var(--fs-secondary); font-weight: var(--fw-regular); }

/* Bold highlight inside headlines */
.bold, strong { font-weight: var(--fw-bold); }

/* Body variants */
.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--text-secondary);
  max-width: 60ch;
}

p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-secondary);
  text-wrap: pretty;
}

/* Mono labels for eyebrows, technical hints, code */
.mono, code, kbd {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-mono);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(116, 219, 139, 0.6);
}

/* Text color helpers */
.t-primary   { color: var(--text-primary); }
.t-secondary { color: var(--text-secondary); }
.t-muted     { color: var(--text-muted); }
.t-dim       { color: var(--text-dim); }
.t-accent    { color: var(--accent); }
.t-verified  { color: var(--verified); }

/* Utilities */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ============================================================
   Layout primitives
   ============================================================ */

.wrap {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--page-pad-x);
}

.wrap-narrow {
  width: 100%;
  max-width: var(--max-w-narrow);
  margin-inline: auto;
  padding-inline: var(--page-pad-x);
}

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

.section--alt {
  background: var(--bg-elevated);
}

.section-head {
  max-width: 720px;
  margin-bottom: var(--space-8);
}

.section-head--centered {
  margin-inline: auto;
  text-align: center;
}

.section-head > .eyebrow {
  margin-bottom: var(--space-4);
}

.section-head > h2 {
  margin-bottom: var(--space-4);
}

.section-head > .lead {
  margin-top: var(--space-4);
}

/* Grids */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }

@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* Flex helpers */
.row     { display: flex; align-items: center; }
.row-gap { display: flex; gap: var(--space-4); }
.stack   { display: flex; flex-direction: column; gap: var(--space-4); }

/* ============================================================
   Reveal on scroll
   Works with motion.js IntersectionObserver
   ============================================================ */

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
  will-change: opacity, transform;
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal-delay="1"].is-revealed { transition-delay: 80ms; }
[data-reveal-delay="2"].is-revealed { transition-delay: 160ms; }
[data-reveal-delay="3"].is-revealed { transition-delay: 240ms; }
[data-reveal-delay="4"].is-revealed { transition-delay: 320ms; }
[data-reveal-delay="5"].is-revealed { transition-delay: 400ms; }

/* Reduced motion respect, absolute precedence */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}