/* ═══════════════════════════════════════════════════════════
   TUNEX — AMAZON PPC SECTION
   A scroll-scrubbed before/after account rebuild.

   Every other section on this page is trigger-based: something
   enters view and plays. This one is *scrubbed* — the scroll
   position is the timeline, so dragging up and down rewinds the
   account between "wasteful" and "optimised". That makes the
   pitch ("we make every rupee work harder") something the
   visitor performs rather than reads.

   JS sets exactly one custom property, --p (0 -> 1). Every bar
   height and colour blend is interpolated from it in CSS calc(),
   so no per-frame layout work happens in JavaScript.

   The numbers match Tunex's own published averages: ACoS down
   ~35% and ROAS up ~4x. The animation demonstrates the claim
   rather than inventing a bigger one.
   ═══════════════════════════════════════════════════════════ */

.ppc2-section {
  --p: 1; /* JS overrides on scroll; 1 is the meaningful resting state */
  background: var(--b);
  padding: 100px 56px 92px;
  overflow: hidden;
}

.ppc2-head {
  max-width: 700px;
  margin: 0 auto 52px;
  text-align: center;
}
.ppc2-sub {
  margin-top: 16px;
  font-size: 14.5px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.5);
}

/* ── READOUTS ──────────────────────────────────────────── */

.ppc2-viz {
  max-width: 980px;
  margin: 0 auto;
}

.ppc2-readouts {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  margin-bottom: 30px;
}

.ppc2-metric {
  text-align: center;
  min-width: 140px;
}
.ppc2-mlabel {
  display: block;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}
.ppc2-mval {
  display: block;
  margin-top: 6px;
  font-family: 'Bebas Neue', cursive, sans-serif;
  font-size: clamp(38px, 5vw, 62px);
  line-height: 1;
  letter-spacing: -1px;
  /* red while wasteful, green once rebuilt — cross-faded, not colour-mixed,
     so it renders identically everywhere */
  color: var(--r);
  position: relative;
}
.ppc2-mval::after {
  content: attr(data-shadow);
  position: absolute;
  inset: 0;
  color: #22c55e;
  opacity: var(--p);
}

.ppc2-track {
  position: relative;
  height: 3px;
  border-radius: 3px;
  background: #1c1c1c;
}
.ppc2-track-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--p) * 100%);
  border-radius: 3px;
  background: linear-gradient(90deg, var(--r), #22c55e);
}
.ppc2-track-a,
.ppc2-track-b {
  position: absolute;
  top: 14px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
}
.ppc2-track-a {
  left: 0;
}
.ppc2-track-b {
  right: 0;
}

/* ── CHART ─────────────────────────────────────────────── */

.ppc2-chart {
  display: flex;
  align-items: flex-end;
  gap: clamp(6px, 1.2vw, 14px);
  height: 250px;
  padding: 0 2px;
  border-bottom: 1px solid #1e1e1e;
}

.ppc2-bar {
  position: relative;
  flex: 1 1 0;
  border-radius: 5px 5px 0 0;
  overflow: hidden;
  /* the whole effect: one variable, interpolated per bar */
  height: calc((var(--h0) + (var(--h1) - var(--h0)) * var(--p)) * 1%);
}

.ppc2-bar i {
  position: absolute;
  inset: 0;
  display: block;
}
/* wasteful spend */
.ppc2-bar i:first-child {
  background: linear-gradient(180deg, var(--r), #6d1020);
  opacity: calc(1 - var(--p));
}
/* profitable spend */
.ppc2-bar i:last-child {
  background: linear-gradient(180deg, #22c55e, #0f5f2e);
  opacity: var(--p);
}

.ppc2-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
}

.ppc2-hint {
  margin-top: 26px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.32);
}
.ppc2-hint i {
  color: var(--r);
}

/* ── METHOD CARDS ──────────────────────────────────────── */

.ppc2-methods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 980px;
  margin: 64px auto 0;
}

.ppc2-card {
  display: flex;
  gap: 16px;
  padding: 26px 24px;
  background: #101010;
  border: 1px solid #1e1e1e;
  border-radius: 14px;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease-out);
}
.ppc2-card:hover {
  border-color: rgba(196, 30, 58, 0.45);
  transform: translateY(-3px);
}
.ppc2-ico {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(196, 30, 58, 0.12);
}
.ppc2-ico i {
  font-size: 20px;
  color: var(--r);
}
.ppc2-card h4 {
  font-size: 14.5px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.2px;
}
.ppc2-card p {
  margin-top: 7px;
  font-size: 13px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.5);
}

