/* =====================================================
   POV GUY REALTOR — V2  |  Electric Blue Edition
   Blue is primary. Everything serves the copy.
   Note: Google Fonts loaded via <link> in each HTML head
   (preconnect + stylesheet). Do NOT use @import here —
   it is render-blocking.
   ===================================================== */

/* --- TOKENS --- */
:root {
  --blue:        #1A44F0;
  --blue-vivid:  #2C55F5;
  --blue-bright: #4D72FF;
  --blue-dim:    rgba(26, 68, 240, 0.12);
  --blue-border: rgba(77, 114, 255, 0.20);
  --blue-glow:   rgba(26, 68, 240, 0.35);

  --bg:          #03071A;   /* Near-black with blue cast */
  --bg2:         #060C24;
  --bg3:         #0A1232;

  --white:       #FFFFFF;
  --off-white:   #E8EEFF;
  --muted:       #6B82C0;
  --muted2:      #3D5090;

  --green:       #00E87B;
  --red:         #FF4D4D;
  --amber:       #E8C040;
  --gold:        #C9A84C;

  --mono:        'IBM Plex Mono', monospace;
  --display:     'Space Grotesk', sans-serif;
  --body:        'Inter', sans-serif;

  --nav:         64px;
  --max:         1080px;
  --R:           10px;
}

/* --- RESET --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--body);
  background: var(--bg);
  color: var(--off-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; }

/* =====================================================
   NAV
   ===================================================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--nav);
  background: transparent;
  /* NOTE: no backdrop-filter here — blur(0px) is a no-op but it creates
     a stacking context that breaks mix-blend-mode on the nav-logo img.
     Backdrop blur is only applied on the .nav-links pill (see below). */
  border-bottom: 1px solid transparent;
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 0 40px;
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.nav.scrolled {
  /* no full-width bg — only the pill darkens (see .nav.scrolled .nav-links below) */
}
.nav.scrolled .nav-links {
  background: rgba(3, 7, 26, 0.78);
  border-color: rgba(255, 255, 255, 0.16);
}
.nav.scrolled .nav-links a {
  text-shadow: none;
}
.nav-logo {
  position: absolute;
  left: 40px;
  line-height: 0;
}
.nav-logo img {
  height: 26px;
  width: auto;
  display: block;
  transition: filter 0.25s ease, opacity 0.25s ease;
}
.nav-logo:hover img { opacity: 0.75; }
/* Dark logo when nav scrolls over a light-background section */
.nav.nav-over-light .nav-logo img { filter: invert(1); }

/* ── Frosted-glass pill link bar — centred, shrink-wraps content ── */
.nav-links {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  list-style: none;
  padding: 4px 6px;
  margin: 0;
  position: relative;
  background: rgba(255, 255, 255, 0.055);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 4px 20px rgba(0,0,0,0.18);
}
.nav-links li { display: flex; }
.nav-links a {
  display: inline-flex;
  align-items: center;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  color: rgba(232,238,255,0.72);
  letter-spacing: 0.01em;
  padding: 7px 14px;
  border-radius: 999px;
  transition: color 0.18s;
  white-space: nowrap;
  position: relative;
  z-index: 1;
}
.nav-links a:hover {
  color: var(--off-white);
}
/* Active — sliding pill indicator handles the background fill */
.nav-links a.active {
  color: #fff;
}
/* Sliding pill indicator */
.nav-pill-indicator {
  position: absolute;
  top: 4px;
  bottom: 4px;
  border-radius: 999px;
  background: var(--blue-bright);
  transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), width 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s;
  pointer-events: none;
  box-shadow: 0 0 20px rgba(77,114,255,0.40);
  z-index: 0;
  will-change: left, width;
}

/* Legacy CTA classes kept for non-nav CTAs (hero buttons etc.) */
@keyframes nav-cta-halo-pulse {
  0%, 100% { opacity: 0.40; transform: scale(1); }
  50%      { opacity: 0.80; transform: scale(1.05); }
}
.nav-cta {
  font-size: 13px; font-weight: 600;
  padding: 9px 20px; border-radius: 999px;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s, border-color 0.2s;
  display: inline-flex; align-items: center;
  letter-spacing: 0.005em;
}
.nav-cta:hover { transform: translateY(-1px); }
.nav-cta-blue,
.nav-cta-red,
.nav-cta-green {
  position: relative; isolation: isolate;
  color: #FFFFFF; letter-spacing: 0.01em;
}
.nav-cta-blue::before,
.nav-cta-red::before,
.nav-cta-green::before {
  content: ''; position: absolute; inset: -9px; border-radius: 999px;
  filter: blur(12px); z-index: -1; pointer-events: none;
  animation: nav-cta-halo-pulse 3.8s ease-in-out infinite;
}
.nav-cta-green {
  background: linear-gradient(180deg, #2BE481 0%, #16A55A 100%);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -1px 0 rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.30);
}
.nav-cta-green::before {
  background: radial-gradient(ellipse at center, rgba(0,232,123,0.75) 0%, rgba(0,232,123,0.28) 45%, rgba(0,232,123,0) 75%);
  animation-duration: 4.2s;
}
.nav-cta-green:hover {
  background: linear-gradient(180deg, #3FF090 0%, #1CB965 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.40), 0 4px 12px rgba(0,0,0,0.35), 0 0 22px rgba(0,232,123,0.45);
}
.nav-cta-red {
  background: transparent; color: #FF7A5F;
  border: 1.5px solid #E04A2E;
}
.nav-cta-red::before {
  background: radial-gradient(ellipse at center, rgba(220,60,30,0.55) 0%, rgba(220,60,30,0.22) 45%, rgba(220,60,30,0) 75%);
  animation-duration: 3.6s;
}
.nav-cta-red:hover { background: rgba(220,60,30,0.15); color: #FFB5A0; border-color: #FF7A5F; }
.nav-cta-blue {
  background: #2C55F5; border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 2px 6px rgba(0,0,0,0.30);
}
.nav-cta-blue::before {
  background: radial-gradient(ellipse at center, rgba(77,114,255,0.70) 0%, rgba(77,114,255,0.25) 45%, rgba(77,114,255,0) 75%);
  animation-duration: 4.0s;
}
.nav-cta-blue:hover { background: #4268FF; box-shadow: 0 4px 12px rgba(0,0,0,0.35), 0 0 22px rgba(77,114,255,0.50); }

.nav-hamburger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; padding: 4px; cursor: pointer;
  position: absolute; right: 40px;
}
.nav-hamburger span {
  display: block; width: 22px; height: 2px;
  background: var(--off-white); border-radius: 2px;
  transition: all 0.25s;
}
/* ── Mobile nav menu — tile grid layout ──
   7 nav links in a 6-col grid (each spans 2 → 3 tiles per row).
   No CTA buttons in mobile nav — clean navigation only. */
.nav-mobile {
  display: none;
  position: fixed; top: var(--nav); left: 0; right: 0;
  background: var(--bg2);
  border-bottom: 1px solid var(--blue-border);
  padding: 18px 16px 22px;
  z-index: 999;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  max-height: calc(100vh - var(--nav));
  overflow-y: auto;
  box-shadow: inset 0 1px 0 rgba(77,114,255,0.08),
              0 8px 24px rgba(0,0,0,0.35);
}
.nav-mobile.open { display: grid; }

/* All links span 2 cols → 3 per row */
.nav-mobile a { grid-column: span 2; }

/* Nav link tile */
.nav-mobile a {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  color: var(--off-white);
  letter-spacing: 0.01em;
  padding: 14px 8px;
  min-height: 52px;
  line-height: 1.2;
  text-align: center;
  background: linear-gradient(180deg,
    rgba(77,114,255,0.10) 0%,
    rgba(77,114,255,0.04) 100%);
  border: 1px solid rgba(77,114,255,0.22);
  border-radius: 10px;
  transition: background 0.18s ease, border-color 0.18s ease,
              box-shadow 0.18s ease, color 0.18s ease,
              transform 0.15s ease;
}
.nav-mobile a:hover,
.nav-mobile a:active {
  background: linear-gradient(180deg,
    rgba(77,114,255,0.20) 0%,
    rgba(77,114,255,0.08) 100%);
  border-color: rgba(77,114,255,0.55);
  box-shadow: 0 0 16px rgba(77,114,255,0.25);
  color: var(--white);
  transform: translateY(-1px);
}
/* Active page tile */
.nav-mobile a.active {
  background: var(--blue-bright);
  border-color: var(--blue-bright);
  color: #fff;
  box-shadow: 0 0 18px rgba(77,114,255,0.40);
}

/* Very narrow phones: 4-col so links still span 2 */
@media (max-width: 380px) {
  .nav-mobile { grid-template-columns: repeat(4, 1fr); }
}

/* =====================================================
   DATA ENGINE BACKGROUND
   Canvas fills the hero, rendering scrolling data points
   ===================================================== */
#data-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
  /* !important on both dimensions so the canvas element always fills the
     hero via CSS — JS only touches canvas.width/height (the bitmap), never
     canvas.style.*. This way the canvas tracks hero growth on mobile
     (fonts, images, URL bar) instead of being locked to init-time pixels. */
  width: 100% !important;
  height: 100% !important;
}

/* =====================================================
   HERO
   ===================================================== */
.hero {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Bottom fade — dissolves the hero (canvas, grid, image) into the page
   bg (#03071A) so there's no visible edge when the viewport is tall.
   z=1 sits above the canvas/image but below hero-content (z=2) so CTAs
   stay fully visible and clickable. */
.hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 200px;
  background: linear-gradient(to bottom,
    rgba(3, 7, 26, 0)   0%,
    rgba(3, 7, 26, 0.45) 50%,
    rgba(3, 7, 26, 0.88) 85%,
    rgba(3, 7, 26, 1)   100%);
  z-index: 1;
  pointer-events: none;
}

/* Hero background image */
.hero-bg {
  position: absolute; inset: 0;
  background-image: url('img/hero.jpg'); background-image: image-set(url('img/hero.webp') type('image/webp'), url('img/hero.jpg') type('image/jpeg'));
  background-size: cover;
  background-position: center top;
  z-index: 0;
}
/* Dark blue overlay on top of image */
.hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    120deg,
    rgba(3, 7, 26, 0.92) 0%,
    rgba(3, 7, 26, 0.80) 50%,
    rgba(3, 7, 26, 0.70) 100%
  );
}

/* Subtle blue radial glow */
.hero-glow {
  position: absolute;
  width: 700px; height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26,68,240,0.18) 0%, transparent 65%);
  top: -100px; left: -200px;
  z-index: 1;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  padding: calc(var(--nav) + 64px) 40px 80px;
  width: 100%;
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 48px;
  align-items: start;
}

/* Logo in hero */

/* Hero centered layout (no sched widget) */
.hero-content-centered {
  grid-template-columns: 1fr;
  max-width: 820px;
  gap: 0;
}
.hero-content-centered .hero-eyebrow { margin-bottom: 28px; }
/* Headline→card gap opened to 44px so the CTA reads as the destination
   after the punch, not a peer in an evenly-spaced list. */
.hero-content-centered .hero-headline { font-size: clamp(52px, 6.5vw, 88px); margin-bottom: 44px; }
.hero-content-centered .hero-subtext { max-width: 640px; font-size: 17px; margin-bottom: 36px; }

@keyframes shimmer-green {
  0%   { background-position: 0% center; }
  100% { background-position: 300% center; }
}

/* ── Rev-up animation (quiz CTA) ── */
@keyframes shimmer-red {
  0%   { background-position: 0% center; }
  100% { background-position: 300% center; }
}
@keyframes pulse-glow-red {
  0%,100% { box-shadow: 0 0 8px rgba(180,40,20,0.20), 0 3px 12px rgba(0,0,0,0.30); }
  55%     { box-shadow: 0 0 18px rgba(200,60,10,0.40), 0 5px 20px rgba(0,0,0,0.40); }
}
@keyframes pulse-glow-green {
  0%,100% { box-shadow: 0 0 18px rgba(0,232,123,0.35), 0 4px 20px rgba(0,0,0,0.4); }
  50%      { box-shadow: 0 0 34px rgba(0,232,123,0.60), 0 6px 28px rgba(0,0,0,0.5); }
}
/* Calendly / Book-a-Call shimmer + glow (blue family) */
@keyframes shimmer-blue {
  0%   { background-position: 0% center; }
  100% { background-position: 300% center; }
}
@keyframes pulse-glow-blue {
  0%,100% { box-shadow: 0 0 18px rgba(77,114,255,0.35), 0 4px 20px rgba(0,0,0,0.4); }
  50%     { box-shadow: 0 0 34px rgba(77,114,255,0.60), 0 6px 28px rgba(0,0,0,0.5); }
}

