@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --bg: #f7f7f7;
  --surface: #FFFFFF;
  --surface-2: #FAFAFA;
  --text: #111111;
  --text-soft: #2B2B2B;
  --muted: #6B7280;
  --line: #E5E7EB;
  --line-strong: #D1D5DB;
  --accent: #378c8c;
  --accent-hover: #2d7373;
  --accent-soft: #e6f3f3;
  --accent2: #D4A574;
  --accent2-soft: #F5EBD9;
  --accent3: #8B5CF6;
  --max: 1180px;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(17,17,17,.04);
  --shadow: 0 1px 2px rgba(17,17,17,.05), 0 8px 24px rgba(17,17,17,.08);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--text); text-decoration: none; }
a:hover { color: var(--accent); }

h1, h2, h3, h4 {
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 0;
}

p { margin: 0; }

img { display: block; max-width: 100%; height: auto; }

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Nav ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 16px;
  gap: 24px;
}

.brand {
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--text);
  white-space: nowrap;
}

.brand:hover { color: var(--text); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-links a {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}

.nav-links a:hover { color: var(--accent); }

.nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--muted);
  transition: color .15s, background .15s, transform .15s;
}

.nav-icon:hover {
  color: var(--accent);
  background: var(--accent-soft, #e6f3f3);
  transform: translateY(-1px);
}

.nav-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* ---------- Language switcher (globe icon + dropdown) ----------
   Apple/Stripe-style: a globe button in the nav opens a small
   dropdown listing English + Español, with a check mark on the
   active language. Behavior is wired in script.js. */
.lang-switcher {
  position: relative;
  margin-left: 12px;
  display: inline-flex;
}

.lang-switcher-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 10px 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.lang-switcher-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.lang-switcher-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.lang-switcher-globe {
  width: 18px;
  height: 18px;
}

.lang-switcher-chevron {
  width: 12px;
  height: 12px;
  opacity: 0.65;
  transition: transform 0.2s ease;
}

.lang-switcher-btn[aria-expanded="true"] .lang-switcher-chevron {
  transform: rotate(180deg);
}

.lang-switcher-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 180px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 32px rgba(17, 17, 17, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.02);
  animation: lang-switcher-menu-in 0.15s ease-out;
}

.lang-switcher-menu[hidden] {
  display: none;
}

@keyframes lang-switcher-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.lang-switcher-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.12s ease;
}

.lang-switcher-item:hover {
  background: var(--bg);
  color: var(--accent);
}

.lang-switcher-item.is-active {
  color: var(--accent);
  font-weight: 600;
}

.lang-switcher-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--accent);
}

.lang-switcher-check svg {
  width: 16px;
  height: 16px;
}

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  font-size: 22px;
  cursor: pointer;
  color: var(--text);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 15px;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, border-color .15s, color .15s, transform .15s, box-shadow .15s;
  text-decoration: none;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 1px 2px rgba(55, 140, 140,.18), 0 6px 14px rgba(55, 140, 140,.18);
}

.btn-primary:hover {
  background: var(--accent-hover);
  color: #fff;
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line);
}

.btn-ghost:hover {
  border-color: var(--text);
  color: var(--text);
}

/* ---------- Section base ---------- */

section {
  padding: 88px 0;
}

section.soft { background: var(--surface); }

.section-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 14px;
}

h1.section-title,
h2.section-title {
  font-size: clamp(30px, 3.5vw, 40px);
  line-height: 1.15;
  margin-bottom: 14px;
}

.section-lead {
  font-size: 18px;
  color: var(--muted);
  max-width: 62ch;
  margin-bottom: 48px;
}

.section-center { text-align: center; }
.section-center .section-lead { margin-left: auto; margin-right: auto; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  padding: 64px 0 88px;
  overflow: hidden;
}

.hero::before,
.hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}

.hero::before {
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, #f7f7f7, rgba(247,247,247,0) 70%);
  top: -120px;
  right: -120px;
  animation: hero-blob-1 18s ease-in-out infinite;
}

.hero::after {
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, rgba(212, 165, 116,.38), rgba(212, 165, 116,0) 70%);
  bottom: -160px;
  left: -100px;
  animation: hero-blob-2 22s ease-in-out infinite;
}

@keyframes hero-blob-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-40px, 30px) scale(1.08); }
}

@keyframes hero-blob-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(60px, -40px) scale(1.05); }
}

.hero .container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
}

/* Video-centric hero variant (art-gallery layout) */
.hero--video .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 980px;
  gap: 20px;
}

.hero--video .hero-badge {
  margin-bottom: 8px;
}

.hero--video h1 {
  max-width: 18ch;
  margin: 8px 0 0;
}

.hero--video p.lead {
  max-width: 60ch;
  margin: 0;
}

.hero--video .audience-row {
  max-width: 64ch;
  margin: 0;
}

.hero--video .cta-row {
  margin-top: 12px;
  justify-content: center;
}

.hero--video .hero-meta {
  margin-top: 8px;
  max-width: 68ch;
  text-align: center;
}

.hero-video-frame {
  position: relative;
  width: 100%;
  max-width: 820px;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: #F5F5F5;
  border: 1px solid var(--line);
  box-shadow:
    0 30px 80px rgba(17,17,17,0.10),
    0 0 0 1px rgba(0,0,0,0.04),
    0 0 80px rgba(247,247,247,0.6);
  margin: 16px 0 24px;
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #faf9f5;
}

/* ---------- Cinematic hero — Octo enters from below ---------- */

/* Higher-specificity (.hero.hero--cinematic) so the cinematic hero
   keeps a flush-to-header top across every breakpoint — without
   this, the mobile `.hero { padding: 56px 0 64px }` rule wins and
   creates a blank gap above Octo. */
.hero.hero--cinematic {
  padding: 0 0 56px;
  overflow: hidden;
  position: relative;
}

/* Soft ambient glow behind the stage so Octo feels grounded */
.hero--cinematic::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 40%;
  width: 90%;
  max-width: 1100px;
  height: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(55, 140, 140, 0.10), rgba(55, 140, 140, 0));
  pointer-events: none;
  z-index: 0;
}

.hero-stage {
  position: relative;
  width: 100%;
  /* Wide cinematic crop — matches the original Octo loop framing. */
  aspect-ratio: 32 / 15;
  /* Cap so the H1 + lead + CTAs land above the fold.
     Calc reserves ~360px for header (64px) + headline area (~296px). */
  max-height: min(52vh, calc(100vh - 360px));
  min-height: 260px;
  overflow: hidden;
  background: #faf9f5;
  transform-origin: center bottom;
  /* Octo enters: rises from below + scales up + fades in */
  animation: octo-enter 1.1s cubic-bezier(0.34, 1.4, 0.5, 1) 0.15s both;
  z-index: 1;
}

.hero-cinematic-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Default center crop — splits the trim evenly between Octo's head
     dome and the lower tentacle tips. Arturo prefers seeing more
     tentacle than head, so we leave this at the browser default. */
  object-position: center;
  display: block;
  /* Subtle continuous float once Octo has settled in */
  animation: octo-float 7s ease-in-out 1.3s infinite;
  will-change: transform;
  transition: transform .35s cubic-bezier(0.2, 0.8, 0.3, 1);
}

/* Tap-to-play fallback shown only when the browser refuses autoplay
   (iOS Low Power Mode, autoplay-blocker extensions, etc.). Injected
   by script.js when video.play() is rejected. */
.hero-play-overlay {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 0;
  background: rgba(55, 140, 140, 0.95);
  color: #fff;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 8px rgba(55, 140, 140, 0.15),
    0 18px 40px rgba(17, 17, 17, 0.22);
  animation: hero-play-pulse 2s ease-out infinite;
  transition: transform .2s ease, box-shadow .2s ease;
}

.hero-play-overlay:hover {
  transform: translate(-50%, -50%) scale(1.05);
}

.hero-play-overlay svg {
  width: 36px;
  height: 36px;
  margin-left: 4px; /* visual centering of the play triangle */
}

@keyframes hero-play-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(55, 140, 140, 0.45), 0 18px 40px rgba(17, 17, 17, 0.22); }
  70%  { box-shadow: 0 0 0 28px rgba(55, 140, 140, 0), 0 18px 40px rgba(17, 17, 17, 0.22); }
  100% { box-shadow: 0 0 0 0 rgba(55, 140, 140, 0), 0 18px 40px rgba(17, 17, 17, 0.22); }
}

@keyframes octo-enter {
  0%   { transform: translateY(80px) scale(0.90); opacity: 0; }
  55%  { opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes octo-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-10px) scale(1.005); }
}

/* ---------- Hero icon constellation (floating around Octo) ----------
   Modern monochrome icons overlay the dated baked-in video icons and
   advertise the AI tools we work with. Each is a white circle with a
   black SVG, lightly drop-shadowed, gently floating. */

.hero-icons {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.hero-icon {
  position: absolute;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #111;
  border-radius: 50%;
  box-shadow:
    0 10px 28px rgba(17, 17, 17, 0.22),
    0 2px 6px rgba(17, 17, 17, 0.10),
    inset 0 0 0 1px rgba(0, 0, 0, 0.04);
  /* Staggered entrance + perpetual gentle float. --i is the index 1..7
     set inline so each icon has its own delay phase. */
  opacity: 0;
  animation:
    hero-icon-in 0.6s cubic-bezier(0.34, 1.5, 0.5, 1) calc(1.2s + var(--i, 1) * 0.10s) both,
    hero-icon-float calc(5s + var(--i, 1) * 0.5s) ease-in-out calc(2s + var(--i, 1) * 0.3s) infinite;
}

.hero-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

/* ---------- Multi-logo pills ----------
   Some hero icons group 2–4 logos into one wider bubble. They share
   the same recipe: auto width, pill border-radius, internal gap. The
   only difference is min-width (proportional to number of logos)
   and svg size. */

/* 2-logo pill (WhatsApp + phone) */
.hero-icon--contact {
  width: auto;
  min-width: 78px;
  border-radius: 999px;
  padding: 0 11px;
  gap: 8px;
}
.hero-icon--contact svg {
  width: 18px;
  height: 18px;
}

/* 3-logo pills (AI tools, Person→arrow→Reports) */
.hero-icon--ai-stack,
.hero-icon--analytics {
  width: auto;
  min-width: 96px;
  border-radius: 999px;
  padding: 0 12px;
  gap: 8px;
}
.hero-icon--ai-stack svg,
.hero-icon--analytics svg {
  width: 18px;
  height: 18px;
}

/* The arrow in the analytics pill should be visually quieter than
   the person + chart icons it connects, so it reads as connective
   tissue rather than a third primary icon. */
.hero-icon--analytics svg:nth-child(2) {
  width: 14px;
  height: 14px;
  opacity: 0.55;
}

/* 5-logo pill (Paid Ads — Google, LinkedIn, Amazon, Meta, Instagram) */
.hero-icon--paid-ads {
  width: auto;
  min-width: 148px;
  border-radius: 999px;
  padding: 0 12px;
  gap: 8px;
}
.hero-icon--paid-ads svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 700px) {
  .hero-icon--contact   { min-width: 64px; padding: 0 8px; gap: 6px; }
  .hero-icon--ai-stack,
  .hero-icon--analytics { min-width: 78px; padding: 0 9px; gap: 6px; }
  .hero-icon--paid-ads  { min-width: 118px; padding: 0 9px; gap: 5px; }
  .hero-icon--contact svg,
  .hero-icon--ai-stack svg,
  .hero-icon--analytics svg,
  .hero-icon--paid-ads svg { width: 14px; height: 14px; }
  .hero-icon--analytics svg:nth-child(2) { width: 11px; height: 11px; }
}