.ppc2-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 52px;
}

/* ── RESPONSIVE / MOTION ───────────────────────────────── */

@media (max-width: 900px) {
  .ppc2-section {
    padding: 76px 24px 72px;
  }
  .ppc2-readouts {
    grid-template-columns: 1fr 1fr;
    gap: 18px 12px;
  }
  .ppc2-track {
    grid-column: 1 / -1;
    order: 3;
    margin-top: 16px;
  }
  .ppc2-chart {
    height: 180px;
    gap: 5px;
  }
  .ppc2-methods {
    grid-template-columns: 1fr;
    margin-top: 48px;
  }
}

@media (max-width: 560px) {
  /* twelve bars on a phone is mush — drop to the last six months */
  .ppc2-bar:nth-child(-n + 6) {
    display: none;
  }
  .ppc2-axis span:first-child {
    visibility: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* no scrubbing: rest on the outcome the section is about */
  .ppc2-section {
    --p: 1;
  }
  .ppc2-card {
    transition: none;
  }
  .ppc2-hint {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════
   THE AMAZON CHALLENGE — PROBLEM / FIX CARDS

   Mechanic not used anywhere else on the page: each card is a
   two-layer panel. The red problem sits on top; sliding it away
   on hover or focus uncovers the green fix underneath. The
   section's whole job is "here is what it costs you, here is
   what we do about it", so the interaction *is* the argument.
   ═══════════════════════════════════════════════════════════ */

.chal-section {
  background: var(--w);
  padding: 96px 56px;
  border-top: 1.5px solid var(--border);
}
.chal-head { text-align: center; max-width: 640px; margin: 0 auto 56px; }
.chal-sub { margin-top: 14px; font-size: 14px; line-height: 1.75; color: var(--muted); }

.chal-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  max-width: 1180px;
  margin: 0 auto;
}

.chal-card {
  position: relative;
  height: 300px;
  border-radius: 16px;
  overflow: hidden;
  border: 1.5px solid var(--border);
  background: var(--w);
  cursor: default;
}

/* both faces fill the card; the fix waits underneath */
.chal-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 26px 24px;
}

.chal-problem {
  background: var(--w);
  z-index: 1;
  /* reserve the strip the peek label sits in, or it lands on top of the
     severity meter, which is also pinned to the bottom */
  padding-bottom: 46px;
  transition: transform 0.55s var(--ease-out);
}
.chal-card:hover .chal-problem,
.chal-card:focus-within .chal-problem {
  transform: translateY(-100%);
}

.chal-fix {
  background: linear-gradient(160deg, #0f2f1d 0%, #0b1f14 100%);
  justify-content: center;
}

.chal-ico {
  width: 46px; height: 46px; border-radius: 11px;
  display: grid; place-items: center;
  background: rgba(196, 30, 58, 0.1);
  margin-bottom: 16px;
}
.chal-ico i { font-size: 22px; color: var(--r); }

.chal-title { font-size: 15px; font-weight: 800; line-height: 1.4; color: var(--b); }
.chal-text  { margin-top: 10px; font-size: 13px; line-height: 1.75; color: var(--muted); }

/* how much this leak costs, filled on reveal */
.chal-meter { margin-top: auto; }
.chal-meter-lbl {
  display: flex; justify-content: space-between;
  font-size: 9px; font-weight: 800; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--muted); margin-bottom: 7px;
}
.chal-track { height: 4px; border-radius: 4px; background: var(--border); overflow: hidden; }
.chal-fill {
  height: 100%; width: 0; border-radius: 4px;
  background: linear-gradient(90deg, var(--r), #ff5c74);
  transition: width 1.1s var(--ease-out) 0.15s;
}
.chal-card.is-in .chal-fill { width: calc(var(--sev) * 1%); }

.chal-fix-tag {
  font-size: 9px; font-weight: 800; letter-spacing: 2px;
  text-transform: uppercase; color: #22c55e; margin-bottom: 12px;
}
.chal-fix-text { font-size: 14.5px; line-height: 1.7; color: #fff; font-weight: 500; }

.chal-peek {
  position: absolute; left: 24px; right: 24px; bottom: 18px;
  font-size: 9px; font-weight: 800; letter-spacing: 1.6px;
  text-transform: uppercase; color: #22c55e;
  display: flex; align-items: center; gap: 6px;
  opacity: 0; transition: opacity 0.3s var(--ease);
}
.chal-card:hover .chal-peek { opacity: 0; }
.chal-card .chal-problem .chal-peek { opacity: .55; }
.chal-card:hover .chal-problem .chal-peek { opacity: 0; }

@media (max-width: 1100px) { .chal-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) {
  .chal-section { padding: 72px 24px; }
  .chal-grid { grid-template-columns: 1fr; }
  /* no hover on touch: show both halves stacked instead of hiding the fix */
  .chal-card { height: auto; }
  .chal-face { position: static; }
  .chal-problem { transform: none !important; }
  .chal-fix { border-top: 1px solid rgba(255,255,255,.08); }
  .chal-peek { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .chal-problem, .chal-fill, .chal-peek { transition: none; }
}

/* proof bars keep the original look, just re-homed under the new cards */
.proof-wrap { max-width: 780px; margin: 72px auto 0; text-align: center; }
.proof-title {
  font-family: 'Bebas Neue', cursive, sans-serif;
  font-size: clamp(28px, 3vw, 42px); line-height: 1; letter-spacing: -1px; color: var(--b);
}
.proof-title em { font-style: normal; color: var(--r); }
.proof-note { margin: 10px 0 30px; font-size: 13px; color: var(--muted); }
.proof-bars { text-align: left; }

/* ═══════════════════════════════════════════════════════════
   STATS BAR — ODOMETER

   Nothing else on the page rolls digits, so the stats bar gets
   the one mechanic that is actually about numbers: each digit
   is a reel that spins two full turns and lands on its value,
   staggered left-to-right like a mechanical counter settling.

   Pure CSS — the reel position is a transform driven by
   --target, and the shared IntersectionObserver just adds
   .is-in. No per-frame counting in JS.
   ═══════════════════════════════════════════════════════════ */

.od-bar {
  --dh: 1.06em;              /* one digit's height */
  background: #0d0d0d;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.od-stat {
  position: relative;
  padding: 52px 32px 54px;
  border-right: 1px solid #1a1a1a;
  overflow: hidden;
  transition: background 0.35s var(--ease);
}
.od-stat:last-child { border-right: none; }
.od-stat:hover { background: #121212; }

/* accent that wipes in under each stat, then brightens on hover */
.od-line {
  position: absolute;
  left: 32px; right: 32px; bottom: 0;
  height: 2px;
  background: var(--r);
  transform: scaleX(0);
  transform-origin: left;
  opacity: .55;
  transition: transform .9s var(--ease-out), opacity .3s var(--ease);
  transition-delay: calc(var(--i) * .12s + .25s);
}
.od-stat.is-in .od-line { transform: scaleX(1); }
.od-stat:hover .od-line { opacity: 1; }

.od-value {
  display: flex;
  align-items: flex-start;
  font-family: 'Bebas Neue', cursive, sans-serif;
  font-size: clamp(40px, 4.4vw, 62px);
  line-height: 1;
  letter-spacing: -1px;
  color: #fff;
}
.od-value .od-accent { color: var(--r); }

/* the reel: a 1-digit window over a 30-digit strip */
.od-reel {
  display: inline-block;
  height: var(--dh);
  overflow: hidden;
  vertical-align: top;
}
.od-strip {
  display: block;
  transform: translateY(0);
  transition: transform 1.5s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--i) * .12s + var(--d) * .09s);
}
.od-strip span {
  display: block;
  height: var(--dh);
  line-height: var(--dh);
}
/* two full turns, then settle on the target digit */
.od-stat.is-in .od-strip {
  transform: translateY(calc((20 + var(--n)) * var(--dh) * -1));
}

.od-label {
  margin-top: 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1.6;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}

@media (max-width: 900px) {
  .od-bar { grid-template-columns: repeat(2, 1fr); }
  .od-stat { padding: 40px 24px 42px; }
  .od-stat:nth-child(2) { border-right: none; }
  .od-stat:nth-child(-n+2) { border-bottom: 1px solid #1a1a1a; }
  .od-line { left: 24px; right: 24px; }
}
@media (max-width: 480px) {
  .od-bar { grid-template-columns: 1fr; }
  .od-stat { border-right: none; border-bottom: 1px solid #1a1a1a; }
}

@media (prefers-reduced-motion: reduce) {
  /* land on the value with no spin */
  .od-strip { transition: none; }
  .od-line { transition: none; transform: scaleX(1); }
}

/* ═══════════════════════════════════════════════════════════
   YOUR PATH TO DOMINANCE — 3D ASCENDING PATH

   Services already owns the page's rotating 3D cylinder, so
   this one takes a different 3D device: an isometric plane you
   look across, with four milestones climbing right and up along
   a single rail. The section is called "path to dominance", so
   the geometry is the argument — you watch the account climb.

   The steps sit on a PLANAR grid and the whole scene is tilted
   in 3D. Giving each step its own translateZ would look similar
   but breaks the rail: a connector between two points at
   different depths cannot be a rotated bar. Keeping the plane
   flat means one rail, one rotation, and it lines up exactly.
   ═══════════════════════════════════════════════════════════ */

.path-section {
  background: var(--off);
  padding: 96px 56px 104px;
  border-top: 1.5px solid var(--border);
  overflow: hidden;
}
.path-head { text-align: center; max-width: 620px; margin: 0 auto 40px; }
.path-sub { margin-top: 14px; font-size: 14px; line-height: 1.75; color: var(--muted); }

.path-stage {
  max-width: var(--path-w, 1060px);
  margin: 0 auto;
  perspective: 1500px;
  perspective-origin: 50% 45%;
}

/* the tilted plane everything lives on; JS nudges --rx/--ry on mouse move */
.path-scene {
  position: relative;
  /* geometry is variable so a page with a different number of steps can
     retune it without forking the stylesheet (services.html runs five) */
  width: var(--path-w, 1060px);
  height: var(--path-h, 536px);
  margin: 0 auto;
  transform-style: preserve-3d;
  transform: rotateX(calc(10deg + var(--rx, 0deg))) rotateY(calc(-16deg + var(--ry, 0deg)));
  transition: transform 0.5s var(--ease-out);
}

/* one continuous rail from the first milestone to the last */
/* One long rail cannot be depth-sorted against four cards. CSS 3D sorts whole
   elements by a single depth, so a bar spanning the entire rotation axis gets
   one centroid and inevitably paints in front of some cards and behind others
   — no translateZ value fixes that. Each card instead carries the segment that
   leaves it, so the segment sorts with its own card and tucks behind the next.
   The last card has nothing to connect to. */
.path-rail { display: none; }

.path-step::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  width: var(--path-seg, 288px);
  height: 4px;
  transform-origin: left center;
  transform: rotate(var(--path-ang, -20.3deg)) translateZ(-25px);
  background: linear-gradient(90deg, var(--r), #ff5c74);
  box-shadow: 0 0 16px rgba(196, 30, 58, .45);
  border-radius: 4px;
  opacity: 0;
  transition: opacity .6s var(--ease);
  transition-delay: calc(var(--i) * .16s + .3s);
}
.path-scene.is-in .path-step::before { opacity: .9; }
.path-step:last-child::before { display: none; }

.path-step {
  position: absolute;
  width: 250px;
  /* Was a flat height:236px, sized from the process steps. about.html's
     journey copy runs two lines longer and spilled straight out of the
     card, because the connector segment and dot hang outside so this can
     never be overflow:hidden. min-height keeps every card on a page the
     same height (which the ::before connector angle depends on) while
     letting a section opt into a taller box via --path-card-h. */
  min-height: var(--path-card-h, 236px);
  height: auto;
  padding: 22px 20px;
  background: var(--w);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 24px 50px rgba(12,12,12,.10);
  /* the segment and dot hang outside, so this cannot be overflow:hidden —
     the height above is sized from the measured content instead */
  transform-style: preserve-3d;
  transform: translateZ(0) scale(.94);
  opacity: 0;
  transition: transform .8s var(--ease-out), opacity .7s var(--ease-out), border-color .3s var(--ease);
  transition-delay: calc(var(--i) * .16s);
}
.path-scene.is-in .path-step { opacity: 1; transform: translateZ(0) scale(1); }
.path-step:hover {
  border-color: rgba(196,30,58,.45);
  /* lift off the plane toward the viewer */
  transform: translateZ(70px) scale(1);
  transition-delay: 0s;
  z-index: 5;
}

.path-num {
  font-family: 'Bebas Neue', cursive, sans-serif;
  font-size: 44px;
  line-height: 1;
  color: rgba(12,12,12,.12);
  transition: color .3s var(--ease);
}
.path-step:hover .path-num { color: var(--r); }

.path-title { margin-top: 8px; font-size: 15px; font-weight: 800; color: var(--b); }
.path-text  { margin-top: 8px; font-size: 12.5px; line-height: 1.7; color: var(--muted); }

/* the milestone dot that sits on the rail */
/* sits where the rail passes under each card */
.path-dot {
  position: absolute;
  left: 50%; bottom: -7px;
  width: 14px; height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: var(--r);
  box-shadow: 0 0 0 5px rgba(196,30,58,.14);
  transform: translateZ(-40px);
}

/* ── mobile: no plane to look across on a phone ── */
@media (max-width: 1100px) {
  .path-section { padding: 76px 24px 84px; }
  .path-stage { perspective: none; }
  .path-scene {
    width: 100%; height: auto; transform: none;
    display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px;
  }
  .path-rail { display: none; }
  .path-step {
    position: static !important;
    width: auto; height: auto;
    transform: none !important; opacity: 1;
  }
  .path-dot { display: none; }
}
@media (max-width: 640px) {
  .path-scene { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .path-scene, .path-step { transition: none; }
  .path-step { opacity: 1; transform: none; }
  .path-scene.is-in .path-rail::after { animation: none; }
}

/* ═══════════════════════════════════════════════════════════
   FREE AUDIT — 3D DEPTH STAGE

   This is the page's conversion point, so the 3D is deliberately
   kept OFF the form itself. Tilting inputs, floating the labels
   into the fields, or animating them on focus all make a form
   measurably harder to complete — and persistent labels above a
   field are the more accessible pattern anyway.

   So: depth lives in the backdrop (parallax panels, glow, grid)
   and in the card's lift. The fields stay flat, large and still.
   ═══════════════════════════════════════════════════════════ */

.lead-section {
  position: relative;
  background: var(--b);
  overflow: hidden;
  isolation: isolate;
}

/* ── parallax backdrop ── */
.lead-bg {
  position: absolute;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
  perspective: 1200px;
  transform-style: preserve-3d;
}
.lead-bg span {
  position: absolute;
  border: 1px solid rgba(196, 30, 58, .16);
  border-radius: 18px;
  background: linear-gradient(140deg, rgba(196,30,58,.05), transparent 60%);
  /* JS writes --mx/--my; each panel moves by its own depth factor */
  transform: translate3d(calc(var(--mx, 0) * var(--z) * 1px), calc(var(--my, 0) * var(--z) * 1px), 0)
             rotate(var(--rot));
  transition: transform .6s var(--ease-out);
}
.lead-bg span:nth-child(1) { --z: 14; --rot:  -8deg; left: 4%;  top: 12%; width: 260px; height: 320px; }
.lead-bg span:nth-child(2) { --z: 26; --rot:  12deg; left: 16%; top: 52%; width: 190px; height: 230px; }
.lead-bg span:nth-child(3) { --z: 18; --rot:   6deg; right: 6%; top: 16%; width: 300px; height: 240px; }
.lead-bg span:nth-child(4) { --z: 32; --rot: -14deg; right: 14%;top: 58%; width: 220px; height: 280px; }

/* a soft brand glow sitting behind the card */
.lead-glow {
  position: absolute;
  left: 50%; top: 48%;
  width: min(760px, 80%); height: 420px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(196,30,58,.22), transparent 68%);
  filter: blur(50px);
  z-index: 0;
  pointer-events: none;
}

.lead-section > .lead-grid,
.lead-section > div:not(.lead-bg):not(.lead-glow) { position: relative; z-index: 1; }

/* ── the card lifts off the backdrop ── */
.lead-form-card {
  position: relative;
  z-index: 1;
  background: rgba(17, 17, 17, .78) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 18px !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 40px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03) inset;
}

/* ── fields: flat, roomy, obvious focus ── */
.lead-form-card label {
  color: rgba(255,255,255,.62) !important;
}
.lead-form-card input,
.lead-form-card select,
.lead-form-card textarea {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: #fff !important;
  border-radius: 10px !important;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.lead-form-card input::placeholder,
.lead-form-card textarea::placeholder { color: rgba(255,255,255,.3); }

.lead-form-card input:focus,
.lead-form-card select:focus,
.lead-form-card textarea:focus {
  outline: none;
  background: rgba(255,255,255,.07) !important;
  border-color: var(--r) !important;
  box-shadow: 0 0 0 4px rgba(196,30,58,.16);
}
/* a field the browser has already validated as filled */
.lead-form-card input:not(:placeholder-shown):valid {
  border-color: rgba(34,197,94,.4) !important;
}

.lead-form-card .lead-note { color: rgba(255,255,255,.4) !important; }

@media (prefers-reduced-motion: reduce) {
  .lead-bg span { transition: none; }
}
@media (max-width: 900px) {
  /* the panels crowd the card on small screens and cost paint for nothing */
  .lead-bg { display: none; }
}

/* The section was light before this redesign, so every piece of copy in it
   still carries the light-theme colours. On the new dark stage the heading,
   the card title and the checklist all rendered dark-on-dark and vanished. */
.lead-section .section-title { color: #fff; }
.lead-section .section-title em { color: var(--r); }
.lead-section .section-sub { color: rgba(255,255,255,.55); }
.lead-section .lfc-title { color: #fff; }
.lead-section .lfc-sub { color: rgba(255,255,255,.5); }
.lead-section .lw-item { color: rgba(255,255,255,.72); }
.lead-section .lw-item i { color: #22c55e; }
.lead-section .form-success { color: rgba(255,255,255,.7); }
/* The page-level rule `.form-success p { color: var(--muted) }` is more
   specific than the container colour above, so #777 wins and lands on a
   near-black card. Restate it here for the dark context. */
.lead-section .form-success p { color: rgba(255,255,255,.72); }
.lead-section .form-success strong,
.lead-section .form-success h3 { color: #fff; }

/* ═══════════════════════════════════════════════════════════
   BRANDS STRIP

   Every logo here pointed at tunexmarketing.site/wp-content/…
   and all four 404. With an onerror handler hiding each broken
   image, the section collapsed to ~150px of empty white between
   the ticker and the stats bar — the gap in the screenshot.

   Now it uses the client logos that were already sitting in the
   project folder, on a dark strip so it joins the stats bar
   below instead of interrupting with a white slab.
   ═══════════════════════════════════════════════════════════ */

.brands {
  background: #0d0d0d !important;
  border-bottom: none !important;
  padding: 34px 56px 30px !important;
}
.brands-label {
  color: rgba(255, 255, 255, .38) !important;
  margin-bottom: 22px !important;
}
/* ten logos: sized so the whole set holds one row at 1280px — at 34px
   height and a 34px gap it spilled 8 + 2, which reads as an orphan row */
.brands-row { gap: 30px !important; row-gap: 20px !important; }
/* The source logos are a mix: some dark ink on an opaque white background,
   some already white on transparent. One strip background could never suit
   both — a white-backed logo becomes a bright plate on dark, and a white
   wordmark vanishes on light. They are normalised to white silhouettes on
   transparency instead, which is the usual treatment for a logo wall and
   makes the row read as one set rather than five pasted images. */
.brand-logo {
  height: 30px !important;
  max-width: 150px !important;
  opacity: .5;
  transition: opacity .3s var(--ease);
}
.brand-logo:hover {
  opacity: 1;
}

@media (max-width: 640px) {
  .brands { padding: 28px 24px 26px !important; }
  .brands-row { gap: 22px !important; }
  .brand-logo { height: 26px !important; }
}

/* ── vertical centring ──────────────────────────────────────
   Symmetric padding is not enough here. Bebas Neue sits low in
   its em box: measured at 100px, the caps start 0.19em below the
   font's ascent while 0.31em of space trails the baseline. Inside
   the 1.06em reel window that leaves ~0.12em of dead space above
   the digits and ~0.24em below — so a box that is mathematically
   centred still *reads* as top-heavy.

   Flex centring handles the block; the negative margin cancels
   the font's own top gap so the ink centres, not the box.
   ─────────────────────────────────────────────────────────── */
.od-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 220px;
  padding-top: 46px !important;
  padding-bottom: 46px !important;
}
.od-value { margin-top: -0.1em; }
.od-label { margin-top: 14px; }

@media (max-width: 900px) {
  .od-stat { min-height: 180px; padding-top: 34px !important; padding-bottom: 34px !important; }
}

/* ═══ TERMINAL LOADER ══════════════════════════════════════ */

.tl-panel {
  padding: 40px 0 8px;
  text-align: center;
}
.tl-msg {
  margin-bottom: 22px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
}

.tl {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  line-height: 0.9;
  letter-spacing: 0.3em;
  /* the brand red is too dark against the #111 glass card — the hotter red
     used for the hero filament reads properly here */
  color: #ff3b57;
}
.tl-row { white-space: pre; }
.tl-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  background: #ff3b57;
  box-shadow: 0 0 18px rgba(255, 59, 87, .55);
}

@media (prefers-reduced-motion: reduce) {
  /* a bouncing block is exactly the kind of motion this setting turns off */
  .tl { display: none; }
  .tl-msg::after { content: ' Please wait.'; }
}

/* ═══════════════════════════════════════════════════════════
   CASE STUDIES — IMAGE STREAM CORRIDOR

   Port of the ImageStreamHero idea: panels fly down a 3D
   corridor toward the viewer with the heading held still on top.

   It runs as the section's OPENING, not as a replacement for
   the cards. These images are proof screenshots — ₹11.47L in
   sales, 5.48x ROAS, 3.62% ACoS — and their whole value is that
   a visitor can read them. Streaming them past would look great
   and destroy the point of the section. So the corridor teases
   the evidence and the readable cards below deliver it.

   Pure CSS keyframes, so nothing here depends on a JS frame
   loop; the section's existing observer parks it when off screen.
   ═══════════════════════════════════════════════════════════ */

.cs-stream {
  position: relative;
  height: 460px;
  margin-bottom: 8px;
  overflow: hidden;
  perspective: 900px;
  perspective-origin: 50% 50%;
  background: radial-gradient(ellipse at center, #0e0f13 0%, #1a1b21 46%, var(--w) 86%);
}

.cs-stream-track {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.cs-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 300px;
  margin: -95px 0 0 -150px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
  opacity: 0;
  /* each panel runs the same flight, offset in time and space */
  animation: cs-fly 9s linear infinite;
  animation-delay: calc(var(--d) * -1.5s);
  transform: translate3d(var(--x), var(--y), -2200px);
}
.cs-panel img {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
}

@keyframes cs-fly {
  0%   { transform: translate3d(var(--x), var(--y), -2200px); opacity: 0; }
  12%  { opacity: 1; }
  78%  { opacity: 1; }
  100% { transform: translate3d(var(--x), var(--y), 620px);   opacity: 0; }
}

/* the heading rides above the corridor */
.cs-stream-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
  pointer-events: none;
  /* A white scrim washed the panels out — the corridor's centre is dark, so
     the copy goes white and the scrim goes dark instead. Tight radius: it
     only has to protect the text, not the whole frame. */
  background: radial-gradient(ellipse 62% 54% at center, rgba(10,10,12,.82) 0%, rgba(10,10,12,.5) 55%, transparent 78%);
}
.cs-stream-overlay .section-title { color: #fff; }
.cs-stream-overlay .section-title em { color: var(--r); }
.cs-stream-overlay .eyebrow { color: var(--r); }
.cs-stream-overlay .cs-sub { color: rgba(255,255,255,.62); }
.cs-stream-overlay > * { pointer-events: auto; }

.cs-section .cs-head { margin-bottom: 0; }

/* the observer adds .is-in; until then the corridor holds still */
.cs-stream:not(.is-in) .cs-panel { animation-play-state: paused; }

@media (max-width: 900px) {
  .cs-stream { height: 340px; perspective: 700px; }
  .cs-panel { width: 210px; margin: -70px 0 0 -105px; }
  .cs-panel img { height: 140px; }
}

@media (prefers-reduced-motion: reduce) {
  /* a corridor of panels flying at the viewer is precisely what this
     setting exists to switch off */
  .cs-stream { height: auto; padding: 56px 0 8px; background: none; perspective: none; }
  .cs-stream-track { display: none; }
  .cs-stream-overlay { position: static; background: none; }
}

/* ═══ VELARIS SHADER BACKGROUND (audit section) ════════════ */

.lead-velaris {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* The shader supplies the atmosphere now, so the CSS panels and the radial
   glow would only fight it. They stay in the markup as the fallback for
   browsers with no WebGL, reduced motion, or a narrow viewport — the class
   is only added once the shader is actually running. */
.lead-section.has-velaris .lead-bg,
.lead-section.has-velaris .lead-glow {
  display: none;
}

/* the card needs a touch more weight over a moving field */
.lead-section.has-velaris .lead-form-card {
  background: rgba(12, 12, 12, .82) !important;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .62), 0 0 0 1px rgba(255, 255, 255, .04) inset;
}