/* ============================================================
   FUNNELS AND SETTERS / 2026 Website
   Shared stylesheet · dark + signature gold→orange→coral
   Vanilla CSS. No build step. Motion logic adapted from Perseus.
   ============================================================ */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Grounds */
  --bg:        #0C0A09;
  --bg-2:      #161210;
  --surface:   #1A1512;
  --surface-2: #221A15;
  --line:      rgba(245, 138, 77, 0.14);
  --line-soft: rgba(255, 255, 255, 0.07);

  /* Signature brand (matches the funnel logo gradient) */
  --gold:   #FBB03B;
  --orange: #F26A21;
  --coral:  #EF4E5F;
  --orange-soft: #F58A4D;
  --grad: linear-gradient(120deg, #FBB03B 0%, #F26A21 52%, #EF4E5F 100%);
  --grad-soft: linear-gradient(120deg, rgba(251,176,59,.18), rgba(242,106,33,.14), rgba(239,78,95,.14));
  --glow: rgba(242, 106, 33, 0.45);

  /* Type */
  --font-display: 'Oswald', 'Anton', system-ui, sans-serif;
  --cream: #F4EFE9;
  --text:  #F6F4F1;
  --muted: #A89E95;
  --muted-2: #756C64;

  /* Shape */
  --r-sm: 12px;
  --r:    18px;
  --r-lg: 26px;
  --r-pill: 100px;
  --shadow: 0 18px 50px -18px rgba(0,0,0,.7);
  --shadow-glow: 0 20px 60px -20px var(--glow);
  --ease: cubic-bezier(.22,.61,.36,1);
  --maxw: 1180px;
}

/* Abolition (drop assets/fonts/Abolition.otf|woff2 to auto-upgrade from Anton) */
@font-face {
  font-family: 'Abolition';
  src: url('assets/fonts/Abolition.woff2') format('woff2'),
       url('assets/fonts/Abolition.otf') format('opentype'),
       url('assets/fonts/Abolition.ttf') format('truetype');
  font-weight: 400 900; font-style: normal; font-display: swap;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; overscroll-behavior-x: none; }

body {
  font-family: 'Outfit', system-ui, -apple-system, Segoe UI, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
/* lock horizontal drag at the root without breaking the sticky nav */
@supports (overflow: clip) { html, body { overflow-x: clip; } }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
::selection { background: rgba(242,106,33,.3); color: #fff; }

h1, h2, h3, h4 { line-height: 1.08; font-weight: 700; letter-spacing: -0.02em; }
.display { font-family: var(--font-display); font-weight: 600; letter-spacing: 0; line-height: 1.06; text-transform: uppercase; }
/* every header shares the same display font, weight and uppercase treatment across all pages */
.card h3, .step h4, .prose h2, .car-body h3 { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: .01em; }

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- Animated background (fixed, behind everything) ---------- */
.bg-fx { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; background: var(--bg); }
.bg-fx::after {  /* vignette */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 50% -10%, transparent 40%, rgba(0,0,0,.55) 100%);
}
.grid-layer {
  position: absolute; inset: -2px;
  background-image:
    linear-gradient(to right, rgba(245,138,77,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(245,138,77,.06) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(110% 90% at 50% 0%, #000 30%, transparent 75%);
          mask-image: radial-gradient(110% 90% at 50% 0%, #000 30%, transparent 75%);
  animation: gridPan 28s linear infinite;
}
.orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; will-change: transform; }
.orb-1 { width: 620px; height: 620px; top: -220px; left: -160px;
  background: radial-gradient(circle, rgba(242,106,33,.55), transparent 70%); animation: orbDrift1 20s ease-in-out infinite; }
.orb-2 { width: 520px; height: 520px; top: 12%; right: -180px;
  background: radial-gradient(circle, rgba(251,176,59,.40), transparent 70%); animation: orbDrift2 24s ease-in-out infinite; }
.orb-3 { width: 560px; height: 560px; bottom: -220px; left: 30%;
  background: radial-gradient(circle, rgba(239,78,95,.34), transparent 70%); animation: orbDrift1 26s ease-in-out infinite reverse; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px); }
.section { padding: clamp(64px, 9vw, 120px) 0; position: relative; }
.section-tight { padding: clamp(48px, 6vw, 80px) 0; }
.center { text-align: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--orange-soft);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 6px 14px; background: rgba(242,106,33,.06); margin-bottom: 20px;
}
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--grad); }
.section h2, .sec-title {
  font-size: clamp(2rem, 4.4vw, 3.2rem); margin-bottom: 16px;
}
/* every section header is the SAME size across the whole site (overrides .head-xl etc.) */
h2.display { font-size: clamp(2.1rem, 4.2vw, 3rem); }
.section .lead, .lead {
  color: var(--muted); font-size: clamp(1rem, 1.5vw, 1.15rem);
  max-width: 620px; line-height: 1.7;
}
.center .lead { margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: inherit; font-weight: 600; font-size: .98rem; cursor: pointer;
  border: none; border-radius: var(--r-pill); padding: 14px 26px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s; white-space: nowrap; }
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--grad); color: #160d05; box-shadow: 0 10px 30px -8px var(--glow); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 44px -10px var(--glow); }
.btn-ghost { background: rgba(255,255,255,.04); color: var(--text); border: 1px solid rgba(255,255,255,.16); }
.btn-ghost:hover { border-color: var(--orange); color: #fff; transform: translateY(-2px); }
.btn-lg { padding: 17px 34px; font-size: 1.05rem; }

/* ---------- Nav ---------- */
.nav-outer { position: sticky; top: 0; z-index: 100; overflow: hidden; transition: background .3s, box-shadow .3s;
  background: linear-gradient(120deg, rgba(252,251,250,.9), rgba(255,246,238,.86) 50%, rgba(252,251,250,.9));
  backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border-bottom: 1px solid rgba(20,15,12,.09); }
.nav-outer::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 36%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent); transform: skewX(-18deg);
  animation: navShine 7.5s ease-in-out infinite; }
@keyframes navShine { 0% { left: -60%; } 38%, 100% { left: 150%; } }
.nav-outer.scrolled { background: rgba(252,251,250,0.97); box-shadow: 0 8px 30px -12px rgba(0,0,0,.45); }
.nav { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; padding: 14px clamp(20px,5vw,40px);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.nav-logo { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.nav-logo img { height: 38px; width: auto; }
.nav-logo b { font-size: 1.04rem; font-weight: 700; letter-spacing: -.02em; color: #1b1410; }
.nav-logo b span { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.nav-links { display: flex; align-items: center; gap: 2px; list-style: none; flex-wrap: nowrap; }
.nav-links li { border-radius: var(--r-pill); transition: background .2s, box-shadow .2s; flex-shrink: 0; }
.nav-links li:hover { background: rgba(242,106,33,.08); }
.nav-links li:has(a.active) { background: rgba(242,106,33,.15); box-shadow: inset 0 0 0 1px rgba(242,106,33,.38); }
.nav-links a { position: relative; display: block; white-space: nowrap; padding: 7px 11px; font-size: .88rem; font-weight: 700;
  background: linear-gradient(120deg,#E8902B 0%,#E2581B 52%,#D63B4C 100%); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #E2581B; transition: opacity .2s; }
.nav-links a:hover { opacity: .82; }
.nav-links a.active { opacity: 1; }
/* keep the (now longer) nav on one line between the mobile breakpoint and wide desktop */
@media (min-width: 981px) and (max-width: 1220px) {
  .nav { gap: 10px; }
  .nav-links a { font-size: .8rem; padding: 7px 8px; }
  .nav-logo b { font-size: .95rem; }
  .nav-cta .btn { padding-left: 16px; padding-right: 16px; }
}
.nav-cta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.nav-cta .btn { padding: 11px 22px; font-size: .9rem; animation: ctaGlow 2.8s ease-in-out infinite; }
.nav-cta .btn:hover { animation: none; }

/* hamburger */
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; z-index: 110; }
.ham, .ham::before, .ham::after { display: block; width: 24px; height: 2px; background: #1b1410; border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
.ham { position: relative; }
.ham::before, .ham::after { content: ""; position: absolute; left: 0; }
.ham::before { top: -8px; } .ham::after { top: 8px; }
.nav-toggle.open .ham { background: transparent; }
.nav-toggle.open .ham::before { top: 0; transform: rotate(45deg); }
.nav-toggle.open .ham::after { top: 0; transform: rotate(-45deg); }

/* mobile drawer */
.mobile-menu { position: fixed; inset: 0 0 0 auto; width: min(82vw, 340px); z-index: 105;
  background: rgba(16,12,10,.97); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-left: 1px solid var(--line); padding: 96px 30px 40px;
  transform: translateX(100%); transition: transform .35s var(--ease); display: flex; flex-direction: column; gap: 6px; }
.mobile-menu.open { transform: translateX(0); }
.mobile-menu a { font-size: 1.15rem; font-weight: 500; color: var(--cream); padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.mobile-menu a.active { color: var(--orange); font-weight: 700; }
.mobile-menu .btn { margin-top: 22px; }
.menu-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.55); opacity: 0; visibility: hidden; transition: opacity .3s; z-index: 104; }
.menu-scrim.open { opacity: 1; visibility: visible; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: clamp(56px, 9vw, 110px) 0 clamp(40px, 7vw, 90px); text-align: center; }
.hero::after { /* warm glow wash at base */
  content: ""; position: absolute; left: 50%; bottom: -40%; transform: translateX(-50%);
  width: 120%; height: 90%; pointer-events: none; z-index: -1;
  background: radial-gradient(closest-side, rgba(242,106,33,.34), rgba(251,176,59,.12) 45%, transparent 75%);
  filter: blur(10px); }
.hero h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); margin: 18px auto 22px; max-width: 17ch; }
.hero .lead { font-size: clamp(1.05rem, 1.9vw, 1.3rem); max-width: 600px; margin: 0 auto 34px; color: var(--cream); }
.hero-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* floating mockup cards */
.float-stage { position: relative; margin: clamp(40px,7vw,72px) auto 0; max-width: 1060px; display: grid;
  grid-template-columns: repeat(3, 1fr); gap: 24px; }
.fcard { background: linear-gradient(160deg, var(--surface-2), var(--surface)); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 30px; text-align: left; box-shadow: var(--shadow); will-change: transform; }
.fcard .fc-top { display: flex; align-items: center; gap: 13px; margin-bottom: 20px; }
.fc-dot { width: 46px; height: 46px; border-radius: 30%; display: grid; place-items: center; flex-shrink: 0; position: relative; overflow: hidden;
  color: var(--orange); background: linear-gradient(150deg, rgba(255,255,255,.92), rgba(255,236,225,.6));
  border: 1px solid rgba(242,106,33,.22);
  box-shadow: 0 10px 22px -12px rgba(242,106,33,.55), inset 0 1.5px 1.5px rgba(255,255,255,.95), inset 0 -8px 14px -10px rgba(242,106,33,.18); }
.fc-dot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 55%; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,0)); }
.fc-dot svg { position: relative; z-index: 1; width: 23px; height: 23px; }
.fc-label { font-size: 1rem; color: var(--muted); font-weight: 600; }
.fc-num { font-family: var(--font-display); font-size: 2.7rem; font-weight: 800; line-height: 1.08; padding-bottom: .04em; }
.fc-sub { font-size: .94rem; color: var(--muted-2); margin-top: 4px; }
.fc-bar { height: 9px; border-radius: 6px; background: rgba(255,255,255,.06); overflow: hidden; margin-top: 16px; }
.fc-bar i { display: block; height: 100%; border-radius: 6px; background: var(--grad); }
.fcard-1 { animation: floatY 6.5s ease-in-out infinite; }
.fcard-2 { animation: floatY 8s ease-in-out infinite .6s; margin-top: -22px; }
.fcard-3 { animation: floatY 7.2s ease-in-out infinite 1.2s; }

/* ---------- As seen on ---------- */
.press { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.press .wrap { padding-top: 30px; padding-bottom: 30px; }
.press-label { text-align: center; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 20px; }
.press-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(26px, 5vw, 60px); }
.press-logo { height: 46px; width: auto; max-width: 210px; object-fit: contain;
  filter: brightness(0) invert(1); opacity: .6; transition: opacity .25s, transform .25s; }
.press-logo:hover { opacity: 1; transform: translateY(-2px); }
.press-logo.round { height: 62px; }   /* ABC circle */
.press-logo.tall  { height: 70px; }    /* IBT stacked lockup */
.press-logo.wide  { height: 36px; }    /* CBS wordmark */
.press-logo.nbc   { height: 58px; }    /* NBC peacock + text */
.press-logo.ap    { height: 58px; }    /* AP */
.press-logo.bar   { height: 42px; max-width: 320px; }  /* barchart wordmark (canvas cropped tight) */

/* ---------- Card grid (value props) ---------- */
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.card { position: relative; background: linear-gradient(158deg, rgba(242,106,33,.13), rgba(255,255,255,.05) 55%, rgba(255,255,255,.025));
  backdrop-filter: blur(13px) saturate(1.2); -webkit-backdrop-filter: blur(13px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-lg); padding: 30px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 50px -28px var(--glow);
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; overflow: hidden; }
.card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: var(--grad); opacity: .35; transition: opacity .3s;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.card:hover { transform: translateY(-6px); box-shadow: 0 26px 64px -22px var(--glow), 0 0 0 1px rgba(242,106,33,.32); }
.card:hover::before { opacity: .9; }
/* Apple-style glass app-icon tiles */
.card .ico { width: 58px; height: 58px; border-radius: 30%; display: grid; place-items: center; position: relative; overflow: hidden;
  color: var(--orange); margin-bottom: 18px;
  background: linear-gradient(150deg, rgba(255,255,255,.92) 0%, rgba(255,237,226,.62) 100%);
  border: 1px solid rgba(242,106,33,.22);
  box-shadow: 0 14px 30px -16px rgba(242,106,33,.6), inset 0 1.5px 1.5px rgba(255,255,255,.95), inset 0 -10px 18px -12px rgba(242,106,33,.2); }
.card .ico::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 55%; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 100%); }
.card .ico svg { position: relative; z-index: 1; width: 30px; height: 30px; }
/* brand-gradient glyphs (referenced from the inline #fsg svg def on every page) */
.card .ico svg path, .card .ico svg circle, .card .ico svg rect, .card .ico svg line, .card .ico svg polyline, .card .ico svg polygon,
.fc-dot svg path, .fc-dot svg circle, .fc-dot svg rect, .fc-dot svg line, .fc-dot svg polyline, .fc-dot svg polygon,
.qc-icon svg path, .qc-icon svg circle, .qc-icon svg rect, .qc-icon svg line, .qc-icon svg polyline, .qc-icon svg polygon {
  stroke: url(#fsg); }
.dark-cell .card .ico { background: linear-gradient(150deg, rgba(255,255,255,.96), rgba(255,232,219,.78)); border-color: rgba(242,106,33,.28); }
.card h3 { font-size: 1.25rem; margin-bottom: 10px; }
.card p { color: var(--muted); font-size: .96rem; }

/* ---------- Process steps ---------- */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(18px, 2.4vw, 36px); counter-reset: step; }
.step { position: relative; background: linear-gradient(160deg, rgba(242,106,33,.09), rgba(255,255,255,.045)); backdrop-filter: blur(13px) saturate(1.15); -webkit-backdrop-filter: blur(13px) saturate(1.15); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r); padding: 26px 20px; transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.step:hover { transform: translateY(-5px); border-color: var(--orange); }
.step .n { font-family: var(--font-display); font-size: 1rem; font-weight: 800; color: var(--orange);
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; margin-bottom: 16px; }
.step h4 { font-size: 1.05rem; margin-bottom: 8px; }
.step p { font-size: .87rem; color: var(--muted); }

/* ---------- The 3 Keys (monumental numerals) ---------- */
.keys { display: flex; flex-direction: column; gap: 22px; }
.key { display: grid; grid-template-columns: clamp(110px,16vw,200px) 1fr; gap: clamp(20px,4vw,48px); align-items: center;
  background: linear-gradient(120deg, rgba(242,106,33,.1), rgba(255,255,255,.04)); backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-lg);
  padding: clamp(28px,4vw,46px); transition: border-color .3s, transform .3s var(--ease); }
.key:hover { border-color: var(--orange); transform: translateY(-4px); }
.key .kn { font-family: var(--font-display); font-weight: 800; font-size: clamp(4.5rem, 12vw, 9rem); line-height: 1; padding-bottom: .08em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.key h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); margin-bottom: 12px; }
.key h3 small { display: block; font-family: 'Outfit'; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--orange-soft); font-weight: 600; margin-bottom: 8px; }
.key p { color: var(--muted); font-size: 1.02rem; max-width: 62ch; }
.key p b { color: var(--cream); font-weight: 600; }

