/* ========================================================================
   Base reset + typography
   ======================================================================== */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--color-bg);
  color:var(--color-text);
  font-family:var(--font-body);
  font-size:16px;
  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{ margin:0; padding:0; list-style:none; }
button{ font:inherit; cursor:pointer; }
input, textarea, select{ font:inherit; }
p{ margin:0 0 1em; color:var(--color-text-muted); }
p:last-child{ margin-bottom:0; }

h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  color:var(--color-ink);
  line-height:1.15;
  margin:0 0 .5em;
  letter-spacing:-.01em;
  font-weight:800;
}
h1{ font-size:clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem); }
h2{ font-size:clamp(1.7rem, 1.3rem + 1.7vw, 2.5rem); }
h3{ font-size:1.25rem; font-weight:750; }
h4{ font-size:1.05rem; font-weight:750; }

strong{ color:var(--color-ink); }

::selection{ background:var(--teal-200); color:var(--navy-900); }

.container{
  width:100%;
  max-width:var(--container-w);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.container-narrow{ max-width:820px; }
.container-wide{ max-width:1360px; }

section{ position:relative; }
.section-pad{ padding-block:clamp(56px, 5vw + 24px, 108px); }
.section-pad-sm{ padding-block:clamp(40px, 3vw + 20px, 64px); }

.section-heading{ max-width:720px; margin-bottom:clamp(32px,3vw,52px); }
.section-heading.align-center{ margin-inline:auto; text-align:center; }
.section-heading .section-desc{ font-size:1.08rem; margin-top:10px; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display);
  font-size:.78rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--color-primary-strong);
  background:var(--color-primary-soft);
  border:1px solid var(--teal-100);
  padding:6px 14px; border-radius:var(--radius-pill);
  margin-bottom:14px;
}
.eyebrow-on-dark{ color:var(--teal-100); background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); }

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

.icon{ width:22px; height:22px; flex-shrink:0; }
.icon-sm{ width:17px; height:17px; }
.icon-lg{ width:30px; height:30px; }

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

.demo-tag{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-400);
}
.demo-tag::before{
  content:''; width:6px; height:6px; border-radius:50%; background:var(--amber-400);
}

.skip-link{
  position:absolute; left:12px; top:-60px; background:var(--navy-900); color:#fff;
  padding:10px 16px; border-radius:8px; z-index:999; transition:top var(--dur-base) var(--ease);
}
.skip-link:focus{ top:12px; }

@media (max-width:640px){
  .container{ padding-inline:18px; }
}