/* ============================================================
   Base — reset, typography, layout primitives, utilities
   ============================================================ */
*,*::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}}
body{
  font-family:var(--font-body);
  font-size:var(--fs-md);
  line-height:1.65;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
/* safety net: any inline icon without an explicit size defaults to text-scale
   (every component that needs a bigger/smaller icon sets its own width/height) */
svg{width:1.15em;height:1.15em}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul{list-style:none}
input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:6px}
::selection{background:var(--blue);color:#fff}

h1,h2,h3,h4{font-family:var(--font-display);line-height:1.08;letter-spacing:-.02em;color:var(--navy);font-weight:800}
h1{font-size:var(--fs-3xl)}
h2{font-size:var(--fs-2xl)}
h3{font-size:var(--fs-xl);font-weight:700}
h4{font-size:var(--fs-lg);font-weight:700}
p{color:var(--muted)}
strong{color:var(--ink)}

/* ---- Layout ---- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2rem)}
.narrow{max-width:var(--container-narrow)}
.section{padding-block:var(--section-y)}
.section-sm{padding-block:clamp(3rem,2rem + 4vw,5rem)}
main{min-height:60vh}

/* ---- Eyebrow / section headers ---- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-mono);font-weight:600;font-size:var(--fs-sm);
  letter-spacing:.14em;text-transform:uppercase;color:var(--blue);
  padding:.4rem .85rem;border-radius:var(--r-pill);
  background:var(--grad-brand-soft);border:1px solid rgba(0,87,255,.14);
}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--grad-brand)}
.section-head{max-width:680px;margin-bottom:var(--sp-7)}
.section-head.center{margin-inline:auto;text-align:center}
.section-head h2{margin:var(--sp-4) 0 var(--sp-3)}
.section-head p{font-size:var(--fs-lg)}
.lead{font-size:var(--fs-lg);color:var(--muted)}

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

/* ---- Reveal animations ---- */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}.reveal.d5{transition-delay:.40s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
}

/* ---- Decorative blobs ---- */
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;pointer-events:none;z-index:0}
.blob-blue{background:radial-gradient(circle,rgba(0,87,255,.55),transparent 70%)}
.blob-teal{background:radial-gradient(circle,rgba(0,198,184,.5),transparent 70%)}
.blob-gold{background:radial-gradient(circle,rgba(255,209,102,.5),transparent 70%)}

/* ---- Utility ---- */
.bg-soft{background:var(--gray-50)}
.bg-navy{background:var(--grad-navy);color:#dbe6f4}
.bg-navy h1,.bg-navy h2,.bg-navy h3,.bg-navy h4{color:#fff}
.bg-navy p{color:#aab9cc}
.grid{display:grid;gap:clamp(1.1rem,2vw,1.7rem)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.rel{position:relative;z-index:1}
.center{text-align:center}
.mt-6{margin-top:var(--sp-6)}.mt-7{margin-top:var(--sp-7)}
.hide{display:none!important}
@media(max-width:980px){.g-4{grid-template-columns:repeat(2,1fr)}.g-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}