.hero-cta-pair {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  justify-self: start; align-self: start;
}

/* Hero "Book a Call" CTA — blue family (Calendly action). */
.hero-book-cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display); font-size: 15px; font-weight: 700;
  color: #fff;
  background: linear-gradient(90deg, #2A4FFF 0%, #6B8AFF 25%, #4D72FF 50%, #8AA4FF 75%, #2A4FFF 100%);
  background-size: 300% auto;
  border: none; border-radius: 8px; padding: 15px 26px;
  text-decoration: none; letter-spacing: -0.01em;
  animation: shimmer-blue 3.5s linear infinite, pulse-glow-blue 2.2s ease-in-out infinite;
  transition: transform 0.15s;
  white-space: nowrap;
}
.hero-book-cta:hover { transform: translateY(-2px) scale(1.02); }

.hero-quiz-cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display); font-size: 15px; font-weight: 700;
  color: #fff;
  background: linear-gradient(90deg,
    #6B0A0A 0%,
    #A81A10 20%,
    #C83020 38%,
    #B05020 55%,
    #8C3A10 70%,
    #A81A10 85%,
    #6B0A0A 100%
  );
  background-size: 300% auto;
  border: none; border-radius: 8px; padding: 15px 26px;
  text-decoration: none; letter-spacing: -0.01em;
  animation: shimmer-red 3.2s linear infinite, pulse-glow-red 2.4s ease-in-out infinite;
  transition: transform 0.15s;
  white-space: nowrap;
}
.hero-quiz-cta:hover { transform: translateY(-2px) scale(1.02); }

.hero-cta-or {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--muted2); user-select: none;
}

/* =====================================================
   HERO BOOK MODULE — the primary conversion object.
   Designed as a SESSION BRIEF, not a button: eyebrow
   meta, outcome headline, 3-step agenda, inset CTA,
   proof footer. Earns the click by being transparent
   about what the 30 minutes actually buys.
   ===================================================== */
.hero-book-module {
  display: block;
  width: 100%;
  /* Matches the visual width of the centered hero headline so the card
     reads as the *response* to the headline, sharing one column axis,
     instead of an orphan-narrow panel under a wider line. */
  max-width: 720px;
  box-sizing: border-box;
  padding: 18px 22px 18px;
  position: relative;
  text-decoration: none;
  color: inherit;
  /* Stronger blue presence at rest — clearly the destination, not a peer. */
  border: 1.5px solid rgba(77, 114, 255, 0.70);
  border-radius: 10px;
  background: linear-gradient(165deg,
    rgba(10, 18, 56, 0.82) 0%,
    rgba(3, 7, 26, 0.58) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  /* Pulsing ambient blue glow — card breathes so the eye finds it. */
  animation: hbm-card-pulse 4s ease-in-out infinite;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  cursor: pointer;
  overflow: hidden;
}

@keyframes hbm-card-pulse {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.05),
      0 10px 24px rgba(3, 7, 26, 0.45),
      0 0 28px rgba(77, 114, 255, 0.22);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 12px 32px rgba(3, 7, 26, 0.52),
      0 0 60px rgba(77, 114, 255, 0.42);
  }
}

/* ── Eyebrow: format + cost ── */
.hbm-eyebrow {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.hbm-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 7px var(--blue);
  animation: pulse 2s infinite;
  flex-shrink: 0;
}
.hbm-eyebrow-label {
  color: #8AA4FF;
  font-weight: 600;
  text-shadow: 0 0 6px rgba(77, 114, 255, 0.40);
}
.hbm-eyebrow-sep {
  color: rgba(77, 114, 255, 0.55);
}

/* ── Body: the provocation (folded-in subhead) ── */
.hbm-body {
  font-family: var(--body, 'Inter', system-ui, sans-serif);
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 16px;
  text-wrap: pretty;
}
.hbm-pov {
  color: #8AA4FF;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(77, 114, 255, 0.40);
}

/* ── Pressable CTA row (blue — Calendly action) ──
   Saturated fill + breathing glow + slow shimmer sweep so it reads as
   the press target — alive, not a passive panel. */
@keyframes hbm-breathe {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(180, 205, 255, 0.34), 0 0 18px rgba(77, 114, 255, 0.28); }
  50%      { box-shadow: inset 0 1px 0 rgba(180, 205, 255, 0.42), 0 0 32px rgba(77, 114, 255, 0.48); }
}
@keyframes hbm-shimmer {
  0%   { transform: translateX(-120%); }
  60%  { transform: translateX(220%); }
  100% { transform: translateX(220%); }
}
@keyframes hbm-arrow-nudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(3px); }
}
.hbm-cta-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1.5px solid rgba(120, 155, 255, 0.95);
  border-radius: 8px;
  background: linear-gradient(180deg,
    rgba(77, 114, 255, 0.32) 0%,
    rgba(40, 80, 220, 0.48) 100%);
  box-shadow: inset 0 1px 0 rgba(180, 205, 255, 0.34), 0 0 18px rgba(77, 114, 255, 0.28);
  animation: hbm-breathe 3.6s ease-in-out infinite;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.15s ease;
  overflow: hidden;
}
/* Slow shimmer sweep — light bar travels across the CTA every 4.2s. */
.hbm-cta-row::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 55%;
  height: 100%;
  background: linear-gradient(100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(220, 230, 255, 0.00) 30%,
    rgba(220, 230, 255, 0.45) 50%,
    rgba(220, 230, 255, 0.00) 70%,
    rgba(255, 255, 255, 0) 100%);
  transform: translateX(-120%);
  animation: hbm-shimmer 4.2s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.hbm-cta-label {
  position: relative;
  z-index: 1;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.01em;
  flex: 1;
  line-height: 1.15;
  text-shadow: 0 1px 10px rgba(160, 190, 255, 0.65);
}
.hbm-cta-arrow {
  position: relative;
  z-index: 1;
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 600;
  color: #FFFFFF;
  text-shadow: 0 0 14px rgba(180, 205, 255, 0.95);
  animation: hbm-arrow-nudge 2.4s ease-in-out infinite;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

/* ── Hover: lift + CTA glow + arrow slide ── */
.hero-book-module:hover {
  border-color: rgba(140, 175, 255, 1);
  transform: translateY(-2px);
  /* Pause the ambient pulse — hover owns the visual now. */
  animation: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 16px 36px rgba(3, 7, 26, 0.60),
    0 0 64px rgba(77, 114, 255, 0.50);
}
.hero-book-module:hover .hbm-cta-row {
  border-color: rgba(180, 205, 255, 1);
  background: linear-gradient(180deg,
    rgba(90, 130, 255, 0.50) 0%,
    rgba(50, 95, 230, 0.66) 100%);
  /* Pause the breathing on hover — hover state owns the visual now */
  animation: none;
  box-shadow:
    inset 0 1px 0 rgba(200, 220, 255, 0.55),
    0 0 36px rgba(77, 114, 255, 0.55);
}
.hero-book-module:hover .hbm-cta-arrow {
  /* Cancel the nudge animation and lock the arrow into the slid position. */
  animation: none;
  transform: translateX(4px);
}
.hero-book-module:focus-visible {
  outline: 2px solid rgba(77, 114, 255, 0.85);
  outline-offset: 4px;
}

/* ── Mobile: tighten ── */
@media (max-width: 600px) {
  .hero-book-module {
    max-width: 100%;
    padding: 12px 14px;
  }
  .hbm-body { font-size: 14.5px; line-height: 1.5; margin-bottom: 12px; }
  .hbm-cta-row { padding: 9px 12px; }
  .hbm-cta-label { font-size: 14px; }
  .hbm-cta-arrow { font-size: 16px; }
  .hbm-eyebrow { font-size: 9.5px; gap: 7px; margin-bottom: 7px; }
}

/* keep old class as no-op for safety */

.hero-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--amber);
  margin-bottom: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  min-width: 0;
  justify-self: start;
  max-width: 100%;
  /* Terminal-bracket framing — ties the ticker into the cipher engine */
  padding: 7px 13px;
  border: 1px solid rgba(77, 114, 255, 0.28);
  border-radius: 4px;
  background: rgba(3, 7, 26, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-shadow: 0 0 0 1px rgba(77, 114, 255, 0.04),
              inset 0 0 22px rgba(77, 114, 255, 0.06);
  width: fit-content;
  position: relative;
}
.hero-eyebrow .eb-bracket {
  color: rgba(77, 114, 255, 0.75);
  font-weight: 500;
}
.hero-eyebrow .eb-prompt {
  color: var(--green);
  text-shadow: 0 0 8px rgba(0, 232, 123, 0.55);
  font-weight: 600;
}
.hero-eyebrow .eb-label {
  color: rgba(255, 255, 255, 0.62);
  letter-spacing: 0.14em;
  font-size: 10px;
  text-transform: uppercase;
}
.hero-eyebrow .eb-sep {
  color: rgba(77, 114, 255, 0.55);
  letter-spacing: 0;
}
.hero-eyebrow .eb-cursor {
  display: inline-block;
  width: 7px;
  height: 12px;
  background: rgba(77, 114, 255, 0.85);
  box-shadow: 0 0 6px rgba(77, 114, 255, 0.55);
  animation: ebCursorBlink 1s step-end infinite;
  margin-left: 2px;
  vertical-align: middle;
}
@keyframes ebCursorBlink {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0; }
}
.flip-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 7px var(--green);
  flex-shrink: 0;
  animation: pulse 2s infinite;
}
#flip-text {
  transition: opacity 0.35s ease, transform 0.35s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  min-width: 0;
  flex: 1 1 0;
}

.hero-headline {
  font-family: var(--display);
  font-size: clamp(44px, 5.5vw, 76px);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -0.035em;
  color: var(--white);
  margin-bottom: 24px;
  /* Auto-balance line lengths so no single word orphans on a line of
     its own ("be", "is", etc.) on narrow grid columns or tablet widths. */
  text-wrap: balance;
  -webkit-hyphens: none;
  hyphens: none;
}
.hero-headline em {
  font-style: normal;
  color: inherit;
}
.hero-headline .strike {
  position: relative;
  color: var(--muted);
}
.hero-headline .strike::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 3px;
  background: var(--red);
  transform: translateY(-50%) rotate(-1deg);
  border-radius: 2px;
}

/* =====================================================
   HEADLINE BUTTON TREATMENT — "EXIT PLAN"
   A pressable, terminal-red badge embedded in the H1.
   Red reinforces the "exit" semantic and visually
   threads through to the red Quiz CTA below.
   ===================================================== */
.hl-btn {
  /* Subordinate inline pill — smaller than the headline so it reads
     as a secondary affordance. Glow-up over the flat prior version:
     richer gradient, brighter border, gentle red bloom, small text +
     chevron glow. No bevel, no warning icon — stays contained so the
     green Book CTA still owns the hierarchy. */
  display: inline-block;
  position: relative;
  color: #FFE8E0;
  text-decoration: none;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.42em;              /* ~27px when headline is 64px */
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 0.42em;         /* lift toward cap-height of headline */
  padding: 0.55em 0.80em 0.5em;
  margin: 0 0.18em;
  border-radius: 6px;
  /* Gradient adds depth without the heavy 3D bevel */
  background: linear-gradient(180deg,
    rgba(220, 70, 40, 0.22) 0%,
    rgba(180, 40, 20, 0.30) 100%);
  border: 1px solid rgba(220, 70, 40, 0.70);
  box-shadow:
    inset 0 1px 0 rgba(255, 160, 120, 0.14),   /* top hint */
    0 0 14px rgba(220, 60, 30, 0.26);          /* gentle red bloom */
  text-shadow: 0 0 8px rgba(255, 100, 60, 0.30);
  cursor: pointer;
  user-select: none;
  transition:
    transform 0.14s ease,
    background 0.14s ease,
    border-color 0.14s ease,
    box-shadow 0.14s ease;
  white-space: nowrap;
}
/* Terminal chevron prefix — brighter, lightly glowing */
.hl-btn::before {
  content: '❯';
  display: inline-block;
  color: #FF6B45;
  font-size: 0.90em;
  font-weight: 700;
  margin-right: 0.42em;
  text-shadow: 0 0 6px rgba(255, 90, 50, 0.55);
}