/* ---------- Offer split ---------- */
.offers { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.offer { position: relative; background: linear-gradient(165deg, rgba(242,106,33,.13), rgba(255,255,255,.05) 60%, rgba(255,255,255,.02)); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-lg); padding: clamp(30px,4vw,44px); overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s; }
.offer:hover { transform: translateY(-8px) scale(1.012); box-shadow: 0 34px 80px -26px var(--glow), 0 0 0 1px rgba(242,106,33,.4); }
.offer .tag { display: inline-block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--orange-soft); margin-bottom: 14px; }
.offer h3 { font-size: clamp(1.5rem,2.6vw,2.1rem); margin-bottom: 12px; }
.offer p { color: var(--muted); margin-bottom: 22px; }
.offer .arrow { display: inline-flex; align-items: center; gap: 9px; color: var(--orange); font-weight: 700; white-space: nowrap; transition: gap .25s; }
.offer .arrow svg { width: 22px; height: 22px; flex-shrink: 0; animation: nudge 1.3s ease-in-out infinite; }
.offer:hover .arrow { gap: 16px; }
.offer:hover .arrow svg { animation-duration: .6s; }
@keyframes nudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(8px); } }
.offer .sheen { position: absolute; top: -60%; right: -30%; width: 60%; height: 200%; background: radial-gradient(closest-side, rgba(242,106,33,.18), transparent 70%); pointer-events: none; }

/* ---------- Stats band ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  background: linear-gradient(120deg, rgba(242,106,33,.10), rgba(239,78,95,.06)); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(32px,5vw,52px) clamp(24px,4vw,40px); }
.stat { text-align: center; }
.stat .num { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem,5vw,3.4rem); line-height: 1; }
.stat .lbl { color: var(--muted); font-size: .92rem; margin-top: 8px; }

/* ---------- Testimonials ---------- */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.quote { background: linear-gradient(160deg, rgba(242,106,33,.09), rgba(255,255,255,.045)); backdrop-filter: blur(13px) saturate(1.15); -webkit-backdrop-filter: blur(13px) saturate(1.15); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-lg); padding: 30px; transition: transform .3s var(--ease), border-color .3s; }
.quote:hover { transform: translateY(-5px); border-color: var(--orange); }
.quote .stars { color: var(--gold); letter-spacing: 2px; margin-bottom: 14px; font-size: .9rem; }
.quote p { font-size: 1.02rem; color: var(--cream); margin-bottom: 20px; }
.quote .who { display: flex; align-items: center; gap: 12px; }
.quote .who .av { width: 42px; height: 42px; border-radius: 50%; background: var(--grad); display: grid; place-items: center; color: #160d05; font-weight: 700; }
.quote .who b { display: block; font-size: .95rem; }
.quote .who span { font-size: .82rem; color: var(--muted); }

/* ---------- FAQ accordion ---------- */
.faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: linear-gradient(160deg, rgba(242,106,33,.07), rgba(255,255,255,.04)); backdrop-filter: blur(12px) saturate(1.1); -webkit-backdrop-filter: blur(12px) saturate(1.1); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r); overflow: hidden; transition: border-color .3s; }
.faq-item[open] { border-color: var(--orange); }
.faq-item summary { list-style: none; cursor: pointer; padding: 22px 26px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 1.08rem; font-weight: 600; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .pm { flex-shrink: 0; width: 26px; height: 26px; position: relative; transition: transform .3s var(--ease); }
.faq-item summary .pm::before, .faq-item summary .pm::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: var(--orange); border-radius: 2px; }
.faq-item summary .pm::before { width: 14px; height: 2px; } .faq-item summary .pm::after { width: 2px; height: 14px; transition: transform .3s; }
.faq-item[open] summary .pm::after { transform: translate(-50%,-50%) scaleY(0); }
.faq-item .ans { padding: 0 26px 24px; color: var(--muted); animation: faqIn .3s var(--ease); }

/* ---------- Team grid ---------- */
.team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.member { background: linear-gradient(160deg, rgba(242,106,33,.1), rgba(255,255,255,.045)); backdrop-filter: blur(13px) saturate(1.15); -webkit-backdrop-filter: blur(13px) saturate(1.15); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-lg); padding: 26px; text-align: center; transition: transform .3s var(--ease), border-color .3s; }
.member:hover { transform: translateY(-5px); border-color: var(--orange); }
.member .photo { width: 116px; height: 116px; border-radius: 50%; margin: 0 auto 18px; position: relative; }
.member .photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid var(--line); }
.member .photo img.missing { display: none; }
.member .photo .mono { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 2.1rem; color: #160d05; background: var(--grad);
  border: 2px solid var(--line); }
.member .photo img:not(.missing) + .mono { display: none; }
.member b { font-size: 1.1rem; display: block; }
.member span { color: var(--orange-soft); font-size: .88rem; font-weight: 500; }
.member p { color: var(--muted); font-size: .9rem; margin-top: 12px; }

