/* ============================================================
   DIA v3 — reset, typography, layout primitives, accessibility
   ============================================================ */

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

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

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: -0.008em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--s4);
  font-weight: 600;
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  text-wrap: balance;
}
h1 { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.016em; }
h4 { font-size: var(--fs-h4); letter-spacing: -0.01em; }

p { margin: 0 0 var(--s4); }
p:last-child { margin-bottom: 0; }

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); text-decoration: underline; text-underline-offset: 3px; }

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

ul, ol { margin: 0 0 var(--s4); padding-left: 1.15rem; }
li { margin-bottom: var(--s2); }

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

::selection { background: rgba(21, 94, 239, 0.16); }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 6px;
}
.on-dark :focus-visible { outline-color: #7DD3FC; }

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--wide { max-width: var(--maxw-wide); }
.wrap--text { max-width: var(--maxw-text); }

.section { padding-block: var(--section-y); }
.section--compact { padding-block: var(--section-y-compact); }
.section--major { padding-block: var(--section-y-major); }
.section--flush-top { padding-top: 0; }

.section-head { max-width: 40rem; margin-bottom: var(--s8); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--text-secondary); font-size: var(--fs-lead); max-width: var(--measure); }
.section-head--center p { margin-inline: auto; }

.grid { display: grid; gap: var(--s5); }
.grid > *, .row > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }

.eyebrow {
  display: block;
  margin: 0 0 var(--s4);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--primary);
}

.lead { font-size: var(--fs-lead); color: var(--text-secondary); max-width: var(--measure); }
.muted { color: var(--text-secondary); }
.small { font-size: var(--fs-sm); }
.xs { font-size: var(--fs-xs); }
.tnum { font-variant-numeric: tabular-nums; }
.center { text-align: center; }

/* ---------- Dark sections ---------- */
.on-dark {
  background: var(--dark-section);
  color: var(--text-on-dark);
}
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: #FFFFFF; }
.on-dark .lead, .on-dark .muted, .on-dark .section-head p { color: var(--text-on-dark-soft); }
.on-dark .eyebrow { color: #38D6EA; }
.on-dark a { color: #7DD3FC; }

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

.skip-link {
  position: absolute;
  left: var(--s4);
  top: -64px;
  z-index: 300;
  background: var(--text-primary);
  color: #fff;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-sm);
  transition: top var(--t-fast);
}
.skip-link:focus { top: var(--s3); color: #fff; text-decoration: none; }

[hidden] { display: none !important; }

/* ---------- Reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--t-slow), transform var(--t-slow);
}
.reveal.is-in { opacity: 1; transform: none; }
html.no-js .reveal { opacity: 1; transform: none; }

@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;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .hero-bg, .mobile-cta, .toast-region { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .on-dark { background: #fff !important; color: #000 !important; }
}