.hl-btn:hover {
  background: linear-gradient(180deg,
    rgba(235, 85, 45, 0.32) 0%,
    rgba(195, 45, 20, 0.42) 100%);
  border-color: rgba(240, 90, 50, 0.95);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 180, 140, 0.22),
    0 4px 20px rgba(220, 60, 30, 0.45);
}
.hl-btn:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.45),
    0 0 8px rgba(220, 60, 30, 0.20);
}
.hl-btn:focus-visible {
  outline: 2px solid rgba(232, 80, 40, 0.80);
  outline-offset: 3px;
}

.hero-subtext {
  font-size: 16px;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.7;
  max-width: 480px;
  margin-bottom: 0;
  /* `pretty` prevents one-word orphans at the end of paragraphs
     ("Not", "in") on narrow phone widths without the heavy cost of
     `balance` on multi-line prose. */
  text-wrap: pretty;
}
.hero-subtext strong {
  color: var(--off-white);
  font-weight: 500;
}

/* =====================================================
   CHATBOT WIDGET
   ===================================================== */

/* Blue glow accent at top */

@keyframes pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}

.chat-messages {
  padding: 18px;
  height: 260px;
  min-height: 0;
  display: flex; flex-direction: column; gap: 10px;
  overflow-y: auto;
  scroll-behavior: smooth;
}

.chat-bubble.farhan {
  background: var(--bg3);
  border: 1px solid var(--blue-border);
  color: var(--off-white);
  align-self: flex-start;
  border-bottom-left-radius: 3px;
}
.chat-bubble.user {
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-vivid) 100%);
  color: #fff; align-self: flex-end;
  border-bottom-right-radius: 3px;
  display: none;
}
.chat-bubble.user.visible { display: block; }
.chat-bubble.typing {
  background: var(--bg3); border: 1px solid var(--blue-border);
  align-self: flex-start; border-bottom-left-radius: 3px;
  padding: 14px 16px; display: none;
}
.chat-bubble.typing.visible { display: block; }

@keyframes dot-bounce {
  0%,80%,100% { transform: scale(0.6); opacity: 0.3; }
  40% { transform: scale(1); opacity: 1; }
}

.chat-reply {
  background: var(--bg3); border: 1px solid var(--blue-border);
  color: var(--off-white); font-size: 14px; line-height: 1.5;
  padding: 11px 14px; border-radius: 12px; border-bottom-left-radius: 3px;
  align-self: flex-start; max-width: 88%; display: none;
}
.chat-reply.visible { display: block; }

/* Hidden utility */
.hidden { display: none !important; }

.chat-wa-wrap.hidden { display: none !important; }
.chat-wa-wrap.visible { display: flex !important; }

.chat-copy-note {
  display: none;
  font-family: var(--mono); font-size: 10px;
  color: var(--green); letter-spacing: 0.05em;
  text-align: center; padding: 4px 0;
}

.chat-wa-btn {
  display: flex; width: 100%;
  background: #25D366; color: #fff;
  font-size: 14px; font-weight: 600; border: none;
  padding: 11px 16px; border-radius: 8px;
  align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; transition: background 0.2s; text-decoration: none;
  margin-top: 8px;
}
/* chat-wa-btn always flex inside wrap */
.chat-wa-btn:hover { background: #1ab854; }

.chat-input-area {
  border-top: 1px solid var(--blue-border);
  padding: 12px 14px; display: flex; gap: 8px; align-items: center;
  background: rgba(6,12,36,0.95);
}
.chat-input {
  flex: 1; background: var(--bg3);
  border: 1px solid var(--blue-border);
  border-radius: 8px; padding: 9px 12px;
  font-size: 14px; color: var(--white);
  font-family: var(--body); outline: none;
  transition: border-color 0.2s;
}
.chat-input::placeholder { color: var(--muted2); }
.chat-input:focus { border-color: var(--blue-vivid); }
.chat-send {
  width: 36px; height: 36px;
  background: var(--blue); border: none; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.2s, transform 0.15s; flex-shrink: 0;
}
.chat-send:hover { background: var(--blue-vivid); transform: scale(1.05); }

/* =====================================================
   SCHEDULER WIDGET
   ===================================================== */

/* Calendly iframe inside widget */

/* =====================================================
   DASHBOARD ASIDE CARD (inside Your Numbers band)
   ===================================================== */
.dm-aside-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--blue-border);
  border-radius: 10px;
  padding: 18px;
  display: flex; flex-direction: column; gap: 16px;
}

.dm-aside-metrics {
  display: flex; flex-direction: column; gap: 9px;
}
.dm-aside-metric {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
}
.dm-aside-key {
  font-family: var(--mono); font-size: 9px; color: var(--muted);
  letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
}
.dm-aside-val {
  font-family: var(--display); font-size: 13px; font-weight: 700;
  color: var(--off-white); letter-spacing: -0.02em; text-align: right;
}
.dm-aside-val.c-green { color: var(--green); }

/* =====================================================
   DASHBOARD VISUAL MOCKUP (legacy — kept for compat)
   ===================================================== */

/* Score row */

/* Metrics */

.dm-metric-val.c-green { color: var(--green); }

/* Journey stages */

/* =====================================================
   SIGNAL TICKER
   ===================================================== */
.ticker-bar {
  position: relative; z-index: 5;
  background: var(--bg2);
  border-top: 1px solid var(--blue-border);
  border-bottom: 1px solid var(--blue-border);
  padding: 0;
  overflow: hidden;
}
.ticker-bar::before,
.ticker-bar::after {
  content: '';
  position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2;
  pointer-events: none;
}
.ticker-bar::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg2) 0%, transparent 100%);
}
.ticker-bar::after {
  right: 0;
  background: linear-gradient(90deg, transparent 0%, var(--bg2) 100%);
}

.ticker-label {
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 3;
  background: var(--blue);
  display: flex; align-items: center; padding: 0 18px;
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.12em; color: rgba(255,255,255,0.9);
  text-transform: uppercase; white-space: nowrap;
  gap: 8px;
}
.ticker-label::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 8px var(--green);
  animation: pulse 2s infinite;
}

.ticker-track {
  display: flex; width: max-content;
  animation: ticker 35s linear infinite;
  padding: 0 0 0 160px; /* offset for the label */
}
.ticker-track:hover { animation-play-state: paused; }
@keyframes ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.sig-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; white-space: nowrap;
  border-right: 1px solid var(--blue-border);
  font-size: 12px;
}
.sig-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em;
  color: var(--muted); text-transform: uppercase;
}
.sig-val {
  font-family: var(--mono); font-size: 13px; font-weight: 500;
  color: var(--white);
}
.sig-badge {
  font-size: 9px; font-weight: 700; letter-spacing: 0.06em;
  padding: 2px 6px; border-radius: 100px; text-transform: uppercase;
}
.sig-live  { background: rgba(0,232,123,0.12); color: var(--green); }
.sig-hold  { background: rgba(201,168,76,0.12); color: var(--gold); }
.sig-watch { background: rgba(77,114,255,0.15); color: var(--blue-bright); }
.sig-warn  { background: rgba(255,77,77,0.12); color: var(--red); }

/* =====================================================
   THE APPROACH — EDITORIAL BANDS
   ===================================================== */
/* Global colour tokens (used in proof section too) */

.c-green   { color: var(--green) !important; }
.c-red     { color: var(--red)   !important; }

.pag-section {
  background: var(--bg2);
  border-top: 1px solid var(--blue-border);
  position: relative;
  overflow: hidden;
}
.pag-section::before {
  content: '';
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 900px; height: 500px;
  background: radial-gradient(ellipse at top, rgba(26,68,240,0.07) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
}

/* ── Individual band ── */
.pag-band {
  border-bottom: 1px solid var(--blue-border);
  position: relative; z-index: 1;
  transition: background 0.25s;
}
.pag-band:last-child { border-bottom: 1px solid var(--blue-border); }
.pag-band:hover { background: rgba(255,255,255,0.013); }

/* Mission band — green left accent + subtle tint */
.pag-band-03 {
  border-left: 3px solid rgba(0,232,123,0.30);
  background: linear-gradient(90deg, rgba(0,232,123,0.028) 0%, transparent 55%);
}
.pag-band-03:hover {
  background: linear-gradient(90deg, rgba(0,232,123,0.045) 0%, transparent 55%);
}

/* ── 3-column inner grid ── */
.pag-band-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 52px 40px;
  display: grid;
  grid-template-columns: 68px 1fr 230px;
  gap: 44px;
  align-items: center;
}
.pag-band-03 .pag-band-inner { padding: 68px 40px; }

/* ── Decorative large number ── */
.pag-band-num {
  font-family: var(--display);
  font-size: 96px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.06em;
  color: rgba(255,255,255,0.055);
  user-select: none;
  align-self: flex-start;
  margin-top: -8px;
}
.pag-num-mission  { color: rgba(0,232,123,0.18); }
.pag-num-amber    { color: rgba(232,192,64,0.22); }
.pag-num-blue     { color: rgba(77,114,255,0.18); }

/* ── Center copy column ── */
.pag-band-body { min-width: 0; }

.band-tag {
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 3px 11px; border-radius: 20px;
  display: inline-flex; margin-bottom: 18px;
}

.band-tag-blue {
  color: var(--blue-bright); background: rgba(77,114,255,0.10);
  border: 1px solid rgba(77,114,255,0.22);
}
.band-tag-green {
  color: var(--green); background: rgba(0,232,123,0.10);
  border: 1px solid rgba(0,232,123,0.22);
}
.band-tag-amber {
  color: var(--amber); background: rgba(232,192,64,0.10);
  border: 1px solid rgba(232,192,64,0.22);
}

.pag-band-headline {
  font-family: var(--display);
  font-size: clamp(22px, 2.8vw, 34px);
  font-weight: 700; line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--white); margin-bottom: 16px;
}
.pag-headline-mission {
  font-size: clamp(26px, 3.6vw, 46px);
}
.pag-band-copy {
  font-size: 14px; color: var(--muted); line-height: 1.72;
  max-width: 480px;
}

/* ── Right aside column ── */
.pag-band-aside {
  display: flex; flex-direction: column; align-items: flex-start;
}

/* Band 01: big stat */

/* Band 02: step flow */

.step-label {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--off-white);
}

/* Band 03: badge checklist */

/* ── Band 01 aside: context tags ── */
.pag-context-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ctx-tag {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 4px;
  color: var(--blue-bright);
  background: rgba(77,114,255,0.08);
  border: 1px solid rgba(77,114,255,0.20);
}

/* ── Band 02 aside: data sources ── */