/* ---------- Founders block ---------- */
.founders { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; }
.founder { background: linear-gradient(160deg, rgba(242,106,33,.11), rgba(255,255,255,.05)); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-lg); padding: clamp(28px,4vw,40px); }
.founder .who { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.founder .who .av { width: 60px; height: 60px; border-radius: 50%; background: var(--grad); display: grid; place-items: center; color: #160d05; font-weight: 800; font-family: var(--font-display); font-size: 1.4rem; }
.founder .who b { font-size: 1.2rem; } .founder .who span { color: var(--orange-soft); font-size: .85rem; }
.founder p { color: var(--muted); font-size: .98rem; }

/* ---------- Checklist ---------- */
.checks { list-style: none; display: grid; gap: 14px; margin-top: 8px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; color: var(--cream); font-size: 1rem; }
.checks li svg { flex-shrink: 0; width: 22px; height: 22px; color: var(--orange); margin-top: 2px; }
/* avoid a lone last word ("it") dropping to its own line */
.checks li, .vs-list li { text-wrap: pretty; }

/* ---------- Book / Calendly ---------- */
.book { text-align: center; }
.book .panel { background: linear-gradient(150deg, rgba(242,106,33,.1), rgba(255,255,255,.045)); backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-lg); padding: clamp(28px,4vw,40px); margin-top: 36px;
  box-shadow: 0 18px 55px -22px rgba(242,106,33,.5), 0 0 42px -8px rgba(242,106,33,.3);
  animation: panelGlow 3.4s ease-in-out infinite; }
@keyframes panelGlow {
  0%, 100% { box-shadow: 0 16px 48px -22px rgba(242,106,33,.4), 0 0 36px -10px rgba(242,106,33,.26); }
  50%      { box-shadow: 0 24px 72px -18px rgba(242,106,33,.72), 0 0 72px -2px rgba(242,106,33,.5); }
}
.calendly-inline-widget { min-width: 320px; height: 720px; border-radius: var(--r); overflow: hidden; }

/* ---------- Sub-page hero ---------- */
.page-hero { text-align: center; padding: clamp(60px,9vw,120px) 0 clamp(30px,5vw,60px); position: relative; }
.page-hero h1 { font-size: clamp(2.6rem,6vw,4.6rem); margin: 16px auto 18px; max-width: 18ch; }
.page-hero .lead { margin: 0 auto; max-width: 640px; color: var(--cream); }

/* ---------- Prose (legal pages) ---------- */
.prose { max-width: 760px; margin: 0 auto; }
.prose h2 { font-size: clamp(1.35rem,2.6vw,1.8rem); margin: 36px 0 12px; }
.prose h3 { font-size: 1.1rem; margin: 24px 0 8px; color: var(--cream); }
.prose p, .prose li { color: var(--muted); margin-bottom: 12px; line-height: 1.75; }
.prose ul { padding-left: 22px; margin-bottom: 12px; }
.prose a { color: var(--orange-soft); }
.prose .updated { color: var(--muted-2); font-size: .85rem; letter-spacing: .04em; }

/* ---------- 404 ---------- */
.notfound { min-height: 64vh; display: grid; place-items: center; text-align: center; }
.notfound .code { font-family: var(--font-display); font-weight: 800; font-size: clamp(5rem,18vw,11rem); line-height: 1.04; padding-bottom: .06em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ---------- CTA strip ---------- */
.cta-strip { text-align: center; }
.cta-strip h2 { max-width: 18ch; margin: 0 auto 16px; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line-soft); padding: clamp(48px,6vw,72px) 0 36px; margin-top: 40px; background: linear-gradient(180deg, transparent, rgba(242,106,33,.04)); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; margin-bottom: 44px; }
.footer-brand img { height: 54px; margin-bottom: 16px; }
.footer-brand p { color: var(--muted); max-width: 36ch; font-size: .95rem; }
.footer-col h5 { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 16px; }
.footer-col a { display: block; color: var(--muted); font-size: .95rem; padding: 6px 0; transition: color .2s; }
.footer-col a:hover { color: var(--orange-soft); }
.footer-bottom { border-top: 1px solid var(--line-soft); padding-top: 26px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; color: var(--muted-2); font-size: .85rem; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; }

/* word blur reveal */
.bw { filter: blur(12px); opacity: 0; display: inline-block; transition: filter .5s var(--ease), opacity .5s var(--ease); }
.bw.show { filter: blur(0); opacity: 1; }

/* ---------- Keyframes ---------- */
@keyframes gridPan { to { background-position: 64px 64px; } }
@keyframes orbDrift1 { 0%,100%{transform:translate(0,0)} 33%{transform:translate(50px,-36px)} 66%{transform:translate(-26px,46px)} }
@keyframes orbDrift2 { 0%,100%{transform:translate(0,0)} 40%{transform:translate(-56px,34px)} 75%{transform:translate(34px,-46px)} }
@keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
@keyframes ctaGlow { 0%,100%{box-shadow:0 8px 22px -8px var(--glow)} 50%{box-shadow:0 10px 36px -6px rgba(242,106,33,.7)} }
@keyframes faqIn { from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none} }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .nav-links, .nav-cta .btn { display: none; }
  .nav-toggle { display: block; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .float-stage { grid-template-columns: 1fr 1fr; max-width: 560px; }
  .fcard-3 { display: none; }
  .quotes { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .team { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .grid-2, .grid-3, .grid-4, .offers, .founders, .stats { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .float-stage { grid-template-columns: 1fr; max-width: 360px; }
  .fcard-2 { margin-top: 0; }
  .key { grid-template-columns: 1fr; text-align: center; gap: 10px; }
  .key .kn { line-height: 1; }
  .key p { margin: 0 auto; }
  .team { grid-template-columns: 1fr; max-width: 320px; margin: 0 auto; }
  .stats { gap: 28px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  /* keep headlines inside narrow phones (never exceed content width) */
  .hero h1 { font-size: clamp(1.95rem, 9vw, 3rem); max-width: 100%; }
  .page-hero h1 { font-size: clamp(1.8rem, 8vw, 2.6rem); max-width: 100%; }
  .hero .lead, .page-hero .lead { max-width: 100%; }
}
/* extra-small phones */
@media (max-width: 400px) {
  .hero h1 { font-size: clamp(1.75rem, 8.5vw, 2.4rem); }
  .wrap { padding: 0 16px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal, .bw { opacity: 1 !important; transform: none !important; filter: none !important; }
  .orb, .grid-layer, .caret, .marquee-track { animation: none !important; }
}

/* ============================================================
   v2 / typing hero, journey panels, pattern interrupts
   ============================================================ */

/* Scroll progress bar */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 300;
  background: var(--grad); box-shadow: 0 0 14px var(--glow); transition: width .08s linear; }

/* Typing hero */
.type-line { display: block; min-height: 1.1em; }
.typed-line { white-space: nowrap; }
.typed { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.caret { display: inline-block; width: .5ch; height: .92em; transform: translateY(.1em); margin-left: .04em;
  background: var(--grad); border-radius: 3px; animation: blink 1.05s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Eyebrow without the dot variant */
.kicker { display: inline-block; font-size: .92rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--orange-soft); margin-bottom: 16px; }

/* Marquee strip (pattern interrupt) */
.marquee { display: flex; overflow: hidden; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
  padding: 18px 0; background: linear-gradient(180deg, transparent, rgba(242,106,33,.04), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.marquee-track { display: flex; flex-shrink: 0; align-items: center; min-width: 100%; justify-content: space-around;
  animation: marquee 32s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span { display: inline-flex; align-items: center; font-family: var(--font-display); font-size: 1.4rem;
  color: var(--cream); opacity: .9; padding: 0 26px; white-space: nowrap; }
.marquee-track span::after { content: "✦"; color: var(--orange); margin-left: 52px; font-size: .8rem; opacity: .8; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* Section rhythm */
.section--tint { background: linear-gradient(180deg, transparent, rgba(242,106,33,.045) 45%, transparent); }
.panel-bleed { position: relative; background: linear-gradient(135deg, rgba(242,106,33,.12), rgba(239,78,95,.05));
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* Process timeline connector */
.steps { position: relative; }
.steps::before { display: none; }
.step { position: relative; z-index: 1; }

/* Process v3 — non-linear path + animated red->yellow->green glow sweep */
.head-xl { font-size: clamp(2.7rem, 6.6vw, 5.2rem); }
.steps .step::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; z-index: -1;
  box-shadow: 0 0 30px 3px var(--gc, var(--orange)); opacity: .16; animation: stepGlow 3s ease-in-out infinite; animation-delay: var(--gd, 0s); }
.steps .step .n { color: var(--gc, var(--orange)); border-color: color-mix(in srgb, var(--gc, var(--orange)) 55%, transparent); }
.steps .step:nth-child(1) { --gc: #ff4d4d; --gd: 0s; }
.steps .step:nth-child(2) { --gc: #ff8a2a; --gd: .5s; top: -28px; }
.steps .step:nth-child(3) { --gc: #ffce33; --gd: 1s;  top: 16px; }
.steps .step:nth-child(4) { --gc: #9ad94a; --gd: 1.5s; top: -16px; }
.steps .step:nth-child(5) { --gc: #35d07a; --gd: 2s;  top: 10px; }
@keyframes stepGlow { 0%, 100% { opacity: .14; } 50% { opacity: .92; } }
@media (max-width: 980px) { .steps .step { top: 0 !important; } }

/* Stacked images (warm referral) */
.stack-media { position: relative; min-height: clamp(380px, 42vw, 540px); }
.stack-media img { position: absolute; border-radius: var(--r-lg); border: 1px solid rgba(255,255,255,.12); box-shadow: var(--shadow); object-fit: cover; }
.stack-media .stack-1 { width: 60%; top: 0; left: 0; aspect-ratio: 3/4; z-index: 1; }
.stack-media .stack-2 { width: 64%; bottom: 0; right: 0; aspect-ratio: 4/3; z-index: 2; box-shadow: var(--shadow-glow); }

/* Inline mini quote */
.mini-quote { display: block; border-left: 3px solid var(--orange); padding: 6px 0 6px 18px; margin: 22px 0; font-style: italic; color: var(--orange-soft); font-size: 1.02rem; line-height: 1.55; }
.mini-quote cite { display: block; margin-top: 10px; font-style: normal; font-weight: 700; color: var(--cream); font-size: .9rem; }

/* Big italic pull quote */
.big-quote { margin-top: 26px; }
.big-quote p { font-size: clamp(1.5rem, 2.7vw, 2.2rem); line-height: 1.32; font-weight: 600; font-style: italic; color: var(--orange-soft); }
.big-quote cite { display: block; margin-top: 14px; font-style: normal; font-weight: 700; color: var(--cream); font-size: .95rem; }

@media (max-width: 860px) {
  .stack-media { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; max-width: 520px; margin: 0 auto; }
  /* target the classes directly so they beat the desktop absolute-position rules */
  .stack-media .stack-1, .stack-media .stack-2 { position: static; width: 100%; margin: 0; aspect-ratio: 4/5; }
}

/* ============================================================
   Process carousel (interactive, glass, journey diagram)
   ============================================================ */
.carousel { max-width: 1060px; margin: 54px auto 0; }
.car-stage { position: relative; }
.car-viewport { overflow: hidden; border-radius: var(--r-lg); }
.car-track { display: flex; transition: transform .55s var(--ease); will-change: transform; }
.car-slide { flex: 0 0 100%; min-width: 100%; }
.car-card { display: grid; grid-template-columns: 44% 1fr; min-height: clamp(380px, 40vw, 480px); cursor: pointer;
  background: linear-gradient(150deg, rgba(242,106,33,.14), rgba(255,255,255,.05) 55%, rgba(255,255,255,.025));
  backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-glow); }
.car-media { position: relative; background: linear-gradient(135deg, #1a1512, #241a15); }
.car-media img { width: 100%; height: 100%; object-fit: cover; }
.car-media img.missing { display: none; }
.car-media .ph { position: absolute; inset: 0; display: grid; place-items: center;
  background: radial-gradient(120% 100% at 30% 25%, rgba(242,106,33,.2), transparent 55%); }
.car-media img:not(.missing) + .ph { display: none; }
.car-body { padding: clamp(28px,4vw,54px); display: flex; flex-direction: column; justify-content: center; }
.car-num { width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--gc, var(--orange)); color: var(--gc, var(--orange));
  display: grid; place-items: center; font-family: var(--font-display); font-size: 1.5rem; margin-bottom: 16px; box-shadow: 0 0 26px -4px var(--gc, var(--orange)); }
.car-kick { font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 8px; }
.car-body h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.7rem, 3vw, 2.5rem); margin-bottom: 12px; }
.car-body p { color: var(--cream); font-size: clamp(1rem, 1.4vw, 1.14rem); line-height: 1.6; max-width: 46ch; }
.car-slide:nth-child(1) { --gc:#ff5a5a; } .car-slide:nth-child(2) { --gc:#ff8a2a; } .car-slide:nth-child(3) { --gc:#ffce33; }
.car-slide:nth-child(4) { --gc:#9ad94a; } .car-slide:nth-child(5) { --gc:#35d07a; }

.car-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; color: #fff; border: 1px solid rgba(255,255,255,.2);
  background: rgba(20,15,12,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background .25s, color .25s, border-color .25s; }
.car-arrow svg { width: 24px; height: 24px; }
.car-arrow:hover { background: var(--grad); color: #160d05; border-color: transparent; }
.car-prev { left: clamp(-22px, -1.4vw, -8px); }
.car-next { right: clamp(-22px, -1.4vw, -8px); }
.carousel:not(.interacted) .car-next { animation: arrowShake 1.15s ease-in-out infinite; }
.carousel:not(.interacted) .car-viewport { animation: carNudge 2.4s ease-in-out infinite; }
@keyframes arrowShake { 0%,100% { transform: translateY(-50%) translateX(0); } 45% { transform: translateY(-50%) translateX(8px); } 62% { transform: translateY(-50%) translateX(2px); } }
@keyframes carNudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(9px); } }

.car-hint { display: flex; align-items: center; justify-content: center; gap: 9px; text-align: center; margin-top: 20px;
  color: var(--orange-soft); font-weight: 600; font-size: .94rem; letter-spacing: .02em; transition: opacity .3s; }
.car-hint svg { width: 16px; height: 16px; animation: nudge 1.3s ease-in-out infinite; }
.carousel.interacted .car-hint { opacity: .4; }

.car-steps { display: flex; justify-content: center; align-items: flex-start; margin-top: 30px; position: relative; flex-wrap: wrap; }
.car-steps::before { content: ""; position: absolute; top: 18px; left: 12%; right: 12%; height: 2px; z-index: 0;
  background: linear-gradient(90deg, #ff5a5a, #ff8a2a, #ffce33, #9ad94a, #35d07a); opacity: .45; }
.car-dot { position: relative; z-index: 1; background: none; border: none; cursor: pointer; display: flex; flex-direction: column;
  align-items: center; gap: 9px; padding: 0 clamp(8px, 2.4vw, 30px); color: var(--muted); transition: color .25s; }
.car-dot .cs-n { width: 38px; height: 38px; border-radius: 50%; border: 2px solid rgba(255,255,255,.18); background: var(--bg-2);
  display: grid; place-items: center; font-family: var(--font-display); font-size: 1rem; color: var(--muted); transition: .3s; }
.car-dot .cs-l { font-size: .82rem; font-weight: 500; white-space: nowrap; }
.car-dot:hover { color: var(--cream); } .car-dot:hover .cs-n { border-color: var(--gc, var(--orange)); }
.car-dot.active .cs-n { background: var(--gc, var(--orange)); border-color: var(--gc, var(--orange)); color: #160d05; box-shadow: 0 0 20px -2px var(--gc, var(--orange)); }
.car-dot.active .cs-l { color: #fff; }
.car-dot:nth-child(1) { --gc:#ff5a5a; } .car-dot:nth-child(2) { --gc:#ff8a2a; } .car-dot:nth-child(3) { --gc:#ffce33; }
.car-dot:nth-child(4) { --gc:#9ad94a; } .car-dot:nth-child(5) { --gc:#35d07a; }

@media (max-width: 768px) {
  .car-card { grid-template-columns: 1fr; min-height: 0; }
  .car-media { height: 200px; }
  /* center the arrows on the image so they never overlap the stage number below it */
  .car-arrow { top: 100px; width: 46px; height: 46px; }
  .car-prev { left: 8px; } .car-next { right: 8px; }
  .car-dot .cs-l { display: none; }
  .car-dot { padding: 0 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .car-track { transition: none !important; }
  .carousel .car-next, .carousel .car-viewport, .car-hint svg { animation: none !important; }
}

/* ============================================================
   LIGHT THEME (masculine, clean white) — body.theme-light
   ============================================================ */
body.theme-light {
  --bg: #FFFFFF; --bg-2: #F2F4F6; --surface: #FFFFFF; --surface-2: #F7F9FB;
  --line: rgba(18,22,28,.12); --line-soft: rgba(18,22,28,.07);
  --cream: #161A1F; --text: #11151A; --muted: #535A63; --muted-2: #868D96;
  color: var(--text);
}
/* clean white ground; the grid texture does the work of breaking it up */
body.theme-light .bg-fx { background: var(--bg); }
body.theme-light .bg-fx::after { display: none; }
body.theme-light .orb, body.theme-light canvas.particles { display: none; }
/* soft, blurred grid that fades in and out as islands, with solid white between */
body.theme-light .grid-layer { opacity: 1; filter: blur(.6px); background-image:
  linear-gradient(to right, rgba(18,22,28,.07) 1px, transparent 1px),
  linear-gradient(to bottom, rgba(18,22,28,.07) 1px, transparent 1px);
  -webkit-mask-image:
    radial-gradient(42% 36% at 18% 23%, #000 0%, transparent 72%),
    radial-gradient(48% 42% at 82% 57%, #000 0%, transparent 74%),
    radial-gradient(40% 34% at 50% 90%, #000 0%, transparent 73%),
    radial-gradient(34% 30% at 46% 48%, #000 0%, transparent 72%);
          mask-image:
    radial-gradient(42% 36% at 18% 23%, #000 0%, transparent 72%),
    radial-gradient(48% 42% at 82% 57%, #000 0%, transparent 74%),
    radial-gradient(40% 34% at 50% 90%, #000 0%, transparent 73%),
    radial-gradient(34% 30% at 46% 48%, #000 0%, transparent 72%); }
body.theme-light .hero::after { opacity: .16; }
body.theme-light .nav-outer { background: rgba(255,255,255,.93); border-bottom: 1px solid rgba(18,22,28,.1); }

/* section rhythm: clean cool-grey bands instead of orange wash */
body.theme-light .section--tint { background: linear-gradient(180deg, transparent, #EDEFF2 45%, transparent); }
/* panel-bleed colour fades softly in and out (no hard seam) so white blurs into the gradient */
body.theme-light .panel-bleed { background: none; border-color: transparent; }
body.theme-light .panel-bleed::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(135deg, rgba(251,176,59,.24), rgba(242,106,33,.19) 50%, rgba(239,78,95,.15));
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent); }

/* card cells -> crisp white */
body.theme-light .card, body.theme-light .step, body.theme-light .offer, body.theme-light .quote,
body.theme-light .member, body.theme-light .founder, body.theme-light .faq-item, body.theme-light .key,
body.theme-light .book .panel, body.theme-light .car-card, body.theme-light .fcard, body.theme-light .vs-card,
body.theme-light .stats {
  background: #FFFFFF; border-color: rgba(18,22,28,.1); box-shadow: 0 16px 40px -30px rgba(18,22,28,.45);
}
body.theme-light .vs-card.good { background: #FFF7F0; }
body.theme-light .fc-bar { background: rgba(18,22,28,.08); }
/* the booking panel glows warm on the white */
/* Book Now panel = dark city cell with the button glowing on top */
body.theme-light .book .panel {
  background:
    radial-gradient(70% 65% at 84% 6%, rgba(242,106,33,.26), transparent 60%),
    radial-gradient(60% 60% at 8% 104%, rgba(242,106,33,.14), transparent 62%),
    linear-gradient(rgba(8,6,5,.56), rgba(8,6,5,.72)),
    url('assets/images/skyline.jpg') center 38% / cover no-repeat,
    #000;
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 18px 55px -22px rgba(242,106,33,.5), 0 0 44px -8px rgba(242,106,33,.34);
  overflow: hidden;
  padding: clamp(50px,7vw,88px) clamp(28px,4vw,48px);
}
body.theme-light .chip { background: #fff; border-color: rgba(18,22,28,.12); }
body.theme-light .btn-ghost { color: var(--text); border-color: rgba(18,22,28,.24); background: #fff; }

/* press logos -> solid dark on white */
body.theme-light .press-logo { filter: brightness(0); opacity: .6; }
body.theme-light .press-logo:hover { opacity: 1; }

/* versus accents */
body.theme-light .vs-card.bad h3 { color: var(--muted); }
body.theme-light .vs-card.good h3 { color: var(--orange); }
body.theme-light .vs-card.bad .vs-list li { color: var(--muted); }
body.theme-light .vs-card.good .vs-list li { color: var(--text); }

/* carousel */
body.theme-light .car-arrow { background: #fff; color: #11151A; border-color: rgba(18,22,28,.16); box-shadow: 0 6px 18px -8px rgba(18,22,28,.45); }
body.theme-light .car-dot .cs-n { background: #fff; border-color: rgba(18,22,28,.18); color: var(--muted); }
body.theme-light .car-dot.active .cs-l { color: var(--text); }

/* DARK ISLANDS keep light type so white text never lands on white */
body.theme-light .media-band { --cream: #E9ECEF; }
body.theme-light .media-band .media-inner { color: #FFFFFF; }
body.theme-light .pull p { color: var(--text); }
body.theme-light .mobile-menu { --cream: #EDEFF2; }
body.theme-light .footer { background: #12151A; --text: #F2F4F6; --cream: #F2F4F6; --muted: #A3AAB3; --muted-2: #7A818B; --line-soft: rgba(255,255,255,.08); }

/* ============================================================
   Book Now pulse + glassmorphism page transition
   ============================================================ */
.btn-book { animation: bookPulse 1.9s ease-in-out infinite; }
.btn-book:hover { animation: none; }
@keyframes bookPulse {
  0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 10px 30px -8px var(--glow); }
  50% { transform: translateY(-2px) scale(1.045); box-shadow: 0 18px 48px -6px rgba(242,106,33,.8); }
}

/* simple, clean page transition: a plain opacity cross-fade (no blur, no overlay, no lag, no font flicker) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; animation-timing-function: ease; }

@media (prefers-reduced-motion: reduce) {
  .btn-book { animation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}


/* Comparison / versus (glassmorphism + glowing icons) */
.versus { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; position: relative; z-index: 1; }
.vs-card { position: relative; border-radius: var(--r-lg); padding: clamp(28px,4vw,46px); text-align: center; overflow: hidden;
  background: rgba(255,255,255,.045); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 24px 60px -32px rgba(0,0,0,.85); }
.vs-card.bad { border-color: rgba(255,255,255,.1); }
.vs-card.good { border-color: rgba(242,106,33,.32); background: linear-gradient(165deg, rgba(242,106,33,.12), rgba(255,255,255,.04)); }
.vs-ico { width: clamp(94px,13vw,128px); height: clamp(94px,13vw,128px); border-radius: 50%; margin: 0 auto 24px;
  display: grid; place-items: center; border: 3px solid currentColor; }
.vs-ico svg { width: 50%; height: 50%; }
.vs-card.bad .vs-ico, .vs-card.good .vs-ico { color: var(--orange); animation: pulseOrange 2.4s ease-in-out infinite; }
@keyframes pulseOrange { 0%,100% { box-shadow: 0 0 24px rgba(242,106,33,.4); transform: scale(1); } 50% { box-shadow: 0 0 52px rgba(242,106,33,.9); transform: scale(1.045); } }
.vs-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; letter-spacing: .02em; margin-bottom: 22px; }
.vs-card.bad h3 { color: var(--muted); } .vs-card.good h3 { color: var(--orange); }
.vs-list { list-style: none; display: grid; gap: 13px; text-align: left; max-width: 380px; margin: 0 auto; }
.vs-list li { display: flex; gap: 11px; align-items: flex-start; font-size: .98rem; opacity: 0; transform: translateY(14px); }
.vs-card.bad .vs-list li { color: var(--muted); } .vs-card.good .vs-list li { color: var(--cream); }
.vs-list li svg { width: 19px; height: 19px; flex-shrink: 0; margin-top: 2px; }
.vs-card.bad .vs-list li svg { color: var(--muted-2); } .vs-card.good .vs-list li svg { color: var(--orange); }
.versus.in .vs-list li { animation: vsIn .55s var(--ease) forwards; }
.versus.in .vs-list li:nth-child(1) { animation-delay: .15s; }
.versus.in .vs-list li:nth-child(2) { animation-delay: .26s; }
.versus.in .vs-list li:nth-child(3) { animation-delay: .37s; }
.versus.in .vs-list li:nth-child(4) { animation-delay: .48s; }
.versus.in .vs-list li:nth-child(5) { animation-delay: .59s; }
@keyframes vsIn { to { opacity: 1; transform: none; } }

/* Media band (skyline video) */
.media-band { position: relative; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--line);
  min-height: clamp(330px, 44vw, 500px); display: grid; place-items: center; text-align: center; padding: clamp(36px, 6vw, 80px); }
.media-band video, .media-band .media-photo, .media-band .media-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media-band .media-fallback { z-index: 0; background:
  radial-gradient(120% 90% at 18% 0%, rgba(242,106,33,.34), transparent 55%),
  radial-gradient(120% 90% at 90% 100%, rgba(239,78,95,.22), transparent 55%),
  linear-gradient(135deg, #1a1512, #0c0a09); }
.media-band video, .media-band .media-photo { z-index: 1; }
.media-band::after { content: ""; position: absolute; inset: 0; z-index: 2;
  background: radial-gradient(120% 120% at 50% 50%, rgba(8,6,5,.45), rgba(8,6,5,.82) 80%),
              linear-gradient(180deg, rgba(8,6,5,.5), rgba(8,6,5,.85)); }
.media-band .media-inner { position: relative; z-index: 3; max-width: 760px; }

/* Dark "black cell" island — breaks up the white; light text + dark-glass cards inside */
.dark-cell { position: relative; border-radius: var(--r-lg); overflow: hidden;
  padding: clamp(40px,6vw,76px) clamp(22px,4vw,56px);
  background:
    radial-gradient(70% 55% at 88% 4%, rgba(242,106,33,.12), transparent 60%),
    radial-gradient(70% 55% at 8% 100%, rgba(242,106,33,.07), transparent 62%),
    #000000;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 40px 90px -48px rgba(0,0,0,.7); }
body.theme-light .dark-cell {
  --text: #F6F4F1; --cream: #F4EFE9; --muted: #B6AFA8; --muted-2: #8A8077;
  --line: rgba(245,138,77,.16); --line-soft: rgba(255,255,255,.08);
  color: var(--text); box-shadow: 0 40px 90px -44px rgba(20,15,12,.55); }
body.theme-light .dark-cell .card {
  background: linear-gradient(158deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border-color: rgba(255,255,255,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 50px -30px rgba(0,0,0,.6); }
/* keep the card's gradient hairline subtle so orange stays minimal */
body.theme-light .dark-cell .card::before { opacity: .18; }

/* Image split panel */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 4vw, 56px); align-items: center; }
.split-media { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 3;
  border: 1px solid var(--line); background: linear-gradient(135deg, #1a1512, #241a15); }
.split-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.split-media img.missing { display: none; }
.split-media .ph { position: absolute; inset: 0; display: grid; place-items: center; padding: 22px; text-align: center;
  color: var(--muted-2); font-size: .82rem; letter-spacing: .04em;
  background: radial-gradient(120% 100% at 30% 20%, rgba(242,106,33,.2), transparent 55%); }
.split-media img:not(.missing) + .ph { display: none; }

/* Pull-quote interrupt */
.pull { text-align: center; max-width: 940px; margin: 0 auto; position: relative; }
.pull .mark { font-family: var(--font-display); font-size: clamp(3.5rem, 9vw, 6rem); line-height: .4; color: var(--orange); opacity: .55; display: block; }
.pull p { font-size: clamp(1.5rem, 3.4vw, 2.6rem); line-height: 1.32; font-weight: 500; color: #fff; margin: 0 0 20px; }
.pull cite { color: var(--orange-soft); font-style: normal; font-size: .95rem; letter-spacing: .05em; }

/* Fact chips */
.chips { display: flex; flex-wrap: wrap; gap: 11px; }
.chips.center { justify-content: center; }
.chip { border: 1px solid var(--line); background: rgba(255,255,255,.03); border-radius: var(--r-pill);
  padding: 9px 17px; font-size: .86rem; color: var(--cream); display: inline-flex; align-items: center; gap: 8px;
  transition: border-color .25s, transform .25s, background .25s; }
.chip:hover { border-color: var(--orange); transform: translateY(-2px); background: rgba(242,106,33,.08); }
.chip b { color: var(--orange-soft); }

/* Richer card accents */
.card .ico { transition: transform .3s var(--ease); }
.card:hover .ico { transform: translateY(-3px) scale(1.05); }
.card .num-badge { position: absolute; top: 18px; right: 20px; font-family: var(--font-display); font-size: 1.6rem; color: var(--line); }
.card:hover .num-badge { color: rgba(242,106,33,.4); }

/* Section heading underline accent */
.accent-line { width: 56px; height: 4px; border-radius: 4px; background: var(--grad); margin: 0 0 22px; }
.center .accent-line { margin-left: auto; margin-right: auto; }

/* v2 responsive */
@media (max-width: 860px) {
  .versus { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .split .split-media { order: -1; }
  .steps::before { display: none; }
}

/* Particles */
canvas.particles { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 0; }
.nav-particles { position: fixed; top: 0; left: 0; width: 100%; height: 260px; pointer-events: none; z-index: 99; }
.panel-bleed > .wrap, .panel-bleed > .versus { position: relative; z-index: 1; }

/* Slide-in reveal variants (quotes) */
.reveal.from-left { transform: translateX(-46px); }
.reveal.from-right { transform: translateX(46px); }
.reveal.from-left.in, .reveal.from-right.in { transform: none; }
.quotes .quote:nth-child(3n+1) { transform: translateX(-44px); }
.quotes .quote:nth-child(3n+2) { transform: translateY(30px); }
.quotes .quote:nth-child(3n) { transform: translateX(44px); }
.quotes .quote.in { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .nav-outer::after, .vs-card .vs-ico, .offer .arrow svg { animation: none !important; }
  .vs-list li { opacity: 1 !important; transform: none !important; }
  .nav-particles, canvas.particles { display: none !important; }
}
@media (max-width: 680px) {
  .marquee-track span { font-size: 1.1rem; padding: 0 16px; }
  .marquee-track span::after { margin-left: 30px; }
}

/* As seen on: lock to 3 logos across, 2 rows, on all mobile devices */
@media (max-width: 768px) {
  .press-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 14px; align-items: center; justify-items: center; }
  .press-logo { height: auto; width: auto; max-width: 100%; max-height: 38px; }
  .press-logo.round { max-height: 46px; }   /* abc circle */
  .press-logo.nbc   { max-height: 44px; }
  .press-logo.ap    { max-height: 34px; }
  .press-logo.wide  { max-height: 26px; }    /* CBS wordmark */
  .press-logo.tall  { max-height: 56px; }    /* IBT stacked lockup */
  .press-logo.bar   { max-width: 100%; max-height: 40px; }  /* barchart wordmark (fills its cell) */
}

/* ============================================================
   Animated CRM demo — a GHL-style window with a cursor browsing qualified leads
   ============================================================ */
.crm-demo { max-width: 940px; margin: 50px auto 0; perspective: 1500px; }
.crm-win { background: #ffffff; border-radius: 16px; overflow: hidden; border: 1px solid rgba(18,22,28,.12);
  box-shadow: 0 50px 100px -45px rgba(18,22,28,.6); transform: rotateX(3deg); transform-origin: top center; }
.crm-chrome { display: flex; align-items: center; gap: 8px; padding: 11px 16px; background: #eef1f4; border-bottom: 1px solid rgba(18,22,28,.08); }
.crm-dot { width: 11px; height: 11px; border-radius: 50%; background: #d6dade; }
.crm-dot:nth-child(1){ background:#ff5f57; } .crm-dot:nth-child(2){ background:#febc2e; } .crm-dot:nth-child(3){ background:#28c840; }
.crm-url { margin-left: 14px; flex: 1; background: #fff; border: 1px solid rgba(18,22,28,.1); border-radius: 8px; padding: 5px 12px; font-size: .76rem; color: #6b7280; letter-spacing: .02em; }
.crm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 12px; flex-wrap: wrap; }
.crm-title { font-family: var(--font-display); text-transform: uppercase; font-size: 1.1rem; color: #11151a; display: flex; align-items: center; gap: 12px; }
.crm-badge { font-family: 'Outfit', sans-serif; text-transform: none; font-size: .68rem; font-weight: 600; color: #fff; background: linear-gradient(120deg,#F26A21,#EF4E5F); border-radius: 100px; padding: 3px 10px; letter-spacing: .02em; }
.crm-filter { font-family: 'Outfit', sans-serif; font-size: .72rem; color: #475569; background:#eef1f4; border:1px solid rgba(18,22,28,.08); border-radius:100px; padding:5px 12px; display:inline-flex; gap:7px; align-items:center; }
.crm-filter::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--orange); }
.crm-cols { display: grid; grid-template-columns: 1.6fr 1.3fr 1fr .9fr; gap: 12px; padding: 8px 20px; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: #9aa1a9; border-bottom: 1px solid rgba(18,22,28,.07); }
.crm-rows { position: relative; padding: 6px 0 8px; }
.crm-row { display: grid; grid-template-columns: 1.6fr 1.3fr 1fr .9fr; gap: 12px; align-items: center; padding: 0 20px; height: 56px; position: relative; z-index: 1; }
.crm-row + .crm-row { border-top: 1px solid rgba(18,22,28,.05); }
.crm-name { display: flex; align-items: center; gap: 11px; font-weight: 600; color: #1b2430; font-size: .92rem; }
.crm-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: .68rem; font-weight: 700; flex-shrink: 0; background: linear-gradient(135deg,#F26A21,#EF4E5F); }
.crm-tag { font-size: .75rem; font-weight: 600; color: #b45309; background: rgba(242,106,33,.1); border: 1px solid rgba(242,106,33,.22); border-radius: 100px; padding: 4px 11px; justify-self: start; white-space: nowrap; }
.crm-verified { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; color: #0f9d58; }
.crm-verified svg { width: 15px; height: 15px; }
.crm-stage { font-size: .76rem; font-weight: 600; }
.crm-stage.new { color: #2563eb; } .crm-stage.booked { color: #0f9d58; } .crm-stage.contacted { color: #b45309; }

.crm-hl { position: absolute; left: 8px; right: 8px; top: 6px; height: 56px; border-radius: 10px; z-index: 0; will-change: transform;
  background: rgba(242,106,33,.1); border: 1px solid rgba(242,106,33,.28); box-shadow: 0 8px 22px -10px rgba(242,106,33,.6);
  animation: crmHl 9s ease-in-out infinite; }
@keyframes crmHl {
  0%,12% { transform: translateY(0); } 16%,30% { transform: translateY(56px); }
  34%,48% { transform: translateY(112px); } 52%,66% { transform: translateY(168px); }
  70%,84% { transform: translateY(224px); } 88%,100% { transform: translateY(0); }
}
.crm-cursor { position: absolute; left: 62%; top: 22px; width: 22px; height: 22px; z-index: 3; pointer-events: none; will-change: transform;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); animation: crmCursor 9s ease-in-out infinite; }
.crm-cursor svg { width: 100%; height: 100%; display: block; }
@keyframes crmCursor {
  0%,12% { transform: translate(0,0); } 16%,30% { transform: translate(-10px,56px); }
  34%,48% { transform: translate(8px,112px); } 52%,66% { transform: translate(-6px,168px); }
  70%,84% { transform: translate(10px,224px); } 88%,100% { transform: translate(0,0); }
}
.crm-cursor::after { content:""; position:absolute; left:-7px; top:-3px; width:26px; height:26px; border-radius:50%;
  border:2px solid rgba(242,106,33,.7); opacity:0; animation: crmClick 1.9s ease-out infinite; }
@keyframes crmClick { 0% { opacity:.7; transform: scale(.45); } 65%,100% { opacity:0; transform: scale(1.5); } }

@media (max-width: 600px) {
  .crm-win { transform: none; }
  .crm-cols, .crm-row { grid-template-columns: 1.5fr 1.15fr .8fr; }
  .crm-cols span:nth-child(4), .crm-row .crm-stage { display: none; }
  .crm-url { display: none; }
  .crm-name { font-size: .82rem; } .crm-av { width: 26px; height: 26px; }
  .crm-tag { font-size: .68rem; padding: 3px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .crm-hl, .crm-cursor, .crm-cursor::after { animation: none !important; }
}

/* ============================================================
   Live-call coaching demo (Done With You) — softphone + live coach cues
   ============================================================ */
.call-demo { max-width: 940px; margin: 50px auto 0; perspective: 1500px; }
.call-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 22px 10px; flex-wrap: wrap; }
.call-who { display: flex; align-items: center; gap: 12px; }
.call-av { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: .78rem; background: linear-gradient(135deg,#F26A21,#EF4E5F); flex-shrink: 0; }
.call-who b { display: block; color: #11151a; font-size: 1rem; }
.call-who .call-tag { font-size: .72rem; font-weight: 600; color: #b45309; }
.call-status { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 600; color: #0f9d58; }
.call-live { width: 9px; height: 9px; border-radius: 50%; background: #28c840; animation: callLive 1.6s ease-out infinite; }
@keyframes callLive { 0% { box-shadow: 0 0 0 0 rgba(40,200,64,.5); } 70%,100% { box-shadow: 0 0 0 8px rgba(40,200,64,0); } }
.call-wave { display: flex; align-items: center; justify-content: center; gap: 4px; height: 44px; padding: 0 22px 8px; }
.call-wave i { width: 4px; height: 100%; border-radius: 4px; background: linear-gradient(180deg,#F26A21,#EF4E5F); transform: scaleY(.28); transform-origin: center; animation: callWave 1.1s ease-in-out infinite; }
.call-wave i:nth-child(2n){ animation-delay:.12s; } .call-wave i:nth-child(3n){ animation-delay:.28s; }
.call-wave i:nth-child(5n){ animation-delay:.42s; } .call-wave i:nth-child(7n){ animation-delay:.18s; }
.call-wave i:nth-child(4n){ animation-duration:.85s; } .call-wave i:nth-child(odd){ animation-duration:1.25s; }
@keyframes callWave { 0%,100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
.call-panel { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(18,22,28,.07); }
.call-script { padding: 16px 20px; border-right: 1px solid rgba(18,22,28,.07); }
.call-steplabel, .call-coachlabel { font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: #9aa1a9; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.call-steps { position: relative; }
.call-step { height: 44px; display: flex; align-items: center; padding: 0 14px; position: relative; z-index: 1; font-size: .86rem; font-weight: 500; color: #475569; }
.call-hl { position: absolute; left: 0; right: 0; top: 0; height: 44px; border-radius: 9px; z-index: 0; will-change: transform;
  background: rgba(242,106,33,.1); border: 1px solid rgba(242,106,33,.28); animation: callStep 12s ease-in-out infinite; }
@keyframes callStep { 0%,21% { transform: translateY(0); } 25%,46% { transform: translateY(44px); } 50%,71% { transform: translateY(88px); } 75%,96% { transform: translateY(132px); } 100% { transform: translateY(0); } }
.call-coachwrap { padding: 16px 20px; }
.coach-badge { font-size: .6rem; font-weight: 700; letter-spacing: .04em; color: #fff; background: linear-gradient(120deg,#F26A21,#EF4E5F); border-radius: 100px; padding: 3px 9px; }
.call-coachstack { position: relative; min-height: 92px; }
.call-coach { position: absolute; inset: 0; display: flex; align-items: center; gap: 11px; padding: 14px 16px; border-radius: 12px;
  background: #fff7f1; border: 1px solid rgba(242,106,33,.22); box-shadow: 0 12px 26px -16px rgba(242,106,33,.55);
  font-size: .88rem; line-height: 1.4; color: #6a431f; opacity: 0; will-change: opacity, transform; animation: coachPop 12s ease-in-out infinite; }
.call-coach::before { content: ""; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 0 3px rgba(242,106,33,.14); }
@keyframes coachPop { 0% { opacity: 0; transform: translateY(10px) scale(.97); } 4% { opacity: 1; transform: none; } 21% { opacity: 1; } 25%,100% { opacity: 0; transform: translateY(-8px); } }

@media (max-width: 600px) {
  .call-panel { grid-template-columns: 1fr; }
  .call-script { border-right: none; border-bottom: 1px solid rgba(18,22,28,.07); }
}
@media (prefers-reduced-motion: reduce) {
  .call-wave i, .call-hl, .call-coach, .call-live { animation: none !important; }
  .call-coach:first-child { opacity: 1; }
}

/* ============================================================
   Animated pipeline (Done For You) — a comet flows a rail, stages light in sequence
   ============================================================ */
.pipeflow { position: relative; max-width: 1080px; margin: 52px auto 0; padding: 0 6px; }
.pipe-rail { position: absolute; top: 27px; left: 9%; right: 9%; height: 3px; border-radius: 3px; z-index: 0;
  background: linear-gradient(90deg,#EF4E5F,#F2603C,#F47A2C,#F8962E,#FBB03B); opacity: .4; }
.pipe-comet { position: absolute; top: 50%; left: 0; transform: translate(-50%,-50%); width: 84px; height: 11px; border-radius: 11px;
  background: radial-gradient(closest-side, rgba(242,106,33,.95), rgba(242,106,33,0)); filter: blur(1px); animation: pipeComet 8s linear infinite; }
@keyframes pipeComet { 0% { left:-3%; opacity:0; } 7% { opacity:1; } 90% { opacity:1; } 100% { left:103%; opacity:0; } }
.pipe-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(5,1fr); gap: 16px; }
.pipe-stage { display: flex; flex-direction: column; align-items: center; text-align: center; --gc: var(--orange); }
.pipe-stage:nth-child(1){--gc:#EF4E5F;} .pipe-stage:nth-child(2){--gc:#F2603C;} .pipe-stage:nth-child(3){--gc:#F47A2C;} .pipe-stage:nth-child(4){--gc:#F8962E;} .pipe-stage:nth-child(5){--gc:#FBB03B;}
.pipe-node { width: 54px; height: 54px; border-radius: 50%; border: 2px solid var(--gc); color: var(--gc);
  display: grid; place-items: center; font-family: var(--font-display); font-size: 1.3rem; margin-bottom: 20px;
  background: var(--bg); position: relative; z-index: 2; will-change: transform; animation: pipeNode 8s ease-in-out infinite; }
@keyframes pipeNode {
  0%,100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; }
  4%,14% { transform: scale(1.14); box-shadow: 0 0 26px -2px var(--gc); background: var(--gc); color: #fff; }
}
.pipe-card { width: 100%; flex: 1; display: flex; flex-direction: column; justify-content: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 16px;
  box-shadow: 0 16px 40px -32px rgba(0,0,0,.5); will-change: transform; animation: pipeCard 8s ease-in-out infinite; }
.pipe-card h3 { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: .01em; font-size: 1rem; margin-bottom: 7px; color: var(--text); }
.pipe-card p { font-size: .84rem; color: var(--muted); line-height: 1.5; }
@keyframes pipeCard {
  0%,100% { transform: translateY(0); border-color: var(--line); box-shadow: 0 16px 40px -32px rgba(0,0,0,.5); }
  4%,14% { transform: translateY(-8px); border-color: var(--gc); box-shadow: 0 26px 54px -26px var(--gc); }
}
.pipe-stage:nth-child(1) .pipe-node, .pipe-stage:nth-child(1) .pipe-card { animation-delay: 0s; }
.pipe-stage:nth-child(2) .pipe-node, .pipe-stage:nth-child(2) .pipe-card { animation-delay: 1.6s; }
.pipe-stage:nth-child(3) .pipe-node, .pipe-stage:nth-child(3) .pipe-card { animation-delay: 3.2s; }
.pipe-stage:nth-child(4) .pipe-node, .pipe-stage:nth-child(4) .pipe-card { animation-delay: 4.8s; }
.pipe-stage:nth-child(5) .pipe-node, .pipe-stage:nth-child(5) .pipe-card { animation-delay: 6.4s; }

@media (max-width: 760px) {
  .pipe-rail, .pipe-comet { display: none; }
  .pipe-grid { grid-template-columns: 1fr; gap: 12px; }
  .pipe-grid::before { content:""; position:absolute; left:27px; top:28px; bottom:28px; width:3px; border-radius:3px;
    background: linear-gradient(180deg,#EF4E5F,#F2603C,#F47A2C,#F8962E,#FBB03B); opacity:.32; }
  .pipe-stage { flex-direction: row; align-items: flex-start; text-align: left; gap: 16px; }
  .pipe-node { margin-bottom: 0; flex-shrink: 0; }
}
@media (prefers-reduced-motion: reduce) { .pipe-comet, .pipe-node, .pipe-card { animation: none !important; } }

/* ============================================================
   Live operations screen (Done For You) — a zooming camera over a live pipeline
   ============================================================ */
.ops-demo { max-width: 960px; margin: 50px auto 0; perspective: 1600px; }
.ops-screen { position: relative; overflow: hidden; background: #fff; }
.ops-cam { position: relative; width: max-content; transform-origin: 50% 50%; --opsz: 1.9; animation: opsCam 30s ease-in-out infinite; }
@keyframes opsCam {
  0%, 4%   { transform-origin: 40% 30%; transform: scale(1); }            /* wide board */
  8%       { transform-origin: 4% 24%;  transform: scale(1); }            /* reposition */
  12%, 30% { transform-origin: 4% 24%;  transform: scale(var(--opsz)); }  /* zoom card A (col 1, pushed left), notes A */
  34%      { transform-origin: 4% 24%;  transform: scale(1); }            /* out */
  38%      { transform-origin: 27% 24%; transform: scale(1); }            /* reposition */
  42%, 62% { transform-origin: 27% 24%; transform: scale(var(--opsz)); }  /* zoom card B (col 2), notes B */
  66%      { transform-origin: 27% 24%; transform: scale(1); }            /* out */
  70%      { transform-origin: 27% 50%; transform: scale(1); }            /* reposition */
  74%, 94% { transform-origin: 27% 50%; transform: scale(var(--opsz)); }  /* zoom card C (col 2, lower), notes C */
  100%     { transform-origin: 27% 50%; transform: scale(1); }            /* out */
}
.ops-feed { background: #fff; }
.ops-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 20px; }
.ops-row + .ops-row { border-top: 1px solid rgba(18,22,28,.06); }
.ops-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: .66rem; font-weight: 700; background: linear-gradient(135deg,#F26A21,#EF4E5F); }
.ops-main { min-width: 0; }
.ops-name { font-weight: 600; color: #1b2430; font-size: .9rem; display: flex; align-items: center; gap: 8px; }
.ops-dot { width: 8px; height: 8px; border-radius: 50%; background: #28c840; animation: callLive 1.5s ease-out infinite; flex-shrink: 0; }
.ops-sub { font-size: .78rem; color: #6b7280; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ops-badge { font-size: .64rem; font-weight: 700; padding: 4px 10px; border-radius: 100px; white-space: nowrap; }
.ops-badge.call { color: #b45309; background: rgba(242,106,33,.12); }
.ops-badge.book { color: #0f9d58; background: rgba(15,157,88,.12); }
.ops-badge.qual { color: #2563eb; background: rgba(37,99,235,.12); }
.ops-badge.note { color: #7c3aed; background: rgba(124,58,237,.12); }
.ops-wave { display: inline-flex; gap: 2px; align-items: center; height: 13px; }
.ops-wave i { width: 2.5px; height: 100%; border-radius: 2px; background: #F26A21; transform: scaleY(.3); animation: callWave 1s ease-in-out infinite; }
.ops-wave i:nth-child(2n){ animation-delay:.15s; } .ops-wave i:nth-child(3n){ animation-delay:.3s; } .ops-wave i:nth-child(odd){ animation-duration:.8s; }
.ops-type { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; max-width: 100%;
  border-right: 2px solid #F26A21; width: 0; animation: opsType 7s steps(36) infinite, opsCaret .75s step-end infinite; }
@keyframes opsType { 0% { width: 0; } 55% { width: 40ch; } 92% { width: 40ch; } 100% { width: 0; } }
@keyframes opsCaret { 50% { border-color: transparent; } }
.ops-toasts { position: absolute; top: 14px; right: 14px; width: 250px; height: 58px; z-index: 6; pointer-events: none; }
.ops-toast { position: absolute; inset: 0; display: flex; align-items: center; gap: 11px; background: #fff; border: 1px solid rgba(18,22,28,.1);
  border-radius: 12px; box-shadow: 0 16px 34px -16px rgba(18,22,28,.45); padding: 10px 13px; opacity: 0; transform: translateX(18px); animation: opsToast 9s ease-in-out infinite; }
.ops-toast .tico { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.ops-toast .tico svg { width: 17px; height: 17px; }
.ops-toast.book .tico { background: linear-gradient(135deg,#0f9d58,#28c840); }
.ops-toast.sms .tico { background: linear-gradient(135deg,#2563eb,#3b82f6); }
.ops-toast.note .tico { background: linear-gradient(135deg,#7c3aed,#a855f7); }
.ops-toast b { display: block; font-size: .82rem; color: #11151a; }
.ops-toast span { font-size: .71rem; color: #6b7280; }
@keyframes opsToast { 0% { opacity:0; transform: translateX(18px); } 3% { opacity:1; transform: none; } 25% { opacity:1; transform: none; } 30% { opacity:0; transform: translateX(18px); } 100% { opacity:0; } }

@media (max-width: 600px) { .ops-toasts { width: 200px; } .ops-sub { font-size: .72rem; } }
@media (prefers-reduced-motion: reduce) {
  .ops-cam, .ops-wave i, .ops-dot, .ops-type, .ops-toast { animation: none !important; }
  .ops-type { width: auto; border-right: none; } .ops-toast:first-child { opacity: 1; }
}

/* GHL-style Kanban board inside the operations screen */
.ghl { display: flex; background: #fbfbfc; }
.ghl-side { width: 50px; flex-shrink: 0; background: #fff; border-right: 1px solid rgba(18,22,28,.08); display: flex; flex-direction: column; align-items: center; gap: 13px; padding: 14px 0; }
.ghl-logo { width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(135deg,#F26A21,#EF4E5F); }
.ghl-ni { width: 22px; height: 22px; border-radius: 6px; background: rgba(18,22,28,.1); }
.ghl-ni.on { background: #2563eb; }
.ghl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ghl-top { display: flex; align-items: center; gap: 11px; padding: 11px 16px; border-bottom: 1px solid rgba(18,22,28,.07); background: #fff; flex-wrap: wrap; }
.ghl-top b { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: .95rem; color: #11151a; }
.ghl-pill { font-size: .74rem; color: #374151; background: #f3f4f6; border: 1px solid rgba(18,22,28,.1); border-radius: 8px; padding: 5px 11px; }
.ghl-count { font-size: .72rem; color: #2563eb; font-weight: 600; }
.ghl-add { margin-left: auto; font-size: .72rem; font-weight: 700; color: #fff; background: #2563eb; border-radius: 8px; padding: 7px 12px; }
.ghl-board { display: flex; gap: 12px; padding: 14px; align-items: flex-start; }
.ghl-col { width: 180px; flex-shrink: 0; background: #f3f5f7; border: 1px solid rgba(18,22,28,.06); border-radius: 10px; padding: 8px; }
.ghl-colhead { padding: 5px 6px 11px; }
.ghl-colhead b { display: block; font-size: .74rem; color: #1f2937; font-weight: 700; }
.ghl-colhead span { font-size: .66rem; color: #9aa1a9; }
.ghl-card { background: #fff; border: 1px solid rgba(18,22,28,.1); border-radius: 8px; padding: 11px 12px; margin-bottom: 8px; box-shadow: 0 1px 2px rgba(18,22,28,.06); }
.ghl-cardtop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ghl-name { font-size: .82rem; font-weight: 600; color: #1f2937; }
.ghl-av { width: 22px; height: 22px; border-radius: 50%; background: #eef1f4; border: 1px solid rgba(18,22,28,.12); flex-shrink: 0; }
.ghl-val { font-size: .72rem; color: #b45309; font-weight: 600; margin: 8px 0 10px; }
.ghl-icons { display: flex; align-items: center; gap: 10px; color: #9aa1a9; }
.ghl-icons .gi { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ghl-badge { background: #2563eb; color: #fff; font-size: .56rem; font-weight: 700; border-radius: 100px; min-width: 15px; height: 15px; display: grid; place-items: center; padding: 0 4px; margin-left: 2px; }
@media (max-width: 700px) { .ghl-side { display: none; } .ghl-col { width: 160px; } }

/* in-cam cursor that clicks the notes icon of the focused card */
.ops-cur { position: absolute; width: 19px; height: 19px; z-index: 4; pointer-events: none; opacity: 0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); animation: opsCur 30s linear infinite; }
.ops-cur svg { width: 100%; height: 100%; display: block; }
.ops-cur::after { content: ""; position: absolute; left: -6px; top: -5px; width: 25px; height: 25px; border-radius: 50%;
  border: 2px solid rgba(37,99,235,.85); opacity: 0; animation: opsCurClick 2.2s ease-out infinite; }
@keyframes opsCurClick { 0% { opacity: .75; transform: scale(.45); } 60%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes opsCur {
  0%, 9% { left: 9%; top: 33%; opacity: 0; }
  11%, 30% { left: 9%; top: 33%; opacity: 1; }
  33% { left: 9%; top: 33%; opacity: 0; }
  37% { left: 28%; top: 33%; opacity: 0; }
  39%, 62% { left: 28%; top: 33%; opacity: 1; }
  65% { left: 28%; top: 33%; opacity: 0; }
  69% { left: 28%; top: 59%; opacity: 0; }
  71%, 94% { left: 28%; top: 59%; opacity: 1; }
  97%, 100% { left: 28%; top: 59%; opacity: 0; }
}

/* GHL-style notes drawer sliding in from the right while a card is open */
.ops-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: 46%; max-width: 320px; z-index: 5; background: #fff;
  border-left: 1px solid rgba(18,22,28,.12); box-shadow: -24px 0 50px -24px rgba(18,22,28,.35);
  transform: translateX(101%); animation-duration: 30s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.ops-drawer.d1 { animation-name: opd1; } .ops-drawer.d2 { animation-name: opd2; } .ops-drawer.d3 { animation-name: opd3; }
@keyframes opd1 { 0%,14% { transform: translateX(101%); } 18%,30% { transform: translateX(0); } 34%,100% { transform: translateX(101%); } }
@keyframes opd2 { 0%,44% { transform: translateX(101%); } 48%,62% { transform: translateX(0); } 66%,100% { transform: translateX(101%); } }
@keyframes opd3 { 0%,74% { transform: translateX(101%); } 78%,94% { transform: translateX(0); } 98%,100% { transform: translateX(101%); } }
@keyframes opd1m { 0%,14% { transform: translateY(101%); } 18%,30% { transform: translateY(0); } 34%,100% { transform: translateY(101%); } }
@keyframes opd2m { 0%,44% { transform: translateY(101%); } 48%,62% { transform: translateY(0); } 66%,100% { transform: translateY(101%); } }
@keyframes opd3m { 0%,74% { transform: translateY(101%); } 78%,94% { transform: translateY(0); } 98%,100% { transform: translateY(101%); } }
.opd-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid rgba(18,22,28,.08); }
.opd-av { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg,#F26A21,#EF4E5F); flex-shrink: 0; }
.opd-head b { display: block; font-size: .86rem; color: #11151a; }
.opd-head span { font-size: .7rem; color: #9aa1a9; }
.opd-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 9px; }
.opd-saved { font-size: .76rem; color: #6b7280; background: #f3f5f7; border-radius: 8px; padding: 8px 11px; }
.opd-live { font-size: .8rem; color: #11151a; background: #fff7f1; border: 1px solid rgba(242,106,33,.25); border-radius: 8px; padding: 9px 11px; min-height: 40px; }

/* iPhone-style glassmorphism notifications, sliding up from the bottom (less frequent) */
.ios-note { position: absolute; left: 50%; bottom: 16px; width: min(80%, 350px); z-index: 8; pointer-events: none;
  display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 22px;
  background: rgba(250,250,252,.55); backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6);
  border: 1px solid rgba(255,255,255,.55); box-shadow: 0 22px 50px -18px rgba(18,22,28,.5);
  opacity: 0; transform: translate(-50%, 34px); animation: iosNote 30s ease-in-out infinite; }
.ios-ic { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; color: #fff; }
.ios-ic svg { width: 20px; height: 20px; }
.ios-ic.sms { background: linear-gradient(180deg,#3ad44f,#1eb83c); }
.ios-ic.cal { background: linear-gradient(180deg,#ff6157,#e23b34); }
.ios-note b { display: block; font-size: .84rem; color: #11151a; }
.ios-note .msg { font-size: .77rem; color: #3a3f47; line-height: 1.35; }
.ios-note .t { margin-left: auto; align-self: flex-start; font-size: .66rem; color: #7a818b; }
@keyframes iosNote {
  0% { opacity: 0; transform: translate(-50%, 34px); }
  3% { opacity: 1; transform: translate(-50%, 0); }
  15% { opacity: 1; transform: translate(-50%, 0); }
  20% { opacity: 0; transform: translate(-50%, 34px); }
  100% { opacity: 0; transform: translate(-50%, 34px); }
}
@keyframes iosNoteTop {
  0% { opacity: 0; transform: translate(-50%, -34px); }
  3% { opacity: 1; transform: translate(-50%, 0); }
  15% { opacity: 1; transform: translate(-50%, 0); }
  20% { opacity: 0; transform: translate(-50%, -34px); }
  100% { opacity: 0; transform: translate(-50%, -34px); }
}
@media (prefers-reduced-motion: reduce) {
  .ops-cur, .ops-drawer, .ios-note { animation: none !important; }
  .ops-drawer { transform: translateX(101%); }
}

/* operations / GHL board — mobile tuning (gentler zoom, tidy header, readable drawer) */
@media (max-width: 640px) {
  .ops-cam { --opsz: 1.5; }
  .ghl-top { gap: 8px; padding: 10px 12px; }
  .ghl-top b { font-size: .85rem; }
  .ghl-pill, .ghl-count { display: none; }
  .ghl-add { padding: 6px 10px; font-size: .68rem; }
  .ghl-col { width: 150px; }
  .ghl-name { font-size: .8rem; } .ghl-val { font-size: .7rem; }
  .ops-drawer { top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-width: none; height: 46%;
    border-left: none; border-top: 1px solid rgba(18,22,28,.12); box-shadow: 0 -22px 44px -22px rgba(18,22,28,.3); transform: translateY(101%); }
  .ops-drawer.d1 { animation-name: opd1m; } .ops-drawer.d2 { animation-name: opd2m; } .ops-drawer.d3 { animation-name: opd3m; }
  .opd-head { padding: 12px 13px; } .opd-body { padding: 12px 13px; gap: 8px; }
  .opd-saved { font-size: .72rem; } .opd-live { font-size: .76rem; }
  .ios-note { top: 14px; bottom: auto; animation-name: iosNoteTop; width: 90%; padding: 10px 12px; border-radius: 18px; }
  .ios-note .msg { font-size: .74rem; }
  .ios-ic { width: 34px; height: 34px; }
}
@media (max-width: 400px) {
  .ops-cam { --opsz: 1.4; }
  .ghl-col { width: 142px; }
  .ops-drawer { width: 68%; }
}

/* ============================================================
   THE 3 KEYS — deep-dive helpers
   ============================================================ */
/* numbered key deep-dive header */
.key-deep { display: grid; grid-template-columns: auto 1fr; gap: clamp(18px,3vw,40px); align-items: start; }
.key-deep .kd-num { font-family: var(--font-display); font-weight: 800; line-height: 1; padding-bottom: .1em;
  font-size: clamp(3.4rem, 9vw, 6.2rem);
  background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.key-deep .kd-tag { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .12em;
  font-size: .8rem; color: var(--orange); display: block; margin-bottom: 6px; }
.key-deep h2 { margin-bottom: 14px; }
.key-deep p { color: var(--muted); }
.key-deep p + p { margin-top: 14px; }
.key-deep b { color: var(--text); }
@media (max-width: 720px){ .key-deep { grid-template-columns: 1fr; gap: 6px; } .key-deep .kd-num { font-size: 3rem; } }

/* "this one's on us / we accelerate / you, coached" pill */
.key-own { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 8px 15px;
  border-radius: 99px; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em;
  font-size: .76rem; background: rgba(242,106,33,.1); border: 1px solid rgba(242,106,33,.28); color: var(--orange); }
.key-own svg { width: 15px; height: 15px; }

/* ---- Speed-to-lead interactive slider (Key 02) ---- */
.speed { max-width: 720px; margin: 0 auto; position: relative; z-index: 1;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(24px,3.4vw,38px); box-shadow: 0 26px 60px -38px rgba(18,22,28,.5); }
.speed-readout { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.speed-time { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em;
  font-size: clamp(1.2rem,3vw,1.7rem); color: var(--text); }
.speed-state { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .08em;
  font-size: .95rem; padding: 5px 13px; border-radius: 99px; transition: color .3s, background .3s; }
.speed-state[data-lvl="0"]{ color:#15803d; background:rgba(22,163,74,.12); }
.speed-state[data-lvl="1"]{ color:#65a30d; background:rgba(132,204,22,.14); }
.speed-state[data-lvl="2"]{ color:#d97706; background:rgba(217,119,6,.14); }
.speed-state[data-lvl="3"]{ color:#ea580c; background:rgba(234,88,12,.14); }
.speed-state[data-lvl="4"]{ color:#dc2626; background:rgba(220,38,38,.13); }
.speed-meter { height: 12px; border-radius: 99px; background: rgba(18,22,28,.08); overflow: hidden; margin-bottom: 18px; }
.speed-meter i { display: block; height: 100%; border-radius: 99px; width: 100%;
  background: linear-gradient(90deg, #16a34a, #84cc16 32%, #f59e0b 64%, #ef4444);
  transition: width .45s var(--ease); }
.speed-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 99px;
  background: rgba(18,22,28,.14); outline: none; cursor: pointer; }
.speed-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 30px; height: 30px;
  border-radius: 50%; background: var(--orange); border: 4px solid #fff; cursor: grab;
  box-shadow: 0 4px 14px -3px rgba(242,106,33,.85), 0 0 0 0 rgba(242,106,33,.5);
  animation: dragPulse 1.7s ease-in-out infinite; }
.speed-range:active::-webkit-slider-thumb { cursor: grabbing; }
.speed-range::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--orange);
  border: 4px solid #fff; cursor: grab; box-shadow: 0 4px 14px -3px rgba(242,106,33,.85);
  animation: dragPulse 1.7s ease-in-out infinite; }
.speed.touched .speed-range::-webkit-slider-thumb, .speed.touched .speed-range::-moz-range-thumb { animation: none; }
@keyframes dragPulse {
  0%, 100% { box-shadow: 0 4px 14px -3px rgba(242,106,33,.85), 0 0 0 0 rgba(242,106,33,.5); }
  50% { box-shadow: 0 4px 14px -3px rgba(242,106,33,.85), 0 0 0 9px rgba(242,106,33,0); }
}
/* ticks aligned to the thumb's real travel: it is inset by half the thumb width
   (~15px) at each end, so the inner ticks sit at calc(15px + (100% - 30px) * f) */
.speed-ticks { position: relative; height: 1.15em; margin-top: 10px; }
.speed-ticks span { position: absolute; top: 0; font-size: .72rem; color: var(--muted-2); letter-spacing: .02em; white-space: nowrap; }
.speed-ticks span:nth-child(1) { left: 0; }
.speed-ticks span:nth-child(2) { left: calc(15px + (100% - 30px) * 0.25); transform: translateX(-50%); }
.speed-ticks span:nth-child(3) { left: calc(15px + (100% - 30px) * 0.5);  transform: translateX(-50%); }
.speed-ticks span:nth-child(4) { left: calc(15px + (100% - 30px) * 0.75); transform: translateX(-50%); }
.speed-ticks span:nth-child(5) { right: 0; }
.speed-note { margin-top: 18px; font-size: 1rem; line-height: 1.55; color: var(--text);
  min-height: 3.4em; }
.speed-hint { margin: 16px auto 0; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px;
  border-radius: 99px; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em;
  font-size: .8rem; color: var(--orange); background: rgba(242,106,33,.1); border: 1px solid rgba(242,106,33,.3);
  transition: opacity .3s; }
.speed-hint svg { width: 17px; height: 17px; animation: dragHand 1.4s ease-in-out infinite; }
.speed-hint-wrap { text-align: center; }
@keyframes dragHand { 0%,100% { transform: translateX(-3px); } 50% { transform: translateX(5px); } }

/* ============================================================
   OBJECTION-HANDLING QUIZ (Key 03 roleplay)
   ============================================================ */
.quiz { max-width: 760px; margin: 0 auto; position: relative; z-index: 1;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(22px,3.4vw,40px); box-shadow: 0 26px 64px -38px rgba(18,22,28,.55); }
.quiz-head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.quiz-step { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .08em;
  font-size: .82rem; color: var(--muted); white-space: nowrap; }
.quiz-step b { color: var(--orange); }
.quiz-bar { flex: 1; height: 6px; border-radius: 99px; background: rgba(18,22,28,.1); overflow: hidden; }
.quiz-bar i { display: block; height: 100%; width: 33%; border-radius: 99px;
  background: linear-gradient(90deg, #EF4E5F, #F47A2C, #FBB03B); transition: width .5s var(--ease); }

.qz-instruct { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; padding: 13px 16px;
  border-radius: 13px; background: rgba(242,106,33,.08); border: 1.5px dashed rgba(242,106,33,.45);
  font-size: .95rem; line-height: 1.45; color: var(--text); }
.qz-instruct svg { width: 22px; height: 22px; color: var(--orange); flex-shrink: 0; }
.qz-instruct b { color: var(--orange); }
.quiz.complete .qz-instruct { display: none; }

.qz-card { display: none; }
.qz-card.active { display: block; animation: qzIn .42s var(--ease); }
/* pulsing radio circle on each option = "pick this" before it is answered */
.qz-opt::after { content: ""; position: absolute; right: 15px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(242,106,33,.55);
  box-shadow: 0 0 0 0 rgba(242,106,33,.45); animation: qzPick 1.8s ease-in-out infinite; }
.qz-card.answered .qz-opt::after { display: none; }
@keyframes qzPick { 0%,100% { box-shadow: 0 0 0 0 rgba(242,106,33,.45); } 50% { box-shadow: 0 0 0 7px rgba(242,106,33,0); } }
@keyframes qzIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.qz-who { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; color: var(--muted);
  font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; font-family: var(--font-display); }
.qz-who .qz-av { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg,#EF4E5F,#FBB03B); display: grid; place-items: center; color: #fff; }
.qz-who .qz-av svg { width: 17px; height: 17px; }
.qz-bubble { position: relative; background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 4px 16px 16px 16px; padding: 16px 18px; font-size: clamp(1.06rem,2.2vw,1.34rem);
  font-weight: 500; line-height: 1.42; color: var(--text); }
.qz-prompt { margin: 20px 2px 14px; font-weight: 600; color: var(--text); }

.qz-opts { display: grid; gap: 12px; }
.qz-opt { text-align: left; width: 100%; cursor: pointer; font: inherit; color: var(--text);
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 14px;
  padding: 15px 46px 15px 52px; position: relative; line-height: 1.45;
  transition: border-color .2s, background .2s, transform .14s, box-shadow .2s; }
.qz-card.answered .qz-opt { padding-right: 16px; }
.qz-opt:hover { border-color: rgba(242,106,33,.55); transform: translateY(-1px); box-shadow: 0 12px 28px -20px rgba(18,22,28,.6); }
.qz-letter { position: absolute; left: 13px; top: 13px; width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center; font-family: var(--font-display); font-size: .9rem;
  background: var(--bg-2); color: var(--muted); border: 1px solid var(--line); transition: all .2s; }
.qz-verdict { display: none; align-items: center; gap: 6px; margin-top: 9px; font-size: .82rem;
  font-weight: 700; letter-spacing: .03em; text-transform: uppercase; font-family: var(--font-display); }
.qz-verdict svg { width: 15px; height: 15px; }

/* answered states */
.qz-card.answered .qz-opt { cursor: default; }
.qz-card.answered .qz-opt:hover { transform: none; box-shadow: none; }
.qz-card.answered .qz-opt { border-color: var(--line); }
.qz-card.answered .qz-opt.is-best { border-color: #16a34a; background: rgba(22,163,74,.07); }
.qz-card.answered .qz-opt.is-best .qz-letter { background: #16a34a; color: #fff; border-color: #16a34a; }
.qz-card.answered .qz-opt.is-best .qz-verdict { display: inline-flex; color: #15803d; }
.qz-opt.is-weak.chosen { border-color: #e0a106; background: rgba(224,161,6,.07); }
.qz-opt.is-weak.chosen .qz-letter { background: #e0a106; color: #fff; border-color: #e0a106; }
.qz-opt.is-weak.chosen .qz-verdict { display: inline-flex; color: #b45309; }
.qz-card.answered .qz-opt:not(.is-best):not(.chosen) { opacity: .5; }

.qz-coach { display: none; margin-top: 20px; padding: 16px 18px; border-radius: 14px;
  background: linear-gradient(160deg, rgba(242,106,33,.09), rgba(251,176,59,.05));
  border: 1px solid rgba(242,106,33,.24); }
.qz-card.answered .qz-coach { display: block; animation: qzIn .42s var(--ease); }
.qz-coach-h { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em;
  font-size: .8rem; color: var(--orange); margin-bottom: 7px; display: flex; align-items: center; gap: 7px; }
.qz-coach-h svg { width: 16px; height: 16px; }
.qz-coach p { font-size: .98rem; line-height: 1.58; color: var(--text); margin: 0; }

.qz-next { display: none; margin-top: 22px; }
.qz-card.answered .qz-next { display: inline-flex; }

.qz-done { display: none; text-align: center; padding: 6px 0; }
.quiz.complete .qz-stage, .quiz.complete .quiz-head { display: none; }
.quiz.complete .qz-done { display: block; animation: qzIn .5s var(--ease); }
.qz-done .qz-trophy { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 18px;
  display: grid; place-items: center; color: #fff; background: linear-gradient(135deg,var(--orange),#FBB03B);
  box-shadow: 0 14px 36px -12px rgba(242,106,33,.7); }
.qz-done .qz-trophy svg { width: 30px; height: 30px; }
.qz-done h3 { margin-bottom: 12px; }
.qz-done p { color: var(--muted); max-width: 520px; margin: 0 auto; line-height: 1.6; }
.qz-restart { margin-top: 22px; }
@media (prefers-reduced-motion: reduce) {
  .qz-card.active, .quiz.complete .qz-done, .qz-card.answered .qz-coach,
  .qz-opt::after, .speed-range::-webkit-slider-thumb, .speed-range::-moz-range-thumb, .speed-hint svg { animation: none; }
}
#quiz { scroll-margin-top: 96px; }

/* ---- Home-page quiz CTA banner ---- */
.quiz-cta { display: flex; align-items: center; gap: clamp(16px,2.4vw,24px); text-decoration: none; color: var(--text);
  padding: clamp(20px,3vw,30px) clamp(22px,3.5vw,38px); border-radius: var(--r-lg); position: relative; overflow: hidden;
  background: linear-gradient(120deg, rgba(242,106,33,.14), rgba(251,176,59,.07));
  border: 1px solid rgba(242,106,33,.3); box-shadow: 0 20px 50px -34px rgba(242,106,33,.6);
  transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.quiz-cta:hover { transform: translateY(-4px); box-shadow: 0 28px 64px -28px rgba(242,106,33,.72); border-color: var(--orange); }
.qc-icon { flex-shrink: 0; width: 60px; height: 60px; border-radius: 30%; display: grid; place-items: center; position: relative; overflow: hidden;
  color: var(--orange); background: linear-gradient(150deg, rgba(255,255,255,.94), rgba(255,233,221,.7));
  border: 1px solid rgba(242,106,33,.24);
  box-shadow: 0 14px 30px -14px rgba(242,106,33,.6), inset 0 1.5px 1.5px rgba(255,255,255,.95), inset 0 -9px 16px -11px rgba(242,106,33,.2); }
.qc-icon::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 55%; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,0)); }
.qc-icon svg { position: relative; z-index: 1; width: 34px; height: 34px; }
.qc-text { flex: 1; min-width: 0; }
.qc-kicker { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; color: var(--orange); }
.qc-text h3 { font-size: clamp(1.2rem,2.6vw,1.6rem); margin: 5px 0 7px; }
.qc-text p { color: var(--muted); font-size: .96rem; margin: 0; line-height: 1.5; }
.qc-go { flex-shrink: 0; display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em; color: var(--orange); }
.qc-go svg { width: 22px; height: 22px; animation: nudge 1.3s ease-in-out infinite; }
.quiz-cta:hover .qc-go svg { animation-duration: .6s; }
@media (max-width: 680px) {
  .quiz-cta { flex-direction: column; text-align: center; align-items: center; gap: 16px; }
}

/* ---- Cities coverage gallery (lives inside a dark-cell) ---- */
.cities { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.city { position: relative; margin: 0; border-radius: 16px; overflow: hidden; aspect-ratio: 3 / 4;
  border: 1px solid rgba(255,255,255,.12); }
.city img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.city::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 36%, rgba(8,6,5,.82)); }
.city figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 14px 10px;
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .05em; font-size: .95rem; color: #fff; text-align: center; }
.city:hover img { transform: scale(1.07); }
.city-more::after { background: linear-gradient(180deg, rgba(242,106,33,.22) 0%, rgba(8,6,5,.5) 55%, rgba(8,6,5,.86)); }
.city-more figcaption { color: var(--orange-soft); }
@media (max-width: 980px) { .cities { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .cities { grid-template-columns: repeat(2, 1fr); gap: 10px; } .city { aspect-ratio: 4 / 5; } .city figcaption { font-size: .9rem; padding: 12px 8px; } }

/* ---- Wide team photo band (our-team) ---- */
.team-band { aspect-ratio: 16 / 7; max-width: 100%; }
@media (max-width: 640px) { .team-band { aspect-ratio: 4 / 3; } }

/* ---- Testimonial photos: fill the .av circle, initials remain as fallback ---- */
.quote .who .av { position: relative; overflow: hidden; }
.quote .who .av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* avatars on the standalone pull / mini / big quotes */
.q-av { border-radius: 50%; object-fit: cover; border: 2px solid rgba(242,106,33,.5); flex-shrink: 0; background: var(--surface-2); }
.pull .q-av { width: 62px; height: 62px; display: block; margin: 0 auto 16px; }
.mini-quote cite, .big-quote cite { display: flex; align-items: center; gap: 11px; }
.mini-quote .q-av { width: 40px; height: 40px; }
.big-quote .q-av { width: 50px; height: 50px; }

/* ---- City photo behind a dark-cell ---- */
.dc-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
  opacity: .22; filter: grayscale(.4) blur(3px); transform: scale(1.06); }
.dark-cell > *:not(.dc-bg) { position: relative; z-index: 1; }

/* ============================================================
   TESTIMONIALS PAGE — grand treatment
   ============================================================ */
/* bigger hero + floating star motion */
.th-hero { position: relative; overflow: hidden; padding-top: clamp(60px,9vw,120px); }
.th-hero .wrap { position: relative; z-index: 1; }
.th-hero h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1.04; }
.th-hero .lead { font-size: clamp(1.06rem, 1.9vw, 1.4rem); max-width: 760px; }
.hero-stars { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-stars i { position: absolute; color: var(--orange); opacity: .16; animation: starFloat 7s ease-in-out infinite; }
.hero-stars i svg { width: 100%; height: 100%; display: block; fill: currentColor; }
@keyframes starFloat { 0%,100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-18px) rotate(8deg); } }

/* moving testimonial wall (two rows, opposite directions, pause on hover) */
.tmarquee { position: relative; overflow: hidden; padding: 9px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.tmarquee + .tmarquee { margin-top: 20px; }
.tmarquee-track { display: flex; gap: 20px; width: max-content; animation: tmScroll 52s linear infinite; will-change: transform; }
.tmarquee.rev .tmarquee-track { animation-direction: reverse; animation-duration: 64s; }
.tmarquee:hover .tmarquee-track { animation-play-state: paused; }
@keyframes tmScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tm-card { flex-shrink: 0; width: clamp(290px, 30vw, 380px); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 26px 28px; box-shadow: 0 14px 36px -30px rgba(18,22,28,.5);
  transition: transform .3s var(--ease), border-color .3s; }
.tm-card:hover { transform: translateY(-5px); border-color: var(--orange); }
.tm-card .stars { color: var(--gold, #FBB03B); letter-spacing: 2px; font-size: .92rem; margin-bottom: 12px; }
.tm-card p { font-size: 1.05rem; line-height: 1.5; color: var(--text); margin: 0 0 18px; font-weight: 500; }
.tm-card .who { display: flex; align-items: center; gap: 11px; }
.tm-card .who .av { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; position: relative; flex-shrink: 0;
  background: var(--grad); display: grid; place-items: center; color: #160d05; font-weight: 700; font-size: .82rem; }
.tm-card .who .av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tm-card .who b { font-size: .93rem; display: block; } .tm-card .who span { font-size: .8rem; color: var(--muted); }

/* grander, larger quote grid */
.quotes.grand { gap: 26px; }
.quotes.grand .quote { padding: clamp(30px,3.4vw,42px); }
.quotes.grand .quote p { font-size: 1.12rem; line-height: 1.62; }
.quotes.grand .quote .stars { font-size: 1.08rem; margin-bottom: 18px; }
.quotes.grand .quote .who .av { width: 54px; height: 54px; font-size: .98rem; }
.quotes.grand .quote .who b { font-size: 1.04rem; }
/* big interactive testimonial carousel (inside the black cell) */
.tcar { max-width: 1080px; margin: 46px auto 0; }
.tcar .car-viewport { background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.12); }
.tcar .car-dot { --gc: var(--orange); }
/* testimonials dots wrap to two rows: space the rows apart and give BOTH a neutral connector line (no rainbow gradient) */
.tcar .car-steps { row-gap: 30px; }
.tcar .car-steps::before { display: none; }
.tcar .car-dot::after { content: ""; position: absolute; top: 18px; left: 0; right: 0; height: 2px; background: rgba(255,255,255,.16); z-index: 0; }
.tcar .car-dot .cs-n { position: relative; z-index: 1; }
.tcar .car-arrow { top: 50%; }  /* keep arrows centred on the tall text slide, even on mobile */
.tslide { min-height: clamp(360px, 44vw, 480px); display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding: clamp(34px,5vw,72px); }
.tslide .stars { color: #FBB03B; font-size: 1.5rem; letter-spacing: 5px; margin-bottom: 28px; }
.tslide p { font-size: clamp(1.4rem, 2.8vw, 2.3rem); line-height: 1.4; font-weight: 500; color: #fff;
  max-width: 30ch; margin: 0 0 32px; }
.tslide .who { display: flex; align-items: center; gap: 14px; }
.tslide .who .av { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; position: relative; flex-shrink: 0;
  background: var(--grad); display: grid; place-items: center; color: #160d05; font-weight: 700; font-size: 1rem; }
.tslide .who .av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tslide .who b { font-size: 1.12rem; color: #fff; display: block; text-align: left; }
.tslide .who span { font-size: .9rem; color: var(--muted); display: block; text-align: left; }
@media (max-width: 640px) { .tslide { min-height: 0; } .tslide p { font-size: 1.3rem; } }

/* ---- All-reviews grid (inside the dark cell) ---- */
.rev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; margin-top: clamp(34px, 4vw, 48px); position: relative; z-index: 1; }
.rev-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-lg); padding: 24px 24px 22px; display: flex; flex-direction: column; transition: transform .2s, border-color .2s; }
.rev-card:hover { transform: translateY(-5px); border-color: rgba(242,106,33,.55); }
.rev-card .stars { color: #FBB03B; letter-spacing: 3px; font-size: .95rem; margin-bottom: 14px; }
.rev-card p { color: var(--cream); font-size: 1rem; line-height: 1.56; margin: 0 0 20px; font-weight: 500; flex: 1; }
.rev-card .who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.rev-card .who .av { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; position: relative; flex-shrink: 0; background: var(--grad); display: grid; place-items: center; color: #160d05; font-weight: 700; font-size: .82rem; }
.rev-card .who .av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rev-card .who b { color: #fff; font-size: .95rem; display: block; }
.rev-card .who span { color: var(--muted); font-size: .82rem; }

/* ---- Featured video ad (vertical) — sized by viewport height so it fills most of the screen ---- */
.ad-video { width: min(94vw, 62vh); margin: 0 auto; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: 0 40px 90px rgba(0,0,0,.22); background: #000; }
.ad-video-el { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; background: #000; }
.ad-video-wide { width: min(95vw, 1120px); }
.ad-video-wide .ad-video-el { aspect-ratio: 16 / 9; }
.ad-video-cap { text-align: center; color: var(--text); font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .01em; font-size: clamp(1.3rem, 2.7vw, 2rem); line-height: 1.25; max-width: 820px; margin: 22px auto 0; }
.ad-video-cap b { color: var(--text); }

@media (prefers-reduced-motion: reduce) { .tmarquee-track { animation: none; } .hero-stars i { animation: none; } }

/* ---- Trustpilot live trust strip (testimonials top) ---- */
.tp-strip { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: clamp(18px,3vw,38px);
  max-width: 940px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(20px,3vw,30px) clamp(22px,3.5vw,40px); box-shadow: 0 18px 50px -34px rgba(18,22,28,.5); }
.tp-left { display: flex; align-items: center; gap: 14px; }
.tp-star { width: 46px; height: 46px; flex-shrink: 0; }
.tp-label { display: block; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em; font-size: 1.08rem; color: var(--text); }
.tp-sub { display: block; font-size: .85rem; color: var(--muted); margin-top: 3px; }
.tp-box { flex: 1; min-width: 230px; min-height: 24px; }
.tp-box a { color: var(--orange); font-weight: 600; }
.tp-strip .btn { white-space: nowrap; }
@media (max-width: 640px) { .tp-strip { flex-direction: column; text-align: center; } .tp-left { flex-direction: column; gap: 8px; } }

/* ---- Founder photo fills the avatar circle (initials fallback) ---- */
.founder .who .av { position: relative; overflow: hidden; }
.founder .who .av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---- Three-city band (one cell, three skylines) ---- */
.tri-city { display: grid; grid-template-columns: repeat(3, 1fr); border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line); box-shadow: 0 18px 50px -34px rgba(18,22,28,.5); aspect-ratio: 16 / 6; }
.tc-pane { position: relative; margin: 0; overflow: hidden; }
.tc-pane + .tc-pane { box-shadow: -2px 0 0 0 rgba(255,255,255,.55); }
.tc-pane img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.tc-pane::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, rgba(8,6,5,.82)); }
.tc-pane figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 16px 10px; text-align: center;
  color: #fff; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em; font-size: clamp(.92rem,1.6vw,1.1rem); }
.tc-pane:hover img { transform: scale(1.06); }
@media (max-width: 640px) {
  .tri-city { grid-template-columns: 1fr; aspect-ratio: auto; }
  .tc-pane { aspect-ratio: 16 / 9; }
  .tc-pane + .tc-pane { box-shadow: 0 -2px 0 0 rgba(255,255,255,.55); }
}

/* ============================================================
   LEAD-QUALITY FUNNEL ANIMATION (the-3-keys, replaces a photo)
   Clean, Apple-style motion: leads stream in, the funnel filters,
   a qualified verified lead emerges below.
   ============================================================ */
.funnel-anim { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden;
  background: radial-gradient(130% 95% at 50% -12%, #ffffff, #eef1f5);
  border: 1px solid var(--line); box-shadow: 0 26px 64px -40px rgba(18,22,28,.55); }
.fa-stage { position: absolute; inset: 0; }
.fa-tag { position: absolute; top: 5.5%; left: 50%; transform: translateX(-50%); z-index: 3;
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; color: var(--muted); }
.fa-funnel { position: absolute; left: 50%; top: 15%; width: 64%; transform: translateX(-50%); z-index: 1; }
.fa-funnel svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 12px 22px rgba(242,106,33,.18)); }
.fa-dot { position: absolute; top: 6%; left: var(--sx); width: clamp(11px,1.5vw,16px); aspect-ratio: 1; z-index: 2;
  margin-left: calc(clamp(11px,1.5vw,16px) / -2); border-radius: 50%;
  background: linear-gradient(135deg,#FBB03B,#F26A21); box-shadow: 0 4px 12px -3px rgba(242,106,33,.7);
  opacity: 0; animation: faFlow 3.8s cubic-bezier(.5,0,.3,1) infinite; animation-delay: var(--d); }
@keyframes faFlow {
  0%   { top: 4%;  left: var(--sx); opacity: 0; transform: scale(1); }
  9%   { opacity: 1; }
  46%  { top: 50%; left: 50%; opacity: 1; transform: scale(1); }
  72%  { top: 72%; left: 50%; opacity: .5; transform: scale(.55); }
  100% { top: 78%; left: 50%; opacity: 0; transform: scale(.4); }
}
.fa-dot.fa-bad { background: linear-gradient(135deg,#c4cad2,#a7afb9); box-shadow: none; animation-name: faReject; }
@keyframes faReject {
  0%   { top: 4%;  left: var(--sx); opacity: 0; transform: scale(1); }
  9%   { opacity: .9; }
  38%  { top: 40%; left: var(--sx); opacity: .9; }
  64%  { top: 34%; left: var(--rx); opacity: 0; transform: scale(.6); }
  100% { opacity: 0; }
}
.fa-out { position: absolute; left: 50%; bottom: 7%; width: 80%; max-width: 320px; transform: translateX(-50%); z-index: 3; }
.fa-card { display: flex; align-items: center; gap: 11px; background: #fff; border: 1px solid var(--line);
  border-radius: 14px; padding: 12px 14px; box-shadow: 0 16px 36px -22px rgba(18,22,28,.6);
  opacity: 0; transform: translateY(16px) scale(.92); animation: faEmerge 3.8s ease-in-out infinite; }
.fa-check { width: 30px; height: 30px; border-radius: 50%; background: #16a34a; color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.fa-check svg { width: 16px; height: 16px; }
.fa-card b { display: block; font-size: .9rem; color: var(--text); }
.fa-card span { font-size: .76rem; color: var(--muted); }
@keyframes faEmerge {
  0%, 50% { opacity: 0; transform: translateY(16px) scale(.92); }
  63%     { opacity: 1; transform: translateY(0) scale(1); }
  90%     { opacity: 1; transform: translateY(0) scale(1); }
  100%    { opacity: 0; transform: translateY(-6px) scale(.98); }
}
@media (prefers-reduced-motion: reduce) {
  .fa-dot { animation: none; opacity: .85; }
  .fa-dot.fa-bad { opacity: .5; }
  .fa-card { animation: none; opacity: 1; transform: none; }
}

/* ============================================================
   LOCATIONS — interactive 3D globe (heatmap of best markets)
   ============================================================ */
.globe-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(20px,3vw,38px); align-items: stretch; margin-top: 44px; }
.globe-stage { position: relative; border-radius: var(--r-lg); overflow: hidden; min-height: clamp(540px,82vh,960px);
  background: radial-gradient(120% 100% at 50% -10%, #0e1626, #05080e 72%); border: 1px solid rgba(255,255,255,.1);
  cursor: grab; }
.globe-stage:active { cursor: grabbing; }
#globeViz { position: absolute; inset: 0; z-index: 1; }

/* ---- Galaxy backdrop behind the globe (the transparent globe canvas lets it show through) ---- */
.globe-galaxy { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(1200px 620px at 78% 16%, rgba(124,92,224,.20), transparent 60%),
    radial-gradient(900px 520px at 16% 84%, rgba(242,106,33,.13), transparent 60%),
    radial-gradient(820px 820px at 50% 50%, rgba(44,76,150,.18), transparent 70%),
    radial-gradient(120% 100% at 50% -10%, #0b1226, #04060e 74%); }
/* two parallax starfields built from many tiny radial dots */
.globe-galaxy::before, .globe-galaxy::after { content: ""; position: absolute; inset: -60%;
  background-image:
    radial-gradient(1.6px 1.6px at 20px 30px, #fff, transparent),
    radial-gradient(1.4px 1.4px at 130px 80px, rgba(255,255,255,.9), transparent),
    radial-gradient(1px 1px at 220px 160px, #fff, transparent),
    radial-gradient(1.6px 1.6px at 300px 50px, rgba(255,255,255,.85), transparent),
    radial-gradient(1px 1px at 380px 210px, #fff, transparent),
    radial-gradient(2.2px 2.2px at 90px 250px, rgba(255,255,255,.95), transparent),
    radial-gradient(1px 1px at 460px 120px, #fff, transparent),
    radial-gradient(1.4px 1.4px at 540px 300px, rgba(255,255,255,.8), transparent);
  background-repeat: repeat; background-size: 560px 340px;
  animation: galaxyDrift 140s linear infinite; }
.globe-galaxy::after { background-size: 340px 230px; opacity: .55; filter: blur(.3px);
  animation-duration: 230s; animation-direction: reverse; }
/* planets */
.globe-galaxy .planet { position: absolute; border-radius: 50%; display: block; animation: planetFloat 14s ease-in-out infinite; }
.globe-galaxy .planet-1 { width: clamp(34px,4vw,56px); height: clamp(34px,4vw,56px); top: 11%; left: 9%;
  background: radial-gradient(circle at 32% 30%, #ffe0b0, #ea8b3f 55%, #7a3d12 100%);
  box-shadow: 0 0 26px rgba(234,139,63,.45); }
.globe-galaxy .planet-2 { width: clamp(20px,2.4vw,32px); height: clamp(20px,2.4vw,32px); bottom: 15%; right: 13%;
  background: radial-gradient(circle at 35% 30%, #d4e6ff, #6f9bd8 60%, #2b3f63 100%);
  box-shadow: 0 0 18px rgba(111,155,216,.4); animation-delay: -5s; }
.globe-galaxy .planet-3 { width: clamp(26px,3vw,42px); height: clamp(26px,3vw,42px); top: 72%; left: 80%;
  background: radial-gradient(circle at 35% 30%, #f3e0b8, #c9a45e 60%, #6e4f24 100%);
  box-shadow: 0 0 18px rgba(201,164,94,.4); animation-delay: -9s; }
.globe-galaxy .planet-3::after { content: ""; position: absolute; left: 50%; top: 50%;
  width: 210%; height: 52%; transform: translate(-50%,-50%) rotate(-22deg);
  border: 2px solid rgba(232,212,162,.55); border-radius: 50%; box-shadow: 0 0 8px rgba(232,212,162,.25); }
/* an occasional shooting star streaking across */
.globe-galaxy .shooting-star { position: absolute; top: 22%; left: 8%; width: 120px; height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0), #fff); border-radius: 2px; opacity: 0;
  transform: rotate(18deg); filter: drop-shadow(0 0 6px rgba(255,255,255,.8));
  animation: shootingStar 9s ease-in infinite; }
@keyframes galaxyDrift { from { transform: translate3d(0,0,0); } to { transform: translate3d(-560px,-340px,0); } }
@keyframes planetFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes shootingStar { 0%,72% { opacity: 0; transform: translate(0,0) rotate(18deg); }
  74% { opacity: 1; } 86% { opacity: 0; transform: translate(280px,90px) rotate(18deg); } 100% { opacity: 0; } }
/* the mini penguin pinned to Antarctica.
   IMPORTANT: globe.gl drives this root's transform to position it, so the bob
   animation lives on the inner span only (animating the root would unstick it). */
.globe-penguin { pointer-events: none; user-select: none; }
.globe-penguin span { display: block; font-size: 30px; line-height: 1;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.6)); animation: penguinBob 3.2s ease-in-out infinite; }
@keyframes penguinBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) {
  .globe-galaxy::before, .globe-galaxy::after, .globe-galaxy .planet, .globe-galaxy .shooting-star, .globe-penguin span { animation: none; }
}
.globe-hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 2; font-size: .76rem;
  color: rgba(255,255,255,.62); letter-spacing: .03em; background: rgba(0,0,0,.4); padding: 6px 13px; border-radius: 99px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); white-space: nowrap; pointer-events: none; }
.globe-side { display: flex; flex-direction: column; gap: 16px; }
.loc-panel { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-lg); padding: 24px; flex: 1; min-height: 180px; }
.loc-panel .lp-empty { color: var(--muted); line-height: 1.55; }
.loc-panel .lp-name { font-family: var(--font-display); font-size: 1.7rem; text-transform: uppercase; color: #fff; line-height: 1.08; }
.loc-panel .lp-country { font-size: .8rem; color: var(--muted); letter-spacing: .07em; text-transform: uppercase; margin-top: 5px; display: block; }
.loc-badge { display: inline-flex; align-items: center; gap: 7px; margin: 15px 0 13px; padding: 5px 13px; border-radius: 99px;
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .05em; font-size: .74rem; }
.loc-badge.top { background: rgba(239,78,95,.16); color: #ff8090; border: 1px solid rgba(239,78,95,.42); }
.loc-badge.strong { background: rgba(242,106,33,.16); color: #F8a45b; border: 1px solid rgba(242,106,33,.42); }
.loc-badge.growing { background: rgba(247,201,72,.14); color: #F7C948; border: 1px solid rgba(247,201,72,.4); }
.loc-badge.active { background: rgba(255,255,255,.1); color: #d7dde6; border: 1px solid rgba(255,255,255,.28); }
.loc-badge.soon { background: rgba(120,134,156,.16); color: #c3ccda; border: 1px solid rgba(120,134,156,.45); }
.loc-panel p { color: var(--cream); font-size: .98rem; line-height: 1.56; margin: 0; }
.loc-legend, .loc-leaders { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-lg); padding: 18px 20px; }
.loc-legend h4, .loc-leaders h4 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; color: #fff; margin-bottom: 12px; }
.lg-row { display: flex; align-items: center; gap: 10px; font-size: .86rem; color: var(--cream); margin-top: 9px; }
.lg-sw { width: 16px; height: 16px; border-radius: 5px; flex-shrink: 0; }
.lg-sw.top { background: #EF4E5F; } .lg-sw.strong { background: #F26A21; } .lg-sw.growing { background: #F7C948; } .lg-sw.active { background: transparent; border: 2px solid rgba(255,255,255,.7); }
.lg-sw.soon { background: rgba(70,84,108,.85); border: 1px solid rgba(150,165,190,.7); }
.ll-list { display: flex; flex-wrap: wrap; gap: 8px; }
.ll-chip { cursor: pointer; font: inherit; background: rgba(242,106,33,.1); border: 1px solid rgba(242,106,33,.3); color: #FBB03B;
  border-radius: 99px; padding: 7px 13px; font-size: .82rem; transition: background .2s, transform .15s; }
.ll-chip:hover { background: rgba(242,106,33,.22); transform: translateY(-1px); }
.globe-tip { background: rgba(8,10,14,.92); color: #fff; padding: 7px 11px; border-radius: 9px; font-size: .84rem; border: 1px solid rgba(242,106,33,.45); }
.globe-tip b { display: block; } .globe-tip span { color: #FBB03B; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; }
.loc-note { margin: 26px auto 0; max-width: 760px; text-align: center; color: var(--muted); font-size: .96rem; line-height: 1.55; position: relative; z-index: 1; }
.loc-note b { color: var(--cream); font-weight: 600; }
.lp-close { display: none; position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fff; place-items: center; cursor: pointer; font-size: 22px; line-height: 1; padding: 0; }
@media (max-width: 900px) {
  .globe-grid { grid-template-columns: 1fr; }
  .globe-stage { min-height: 72vh; }
  /* the detail popup becomes a fixed bottom sheet so it always lands in the same spot, independent of the globe */
  .loc-panel { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 80; padding-top: 46px; min-height: 0;
    background: rgba(10,12,16,.97); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.16); box-shadow: 0 24px 70px rgba(0,0,0,.6);
    transform: translateY(140%); transition: transform .34s cubic-bezier(.22,.61,.36,1); max-height: 72vh; overflow: auto; }
  .loc-panel.lp-open { transform: translateY(0); }
  .lp-close { display: grid; }
}
@media (max-width: 560px) { .globe-hint { font-size: .66rem; padding: 5px 10px; } }

/* ============================================================
   MOBILE HEADER FIT — keep every hero + section header inside
   narrow phones (the uniform desktop sizes are too tall to fit
   long lines on small screens). Placed last so it wins.
   ============================================================ */
@media (max-width: 600px) {
  .hero h1, .page-hero h1, .th-hero h1 { font-size: clamp(1.55rem, 6.7vw, 2.4rem); line-height: 1.08; max-width: 100%; }
  h2.display { font-size: clamp(1.5rem, 6.4vw, 2.2rem); }
  .section h2, .sec-title { font-size: clamp(1.5rem, 6.4vw, 2.2rem); }
}
@media (max-width: 380px) {
  .hero h1, .page-hero h1, .th-hero h1 { font-size: clamp(1.4rem, 7.1vw, 2rem); }
  h2.display, .section h2, .sec-title { font-size: clamp(1.35rem, 6.7vw, 1.85rem); }
}

/* ---- Trademark mark on the brand wordmark ---- */
.nav-logo b .tm { font-size: .5em; font-weight: 700; vertical-align: super; letter-spacing: 0;
  margin-left: 1px; color: var(--orange); -webkit-text-fill-color: var(--orange); }

/* ---- Consent record document mock (compliance section) ---- */
.consent-doc-wrap { margin-top: clamp(40px,5vw,58px); position: relative; z-index: 1; }
.consent-cap { text-align: center; color: var(--muted); max-width: 580px; margin: 0 auto 24px; font-size: 1rem; line-height: 1.55; }
.consent-doc { max-width: 660px; margin: 0 auto; background: #fff; color: #11151A; border-radius: 16px; overflow: hidden;
  text-align: left; position: relative; border: 1px solid rgba(18,22,28,.1); box-shadow: 0 34px 80px -34px rgba(0,0,0,.7); }
.consent-doc::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--grad); }
.cd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 26px 26px 16px; }
.cd-eyebrow { display: block; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .03em; font-size: 1.2rem; color: #11151A; }
.cd-sub { display: block; font-size: .74rem; color: #6b7280; letter-spacing: .08em; text-transform: uppercase; margin-top: 4px; }
.cd-badge { flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; background: var(--grad); color: #fff;
  border: 1px solid transparent; border-radius: 99px; padding: 7px 14px; font-size: .74rem; font-weight: 700; white-space: nowrap; box-shadow: 0 8px 18px -10px rgba(242,106,33,.7); }
.cd-prep { display: block; font-size: .68rem; color: #8a929c; margin-top: 6px; letter-spacing: .04em; }
.cd-badge svg { width: 14px; height: 14px; }
.cd-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(18,22,28,.09);
  border-top: 1px solid rgba(18,22,28,.09); border-bottom: 1px solid rgba(18,22,28,.09); }
.cd-fields > div { background: #fff; padding: 12px 26px; }
.cd-k { display: block; font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: #9aa1a9; margin-bottom: 3px; }
.cd-v { display: block; font-size: .94rem; color: #11151A; font-weight: 600; }
.cd-intro { padding: 18px 26px 0; font-size: .86rem; color: #11151A; }
.cd-intro b { font-weight: 700; }
.cd-statement { margin: 12px 26px 4px; padding: 16px 18px; background: #f6f8fa; border-left: 4px solid var(--orange); border-radius: 8px; }
.cd-statement p { font-size: .8rem; line-height: 1.6; color: #475059; font-style: normal; margin: 0 0 10px; }
.cd-statement p:last-child { margin-bottom: 0; }
.cd-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 16px;
  padding: 13px 26px; background: #f6f8fa; border-top: 1px solid rgba(18,22,28,.08); font-size: .68rem; letter-spacing: .03em; color: #8a929c; }
@media (max-width: 560px) { .cd-fields { grid-template-columns: 1fr; } .cd-head { flex-direction: column; } .cd-foot { flex-direction: column; gap: 4px; } }

/* ---- Intake questionnaire showcase (phone mocks, compliance section) ---- */
.survey { margin-top: clamp(38px,5vw,54px); position: relative; z-index: 1; }
.survey-cap { text-align: center; color: var(--muted); max-width: 660px; margin: 0 auto 34px; font-size: 1rem; line-height: 1.6; }
.survey-grid { display: flex; flex-wrap: wrap; gap: clamp(22px,3.4vw,48px); justify-content: center; align-items: flex-start; }
.phone { width: 288px; max-width: 84vw; background: #0e1116; border-radius: 40px; padding: 10px;
  border: 1px solid rgba(255,255,255,.16); box-shadow: 0 44px 84px -36px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.12); }
.phone-screen { background: #eceff2; border-radius: 31px; overflow: hidden; position: relative; padding-top: 6px; }
.phone-notch { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 92px; height: 21px; background: #0e1116; border-radius: 99px; z-index: 3; }
.ps-bar { display: flex; justify-content: space-between; align-items: center; padding: 13px 20px 9px; font-size: .72rem; font-weight: 700; color: #11151A; }
.ps-fb { display: inline-flex; align-items: center; gap: 6px; color: #1877F2; }
.ps-fb svg { width: 15px; height: 15px; }
.ps-body { padding: 6px 15px 2px; }
.sv-card { background: #fff; border-radius: 14px; padding: 17px 15px; box-shadow: 0 8px 22px -14px rgba(18,22,28,.45); }
.sv-q { font-size: .95rem; font-weight: 700; color: #11151A; line-height: 1.34; margin-bottom: 3px; }
.sv-hint { font-size: .71rem; color: #8a929c; margin-bottom: 12px; }
.sv-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid #e2e6ea; border-radius: 9px;
  padding: 10px 12px; font-size: .82rem; color: #2a2f36; margin-bottom: 8px; font-weight: 600; line-height: 1.25; }
.sv-opt .box { width: 17px; height: 17px; border: 2px solid #c2c8ce; border-radius: 5px; flex-shrink: 0; display: grid; place-items: center; }
.sv-opt .box.round { border-radius: 50%; }
.sv-opt.on { border-color: var(--orange); background: #FFF6F0; color: #11151A; }
.sv-opt.on .box { background: var(--grad); border-color: transparent; color: #fff; }
.sv-opt .box svg { width: 11px; height: 11px; }
.sv-submit { margin-top: 5px; background: #1877F2; color: #fff; text-align: center; font-weight: 700; font-size: .86rem; padding: 12px; border-radius: 9px; }
.sv-submit.brand { background: var(--grad); color: #160d05; }
.sv-consent { font-size: .71rem; line-height: 1.6; color: #475059; max-height: 118px; overflow: hidden;
  -webkit-mask: linear-gradient(#000 64%, transparent); mask: linear-gradient(#000 64%, transparent); }
.sv-consent b { color: #11151A; }
.sv-check { display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; font-size: .84rem; font-weight: 700; color: #11151A; }
.sv-check .box { width: 19px; height: 19px; border-radius: 5px; background: var(--grad); display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.sv-check .box svg { width: 12px; height: 12px; }
.sv-prog { height: 4px; background: #d6dbe0; border-radius: 99px; overflow: hidden; margin: 4px 15px 0; }
.sv-prog i { display: block; height: 100%; background: var(--grad); border-radius: 99px; }
.ps-foot { display: flex; align-items: center; justify-content: space-between; padding: 11px 18px 14px; font-size: .67rem; color: #8a929c; font-weight: 600; }
.survey-steps { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; max-width: 900px; margin: clamp(34px,4vw,46px) auto 0; }
.survey-step { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.13);
  border-radius: 99px; padding: 8px 15px 8px 8px; font-size: .82rem; color: var(--cream); }
.survey-step i { width: 22px; height: 22px; border-radius: 50%; background: var(--grad); color: #160d05; font-weight: 800; font-size: .7rem;
  display: grid; place-items: center; font-family: var(--font-display); font-style: normal; flex-shrink: 0; }

/* ---- Single-phone interactive questionnaire carousel ---- */
.survey-stage { display: flex; justify-content: center; }
.survey-stage .phone { width: 332px; max-width: 88vw; }
.sv-subbar { display: flex; align-items: center; padding: 4px 12px 0; min-height: 30px; }
.sv-back { width: 30px; height: 30px; border: none; background: transparent; color: #5b626b; cursor: pointer; display: grid; place-items: center; border-radius: 8px; padding: 0; }
.sv-back:hover { background: #e6eaee; }
.sv-back svg { width: 19px; height: 19px; }
.phone.at-start .sv-back { visibility: hidden; }
.sv-body-wrap { padding: 8px 15px 0; height: 468px; display: flex; align-items: flex-start; overflow: hidden; }
.sv-slide { display: none; width: 100%; }
.sv-slide.active { display: block; animation: svIn .34s var(--ease); }
@keyframes svIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.sv-opt { cursor: pointer; transition: border-color .15s, background .15s; }
.sv-opt .box svg { opacity: 0; transition: opacity .15s; }
.sv-opt.on .box svg { opacity: 1; }
.sv-submit { border: none; width: 100%; cursor: pointer; font-family: inherit; }
.sv-restart { cursor: pointer; }
.sv-input { width: 100%; border: 1px solid #e2e6ea; border-radius: 9px; padding: 11px 12px; font-size: .84rem; color: #11151A; background: #fff; margin-bottom: 11px; }
.sv-input.ph { color: #aab0b7; }
.sv-field { margin-bottom: 11px; }
.sv-field label { display: block; font-size: .7rem; font-weight: 700; color: #5b626b; margin-bottom: 5px; }
.sv-field .sv-input { margin-bottom: 0; }
.sv-codes { display: flex; gap: 9px; justify-content: center; margin: 16px 0 18px; }
.sv-codebox { width: 46px; height: 54px; border: 1.5px solid #d3d8dd; border-radius: 10px; display: grid; place-items: center; font-size: 1.4rem; font-weight: 700; color: #11151A; }
.sv-codebox.on { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(242,106,33,.14); }
.sv-done { text-align: center; padding: 16px 6px 6px; }
.sv-done .tick { width: 54px; height: 54px; border-radius: 50%; background: var(--grad); display: grid; place-items: center; color: #fff; margin: 0 auto 14px; }
.sv-done .tick svg { width: 27px; height: 27px; }
.sv-done h4 { font-size: 1.02rem; color: #11151A; margin-bottom: 6px; }
.sv-done p { font-size: .84rem; color: #5b626b; margin-bottom: 16px; line-height: 1.5; }
.survey-hint { text-align: center; color: var(--muted); font-size: .92rem; margin: 22px auto 0; }
.survey-hint svg { width: 17px; height: 17px; vertical-align: -3px; margin-left: 4px; }

/* ============================================================
   BOARD OF DIRECTORS — grand, regal feature (our-team)
   ============================================================ */
.board-cell { padding: clamp(50px,7vw,96px) clamp(22px,4vw,60px); }
.board-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,72px);
  margin: clamp(40px,5vw,64px) auto 0; max-width: 860px; }
.board-member { margin: 0; text-align: center; position: relative; }
.bm-crown { width: 44px; height: 44px; margin: 0 auto 16px; color: #FBB03B; display: block;
  filter: drop-shadow(0 3px 9px rgba(242,106,33,.65)); }
.bm-frame { position: relative; width: clamp(168px, 24vw, 232px); aspect-ratio: 1; margin: 0 auto 24px; border-radius: 50%; }
.bm-frame::before { content: ""; position: absolute; inset: -11px; border-radius: 50%; z-index: 0;
  background: conic-gradient(from 0deg, #FBB03B, #F26A21, #EF4E5F, #F26A21, #FBB03B);
  box-shadow: 0 0 72px -4px rgba(242,106,33,.62); animation: bmSpin 11s linear infinite; }
.bm-frame img { position: relative; z-index: 1; width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
  border: 6px solid #0b0a09; display: block; }
@keyframes bmSpin { to { transform: rotate(360deg); } }
.bm-tag { display: inline-block; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .2em;
  font-size: .82rem; color: #FBB03B; margin-bottom: 8px; }
.board-member b { display: block; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .01em;
  font-size: clamp(1.7rem, 3.6vw, 2.7rem); color: #fff; line-height: 1.04; }
.bm-sub { display: block; color: var(--muted); margin-top: 9px; font-size: .98rem; letter-spacing: .02em; }
@media (max-width: 680px) { .board-grid { grid-template-columns: 1fr; gap: 52px; } }
@media (prefers-reduced-motion: reduce) { .bm-frame::before { animation: none; } }

/* ============================================================
   UX / PERFORMANCE SWEEP — smooth, Apple-grade
   ============================================================ */
/* Anchor jumps (#book, #process, etc.) clear the sticky nav */
section[id], [id].section, .book[id] { scroll-margin-top: 92px; }

/* These card surfaces are OPAQUE white in the light theme, so their
   backdrop blur is invisible but still repaints every scroll frame.
   Dropping it removes the main source of mobile scroll jank.
   (Glass that is actually translucent — the nav, dark-cell cards, and
   the demo notifications — keeps its blur and is untouched.) */
body.theme-light .card, body.theme-light .offer, body.theme-light .quote,
body.theme-light .member, body.theme-light .founder, body.theme-light .faq-item, body.theme-light .key,
body.theme-light .vs-card, body.theme-light .stats, body.theme-light .car-card, body.theme-light .fcard,
body.theme-light .crm-win, body.theme-light .tm-card, body.theme-light .quiz, body.theme-light .speed,
body.theme-light .tp-strip, body.theme-light .loc-panel {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}

/* GPU-friendly hints for the elements that actually move on scroll/hover */
.car-track, .tmarquee-track, .marquee-track, .pipe-comet, .ops-cam { will-change: transform; }

/* kill the tap-highlight flash on mobile for a native-app feel */
a, button, .btn, .car-dot, .qz-opt, .ll-chip, summary { -webkit-tap-highlight-color: transparent; }