/* ==========================================================================
   BASE — reset, typography, accessibility
   ========================================================================== */

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

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

body{
  font-family:var(--font-body);
  font-size:var(--fs-base);
  line-height:1.6;
  color:var(--ink-100);
  background:var(--navy-900);
  min-height:100vh;
  overflow-x:hidden;
  transition:background var(--dur-med) var(--ease), color var(--dur-med) var(--ease);
}

img,video,svg{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,textarea{ font:inherit; color:inherit; }
ul{ list-style:none; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--white);
  line-height:1.12;
  font-weight:600;
  letter-spacing:-.01em;
}

::selection{ background:rgba(var(--cyan-glow),.35); color:var(--white); }

::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--navy-950); }
::-webkit-scrollbar-thumb{ background:var(--navy-500); border-radius:var(--r-pill); }
::-webkit-scrollbar-thumb:hover{ background:var(--cyan-500); }

/* ---- Focus visibility (accessibility) -------------------------------- */
:focus-visible{
  outline:2px solid var(--cyan-400);
  outline-offset:3px;
  border-radius:6px;
}

/* ---- Utility -----------------------------------------------------------*/
.container{
  width:100%;
  max-width:var(--max-w);
  margin-inline:auto;
  padding-inline:clamp(1.25rem, 4vw, 3rem);
}

.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.skip-link{
  position:fixed; top:-60px; left:1rem; z-index:1000;
  background:var(--cyan-400); color:var(--navy-950);
  padding:.75rem 1.25rem; border-radius:var(--r-sm);
  font-weight:600; transition:top var(--dur-fast) var(--ease);
}
.skip-link:focus{ top:1rem; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--cyan-300);
}
.eyebrow::before{
  content:'';
  width:22px; height:1px;
  background:linear-gradient(90deg, var(--cyan-400), transparent);
}

.section{
  position:relative;
  padding-block:var(--sp-9);
}

.section-head{
  max-width:680px;
  margin-bottom:var(--sp-8);
}
.section-head h2{ font-size:var(--fs-2xl); margin-block:var(--sp-3); }
.section-head p{ color:var(--ink-300); font-size:var(--fs-md); }
.section-head.center{ margin-inline:auto; text-align:center; }

.text-gradient{
  background:var(--grad-brand);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}