@keyframes hero-icon-in {
  0%   { opacity: 0; transform: scale(0.5) translateY(8px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes hero-icon-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-7px) scale(1.03); }
}

/* Positions — stacked along the LEFT and RIGHT edges of the hero stage
   so they never overlap Octo's body or animated tentacles. The top-center
   region is left empty (would be on top of Octo's head). The top-right
   corner is reserved for the Unmute pill (top:16px right:16px) — Claude
   sits well below it. */
/* 5-icon constellation positions. All anchor to LEFT or RIGHT edges
   so none cross into Octo (center) or the caption area (bottom-center).
   Top-right is intentionally left empty for the Unmute button. */
.hero-icon--website   { top: 4%;  left: 2%; }   /* top-left — Website design */
.hero-icon--contact   { top: 36%; left: 0; }    /* mid-left — WhatsApp + phone */
.hero-icon--ai-stack  { top: 70%; left: 2%; }   /* lower-left — AI tools */
.hero-icon--analytics { top: 36%; right: 0; }   /* mid-right — person → reports */
.hero-icon--paid-ads  { top: 70%; right: 2%; }  /* lower-right — paid ads logos */

@media (max-width: 700px) {
  .hero-icon { width: 34px; height: 34px; }
  .hero-icon svg { width: 16px; height: 16px; }
  /* On phones the stage is 4:3 (more square). Same edge-only layout. */
  .hero-icon--website   { top: 3%;  left: 1%; }
  /* Mid + lower rows pulled tighter and higher so the bottom edge of
     each pill clears the browser-rendered caption track at the very
     bottom of the video (captions live around y=82-95%). */
  .hero-icon--contact   { top: 28%; left: 0; }
  .hero-icon--ai-stack  { top: 56%; left: 0; }
  .hero-icon--analytics { top: 28%; right: 0; }
  .hero-icon--paid-ads  { top: 56%; right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-icon { animation: none !important; opacity: 1 !important; }
}

/* Unmute button overlay — top-right of the hero stage */
.hero-mute-toggle {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px 8px 11px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--text);
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 999px;
  font: 600 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  letter-spacing: 0.01em;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px rgba(17, 17, 17, 0.10);
  transition: background .15s, transform .15s, box-shadow .15s;
  /* Fade in after Octo settles so it doesn't compete with the entrance */
  opacity: 0;
  animation: hero-text-rise 0.5s ease-out 1.4s forwards;
}
.hero-mute-toggle:hover {
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(17, 17, 17, 0.14);
}
.hero-mute-toggle:active { transform: translateY(0); }

.hero-mute-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--accent);
}
.hero-mute-icon svg { width: 16px; height: 16px; }
/* Toggle between off / on icons via data-state */
.hero-mute-toggle[data-state="muted"]  .hero-mute-icon-on  { display: none; }
.hero-mute-toggle[data-state="unmuted"] .hero-mute-icon-off { display: none; }

@media (max-width: 600px) {
  .hero-mute-toggle {
    top: 12px;
    right: 12px;
    padding: 7px 12px 7px 10px;
    font-size: 11px;
  }
}

/* Brand-aligned subtitle / caption styling — applied via JS to the
   ::cue pseudo-element. Browsers render WebVTT captions inside the
   video; ::cue lets us style them. */
.hero-cinematic-video::cue {
  background: rgba(17, 17, 17, 0.78);
  color: #fff;
  font: 600 17px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  padding: 4px 10px;
  border-radius: 6px;
}

/* Headline + CTAs rise in with a staggered cascade after Octo lands */
.hero--cinematic .container.hero-cinematic-text,
.hero-cinematic-text {
  /* Override the base .hero .container 2-column grid so the cinematic hero
     stacks vertically, centered, instead of splitting H1 from lead text. */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  padding: 22px 24px 0;
  max-width: 820px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  grid-template-columns: none;
}

.hero-cinematic-text h1 {
  max-width: 22ch;
  margin: 0;
  line-height: 1.05;
}

.hero-cinematic-text .lead {
  max-width: 60ch;
  margin: 0;
}

.hero-cinematic-text .audience-row {
  max-width: 64ch;
  margin: 0;
}

.hero-cinematic-text .cta-row {
  margin-top: 8px;
  justify-content: center;
}

.hero-cinematic-text > * {
  opacity: 0;
  animation: hero-text-rise 0.7s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
.hero-cinematic-text > *:nth-child(1) { animation-delay: 0.95s; }
.hero-cinematic-text > *:nth-child(2) { animation-delay: 1.10s; }
.hero-cinematic-text > *:nth-child(3) { animation-delay: 1.20s; }
.hero-cinematic-text > *:nth-child(4) { animation-delay: 1.30s; }

@keyframes hero-text-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Tighter on phone — no parallax, smaller stage, less drama */
@media (max-width: 700px) {
  .hero.hero--cinematic { padding: 0 0 32px; }
  .hero-stage {
    /* Slightly taller aspect on mobile so Octo's full face/body shows */
    aspect-ratio: 4 / 3;
    max-height: 56vh;
    min-height: 240px;
  }
  .hero-cinematic-text { padding: 28px 20px 0; }
}

/* Honor reduced-motion: skip the entrance + float, show static */
@media (prefers-reduced-motion: reduce) {
  .hero-stage,
  .hero-cinematic-video,
  .hero-cinematic-text > * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

.hero h1 .accent {
  /* Multi-line-safe highlight: render the teal underline as a gradient
     background that follows the text on every line it wraps onto.
     box-decoration-break: clone makes the background restart per line
     instead of stretching across the whole inline box (which on narrow
     Android viewports could overlap the word when the phrase wrapped). */
  display: inline;
  background-image: linear-gradient(180deg, transparent 0, transparent 78%, rgba(55, 140, 140, 0.22) 78%, rgba(55, 140, 140, 0.22) 95%, transparent 95%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 1px;
}

@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero::after { animation: none; }
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
}

.hero-badge-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex: 0 0 auto;
}

.hero-badge-dot::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.4;
  animation: badge-pulse 2.2s ease-out infinite;
}

@keyframes badge-pulse {
  0% { transform: scale(1); opacity: 0.4; }
  70%, 100% { transform: scale(2.2); opacity: 0; }
}

.hero h1 {
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0 0 12px;
}

.hero h1 .accent { color: var(--accent); }

.hero p.lead {
  font-size: 19px;
  color: var(--muted);
  max-width: 56ch;
  margin: 0 0 32px;
}

.cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.hero-meta {
  margin-top: 24px;
  font-size: 13px;
  color: var(--muted);
}

.hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-photo {
  width: 360px;
  height: 360px;
  border-radius: 50%;
  object-fit: cover;
  background: #000;
  box-shadow: 0 30px 60px rgba(11,36,71,.12), 0 2px 6px rgba(11,36,71,.06);
}

/* ---------- Generic content grids ---------- */

.three-col,
.problem-grid,
.offer-grid,
.steps-grid,
.case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}

.card:hover {
  transform: translateY(-2px);
  border-color: rgba(55, 140, 140,.35);
  box-shadow: 0 12px 28px rgba(17,17,17,.08);
}

.card h3 {
  font-size: 19px;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}

.card p {
  font-size: 15px;
  color: var(--muted);
  margin: 0;
  line-height: 1.55;
}

.card ul {
  margin: 12px 0 0;
  padding-left: 18px;
  font-size: 14px;
  color: var(--text);
}

.card ul li { margin-bottom: 4px; }

.card-icon {
  width: 36px;
  height: 36px;
  color: var(--accent);
  margin-bottom: 18px;
  display: block;
}

/* problem cards: more prose-y, no icon, big lead-in quote */
.problem-card .quote {
  display: block;
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

/* offer cards: big title with accent color */
.offer-card h3 {
  color: var(--accent);
  font-size: 22px;
  letter-spacing: -0.015em;
  margin-bottom: 10px;
}

/* step cards: with step number */
.step-card .step-num {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 10px;
}

/* ---------- Comparison table ---------- */

.compare-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

table.compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  min-width: 640px;
}

table.compare th,
table.compare td {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

table.compare thead th {
  font-weight: 600;
  font-size: 14px;
  color: var(--muted);
  background: var(--bg);
  letter-spacing: 0.01em;
}

table.compare thead th:nth-child(2) {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}

table.compare tbody tr:last-child td { border-bottom: 0; }

table.compare tbody td:first-child {
  font-weight: 500;
  color: var(--text);
}

table.compare tbody td:nth-child(2) {
  background: rgba(55, 140, 140,.04);
  font-weight: 500;
  color: var(--text);
}

.check { color: var(--accent); font-weight: 700; }
.cross { color: var(--muted); opacity: 0.6; }

/* ---------- Case study cards ---------- */

.case-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.case-card .case-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 4px 10px;
  border-radius: 999px;
  align-self: flex-start;
}

.case-card h3 {
  font-size: 18px;
  letter-spacing: -0.01em;
}

.case-card p {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}

.case-card .case-status {
  margin-top: auto;
  font-size: 13px;
  color: var(--muted);
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-style: italic;
}

