/* ==========================================================================
   BASE / RESET
   ========================================================================== */

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

html{ scroll-behavior:smooth; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}

body{
  font-family:var(--f-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--c-charcoal);
  background:var(--c-white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img, video{ max-width:100%; display:block; }

a{ color:inherit; text-decoration:none; }

ul, ol{ list-style:none; }

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

/* Visible keyboard focus everywhere */
:focus-visible{
  outline:2px solid var(--c-blue);
  outline-offset:3px;
  border-radius:4px;
}

/* ---- Type scale ---- */
h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:700;
  letter-spacing:var(--ls-tight);
  line-height:var(--lh-tight);
  color:var(--c-black);
}
h1{ font-size:var(--fs-h1); }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); font-weight:600; }

.eyebrow{
  display:inline-block;
  font-family:var(--f-body);
  font-size:var(--fs-eyebrow);
  font-weight:600;
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  color:var(--c-blue);
  margin-bottom:var(--sp-2);
}

.lead{
  font-size:var(--fs-lead);
  line-height:var(--lh-snug);
  color:var(--c-graphite);
  font-weight:400;
}

/* ---- Layout helpers ---- */
.container{
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:var(--container-pad);
}

.section{ padding-block:var(--sp-8); }
.section--tight{ padding-block:var(--sp-6); }
.section--dark{ background:var(--c-black); color:var(--c-white); }
.section--dark h1, .section--dark h2, .section--dark h3{ color:var(--c-white); }
.section--fog{ background:var(--c-fog); }

.grid{ display:grid; gap:var(--sp-4); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

@media (max-width:980px){
  .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
}

.text-center{ text-align:center; }
.mx-auto{ margin-inline:auto; }
.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0;
}

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:0.95rem 1.9rem;
  border-radius:var(--r-pill);
  font-size:var(--fs-small);
  font-weight:600;
  letter-spacing:0.01em;
  transition:transform var(--dur-fast) var(--ease-out), background var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast);
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{
  background:var(--c-white); color:var(--c-black);
  box-shadow:var(--shadow-sm);
}
.btn-primary:hover{ box-shadow:var(--shadow-md); }
.btn-outline{
  border:1px solid var(--c-line-dark);
  color:inherit;
  backdrop-filter:blur(var(--glass-blur));
}
.section:not(.section--dark) .btn-outline{ border-color:var(--c-line-light); }
.btn-outline:hover{ background:rgba(127,127,127,0.08); }
.btn-dark{ background:var(--c-black); color:var(--c-white); }
.btn-dark:hover{ background:var(--c-charcoal); }

/* ---- Cards & glass ---- */
.card{
  background:var(--c-white);
  border:1px solid var(--c-mist);
  border-radius:var(--r-md);
  padding:var(--sp-4);
  transition:transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out);
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }

.glass{
  background:var(--glass-bg-dark);
  backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  border:1px solid var(--c-line-dark);
}

/* ---- Scroll reveal ---- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.reveal.is-visible{ opacity:1; transform:none; }
.reveal-delay-1{ transition-delay:120ms; }
.reveal-delay-2{ transition-delay:240ms; }
.reveal-delay-3{ transition-delay:360ms; }

/* ---- Animated counters ---- */
.counter{ font-family:var(--f-display); font-weight:700; font-size:var(--fs-h2); color:var(--c-black); }
.section--dark .counter{ color:var(--c-white); }

/* ---- Skip link ---- */
.skip-link{
  position:absolute; left:-999px; top:0;
  background:var(--c-black); color:var(--c-white);
  padding:.75rem 1.25rem; z-index:1000; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }