/* ==========================================================
   DESIGN TOKENS
   Change colors/fonts here once — the whole site updates.
   ========================================================== */
:root{
  /* brand colors (from reference design) */
  --navy-900:#101f36;   /* darkest — footer, hero overlay */
  --navy-800:#16293f;   /* header bar */
  --navy-700:#1c3654;   /* stats bar, team badges */
  --orange:#f2622a;     /* primary accent — buttons, highlights */
  --orange-dark:#d9531f;

  /* neutrals */
  --paper:#ffffff;
  --bg-soft:#f6f7f9;    /* alternating section background */
  --ink:#16293f;        /* body text on light bg */
  --ink-muted:#5c6b7c;
  --line:#e4e7eb;

  /* type */
  --font-display:'Poppins', system-ui, sans-serif;
  --font-body:'Inter', system-ui, sans-serif;

  /* layout */
  --max-w:1200px;
  --radius:12px;
  --radius-sm:8px;
  --shadow:0 4px 20px rgba(16,31,54,.08);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
}
h1,h2,h3,h4{font-family:var(--font-display);margin:0 0 .5rem;line-height:1.2}
p{margin:0 0 1rem}
a{color:inherit}
img{max-width:100%;display:block}
.container{max-width:var(--max-w);margin:0 auto;padding:0 5%}
.section{padding:5rem 0}
.section--soft{background:var(--bg-soft)}
.eyebrow{
  color:var(--orange);text-transform:uppercase;letter-spacing:.08em;
  font-weight:700;font-size:.8rem;margin-bottom:.5rem;display:block;text-align:center;
}
.section h2{text-align:center}
.section > .container > p.lead{text-align:center;max-width:640px;margin:0 auto 3rem;color:var(--ink-muted)}

/* buttons */
.btn{
  display:inline-block;padding:.85rem 1.75rem;border-radius:999px;
  font-weight:600;text-decoration:none;border:2px solid transparent;cursor:pointer;
  font-family:var(--font-body);font-size:.95rem;
}
.btn--primary{background:var(--orange);color:#fff}
.btn--primary:hover{background:var(--orange-dark)}
.btn--outline{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.btn--outline:hover{background:rgba(255,255,255,.1)}
.btn--dark-outline{border-color:var(--navy-800);color:var(--navy-800)}

@media(max-width:640px){
  .section{padding:3rem 0}
}