/* ==========================================================================
   Free audit CTA — giant title, floating metric cards that count up,
   white pill + cyan arrow, ice wave rolling into the light "vibe" section.
   (crency: section.cta)
   ========================================================================== */

.s-audit {
  --wave-h: 160rem;               /* height of the wave strip at the bottom */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: max(1200rem, var(--vhx, 100svh));
  padding: 258rem 0 calc(120rem + var(--wave-h));
  background: var(--ink);
  color: var(--ice);
  overflow: visible;
}
.audit__inner { display: flex; flex-direction: column; align-items: center; }

/* ---------- Title ---------- */
.audit__head { position: relative; }
.audit__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 220rem;              /* Anton's caps are taller than Thunder's: 220rem ≈ crency's 250rem */
  line-height: .95;
  letter-spacing: .005em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ice);
  white-space: nowrap;
}
/* wide swaps: don't stretch the line box, scale from the baseline and
   match Anton's cap height (G is a capital, e an x-height glyph) */
.audit__title .wide { line-height: .8; margin: -.15em 0 -.08em; transform-origin: 50% calc(100% - .15em); }
.audit__title .audit__wide-g { transform: scaleY(1.27); margin-right: -.11em; }
.audit__title .audit__wide-e { transform: scaleY(1.44); }

/* ---------- Metric cards ---------- */
.audit__cards {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  perspective: 1000px; perspective-origin: 50%;
}
.audit__card { position: absolute; min-width: 312rem; will-change: transform; }
.audit__card-body {
  --card-bg: var(--blue);
  --card-fg: var(--ice-2);
  --track: rgba(7, 11, 31, .24);
  padding: 18rem 16rem;
  border: 2rem solid currentColor;
  border-radius: 16rem;
  background: var(--card-bg);
  color: var(--card-fg);
  transform-origin: 50% 60%;
}
.audit__card-row {
  display: flex; align-items: center;
  font-size: 20rem; font-weight: 600; line-height: 1.2;
  letter-spacing: -.005em;
}
/* the little "status LED" ring */
.audit__card-dot {
  position: relative; flex: none;
  width: 14rem; height: 14rem; margin-right: 14rem;
  border-radius: 50%;
  background: var(--cyan);
  border: 2rem solid var(--ink);
}
.audit__card-dot::after {          /* soft ping once the card is live */
  content: ""; position: absolute; inset: -2rem; border-radius: 50%;
  border: 2rem solid currentColor; opacity: 0;
}
.s-audit.is-live .audit__card-dot::after { animation: audit-ping 2.4s cubic-bezier(.2, .6, .35, 1) infinite; }
.audit__card--seo .audit__card-dot::after { animation-delay: .5s !important; }
.audit__card--animation .audit__card-dot::after { animation-delay: 1s !important; }
.audit__card--design .audit__card-dot::after { animation-delay: 1.5s !important; }
.audit__card--conversion .audit__card-dot::after { animation-delay: .25s !important; }
@keyframes audit-ping {
  0% { transform: scale(1); opacity: .7; }
  70%, 100% { transform: scale(2.4); opacity: 0; }
}
.audit__card-num { margin-left: auto; padding-left: 16rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.audit__bar {
  display: flex; overflow: hidden;
  height: 5rem; margin-top: 20rem;
  border-radius: 10rem;
  background: var(--track);
}
.audit__bar-fill { display: block; height: 100%; min-width: 5%; border-radius: inherit; background: currentColor; }

/* colours (crency: blue / pink / yellow / lime / violet) */
.audit__card--speed .audit__card-body { --card-bg: var(--blue); --card-fg: var(--ice-2); }
.audit__card--seo .audit__card-body { --card-bg: var(--red); --card-fg: #fff0f2; }
.audit__card--animation .audit__card-body { --card-bg: var(--yellow); --card-fg: var(--ink); --track: #fff; }
.audit__card--design .audit__card-body { --card-bg: var(--cyan); --card-fg: var(--ink); --track: #fff; }
.audit__card--conversion .audit__card-body { --card-bg: var(--indigo); --card-fg: var(--ice); }
.audit__card--animation .audit__card-dot { background: var(--white); }

/* positions — desktop, relative to the title block (crency's layout, scaled to Anton) */
.audit__card--speed { top: -93rem; left: 37%; }
.audit__card--seo { top: 139rem; left: 83%; }
.audit__card--animation { top: 274rem; left: 21.5%; }
.audit__card--design { top: 413rem; right: 0; }
.audit__card--conversion { top: 419rem; left: -8%; }

/* ---------- Button ---------- */
.audit__cta { margin-top: 96rem; gap: 4rem; font-size: 19rem; }
.audit__cta .btn__label { height: 71rem; padding: 0 32rem; --bubble: var(--cyan); --bubble-fg: var(--ink); }
.audit__cta .btn__arrow { width: 71rem; height: 71rem; }

/* ---------- Wave ---------- */
.audit__wave {
  position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1;
  width: 100%; height: var(--wave-h);
  overflow: visible;
  pointer-events: none;
}
.audit__wave-main { fill: var(--ice); }

/* ==========================================================================
   Tablet
   ========================================================================== */
@media (max-width: 991px) {
  .s-audit { --wave-h: 90rem; min-height: 0; padding: 180rem 0 calc(140rem + var(--wave-h)); }
  .audit__title { font-size: 122rem; }
  .audit__cards { left: 50%; right: auto; width: 744rem; margin-left: -372rem; }
  .audit__card-body { padding: 13rem 16rem 16rem; }
  .audit__card-row { line-height: 1; }
  .audit__bar { margin-top: 13rem; }
  /* zig-zag around the title (crency's tablet slots, mirrored so the wide G stays visible) */
  .audit__card--speed { top: -83rem; left: 286rem; right: auto; }
  .audit__card--seo { top: 72rem; left: 408rem; right: auto; }
  .audit__card--animation { top: 186rem; left: 14rem; right: auto; }
  .audit__card--design { top: 318rem; left: 402rem; right: auto; }
  .audit__card--conversion { top: 420rem; left: 84rem; right: auto; }
  .audit__cta { margin-top: 175rem; font-size: 20rem; }
  .audit__cta .btn__label { height: 60rem; padding: 0 34rem; }
  .audit__cta .btn__arrow { width: 60rem; height: 60rem; }
}

/* ==========================================================================
   Phone
   ========================================================================== */
@media (max-width: 743px) {
  .s-audit { --wave-h: 48rem; padding: 150rem 0 calc(120rem + var(--wave-h)); }
  .audit__head { padding: 189rem 0 63rem; }
  .audit__title { font-size: 64rem; }   /* Anton runs wider than Thunder: 64rem keeps the 16rem side gutter */
  .audit__cards { width: 390rem; margin-left: -195rem; }
  .audit__card { width: 190.6rem; min-width: 0; }
  .audit__card-body { padding: 7.9rem 9.8rem 9.8rem; border-width: 1.2rem; border-radius: 9.8rem; }
  .audit__card-row { font-size: 12.2rem; }
  .audit__card-dot { width: 10rem; height: 10rem; margin-right: 9rem; border-width: 1.2rem; }
  .audit__card-num { padding-left: 8rem; }
  .audit__bar { height: 3rem; margin-top: 7.9rem; }
  .audit__card--animation { top: 91rem; left: 46rem; }
  .audit__card--speed { top: 149rem; left: 100rem; }
  .audit__card--design { top: 278rem; left: 20rem; }   /* sits on line 2 so "website" stays legible */
  .audit__card--conversion { top: 391rem; left: 179rem; }
  .audit__card--seo { display: none; }
  .audit__cta { margin-top: 50rem; font-size: 16rem; gap: 3rem; }
  .audit__cta .btn__label { height: 49rem; padding: 0 28rem; }
  .audit__cta .btn__arrow { width: 49rem; height: 49rem; }
}