/* ---------- FAQ ---------- */

.faq-list {
  max-width: 800px;
  margin: 0 auto;
  border-top: 1px solid var(--line);
}

.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 4px 0;
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 40px 22px 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  position: relative;
  transition: color .15s;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary:hover { color: var(--accent); }

.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  font-weight: 400;
  color: var(--muted);
  transition: transform .2s;
  line-height: 1;
}

.faq-item[open] summary::after {
  content: '−';
  color: var(--accent);
}

.faq-item .faq-answer {
  padding: 0 40px 22px 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

/* ---------- Final CTA banner ---------- */

.cta-banner {
  /* Soft cream gradient — matches the hero video background so the homepage
     reads as one cohesive surface instead of a heavy dark slab at the end. */
  background: linear-gradient(135deg, #faf9f5 0%, #efeee9 100%);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 48px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Subtle teal glow centered behind the content */
.cta-banner::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  height: 70%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(55, 140, 140, 0.10), rgba(55, 140, 140, 0));
  pointer-events: none;
}

.cta-banner > * { position: relative; }

.cta-banner h2 {
  color: var(--text);
  font-size: clamp(26px, 3vw, 34px);
  margin-bottom: 12px;
  letter-spacing: -0.02em;
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}

.cta-banner p {
  color: var(--muted);
  font-size: 16px;
  max-width: 54ch;
  margin: 0 auto 24px;
}

.cta-banner .btn-primary {
  box-shadow: 0 6px 20px rgba(55, 140, 140, 0.22);
}

/* ---------- About page ---------- */

.about-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 56px;
  align-items: start;
}

.about-photo {
  width: 100%;
  max-width: 360px;
  aspect-ratio: 1;
  /* Circular crop — the source JPG has a round avatar on a black
     square canvas, so a 50% radius hides those corners and removes
     all the surrounding black. */
  border-radius: 50%;
  object-fit: cover;
  background: transparent;
  box-shadow: var(--shadow);
}

.about-bio p {
  font-size: 17px;
  margin: 0 0 18px;
  color: var(--text-soft);
}

.about-bio p:first-child {
  font-size: 19px;
  color: var(--text);
  font-weight: 500;
}

/* "Where I trained" strip */
.experience-strip {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}

.experience-eyebrow {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 20px;
}

.experience-logos {
  display: flex;
  align-items: center;
  gap: 56px;
  flex-wrap: wrap;
}

.experience-logos img {
  height: 28px;
  width: auto;
  max-width: 140px;
  opacity: 0.65;
  filter: grayscale(1);
  transition: opacity .2s, filter .2s;
}

.experience-logos img:hover {
  opacity: 1;
  filter: grayscale(0);
}

/* Brands carousel (About page) */
.brands-section {
  padding: 80px 0;
  overflow: hidden;
  background: var(--surface);
}

.brands-section .container { text-align: center; }
.brands-section .section-lead { margin: 0 auto 48px; }

.brands-marquee {
  width: 100%;
  overflow: hidden;
  padding: 20px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.brands-track {
  display: flex;
  align-items: center;
  gap: 64px;
  width: max-content;
  list-style: none;
  padding: 0;
  margin: 0;
  animation: brands-scroll 80s linear infinite;
}

.brands-marquee:hover .brands-track {
  animation-play-state: paused;
}

.brand-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
}

.brand-item {
  position: relative;
}

.brand-item::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 110%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(55, 140, 140,.22) 0%, transparent 65%);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
  transition: opacity .35s ease-out, transform .35s ease-out;
  z-index: -1;
  pointer-events: none;
}

.brand-item:nth-child(3n+1)::before {
  background: radial-gradient(circle, rgba(55, 140, 140,.22) 0%, transparent 65%);
}

.brand-item:nth-child(3n+2)::before {
  background: radial-gradient(circle, rgba(212, 165, 116,.25) 0%, transparent 65%);
}

.brand-item:nth-child(3n+3)::before {
  background: radial-gradient(circle, rgba(139,92,246,.22) 0%, transparent 65%);
}

.brand-item:hover::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.brand-item img {
  height: 38px;
  width: auto;
  max-width: 140px;
  filter: grayscale(1);
  opacity: 0.5;
  transition: filter .3s, opacity .3s, transform .3s cubic-bezier(.34, 1.56, .64, 1);
}

.brand-item--mark img {
  height: 28px;
  max-width: 64px;
}

.brand-item:hover img {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.12) translateY(-4px);
}

@keyframes brands-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .brands-track { animation: none; }
}

/* ---------- Services detail page ---------- */

.service-detail {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 48px;
  padding: 48px 0;
  border-bottom: 1px solid var(--line);
}

.service-detail:last-child { border-bottom: 0; }

.service-detail .meta { padding-top: 4px; }

.service-detail .service-icon {
  width: 44px;
  height: 44px;
  color: var(--accent);
  margin-bottom: 16px;
}

.service-detail h3 {
  font-size: 24px;
  letter-spacing: -0.015em;
  margin-bottom: 8px;
}

.service-detail .meta p {
  color: var(--muted);
  font-size: 15px;
}

.service-detail .detail-body h4 {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 10px;
}

.service-detail .detail-body ul {
  margin: 0 0 24px;
  padding-left: 20px;
  font-size: 16px;
  color: var(--text-soft);
}

.service-detail .detail-body ul li {
  margin-bottom: 8px;
}

.service-detail .detail-body > div + div { margin-top: 8px; }

.service-detail .outcome {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  padding: 14px 18px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 15px;
  color: var(--text);
}

.service-detail .outcome strong { color: var(--accent); }

/* ============================================================
   SERVICE TABS — horizontal carousel + swap-in detail panel
   ============================================================
   Used on /services/ (+ /es/servicios/). The 5 service offerings
   live in a true horizontal carousel — arrows on desktop, thumb
   swipe on mobile. Tap a card to reveal its detail panel below. */

.service-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 4px;
}

.service-carousel-arrow {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}

.service-carousel-arrow svg {
  width: 18px;
  height: 18px;
}

.service-carousel-arrow:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  transform: scale(1.05);
}

.service-carousel-arrow:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.service-carousel-arrow[disabled] {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
  transform: none;
}

.service-tabs {
  flex: 1;
  display: flex;
  gap: 10px;
  padding: 4px 4px 12px;
  margin: 0;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-padding-left: 4px;
}
.service-tabs::-webkit-scrollbar { display: none; }

/* Arrows hidden on small screens — thumb swipe is the native UX */
@media (max-width: 700px) {
  .service-carousel-arrow { display: none; }
  .service-carousel { gap: 0; }
}

.service-tab {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 18px;
  min-width: 150px;
  max-width: 180px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  scroll-snap-align: start;
  flex-shrink: 0;
}

.service-tab span {
  display: block;
}

.service-tab svg {
  width: 28px;
  height: 28px;
  color: var(--muted);
  transition: color 0.15s ease, transform 0.15s ease;
  flex-shrink: 0;
}

.service-tab:hover svg { transform: scale(1.08); }

.service-tab:hover {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 2px 8px rgba(55, 140, 140, 0.08);
}
.service-tab:hover svg { color: var(--accent); }

.service-tab.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 4px 14px rgba(55, 140, 140, 0.25);
}
.service-tab.is-active svg { color: #fff; }

.service-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Panels — only one visible at a time. The `hidden` attribute on
   inactive panels handles display:none; the active panel sits in a
   soft card so the swap feels intentional rather than a blink. */
.service-panels {
  position: relative;
}

/* Placeholder shown when no service tab has been tapped yet — keeps
   the page short on load and invites the visitor to pick one.
   No border / no background — just a soft inline hint so it doesn't
   visually compete with the active service panel that replaces it. */
.service-panel-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

.service-panel-empty svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
  flex-shrink: 0;
  transform: rotate(90deg);
}

.service-panel-empty p {
  margin: 0;
}

.service-panel-empty[hidden] {
  display: none;
}

.service-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 36px;
  animation: service-panel-fade 0.25s ease-out;
}

@keyframes service-panel-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.service-panel h3 {
  font-size: 26px;
  letter-spacing: -0.015em;
  margin: 0 0 6px;
}

.service-panel-lead {
  color: var(--muted);
  font-size: 16px;
  margin: 0 0 20px;
  max-width: 62ch;
}

.service-panel h4 {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 10px;
}

.service-panel ul {
  margin: 0 0 22px;
  padding-left: 20px;
  font-size: 16px;
  color: var(--text-soft);
}

.service-panel ul li {
  margin-bottom: 8px;
}

.service-panel .outcome {
  background: linear-gradient(135deg, var(--accent-soft) 0%, rgba(212, 165, 116, .06) 100%);
  border-left: 4px solid var(--accent);
  padding: 14px 18px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 15px;
  color: var(--text);
}

.service-panel .outcome strong { color: var(--accent); }

/* Mobile-only swipe hint at the bottom of each panel, injected by JS.
   A two-line cue ("← Prev" / "Next →") with the neighbor service name
   so the visitor knows they can swipe horizontally to navigate
   without having to scroll all the way back up to the tab strip. */
.service-panel-swipe-hint {
  display: none;
}
@media (max-width: 700px) {
  .service-panel-swipe-hint {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    font-size: 13px;
    color: var(--muted);
  }
  .service-panel-swipe-hint span { line-height: 1.3; }
  .service-panel-swipe-hint .is-disabled { opacity: 0.3; }
  .service-panel-swipe-hint strong {
    display: block;
    color: var(--accent);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 2px;
  }
}

/* On phones: full-bleed the carousel, show EXACTLY two service tabs
   per viewport (with one snap step per card so dots count cleanly),
   and shrink the detail card so it doesn't dominate the viewport. */
@media (max-width: 700px) {
  .service-tabs {
    padding: 4px 20px 12px;
    margin: 0 -20px;
    scroll-padding-left: 20px;
    gap: 12px;
  }

  /* (viewport - left padding - right padding - 1 gap) / 2 cards = 2 visible.
     Snap-aligns to the left so each swipe shifts exactly one card. */
  .service-tab {
    flex: 0 0 calc((100vw - 40px - 12px) / 2);
    max-width: 220px;
    min-width: 0;
    padding: 18px 14px;
    font-size: 14px;
  }

  .service-tab svg { width: 26px; height: 26px; }

  .service-panel {
    padding: 24px 22px;
  }
  .service-panel h3 { font-size: 22px; }
  .service-panel-lead { font-size: 15px; }
  .service-panel ul { font-size: 15px; }
}