/* ── Band 02 aside: 3 mini dashboard cards (overlapping fan) ── */
.dm-mini-cards {
  position: relative;
  width: 100%;
  height: 178px; /* sized to hero card + peek space */
}
.dm-mini-card {
  position: absolute;
  background: rgba(6,12,36,0.96);
  border: 1px solid var(--blue-border);
  border-radius: 10px; padding: 11px 13px;
}
/* Left card: Financial Snapshot — peeks from behind left */
.dm-card-left {
  width: 154px; top: 22px; left: 0;
  transform: rotate(-5deg);
  transform-origin: bottom center;
  z-index: 1;
  opacity: 0.82;
}
/* Hero card: Market Valuation — full, centre, front */
.dm-card-hero {
  width: 178px;
  top: 0; left: 50%; transform: translateX(-50%);
  z-index: 3;
  border-color: rgba(77,114,255,0.45);
  box-shadow:
    0 0 0 1px rgba(77,114,255,0.15),
    0 8px 32px rgba(26,68,240,0.30);
}
/* Right card: Upgrade Window — peeks from behind right */
.dm-card-right {
  width: 154px; top: 22px; right: 0;
  transform: rotate(5deg);
  transform-origin: bottom center;
  z-index: 2;
  opacity: 0.82;
}
.dm-mini-card-header {
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 9px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.dm-mini-icon {
  display: flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 4px; flex-shrink: 0;
  background: rgba(0,232,123,0.12); color: var(--green);
}
.dm-mini-icon-blue { background: rgba(77,114,255,0.12); color: var(--blue-bright); }
.dm-mini-icon-amber { background: rgba(232,192,64,0.12); color: var(--amber); }
.dm-mini-label {
  font-family: var(--mono); font-size: 8px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.dm-mini-rows { display: flex; flex-direction: column; gap: 6px; }
.dm-mini-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
}
.dm-mini-row-total {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 6px; margin-top: 2px;
}
.dm-mini-key {
  font-family: var(--mono); font-size: 8px; color: var(--muted);
  letter-spacing: 0.04em; white-space: nowrap;
}
.dm-mini-val {
  font-family: var(--display); font-size: 11px; font-weight: 700;
  color: var(--off-white); letter-spacing: -0.02em; text-align: right;
}
.dm-mini-val.c-green { color: var(--green); }
.dm-mini-val.c-amber { color: var(--amber); }

/* ── Band 03 aside: score card + WhatsApp CTA ── */
.pag-aside-cta { justify-content: flex-start; gap: 14px; align-items: stretch; }
.pag-score-card {
  flex-shrink: 0;
  border-color: rgba(0,232,123,0.28);
  box-shadow: 0 0 24px rgba(0,232,123,0.12);
}

/* Hero score ring (larger) */
.pag-score-hero {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 12px;
}
.pag-score-ring-wrap {
  position: relative; width: 80px; height: 80px; flex-shrink: 0;
}
.pag-score-ring-wrap svg { width: 80px; height: 80px; }
.pag-score-ring-inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px;
}
.pag-score-num {
  font-family: var(--display); font-size: 26px; font-weight: 700;
  color: var(--green); line-height: 1;
}
.pag-score-denom { font-family: var(--mono); font-size: 9px; color: var(--muted); }
.pag-score-label-block { display: flex; flex-direction: column; gap: 4px; }
.pag-score-title {
  font-family: var(--display); font-size: 15px; font-weight: 700;
  color: var(--white); line-height: 1.2;
}
.pag-score-sub {
  font-family: var(--mono); font-size: 9px; color: var(--muted); letter-spacing: 0.06em;
}
.pag-score-metrics { gap: 7px; }

@keyframes pulse-glow-wa {
  0%,100% { box-shadow: 0 0 14px rgba(37,211,102,0.50), 0 4px 16px rgba(0,0,0,0.35); }
  50%      { box-shadow: 0 0 28px rgba(37,211,102,0.80), 0 6px 24px rgba(0,0,0,0.50); }
}
.pag-wa-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 22px; width: 100%; justify-content: center;
  background: #25D366; color: #000;
  font-family: var(--display); font-size: 14px; font-weight: 700;
  letter-spacing: -0.01em; border-radius: 8px;
  text-decoration: none; white-space: nowrap;
  animation: pulse-glow-wa 2.4s ease-in-out infinite;
  transition: opacity 0.2s, transform 0.15s;
}
.pag-wa-btn:hover { opacity: 0.92; transform: translateY(-2px); }

/* ── Band 03 CTA row (quiz + WhatsApp side by side) ── */
.pag-cta-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  width: 100%;
}
.pag-cta-col {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.pag-quiz-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 13px 10px; width: 100%;
  color: #fff;
  background: linear-gradient(90deg,
    #6B0A0A 0%,
    #A81A10 20%,
    #C83020 38%,
    #B05020 55%,
    #8C3A10 70%,
    #A81A10 85%,
    #6B0A0A 100%
  );
  background-size: 300% auto;
  border: none; border-radius: 8px;
  font-family: var(--display); font-size: 13px; font-weight: 700;
  letter-spacing: -0.01em; text-decoration: none; text-align: center;
  white-space: nowrap;
  animation: shimmer-red 3.2s linear infinite, pulse-glow-red 2.4s ease-in-out infinite;
  transition: transform 0.15s;
}
.pag-quiz-btn:hover { transform: translateY(-2px) scale(1.02); }
.pag-quiz-sub {
  font-family: var(--mono); font-size: 9px; color: var(--muted2);
  letter-spacing: 0.07em; text-transform: uppercase; text-align: center;
}
.pag-wa-sub {
  font-family: var(--mono); font-size: 9px; color: var(--muted2);
  letter-spacing: 0.07em; text-transform: uppercase; text-align: center;
}
/* shrink WA btn text to fit column */
.pag-cta-col .pag-wa-btn {
  font-size: 13px; padding: 13px 10px; gap: 6px;
}
 /* no longer used */

/* =====================================================
   VISION — DARK SECTION
   ===================================================== */

.vision-section .container {
  position: relative;
  z-index: 3;
}
.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 40px;
}

/* =====================================================
   CTA SECTION
   ===================================================== */

.cta-headline {
  font-family: var(--display);
  font-size: clamp(30px, 4.5vw, 52px);
  font-weight: 700; line-height: 1.1;
  letter-spacing: -0.03em; color: var(--white);
  margin-bottom: 16px; max-width: 640px;
  margin-left: auto; margin-right: auto;
}
.cta-sub {
  font-size: 16px; color: var(--muted);
  max-width: 400px; margin: 0 auto 44px;
  line-height: 1.65;
}
.cta-btn-group {
  display: flex; gap: 14px;
  justify-content: center; align-items: center; flex-wrap: wrap;
}
/* Blue button — Calendly / Book a Call actions ONLY.
   Brand rule: Book = blue, Quiz = red, WhatsApp = green. */
.btn-blue {
  background: var(--blue); color: var(--white);
  font-family: var(--display); font-size: 15px; font-weight: 700;
  padding: 15px 30px; border-radius: 8px; border: none;
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.btn-blue:hover {
  background: var(--blue-vivid);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(26,68,240,0.4);
}

/* Green WhatsApp button — canonical WA action class for the public site.
   Uses the WhatsApp brand green (#25D366). */
.btn-wa {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--display); font-size: 15px; font-weight: 700;
  padding: 15px 30px; border-radius: 8px; border: none;
  background: #25D366; color: #000;
  text-decoration: none; letter-spacing: -0.01em;
  animation: pulse-glow-wa 2.4s ease-in-out infinite;
  transition: opacity 0.2s, transform 0.15s;
}
.btn-wa:hover { opacity: 0.92; transform: translateY(-2px); }
.btn-wa svg { flex-shrink: 0; }

/* =====================================================
   PROOF SECTION — 3-STORY DATA VISUALIZATION
   ===================================================== */
/* Utility color classes used across the section */
.c-green { color: var(--green) !important; }
.c-red   { color: var(--red)   !important; }

.proof-bg {
  position: absolute; inset: 0;
  background-image: url('img/masterplan.jpg'); background-image: image-set(url('img/masterplan.webp') type('image/webp'), url('img/masterplan.jpg') type('image/jpeg'));
  background-size: cover;
  background-position: center 30%;
  opacity: 0.18;
  z-index: 0;
}
.proof-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--bg2) 0%, rgba(6,10,30,0.45) 35%, rgba(6,10,30,0.45) 65%, var(--bg2) 100%);
  z-index: 1;
}
.proof-section {
  background: var(--bg2);
  border-top: 1px solid var(--blue-border);
  padding: 100px 0 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.proof-section::before {
  content: '';
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 700px; height: 400px;
  background: radial-gradient(ellipse at top, rgba(26,68,240,0.10) 0%, transparent 70%);
  pointer-events: none;
}
.proof-label {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 20px;
}
.proof-headline {
  font-family: var(--display);
  font-size: clamp(30px, 4.5vw, 52px);
  font-weight: 700; line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--white); margin-bottom: 12px;
}
.proof-headline em { color: var(--amber); font-style: normal; }
.proof-sub {
  font-family: var(--mono); font-size: 10px;
  color: var(--muted); letter-spacing: 0.1em;
  text-transform: uppercase; margin-bottom: 56px;
}

/* ── 3-story grid ── */
.proof-stories {
  display: grid;
  grid-template-columns: 1fr 56px 1fr 56px 1fr;
  gap: 0 12px;
  align-items: start;
  margin-bottom: 56px;
  text-align: left;
}

/* ── Cards ── */
.proof-card {
  border: 1px solid var(--blue-border);
  border-radius: 14px;
  background: var(--bg);
  padding: 28px 24px;
}
.proof-card-green {
  border-color: rgba(0,232,123,0.22);
  background: linear-gradient(160deg, rgba(0,232,123,0.035) 0%, var(--bg) 45%);
}
.proof-card-red {
  border-color: rgba(255,77,77,0.22);
  background: linear-gradient(160deg, rgba(255,77,77,0.035) 0%, var(--bg) 45%);
}
.proof-card-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 20px;
}
.proof-idx {
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.15em; color: var(--muted2);
}
.proof-tag-pill {
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 20px;
}
.green-tag-pill {
  color: var(--green);
  background: rgba(0,232,123,0.10);
  border: 1px solid rgba(0,232,123,0.25);
}
.red-tag-pill {
  color: var(--red);
  background: rgba(255,77,77,0.10);
  border: 1px solid rgba(255,77,77,0.22);
}
.proof-num-row {
  display: flex; align-items: flex-start; gap: 2px;
  line-height: 1; margin-bottom: 8px;
}
.proof-num {
  font-family: var(--display);
  font-size: clamp(52px, 7vw, 80px);
  font-weight: 700; line-height: 0.9;
  letter-spacing: -0.04em;
}
.green-num { color: var(--green); }
.red-num   { color: var(--red); }
.proof-pct {
  font-family: var(--display);
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 700;
  margin-top: 6px;
}
.proof-card-label {
  font-size: 12px; color: var(--muted); line-height: 1.6;
  margin-bottom: 16px;
}

/* Bar (story 1) */
.proof-bar-track {
  height: 12px;
  background: rgba(255,77,77,0.18);
  border-radius: 8px; overflow: hidden;
  margin-bottom: 8px;
}
.proof-bar-fill {
  height: 100%; width: 0%;
  border-radius: 8px;
  transition: width 1.8s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
}
.green-fill {
  background: linear-gradient(90deg, #00c56a, var(--green));
}
.green-fill::after {
  content: '';
  position: absolute; right: 0; top: 0; bottom: 0; width: 24px;
  background: linear-gradient(90deg, transparent, rgba(0,232,123,0.5));
  animation: barShimmer 2.4s ease-in-out infinite;
}
@keyframes barShimmer {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}
.proof-bar-labels {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 14px;
}
.proof-card-mini-stats {
  display: flex; gap: 20px; margin-top: 4px; flex-wrap: wrap;
}
.proof-card-mini-stats > div {
  display: flex; flex-direction: column; gap: 2px;
}
.mini-num {
  font-family: var(--display); font-size: 18px; font-weight: 700;
  color: var(--off-white); letter-spacing: -0.02em;
}
.mini-label {
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
}

/* Person grid (story 2) */
.proof-person-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 5px; margin: 0 0 12px;
}
.person-block {
  height: 26px; border-radius: 4px;
}
.person-block.miss {
  background: rgba(255,77,77,0.22);
  border: 1px solid rgba(255,77,77,0.38);
}
.person-block.hit {
  background: rgba(0,232,123,0.20);
  border: 1px solid rgba(0,232,123,0.35);
}

/* Timeline (story 3) */
.proof-timeline { margin: 0 0 12px; }
.proof-tl-bar {
  display: flex; height: 22px;
  border-radius: 6px; overflow: hidden; margin-bottom: 6px;
}
.tl-seg {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 7.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.75);
}
.tl-green { background: rgba(0,232,123,0.42); flex: 2; }
.tl-amber { background: rgba(255,165,0,0.50);  flex: 1; }
.tl-red   { background: rgba(255,77,77,0.42);  flex: 2; }
.proof-tl-scale {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 8px;
  color: var(--muted2); letter-spacing: 0.04em;
  padding: 0 2px;
}
.proof-card-note {
  font-family: var(--mono); font-size: 10px;
  color: var(--muted2); line-height: 1.65;
  letter-spacing: 0.02em;
}

/* Connectors */
.proof-connector {
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  padding-top: 48px; gap: 8px;
}
.conn-line {
  flex: 1; width: 1px;
  background: var(--blue-border);
  min-height: 20px; max-height: 60px;
}
.conn-text { text-align: center; }
.conn-but {
  display: block;
  font-family: var(--mono); font-size: 8px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted2); margin-bottom: 4px;
}
.conn-label {
  display: block;
  font-family: var(--display); font-size: 10px; font-weight: 600;
  color: var(--muted); text-align: center; line-height: 1.4;
}

