/* ============================================================
   Borderlands — base: reset, typography, buttons, layout utils
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--body);
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img, svg, video, iframe { display: block; max-width: 100%; }
ul, ol { list-style: none; }

/* ---- Headings ---- */
h1, h2, h3, h4 { color: var(--ink); font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); letter-spacing: -0.03em; }
h2 { font-size: clamp(2rem, 4vw, 2.4rem); }
h3 { font-size: 1.5rem; font-weight: 700; }
p  { color: var(--body); }

/* ---- Layout ---- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
@media (min-width: 640px) { .container { padding: 0 32px; } }

.section { padding: var(--space-20) 0; }
.section--tight { padding: var(--space-12) 0; }
.bg-warm-alt { background: var(--bg-alt); }
.bg-dark { background: var(--color-navy-900); }

/* ---- Eyebrow ---- */
.eyebrow {
  display: inline-block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent-text);
  margin-bottom: var(--space-4);
  letter-spacing: 0;
}
.bg-dark .eyebrow { color: var(--color-gold-400); }

/* ---- Section header ---- */
.section__head { max-width: 720px; margin-bottom: var(--space-12); }
.section__head p { font-size: 1.15rem; color: var(--muted); margin-top: var(--space-3); }

/* ---- Lead ---- */
.lead { font-size: 1.25rem; line-height: 1.6; color: var(--body); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.85rem 1.4rem;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--color-navy-900); color: #fff; }
.btn--primary:hover { background: var(--color-navy-800); box-shadow: var(--shadow-lg); }
.btn--gold { background: var(--accent); color: var(--color-navy-950); }
.btn--gold:hover { background: var(--accent-hover); box-shadow: var(--shadow-lg); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--hairline); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent-text); }
.btn--outline { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
.btn--outline:hover { border-color: #fff; background: rgba(255,255,255,0.08); }
.btn--lg { font-size: 1.05rem; padding: 1rem 1.75rem; }
.btn--sm { font-size: 0.9rem; padding: 0.6rem 1rem; }

/* ---- Reveal on scroll ---- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.5s ease-out, transform 0.5s ease-out; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover { transform: none; }
}