/* ─── RESET ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  font-family: var(--font);
  font-weight: 400;
  font-size: var(--tx-base);
  line-height: 1.7;
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: var(--font); }
input, textarea, select { font-family: var(--font); }
::selection { background: var(--c-accent); color: var(--c-primary); }

/* ─── TYPOGRAPHY ──────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font);
  line-height: 1.2;
  color: var(--c-primary);
}
h1 { font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 700; }
h2 { font-size: clamp(1.625rem, 2.8vw, 2.25rem); font-weight: 700; }
h3 { font-size: clamp(1.3rem, 1.9vw, 1.625rem); font-weight: 600; }
h4 { font-size: 1.125rem; font-weight: 600; }
h5 { font-size: 1.0625rem; font-weight: 600; }
h6 { font-size: 0.9375rem; font-weight: 600; }
p { line-height: 1.75; color: var(--c-muted); }
strong { font-weight: 700; color: var(--c-ink); }

/* ─── UTILITY CLASSES ─────────────────────────────── */
.text-accent    { color: var(--c-accent) !important; }
.text-secondary { color: var(--c-secondary) !important; }
.text-white     { color: var(--c-white) !important; }
.text-muted     { color: var(--c-muted) !important; }
.text-ink       { color: var(--c-ink) !important; }

.bg-primary  { background: var(--c-primary); }
.bg-soft     { background: var(--c-bg-soft); }
.bg-soft2    { background: var(--c-bg-soft2); }
.bg-dark     { background: var(--c-primary); }

.fw-300 { font-weight: 300; }
.fw-400 { font-weight: 400; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-900 { font-weight: 900; }

.gap-row { row-gap: 32px; }

/* ─── SCROLL REVEAL ───────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }
.reveal.delay-1 { transition-delay: .1s; }
.reveal.delay-2 { transition-delay: .2s; }
.reveal.delay-3 { transition-delay: .3s; }
.reveal.delay-4 { transition-delay: .4s; }
.reveal.delay-5 { transition-delay: .5s; }
.reveal.delay-6 { transition-delay: .6s; }

/* ─── RESPONSIVE TYPOGRAPHY ──────────────────────── */
@media (max-width: 768px) {
  :root { --sp: var(--sp-sm); }
}