/* Disclaimer + CTA */
.proof-disclaimer {
  font-family: var(--mono); font-size: 9px;
  color: var(--muted2); letter-spacing: 0.03em;
  max-width: 560px; margin: 0 auto 48px;
  line-height: 1.7; text-align: center;
}
.proof-cta { text-align: center; }
.proof-cta-line {
  font-family: var(--display); font-size: 18px;
  font-weight: 600; color: var(--off-white);
  margin-bottom: 28px;
}

/* =====================================================
   THE APPROACH — 3-STEP HORIZONTAL FLOW
   ===================================================== */

/* 3 cards + 2 connectors in a row */

/* Individual card */

/* Card 01: stat block */

/* Card 02: steps */

/* Card 03: badges */

/* Connectors between cards */

/* CTA row */

/* =====================================================
   INTERACTIVE WINDOW WIDGET
   ===================================================== */

/* Age selector buttons */

/* Active states per range */

/* Progress bar */

/* Default dim states */

/* Lit state */

/* Dim others when one is active */

/* Segment labels */

/* Scale */

/* Status line */

/* =====================================================
   FOOTER
   ===================================================== */
/* =====================================================
   SOCIAL PROOF — TESTIMONIALS + ACCOLADES
   ===================================================== */
.social-section {
  background: var(--bg);
  border-top: 1px solid var(--blue-border);
  padding: 0 0 100px;
}

/* ═══════════════════════════════
   ACCOLADE — full-width gold banner
   ═══════════════════════════════ */
.accolade-banner {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 56px 40px 52px;
  margin-bottom: 72px;
  background:
    linear-gradient(180deg, rgba(201,168,76,0.10) 0%, rgba(201,168,76,0.03) 100%);
  border-bottom: 1px solid rgba(201,168,76,0.25);
}
.accolade-banner-glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 120% at 50% 0%, rgba(201,168,76,0.18) 0%, transparent 70%);
  pointer-events: none;
}
.accolade-stars-row {
  display: flex; justify-content: center; gap: 6px;
  margin-bottom: 18px;
}
.ac-star {
  font-size: 22px; color: var(--gold);
  filter: drop-shadow(0 0 8px rgba(201,168,76,0.70));
  animation: pulse-glow-gold 2.6s ease-in-out infinite;
}
.ac-star:nth-child(2) { animation-delay: 0.25s; }
.ac-star:nth-child(3) { animation-delay: 0.50s; }
@keyframes pulse-glow-gold {
  0%,100% { filter: drop-shadow(0 0 6px rgba(201,168,76,0.55)); }
  50%      { filter: drop-shadow(0 0 16px rgba(201,168,76,0.90)); }
}
.accolade-rank {
  font-family: var(--display);
  font-size: clamp(52px, 8vw, 96px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(135deg, #e8c968 0%, #f5e090 40%, #c9a84c 70%, #e8c968 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 30px rgba(201,168,76,0.35));
  margin-bottom: 10px;
}
.accolade-org {
  font-family: var(--display);
  font-size: clamp(14px, 1.8vw, 20px);
  font-weight: 600;
  color: rgba(201,168,76,0.80);
  letter-spacing: 0.02em;
  margin-bottom: 16px;
}
.accolade-creds {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--muted2);
}
.accolade-dot { color: rgba(201,168,76,0.40); }

/* ═══════════════════════════════
   TESTIMONIALS
   ═══════════════════════════════ */
.social-label {
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 28px;
}
/* ── Testimonials Carousel ── */
.testimonials-carousel-wrap {
  position: relative;
  /* Fade hint on the right side to show more cards lurk behind */
  -webkit-mask-image: linear-gradient(to right, black 78%, transparent 100%);
  mask-image: linear-gradient(to right, black 78%, transparent 100%);
  overflow: hidden;
}
.testimonials-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  cursor: grab;
  padding-bottom: 4px;
}
.testimonials-track:active { cursor: grabbing; }
.testimonials-track::-webkit-scrollbar { display: none; }

/* Carousel navigation dots */
.testi-nav {
  display: flex; justify-content: center; gap: 8px;
  margin-top: 24px;
}
.testi-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: none; cursor: pointer; padding: 0;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.testi-dot.active {
  background: var(--green);
  box-shadow: 0 0 8px rgba(0,232,123,0.5);
  transform: scale(1.25);
}

.testimonial-card {
  flex: 0 0 calc(33.333% - 14px);
  scroll-snap-align: start;
  min-width: 240px;
  border-radius: 12px;
  padding: 28px 24px 22px;
  display: flex; flex-direction: column; gap: 14px;
  position: relative;
  overflow: hidden;
}

/* Legacy class kept for any old references */

/* Colour variants */
.testi-green {
  background: linear-gradient(145deg, rgba(0,232,123,0.07) 0%, rgba(0,232,123,0.02) 100%);
  border: 1px solid rgba(0,232,123,0.28);
  box-shadow: 0 0 32px rgba(0,232,123,0.07), inset 0 1px 0 rgba(0,232,123,0.12);
}
.testi-blue {
  background: linear-gradient(145deg, rgba(77,114,255,0.09) 0%, rgba(77,114,255,0.02) 100%);
  border: 1px solid rgba(77,114,255,0.32);
  box-shadow: 0 0 32px rgba(77,114,255,0.09), inset 0 1px 0 rgba(77,114,255,0.15);
}
.testi-amber {
  background: linear-gradient(145deg, rgba(232,192,64,0.08) 0%, rgba(232,192,64,0.02) 100%);
  border: 1px solid rgba(232,192,64,0.28);
  box-shadow: 0 0 32px rgba(232,192,64,0.07), inset 0 1px 0 rgba(232,192,64,0.12);
}
/* Top colour stripe */
.testimonial-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  border-radius: 12px 12px 0 0;
}
.testi-green::before  { background: linear-gradient(90deg, transparent, var(--green), transparent); }
.testi-blue::before   { background: linear-gradient(90deg, transparent, var(--blue-bright), transparent); }
.testi-amber::before  { background: linear-gradient(90deg, transparent, var(--amber), transparent); }

/* Stars */
.testi-stars {
  font-size: 16px; letter-spacing: 2px;
  color: var(--gold);
  filter: drop-shadow(0 0 6px rgba(201,168,76,0.55));
}
.testi-body {
  font-size: 14px;
  color: var(--off-white);
  line-height: 1.78;
  flex: 1;
  font-style: italic;
}
.testi-author {
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: auto;
}
.testi-name {
  font-family: var(--display);
  font-size: 13px; font-weight: 600;
  color: var(--white);
}
.testi-detail {
  font-family: var(--mono);
  font-size: 9px; letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 3px;
}

@media (max-width: 768px) {
  .accolade-banner { padding: 44px 24px 40px; margin-bottom: 48px; }
  .testimonials-carousel-wrap {
    -webkit-mask-image: linear-gradient(to right, black 82%, transparent 100%);
    mask-image: linear-gradient(to right, black 82%, transparent 100%);
  }
  .testimonial-card { flex: 0 0 85%; }
  .social-section { padding: 0 0 64px; }
}

/* ═══════════════════════════════════════════════════════════
   TESTIMONIALS V2 — reference-inspired (meditation-app aesthetic)
   Scoped to .social-section.social-v2 so revert = remove one class.
   Keeps the original colour variants (testi-green/blue/amber) but
   reduces them to thin accents on avatar + tag icon, so the overall
   feel is unified frosted-glass.
   ═══════════════════════════════════════════════════════════ */
.social-v2 .testimonial-card {
  flex: 0 0 calc(33.333% - 14px);
  min-width: 280px;
  border-radius: 16px;
  padding: 22px 22px 20px;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 4px 30px rgba(3, 7, 26, 0.40) !important;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: transform 0.3s, border-color 0.3s, background 0.3s;
}
.social-v2 .testimonial-card:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}
/* Hide legacy top colour stripe (ribbons clash with the unified surface) */
.social-v2 .testimonial-card::before { display: none !important; }

/* ── Top tag (platform-style: icon + verification label + year) ── */
.social-v2 .testi-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.80);
  align-self: flex-start;
  width: fit-content;
}
.social-v2 .testi-tag-ico { width: 13px; height: 13px; flex-shrink: 0; }
.social-v2 .testi-green .testi-tag-ico { color: var(--green); }
.social-v2 .testi-blue  .testi-tag-ico { color: var(--blue-bright); }
.social-v2 .testi-amber .testi-tag-ico { color: var(--amber); }
.social-v2 .testi-tag-meta {
  color: rgba(255, 255, 255, 0.45);
  font-weight: 500;
  margin-left: 2px;
}

/* ── Body quote ── */
.social-v2 .testi-body {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  font-style: italic;
  color: rgba(255, 255, 255, 0.88);
  flex: 1;
  margin: 0;
}

/* ── Author block: avatar | meta | rating ── */
.social-v2 .testi-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 0;
}
.social-v2 .testi-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  flex-shrink: 0;
}
.social-v2 .testi-green .testi-avatar {
  background: linear-gradient(135deg, rgba(0,232,123,0.38) 0%, rgba(0,232,123,0.14) 100%);
  border: 1px solid rgba(0,232,123,0.50);
  box-shadow: 0 0 14px rgba(0,232,123,0.22);
}
.social-v2 .testi-blue .testi-avatar {
  background: linear-gradient(135deg, rgba(77,114,255,0.40) 0%, rgba(77,114,255,0.14) 100%);
  border: 1px solid rgba(77,114,255,0.50);
  box-shadow: 0 0 14px rgba(77,114,255,0.22);
}
.social-v2 .testi-amber .testi-avatar {
  background: linear-gradient(135deg, rgba(232,192,64,0.38) 0%, rgba(232,192,64,0.14) 100%);
  border: 1px solid rgba(232,192,64,0.50);
  box-shadow: 0 0 14px rgba(232,192,64,0.22);
}

/* Meta (name + transaction path) */
.social-v2 .testi-meta { flex: 1; min-width: 0; }
.social-v2 .testi-name {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.social-v2 .testi-detail {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.55) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin-top: 2px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Rating column (score on top, stars below) */
.social-v2 .testi-rating {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}
.social-v2 .testi-rating-score {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
}
.social-v2 .testi-rating .testi-stars {
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--gold);
  filter: drop-shadow(0 0 4px rgba(201,168,76,0.55));
}

/* Mobile */
@media (max-width: 768px) {
  .social-v2 .testimonial-card {
    flex: 0 0 88%;
    padding: 20px 18px 18px;
    gap: 14px;
  }
  .social-v2 .testi-body { font-size: 13.5px; }
  .social-v2 .testi-name { font-size: 12.5px; }
  .social-v2 .testi-detail { font-size: 10.5px !important; }
  .social-v2 .testi-rating-score { font-size: 12px; }
}

/* =====================================================
   BOOK A STRATEGY CALL SECTION
   ===================================================== */
.book-section {
  background: var(--bg2);
  border-top: 1px solid var(--blue-border);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}

/* Decorative ambient glow */
.book-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 70% at 50% 110%, rgba(0,232,123,0.09) 0%, transparent 60%),
    radial-gradient(ellipse 50% 55% at 85% 15%, rgba(77,114,255,0.11) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 10% 80%, rgba(232,192,64,0.06) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}

/* Two-column layout */
.book-inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0 72px;
  align-items: start;
}

/* Vertical divider */
.book-divider {
  background: var(--blue-border);
  align-self: stretch;
  min-height: 200px;
}

.book-col-cta,
.book-col-news {
  display: flex; flex-direction: column;
  align-items: flex-start;
}

/* Label + headline + sub */
.book-label {
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--green); margin-bottom: 16px;
}
.book-headline {
  font-family: var(--display); font-size: clamp(36px, 4vw, 56px);
  font-weight: 700; line-height: 1.05; letter-spacing: -0.03em;
  color: var(--white); margin-bottom: 20px;
}
.book-headline em { font-style: normal; color: var(--green); }
.book-sub {
  font-size: 15px; color: var(--muted); line-height: 1.75;
  max-width: 560px; margin-bottom: 28px;
}

