/* =========================================================================
   PulseFront
   Palette is sampled straight from the wordmark: ink #000713, accent #0012FD.
   ========================================================================= */

:root {
  --ink:        #000713;
  --ink-2:      #0a1122;
  --accent:     #0012fd;
  --accent-2:   #3547ff;
  --accent-lift:#6272ff;   /* accent raised for legibility on dark */

  --paper:      #ffffff;
  --paper-2:    #f5f7fb;
  --line:       #e3e7f0;
  --line-dark:  rgba(255,255,255,.14);

  --text:       #0d1424;
  --muted:      #5b6478;
  --muted-dark: #a6afc4;

  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 'Space Grotesk', var(--sans);

  --wrap: 1180px;
  --r: 14px;
  --r-lg: 22px;
  --shadow: 0 1px 2px rgba(3,10,30,.05), 0 12px 32px -12px rgba(3,10,30,.14);
  --shadow-lg: 0 2px 4px rgba(3,10,30,.06), 0 30px 70px -24px rgba(3,10,30,.28);

  color-scheme: light;
}

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

html { -webkit-text-size-adjust: 100%; }
html:focus-within { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.022em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.15rem, 1.35rem + 3.3vw, 3.9rem); }
h2 { font-size: clamp(1.75rem, 1.2rem + 2.1vw, 2.85rem); }
h3 { font-size: 1.12rem; letter-spacing: -.012em; line-height: 1.28; }
p  { text-wrap: pretty; }

::selection { background: var(--accent); color: #fff; }

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

.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 {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  z-index: 200; background: var(--ink); color: #fff;
  padding: .7rem 1.2rem; border-radius: 0 0 10px 10px;
  font-weight: 600; text-decoration: none;
}
.skip:focus { transform: translate(-50%, 0); }

.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}
.wrap--narrow { width: min(100% - 2.5rem, 760px); }

/* --------------------------------------------------------------- buttons */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  background: var(--btn-bg); color: var(--btn-fg);
  font: 600 .95rem/1 var(--sans);
  padding: .85rem 1.35rem;
  border: 1px solid transparent;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, color .16s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px -10px rgba(0,18,253,.55); background: var(--accent); }
.btn:active { transform: translateY(0); }
.btn--sm { padding: .6rem 1.05rem; font-size: .88rem; }
.btn--lg { padding: 1.02rem 1.9rem; font-size: 1.02rem; }

