/*
 * hero-upgrade.css — v4 "quiet light" hero: Apple-style, light top-to-bottom.
 * EVERY selector is scoped under .hero-v2 to avoid collisions with styles.css
 * (the class name stays .hero-v2 so templates/index.html churn is minimal).
 * The hero sits on the page background — no panel, no seam into the sections
 * below. The live-call card is the single bold element; everything else is
 * type, whitespace, and hairlines.
 * Pure CSS — no JS beyond the existing [data-hv2-reveal] observer, no CDN deps.
 * All motion is disabled under prefers-reduced-motion (block at end of file).
 */

/* ------------------------------------------------------------------ */
/* Local token block (scoped — does NOT pollute :root)                 */
/* ------------------------------------------------------------------ */
.hero-v2 {
  --hv4-bg: #f5f5f7;
  --hv4-surface: #ffffff;
  --hv4-ink: #1d1d1f;
  --hv4-body: #494950;
  --hv4-muted: #6e6e73;
  --hv4-faint: #6e6e73; /* smallest text — AA needs >=4.5:1 on #f5f5f7 (this is 4.66:1) */
  --hv4-blue: #0066cc;
  --hv4-blue-soft: #e8f1fb;
  --hv4-emerald: #34c759;
  --hv4-border: rgba(29, 29, 31, .09);
  --hv4-border-soft: rgba(29, 29, 31, .06);
  --hv4-radius: 16px;
  --hv4-radius-lg: 24px;
  --hv4-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --hv4-shadow-md: 0 12px 32px rgba(16, 24, 40, .08);
  --hv4-shadow-lg: 0 1px 2px rgba(16, 24, 40, .04), 0 24px 60px rgba(16, 24, 40, .10);
  --hv4-ease: cubic-bezier(.16, 1, .3, 1);
  --hv4-dur: .5s;

  /* Sits directly on the page background — no panel, no bottom radius,
     so there is no hero→page seam. (Overrides styles.css
     .hero-section-wrapper: both selectors are single-class so the later
     stylesheet wins.) */
  position: relative;
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;

  /* Aurora mesh — the five soft radial "blobs" moved from background-image
     layers into REAL layer elements (.hv2-aurora > .hv2-au spans, markup in
     index.html) so home-scroll.js (GSAP ScrollTrigger) can drift each blob
     on its own plane as the hero scrolls out. The geometry maps 1:1 (see
     the .hv2-au rules below) — at rest, and whenever the script does not
     run (no JS, reduced motion, <768px), the hero renders exactly as the
     old background-image stack did. Only the flat base colour stays here. */
  background-color: var(--hv4-bg);
  color: var(--hv4-ink);
  border-radius: 0;
}

/* ------------------------------------------------------------------ */
/* Aurora mesh layers                                                   */
/* Each span is one former background-image blob. A blob that was        */
/*   radial-gradient(RX% RY% at X% Y%, C 0%, transparent S%)             */
/* is now a span sized (2*RX% x 2*RY%) centred at (X%, Y%) with a        */
/* closest-side gradient — identical pixels at rest. DOM order in        */
/* index.html mirrors the old paint order (last background layer =       */
/* first span). The bottom fade is the container's ::after, so the melt  */
/* into the sections below sits above the blobs and NEVER moves.         */
/* Tuning knobs unchanged: intensity = the rgba() alpha; location =      */
/* left/top; size = width/height.                                        */
/* ------------------------------------------------------------------ */
.hero-v2 .hv2-aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.hero-v2 .hv2-au {
  position: absolute;
  transform: translate(-50%, -50%);
}

/* was: radial-gradient(50% 52% at 10% 6%, ...) — amber, top-left */
.hero-v2 .hv2-au-1 {
  width: 100%;
  height: 104%;
  left: 10%;
  top: 6%;
  background: radial-gradient(closest-side, rgba(255, 214, 105, .55) 0%, rgba(255, 214, 105, 0) 62%);
}