/* Badges */
.book-badges {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 0;
}
.book-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--off-white);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--blue-border);
  border-radius: 20px; padding: 5px 14px;
}
.book-badge-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.book-dot-green { background: var(--green); box-shadow: 0 0 6px rgba(0,232,123,0.5); }

/* Popup CTA button — blue (Calendly action) */
.book-popup-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--display); font-size: 16px; font-weight: 700;
  letter-spacing: -0.01em;
  background: linear-gradient(90deg, #2A4FFF 0%, #6B8AFF 25%, #4D72FF 50%, #8AA4FF 75%, #2A4FFF 100%);
  background-size: 300% auto;
  color: #fff;
  border: none; cursor: pointer;
  padding: 18px 36px; border-radius: 60px;
  margin-top: 36px;
  width: 100%;
  animation: shimmer-blue 3.5s linear infinite, pulse-glow-blue 2.2s ease-in-out infinite;
  transition: transform 0.15s;
}
.book-popup-btn:hover { transform: translateY(-2px) scale(1.02); }
.book-popup-btn svg { flex-shrink: 0; }

/* Disclaimer */
.book-fine {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.05em;
  color: var(--muted2); margin-top: 14px;
}

/* ── Red quiz button (matches hero-quiz-cta style) ── */
.book-quiz-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--display); font-size: 16px; font-weight: 700;
  letter-spacing: -0.01em;
  background: linear-gradient(90deg, #6B0A0A 0%, #A81A10 20%, #C83020 38%, #B05020 55%, #8C3A10 70%, #A81A10 85%, #6B0A0A 100%);
  background-size: 300% auto;
  color: #fff;
  border: none; cursor: pointer;
  padding: 18px 36px; border-radius: 60px;
  margin-top: 36px;
  width: 100%;
  text-decoration: none;
  animation: shimmer-red 3.2s linear infinite, pulse-glow-red 2.4s ease-in-out infinite;
  transition: transform 0.15s;
}
.book-quiz-btn:hover { transform: translateY(-2px) scale(1.02); }
.book-quiz-btn svg { flex-shrink: 0; }