.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--text);
  border-color: var(--line);
}
.btn--ghost:hover { background: var(--paper-2); color: var(--text); box-shadow: none; border-color: #c9d1e2; }

.btn--onDark { --btn-bg: #fff; --btn-fg: var(--ink); }
.btn--onDark:hover { background: var(--accent-lift); color: #fff; }

/* ---------------------------------------------------------------- header */
.site-head {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.site-head.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 8px 24px -20px rgba(3,10,30,.5);
}
.site-head__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  min-height: 72px;
}
.site-head__logo { display: block; flex: none; }
.site-head__logo img { width: 172px; height: auto; }

.nav { display: flex; align-items: center; gap: 1.9rem; }
.nav a {
  font-size: .93rem; font-weight: 500; text-decoration: none; color: var(--muted);
  transition: color .16s ease;
}
.nav a:hover { color: var(--text); }
.nav .btn { color: #fff; }
.nav .btn:hover { color: #fff; }

.burger {
  display: none;
  width: 44px; height: 44px;
  background: none; border: 1px solid var(--line); border-radius: 11px;
  padding: 0; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.burger span {
  display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--text);
  transition: transform .22s ease, opacity .18s ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ------------------------------------------------------------------ hero */
.hero {
  position: relative;
  padding: clamp(3rem, 1.2rem + 6vw, 6rem) 0 clamp(3.5rem, 2rem + 5vw, 6rem);
  overflow: hidden;
}
/* soft brand wash behind the hero */
.hero::before {
  content: ''; position: absolute; inset: -30% -10% auto -30%; height: 130%;
  background:
    radial-gradient(50% 45% at 18% 30%, rgba(0,18,253,.10), transparent 70%),
    radial-gradient(40% 40% at 85% 12%, rgba(98,114,255,.13), transparent 70%);
  pointer-events: none;
}
.hero__grid {
  position: relative;
  display: grid; gap: clamp(2.5rem, 1rem + 5vw, 4rem);
  align-items: center;
}
.hero__copy { max-width: 34rem; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .8rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.1rem;
}
.eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 4px rgba(0,18,253,.14);
}
.eyebrow--light { color: var(--muted-dark); }
.eyebrow--light .dot { background: var(--accent-lift); box-shadow: 0 0 0 4px rgba(98,114,255,.2); }

.strike {
  position: relative; white-space: nowrap;
  color: var(--muted);
}
.strike::after {
  content: ''; position: absolute; left: -2%; right: -2%; top: 54%;
  height: .09em; background: var(--accent); border-radius: 2px;
  transform: rotate(-4deg);
}

.lede {
  font-size: clamp(1.02rem, .96rem + .28vw, 1.16rem);
  color: var(--muted);
  margin-top: 1.35rem;
  max-width: 33rem;
}
.lede strong { color: var(--text); font-weight: 600; }

.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

.ticks { list-style: none; padding: 0; margin: 1.9rem 0 0; display: grid; gap: .55rem; }
.ticks li {
  position: relative; padding-left: 1.7rem;
  font-size: .93rem; color: var(--muted);
}
.ticks li::before {
  content: ''; position: absolute; left: 0; top: .42em;
  width: 1.05rem; height: 1.05rem; border-radius: 50%;
  background: rgba(0,18,253,.1);
}
.ticks li::after {
  content: ''; position: absolute; left: .33rem; top: .72em;
  width: .38rem; height: .2rem;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* --------------------------------------------- before / after comparison */
/* --pos is the divider position; JS mirrors the range input onto it.
   Declared here rather than inline so the page needs no inline styles. */
.ba { margin: 0; --pos: 52%; }
.ba__cap {
  margin-top: .9rem; font-size: .84rem; color: var(--muted); text-align: center;
}

.browser {
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
  overflow: hidden;
}
.browser__bar {
  display: flex; align-items: center; gap: .4rem;
  padding: .62rem .85rem;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
.browser__dot { width: 9px; height: 9px; border-radius: 50%; background: #d3d9e6; flex: none; }
.browser__url {
  margin-left: .6rem; flex: 1;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  font-size: .68rem; color: #9aa3b6; padding: .2rem .7rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.browser__stage {
  position: relative;
  aspect-ratio: 4 / 3;
  container-type: inline-size;   /* mock sites scale with cqw units */
  overflow: hidden;
  touch-action: pan-y;
}
@media (min-width: 700px) { .browser__stage { aspect-ratio: 16 / 11; } }

.mock { position: absolute; inset: 0; overflow: hidden; }
/* BEFORE sits on top and is clipped back to the divider position */
.mock--before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }

.ba__divider {
  position: absolute; top: 0; bottom: 0; left: var(--pos);
  width: 2px; background: var(--accent);
  transform: translateX(-1px);
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,.5);
}
.ba__grip {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--accent); border: 3px solid #fff;
  box-shadow: 0 6px 18px -4px rgba(0,18,253,.6);
}
/* chevrons on the grip */
.ba__grip::before, .ba__grip::after {
  content: ''; position: absolute; top: 50%; width: 6px; height: 6px;
  border-top: 2px solid #fff; border-right: 2px solid #fff;
}
.ba__grip::before { left: 9px;  transform: translateY(-50%) rotate(-135deg); }
.ba__grip::after  { right: 9px; transform: translateY(-50%) rotate(45deg); }

.ba__tag {
  position: absolute; top: .7rem; z-index: 3;
  font: 600 .66rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  padding: .38rem .6rem; border-radius: 999px;
  pointer-events: none;
  transition: opacity .2s ease;
}
.ba__tag--before { left: .7rem; background: rgba(13,20,36,.72); color: #fff; }
.ba__tag--after  { right: .7rem; background: var(--accent); color: #fff; }

/* The range input is the real control: invisible, full-bleed, keyboard-ready. */
.ba__range {
  position: absolute; inset: 0; z-index: 4;
  width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0;
  background: transparent; -webkit-appearance: none; appearance: none;
  cursor: ew-resize;
  touch-action: pan-y;   /* let the page still scroll vertically over the widget */
}
/* Tall transparent thumbs so the grab area covers the full stage; the stage
   clips the overflow. Fixed px because cq units don't resolve in the block
   axis of an inline-size container. */
.ba__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 44px; height: 700px; background: transparent; cursor: ew-resize;
}
.ba__range::-moz-range-thumb {
  width: 44px; height: 700px; background: transparent; border: 0; cursor: ew-resize;
}
.ba__range:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---- the "before" mock: a mid-2000s brochure site ---------------------- */
.mock--before { background: #eceae4; font-family: 'Times New Roman', Times, serif; color: #111; }
.o-head {
  background: linear-gradient(#5b7fc7, #21386f);
  border-bottom: 3px solid #14224a;
  padding: 3.2cqw 2.5cqw; text-align: center;
}
.o-title { font-size: 4.4cqw; font-weight: 700; color: #fff; text-shadow: 1px 1px 0 #000; }
.o-tag   { font-size: 2.1cqw; color: #ffe27a; margin-top: .5cqw; font-style: italic; }
.o-nav {
  background: #d8d4ca; border-bottom: 1px solid #a9a396;
  padding: 1.5cqw; text-align: center; font-size: 2.1cqw; color: #444;
}
.o-nav span { color: #0000cc; text-decoration: underline; margin: 0 .8cqw; }
.o-body { display: flex; gap: 2.5cqw; padding: 3cqw 2.5cqw; }
.o-col { flex: 1; }
.o-h2 {
  font-size: 3cqw; font-weight: 700; color: #a00; margin-bottom: 1.2cqw;
  border-bottom: 1px dotted #a00; padding-bottom: .4cqw;
}
.o-h2:not(:first-child) { margin-top: 3cqw; }
.o-text { height: 1.5cqw; background: #b9b5ab; border-radius: 1px; margin-bottom: .95cqw; }
.o-text--short { width: 62%; }
.o-side { width: 30%; }
.o-box {
  background: #ffffcc; border: 2px ridge #cc0;
  padding: 1.6cqw; font-size: 2.1cqw; text-align: center; line-height: 1.35;
}
.o-box b { font-size: 2.6cqw; }
.o-img {
  margin-top: 2cqw; height: 14cqw;
  background: repeating-linear-gradient(45deg, #c3bfb4 0 6px, #b5b1a6 6px 12px);
  border: 2px inset #999;
}
.o-hits { margin-top: 2cqw; font-size: 1.8cqw; color: #333; text-align: center; }
.o-foot {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: #d8d4ca; border-top: 1px solid #a9a396;
  padding: 1.3cqw; text-align: center; font-size: 1.7cqw; color: #666;
}

/* ---- the "after" mock: what we'd actually ship ------------------------- */
.mock--after { background: #fff; font-family: var(--sans); }
.m-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 3cqw 3.6cqw; border-bottom: 1px solid #eef1f7;
}
.m-logo { font-family: var(--display); font-weight: 500; font-size: 2.4cqw; letter-spacing: .12em; color: var(--ink); }
.m-logo b { color: var(--accent); font-weight: 700; }
.m-nav { display: flex; align-items: center; gap: 1.7cqw; }
.m-nav i { display: block; width: 5cqw; height: 1.15cqw; background: #dfe4ee; border-radius: 999px; }
.m-cta {
  background: var(--ink); color: #fff; font-size: 1.7cqw; font-weight: 600;
  padding: 1.1cqw 2cqw; border-radius: 999px;
}
.m-hero { padding: 6.5cqw 3.6cqw 4cqw; }
.m-h1 {
  font-family: var(--display); font-weight: 700;
  font-size: 6.4cqw; line-height: 1.05; letter-spacing: -.025em; color: var(--ink);
}
.m-sub { font-size: 2.2cqw; color: var(--muted); margin-top: 1.8cqw; }
.m-btns { display: flex; gap: 1.4cqw; margin-top: 3.4cqw; }
.m-btn {
  background: var(--accent); color: #fff; font-size: 1.8cqw; font-weight: 600;
  padding: 1.5cqw 2.8cqw; border-radius: 999px;
}
.m-btn--g { background: transparent; color: var(--ink); border: 1px solid #dfe4ee; }
.m-cards { display: flex; gap: 2cqw; padding: 0 3.6cqw; }
.m-card {
  flex: 1; height: 13cqw; border-radius: 2cqw;
  background: linear-gradient(160deg, #f4f6fb, #e9edf7);
  border: 1px solid #eef1f7;
}

/* ----------------------------------------------------------------- stats */
.stats { padding: clamp(2.5rem, 1rem + 4vw, 4rem) 0; border-block: 1px solid var(--line); background: var(--paper-2); }
.stats__grid { display: grid; gap: 2rem; }
.stat__n {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.4rem, 1.7rem + 2.6vw, 3.4rem);
  line-height: 1; letter-spacing: -.03em;
  color: var(--accent);
}
.stat__u { font-size: .5em; }
.stat p { margin-top: .7rem; color: var(--muted); font-size: .97rem; max-width: 22rem; }
.sources { margin-top: 2.2rem; font-size: .76rem; color: #8b93a6; }

/* -------------------------------------------------------------- sections */
.section { padding: clamp(3.5rem, 2rem + 5vw, 6.5rem) 0; }
.section--tint { background: var(--paper-2); border-block: 1px solid var(--line); }
.section--dark {
  background: var(--ink); color: #fff;
  background-image:
    radial-gradient(60% 50% at 12% 0%, rgba(0,18,253,.30), transparent 70%),
    radial-gradient(45% 45% at 95% 100%, rgba(98,114,255,.18), transparent 70%);
}
.section--dark h2, .section--dark h3 { color: #fff; }
.section__lede {
  margin-top: 1.1rem; max-width: 44rem;
  color: var(--muted); font-size: 1.05rem;
}
.section--dark .section__lede { color: var(--muted-dark); }

/* signs */
.signs {
  list-style: none; padding: 0;
  margin: 2.6rem 0 0;
  display: grid; gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.signs li {
  background: var(--paper);
  padding: 1.15rem 1.35rem 1.15rem 3.2rem;
  position: relative;
  font-size: 1.01rem;
}
.signs li::before {
  content: ''; position: absolute; left: 1.3rem; top: 1.42rem;
  width: 1.1rem; height: 1.1rem; border-radius: 4px;
  border: 2px solid var(--accent);
}
.signs li::after {
  content: ''; position: absolute; left: 1.6rem; top: 1.66rem;
  width: .45rem; height: .24rem;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* cards */
.cards { display: grid; gap: 1.1rem; margin-top: 2.8rem; }
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.7rem 1.6rem;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #d3dae9; }
.card__ico {
  width: 42px; height: 42px; border-radius: 11px;
  display: grid; place-items: center;
  background: rgba(0,18,253,.08); color: var(--accent);
  margin-bottom: 1.1rem;
}
.card__ico svg { width: 21px; height: 21px; }
.card p { margin-top: .55rem; color: var(--muted); font-size: .95rem; }

/* reasons */
.reasons { display: grid; gap: 1.6rem; margin-top: 3rem; }
.reason { padding-top: 1.3rem; border-top: 1px solid var(--line-dark); }
.reason__n {
  display: block;
  font-family: var(--display); font-weight: 700; font-size: .82rem;
  letter-spacing: .1em; color: var(--accent-lift); margin-bottom: .7rem;
}
.reason p { margin-top: .5rem; color: var(--muted-dark); font-size: .95rem; }

.beat {
  margin-top: 3.4rem;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-lg);
  padding: clamp(1.6rem, 1rem + 2vw, 2.4rem);
  display: grid; gap: 1.5rem; align-items: center;
}
.beat p { color: var(--muted-dark); margin-top: .45rem; font-size: .98rem; }

/* comparison table */
.table-scroll { margin-top: 2.6rem; overflow-x: auto; border-radius: var(--r); border: 1px solid var(--line); }
.cmp { width: 100%; border-collapse: collapse; min-width: 640px; font-size: .95rem; }
.cmp th, .cmp td { text-align: left; padding: 1.05rem 1.3rem; vertical-align: top; }
.cmp thead th {
  font-family: var(--display); font-size: .78rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
.cmp thead .cmp__us { color: var(--accent); }
.cmp tbody th { font-weight: 600; width: 24%; }
.cmp tbody tr + tr th, .cmp tbody tr + tr td { border-top: 1px solid var(--line); }
.cmp td:last-child { color: var(--text); font-weight: 500; background: rgba(0,18,253,.035); }
.cmp td:nth-child(2) { color: var(--muted); }

/* process */
.steps { list-style: none; padding: 0; margin: 2.8rem 0 0; display: grid; gap: 1.1rem; counter-reset: step; }
.step {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.7rem 1.6rem;
}
.step__n {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--ink); color: #fff;
  font-family: var(--display); font-weight: 700; font-size: .95rem;
  margin-bottom: 1rem;
}
.step p { margin-top: .5rem; color: var(--muted); font-size: .95rem; }

/* faq */
.faq { margin-top: 2.4rem; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 1.25rem 2.6rem 1.25rem 0;
  position: relative;
  font-family: var(--display); font-weight: 500; font-size: 1.06rem;
  letter-spacing: -.01em;
  transition: color .16s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq summary::after {
  content: ''; position: absolute; right: .4rem; top: 1.65rem;
  width: 10px; height: 10px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: translateY(-50%) rotate(45deg);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: translateY(-20%) rotate(-135deg); }
.faq details p { padding: 0 1.5rem 1.4rem 0; color: var(--muted); font-size: .98rem; margin-top: -.25rem; }

/* --------------------------------------------------------------- cta/foot */
.cta {
  background: var(--ink); color: #fff;
  background-image:
    radial-gradient(55% 60% at 50% 0%, rgba(0,18,253,.35), transparent 70%),
    radial-gradient(40% 50% at 88% 100%, rgba(98,114,255,.16), transparent 70%);
  padding: clamp(3.8rem, 2rem + 6vw, 7rem) 0;
  text-align: center;
}
.cta__inner { max-width: 46rem; }
.cta h2 { color: #fff; }
.cta > .wrap > p { color: var(--muted-dark); margin-top: 1.1rem; font-size: 1.05rem; }
.cta .btn { margin-top: 2.2rem; }
.cta__mail { font-size: .92rem; }
.cta__mail a { color: var(--accent-lift); text-underline-offset: 3px; }

/* 404 */
.err { min-height: 100dvh; display: grid; place-items: center; }
.err__logo { width: 180px; margin: 0 auto 2.5rem; }

.foot { background: var(--ink-2); color: var(--muted-dark); padding: 3.5rem 0 2rem; }
.foot__inner { display: grid; gap: 2.2rem; }
.foot__brand img { width: 170px; }
.foot__brand p { margin-top: 1rem; font-size: .92rem; max-width: 22rem; }
.foot__nav { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; align-content: start; }
.foot__nav a { font-size: .92rem; text-decoration: none; transition: color .16s ease; }
.foot__nav a:hover { color: #fff; }
.foot__legal {
  margin-top: 2.6rem; padding-top: 1.5rem;
  border-top: 1px solid var(--line-dark);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  font-size: .82rem; color: #7d8699;
}

/* ---------------------------------------------------------------- reveal */
.reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ------------------------------------------------------------ responsive */
@media (min-width: 640px) {
  .stats__grid { grid-template-columns: repeat(3, 1fr); gap: 2.4rem; }
  .signs { grid-template-columns: 1fr 1fr; }
  .cards { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .reasons { grid-template-columns: 1fr 1fr; gap: 1.8rem 2.6rem; }
  .foot__inner { grid-template-columns: 1.2fr 1fr; }
}

@media (min-width: 980px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(4, 1fr); }
  .beat { grid-template-columns: 1fr auto; }
}

@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* mobile nav */
@media (max-width: 900px) {
  .burger { display: flex; }
  .nav {
    position: fixed; inset: 72px 0 auto;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: .5rem 1.25rem 1.5rem;
    box-shadow: var(--shadow);
    transform: translateY(-130%);
    transition: transform .28s cubic-bezier(.22,.61,.36,1);
    max-height: calc(100dvh - 72px); overflow-y: auto;
  }
  .nav.is-open { transform: none; }
  .nav a {
    padding: .95rem .25rem; font-size: 1.02rem; color: var(--text);
    border-bottom: 1px solid var(--line);
  }
  .nav .btn {
    margin-top: 1.1rem; border-bottom: 0; justify-content: center;
    padding-block: .95rem;
  }
}

/* ------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ print */
@media print {
  .site-head, .burger, .ba__range, .cta .btn, .hero__cta { display: none; }
  body { font-size: 12pt; }
  .section--dark, .cta, .foot { background: #fff !important; color: #000 !important; }
}