/* was: radial-gradient(52% 54% at 90% 95%, ...) — green, bottom-right */
.hero-v2 .hv2-au-2 {
  width: 104%;
  height: 108%;
  left: 90%;
  top: 95%;
  background: radial-gradient(closest-side, rgba(84, 212, 146, .48) 0%, rgba(84, 212, 146, 0) 60%);
}

/* was: radial-gradient(48% 52% at 82% 32%, ...) — periwinkle, right-mid */
.hero-v2 .hv2-au-3 {
  width: 96%;
  height: 104%;
  left: 82%;
  top: 32%;
  background: radial-gradient(closest-side, rgba(138, 176, 255, .52) 0%, rgba(138, 176, 255, 0) 62%);
}

/* was: radial-gradient(42% 44% at 50% 2%, ...) — pink, top-centre */
.hero-v2 .hv2-au-4 {
  width: 84%;
  height: 88%;
  left: 50%;
  top: 2%;
  background: radial-gradient(closest-side, rgba(233, 166, 240, .38) 0%, rgba(233, 166, 240, 0) 58%);
}

/* was: radial-gradient(48% 50% at 3% 84%, ...) — cyan, bottom-left */
.hero-v2 .hv2-au-5 {
  width: 96%;
  height: 100%;
  left: 3%;
  top: 84%;
  background: radial-gradient(closest-side, rgba(116, 208, 255, .36) 0%, rgba(116, 208, 255, 0) 58%);
}

/* Static bottom fade — melts the blobs back into --hv4-bg exactly like
   the old top linear-gradient layer, so there is never a hero→page seam
   no matter where the blobs have drifted. */
.hero-v2 .hv2-aurora::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 62%, var(--hv4-bg) 100%);
}

/* Inner container keeps content aligned with the rest of the site */
.hero-v2 .hv2-inner {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin-inline: auto;
  padding: 124px 24px 72px;
}

/* ------------------------------------------------------------------ */
/* Hero grid                                                            */
/* ------------------------------------------------------------------ */
.hero-v2 .hv2-grid {
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  gap: 56px;
  align-items: center;
}

/* ------------------------------------------------------------------ */
/* Left column — copy                                                   */
/* ------------------------------------------------------------------ */
.hero-v2 .hv2-copy {
  max-width: 640px;
}

/* Setup-speed promise — plain bold underlined sentence that opens the
   subhead (founder 2026-07-08: the pill badge read as vibe-coded) */
.hero-v2 .hv2-sub-lead {
  font-weight: 700;
  color: var(--hv4-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.hero-v2 .hv2-h1 {
  margin: 0;
  font-size: clamp(3.25rem, 5vw, 4rem);
  line-height: 1.03;
  letter-spacing: -.03em;
  font-weight: 700;
  font-optical-sizing: auto;
  color: var(--hv4-ink);
  text-wrap: balance;
}

/* Second line: solid single accent — no gradient, no shimmer */
.hero-v2 .hv2-h1 .hv2-grad {
  color: var(--hv4-blue);
}

.hero-v2 .hv2-sub {
  margin-top: 24px;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--hv4-body);
  max-width: 47ch;
}

.hero-v2 .hv2-cta {
  margin-top: 36px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* Primary CTA — quiet ink pill, no gradient, no shine */
.hero-v2 .hv2-btn-dark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  padding: 14px 28px;
  background: var(--hv4-ink);
  color: #fff;
  box-shadow: var(--hv4-shadow-sm);
  text-decoration: none;
  transition: transform var(--hv4-dur) var(--hv4-ease),
              box-shadow var(--hv4-dur) var(--hv4-ease),
              background-color .2s ease;
  cursor: pointer;
}

.hero-v2 .hv2-btn-dark:hover {
  transform: translateY(-2px);
  background: #000;
  box-shadow: var(--hv4-shadow-md);
}

.hero-v2 .hv2-link-arrow {
  font-weight: 600;
  color: var(--hv4-ink);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}

.hero-v2 .hv2-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--hv4-blue-soft);
  color: var(--hv4-blue);
  border: 1px solid transparent;
  transition: background .2s, color .2s;
}