/* ---------- Contact page ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: start;
}

.calendly-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 24px 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.calendly-inline-widget {
  border-radius: var(--radius-sm);
  overflow: hidden;
  width: 100%;
}

/* Mobile: shrink the Calendly embed so it doesn't dominate the page.
   The HTML sets a 700px inline height — !important is needed to win.
   We also tighten the wrapping card's padding so the widget gets
   more usable width on narrow viewports. */
@media (max-width: 700px) {
  .calendly-wrap {
    padding: 16px 12px 8px;
  }
  .calendly-inline-widget {
    height: 560px !important;
    min-width: 0 !important;
  }
}

.contact-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contact-form .form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-form label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.contact-form label .opt {
  color: var(--muted);
  font-weight: 400;
  margin-left: 6px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 15px;
  color: var(--text);
  background: var(--bg);
  font-family: inherit;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.contact-form textarea {
  min-height: 110px;
  resize: vertical;
}

.contact-form button {
  margin-top: 8px;
  align-self: flex-start;
}

.contact-extra {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.contact-extra h4 {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 6px;
}

.contact-extra p, .contact-extra a {
  font-size: 16px;
  color: var(--text);
  margin: 0;
}

.contact-extra a:hover { color: var(--accent); }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--text);
  color: rgba(255,255,255,0.7);
  padding: 56px 0 40px;
  font-size: 14px;
  margin-top: 40px;
}

.site-footer a { color: rgba(255,255,255,0.85); }
.site-footer a:hover { color: #fff; }

.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.footer-brand {
  font-weight: 700;
  font-size: 19px;
  color: #fff;
  display: block;
  margin-bottom: 12px;
}

.footer-tag {
  color: rgba(255,255,255,0.6);
  font-size: 14px;
  max-width: 32ch;
}

.footer-col h4 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.5);
  margin: 0 0 14px;
  font-weight: 600;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col li { margin-bottom: 10px; }

.footer-bottom {
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: rgba(255,255,255,0.5);
}

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  .hero .container { grid-template-columns: 1fr; gap: 40px; }
  .hero-photo { width: 280px; height: 280px; }
  .three-col, .problem-grid, .offer-grid, .steps-grid, .case-grid, .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .about-grid { grid-template-columns: 1fr; gap: 32px; }
  .about-photo { max-width: 260px; }
  .service-detail { grid-template-columns: 1fr; gap: 24px; }
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .contact-extra { grid-template-columns: 1fr; gap: 16px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 700px) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    background: var(--bg);
    flex-direction: column;
    gap: 0;
    padding: 8px 24px 20px;
    border-bottom: 1px solid var(--line);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 0; border-bottom: 1px solid var(--line); width: 100%; }
  .nav-links .lang-switcher { margin: 12px 0 0; align-self: flex-start; }
  /* On mobile, anchor the dropdown to the left edge so it doesn't
     clip off-screen when the globe is on the left side of the
     collapsed hamburger menu. */
  .nav-links .lang-switcher-menu { right: auto; left: 0; }

  section { padding: 64px 0; }
  .hero { padding: 56px 0 64px; }
  .hero-photo { width: 220px; height: 220px; }

  .three-col, .problem-grid, .steps-grid, .services-grid {
    grid-template-columns: 1fr;
  }

  /* ---- Mobile horizontal swipe carousels ----
     These sections turn into snap-scroll rows on phones — more agency-like
     than another vertical stack, and lets visitors flip through cards with
     a thumb swipe. Hides the scrollbar but keeps the native scroll feel.
     Each card is sized so the next one peeks ~50px, signalling "swipe me". */
  .offer-grid,
  .case-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 16px;
    padding: 4px 20px 4px;
    margin: 0 -20px;
    scroll-padding-left: 20px;
  }
  .offer-grid::-webkit-scrollbar,
  .case-grid::-webkit-scrollbar { display: none; }
  /* One card per viewport. Each card claims the full visible width
     (minus the 20px container padding on each side) so the visitor
     can only see one offering at a time — no half-peek of the next
     card that makes it look like the UI didn't adapt. */
  .offer-grid > *,
  .case-grid > * {
    flex: 0 0 calc(100vw - 40px);
    max-width: 480px;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    min-width: 0;
  }

  .cta-banner { padding: 40px 24px; }
  .footer-top { grid-template-columns: 1fr; }
}

/* ---------- Carousel pagination dots ----------
   Sits below mobile horizontal carousels (offer-grid). Each dot
   reflects one card; the active one is filled with brand teal so
   the visitor can see which card they're on. Hidden on desktop. */
.carousel-dots {
  display: none;
}

@media (max-width: 700px) {
  .carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 6px 0 0;
    margin: 0;
  }
  .carousel-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 50%;
    border: 0;
    background: var(--line-strong);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease, width 0.2s ease;
  }
  .carousel-dot.is-active {
    background: var(--accent);
    width: 24px;
    border-radius: 999px;
  }
  .carousel-dot:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }
}

/* ============================================================
   CREATIVE LAYER — agency-style visuals & motion
   ============================================================ */

/* ---------- Stats counter row (under hero) ---------- */

.stats-row {
  padding: 0 0 64px;
  position: relative;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.stat-cell {
  padding: 28px 24px;
  text-align: center;
  border-right: 1px solid var(--line);
  position: relative;
  transition: background .2s;
}

.stat-cell:last-child { border-right: 0; }

.stat-cell:hover { background: rgba(55, 140, 140,.03); }

.stat-num {
  display: block;
  font-size: clamp(34px, 4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.stat-num .accent { color: var(--accent); }

.stat-label {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

@media (max-width: 760px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-cell:nth-child(2) { border-right: 0; }
  .stat-cell:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

/* ---------- Service / generic card upgrade (agency feel) ---------- */

.card {
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s ease-out;
}

.card:hover::before {
  transform: scaleX(1);
}

/* Tinted icon container */
.services-grid .card .card-icon,
.feature-card .feature-icon {
  padding: 8px;
  background: var(--accent-soft);
  border-radius: 10px;
  box-sizing: content-box;
  width: 24px;
  height: 24px;
  margin-bottom: 18px;
}

/* Rotate accent color for variety in service cards */
.services-grid .card:nth-child(3n+2) .card-icon {
  background: var(--accent2-soft);
  color: var(--accent2);
}

.services-grid .card:nth-child(3n+3) .card-icon {
  background: rgba(139, 92, 246, .10);
  color: var(--accent3);
}

/* ---------- Section background accents ---------- */

#services,
#features,
#how,
#offer {
  position: relative;
  overflow: hidden;
}

#services::before,
#features::before {
  content: '';
  position: absolute;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

#services::before {
  background: radial-gradient(circle, rgba(212, 165, 116,.25), transparent 70%);
  top: -100px;
  right: -100px;
}

#features::before {
  background: radial-gradient(circle, rgba(55, 140, 140,.18), transparent 70%);
  bottom: -100px;
  left: -100px;
}

#services .container,
#features .container,
#how .container,
#offer .container {
  position: relative;
  z-index: 1;
}

/* ---------- Brands section gets a softer canvas ---------- */

.brands-section {
  background: linear-gradient(180deg, var(--bg) 0%, var(--surface) 50%, var(--bg) 100%);
}

/* ---------- Scroll-reveal system ---------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease-out, transform .7s ease-out;
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children when a grid-wrapper is revealed */
.reveal-stagger > .reveal:nth-child(2) { transition-delay: .08s; }
.reveal-stagger > .reveal:nth-child(3) { transition-delay: .16s; }
.reveal-stagger > .reveal:nth-child(4) { transition-delay: .24s; }
.reveal-stagger > .reveal:nth-child(5) { transition-delay: .32s; }
.reveal-stagger > .reveal:nth-child(6) { transition-delay: .40s; }
.reveal-stagger > .reveal:nth-child(7) { transition-delay: .48s; }
.reveal-stagger > .reveal:nth-child(8) { transition-delay: .56s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Misc creative polish ---------- */

.section-eyebrow::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--accent);
  vertical-align: middle;
  margin-right: 10px;
  transform: translateY(-2px);
}

/* ---------- Bolder hero treatment ---------- */

.hero {
  padding: 96px 0 112px;
  background-size: 32px 32px;
}

.hero h1 {
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.hero-visual { position: relative; }

.hero-photo {
  width: 360px;
  height: 360px;
  border: 6px solid #fff;
  box-shadow:
    0 30px 80px rgba(11,36,71,.18),
    0 0 0 1px rgba(11,36,71,.04);
}

/* Floating shapes around the hero photo */
.hero-shape {
  position: absolute;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 12px 36px rgba(11,36,71,.10), 0 1px 2px rgba(11,36,71,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  z-index: 2;
  white-space: nowrap;
}

.hero-shape .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
}

.hero-shape-1 {
  top: -16px;
  left: -20px;
  padding: 10px 16px;
  animation: float-1 6s ease-in-out infinite;
}

.hero-shape-2 {
  bottom: 0;
  right: -28px;
  padding: 10px 16px;
  animation: float-2 7s ease-in-out infinite;
}

.hero-shape-3 {
  top: 50%;
  left: -56px;
  padding: 10px 16px;
  animation: float-3 8s ease-in-out infinite;
}

@keyframes float-1 {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes float-2 {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}
@keyframes float-3 {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-6px, -6px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-shape-1, .hero-shape-2, .hero-shape-3 { animation: none; }
}

@media (max-width: 980px) {
  .hero-photo { width: 240px; height: 240px; border-width: 4px; }
  .hero-shape { font-size: 12px; padding: 8px 12px; }
  .hero-shape-3 { display: none; }
}

@media (max-width: 700px) {
  .hero-shape { display: none; }
}

/* ---------- Process flow (How it works) ---------- */

.process-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
  margin-top: 20px;
}

.process-flow::before {
  content: '';
  position: absolute;
  top: 28px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: linear-gradient(90deg,
    var(--accent) 0%,
    var(--accent2) 50%,
    var(--accent3) 100%);
  z-index: 0;
  opacity: 0.35;
}

.process-step {
  text-align: center;
  position: relative;
  z-index: 1;
  padding: 0 18px;
}

.process-badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--accent);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 17px;
  margin: 0 auto 24px;
  position: relative;
  z-index: 2;
  box-shadow: 0 6px 16px rgba(55, 140, 140,.18);
  transition: transform .25s ease-out, box-shadow .25s ease-out;
  font-variant-numeric: tabular-nums;
}