/* ── Panel visual elements (mini UI cards) ── */
.book-col-vis {
  width: 100%;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--blue-border);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.book-vis-row-label {
  font-family: var(--mono); font-size: 8px; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--muted2);
}
/* Calendar visual */
.book-vis-slots {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
.book-vis-slot {
  background: rgba(255,255,255,0.04); border: 1px solid var(--blue-border);
  border-radius: 6px; padding: 8px 4px; text-align: center;
  font-family: var(--mono); font-size: 9px; color: var(--muted); line-height: 1.4;
}
.book-vis-slot.selected {
  background: rgba(0,232,123,0.1); border-color: rgba(0,232,123,0.4); color: var(--green);
}
.book-vis-confirmed {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 9px; color: var(--green);
  background: rgba(0,232,123,0.06); border-radius: 6px; padding: 7px 10px;
}
.book-vis-confirmed-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 8px rgba(0,232,123,0.6); flex-shrink: 0;
}
/* Score/quiz visual */
.book-vis-score-row { display: flex; align-items: flex-end; gap: 12px; }
.book-vis-score-num {
  font-family: var(--display); font-size: 36px; font-weight: 800;
  letter-spacing: -0.04em; line-height: 1; color: var(--off-white);
}
.book-vis-score-meta { display: flex; flex-direction: column; gap: 3px; padding-bottom: 4px; }
.book-vis-score-tag {
  font-family: var(--mono); font-size: 8px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber);
}
.book-vis-score-sub { font-family: var(--mono); font-size: 8px; color: var(--muted2); }
.book-vis-bar-track {
  width: 100%; height: 5px; background: rgba(255,255,255,0.07); border-radius: 3px; overflow: hidden;
}
.book-vis-bar-fill {
  height: 100%; width: 72%; border-radius: 3px;
  background: linear-gradient(90deg, #C83020, #ff8c00);
}
.book-vis-questions { display: flex; gap: 4px; flex-wrap: wrap; }
.book-vis-q {
  width: 22px; height: 22px; border-radius: 4px; display: flex;
  align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 8px; font-weight: 700;
}
.book-vis-q.done { background: rgba(0,232,123,0.12); color: var(--green); }
.book-vis-q.active { background: rgba(200,48,32,0.2); color: #ff6655; border: 1px solid rgba(200,48,32,0.5); }
.book-vis-q.todo { background: rgba(255,255,255,0.04); color: var(--muted2); }

/* ── Newsletter column ── */
.book-news-headline {
  font-family: var(--display); font-size: clamp(36px, 4vw, 56px);
  font-weight: 700; line-height: 1.05; letter-spacing: -0.03em;
  color: var(--white); margin-bottom: 16px;
}
.book-news-headline em { font-style: normal; color: var(--amber); }
.book-news-sub {
  font-size: 14px; color: var(--muted); line-height: 1.75;
  margin-bottom: 28px;
}

/* =====================================================
   FOOTER
   ===================================================== */
.footer {
  background: var(--bg); border-top: 1px solid var(--blue-border);
  padding: 44px 0;
}
.footer-inner {
  max-width: var(--max); margin: 0 auto; padding: 0 40px;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 40px;
}
.footer-logo { height: 26px; opacity: 0.6; margin-bottom: 10px; }
.footer-cea {
  font-family: var(--mono); font-size: 11px; color: var(--muted2);
  line-height: 1.8; letter-spacing: 0.03em;
}
/* ── Footer social links (left) ── */
.footer-social { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.footer-social a {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 11px; color: var(--muted);
  text-decoration: none; transition: color 0.2s; letter-spacing: 0.02em;
}
.footer-social a:hover { color: var(--off-white); }
.footer-social svg { opacity: 0.55; flex-shrink: 0; transition: opacity 0.2s; }
.footer-social a:hover svg { opacity: 1; }
/* ── Footer right column(s) ── */
.footer-right { display: flex; gap: 48px; }
.footer-links-col { display: flex; flex-direction: column; gap: 8px; text-align: right; }
.footer-links-label {
  font-family: var(--mono); font-size: 9px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted2); margin-bottom: 4px;
}
.footer-links-col a { font-size: 13px; color: var(--muted); transition: color 0.2s; text-decoration: none; }
.footer-links-col a:hover { color: var(--off-white); }

/* legacy compat */
.footer-links { display: flex; flex-direction: column; gap: 8px; text-align: right; }
.footer-links a { font-size: 13px; color: var(--muted); transition: color 0.2s; }
.footer-links a:hover { color: var(--white); }
/* ── Social section bg ── */
.social-section { position: relative; overflow: hidden; }
.social-section-bg {
  position: absolute; inset: 0; pointer-events: none;
  background: url('img/seminars2.jpg') center center / cover no-repeat; background-image: image-set(url('img/seminars2.webp') type('image/webp'), url('img/seminars2.jpg') type('image/jpeg'));
  opacity: 0.06; filter: saturate(0.3) brightness(0.8);
}
.footer-disclaimer {
  max-width: var(--max); margin: 20px auto 0;
  padding: 20px 40px 0; border-top: 1px solid var(--blue-border);
  font-size: 10px; color: var(--muted2); line-height: 1.7;
  font-family: var(--mono); letter-spacing: 0.02em;
}

/* ── Footer "Client Tools" row (between footer-inner and footer-disclaimer) ── */
.footer-tools-row {
  max-width: var(--max);
  margin: 24px auto 0;
  padding: 16px 40px 0;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px 14px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em;
}
.footer-tools-label {
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted2);
  margin-right: 6px;
}
.footer-tools-row a {
  color: var(--muted); text-decoration: none;
  transition: color 0.2s;
}
.footer-tools-row a:hover { color: var(--off-white); }
.footer-tools-sep {
  color: var(--muted2);
  opacity: 0.5;
  user-select: none;
}

/* Mobile: hide the row — Client Tools are already in the hamburger menu */
@media (max-width: 600px) {
  .footer-tools-row { display: none; }
}

/* =====================================================
   FADE ANIMATION
   ===================================================== */
/* Default: VISIBLE. Only hide-then-fade when JS confirms it's running
   (nav.js adds .js to <html> as its first action). This means if nav.js
   ever fails to load, content still renders instead of being stuck invisible. */
.fade-up {
  opacity: 1; transform: none;
  transition: opacity 0.55s ease, transform 0.55s ease;
}
html.js .fade-up:not(.visible) { opacity: 0; transform: translateY(20px); }
html.js .fade-up.visible { opacity: 1; transform: none; }

/* =====================================================
   RESPONSIVE
   ===================================================== */
/* Nav collapses to hamburger BEFORE the link row starts wrapping.
   With 9 nav links + 2 CTAs + logo, the row gets cramped at any
   viewport narrower than ~1400px and starts breaking links onto
   two lines. Pulling the breakpoint up to 1400px ensures the
   hamburger kicks in *before* that wrap can ever happen — covers
   most laptops (13"/14" MacBook at 1280–1440px logical width)
   and all tablets/phones. */
@media (max-width: 1400px) {
  .nav { padding: 0 24px; }
  .nav-links { display: none; }
  .nav-hamburger { display: flex; right: 24px; }
  .nav-logo { left: 24px; }
}

/* =====================================================
   TABLET: collapse hero to single column early so the
   headline never has to wrap inside a narrow 2fr column
   (which was orphaning "be" on iPad landscape at 1024px+).
   Phone-specific rules stay in the ≤900px block below.
   ===================================================== */
@media (max-width: 1100px) {
  .hero-content {
    grid-template-columns: 1fr;
    max-width: 760px;
    gap: 36px;
  }
  .hero-headline {
    font-size: clamp(44px, 7.2vw, 64px);
    max-width: 18ch;  /* keeps lines tight so `balance` has room to work */
  }
  .hero-subtext {
    max-width: 620px;
  }
}

@media (max-width: 900px) {
  .hero-content {
    grid-template-columns: 1fr;
    gap: 44px; padding: 0 24px;
    padding-top: calc(var(--nav) + 44px);
    padding-bottom: 60px;
  }
  /* Mobile: give the hero a guaranteed minimum height so the cipher rain
     always has room to flow all the way down, even if the content column
     is short (e.g. before the image loads). The canvas fills this height
     via #data-canvas inset:0 + height:100%. */
  .hero { min-height: 100svh; }

  /* Mobile: lock the eyebrow to full column width so flip-ticker text
     swaps stay purely content-level — no width change, no reflow, no
     ResizeObserver fire, no animation reset. */
  .hero-eyebrow {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  #flip-text {
    min-width: 0;
    flex: 1 1 auto;
  }

  /* Editorial bands: collapse to single column */
  .pag-band-inner {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 36px 24px;
  }
  .pag-band-03 .pag-band-inner { padding: 44px 24px; }
  .pag-band-num { font-size: 60px; margin-top: 0; }
  .pag-band-aside { width: 100%; }
  .pag-band-steps { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .pag-step-arrow { padding-left: 0; writing-mode: horizontal-tb; }
  .pag-band-badges { flex-direction: row; flex-wrap: wrap; }
  .pag-badge { flex: 1 1 calc(50% - 4px); }

  /* Window widget: mobile */
  .ww-inner { padding: 0 24px; }
  .ww-selector { gap: 6px; }
  .ww-btn { padding: 8px 12px; font-size: 9px; }

  /* Approach flow: stack vertically */
  .approach-section { padding: 60px 0 72px; }
  .approach-inner { padding: 0 24px; }
  .approach-cards {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .af-connector {
    flex-direction: row;
    padding-top: 0; padding: 10px 0; min-height: auto;
    justify-content: center;
  }
  .af-conn-line { min-height: auto; width: 32px; height: 1px; flex: none; }
  .af-conn-arrow { font-size: 16px; transform: rotate(90deg); }
  .af-badges { flex-direction: row; flex-wrap: wrap; }
  .af-badge { flex: 1 1 calc(50% - 4px); }

  /* Hero centered: mobile */
  .hero-content-centered .hero-headline { font-size: 42px; }

  /* Book section: mobile */
  .book-section { padding: 72px 0 80px; }
  .book-inner { grid-template-columns: 1fr; gap: 48px 0; }
  .book-divider { display: none; }
  .book-popup-btn { font-size: 15px; padding: 16px 28px; }
  .book-news-input-row { flex-direction: column; }
  .book-news-btn { width: 100%; padding: 14px; }

  /* Scheduler widget: mobile */
  .sched-widget .calendly-inline-widget { height: 660px; }

  /* Dashboard mockup: mobile */
  .dash-mockup { padding: 28px 24px 32px; }
  .dm-metrics { grid-template-columns: 1fr 1fr; gap: 10px 16px; }

  .vision-section { padding: 72px 0; }
  .container { padding: 0 24px; }
  .cta-section { padding: 72px 0; }
  .proof-section { padding: 72px 0 60px; }
  .proof-stories {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .proof-connector {
    flex-direction: row;
    padding: 12px 0; min-height: auto;
    justify-content: center;
  }
  .conn-line { min-height: auto; width: 32px; height: 1px; flex: none; }
  .conn-label br { display: none; }
  .footer-inner { flex-direction: column; gap: 20px; }
  .footer-links { text-align: left; }
  /* Mobile: hide the right-side links column for a cleaner footer */
  .footer-right { display: none; }
  .footer-disclaimer { padding: 20px 24px 0; }
  .cta-btn-group { flex-direction: column; }
  .btn-blue, .btn-outline { width: 100%; justify-content: center; }

}

@media (max-width: 480px) {
  .hero-headline { font-size: 38px; }
  .vision-headline { font-size: 30px; }
}

/* =====================================================
   CODE-CRACKING HERO — HUD corners + equation consoles
   ===================================================== */
.hero-hud {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.85;
  padding: 9px 13px;
  border: 1px solid rgba(77,114,255,0.22);
  border-radius: 4px;
  background: rgba(3,7,26,0.48);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  animation: heroHudIn 1.4s 0.9s ease-out forwards;
  box-shadow: 0 0 0 1px rgba(77,114,255,0.04), 0 0 20px rgba(3,7,26,0.35);
}
@keyframes heroHudIn { to { opacity: 1; } }
.hero-hud-tl { top: calc(var(--nav) + 22px); left: 22px; }
.hero-hud-bl { bottom: 22px; left: 22px; }
.hud-line {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 168px;
  white-space: nowrap;
}
.hud-k  { color: rgba(255,255,255,0.35); width: 52px; display: inline-block; }
.hud-v  { color: rgba(255,255,255,0.88); font-weight: 600; }
.hud-v.c-g { color: #00E87B; text-shadow: 0 0 8px rgba(0,232,123,0.35); }
.hud-v.c-a { color: #E8C040; text-shadow: 0 0 8px rgba(232,192,64,0.28); }
.hud-v.c-b { color: #4D72FF; text-shadow: 0 0 8px rgba(77,114,255,0.35); }

/* Mobile: keep face clean, drop the HUD chatter */
@media (max-width: 900px) {
  .hero-hud { display: none; }
}

/* =====================================================
   HERO V3.2 — EDITORIAL REBUILD (2026-04-21, final)
   Pure typography, CENTERED content (Hauspitality-style),
   two CTAs side-by-side — each with a plain-English descriptor
   directly below so visitors know exactly what the button does.

   Fixes the V3.1 ambiguity: the old trust-strip floated under
   both CTAs without specifying which. Now every CTA has its own
   one-line purpose + time/cost meta.

   Scope: all rules gated on .hero-content-centered (index.html
   only — seminars.html uses .hero-content without -centered)
   or on the new .hero-cta-pair-centered / .hero-cta-group
   classes that exist nowhere else on the site.
   ===================================================== */

/* ── 1. Identity eyebrow — centered pill above the headline ── */
.hero-content-centered .hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(232, 238, 255, 0.58);
  padding: 7px 14px;
  border: 1px solid rgba(77, 114, 255, 0.22);
  border-radius: 999px;
  background: rgba(3, 7, 26, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-shadow: inset 0 0 18px rgba(77, 114, 255, 0.06);
  margin: 0 auto 32px;
  width: fit-content;
  justify-self: center;
  white-space: nowrap;
}
.hero-tag-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 7px var(--green);
  animation: pulse 2s infinite;
  flex-shrink: 0;
}
.hero-tag-sep {
  color: rgba(77, 114, 255, 0.45);
  font-weight: 400;
  margin: 0 -2px;
}

/* ── 2. Headline — centered, italic accent carries the hook.
       Dark text-shadow halo lifts white type off the busy bg
       (hero image + cipher rain + blue glow). ── */
.hero-content-centered .hero-headline {
  font-size: clamp(48px, 6.0vw, 80px);
  line-height: 1.02;
  letter-spacing: -0.038em;
  margin: 0 auto 28px;
  max-width: 20ch;
  text-align: center;
  text-wrap: balance;
  text-shadow:
    0 2px 18px rgba(3, 7, 26, 0.78),
    0 0 2px rgba(3, 7, 26, 0.45);
}
.hero-content-centered .hero-headline em {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  /* Brighter blue so the italic separates from the blue-tinted bg */
  color: #8AA4FF;
  letter-spacing: -0.035em;
  position: relative;
  display: inline-block;
  /* Multi-layer shadow: dark halo for contrast + blue halo for glow */
  text-shadow:
    0 2px 20px rgba(3, 7, 26, 0.72),
    0 0 44px rgba(77, 114, 255, 0.55),
    0 0 14px rgba(138, 164, 255, 0.40);
}

/* ── 3. Lede — centered, wide enough to hold on one line on desktop ── */
.hero-content-centered .hero-lede {
  font-family: var(--body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  color: rgba(232, 238, 255, 0.72);
  max-width: 720px;
  margin: 0 auto 44px;
  text-align: center;
  text-wrap: pretty;
}

/* ── 4. CTA pair — centered row, two buttons side-by-side with
       descriptors below. Overrides the base .hero-cta-pair rule
       (justify-self: start) only inside .hero-content-centered. ── */
.hero-content-centered .hero-cta-pair,
.hero-cta-pair-centered {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 28px 40px;
  margin: 0 auto;
  justify-self: center;
  align-self: center;
  width: 100%;
  max-width: 780px;
}

/* Each CTA is a vertical group: button → descriptor → meta */
.hero-cta-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: 0 1 320px;
  max-width: 340px;
  min-width: 260px;
}

/* Base CTA button shape — shared between primary and ghost variants */
.hero-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  font-family: var(--display);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 16px 22px;
  border-radius: 10px;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.18s ease, background 0.18s ease,
              border-color 0.18s ease, color 0.18s ease,
              box-shadow 0.18s ease;
}
.hero-cta-btn .hero-cta-label {
  flex: 1;
  text-align: left;
}

/* ── 5. Primary CTA: Book a Call — flat solid blue.
       Scoped inside .hero-cta-group so the base shimmer animation
       on .hero-book-cta (used elsewhere on the site) is not affected. ── */
.hero-cta-group .hero-book-cta {
  background: var(--blue-bright);
  color: #FFFFFF;
  border: none;
  animation: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 6px 20px rgba(26, 68, 240, 0.35),
    0 0 0 1px rgba(120, 155, 255, 0.45);
}
.hero-cta-group .hero-book-cta:hover {
  transform: translateY(-2px);
  background: #6B8AFF;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 10px 28px rgba(26, 68, 240, 0.50),
    0 0 0 1px rgba(160, 185, 255, 0.65),
    0 0 36px rgba(77, 114, 255, 0.45);
}

/* ── 6. Secondary CTA: Take the Quiz — red ghost outline ── */
.hero-quiz-ghost {
  color: #FFB5A8;
  background: transparent;
  border: 1.5px solid rgba(255, 77, 77, 0.55);
}
.hero-quiz-ghost:hover {
  transform: translateY(-2px);
  color: #FFFFFF;
  border-color: rgba(255, 100, 90, 0.95);
  background: rgba(255, 77, 77, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255, 180, 160, 0.15),
    0 8px 24px rgba(180, 40, 20, 0.25),
    0 0 28px rgba(220, 60, 30, 0.30);
}
.hero-quiz-ghost:focus-visible {
  outline: 2px solid rgba(255, 100, 90, 0.85);
  outline-offset: 3px;
}

/* ── 7. CTA arrow (shared, nudges on hover) ── */
.hero-cta-group .hero-cta-arrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 600;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.hero-cta-group .hero-cta-btn:hover .hero-cta-arrow {
  transform: translateX(4px);
}

/* ── 8. Per-CTA descriptor — plain English, one line on desktop ── */
.hero-cta-desc {
  margin: 2px 0 0;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  color: rgba(232, 238, 255, 0.65);
  text-align: center;
  text-wrap: pretty;
  max-width: 32ch;
}

/* ── 9. Meta tag — IBM Plex Mono, uppercase, tracked ── */
.hero-cta-desc-meta {
  margin: 0;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(232, 238, 255, 0.42);
}
.hero-cta-desc-dot {
  color: rgba(77, 114, 255, 0.45);
  font-weight: 400;
}

/* ── 10. Mobile + tablet overrides ── */
@media (max-width: 900px) {
  .hero-content-centered .hero-tag {
    font-size: 9.5px;
    letter-spacing: 0.12em;
    padding: 6px 11px;
    gap: 8px;
    margin-bottom: 20px;
  }
  .hero-content-centered .hero-headline {
    font-size: clamp(38px, 8.5vw, 52px);
    letter-spacing: -0.030em;
    margin-bottom: 18px;
    max-width: 16ch;
  }
  .hero-content-centered .hero-lede {
    font-size: 15.5px;
    line-height: 1.55;
    margin-bottom: 24px;
  }
  .hero-content-centered .hero-cta-pair {
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
  .hero-cta-group {
    width: 100%;
    max-width: 360px;
    flex: 1 1 auto;
  }
  .hero-cta-btn {
    max-width: 100%;
    min-width: 0;
    padding: 14px 20px;
  }
}

/* Touch-device tile treatment — no hover, so give tiles a permanent
   subtle colour-keyed glow so they feel alive on mobile / tablet. */
@media (hover: none) {
  .hero-content-leftaligned .hero-cta-tile-blue {
    border-color: rgba(77, 114, 255, 0.32);
    box-shadow:
      inset 0 1px 0 rgba(160, 185, 255, 0.07),
      0 6px 22px rgba(26, 68, 240, 0.10),
      0 0 0 1px rgba(77, 114, 255, 0.08);
  }
  .hero-content-leftaligned .hero-cta-tile-red {
    border-color: rgba(255, 100, 90, 0.28);
    box-shadow:
      inset 0 1px 0 rgba(255, 180, 160, 0.07),
      0 6px 22px rgba(220, 60, 30, 0.10),
      0 0 0 1px rgba(255, 77, 77, 0.08);
  }
  .hero-content-leftaligned .hero-cta-tile::before {
    opacity: 0.85;
    width: 46px;
  }
}

@media (max-width: 480px) {
  .hero-content-centered .hero-tag {
    font-size: 9px;
    flex-wrap: wrap;
    white-space: normal;
    max-width: 100%;
    padding: 6px 10px;
  }
  .hero-tag-sep { opacity: 0.4; }
  .hero-cta-desc { font-size: 12.5px; }
  .hero-cta-desc-meta { font-size: 9.5px; letter-spacing: 0.14em; }
}

/* =====================================================
   HERO V3.4 — EDITORIAL ACTION TILES (2026-04-21)
   Left-aligned content block (inside a centered max-width),
   two framed CTA tiles side-by-side. Each tile: numbered
   header tag, leading icon inside the button, descriptor,
   meta. Hover lifts each tile with a colour-keyed glow.

   Layered on top of V3.2 base styles. Scoped via
   .hero-content-leftaligned and .hero-cta-tile so seminars.html
   and other pages are untouched.
   ===================================================== */

/* ── 1. Container: widen slightly, keep block centered in viewport
       but left-align the text inside (Hauspitality rhythm) ── */
.hero-content-centered.hero-content-leftaligned {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

/* ── 2. Eyebrow pill flush left ── */
.hero-content-leftaligned .hero-tag {
  margin: 0 0 32px;
  justify-self: start;
}

/* ── 3. Headline left-aligned ── */
.hero-content-leftaligned .hero-headline {
  margin: 0 0 28px;
  text-align: left;
  max-width: 18ch;
}

/* ── 4. Lede left-aligned ── */
.hero-content-leftaligned .hero-lede {
  margin: 0 0 40px;
  text-align: left;
  max-width: 680px;
}

/* ── 5. CTA pair: same row, flush left, tiles top-aligned ── */
.hero-content-leftaligned .hero-cta-pair {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  justify-self: start;
  gap: 18px;
  margin: 0;
  max-width: 100%;
}

/* ── 6. ACTION TILE — framed card around each CTA.
       Hairline border, tinted background, backdrop blur,
       generous internal padding. ── */
.hero-content-leftaligned .hero-cta-tile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: auto;
  min-width: 280px;
  max-width: 340px;
  flex: 0 1 320px;
  padding: 20px 22px 18px;
  border-radius: 14px;
  border: 1px solid rgba(120, 140, 200, 0.16);
  background:
    linear-gradient(160deg, rgba(14, 24, 58, 0.42) 0%, rgba(5, 10, 30, 0.22) 100%);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow:
    inset 0 1px 0 rgba(160, 185, 255, 0.05),
    0 4px 14px rgba(0, 0, 0, 0.18);
  transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease, background 0.24s ease;
  position: relative;
}

/* Subtle top-edge accent line per tile (reads as a tab) */
.hero-content-leftaligned .hero-cta-tile::before {
  content: '';
  position: absolute;
  top: 0;
  left: 18px;
  width: 38px;
  height: 2px;
  border-radius: 0 0 2px 2px;
  opacity: 0.65;
  transition: opacity 0.24s ease, width 0.24s ease;
}
.hero-content-leftaligned .hero-cta-tile-blue::before { background: var(--blue-bright); }
.hero-content-leftaligned .hero-cta-tile-red::before  { background: #FF6E6E; }

.hero-content-leftaligned .hero-cta-tile:hover {
  transform: translateY(-3px);
}
.hero-content-leftaligned .hero-cta-tile:hover::before {
  opacity: 1;
  width: 56px;
}
.hero-content-leftaligned .hero-cta-tile-blue:hover {
  border-color: rgba(77, 114, 255, 0.48);
  background:
    linear-gradient(160deg, rgba(22, 38, 88, 0.52) 0%, rgba(8, 14, 38, 0.26) 100%);
  box-shadow:
    inset 0 1px 0 rgba(160, 185, 255, 0.10),
    0 14px 42px rgba(26, 68, 240, 0.18),
    0 0 0 1px rgba(77, 114, 255, 0.15);
}
.hero-content-leftaligned .hero-cta-tile-red:hover {
  border-color: rgba(255, 100, 90, 0.42);
  background:
    linear-gradient(160deg, rgba(60, 18, 18, 0.38) 0%, rgba(12, 5, 10, 0.24) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 180, 160, 0.10),
    0 14px 42px rgba(220, 60, 30, 0.18),
    0 0 0 1px rgba(255, 77, 77, 0.14);
}

/* ── 7. Numbered index tag above the button ── */
.hero-cta-index {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(232, 238, 255, 0.58);
  margin: 0;
}
.hero-cta-index-num {
  font-weight: 700;
  font-size: 11px;
  color: var(--blue-bright);
  letter-spacing: 0.08em;
}
.hero-cta-tile-red .hero-cta-index-num {
  color: #FF6E6E;
}
.hero-cta-index-sep {
  opacity: 0.45;
  color: rgba(120, 140, 200, 0.5);
}

/* ── 8. Button: fills tile width, icon + label + arrow.
       space-between pushes arrow to the far right edge. ── */
.hero-content-leftaligned .hero-cta-tile .hero-cta-btn {
  width: 100%;
  min-width: 0;
  max-width: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  font-size: 14.5px;
  justify-content: flex-start;
}
.hero-content-leftaligned .hero-cta-tile .hero-cta-btn .hero-cta-label {
  flex: 1;
  text-align: left;
}

/* ── 9. Icon inside button — inherits button text colour via currentColor ── */
.hero-cta-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: block;
}

.hero-content-leftaligned .hero-cta-tile .hero-cta-arrow {
  font-size: 16px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.hero-content-leftaligned .hero-cta-tile .hero-cta-btn:hover .hero-cta-arrow {
  transform: translateX(4px);
}

/* ── 10. Descriptor + meta — constrained to tile width ── */
.hero-content-leftaligned .hero-cta-tile .hero-cta-desc {
  text-align: left;
  max-width: 100%;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(232, 238, 255, 0.68);
  margin: 2px 0 0;
}
.hero-content-leftaligned .hero-cta-tile .hero-cta-desc-meta {
  justify-content: flex-start;
  font-size: 9.5px;
  margin: 0;
}

/* ── 11. Mobile: tiles stack, full width, tighter rhythm ── */
@media (max-width: 780px) {
  .hero-content-leftaligned .hero-cta-pair {
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }
  .hero-content-leftaligned .hero-cta-tile {
    min-width: 0;
    max-width: 100%;
    flex: 1 1 auto;
    width: 100%;
    padding: 16px 18px 14px;
    gap: 10px;
  }
  .hero-content-leftaligned .hero-cta-tile::before {
    left: 16px;
  }
}

@media (max-width: 480px) {
  .hero-content-leftaligned .hero-cta-tile {
    padding: 14px 16px 12px;
    gap: 8px;
  }
  .hero-cta-index { font-size: 9.5px; gap: 6px; }
  .hero-cta-index-num { font-size: 10.5px; }
  .hero-content-leftaligned .hero-cta-tile .hero-cta-desc { font-size: 12px; }
  .hero-content-leftaligned .hero-cta-tile .hero-cta-btn { padding: 10px 14px; font-size: 14px; }
}

/* ============================================================
   TRUST SECTION — Social proof + CTA (index.html)
   ============================================================ */

.trust-section {
  position: relative;
  background: var(--bg);
  padding: 100px 0 90px;
  overflow: hidden;
  text-align: center;
}

.trust-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(77,114,255,0.08) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 50% 100%, rgba(0,232,123,0.05) 0%, transparent 70%);
  pointer-events: none;
}

.trust-section .container {
  max-width: 820px;
}

.trust-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* Eyebrow */
.trust-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-bright);
  margin-bottom: 28px;
}

.trust-eyebrow-dot {
  width: 6px;
  height: 6px;
  background: var(--blue-bright);
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 8px rgba(77,114,255,0.7);
}

/* Quote */
.trust-quote {
  font-family: var(--display);
  font-size: clamp(20px, 3.5vw, 28px);
  font-weight: 600;
  line-height: 1.45;
  color: var(--off-white);
  margin: 0 0 40px;
  padding: 0;
  border: none;
  max-width: 680px;
}

.trust-quote em {
  color: var(--blue-bright);
  font-style: normal;
}

/* Photo */
.trust-photo-wrap {
  position: relative;
  width: 100%;
  max-width: 680px;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 48px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
}

.trust-photo {
  width: 100%;
  display: block;
  object-fit: cover;
  height: 320px;
  filter: brightness(0.88) saturate(0.9);
}

.trust-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(3,7,26,0.10) 0%,
    rgba(3,7,26,0.40) 100%
  );
}

/* Stats row */
.trust-stats {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 44px;
  width: 100%;
  justify-content: center;
}

.trust-stat {
  flex: 1;
  text-align: center;
  max-width: 200px;
}

.trust-stat-num {
  font-family: var(--display);
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 700;
  color: var(--off-white);
  letter-spacing: -0.02em;
  line-height: 1;
}

.trust-stat-denom {
  font-size: 0.5em;
  color: var(--muted);
  font-weight: 500;
}

.trust-stat-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 6px;
}