.hero-v2 .hv2-play svg {
  width: 9px;
  height: 9px;
  margin-left: 1px;
}

.hero-v2 .hv2-link-arrow:hover .hv2-play {
  background: var(--hv4-blue);
  color: #fff;
}

.hero-v2 .hv2-arrow-txt {
  transition: transform .25s var(--hv4-ease);
}

.hero-v2 .hv2-link-arrow:hover .hv2-arrow-txt {
  transform: translateX(4px);
}

.hero-v2 a:focus-visible {
  outline: 2px solid var(--hv4-blue);
  outline-offset: 3px;
  border-radius: 999px;
}

.hero-v2 .hv2-trust {
  margin-top: 26px;
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}

.hero-v2 .hv2-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--hv4-muted);
  font-size: .92rem;
  font-weight: 500;
}

.hero-v2 .hv2-trust-item svg {
  width: 18px;
  height: 18px;
  color: var(--hv4-emerald);
  flex: none;
}

/* ------------------------------------------------------------------ */
/* Right column — the ONE signature element: live-call card             */
/* ------------------------------------------------------------------ */
.hero-v2 .stagewrap {
  position: relative;
  max-width: 480px;
  margin-inline: auto;
  width: 100%;
}

.hero-v2 .callcard {
  position: relative;
  z-index: 1;
  background: var(--hv4-surface);
  border: 1px solid var(--hv4-border);
  border-radius: var(--hv4-radius-lg);
  box-shadow: var(--hv4-shadow-lg);
  padding: 24px;
  transition: transform var(--hv4-dur) var(--hv4-ease),
              box-shadow var(--hv4-dur) var(--hv4-ease);
}

.hero-v2 .callcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 4px rgba(16, 24, 40, .04), 0 32px 72px rgba(16, 24, 40, .14);
}

.hero-v2 .cc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.hero-v2 .cc-meta {
  font-size: .8rem;
  font-weight: 600;
  color: var(--hv4-muted);
}

/* Tiny voice equalizer — the agent is speaking (decorative, aria-hidden) */
.hero-v2 .cc-eq {
  display: inline-flex;
  align-items: center;
  gap: 2.5px;
  height: 14px;
  margin-left: 3px;
}

.hero-v2 .cc-eq i {
  display: block;
  width: 3px;
  border-radius: 2px;
  background: var(--hv4-blue);
  height: 100%;
  transform-origin: 50% 100%;
  animation: hv2-eq 1s ease-in-out infinite alternate;
}

.hero-v2 .cc-eq i:nth-child(1) { transform: scaleY(.35); animation-delay: 0s;   }
.hero-v2 .cc-eq i:nth-child(2) { transform: scaleY(.8);  animation-delay: .18s; }
.hero-v2 .cc-eq i:nth-child(3) { transform: scaleY(.55); animation-delay: .36s; }
.hero-v2 .cc-eq i:nth-child(4) { transform: scaleY(.95); animation-delay: .1s;  }
.hero-v2 .cc-eq i:nth-child(5) { transform: scaleY(.45); animation-delay: .28s; }

@keyframes hv2-eq {
  from { transform: scaleY(.25); }
  to   { transform: scaleY(1); }
}

.hero-v2 .cc-caller {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  background: var(--hv4-bg);
  border: 1px solid var(--hv4-border-soft);
  border-radius: 14px;
  margin-bottom: 16px;
}

.hero-v2 .cc-incoming {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.hero-v2 .cc-label {
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hv4-faint);
  font-weight: 600;
}

.hero-v2 .cc-phone {
  font-size: .92rem;
  font-weight: 600;
  color: var(--hv4-ink);
  font-variant-numeric: tabular-nums;
}

.hero-v2 .cc-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: opacity .32s var(--hv4-ease);
}

.hero-v2 .cc-line {
  display: flex;
  align-items: flex-end;
  gap: 9px;
  max-width: 90%;
}

.hero-v2 .cc-line.agent {
  flex-direction: row-reverse;
  margin-left: auto;
}

.hero-v2 .cc-av {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--hv4-border-soft);
}