.process-step:hover .process-badge {
  transform: translateY(-3px) scale(1.06);
}

.process-step:nth-child(2) .process-badge {
  border-color: var(--accent2);
  color: var(--accent2);
  box-shadow: 0 6px 16px rgba(212, 165, 116,.18);
}
.process-step:nth-child(3) .process-badge {
  border-color: var(--line-strong);
  color: var(--muted);
  box-shadow: 0 6px 16px rgba(17, 17, 17, 0.10);
}
.process-step:nth-child(4) .process-badge {
  border-color: var(--text);
  color: var(--text);
  box-shadow: 0 6px 16px rgba(11,36,71,.18);
}

.process-week {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

.process-step h3 {
  font-size: 18px;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.process-step p {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
  line-height: 1.55;
}

@media (max-width: 700px) {
  /* Convert the 4-step grid into a horizontal swipe carousel —
     one step per viewport, snap-aligned, with dots below.
     Breakpoint matches .carousel-dots so dots appear exactly when
     the carousel mode kicks in. */
  .process-flow {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 14px;
    padding: 4px 20px 4px;
    margin: 20px -20px 0;
    scroll-padding-left: 20px;
  }
  .process-flow::-webkit-scrollbar { display: none; }
  .process-flow::before { display: none; }

  /* One step per viewport — same recipe as the offer-card carousel */
  .process-step {
    flex: 0 0 calc(100vw - 40px);
    max-width: 480px;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    min-width: 0;
    padding: 28px 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
  }
}

/* ---------- Problem cards with illustrations ---------- */

.problem-illustration {
  width: 56px;
  height: 56px;
  margin-bottom: 16px;
  color: var(--accent);
}

.problem-card:nth-child(2) .problem-illustration { color: var(--accent2); }
.problem-card:nth-child(3) .problem-illustration { color: var(--accent3); }

/* ---------- "What you actually get" visual showcase ---------- */

.showcase {
  background: var(--surface);
  padding: 96px 0;
  position: relative;
  overflow: hidden;
}

.showcase::before {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(212, 165, 116,.20), transparent 70%);
  filter: blur(80px);
  top: -200px; right: -150px;
  z-index: 0;
}

.showcase .container { position: relative; z-index: 1; }

.showcase-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
  margin-top: 40px;
}

.showcase-grid.reverse { grid-template-columns: 0.9fr 1.1fr; }
.showcase-grid.reverse .showcase-visual { order: -1; }

.showcase-visual {
  position: relative;
}

.showcase-image-frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow:
    0 30px 60px rgba(11,36,71,.18),
    0 0 0 1px rgba(11,36,71,.04);
  background: var(--text);
}

.showcase-image-frame img {
  display: block;
  width: 100%;
  height: auto;
}

.showcase-image-frame::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 28px;
  background: var(--text);
  z-index: 1;
}

.showcase-image-frame::after {
  content: '\2022 \2022 \2022';
  position: absolute;
  top: 8px;
  left: 14px;
  color: rgba(255,255,255,.4);
  font-size: 22px;
  letter-spacing: 2px;
  line-height: 1;
  z-index: 2;
}

.showcase-image-frame img {
  position: relative;
  z-index: 0;
  margin-top: 28px;
}

/* When the framed asset is the dashboard SVG, drop the dark bar overlay
   since the SVG already has its own header. */
.showcase-image-frame.is-mockup { background: var(--surface); }
.showcase-image-frame.is-mockup::before { display: none; }
.showcase-image-frame.is-mockup::after { display: none; }
.showcase-image-frame.is-mockup img { margin-top: 0; }

.showcase-body h3 {
  font-size: 28px;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}

.showcase-body p {
  font-size: 17px;
  color: var(--muted);
  margin: 0 0 12px;
  line-height: 1.6;
}

.showcase-body ul {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
}

.showcase-body ul li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
  font-size: 15px;
  color: var(--text);
}

.showcase-body ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 16px;
  height: 8px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

@media (max-width: 860px) {
  .showcase-grid, .showcase-grid.reverse {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .showcase-grid.reverse .showcase-visual { order: 0; }
}

/* ---------- Service-detail page enhancement ---------- */

.service-detail .meta .service-icon {
  background: var(--accent-soft);
  padding: 12px;
  border-radius: 12px;
  width: 28px;
  height: 28px;
  box-sizing: content-box;
}

.service-detail:nth-child(2n) .meta .service-icon {
  background: var(--accent2-soft);
  color: var(--accent2);
}

.service-detail:nth-child(3n+3) .meta .service-icon {
  background: rgba(139,92,246,.10);
  color: var(--accent3);
}

.service-detail .meta::before {
  content: counter(svc, decimal-leading-zero);
  counter-increment: svc;
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}

#services + section[style*="padding-top: 0"] > .container,
section[style*="padding-top: 0"] > .container:has(.service-detail) {
  counter-reset: svc;
}

.service-detail .outcome {
  border-left-width: 4px;
  background: linear-gradient(135deg, var(--accent-soft) 0%, rgba(212, 165, 116,.06) 100%);
}


/* ---------- Tier cards (Where to start) ---------- */

.tiers-section {
  position: relative;
  overflow: hidden;
  padding-bottom: 48px;
}

/* Tighten the gap into "How it works" — they're meant to read as one
   continuous flow (pick a tier, then see the process). */
#how {
  padding-top: 48px;
}

@media (max-width: 760px) {
  .tiers-section { padding-bottom: 32px; }
  #how { padding-top: 32px; }
}

.tiers-section::before {
  content: '';
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.45;
  background: radial-gradient(circle, rgba(55, 140, 140,.20), transparent 70%);
  top: -120px;
  right: -120px;
  z-index: 0;
  pointer-events: none;
}

.tiers-section::after {
  content: '';
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.35;
  background: radial-gradient(circle, rgba(212, 165, 116,.22), transparent 70%);
  bottom: -120px;
  left: -120px;
  z-index: 0;
  pointer-events: none;
}

.tiers-section .container { position: relative; z-index: 1; }

.tiers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 16px;
}

.tier-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 36px 32px 32px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}

.tier-card:hover {
  transform: translateY(-4px);
  border-color: rgba(55, 140, 140,.45);
  box-shadow: 0 24px 48px rgba(11,36,71,.08);
}

.tier-card--growth:hover { border-color: rgba(212, 165, 116,.45); }

.tier-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--accent);
}

.tier-card--growth::before {
  background: linear-gradient(90deg, var(--accent2), var(--accent3));
}

.tier-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 6px 12px;
  border-radius: 999px;
  align-self: flex-start;
}

.tier-card--growth .tier-tag {
  color: var(--accent2);
  background: var(--accent2-soft);
}

.tier-card h3 {
  font-size: 26px;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.15;
}

.tier-pitch {
  color: var(--text-soft);
  font-size: 16px;
  margin: 0;
  line-height: 1.55;
  font-weight: 500;
}

.tier-block h4 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}

.tier-block p {
  font-size: 15px;
  color: var(--text-soft);
  margin: 0;
  line-height: 1.55;
}

.tier-block ul,
ul.tier-block {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tier-block ul li,
ul.tier-block li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 8px;
  font-size: 15px;
  color: var(--text-soft);
  line-height: 1.5;
}

.tier-block ul li::before,
ul.tier-block li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 14px;
  height: 7px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

.tier-card--growth .tier-block ul li::before,
.tier-card--growth ul.tier-block li::before {
  border-color: var(--accent2);
}

.tier-card .btn {
  margin-top: 8px;
  align-self: flex-start;
}

.tier-card--growth .btn-primary {
  background: var(--accent2);
  box-shadow: 0 1px 2px rgba(212, 165, 116,.20), 0 6px 14px rgba(212, 165, 116,.20);
}

.tier-card--growth .btn-primary:hover {
  background: #0F9D8E;
}

/* ---------- Tier 3: Automate (AI / chatbot / voice / CRM) ---------- */
/* Differentiated visual without going purple: deep ink accent. */
.tier-card--automate:hover { border-color: rgba(11, 36, 71, 0.45); }

.tier-card--automate::before {
  background: linear-gradient(90deg, var(--accent), var(--text));
}

.tier-card--automate .tier-tag {
  color: var(--text);
  background: var(--bg);
}

.tier-card--automate .tier-block ul li::before,
.tier-card--automate ul.tier-block li::before {
  border-color: var(--text);
}

.tier-card--automate .btn-primary {
  background: var(--text);
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.20), 0 6px 14px rgba(17, 17, 17, 0.18);
}

.tier-card--automate .btn-primary:hover {
  background: #000;
}

/* Tablets get a 2-up grid; first two tiers side-by-side, Tier 3
   wraps to its own row centered. */
@media (max-width: 1000px) {
  .tiers-grid { grid-template-columns: repeat(2, 1fr); }
}

/* On phones, stack all three tiers vertically — each tier has a
   bulleted feature list now, so 1-column gives each enough room to
   read without cramming. */
@media (max-width: 700px) {
  .tiers-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 20px;
  }
  .tiers-grid .tier-card {
    padding: 22px 18px;
  }
  .tiers-grid .tier-card .btn { width: 100%; text-align: center; }
  /* No carousel on this section anymore — hide any leftover dots */
  .tiers-grid + .carousel-dots { display: none; }
}

/* ---------- Contact page: tier context badge ---------- */

.tier-context {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 14px 18px;
  margin-bottom: 28px;
}

.tier-context.is-growth {
  background: var(--accent2-soft);
  border-left-color: var(--accent2);
}

.tier-context-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}

.tier-context.is-growth .tier-context-label {
  color: var(--accent2);
}

.tier-context-msg {
  font-size: 14.5px;
  color: var(--text);
  margin: 0;
  line-height: 1.5;
}

/* ---------- Audience gallery (art-gallery scatter) ---------- */

.gallery {
  padding: 48px 0 64px;
  position: relative;
}

