/* ============ Design tokens ============ */
:root {
  --navy-900: #191c54;
  --navy-700: #24247a;
  --navy-100: #eceefb;
  --red-600: #d42a2a;
  --red-700: #b02020;
  --ink: #1b1e2e;
  --muted: #5c6274;
  --line: #e5e7f0;
  --bg: #ffffff;
  --bg-soft: #f6f7fb;
  --radius: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(25, 28, 84, .06), 0 2px 8px rgba(25, 28, 84, .06);
  --shadow-md: 0 6px 16px rgba(25, 28, 84, .10), 0 2px 6px rgba(25, 28, 84, .06);
  --shadow-lg: 0 18px 40px rgba(25, 28, 84, .14);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --container: 1200px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ============ Reset & base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.18; font-weight: 800; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
.container { width: min(var(--container), 92%); margin-inline: auto; }
.section { padding: clamp(56px, 8vw, 96px) 0; }
.section--soft { background: var(--bg-soft); }

/* ============ Type helpers ============ */
.eyebrow {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--red-600);
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--red-600); }
.section-title { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.section-sub { color: var(--muted); max-width: 640px; }
.text-center { text-align: center; }
.text-center .section-sub { margin-inline: auto; }

/* ============ Buttons ============ */
.btn {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .85em 1.7em; border-radius: 999px;
  font-weight: 700; font-size: .95rem; cursor: pointer;
  border: 2px solid transparent;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s;
}
.btn--primary { background: var(--red-600); color: #fff; box-shadow: 0 8px 20px rgba(212, 42, 42, .28); }
.btn--primary:hover { background: var(--red-700); transform: translateY(-2px); }
.btn--ghost { border-color: var(--navy-700); color: var(--navy-700); background: transparent; }
.btn--ghost:hover { background: var(--navy-700); color: #fff; transform: translateY(-2px); }
.btn--light { background: #fff; color: var(--navy-900); }
.btn--light:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* ============ Reveal (effects.js drives) ============ */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
}