.hero-v2 .cc-av svg {
  width: 16px;
  height: 16px;
}

.hero-v2 .cc-av.caller {
  background: var(--hv4-bg);
  color: var(--hv4-muted);
}

.hero-v2 .cc-av.agent {
  background: var(--hv4-blue);
  color: #fff;
  border-color: transparent;
}

.hero-v2 .cc-bubble {
  font-size: .9rem;
  line-height: 1.45;
  padding: 10px 14px;
  border-radius: 15px;
  background: #f2f2f5;
  color: var(--hv4-ink);
  border-bottom-left-radius: 5px;
}

.hero-v2 .cc-bubble.agent {
  /* Solid single accent — white copy on #0066cc is ≥5:1 (AA) */
  background: var(--hv4-blue);
  color: #fff;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 5px;
  box-shadow: 0 6px 18px rgba(0, 102, 204, .18);
}

.hero-v2 .cc-outcome {
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid var(--hv4-border-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.hero-v2 .cc-result {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--hv4-ink);
}

.hero-v2 .cc-result svg {
  width: 18px;
  height: 18px;
  color: var(--hv4-emerald);
  flex: none;
}

.hero-v2 .cc-stats {
  display: flex;
  gap: 14px;
  font-size: .8rem;
  color: var(--hv4-muted);
}

.hero-v2 .cc-stats b {
  color: var(--hv4-ink);
  font-weight: 700;
}

/* ------------------------------------------------------------------ */
/* Logostrip — quiet muted text names, no chips                         */
/* ------------------------------------------------------------------ */
.hero-v2 .hv2-logos {
  margin-top: 56px;
  padding: 28px 0 8px;
  border-top: 1px solid var(--hv4-border-soft);
}

.hero-v2 .hv2-logos-lbl {
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--hv4-faint);
  font-weight: 600;
}

.hero-v2 .hv2-logos-row {
  margin-top: 16px;
  display: flex;
  gap: 12px 34px;
  flex-wrap: wrap;
}

.hero-v2 .hv2-chip {
  font-size: .95rem;
  font-weight: 600;
  color: var(--hv4-muted);
  background: none;
  border: none;
  padding: 0;
  transition: color .2s ease;
}

.hero-v2 .hv2-chip:hover {
  color: var(--hv4-ink);
}

/* ------------------------------------------------------------------ */
/* Reveal animation (targets [data-hv2-reveal] only — no collision     */
/* with the page's existing .reveal-up / .active mechanism)            */
/* ------------------------------------------------------------------ */
.hero-v2 [data-hv2-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--hv4-ease), transform .6s var(--hv4-ease);
}

.hero-v2 [data-hv2-reveal].hv2-in {
  opacity: 1;
  transform: none;
}

/* Off-screen: pause every hero animation (class toggled by the inline
   IntersectionObserver in index.html) so scrolled-past visitors don't
   pay for the EQ compositing. */
.hero-v2.hv2-offstage *,
.hero-v2.hv2-offstage *::before,
.hero-v2.hv2-offstage *::after {
  animation-play-state: paused !important;
}

/* ------------------------------------------------------------------ */
/* Responsive                                                           */
/* ------------------------------------------------------------------ */
@media (max-width: 880px) {
  .hero-v2 .hv2-inner {
    padding: 104px 20px 56px;
  }

  .hero-v2 .hv2-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .hero-v2 .hv2-copy {
    max-width: 100%;
  }

  .hero-v2 .stagewrap {
    max-width: 440px;
  }

  .hero-v2 .hv2-trust {
    gap: 16px;
  }
}

@media (max-width: 440px) {
  .hero-v2 .hv2-trust {
    flex-direction: column;
    gap: 12px;
  }

  .hero-v2 .cc-outcome {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* ------------------------------------------------------------------ */
/* Reduced-motion: every hero animation off, everything visible        */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .hero-v2 .cc-eq i {
    animation: none;
  }

  .hero-v2 .callcard:hover,
  .hero-v2 .hv2-btn-dark:hover {
    transform: none;
  }

  .hero-v2 [data-hv2-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}