.gallery .section-eyebrow,
.gallery .section-title,
.gallery .section-lead {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.gallery .section-eyebrow {
  display: inline-block;
  text-align: left;
}

.gallery-scatter {
  position: relative;
  height: 360px;
  max-width: 1100px;
  margin: 40px auto 0;
}

.gallery .g {
  position: absolute;
  margin: 0;
  width: 180px;
  transition: transform 0.3s ease;
}

.gallery .g:hover {
  transform: translateY(-6px);
  z-index: 2;
}

.gallery .g-img {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: linear-gradient(180deg, #F5F5F5 0%, #E8E8E8 100%);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(17, 17, 17, 0.12);
}

.gallery .g-img::before {
  /* subtle placeholder mark when no image is present */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 50% 35%, rgba(17, 17, 17, 0.04), transparent 60%);
  pointer-events: none;
}

.gallery .g-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery .g figcaption {
  margin-top: 12px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  font-weight: 500;
}

/* Balanced row of 5 equal-size portraits, evenly spaced, with a
   gentle alternating vertical offset for a wave-like rhythm. The
   `--g-x` positions (5%, 25%, 45%, 65%, 85%) make the row symmetric
   around 45% — leaving room on the right edge for the same outer
   margin as the left. */
.gallery .g1 { left: 3%;   top: 14%; }
.gallery .g2 { left: 23%;  top: 2%;  }
.gallery .g3 { left: 43%;  top: 18%; }
.gallery .g4 { left: 63%;  top: 2%;  }
.gallery .g5 { left: 83%;  top: 14%; }
/* The center portrait was a "feature" before — keep it slightly
   highlighted but no longer dominating in size. */
.gallery .g3.g-center { width: 180px; transform: none; }

/* Soft halo behind central portrait */
.gallery-scatter::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 12%;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, #f7f7f7, rgba(247, 247, 247, 0) 65%);
  filter: blur(40px);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: -1;
}

@media (max-width: 900px) {
  .gallery { padding: 32px 0 24px; }

  .gallery-scatter {
    position: static;
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .gallery-scatter::before { display: none; }

  .gallery .g,
  .gallery .g1, .gallery .g2, .gallery .g3, .gallery .g4, .gallery .g5 {
    position: static;
    width: 100%;
    transform: none;
  }

  .gallery .g3.g-center {
    grid-column: 1 / -1;
    max-width: 280px;
    margin: 0 auto 12px;
  }
}

/* On phones, the audience gallery becomes a one-card-per-viewport
   horizontal carousel with dots underneath — matches every other
   carousel on the site. Breakpoint synced to 700px so the dots
   (which show at ≤700px) appear exactly when the carousel mode
   kicks in. */
@media (max-width: 700px) {
  .gallery-scatter {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 14px;
    padding: 4px 20px 4px;
    margin: 0 -20px;
    scroll-padding-left: 20px;
    height: auto;
    align-items: flex-start;
  }
  .gallery-scatter::-webkit-scrollbar { display: none; }
  /* Each card fills the entire scrollable viewport so no part of the
     next card is visible behind it. The 320px max-width cap was
     causing a 15–25px sliver of the next video to peek through on
     wider phones (especially iPhones at 390–430px). Now cards are
     100% of the scroll area + scroll-snap-stop: always — true
     one-card-at-a-time UX. */
  .gallery .g,
  .gallery .g1, .gallery .g2, .gallery .g3, .gallery .g4, .gallery .g5 {
    flex: 0 0 100%;
    max-width: none;
    margin: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .gallery .g3.g-center {
    grid-column: auto;
    margin: 0;
    max-width: none;
  }
}

/* Audience gallery — video cells (same treatment as <img>) */
.gallery .g-img video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Placeholder cell — for audience figures we haven't shot yet.
   Keeps the gallery's composition intact while signaling the slot. */
.gallery .g-img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #f5f3ec 0%, #ebe8df 100%);
}
.gallery .g-img--placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(55, 140, 140, 0.10), transparent 60%);
  pointer-events: none;
}
/* Legal pages (privacy, terms) — reader-friendly long-form layout */
.legal-doc { max-width: 720px; }
.legal-doc .legal-updated {
  font-size: 13px;
  color: var(--muted);
  margin: 4px 0 32px;
}
.legal-doc h2 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 36px 0 12px;
  color: var(--text);
}
.legal-doc p, .legal-doc li {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
}
.legal-doc ul {
  padding-left: 22px;
  margin: 12px 0 16px;
}
.legal-doc li { margin-bottom: 8px; }
.legal-doc a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.legal-doc a:hover { text-decoration-thickness: 2px; }

/* Contact form: success banner shown after Netlify Forms submit */
.form-success {
  margin-top: 20px;
  padding: 14px 18px;
  background: rgba(55, 140, 140, 0.10);
  border: 1px solid rgba(55, 140, 140, 0.30);
  border-radius: 10px;
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
}
.form-success strong { color: var(--accent); }

.gallery .g-img-coming {
  position: relative;
  z-index: 1;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.85);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(55, 140, 140, 0.25);
  box-shadow: 0 4px 12px rgba(17, 17, 17, 0.05);
}

/* ---------- Live bot demo section ---------- */

.demo {
  padding: 80px 0 32px;
}

.demo .section-lead {
  margin-bottom: 40px;
}

/* Responsive on desktop too — grows with viewport up to a chat-friendly
   cap so the bot doesn't feel cramped on large displays, but height
   never exceeds 75% of the visible viewport so footer + nav stay in view. */
.demo-frame {
  margin: 0 auto;
  width: min(100%, 640px);
  height: clamp(560px, 75vh, 720px);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #FFFFFF;
  box-shadow:
    0 30px 80px rgba(17, 17, 17, 0.12),
    0 0 0 1px rgba(55, 140, 140, 0.06);
}

.demo-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #FFFFFF;
}

.demo-meta {
  margin: 20px auto 0;
  max-width: 64ch;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

/* On phones, full-bleed the chat frame so the chat input + send button
   get the entire viewport width — no horizontal scroll inside the
   iframe to reach the send button. We also tighten the hero text so the
   chat sits closer to the top (less scrolling to reach it) and size the
   frame with dvh so the iframe's input bar is never hidden behind the
   mobile browser's URL bar. */
@media (max-width: 640px) {
  .demo { padding: 32px 0 16px; }
  .demo .section-title {
    font-size: 25px;
    line-height: 1.22;
    margin-bottom: 10px;
  }
  .demo .section-lead {
    font-size: 14.5px;
    line-height: 1.5;
    margin-bottom: 0;
  }
  .demo-mode-toggle { margin: 0 auto 18px; }
  .demo-frame {
    max-width: none;
    width: calc(100vw - 24px);
    /* Fit within the visible viewport, leaving room for the toggle above.
       dvh tracks the live viewport (URL bar in/out) so the chat input
       stays visible; vh is the fallback for older browsers. */
    height: 60vh;
    height: 60dvh;
    min-height: 360px;
    max-height: 560px;
    border-radius: 14px;
  }
  .demo-meta {
    font-size: 12px;
    margin-top: 14px;
    padding: 0 4px;
  }
}

/* ============================================================
   DEMO-MODE TOGGLE — Chat / Voice on /demo/
   ============================================================
   Two-pill toggle at the top of the demo section. Tapping a pill
   swaps the panel below (existing iframe for chat, animated phone
   mockup for voice). */
.demo-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  margin: 0 auto 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}

.demo-mode-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.demo-mode-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.demo-mode-btn:hover {
  color: var(--accent);
}

.demo-mode-btn.is-active {
  background: var(--accent);
  color: #fff;
}

.demo-mode-badge {
  display: inline-block;
  background: var(--accent2);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 4px;
  line-height: 1.3;
}

.demo-mode-btn.is-active .demo-mode-badge {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.demo-mode-panel { display: none; }
.demo-mode-panel.is-active { display: block; }
.demo-mode-panel[hidden] { display: none; }

/* ============================================================
   VOICE DEMO — phone-call mockup with auto-revealing transcript
   ============================================================
   Side-by-side on desktop: simulated phone screen on the left,
   live transcript on the right. Stacks on mobile. Lines reveal
   on a timer (handled in script.js) and the last one is a
   green "lead pushed to CRM" confirmation. */
.voice-demo {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 32px;
  /* `start` (not `stretch`) so the transcript sizes to its own content
     instead of being forced to match the phone's height — that's what
     leaves blank space below the revealed lines. */
  align-items: start;
  max-width: 840px;
  margin: 0 auto;
  text-align: left;
}

/* ---------- Phone mockup ---------- */
.voice-phone {
  background: linear-gradient(180deg, #0f1418 0%, #161b21 100%);
  border-radius: 36px;
  padding: 28px 24px 24px;
  color: #f5f5f7;
  box-shadow:
    0 30px 80px rgba(17, 17, 17, 0.30),
    0 0 0 6px rgba(255, 255, 255, 0.04) inset;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 420px;
}

.voice-phone::before {
  /* iPhone-style notch */
  content: '';
  position: absolute;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 6px;
  border-radius: 999px;
  background: #000;
  opacity: 0.6;
}

.voice-phone-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(245, 245, 247, 0.75);
  margin-top: 12px;
}

.voice-phone-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
  animation: voice-dot-pulse 1.4s ease-out infinite;
}

/* Paused state — dot turns amber, dot stops pulsing, waveform freezes
   mid-animation so it looks visually frozen rather than still active. */
.voice-phone[data-state="paused"] .voice-phone-dot {
  background: #f59e0b;
  animation: none;
  box-shadow: none;
}
.voice-phone[data-state="paused"] .voice-wave span {
  animation-play-state: paused;
}
.voice-phone[data-state="paused"] .voice-phone-label::after {
  content: ' · paused';
  opacity: 0.85;
}

@keyframes voice-dot-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
  100% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
}

.voice-phone-time {
  font-variant-numeric: tabular-nums;
  color: #fff;
  font-weight: 600;
}

.voice-phone-label {
  opacity: 0.6;
}

.voice-phone-avatar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
}

.voice-phone-name {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin-top: 4px;
}

.voice-phone-number {
  font-size: 13px;
  color: rgba(245, 245, 247, 0.55);
  font-variant-numeric: tabular-nums;
}

/* Equalizer-style waveform */
.voice-wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 64px;
  width: 120px;
}

.voice-wave span {
  display: block;
  width: 6px;
  height: 12px;
  border-radius: 999px;
  background: var(--accent);
  animation: voice-wave-bounce 0.9s ease-in-out infinite;
}
.voice-wave span:nth-child(2) { animation-delay: 0.12s; }
.voice-wave span:nth-child(3) { animation-delay: 0.24s; }
.voice-wave span:nth-child(4) { animation-delay: 0.36s; }
.voice-wave span:nth-child(5) { animation-delay: 0.48s; }

