/* ================= BASE / RESET ================= */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-body);
  background:var(--bg-page);
  color:var(--text-primary);
  font-size:var(--step-0);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; }
h1,h2,h3,h4{ font-family:var(--font-display); line-height:1.12; letter-spacing:-.01em; font-weight:600; }

:focus-visible{
  outline:2.5px solid var(--teal-500);
  outline-offset:3px;
  border-radius:4px;
}

.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:24px;
}
@media (min-width:900px){ .wrap{ padding-inline:40px; } }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:.76rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent-strong);
  font-weight:600;
}
.eyebrow::before{
  content:"";
  width:7px; height:7px;
  border-radius:50%;
  background:var(--teal-500);
  box-shadow:0 0 0 4px var(--teal-glow);
}
.on-dark .eyebrow{ color:var(--teal-300); }

.section{ padding-block:clamp(56px, 9vw, 108px); }
.section-head{ max-width:640px; margin-bottom:clamp(32px,5vw,56px); }
.section-head h2{ font-size:var(--step-3); margin-top:14px; }
.section-head p{ color:var(--text-muted); margin-top:14px; font-size:var(--step-0); }
.on-dark .section-head p{ color:var(--text-on-dark-muted); }

.text-muted{ color:var(--text-muted); }

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px;
  border-radius:999px;
  font-weight:600;
  font-size:.95rem;
  border:1.5px solid transparent;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
  white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(135deg,var(--teal-500),var(--teal-600));
  color:var(--white);
  box-shadow:0 10px 24px -8px rgba(22,168,155,.55);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -8px rgba(22,168,155,.65); }
.btn-ghost{
  background:transparent;
  border-color:rgba(255,255,255,.28);
  color:var(--text-on-dark);
}
.btn-ghost:hover{ border-color:var(--teal-400); background:rgba(60,201,187,.1); }
.btn-outline{
  background:transparent;
  border-color:var(--navy-700);
  color:var(--navy-950);
}
.btn-outline:hover{ border-color:var(--teal-500); color:var(--teal-600); }
.btn-gold{
  background:linear-gradient(135deg,var(--gold-400),var(--gold-600));
  color:var(--navy-950);
  box-shadow:0 10px 24px -8px rgba(232,163,51,.55);
}
.btn-gold:hover{ transform:translateY(-2px); }
.btn-block{ width:100%; }
.btn-sm{ padding:10px 18px; font-size:.85rem; }

/* ---- badges/pills ---- */
.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 13px;
  border-radius:999px;
  font-size:.78rem;
  font-weight:600;
  background:var(--cloud-100);
  color:var(--slate-700);
  border:1px solid var(--border-soft);
}

/* ---- cards ---- */
.card{
  background:var(--bg-surface);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-lg);
  padding:28px;
}

/* utility */
.mono{ font-family:var(--font-mono); }
.center{ text-align:center; margin-inline:auto; }

/* skip link */
.skip-link{
  position:absolute; left:-999px; top:auto;
  background:var(--navy-950); color:#fff; padding:12px 18px; border-radius:8px; z-index:999;
}
.skip-link:focus{ left:16px; top:16px; }