.trust-stat-div {
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,0.10);
  flex-shrink: 0;
  margin: 0 8px;
}

/* CTA row */
.trust-cta-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 16px;
}

.trust-btn {
  font-size: 15px;
  padding: 13px 26px;
}

.trust-cal-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  background: transparent;
  border: 1.5px solid rgba(77,114,255,0.4);
  border-radius: 999px;
  color: var(--off-white);
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, color 0.18s;
}

.trust-cal-btn:hover {
  border-color: var(--blue-bright);
  background: rgba(77,114,255,0.08);
  color: #fff;
}

.trust-note {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0;
}

/* Mobile */
@media (max-width: 680px) {
  .trust-section { padding: 70px 0 60px; }
  .trust-photo { height: 220px; }
  .trust-stats { gap: 0; }
  .trust-stat-num { font-size: 28px; }
  .trust-stat-div { height: 30px; }
  .trust-cta-row { flex-direction: column; width: 100%; }
  .trust-btn, .trust-cal-btn { width: 100%; justify-content: center; }
}

/* ═══════ POV REALTY ASSOCIATE THEMES — Blackout (dark) + Acid (light) ═══════
   Accent = Pantone 13-0663 "Sun Glare" #EDFF00. Token re-map + targeted contrast
   fixes. Activates only via html.pov-theme-* (associate domains). OG = base. */

/* shared: black text on the 7 accent-fill elements (acid bg needs black text) */
html.pov-theme-blackout .btn-blue, html.pov-theme-blackout .btn-blue:hover,
html.pov-theme-blackout .nav-mobile a.active, html.pov-theme-blackout .chat-bubble.user,
html.pov-theme-blackout .ticker-label, html.pov-theme-blackout .hero-book-cta,
html.pov-theme-acid .btn-blue, html.pov-theme-acid .btn-blue:hover,
html.pov-theme-acid .nav-mobile a.active, html.pov-theme-acid .chat-bubble.user,
html.pov-theme-acid .ticker-label, html.pov-theme-acid .hero-book-cta{ color:#0A0A0A !important; }
html.pov-theme-blackout .chat-send svg, html.pov-theme-blackout .hero-book-cta svg,
html.pov-theme-acid .chat-send svg, html.pov-theme-acid .hero-book-cta svg{ fill:#0A0A0A; stroke:#0A0A0A; }
html.pov-theme-blackout .btn-blue:hover, html.pov-theme-acid .btn-blue:hover{ box-shadow:none; }

/* ─── BLACKOUT (dark): acid green on near-black ─── */
html.pov-theme-blackout{
  --bg:#0A0A0A; --bg2:#121212; --bg3:#1c1c1c;
  --white:#FAFAF7; --off-white:#E7E7E0; --muted:#9b9b92; --muted2:#67675f;
  --blue:#EDFF00; --blue-vivid:#EDFF00; --blue-bright:#EDFF00;
  --blue-dim:rgba(237,255,0,0.10); --blue-border:rgba(237,255,0,0.24); --blue-glow:rgba(237,255,0,0);
  --green:#EDFF00; --R:16px;
}
html.pov-theme-blackout body{ background:var(--bg); color:var(--off-white); }
html.pov-theme-blackout #wl-powered{ color:#8d8d84; }
html.pov-theme-blackout #wl-powered strong{ color:#EDFF00 !important; }
html.pov-theme-blackout .hero-bg::after{ background:linear-gradient(120deg,rgba(10,10,10,.94) 0%,rgba(10,10,10,.80) 50%,rgba(10,10,10,.60) 100%) !important; }

/* ─── ACID (light): acid green + black on warm off-white. Dark-designed site, so
       --white/--off-white re-map to near-black to flip body/heading text. ─── */
html.pov-theme-acid{
  --bg:#EEEEE8; --bg2:#FFFFFF; --bg3:#F4F4EE;
  --white:#0A0A0A; --off-white:#15150F; --muted:#5b5b52; --muted2:#8a8a80;
  --blue:#EDFF00; --blue-vivid:#EDFF00; --blue-bright:#EDFF00;
  --blue-dim:rgba(237,255,0,0.16); --blue-border:rgba(10,10,10,0.16); --blue-glow:rgba(237,255,0,0);
  --green:#0a7d45; --R:16px;
}
html.pov-theme-acid body{ background:var(--bg); color:var(--off-white); }
html.pov-theme-acid a{ color:inherit; }
html.pov-theme-acid canvas{ opacity:.14; }
html.pov-theme-acid [class*="glow"], html.pov-theme-acid [style*="glow"]{ filter:none; opacity:.45; }
html.pov-theme-acid #wl-powered{ color:#5b5b52; }
html.pov-theme-acid #wl-powered strong{ color:#0A0A0A !important; }
html.pov-theme-acid .hero-bg::after{ background:linear-gradient(120deg,rgba(238,238,232,.90) 0%,rgba(238,238,232,.62) 55%,rgba(238,238,232,.35) 100%) !important; }
/* ═══════ /POV REALTY ASSOCIATE THEMES ═══════ */