@keyframes voice-wave-bounce {
  0%, 100% { height: 8px; opacity: 0.6; }
  50%      { height: 44px; opacity: 1; }
}

.voice-phone-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* When audio is OFF, fade the audio toggle so the muted state is
   obvious at a glance. Strike-through line on the speaker icon
   visually reinforces "muted". */
#voice-audio-toggle[data-state="off"] {
  opacity: 0.55;
}

#voice-audio-toggle[data-state="off"] svg {
  position: relative;
}

#voice-audio-toggle[data-state="off"]::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 2px;
  background: currentColor;
  transform: rotate(-30deg);
  left: 12px;
  top: 50%;
  margin-top: -1px;
  border-radius: 999px;
  pointer-events: none;
}

#voice-audio-toggle {
  position: relative;
}

.voice-phone-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease;
}

.voice-phone-btn:hover {
  background: rgba(255, 255, 255, 0.16);
}

.voice-phone-btn svg {
  width: 14px;
  height: 14px;
}

/* ---------- Transcript ---------- */
.voice-transcript {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  /* No flex gap — spacing comes from per-line margins so that collapsed
     (not-yet-revealed) lines contribute ZERO height. Otherwise the gap
     would still apply around every hidden line and leave blank space. */
  gap: 0;
  /* Hug content (no forced min-height) so there's never blank space below
     the revealed lines — on desktop and mobile alike. Grows + scrolls as
     lines come in, capped by max-height. */
  min-height: 0;
  max-height: 520px;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* Hidden line = zero height + zero opacity + zero margin. When the JS adds
   .is-visible, max-height + margin animate together so the line "slides into
   existence" and the transcript grows to fit only the revealed lines. */
.voice-line {
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  transition:
    opacity 0.3s ease,
    max-height 0.4s ease,
    margin-top 0.4s ease,
    padding 0.4s ease;
}

.voice-line.is-visible {
  opacity: 1;
  max-height: 260px;
  margin-top: 14px;
}

/* First revealed line hugs the top — no leading margin. */
.voice-line:first-child.is-visible { margin-top: 0; }

.voice-speaker {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.voice-line--bot .voice-speaker { color: var(--accent); }
.voice-line--caller .voice-speaker { color: var(--accent2); }

.voice-text {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
}

.voice-line--system {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  /* Collapsed state: no vertical padding, transparent border so the line
     contributes no height until revealed. */
  padding: 0 14px;
  background: rgba(34, 197, 94, 0.08);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  margin-top: 0;
}

.voice-line--system.is-visible {
  padding: 12px 14px;
  border-color: rgba(34, 197, 94, 0.25);
  margin-top: 14px;
}

.voice-line--system svg {
  width: 18px;
  height: 18px;
  color: #16a34a;
  flex-shrink: 0;
}

.voice-line--system .voice-text {
  font-size: 14px;
  font-weight: 600;
  color: #166534;
}

/* Mobile stack — compact the phone mockup so it doesn't eat the screen,
   and let the transcript hug its content (no fixed min-height blank space).
   As each line + its audio comes in, the transcript grows and auto-scrolls
   to the newest line, so the visitor never has to scroll manually. */
@media (max-width: 760px) {
  .voice-demo {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .voice-phone {
    min-height: 0;            /* was 360px — hug content instead */
    max-width: 300px;
    margin: 0 auto;
    padding: 14px 18px 14px;
    gap: 8px;
    border-radius: 24px;
  }
  .voice-phone::before { top: 8px; }
  .voice-phone-status { margin-top: 6px; }
  /* Stop the avatar block from stretching the phone vertically. */
  .voice-phone-avatar { flex: 0 0 auto; gap: 6px; }
  .voice-wave { height: 30px; }
  .voice-phone-name { font-size: 15px; margin-top: 0; }
  .voice-phone-number { font-size: 12px; }
  .voice-phone-actions { margin-top: 2px; }
  .voice-transcript {
    min-height: 0;            /* was 280px — kills the blank space */
    /* Cap height to ~half the live viewport; lines scroll within. */
    max-height: 46dvh;
    padding: 14px 16px;
  }
}

/* ---------- How leads land — flow section ---------- */

.leadflow {
  padding: 24px 0 96px;
}

.leadflow .section-lead {
  margin-bottom: 40px;
}

.leadflow-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}

.flow-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  text-align: left;
  box-shadow: 0 1px 2px rgba(17,17,17,.04);
  display: flex;
  flex-direction: column;
}

.flow-step {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 8px;
}

.flow-card h3 {
  font-size: 18px;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.flow-desc {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0 0 16px;
}

.flow-arrow {
  align-self: center;
  font-size: 22px;
  color: var(--muted);
  user-select: none;
}

/* Mock artifacts inside the cards */

.mock {
  margin-top: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  padding: 12px;
  font-size: 12px;
  color: var(--text);
}

/* 01. chat mock */

.mock-chat {
  padding: 0;
  background: #FFFFFF;
}

/* Live-feeling chat — caps the visible area so longer conversations
   scroll automatically, mirroring the voice demo's transcript reveal.
   Each .msg starts hidden and fades in on its own data-delay timer
   (handled in script.js). Scrollbar is hidden but scroll still works
   so JS can scrollTo(scrollHeight) for the auto-scroll effect. */
.mock-chat--live .mock-chat-scroll {
  /* Grows from the top as messages appear. Hidden messages collapse
     to zero height (see below) so there's no invisible space pushing
     the visible ones around — the chat stays anchored to the top and
     never needs to auto-scroll. */
  padding: 8px 0;
  min-height: 60px;
  display: flex;
  flex-direction: column;
}

/* Hidden message = zero height + zero opacity + zero margins.
   When the JS adds .is-visible, max-height + padding + margin all
   animate together so the bubble "slides into existence" cleanly. */
.mock-chat--live .msg {
  opacity: 0;
  max-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  transition:
    opacity 0.3s ease-out,
    max-height 0.35s ease-out,
    margin 0.35s ease-out,
    padding 0.35s ease-out;
}

.mock-chat--live .msg.is-visible {
  opacity: 1;
  max-height: 120px;
  margin-top: 6px;
  margin-bottom: 6px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.mock-chat-head {
  border-bottom: 1px solid var(--line);
  padding: 8px 10px;
}

.mock-chat-title {
  font-weight: 600;
  font-size: 11px;
}

.mock-chat-sub {
  font-size: 10px;
  color: var(--muted);
}

.mock-chat .msg {
  display: block;
  max-width: 80%;
  padding: 6px 9px;
  margin: 6px 8px;
  border-radius: 10px;
  font-size: 11px;
  line-height: 1.4;
}

.mock-chat .msg-bot {
  background: var(--surface-2);
  color: var(--text);
  margin-right: auto;
}

.mock-chat .msg-user {
  background: #111111;
  color: #FFFFFF;
  margin-left: auto;
  text-align: left;
}

/* 02. email mock */

.mock-email {
  background: #FFFFFF;
  padding: 0;
}

.mock-email-head {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  border-bottom: 1px solid var(--line);
  padding: 8px 10px;
}

.mock-email-from {
  font-weight: 600;
}

.mock-email-time {
  color: var(--muted);
}

.mock-email-subject {
  font-size: 12px;
  font-weight: 600;
  padding: 10px 10px 6px;
  line-height: 1.35;
}

.mock-email-body {
  padding: 0 10px 10px;
  font-size: 11px;
  color: var(--text-soft);
  line-height: 1.6;
}

.mock-email-row {
  display: block;
}

.mock-email-row b {
  color: var(--text);
  font-weight: 600;
}

.mock-email-cta {
  display: block;
  margin: 0 10px 12px;
  padding: 6px 10px;
  background: var(--accent);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  text-align: center;
}

/* 03. crm mock */

.mock-crm {
  background: #FFFFFF;
  padding: 0;
}

.mock-crm-head {
  font-size: 12px;
  font-weight: 600;
  padding: 10px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.mock-crm-count {
  font-size: 10px;
  font-weight: 400;
  color: var(--muted);
}

.mock-crm-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 8px;
  padding: 8px 10px;
  font-size: 11px;
  border-top: 1px solid var(--line);
  align-items: center;
}

.mock-crm-row--new {
  background: var(--accent-soft);
}

.mock-crm-name {
  font-weight: 600;
  color: var(--text);
}

.mock-crm-cell {
  color: var(--muted);
  font-size: 10px;
}

.mock-crm-time {
  color: var(--muted);
  font-size: 10px;
  text-align: right;
}

.mock-pill {
  font-size: 9px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mock-pill-qualified {
  background: var(--accent-soft);
  color: var(--accent);
}

.mock-pill-new {
  background: #F3F4F6;
  color: var(--muted);
}

.mock-pill-quoted {
  background: #F5EBD9;
  color: #946F31;
}

/* Hide the secondary cells on narrower-card layouts */
.mock-crm-row .mock-crm-cell:nth-of-type(2),
.mock-crm-row .mock-crm-cell:nth-of-type(3) {
  display: none;
}

@media (min-width: 1100px) {
  .mock-crm-row .mock-crm-cell {
    display: inline-block;
  }
}

@media (max-width: 900px) {
  .leadflow { padding: 16px 0 64px; }

  /* Convert the 3-step flow into a horizontal swipe carousel —
     same pattern as the homepage offer cards. Each card snaps
     into view one at a time, with dots below showing position. */
  .leadflow-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 14px;
    padding: 4px 20px 4px;
    margin: 0 -20px;
    scroll-padding-left: 20px;
    max-width: none;
  }
  .leadflow-grid::-webkit-scrollbar { display: none; }

  /* Hide the desktop arrows — swipe is the native UX on mobile */
  .leadflow-grid .flow-arrow { display: none; }

  /* One card per viewport — same sizing recipe as offer-grid */
  .leadflow-grid .flow-card {
    flex: 0 0 calc(100vw - 40px);
    max-width: 480px;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    min-width: 0;
  }
}

/* ============================================================
   STAT CALLOUT — Goldman Sachs AI adoption-vs-integration gap
   ============================================================
   Two big numbers side-by-side (76% → 14%) with a connecting
   arrow, value-prop framing the "learning tax", a question to
   the visitor, a CTA, and a small footnote source citation. */
.stat-callout {
  padding: 80px 0;
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
  text-align: center;
}

.stat-callout .section-eyebrow,
.stat-callout .section-title {
  text-align: center;
}

.stat-callout .section-title {
  max-width: 22ch;
  margin: 6px auto 0;
}

.stat-callout-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  align-items: center;
  margin: 44px auto 36px;
  max-width: 820px;
  text-align: left;
}

.stat-callout-cell {
  padding: 28px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-callout-cell:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(17, 17, 17, 0.08);
}

.stat-callout-number {
  display: block;
  font-size: clamp(52px, 9vw, 88px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.stat-callout-cell--gap .stat-callout-number {
  color: var(--accent2);
}

.stat-callout-label {
  font-size: 15px;
  color: var(--muted);
  margin: 14px 0 0;
  line-height: 1.45;
}

.stat-callout-label strong {
  color: var(--text);
  font-weight: 600;
}

.stat-callout-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  opacity: 0.4;
}
.stat-callout-arrow svg {
  width: 36px;
  height: 36px;
}

.stat-callout-lead {
  max-width: 64ch;
  margin: 0 auto 36px;
  font-size: 17px;
  color: var(--text-soft);
  line-height: 1.6;
}

.stat-callout-lead em {
  color: var(--accent);
  font-style: italic;
  font-weight: 500;
}

.stat-callout-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
}

.stat-callout-question {
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--text);
}

.stat-callout-source {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}

.stat-callout-source a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.stat-callout-source a:hover {
  color: var(--accent);
}

/* Mobile: stack the two stats vertically, rotate the arrow to point
   down between them, scale everything in proportionally. */
@media (max-width: 700px) {
  .stat-callout { padding: 56px 0; }
  .stat-callout-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 32px auto 28px;
    max-width: 380px;
  }
  .stat-callout-cell { padding: 22px 18px; }
  .stat-callout-arrow {
    transform: rotate(90deg);
  }
  .stat-callout-arrow svg { width: 28px; height: 28px; }
  .stat-callout-lead { font-size: 16px; margin-bottom: 28px; }
}

