/* ══════════════════════════════════════════════════════════════════════
 * BY THE NUMBERS: three count-up statistics (vanilla port of the Framer
 * StatsSection: easeOutExpo count over 2s, started when the row scrolls
 * into view). In the site palette:
 * ink numbers, muted labels, and the $0 in blue with the lime swoosh from
 * the hero once it lands. No box behind the row: each stat floats on the
 * page with its own soft glow, and no dividers.
 * ════════════════════════════════════════════════════════════════════ */
.stats .center-head { margin-bottom: 48px; }
/* each sentence of the headline breaks evenly on its own, so a narrow phone
 * never leaves one word alone on a line */
.stats__line { display: block; text-wrap: balance; }
.stats__row {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1040px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.stat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 48px 32px 44px;
  text-align: center;
  min-width: 0;
  isolation: isolate;
}
/* the floating glow: a soft blurred halo behind each number */
.stat::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 44%;
  width: min(300px, 88%);
  aspect-ratio: 1.7;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(40, 75, 255, 0.11), rgba(40, 75, 255, 0.035) 60%, rgba(40, 75, 255, 0) 100%);
  filter: blur(14px);
  pointer-events: none;
}
.stat--us::after {
  background: radial-gradient(closest-side, rgba(216, 250, 112, 0.36), rgba(40, 75, 255, 0.055) 62%, rgba(40, 75, 255, 0) 100%);
}
.stat__num {
  position: relative;
  display: inline-block;
  font: 800 clamp(48px, 5.6vw, 72px)/1 var(--display);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
  text-shadow: 0 10px 30px rgba(40, 75, 255, 0.16);
}
.stat__label {
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--muted);
  max-width: 26ch;
  text-wrap: balance;
}
.stat__label b { color: var(--ink); font-weight: 600; }

/* the agency price gets struck through once $0 lands */
.stat__strike {
  position: absolute;
  left: -4%;
  right: -4%;
  top: 52%;
  height: 0.07em;
  border-radius: 1em;
  background: var(--ink);
  opacity: 0.55;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s cubic-bezier(.6,.05,.3,1);
}
.stats.is-done .stat__strike { transform: scaleX(1); }

/* $0: blue, with the hero's lime swoosh drawn under it once it lands */
.stat--us .stat__num { color: var(--blue); text-shadow: 0 10px 34px rgba(40, 75, 255, 0.25); }
.stat__swoosh {
  position: absolute;
  left: -6%;
  width: 112%;
  bottom: -0.16em;
  height: 0.24em;
  overflow: visible;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}
.stats.is-done .stat__swoosh { opacity: 1; }
.stat__swoosh path {
  fill: none;
  stroke: var(--lime);
  stroke-width: max(0.1em, 6px);
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.8s cubic-bezier(.6,.05,.3,1);
}
.stats.is-done .stat__swoosh path { stroke-dashoffset: 0; }

@media (max-width: 820px) {
  .stats__row { grid-template-columns: 1fr; max-width: 460px; }
  .stat { padding: 30px 24px 28px; }
}
@media (max-width: 640px) {
  .stats .center-head { margin-bottom: 28px; }
  .stats .h2 { font-size: clamp(28px, 8.4vw, 34px); }
  .stat__label { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .stat__strike { transform: scaleX(1); transition: none; }
  .stat__swoosh { opacity: 1; transition: none; }
  .stat__swoosh path { stroke-dashoffset: 0; transition: none; }
}