/* ============================================================
   ABOUT PAGE — How we solve it + Why this works
   ============================================================ */

/* ---------- The How ---------- */
.how-we-solve {
  padding: 80px 0;
  background: var(--surface);
  text-align: center;
}

.how-we-solve .section-eyebrow,
.how-we-solve .section-title,
.how-we-solve .section-lead {
  text-align: center;
}

.how-we-solve .section-lead {
  max-width: 60ch;
  margin: 12px auto 40px;
}

.how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1080px;
  margin: 0 auto;
  text-align: left;
}

.how-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.how-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(17, 17, 17, 0.08);
}

.how-num {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.how-card h3 {
  font-size: 22px;
  letter-spacing: -0.015em;
  margin: 0;
  line-height: 1.2;
}

.how-card p {
  font-size: 15px;
  color: var(--text-soft);
  line-height: 1.55;
  margin: 0;
}

.how-card em {
  color: var(--accent);
  font-style: italic;
  font-weight: 500;
}

/* ---------- The Why (proof stats) ---------- */
.why-stats {
  padding: 80px 0;
  text-align: center;
}

.why-stats .section-eyebrow,
.why-stats .section-title,
.why-stats .section-lead {
  text-align: center;
}

.why-stats .section-lead {
  max-width: 60ch;
  margin: 12px auto 40px;
}

.why-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1080px;
  margin: 0 auto;
  text-align: left;
}

.why-stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.why-stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(17, 17, 17, 0.08);
}

.why-stat-num {
  display: block;
  font-size: clamp(44px, 6vw, 64px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.why-stat h3 {
  font-size: 17px;
  line-height: 1.35;
  margin: 6px 0 0;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
}

.why-stat p {
  font-size: 14px;
  color: var(--text-soft);
  line-height: 1.55;
  margin: 0;
}

.why-stat-source {
  font-size: 12px;
  color: var(--muted);
  margin-top: auto;
}

.why-stat-source a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.why-stat-source a:hover {
  color: var(--accent);
}

.why-stats-cta {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

@media (max-width: 900px) {
  .how-grid,
  .why-stats-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
  }
}

@media (max-width: 700px) {
  .how-we-solve,
  .why-stats { padding: 56px 0; }
  .how-card,
  .why-stat { padding: 22px 20px; }
}

/* ---------- Compact demo teaser (replaces full demo on homepage) ---------- */

.demo-teaser {
  padding: 88px 0;
}

.demo-teaser .section-lead {
  margin-bottom: 36px;
}

.btn.btn-large {
  font-size: 16px;
  padding: 18px 28px;
}

/* ---------- Inline chatbot demo (section 4b) ----------
   Sized to fit in a single viewport on desktop laptops without scroll.
   Uses flexbox so the iframe expands to fill leftover vertical space,
   capped so it never overgrows the chat panel inside it. */

.demo-inline {
  /* Account for the ~70px sticky header. Use height (not min-height) so the
     section locks to exactly one viewport — the iframe then takes whatever
     vertical space is left after the title/lead/CTA. */
  height: calc(100svh - 70px);
  padding: 24px 0 28px;
  background: #fff;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  /* When anchor-scrolling to #demo, leave room for the sticky header so the
     section's eyebrow/title don't get hidden under the nav. */
  scroll-margin-top: 70px;
}

.demo-inline .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 auto;
  min-height: 0;
}

.demo-inline .section-eyebrow {
  margin-top: 0;
}

.demo-inline .section-title {
  font-size: clamp(26px, 3.4vw, 34px);
  line-height: 1.15;
  margin-bottom: 10px;
}

.demo-inline .section-lead {
  margin: 0 auto 18px;
  max-width: 54ch;
  font-size: 15px;
}

.demo-inline-frame {
  position: relative;
  flex: 1 1 auto;
  min-height: 340px;
  max-height: 520px;
  margin: 0 auto 12px;
  width: 100%;
  max-width: 420px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow:
    0 30px 80px rgba(17,17,17,0.10),
    0 0 0 1px rgba(0,0,0,0.04);
}

.demo-inline-iframe {
  /* Absolute fill — percentage height doesn't propagate reliably from a
     flex-sized parent, so size off the positioning context instead. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Mobile-only tap-to-chat card (hidden on tablet/desktop by default) */
.demo-inline-mobile-cta { display: none; }

@media (max-width: 600px) {
  .demo-inline {
    min-height: 0;
    padding: 40px 0 44px;
  }
  .demo-inline .section-title { font-size: clamp(22px, 6vw, 28px); }
  .demo-inline .section-lead { font-size: 14px; margin-bottom: 20px; }
  /* On mobile, hide the cramped iframe and show a tap-to-chat card that
     opens the chat in the full-screen floating panel — much better UX
     than fighting iframe sizing and the Android virtual keyboard. */
  .demo-inline-frame { display: none; }

  .demo-inline-mobile-cta {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    max-width: 360px;
    margin: 0 auto 16px;
    padding: 22px 22px 18px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(17,17,17,0.08), 0 0 0 1px rgba(0,0,0,0.03);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: var(--text);
    transition: transform .15s ease, box-shadow .15s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .demo-inline-mobile-cta:active {
    transform: scale(0.985);
    box-shadow: 0 12px 28px rgba(17,17,17,0.08);
  }
  .demo-inline-mobile-cta-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--muted);
  }
  .demo-inline-mobile-cta-greeting {
    font-size: 15px;
    line-height: 1.4;
    color: var(--text);
    padding: 10px 12px;
    background: #f4f4f1;
    border-radius: 12px;
    align-self: flex-start;
    max-width: 88%;
  }
  .demo-inline-mobile-cta-button {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    padding: 12px 16px;
    border-radius: 10px;
    text-align: center;
    margin-top: 4px;
  }
}

/* Hide the floating chat launcher when the inline demo section is in view
   so the two chats don't compete and the launcher doesn't sit on top of the
   inline chat's input bar on small screens. Class is toggled by script.js. */
.chat-launcher.is-hidden-by-demo {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.85);
  transition: opacity .25s, transform .25s;
}

/* ---------- Floating chat launcher + slide-in panel (homepage only) ---------- */

.chat-launcher {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 10px 13px;
  background: #FFFFFF;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.05);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}

.chat-launcher:hover {
  background: #FFFFFF;
  color: var(--text);
  transform: translateY(-1px);
  border-color: var(--line-strong);
  box-shadow: 0 10px 26px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.06);
}

.chat-launcher:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.chat-launcher svg {
  width: 16px;
  height: 16px;
  display: block;
  color: var(--accent);
}

.chat-launcher[aria-expanded="true"] {
  /* hide launcher while panel is open */
  display: none;
}

.chat-panel {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
  width: 420px;
  max-width: calc(100vw - 32px);
  height: 640px;
  max-height: calc(100vh - 48px);
  background: #FFFFFF;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  animation: chat-panel-in .22s ease-out;
}

.chat-panel[hidden] {
  display: none;
}

@keyframes chat-panel-in {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.chat-panel iframe {
  flex: 1;
  width: 100%;
  border: 0;
  display: block;
  background: #FFFFFF;
}

.chat-panel-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 32px;
  height: 32px;
  background: rgba(255,255,255,0.95);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: inherit;
}

.chat-panel-close:hover {
  background: var(--surface-2);
}

.chat-panel-close svg {
  width: 14px;
  height: 14px;
  display: block;
}

@media (max-width: 520px) {
  /* On phone-sized screens, collapse to icon-only bubble so the launcher
     doesn't overlap headline copy or buttons in the hero. */
  .chat-launcher-label { display: none; }
  .chat-launcher {
    padding: 12px;
    bottom: 14px;
    right: 14px;
  }
  .chat-launcher svg { width: 18px; height: 18px; }
}

@media (max-width: 520px) {
  .chat-panel {
    /* Don't take over the whole screen — leave the top ~25% visible so the
       panel feels like a docked sheet rather than a full takeover. */
    bottom: 12px;
    right: 12px;
    left: 12px;
    width: auto;
    max-width: none;
    height: 75vh;
    max-height: 620px;
    border-radius: 16px;
    box-shadow: 0 -20px 40px rgba(17, 17, 17, 0.20), 0 0 0 1px rgba(0, 0, 0, 0.05);
  }
}