/* ---------- Self-hosted Inter Tight ----------
   Was: a render-blocking request to fonts.googleapis.com.
   Now: local woff2, subset by unicode-range so a browser only
   downloads latin-ext when a page actually uses ₹ or similar. */
@font-face {
  font-family: 'Inter Tight'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('../fonts/inter-tight-latin-300-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter Tight'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('../fonts/inter-tight-latin-ext-300-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Tight'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/inter-tight-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter Tight'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/inter-tight-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Tight'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/inter-tight-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter Tight'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/inter-tight-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Tight'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/inter-tight-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter Tight'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/inter-tight-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Tight'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/inter-tight-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter Tight'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/inter-tight-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
  --white: #FFFFFF;
  --cream: #FBFBF1;
  --cream-2: #F2EFE0;
  --paper: #FBFBF1;
  --paper-2: #F2EFE0;
  --surface: #FFFFFF;
  --ink: #000000;
  --ink-2: #1A1A1A;
  --muted: #6B6B65;
  --muted-2: #9A9A94;
  --line: rgba(0,0,0,0.10);
  --line-soft: rgba(0,0,0,0.06);
  --purple: #6A0BFF;
  --brand-mark: #6A0BFF;      /* logo arrow — same token as accent, never diverges */
  --accent-solid: #6A0BFF;    /* 6.49:1 on cream — passes WCAG AA for body text */
  /* Inverted panels. These must stay dark in BOTH themes — they were bound to
     --ink, which flips to cream in dark mode and made the panels invisible. */
  --panel: #000000;
  --panel-2: #141414;
  --panel-ink: #FBFBF1;
  --panel-muted: rgba(251,251,241,0.62);
  --panel-line: rgba(251,251,241,0.10);
  --purple-mid: #8A3AFF;
  --purple-soft: #A56DFF;
  --lavender: #E8DEFF;
  --lavender-deep: #C7A5FF;
  --grad-purple: linear-gradient(135deg, #6A0BFF 0%, #8A3AFF 60%, #A56DFF 100%);
  --grad-text: linear-gradient(120deg, #6A0BFF 0%, #7326FF 55%, #7B2BFF 100%);
  --grad-lavender: linear-gradient(180deg, #FFFFFF 0%, #E8DEFF 100%);
  --whatsapp: #25D366;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05), 0 2px 8px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.08), 0 20px 40px rgba(0,0,0,0.06);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.14);
  --shadow-purple: 0 8px 24px rgba(106,11,255,0.20);
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0A0A0A;
    --paper-2: #141414;
    --surface: #1A1A1A;
    --panel: #17171A;
      --panel-2: #202024;
      --panel-ink: #FBFBF1;
      --panel-muted: rgba(251,251,241,0.60);
      --panel-line: rgba(251,251,241,0.12);
    --ink: #FBFBF1;
    --ink-2: #E8E4D8;
    --muted: #9A9A94;
    --muted-2: #6B6B65;
    --line: rgba(251,251,241,0.12);
    --line-soft: rgba(251,251,241,0.06);
    --purple: #8A3AFF;
    --purple-mid: #A56DFF;
    --grad-text: linear-gradient(120deg, #A56DFF 0%, #B78AFF 55%, #C7A5FF 100%);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 14px rgba(0,0,0,0.5), 0 20px 40px rgba(0,0,0,0.4);
  }
}
:root[data-theme="dark"] {
  --paper: #0A0A0A;
  --paper-2: #141414;
  --surface: #1A1A1A;
  --panel: #17171A;
    --panel-2: #202024;
    --panel-ink: #FBFBF1;
    --panel-muted: rgba(251,251,241,0.60);
    --panel-line: rgba(251,251,241,0.12);
  --ink: #FBFBF1;
  --ink-2: #E8E4D8;
  --muted: #9A9A94;
  --muted-2: #6B6B65;
  --line: rgba(251,251,241,0.12);
  --line-soft: rgba(251,251,241,0.06);
  --purple: #8A3AFF;
  --purple-mid: #A56DFF;
  --brand-mark: #A56DFF;      /* lifted for dark bg — 7.1:1 on #0A0A0A */
  --accent-solid: #A56DFF;
  --grad-text: linear-gradient(120deg, #A56DFF 0%, #B78AFF 55%, #C7A5FF 100%);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.5), 0 20px 40px rgba(0,0,0,0.4);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Inter Tight', ui-sans-serif, system-ui, -apple-system,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    'Segoe UI Symbol', 'Apple Color Emoji', 'Noto Sans Symbols 2', sans-serif;
  font-weight: 400;
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
  letter-spacing: -0.01em;
  transition: background-color 250ms ease, color 250ms ease;
}
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; }
.purple-text {
  background: var(--grad-text);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gold-part {
  background: var(--grad-text);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

/* ---------- Type helpers ---------- */
.eyebrow {
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: '';
  width: 22px; height: 1px;
  background: var(--grad-purple);
}
.num { font-variant-numeric: tabular-nums; }

/* ---------- Layout ---------- */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 720px) { .wrap { padding: 0 32px; } }
section { padding: 64px 0; position: relative; }
@media (min-width: 720px) { section { padding: 96px 0; } }
@media (min-width: 1024px) { section { padding: 112px 0; } }

/* ---------- Brand Logo Component ----------
   Header/footer .brand link renders assets/img/logo.png — the full
   "Mscaler" wordmark image (2263×400, aspect 5.66:1). The inline SVG
   wordmark inside .brand-lockup is hidden so the two don't duplicate,
   and the .sr-only "Mscaler" sibling keeps the link's accessible name.
   The big footer watermark (.foot-mark .brand-lockup) is NOT inside a
   .brand link and stays as decorative text with its inline SVG arrow. */
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  line-height: 1;
}
.brand > .brand-lockup { display: none; }
.brand::before {
  content: '';
  display: block;
  height: 22px;
  aspect-ratio: 2263 / 400;   /* matches logo.png intrinsic ratio */
  background: url('../img/logo.png') left center / contain no-repeat;
  transition: transform 220ms cubic-bezier(.34,1.56,.64,1);
  flex-shrink: 0;
  transform-origin: left center;
}
.brand:hover::before { transform: scale(1.04); }
@media (min-width: 720px) { .brand::before { height: 26px; } }
/* Dark mode: the wordmark has black letters on a transparent background —
   invert brightness so the letters flip to cream. The purple arrow shifts
   hue with invert(); rotate the hue 180° to bring it back toward purple. */
:root[data-theme="dark"] .brand::before { filter: invert(1) hue-rotate(180deg); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand::before { filter: invert(1) hue-rotate(180deg); }
}
/* Kept for the .foot-mark watermark, which uses .brand-lockup outside of a
   .brand link and still renders as decorative text. */
.brand-logo {
  height: 28px;
  width: auto;
  display: block;
  object-fit: contain;
  transition: opacity 200ms ease;
}
.logo-dark { display: none; }
.logo-light { display: block; }

:root:not([data-theme="light"]) {
  @media (prefers-color-scheme: dark) {
    .logo-light { display: none; }
    .logo-dark { display: block; }
  }
}
:root[data-theme="dark"] .logo-light { display: none; }
:root[data-theme="dark"] .logo-dark { display: block; }
:root[data-theme="light"] .logo-light { display: block; }
:root[data-theme="light"] .logo-dark { display: none; }

/* ---------- HEADER ---------- */
.header-shell {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 12px 12px 0;
  /* At the top of the page the shell is solid paper (matches the page
     background exactly, no visible seam — the nav reads as part of the
     page). Once the page is scrolled (`.scrolled` added by main.js at
     y > 40) the shell background flips to transparent so the header
     pill's backdrop-filter blur produces a real frosted-glass effect
     over the scrolling content. */
  background: var(--paper);
  transition:
    padding 380ms cubic-bezier(.22,.61,.36,1),
    background 260ms ease;
}
.header-shell.scrolled {
  background: transparent;
}
.header {
  /* At rest the header is transparent — the nav sits on the page's cream
     background with no visible white box. The frosted-glass pill only
     appears once the page scrolls (see `.header-shell.scrolled .header`
     below). */
  background: transparent;
  border-radius: var(--radius-lg);
  padding: 14px 20px 14px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 1px solid transparent;
  transition:
    max-width 460ms cubic-bezier(.22,.61,.36,1),
    border-radius 380ms cubic-bezier(.22,.61,.36,1),
    padding 380ms cubic-bezier(.22,.61,.36,1),
    background 300ms ease,
    border-color 300ms ease,
    box-shadow 300ms ease;
  max-width: 100%;
  margin: 0 auto;
}
.header-shell.scrolled .header {
  max-width: 880px;
  border-radius: var(--radius-pill);
  border-color: var(--line);
  background: color-mix(in oklab, var(--surface) 82%, transparent);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  padding: 8px 8px 8px 20px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06), var(--shadow-sm);
}
@media (min-width: 720px) {
  .header-shell { padding: 16px 16px 0; }
  .header-shell.scrolled { padding: 16px; }
}

.nav-links {
  display: none;
  gap: 4px;
  flex: 1;
  justify-content: center;
}
@media (min-width: 900px) { .nav-links { display: flex; } }
.nav-links a {
  padding: 8px 14px;
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--radius-pill);
  transition: background 160ms ease, color 160ms ease;
}
.nav-links a:hover { background: var(--lavender); color: var(--purple); }

.nav-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.nav-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px;
  min-height: 44px;   /* iOS touch-target minimum */
  background: var(--purple);
  color: var(--white);
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: transform 160ms ease, background 160ms ease, box-shadow 200ms ease;
  white-space: nowrap;
}
@media (min-width: 900px) {
  .nav-cta { padding: 10px 20px; min-height: 0; }
}
.nav-cta:hover {
  transform: translateY(-1px);
  background: var(--purple-mid);
  box-shadow: var(--shadow-purple);
}
.menu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;    /* touch-target minimum */
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  cursor: pointer;
  color: var(--ink);
}
@media (min-width: 900px) { .menu-btn { display: none; } }

/* Mobile menu */
.mobile-menu {
  display: none;
  position: fixed; inset: 0; z-index: 99;
  background: var(--paper);
  padding: 96px 24px 40px;
  flex-direction: column;
  gap: 4px;
}
.mobile-menu.open { display: flex; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.mobile-menu a {
  padding: 18px 20px;
  color: var(--ink);
  text-decoration: none;
  font-family: 'Inter Tight', sans-serif;
  font-weight: 500;
  font-size: 28px;
  letter-spacing: -0.03em;
  border-bottom: 1px solid var(--line-soft);
}
.mobile-menu .nav-cta {
  margin-top: 24px; padding: 18px 24px;
  font-size: 16px; justify-content: center;
}

/* ---------- HERO ---------- */
.hero {
  padding-top: 40px;
  padding-bottom: 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
@media (min-width: 720px) { .hero { padding-top: 80px; padding-bottom: 56px; } }
@media (min-width: 1024px) { .hero { padding-top: 96px; padding-bottom: 72px; } }
.hero::before {
  /* Ambient lavender glow. Pushed lower and softened so it doesn't sit
     directly under the nav (which made the nav read as if it was framed
     by a purple halo). Now centred ~30% down the hero, half the opacity. */
  content: '';
  position: absolute;
  width: 720px; height: 420px;
  background: radial-gradient(ellipse at center, rgba(232,222,255,0.28) 0%, transparent 62%);
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}

.hero-inner { position: relative; z-index: 2; }

.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
  margin-bottom: 32px;
  box-shadow: var(--shadow-sm);
}
.hero-badge .stars {
  display: inline-flex; gap: 1px;
  color: var(--purple);
  font-size: 11px;
}

.hero h1 {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 500;
  /* Mobile min lowered from 44 → 38px so "You are one of them." fits on one
     line at 375-430px viewports and the last word never orphans. */
  font-size: clamp(38px, 8.5vw, 108px);
  letter-spacing: -0.04em;
  line-height: 1.02;
  margin-bottom: 24px;
  text-wrap: pretty;
  color: var(--ink);
}
@media (min-width: 720px) {
  .hero h1 { letter-spacing: -0.045em; line-height: 0.98; }
}
.hero h1 .accent {
  background: var(--grad-text);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 500;
}

.hero-sub {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 2vw, 20px);
  color: var(--muted);
  max-width: 620px;
  margin: 0 auto 36px;
  line-height: 1.55;
}
.hero-ctas {
  display: flex; gap: 10px; flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 32px;
}
.btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px;
  background: var(--purple);
  color: var(--white);
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  border: none;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, box-shadow 200ms ease;
}
.btn-primary:hover {
  transform: translateY(-2px);
  background: var(--purple-mid);
  box-shadow: var(--shadow-purple);
}
.btn-primary .arr { transition: transform 160ms ease; }
.btn-primary:hover .arr { transform: translate(2px, -2px); }
.btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 22px;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  transition: background 160ms ease;
}
.btn-secondary:hover { background: var(--lavender); color: var(--purple); }

.hero-promise {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 20px 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 13.5px;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  flex-wrap: wrap;
  justify-content: center;
  max-width: calc(100vw - 40px);
}
.hero-promise .badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px 5px 10px;
  background: var(--purple);
  color: var(--white);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 500;
}
.hero-promise .badge::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--lavender);
}

/* Hero stats bar */
.hero-stats {
  margin-top: 56px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
@media (min-width: 720px) { .hero-stats { grid-template-columns: repeat(4, 1fr); margin-top: 80px; } }
.stat {
  padding: 24px 20px;
  text-align: left;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 720px) {
  .stat { padding: 28px 24px; border-bottom: none; }
  .stat:last-child { border-right: none; }
}
.stat:nth-child(2n) { border-right: none; }
@media (min-width: 720px) {
  .stat:nth-child(2n) { border-right: 1px solid var(--line); }
  .stat:nth-child(4n) { border-right: none; }
}
.stat-val {
  font-family: 'Inter Tight', sans-serif;
  font-size: 40px;
  font-weight: 500;
  letter-spacing: -0.04em;
  background: var(--grad-text);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-lbl {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 8px;
  font-weight: 500;
}

/* ---------- Marquee ---------- */
.marquee {
  background: var(--panel);
  overflow: hidden;
  padding: 14px 0;
}
.marquee-track {
  display: flex; gap: 32px;
  animation: marqueeScroll 30s linear infinite;
  width: max-content;
}
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }
@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-item {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(251,251,241,0.55);
  font-weight: 500;
  white-space: nowrap;
}
.marquee-item .star { color: var(--purple-soft); font-size: 12px; }

/* ---------- Section head ---------- */
.section-head {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
}
@media (min-width: 720px) { .section-head { margin-bottom: 64px; } }
.eyebrow-pill, .section-head .eyebrow-pill {
  display: inline-block;
  padding: 8px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
  margin-bottom: 24px;
}
.section-head h2 {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 500;
  /* Mobile: 32px min so 2-line headings breathe. Desktop hits the 60px cap. */
  font-size: clamp(32px, 6vw, 60px);
  letter-spacing: -0.03em;
  line-height: 1.06;
  margin-bottom: 18px;
  text-wrap: pretty;
  color: var(--ink);
}
@media (min-width: 720px) {
  .section-head h2 { letter-spacing: -0.035em; line-height: 1; }
}
.section-head h2 .accent {
  background: var(--grad-text);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.section-head p {
  color: var(--muted);
  font-size: 17px;
  max-width: 560px;
  margin: 0 auto;
  font-weight: 400;
}

/* ---------- Problem panel (dark) ---------- */
.panel-dark {
  background: var(--panel);
  color: var(--panel-ink);
  border-radius: var(--radius-lg);
  padding: 56px 24px;
  margin: 0 12px;
  position: relative;
  overflow: hidden;
}
@media (min-width: 720px) {
  .panel-dark { padding: 80px 56px; margin: 0 20px; border-radius: var(--radius-xl); }
}
.panel-dark .eyebrow { color: rgba(251,251,241,0.5); }
.panel-dark .eyebrow::before { background: var(--grad-purple); }
.panel-dark h2 {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 500;
  font-size: clamp(32px, 5.5vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 16px 0 40px;
  max-width: 900px;
  text-wrap: balance;
}
.panel-dark h2 s { color: rgba(251,251,241,0.3); text-decoration-thickness: 2px; }
.panel-dark h2 em {
  background: linear-gradient(120deg, #A56DFF 0%, #E8DEFF 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  font-style: italic;
  font-weight: 500;
}

.pain-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 720px) { .pain-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.pain {
  padding: 24px;
  border: 1px solid rgba(251,251,241,0.10);
  border-radius: var(--radius);
  background: rgba(251,251,241,0.03);
}
.pain .icn {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: rgba(106,11,255,0.20);
  color: var(--lavender);
  display: grid; place-items: center;
  margin-bottom: 16px;
  font-weight: 500;
  font-size: 18px;
}
.pain h3 {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 500;
  font-size: 22px;
  margin-bottom: 6px;
  letter-spacing: -0.025em;
}
.pain p { color: rgba(251,251,241,0.65); font-size: 15px; }

/* ---------- SERVICES (dark cards) ---------- */
.services-section {
  background: var(--panel);
  color: var(--panel-ink);
  border-radius: var(--radius-lg);
  padding: 56px 24px;
  margin: 0 12px;
}
@media (min-width: 720px) {
  .services-section { padding: 80px 40px; margin: 0 20px; border-radius: var(--radius-xl); }
}
.services-section .section-head h2 { color: var(--cream); }
.services-section .section-head .eyebrow-pill {
  background: rgba(251,251,241,0.06);
  border-color: rgba(251,251,241,0.14);
  color: rgba(251,251,241,0.85);
}
.services-section .section-head p { color: rgba(251,251,241,0.6); }

.svc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
}
@media (min-width: 720px) { .svc-grid { grid-template-columns: 1fr 1fr; gap: 20px; } }
.svc {
  position: relative;
  background: rgba(251,251,241,0.02);
  border: 1px solid rgba(251,251,241,0.10);
  border-radius: var(--radius-lg);
  padding: 28px;
  overflow: hidden;
  transition: transform 200ms ease, border-color 200ms ease, background 200ms ease;
}
.svc:hover {
  transform: translateY(-4px);
  border-color: rgba(106,11,255,0.5);
  background: rgba(106,11,255,0.05);
}
.svc-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 24px;
}
.svc-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: rgba(251,251,241,0.06);
  color: var(--cream);
  display: grid; place-items: center;
}
.svc-icon svg { width: 24px; height: 24px; }
.svc-num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(106,11,255,0.15);
  color: var(--lavender-deep);
  font-size: 11px; font-weight: 600;
  display: grid; place-items: center;
  letter-spacing: 0.02em;
}
.svc h3 {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.025em;
  margin-bottom: 12px;
  line-height: 1.15;
  color: var(--cream);
}
.svc p {
  color: rgba(251,251,241,0.65);
  font-size: 14.5px;
  line-height: 1.55;
  margin-bottom: 24px;
}
.svc-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 16px;
  border-top: 1px solid rgba(251,251,241,0.08);
}
.svc-link {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--grad-text);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}
.svc-link .arr {
  color: var(--purple-soft);
  -webkit-text-fill-color: initial;
  transition: transform 160ms ease;
}
.svc:hover .svc-link .arr { transform: translateX(4px); }
.svc-tag {
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: rgba(106,11,255,0.15);
  color: var(--lavender);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ---------- 3 SIMPLE STEPS ---------- */
.steps-section {
  background: var(--paper);
  padding: 80px 20px;
}
@media (min-width: 720px) { .steps-section { padding: 112px 32px; } }
.steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto 48px;
  text-align: center;
}
@media (min-width: 720px) { .steps-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.step {
  padding: 0 8px;
}
.step-badge {
  width: 68px; height: 68px;
  border-radius: 50%;
  background: var(--grad-purple);
  color: var(--white);
  display: grid; place-items: center;
  margin: 0 auto 24px;
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600;
  font-size: 26px;
  box-shadow: var(--shadow-purple);
  position: relative;
}
.step h4 {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.025em;
  margin-bottom: 12px;
  line-height: 1.15;
  color: var(--ink);
}
.step p {
  color: var(--muted);
  font-size: 15px;
  max-width: 320px;
  margin: 0 auto;
  line-height: 1.55;
}
.steps-cta {
  text-align: center;
}
.steps-cta-btn {
  display: inline-flex; align-items: center; gap: 0;
  background: var(--panel);
  border-radius: var(--radius-pill);
  padding: 8px 8px 8px 28px;
  color: var(--white);
  text-decoration: none;
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600;
  font-size: 16px;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.steps-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,0.2); }
.steps-cta-btn .steps-cta-txt { padding-right: 16px; }
.steps-cta-btn .steps-cta-arrow {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--purple);
  color: var(--white);
  display: grid; place-items: center;
  transition: transform 160ms ease;
}
.steps-cta-btn:hover .steps-cta-arrow { transform: translateX(2px); }
.steps-cta-note {
  margin-top: 20px;
  font-size: 13.5px;
  color: var(--muted);
  font-style: italic;
}

/* ---------- US vs THEM ---------- */
.compare-section {
  padding: 64px 20px;
}
@media (min-width: 720px) { .compare-section { padding: 96px 32px; } }
.compare-head {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 48px;
}
.compare-stars {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 20px;
  font-size: 13.5px;
  color: var(--ink-2);
  font-weight: 500;
}
.compare-stars .stars {
  color: var(--purple);
  font-size: 15px;
  letter-spacing: 1px;
}
.compare-head h2 {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 500;
  font-size: clamp(36px, 6vw, 60px);
  letter-spacing: -0.035em;
  line-height: 1;
  margin-bottom: 18px;
  text-wrap: balance;
  color: var(--ink);
}
.compare-head p {
  color: var(--muted);
  font-size: 16.5px;
  max-width: 520px;
  margin: 0 auto;
}

.compare-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  max-width: 1000px;
  margin: 0 auto;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
@media (min-width: 720px) {
  .compare-grid { grid-template-columns: 1fr 1fr; gap: 60px; position: relative; }
  .compare-grid::before {
    content: '';
    position: absolute;
    left: 50%; top: 32px; bottom: 0;
    width: 1px;
    background: var(--line);
  }
}
.compare-col-title {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 20px;
}
.compare-list {
  list-style: none;
  display: flex; flex-direction: column;
  gap: 0;
}
.compare-list li {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 0;
  font-size: 15.5px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-2);
}
.compare-list li:last-child { border-bottom: none; }
.compare-col.them .compare-list li { color: var(--muted); }
.compare-mark {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.compare-col.them .compare-mark {
  background: color-mix(in oklab, var(--ink) 10%, transparent);
  color: var(--muted);
}
.compare-col.us .compare-mark {
  background: var(--purple);
  color: var(--white);
}
.compare-mark svg { width: 13px; height: 13px; stroke-width: 3; }

/* ---------- COMMITMENTS CHECKLIST ---------- */
.commit-section {
  background: var(--paper-2);
  padding: 64px 20px;
}
@media (min-width: 720px) { .commit-section { padding: 96px 32px; } }
.commit-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 960px;
  margin: 0 auto;
}
@media (min-width: 720px) { .commit-grid { grid-template-columns: 1fr 1fr; gap: 20px 40px; } }
.commit-item {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform 200ms ease, border-color 200ms ease;
}
.commit-item:hover {
  border-color: var(--purple);
  transform: translateY(-2px);
}
.commit-check {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--purple);
  color: var(--white);
  display: grid; place-items: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.commit-check svg { width: 14px; height: 14px; stroke-width: 3; }
.commit-body h4 {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 4px;
  line-height: 1.2;
}
.commit-body p {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.5;
}

/* ---------- FAQ ---------- */
.faq-list {
  display: flex; flex-direction: column;
  gap: 12px;
  max-width: 820px;
  margin: 0 auto;
}
details.faq-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  transition: box-shadow 200ms ease, border-color 200ms ease;
}
@media (min-width: 720px) { details.faq-item { padding: 22px 26px; } }
details.faq-item[open] { box-shadow: var(--shadow-sm); border-color: var(--lavender-deep); }
details.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px;
  font-family: 'Inter Tight', sans-serif;
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.3;
}
@media (min-width: 720px) { details.faq-item summary { font-size: 19px; } }
details.faq-item summary::-webkit-details-marker { display: none; }
.faq-plus {
  width: 28px; height: 28px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--paper-2);
  display: grid; place-items: center;
  transition: transform 200ms ease, background 200ms ease, color 200ms ease;
  font-size: 18px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1;
}
details[open] .faq-plus { background: var(--purple); color: var(--white); transform: rotate(45deg); }
details.faq-item p {
  margin-top: 14px;
  color: var(--muted);
  font-size: 15px;
  max-width: 640px;
  line-height: 1.6;
}

/* ---------- Final CTA ---------- */
.final-cta {
  background: var(--panel);
  color: var(--panel-ink);
  border-radius: var(--radius-lg);
  margin: 0 12px;
  padding: 64px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
@media (min-width: 720px) {
  .final-cta { padding: 96px 48px; margin: 0 20px; border-radius: var(--radius-xl); }
}
.final-cta::before {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(106,11,255,0.5) 0%, transparent 60%);
  top: -180px; left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}
.final-cta .eyebrow { color: rgba(251,251,241,0.5); position: relative; }
.final-cta .eyebrow::before { background: var(--grad-purple); }
.final-cta h2 {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 500;
  /* Mobile 32px min prevents mid-word breaks at 375px viewport */
  font-size: clamp(32px, 7vw, 88px);
  line-height: 1.06;
  letter-spacing: -0.035em;
  margin: 20px auto;
  max-width: 900px;
  text-wrap: pretty;
  position: relative;
}
@media (min-width: 720px) {
  .final-cta h2 { line-height: 1; letter-spacing: -0.04em; }
}
.final-cta h2 em {
  background: linear-gradient(120deg, #A56DFF 0%, #E8DEFF 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  font-style: italic;
  font-weight: 500;
}
.final-cta p {
  color: rgba(251,251,241,0.7);
  max-width: 520px;
  margin: 0 auto 32px;
  font-size: 16px;
  position: relative;
}
.final-cta .btn-primary {
  background: var(--white);
  color: var(--ink);
  padding: 16px 30px;
  font-size: 16px;
  position: relative;
}
.final-cta .btn-primary:hover { background: var(--lavender); color: var(--purple); }
.final-note {
  margin-top: 20px;
  font-size: 11px;
  color: rgba(251,251,241,0.5);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 500;
  position: relative;
}

/* ---------- Footer ---------- */
footer { padding: 56px 0 32px; }
.foot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 720px) { .foot-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 40px; } }
.foot-brand { grid-column: 1 / -1; }
@media (min-width: 720px) { .foot-brand { grid-column: auto; } }
.foot-brand p { color: var(--muted); font-size: 14.5px; max-width: 300px; margin-top: 16px; }
.foot-col h5 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-bottom: 16px;
  font-weight: 500;
}
.foot-col a {
  display: block;
  color: var(--ink);
  text-decoration: none;
  font-size: 15px;
  padding: 6px 0;
  transition: color 160ms ease;
  font-weight: 400;
}
.foot-col a:hover { color: var(--purple); }
.foot-bottom {
  padding-top: 24px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
  font-size: 13px;
  color: var(--muted);
}
.foot-mark {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600;
  font-size: clamp(80px, 22vw, 240px);
  line-height: 0.85;
  text-align: center;
  color: color-mix(in oklab, var(--ink) 8%, transparent);
  letter-spacing: -0.06em;
  margin-top: 48px;
  overflow: hidden;
  user-select: none;
}
.foot-mark .foot-arrow {
  display: inline-flex;
  width: 0.65em; height: 0.65em;
  color: color-mix(in oklab, var(--purple) 25%, transparent);
  vertical-align: baseline;
}

/* ---------- MOBILE STICKY ACTION BAR ---------- */
.mobile-actions {
  display: none;
  position: fixed;
  left: 12px; right: 12px;
  /* Respect the iPhone home indicator so the bar never hides under it */
  bottom: max(12px, env(safe-area-inset-bottom, 12px));
  z-index: 90;
  padding: 6px;
  background: color-mix(in oklab, var(--surface) 82%, transparent);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08), var(--shadow-sm);
  gap: 4px;
  transform: translateY(160%);
  transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-actions.visible { transform: translateY(0); }
.mobile-actions.show { display: flex; }
@media (min-width: 900px) { .mobile-actions { display: none !important; } }
.ma-btn {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 11px 8px;
  background: transparent;
  color: var(--ink);
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  min-height: 42px;
  transition: background 160ms ease;
}
.ma-btn:hover, .ma-btn:active { background: var(--lavender); color: var(--purple); }
.ma-btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.ma-btn.ma-whatsapp svg { color: var(--whatsapp); }
/* Base = smallest phone. Cards get room to breathe on ≥381px. */
.ma-btn { padding: 10px 4px; font-size: 13px; gap: 6px; }
.ma-btn svg { width: 16px; height: 16px; }
@media (min-width: 381px) {
  .ma-btn { padding: 11px 8px; font-size: 14px; gap: 8px; }
  .ma-btn svg { width: 17px; height: 17px; }
}
/* Reserve room at the bottom so the sticky action bar never covers content.
   Base rule targets mobile; ≥900px the bar is hidden so no reserve is needed. */
body.has-action-bar {
  padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 900px) {
  body.has-action-bar { padding-bottom: 0; }
}

/* Theme toggle removed — site is light-mode only. The .theme-toggle button
   was stripped from all HTML pages and toggleTheme() removed from main.js. */

a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
  border-radius: var(--radius-pill);
}

/* ══════════════════════════════════════════════════════════════════
   MULTI-PAGE ADDITIONS
   Mobile-first. Every block below uses min-width queries only.
   ══════════════════════════════════════════════════════════════════ */

/* ---------- Accessibility ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  z-index: 999; background: var(--accent-solid); color: #fff;
  padding: 10px 20px; border-radius: 0 0 12px 12px; font-weight: 600;
  font-size: 14px; text-decoration: none; transition: transform 160ms ease;
}
.skip-link:focus { transform: translate(-50%, 0); }
:where(a, button, summary, input, select, textarea):focus-visible {
  outline: 2px solid var(--accent-solid); outline-offset: 3px; border-radius: 4px;
}

/* ---------- Brand lockup: text + SVG arrow, one colour token ----------
   The arrow inherits var(--brand-mark), which IS var(--accent-solid).
   They cannot drift apart, and dark mode re-tints both together.        */
.brand-lockup {
  display: inline-flex; align-items: baseline;
  font-weight: 600; font-size: 26px; letter-spacing: -0.055em;
  color: var(--ink); line-height: 1; white-space: nowrap;
}
.brand-arrow {
  /* Sized and spaced to occupy the exact slot of the lowercase 'a' it replaces.
     viewBox is cropped to the path bounds (5 5 14 14) so there is no dead
     padding, and the box bottom sits on the text baseline. */
  display: inline-block; width: 0.58em; height: 0.58em;
  color: var(--brand-mark); margin: 0 -0.015em;
}
.brand-arrow svg { width: 100%; height: 100%; display: block; }
.brand:hover .brand-arrow { transform: scale(1.07); }
.brand-arrow, .brand:hover .brand-arrow { transition: transform 200ms cubic-bezier(.34,1.56,.64,1); }
@media (min-width: 720px) { .brand-lockup { font-size: 29px; } }
.foot-lockup {
  font-size: clamp(64px, 19vw, 200px); font-weight: 600;
  letter-spacing: -0.06em; opacity: 0.10; display: flex; justify-content: center;
}

/* ---------- Layout helpers ---------- */
.wrap-flush { max-width: 100% !important; padding: 0 !important; }
.section-foot { display: flex; justify-content: center; margin-top: 40px; }

/* ---------- Breadcrumbs ---------- */
.crumbs {
  padding: 96px 0 0; font-size: 13px; color: var(--muted);
}
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent-solid); }
.crumbs [aria-current] { color: var(--ink); font-weight: 500; }
.crumb-sep { opacity: 0.4; margin: 0 2px; }
@media (min-width: 720px) { .crumbs { padding-top: 116px; } }

/* ---------- Inner page hero ---------- */
.page-hero { padding: 40px 0 48px; }
.page-hero .eyebrow-pill { margin-bottom: 18px; }
.page-hero h1 {
  font-size: clamp(34px, 8vw, 66px); font-weight: 600;
  letter-spacing: -0.045em; line-height: 1.02; margin-bottom: 20px;
  max-width: 16ch;
}
.page-hero .hero-sub { margin: 0 0 28px; max-width: 62ch; }
.page-hero .hero-ctas { justify-content: flex-start; }
.page-hero.err h1 { max-width: 100%; }
@media (min-width: 720px) {
  .page-hero { padding: 56px 0 72px; }
  .page-hero h1 { max-width: 18ch; }
}

/* ---------- Prose (about, blog body) ---------- */
.prose { max-width: 68ch; }
.prose h2 {
  font-size: clamp(24px, 4.4vw, 34px); font-weight: 600;
  letter-spacing: -0.03em; line-height: 1.15;
  margin: 44px 0 14px; color: var(--ink);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-size: clamp(19px, 3.2vw, 23px); font-weight: 600;
  letter-spacing: -0.02em; margin: 32px 0 10px;
}
.prose p { color: var(--muted); font-size: 17px; line-height: 1.68; margin-bottom: 18px; }
.prose ul { margin: 0 0 22px; padding-left: 22px; }
.prose li { color: var(--muted); font-size: 17px; line-height: 1.68; margin-bottom: 10px; }
.prose li strong, .prose p strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--accent-solid); text-underline-offset: 3px; }
@media (min-width: 720px) { .prose p, .prose li { font-size: 18px; } }

/* ---------- Problem grid ---------- */
.problem-section { padding-top: 0; }
.prob-grid { display: grid; gap: 20px; margin-top: 36px; }
.prob {
  padding: 24px; border-radius: var(--radius);
  background: rgba(251,251,241,0.04); border: 1px solid rgba(251,251,241,0.09);
}
.prob h3 {
  font-size: 19px; font-weight: 600; letter-spacing: -0.02em;
  margin-bottom: 8px; color: #FBFBF1;
}
.prob p { font-size: 15px; line-height: 1.6; color: rgba(251,251,241,0.62); }
@media (min-width: 860px) { .prob-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

/* ---------- Service detail: what's included ---------- */
.does-grid { display: grid; gap: 14px; margin-top: 8px; }
.does-item {
  display: flex; gap: 14px; padding: 22px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.does-item h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 6px; }
.does-item p { font-size: 15px; line-height: 1.62; color: var(--muted); }
@media (min-width: 860px) { .does-grid { grid-template-columns: 1fr 1fr; gap: 18px; } }

.svc-title-link { color: inherit; text-decoration: none; }
.svc-title-link:hover { color: var(--accent-solid); }
.svc-page .page-hero { padding-top: 24px; }
@media (min-width: 860px) { .svc-grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* ---------- FAQ answer wrapper ---------- */
.faq-a { padding-top: 2px; }

/* ---------- CTA band ---------- */
.cta-section { padding: 0 0 64px; }
@media (min-width: 720px) { .cta-section { padding-bottom: 96px; } }

/* ---------- Contact ---------- */
.contact-grid { display: grid; gap: 28px; }
.contact-card, .contact-side {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-sm);
}
.contact-card h2, .contact-side h2 {
  font-size: 21px; font-weight: 600; letter-spacing: -0.025em; margin-bottom: 18px;
}
.contact-form { display: flex; flex-direction: column; gap: 6px; }
.contact-form label {
  font-size: 13px; font-weight: 500; color: var(--muted); margin-top: 12px;
}
.contact-form input, .contact-form select, .contact-form textarea {
  font-family: inherit; font-size: 16px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px; width: 100%;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  border-color: var(--accent-solid); box-shadow: 0 0 0 3px rgba(106,11,255,0.13); outline: none;
}
.contact-form textarea { resize: vertical; min-height: 96px; }
.contact-form .btn-primary { margin-top: 20px; justify-content: center; }
.form-note { font-size: 13px; color: var(--muted); margin-top: 12px; text-align: center; }
.form-note a { color: var(--accent-solid); }
.contact-list { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.contact-list li {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line-soft); font-size: 15px;
}
.contact-list li:last-child { border-bottom: none; }
.cl-k { color: var(--muted); font-size: 13px; flex-shrink: 0; }
.contact-list a { color: var(--accent-solid); text-decoration: none; text-align: right; }
.contact-list a:hover { text-decoration: underline; }
.contact-promise {
  margin-top: 20px; padding: 16px; border-radius: var(--radius);
  background: var(--lavender); color: var(--ink-2);
  font-size: 14px; line-height: 1.6;
}
@media (min-width: 900px) {
  .contact-grid { grid-template-columns: 1.35fr 1fr; gap: 32px; align-items: start; }
  .contact-card, .contact-side { padding: 34px; }
}

/* ---------- Blog ---------- */
.post-list { display: grid; gap: 20px; }
.post-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-sm);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.post-card h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; margin: 12px 0 10px; }
.post-card h2 a { color: var(--ink); text-decoration: none; }
.post-card h2 a:hover { color: var(--accent-solid); }
.post-card p { color: var(--muted); font-size: 15px; line-height: 1.62; margin-bottom: 16px; }
.post-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-size: 12.5px; color: var(--muted-2);
}
.post-cat {
  background: var(--lavender); color: #4A0BB0;
  padding: 4px 10px; border-radius: var(--radius-pill);
  font-weight: 600; font-size: 11.5px; letter-spacing: 0.03em; text-transform: uppercase;
}
.post-head { padding: 24px 0 8px; }
.post-head h1 {
  font-size: clamp(30px, 6.4vw, 52px); font-weight: 600;
  letter-spacing: -0.04em; line-height: 1.06; margin-top: 16px; max-width: 22ch;
}
.post-body { padding-bottom: 24px; }
@media (min-width: 860px) { .post-list { grid-template-columns: 1fr 1fr; gap: 24px; } }

/* ---------- Footer additions ---------- */
.foot-addr { color: var(--muted); font-size: 14px; line-height: 1.6; margin-top: 4px; }
footer .foot-col h2 {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--muted-2); margin-bottom: 14px;
}

/* ---------- Mobile action bar colours ---------- */
.ma-mail { color: var(--ink); }
.ma-call { color: var(--accent-solid); }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.in {
  opacity: 1; transform: none;
  transition: opacity 520ms cubic-bezier(.22,.61,.36,1), transform 520ms cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}

/* ---------- Dark-mode adjustments for new blocks ---------- */
:root[data-theme="dark"] .contact-promise,
:root[data-theme="dark"] .post-cat { background: rgba(165,109,255,0.16); color: var(--purple-mid); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .contact-promise,
  :root:not([data-theme="light"]) .post-cat { background: rgba(165,109,255,0.16); color: var(--purple-mid); }
}

/* ---------- Print ---------- */
@media print {
  .header-shell, .mobile-actions, .theme-toggle, .mobile-menu,
  .marquee, .cta-section, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; color: #555; }
}

.post { display: block; }

/* Inline icon glyphs (checks/crosses) — these characters exist in no Inter
   subset, so drawing them keeps weight and alignment consistent everywhere. */
.ico { width: 1em; height: 1em; display: block; }
.compare-mark .ico, .commit-check .ico { width: 0.72em; height: 0.72em; }
.compare-mark, .commit-check { display: inline-flex; align-items: center; justify-content: center; }

/* Left-aligned section head — used on service/detail pages where the hero and
   body copy are left-aligned and a centred h2 would break the reading column. */
.section-head--left { max-width: 100%; margin-left: 0; margin-right: 0; text-align: left; margin-bottom: 32px; }
.section-head--left h2 { margin-left: 0; }
.section-head--left p { margin-left: 0; }
.svc-page section { padding-top: 40px; }
@media (min-width: 720px) { .svc-page section { padding-top: 64px; } }
.svc-page .commit-section, .svc-page #faq, .svc-page .cta-section { padding-top: 72px; }

/* ---------- Header legibility over saturated content ----------
   At 82% the frosted header let vivid purple CTAs read straight through it and
   the wordmark became unreadable. 94% keeps the glass effect and stays legible
   over anything that scrolls underneath. */
.header-shell.scrolled .header {
  background: color-mix(in oklab, var(--surface) 94%, transparent);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header-shell.scrolled .header { background: var(--surface); }
}

/* `overflow-x: hidden` on body turns it into a scroll container, which makes
   position:sticky fragile in several browsers. `clip` prevents the horizontal
   scrollbar without that side effect. */
html { overflow-x: clip; }
@supports (overflow: clip) { body { overflow-x: clip; } }

/* ══════════════════════════════════════════════════════════════════
   HOME v2 — psychological sections
   ══════════════════════════════════════════════════════════════════ */

.hero-badge .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent-solid);
  display: inline-block; flex: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent-solid) 22%, transparent);
}

/* ---------- Operating facts strip ---------- */
.facts-section { padding: 8px 0 40px; }
.facts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.fact { background: var(--paper); padding: 22px 18px; }
.fact-val { font-size: clamp(30px, 7vw, 44px); font-weight: 600; letter-spacing: -0.045em; color: var(--accent-solid); line-height: 1; }
.fact-lbl { font-size: 14px; font-weight: 600; color: var(--ink); margin-top: 10px; letter-spacing: -0.01em; }
.fact-note { font-size: 13px; color: var(--muted); margin-top: 3px; line-height: 1.45; }
@media (min-width: 860px) {
  .facts-grid { grid-template-columns: repeat(4, 1fr); }
  .fact { padding: 30px 26px; }
}

/* ---------- The mirror (self-diagnosis, on dark) ---------- */
.mirror-panel { padding: 40px 24px; }
.mirror-head { max-width: 46ch; margin-bottom: 30px; }
.mirror-head h2 { font-size: clamp(27px, 5.6vw, 46px); font-weight: 600; letter-spacing: -0.04em; line-height: 1.08; color: var(--panel-ink); }
.mirror-head p { color: var(--panel-muted); font-size: 16px; margin-top: 14px; line-height: 1.6; }
.mirror-list { list-style: none; display: grid; gap: 1px; background: var(--panel-line); border-top: 1px solid var(--panel-line); border-bottom: 1px solid var(--panel-line); }
.mir { display: flex; gap: 16px; align-items: flex-start; padding: 18px 2px; background: var(--panel); }
.mir-n { font-size: 12px; font-weight: 600; color: var(--purple-soft); flex: none; padding-top: 3px; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.mir-t { color: var(--panel-ink); font-size: 16px; line-height: 1.55; opacity: 0.92; }
.mirror-close { margin-top: 28px; color: var(--panel-ink); font-size: clamp(17px, 2.6vw, 21px); line-height: 1.5; max-width: 54ch; font-weight: 500; }
@media (min-width: 720px) {
  .mirror-panel { padding: 64px 52px; }
  .mir { padding: 22px 4px; gap: 22px; }
  .mir-t { font-size: 17.5px; }
}
@media (min-width: 1024px) { .mirror-list { grid-template-columns: 1fr 1fr; gap: 1px; } }

/* ---------- The arithmetic ---------- */
.math-wrap { display: grid; gap: 16px; }
.math-row {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 22px 20px; background: var(--surface); box-shadow: var(--shadow-sm);
}
.math-row.math-us {
  border-color: var(--accent-solid); background: var(--surface);
  box-shadow: var(--shadow-purple), var(--shadow-sm); position: relative;
}
.math-us::after {
  content: "This is the whole pitch"; position: absolute; top: -10px; left: 20px;
  background: var(--accent-solid); color: #fff; font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em; padding: 4px 12px; border-radius: var(--radius-pill);
}
.math-who { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.math-us .math-who { color: var(--accent-solid); }
.math-eq { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 14px; }
.math-part, .math-out { display: flex; flex-direction: column; }
.math-part b, .math-out b { font-size: clamp(26px, 6vw, 38px); font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.math-part i, .math-out i { font-style: normal; font-size: 12px; color: var(--muted); margin-top: 5px; letter-spacing: 0.01em; }
.math-out b { color: var(--accent-solid); }
.math-us .math-out b { font-size: clamp(32px, 7.5vw, 46px); }
.math-op { font-size: 20px; color: var(--muted-2); font-weight: 300; align-self: center; }
.math-note { margin-top: 16px; font-size: 14.5px; line-height: 1.6; color: var(--muted); max-width: 62ch; }
.math-foot { margin-top: 26px; font-size: clamp(16px, 2.4vw, 19px); line-height: 1.55; color: var(--ink); max-width: 58ch; font-weight: 500; }
@media (min-width: 720px) {
  .math-row { padding: 30px 32px; }
  .math-eq { gap: 12px 22px; }
  .math-part b, .math-out b { white-space: nowrap; }
}

/* ---------- The system (numbered funnel) ---------- */
.sys-list { display: grid; gap: 1px; background: var(--panel-line); border-top: 1px solid var(--panel-line); }
.sysrow { display: flex; gap: 18px; padding: 24px 2px; background: var(--panel); align-items: flex-start; }
.sys-n { font-size: 12px; font-weight: 600; color: var(--purple-soft); flex: none; padding-top: 4px; letter-spacing: 0.06em; }
.sys-b h3 { font-size: clamp(19px, 3.4vw, 24px); font-weight: 600; letter-spacing: -0.025em; color: var(--panel-ink); margin-bottom: 7px; }
.sys-b p { color: var(--panel-muted); font-size: 15.5px; line-height: 1.62; max-width: 68ch; }
@media (min-width: 720px) { .sysrow { gap: 30px; padding: 30px 6px; } }

/* ---------- Teardown offer ---------- */
.td-grid { display: grid; gap: 14px; }
.td-item { display: flex; gap: 14px; padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.td-item h3 { font-size: 16.5px; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 6px; }
.td-item p { font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.td-close { margin-top: 26px; padding: 20px 22px; background: var(--lavender); color: var(--ink-2); border-radius: var(--radius); font-size: 15.5px; line-height: 1.62; max-width: 72ch; margin-left: auto; margin-right: auto; }
@media (min-width: 860px) { .td-grid { grid-template-columns: 1fr 1fr; gap: 18px; } }

/* ---------- Who we turn away ---------- */
.turn-grid { display: grid; gap: 16px; }
.turn { padding: 24px; border: 1px dashed var(--line); border-radius: var(--radius-lg); background: transparent; }
.turn h3 { display: flex; gap: 11px; align-items: flex-start; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.35; margin-bottom: 9px; }
.turn-x { color: var(--muted-2); flex: none; width: 1em; height: 1em; display: inline-flex; padding-top: 2px; }
.turn-x .ico { width: 0.8em; height: 0.8em; }
.turn p { font-size: 14.5px; line-height: 1.62; color: var(--muted); padding-left: 26px; }
@media (min-width: 860px) { .turn-grid { grid-template-columns: 1fr 1fr; gap: 20px; } }

/* ---------- The honest section ---------- */
.honest-section .panel-dark { padding: 40px 24px; }
.honest-section h2 { font-size: clamp(27px, 5.6vw, 44px); font-weight: 600; letter-spacing: -0.04em; line-height: 1.08; color: var(--panel-ink); margin-bottom: 32px; max-width: 20ch; }
.honest-grid { display: grid; gap: 26px; }
.honest h3 { font-size: 15px; font-weight: 600; color: var(--purple-soft); margin-bottom: 10px; letter-spacing: 0.01em; }
.honest p { color: var(--panel-muted); font-size: 15.5px; line-height: 1.65; }
@media (min-width: 720px) { .honest-section .panel-dark { padding: 64px 52px; } }
@media (min-width: 900px) { .honest-grid { grid-template-columns: repeat(3, 1fr); gap: 34px; } }

/* Dark-mode: the lavender callout needs the same treatment as other tints */
:root[data-theme="dark"] .td-close { background: rgba(165,109,255,0.14); color: var(--ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .td-close { background: rgba(165,109,255,0.14); color: var(--ink); }
}

/* Section rhythm for the new home blocks */
.mirror-section { padding-top: 24px; }
.math-section, .teardown-section, .turn-section { padding-top: 64px; }
.teardown-section .section-head, .turn-section .section-head, .math-section .section-head { margin-bottom: 40px; }
@media (min-width: 720px) { .math-section, .teardown-section, .turn-section { padding-top: 96px; } }

/* Operators need to read as operators, not stray punctuation */
.math-op {
  font-size: clamp(20px, 4vw, 28px); font-weight: 300; color: var(--muted-2);
  align-self: flex-start; padding-top: 0.08em; line-height: 1;
}
.math-arrow { color: var(--accent-solid); font-weight: 400; }
.mirror-head { max-width: 54ch; }

/* ---------- Who does the work ---------- */
.op-section { padding-top: 64px; }
.op-grid { display: grid; gap: 18px; }
.op {
  padding: 26px 24px; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--line);
  /* inset shadow rather than border-left, so the accent follows the radius
     instead of poking out past the rounded corners */
  box-shadow: inset 3px 0 0 0 var(--accent-solid), var(--shadow-sm);
  position: relative; overflow: hidden;
}
.op h3 { font-size: 17.5px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; margin-bottom: 9px; }
.op p { font-size: 15px; line-height: 1.65; color: var(--muted); }
.op-close {
  margin-top: 26px; padding: 22px 24px; border-radius: var(--radius);
  background: var(--lavender); color: var(--ink-2);
  font-size: 15.5px; line-height: 1.65; max-width: 74ch;
}
@media (min-width: 900px) { .op-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
@media (min-width: 720px) { .op-section { padding-top: 96px; } }

/* ---------- The diagnostic order ---------- */
.diag-section { padding-top: 64px; }
.diag-list { display: grid; gap: 1px; background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.diag { display: flex; gap: 18px; align-items: flex-start; padding: 24px 2px; background: var(--paper); }
.diag-n {
  font-size: 12px; font-weight: 600; color: var(--accent-solid); flex: none;
  padding-top: 5px; letter-spacing: 0.06em; font-variant-numeric: tabular-nums;
}
.diag-b h3 { font-size: clamp(18px, 3.2vw, 22px); font-weight: 600; letter-spacing: -0.025em; margin-bottom: 7px; }
.diag-b p { font-size: 15.5px; line-height: 1.65; color: var(--muted); max-width: 74ch; }
.diag:last-child .diag-b h3 { color: var(--accent-solid); }
.diag-close { margin-top: 26px; font-size: clamp(16px, 2.4vw, 19px); line-height: 1.55; color: var(--ink); font-weight: 500; max-width: 60ch; }
@media (min-width: 720px) { .diag-section { padding-top: 96px; } .diag { gap: 28px; padding: 30px 6px; } }

/* dark-mode tint parity for the lavender callout */
:root[data-theme="dark"] .op-close { background: rgba(165,109,255,0.14); color: var(--ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .op-close { background: rgba(165,109,255,0.14); color: var(--ink); }
}

/* ══════════════════════════════════════════════════════════════════
   HOME v3 — compressed
   ══════════════════════════════════════════════════════════════════ */

/* --- Compressed arithmetic --- */
.attn-section { padding: 40px 0 8px; }
.attn-list {
  display: grid; gap: 1px;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--line); overflow: hidden; max-width: 780px; margin: 0 auto;
}
.attn {
  display: grid;
  /* Mobile: let the number column shrink to its own content; arrow + label wrap */
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 14px; padding: 20px 18px; background: var(--paper);
}
@media (min-width: 720px) {
  .attn { grid-template-columns: 130px auto 1fr; gap: 16px 20px; padding: 22px 26px; }
}
.attn-a { display: flex; align-items: baseline; gap: 8px; }
.attn-a b {
  font-size: clamp(28px, 5vw, 40px); font-weight: 600; letter-spacing: -0.04em;
  line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums;
}
.attn-a { justify-content: flex-start; }
.attn-a i { font-style: normal; font-size: 13px; color: var(--muted); }
.attn-arr { color: var(--muted-2); font-weight: 300; font-size: 18px; }
.attn-b { font-size: clamp(15px, 2.4vw, 18px); color: var(--ink-2); font-weight: 500; }
.attn-us { background: color-mix(in oklab, var(--accent-solid) 6%, var(--paper)); }
.attn-us .attn-a b { color: var(--accent-solid); }
.attn-us .attn-b { color: var(--accent-solid); font-weight: 600; }
.attn-close {
  margin: 30px auto 0; text-align: center; font-size: clamp(17px, 2.6vw, 21px);
  font-weight: 500; color: var(--ink); max-width: 50ch;
}

/* --- Services: 4-column grid on desktop, horizontal-snap scroll on mobile --- */
@media (min-width: 900px) {
  .svc-grid-4 { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .svc-grid-4 .svc { padding: 22px 22px 20px; }
  .svc-grid-4 .svc h3 { font-size: 18px; }
  .svc-grid-4 .svc p { font-size: 14px; }
}
/* Services grid on mobile stacks vertically — that's already the base .svc-grid
   rule ("1fr"). Earlier v2 tried horizontal snap and v4 walked it back; both
   blocks are gone. Base = stack. min-width: 900px gives us the 4-wide layout. */
.svc-foot { flex-wrap: nowrap; gap: 12px; }
.svc-tag { white-space: nowrap; }

/* ══════════════════════════════════════════════════════════════════
   HOME v4 — visual polish, less black, boxed compare
   ══════════════════════════════════════════════════════════════════ */

/* --- Services: light section, 4 wide on desktop, VERTICAL stack on mobile --- */
.svc-section { padding: 72px 0; }
@media (min-width: 720px) { .svc-section { padding: 96px 0; } }

/* Services grid = vertical stack on mobile, 4-wide on desktop. The base rule
   ".svc-grid { grid-template-columns: 1fr }" handles mobile; ".svc-grid-4"
   inside @media (min-width: 900px) below handles the desktop layout. */
.svc-grid.svc-grid-4 { gap: 14px; }
@media (min-width: 900px) {
  .svc-grid.svc-grid-4 { gap: 20px; }
}

/* Light-mode service cards on the light section: subtle surface, not black. */
.svc-grid-light .svc {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
}
.svc-grid-light .svc h3 { color: var(--ink); }
.svc-grid-light .svc p { color: var(--muted); }
.svc-grid-light .svc-icon {
  background: var(--lavender); color: var(--accent-solid); border: none;
}
.svc-grid-light .svc-num {
  background: var(--lavender); color: var(--accent-solid);
}
.svc-grid-light .svc-foot { border-top: 1px solid var(--line-soft); }
.svc-grid-light .svc-link { color: var(--accent-solid); }
.svc-grid-light .svc-tag {
  background: transparent; color: var(--muted);
  border: 1px solid var(--line);
}

/* --- Mirror panel: fix the ragged bottom, tighten proportions --- */
.mirror-section { padding: 40px 0 72px; }
@media (min-width: 720px) { .mirror-section { padding: 40px 0 96px; } }
.mirror-panel {
  border-radius: var(--radius-lg); overflow: hidden;
}
.mirror-list { border-bottom: none; margin-bottom: 0; }
.eyebrow-pill.on-dark {
  background: rgba(251,251,241,0.08); border-color: rgba(251,251,241,0.14);
  color: var(--panel-ink);
}

/* --- Attention section: give it context head, tighten spacing --- */
.attn-section { padding: 72px 0 32px; }
.attn-section .section-head { margin-bottom: 40px; }
@media (min-width: 720px) { .attn-section { padding: 96px 0 40px; } }

/* --- Compare section wrapped in a boxed panel with CTA --- */
.compare-section { padding: 40px 0 72px; }
@media (min-width: 720px) { .compare-section { padding: 40px 0 96px; } }
.compare-panel {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 40px 24px;
}
@media (min-width: 720px) {
  .compare-panel { padding: 64px 56px; }
}
.compare-panel .compare-head {
  /* Mobile: left-aligned reads naturally next to the two stacked columns.
     Tablet+: the panel widens and left-align leaves an unbalanced right
     margin, so center the head block (pill, h2, sub) from 720px up. */
  text-align: left; max-width: 60ch; margin-bottom: 36px;
}
@media (min-width: 720px) {
  .compare-panel .compare-head {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
}
.compare-panel .compare-head h2 {
  font-size: clamp(26px, 5vw, 40px); font-weight: 600;
  letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 12px;
}
.compare-panel .compare-head p {
  color: var(--muted); font-size: 16px; line-height: 1.6;
}
.compare-panel .compare-head .eyebrow-pill { margin-bottom: 18px; }

/* Compare columns: no floating white cards. On mobile the two columns stack on
   cream, and boxed-in white surfaces read as disconnected fragments — kill the
   surface, distinguish the two columns typographically instead. */
.compare-panel .compare-grid {
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.compare-panel .compare-col {
  background: transparent;
  padding: 0;
  border: none;
  border-radius: 0;
}
/* "Them" reads muted, lower-contrast — the wrong choice */
.compare-panel .compare-col.them .compare-col-title { color: var(--muted); }
.compare-panel .compare-col.them .compare-mark {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted-2);
}
/* "Us" gets a soft accent tint container so it clearly reads as the pick */
.compare-panel .compare-col.us {
  position: relative;
  padding: 26px 20px 8px;
  background: color-mix(in oklab, var(--accent-solid) 5%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent-solid) 18%, transparent);
  border-radius: var(--radius-lg);
}
.compare-panel .compare-col.us .compare-col-title { color: var(--accent-solid); }
.compare-panel .compare-col.us .compare-list li { color: var(--ink); }
.compare-panel .compare-col.us .compare-list li:last-child { border-bottom: none; }
.compare-panel .compare-col.them .compare-list li:last-child { border-bottom: none; }
/* Mobile: labeled visual break above the "us" column */
.compare-panel .compare-col.us::before {
  content: "vs";
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  padding: 3px 12px;
  background: var(--paper-2);
  color: var(--muted-2);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}
@media (min-width: 720px) {
  .compare-panel .compare-grid { gap: 40px; }
  .compare-panel .compare-col.us { padding: 24px 26px 10px; }
  /* Two columns on desktop — hide the "vs" label, the split is obvious */
  .compare-panel .compare-col.us::before { display: none; }
}

.compare-cta {
  margin-top: 36px; display: flex; flex-direction: column;
  align-items: center; gap: 12px; text-align: center;
}
.compare-cta-note { font-size: 13px; color: var(--muted); }
@media (min-width: 720px) {
  .compare-cta { flex-direction: row; justify-content: center; gap: 20px; }
}

/* --- Proof (deliberately-empty testimonials) --- */
.proof-section { padding: 40px 0 72px; }
@media (min-width: 720px) { .proof-section { padding: 40px 0 96px; } }
.proof-card {
  background: var(--surface); border: 1px dashed var(--line);
  border-radius: var(--radius-xl); padding: 36px 26px;
  max-width: 780px; margin: 0 auto;
  box-shadow: var(--shadow-sm);
}
.proof-body p {
  font-size: 16px; line-height: 1.65; color: var(--muted);
  margin-bottom: 16px;
}
.proof-body p:first-child strong { color: var(--ink); font-weight: 600; }
.proof-offer {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px 20px; margin: 22px 0 24px;
  background: var(--lavender); border-radius: var(--radius);
  color: var(--ink-2); font-size: 15px; line-height: 1.6;
}
.proof-tag {
  background: var(--accent-solid); color: #fff;
  padding: 3px 10px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; flex: none; align-self: flex-start;
}
.proof-body .btn-primary { display: inline-flex; }
@media (min-width: 720px) {
  .proof-card { padding: 48px 44px; }
}

/* Dark-mode adjustments for the new blocks */
:root[data-theme="dark"] .compare-panel { background: var(--paper-2); }
:root[data-theme="dark"] .proof-offer { background: rgba(165,109,255,0.14); color: var(--ink); }
:root[data-theme="dark"] .svc-grid-light .svc-icon,
:root[data-theme="dark"] .svc-grid-light .svc-num { background: rgba(165,109,255,0.16); color: var(--purple-mid); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .compare-panel { background: var(--paper-2); }
  :root:not([data-theme="light"]) .proof-offer { background: rgba(165,109,255,0.14); color: var(--ink); }
  :root:not([data-theme="light"]) .svc-grid-light .svc-icon,
  :root:not([data-theme="light"]) .svc-grid-light .svc-num { background: rgba(165,109,255,0.16); color: var(--purple-mid); }
}

/* Tighter section rhythm — steps needs its own breathing room too */
.steps-section { padding: 40px 0 72px; }
@media (min-width: 720px) { .steps-section { padding: 40px 0 96px; } }

/* ══════════════════════════════════════════════════════════════════
   HERO — QUOTE VARIANT (homepage)
   Same visual language as the rest of the site: Inter Tight, cream
   surface, purple accent. Only structural additions the base .hero
   didn't need are the quote mark, the attribution, and the trust
   pills below the CTAs.
   ══════════════════════════════════════════════════════════════════ */
.hero-quote { padding-top: 32px; padding-bottom: 24px; }
@media (min-width: 720px) { .hero-quote { padding-top: 64px; padding-bottom: 48px; } }

.hero-quote .q-block {
  position: relative;
  max-width: 900px;
  margin: 0 auto 40px;
}
@media (min-width: 720px) { .hero-quote .q-block { margin-bottom: 48px; } }
.hero-quote .q-mark {
  display: block;
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600;
  font-size: clamp(72px, 16vw, 140px);
  line-height: 0.5;
  letter-spacing: -0.06em;
  text-align: center;
  margin-bottom: 20px;
  background: var(--grad-text);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: qMarkBreathe 4s ease-in-out infinite;
}
@keyframes qMarkBreathe {
  0%, 100% { opacity: 0.75; transform: translateY(0) scale(1); }
  50%      { opacity: 1;    transform: translateY(-2px) scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-quote .q-mark { animation: none; opacity: 1; }
}

/* The quote itself. Uses the site's Inter Tight scale but tuned tighter for
   a headline that reads as a spoken sentence, not a marketing headline. */
.hero-quote .q-text {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 500;
  font-size: clamp(28px, 6.2vw, 56px);
  letter-spacing: -0.035em;
  line-height: 1.12;
  color: var(--ink);
  text-wrap: pretty;
  margin-bottom: 18px;
}
@media (min-width: 720px) {
  .hero-quote .q-text { letter-spacing: -0.04em; line-height: 1.06; }
}
.hero-quote .q-text .accent {
  background: var(--grad-text);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 500;
}
/* Animated purple underline on the key accent word — grows in after load */
.hero-quote .q-under { position: relative; display: inline-block; }
.hero-quote .q-under::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--grad-purple);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  animation: qUnderline 0.9s 1.1s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes qUnderline { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .hero-quote .q-under::after { animation: none; transform: scaleX(1); }
}

.hero-quote .q-attr {
  margin-top: 28px;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 720px) { .hero-quote .q-attr { margin-top: 32px; } }
.hero-quote .q-attr span {
  background: var(--grad-text);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 600;
}

/* Trust pills row under the CTAs */
.hero-trust {
  list-style: none;
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: 8px 20px;
  margin: 20px auto 0;
  padding: 0;
}
.hero-trust li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.trust-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-solid);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent-solid) 18%, transparent);
  flex: none;
}

/* ═════════════════════════════════════════════════════════════
   PERFORMANCE MARKETING — GROWTH-ENGINE LANDING PAGE
   Uses the site's own tokens (Inter Tight, --purple, --cream, --panel)
   and existing components (.hero, .panel-dark, .compare-panel, .faq-item, .final-cta).
   The classes below are the only new ones — for the visualization patterns.
   ═════════════════════════════════════════════════════════════ */

/* ---- METRIC QUAD (Problem section — 4 arrow cards, sits on --panel-dark) ---- */
.metric-quad {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 36px auto 40px;
  max-width: 780px;
}
@media (min-width: 720px) {
  .metric-quad { grid-template-columns: repeat(4, 1fr); gap: 14px; }
}
.metric-card {
  background: rgba(251,251,241,0.04);
  border: 1px solid var(--panel-line, rgba(251,251,241,0.10));
  border-radius: 18px;
  padding: 24px 20px;
  text-align: center;
  transition: transform 220ms cubic-bezier(.22,.61,.36,1), border-color 220ms, background 220ms;
}
.metric-card:hover {
  transform: translateY(-3px);
  border-color: rgba(251,251,241,0.25);
  background: rgba(251,251,241,0.07);
}
.metric-card .metric-label {
  font-family: 'Inter Tight', sans-serif;
  font-size: 12px;
  color: var(--panel-muted, rgba(251,251,241,0.62));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 10px;
  font-weight: 500;
}
.metric-card .metric-arrow {
  font-family: 'Inter Tight', sans-serif;
  font-size: 40px;
  font-weight: 500;
  color: var(--panel-ink);
  line-height: 1;
}
.metric-card .metric-arrow.up-bad,
.metric-card .metric-arrow.down { color: #FF7A7A; }

/* ---- LEAK FUNNEL (horizontal chain on dark panel) ---- */
.leak-funnel {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin: 40px auto 32px;
  max-width: 1000px;
}
.leak-step {
  padding: 14px 22px;
  background: rgba(251,251,241,0.06);
  border: 1px solid rgba(251,251,241,0.14);
  border-radius: 999px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 14px;
  color: var(--panel-ink);
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: background 220ms, border-color 220ms, transform 220ms;
  cursor: default;
}
.leak-step:hover {
  background: var(--purple);
  border-color: var(--purple);
  color: #fff;
  transform: translateY(-2px);
}
.leak-arr {
  color: var(--panel-muted);
  font-size: 16px;
  font-family: 'Inter Tight', sans-serif;
}
@media (max-width: 640px) {
  .leak-funnel { gap: 6px; }
  .leak-step { padding: 10px 16px; font-size: 12.5px; }
  .leak-arr { font-size: 13px; }
}

/* ---- Panel close-line (dark bg) ---- */
.panel-close {
  font-family: 'Inter Tight', sans-serif;
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 500;
  color: var(--panel-ink);
  text-align: center;
  letter-spacing: -0.02em;
  margin: 24px 0 0;
  line-height: 1.25;
}

/* ═════════════════════════════════════════════════════════════
   PERF-PAGE SCOPED OVERRIDES
   Clean agency layout (parrotmedia-inspired), controlled typography,
   no drama. Applied only under body.perf-page — homepage untouched.
   ═════════════════════════════════════════════════════════════ */

/* Hide breadcrumb on this page (Ashutosh's request) */
body.perf-page .crumbs { display: none; }

/* Hero — cap the display size, center, add breathing room */
body.perf-page .hero {
  padding: 80px 0 64px;
  text-align: center;
}
body.perf-page .hero-inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
body.perf-page .hero-badge {
  margin: 0 auto 24px;
}
body.perf-page .hero h1 {
  font-family: 'Inter Tight', sans-serif;
  font-size: clamp(36px, 4.8vw, 60px) !important;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.06;
  margin: 0 auto 18px;
  max-width: 820px;
}
body.perf-page .hero-tagline {
  font-family: 'Inter Tight', sans-serif;
  font-size: clamp(17px, 1.8vw, 22px);
  color: var(--purple);
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0 auto 20px;
  line-height: 1.3;
}
body.perf-page .hero .hero-sub {
  font-size: clamp(15px, 1.4vw, 17px);
  color: var(--muted);
  max-width: 660px;
  margin: 0 auto 32px;
  line-height: 1.55;
}
body.perf-page .hero .hero-ctas {
  justify-content: center;
}
body.perf-page .hero-meta {
  margin-top: 28px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
body.perf-page .hero-meta .accent-strong {
  color: var(--purple);
  font-style: normal;
  font-weight: 500;
}

/* Section heads — tighter cap for wide screens */
body.perf-page .section-head h2,
body.perf-page .compare-head h2,
body.perf-page .final-cta h2,
body.perf-page .engine-section h2 {
  font-size: clamp(28px, 3.6vw, 44px) !important;
  letter-spacing: -0.03em;
  line-height: 1.18;
}
body.perf-page .eyebrow-pill {
  letter-spacing: 0.08em;
  font-weight: 500;
}

/* ---- Stats bar (parrotmedia-inspired) ---- */
.stats-section {
  padding: 56px 0;
  background: var(--paper);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 12px;
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
}
@media (min-width: 720px) { .stats-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; } }
.stat-item { padding: 12px 8px; }
.stat-num {
  font-family: 'Inter Tight', sans-serif;
  font-size: clamp(30px, 3.6vw, 48px);
  font-weight: 500;
  color: var(--purple);
  letter-spacing: -0.045em;
  line-height: 1;
  margin-bottom: 10px;
}
.stat-label {
  font-family: 'Inter Tight', sans-serif;
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.04em;
  line-height: 1.4;
}

/* ---- What-we-do 6-service grid ---- */
.services-detail-section {
  padding: 100px 0;
  background: var(--surface);
}
.services-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  max-width: 1160px;
  margin: 48px auto 0;
}
@media (min-width: 640px)  { .services-detail-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .services-detail-grid { grid-template-columns: repeat(3, 1fr); } }
.svc-detail-card {
  padding: 32px 28px;
  background: var(--cream);
  border: 1px solid var(--line-soft);
  border-radius: 20px;
  transition: transform 240ms cubic-bezier(.22,.61,.36,1), border-color 240ms, background 240ms, box-shadow 240ms;
}
.svc-detail-card:hover {
  transform: translateY(-4px);
  border-color: rgba(106,11,255,0.30);
  background: var(--surface);
  box-shadow: 0 16px 36px rgba(0,0,0,0.05);
}
.svc-detail-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(106,11,255,0.10);
  color: var(--purple);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.svc-detail-icon svg { width: 22px; height: 22px; }
.svc-detail-card h3 {
  font-family: 'Inter Tight', sans-serif;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 10px;
  line-height: 1.25;
}
.svc-detail-card p {
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
  letter-spacing: -0.003em;
}

/* ═════════════════════════════════════════════════════════════
   GROWTH ENGINE DASHBOARD ARTIFACT
   Linear-inspired "product-screenshot" treatment — but built as
   a stylized dashboard artifact so the section leads with a
   tangible visual, not another card grid. Uses the site's own
   tokens: cream/white surfaces, hairline lines, purple accent.
   ═════════════════════════════════════════════════════════════ */
.engine-section {
  padding: 100px 0;
  background: var(--paper);
  position: relative;
  overflow: hidden;
}
.engine-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(106,11,255,0.045) 0%, transparent 70%);
  pointer-events: none;
}
.engine-section > .wrap { position: relative; }

.engine-dashboard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 0;
  overflow: hidden;
  max-width: 1080px;
  margin: 56px auto 0;
  box-shadow: 0 32px 72px rgba(0,0,0,0.05), 0 2px 6px rgba(0,0,0,0.02);
  /* Faint top-edge highlight — Linear's "pixel-rendered" panel trick */
  position: relative;
}
.engine-dashboard::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.9) 50%, transparent 100%);
  pointer-events: none;
}

.engine-dash-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(106,11,255,0.025) 0%, transparent 100%);
}
.engine-dash-title {
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--muted);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.engine-dash-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #27a644;
  box-shadow: 0 0 0 3px rgba(39,166,68,0.15);
  animation: pulse-live 2s ease-in-out infinite;
}
@keyframes pulse-live {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.engine-dash-meta {
  font-family: 'Inter Tight', sans-serif;
  font-size: 12px;
  color: var(--muted-2);
  letter-spacing: 0.02em;
}

.engine-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 720px) {
  .engine-cols { grid-template-columns: repeat(2, 1fr); }
  .engine-col:nth-child(1),
  .engine-col:nth-child(2) { border-bottom: 1px solid var(--line-soft); }
  .engine-col:nth-child(even) { border-right: none; }
}
.engine-col {
  padding: 30px 24px;
  border-right: 1px solid var(--line-soft);
  transition: background 300ms ease;
  cursor: default;
}
.engine-col:last-child { border-right: none; }
.engine-col:hover { background: rgba(106,11,255,0.028); }

.engine-col-tag {
  display: inline-block;
  font-family: 'Inter Tight', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--purple);
  background: rgba(106,11,255,0.08);
  padding: 4px 9px;
  border-radius: 5px;
  margin-bottom: 16px;
}
.engine-col-name {
  font-family: 'Inter Tight', sans-serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 4px;
  line-height: 1.2;
}
.engine-col-metric {
  font-family: 'Inter Tight', sans-serif;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 16px;
  letter-spacing: 0.02em;
}
.engine-col-value {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.engine-col-num {
  font-family: 'Inter Tight', sans-serif;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.035em;
  color: var(--ink);
  line-height: 1;
}
.engine-col-delta {
  font-family: 'Inter Tight', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #27a644;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.engine-col-delta::before {
  content: '↑';
  font-size: 11px;
}
.engine-col-delta.down { color: #d92e2e; }
.engine-col-delta.down::before { content: '↓'; }

.engine-dash-bottom {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  background: var(--paper);
  border-top: 1px solid var(--line-soft);
}
.engine-metric-pill {
  padding: 14px 22px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--muted);
  border-right: 1px solid var(--line-soft);
  flex: 1;
  text-align: center;
  transition: color 220ms, background 220ms;
}
.engine-metric-pill:last-child { border-right: none; }
.engine-metric-pill:hover { color: var(--purple); background: rgba(106,11,255,0.03); }
@media (max-width: 640px) {
  .engine-metric-pill { padding: 12px 8px; font-size: 10px; letter-spacing: 0.12em; }
}

.engine-lead {
  text-align: center;
  font-size: 17px;
  color: var(--muted);
  max-width: 720px;
  margin: 40px auto 0;
  letter-spacing: -0.008em;
}

/* ═════════════════════════════════════════════════════════════
   STORY-ARC SECTIONS — Tension · Unlock · Outcome · Stakes
   Support the narrative journey: name the tension → reframe the
   problem → prove the outcome → raise the stakes.
   ═════════════════════════════════════════════════════════════ */

/* --- Tension section (3 numbered "external enemy" cards) --- */
.tension-section { padding: 100px 0; background: var(--paper); }
.tension-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  max-width: 1100px;
  margin: 48px auto 0;
}
@media (min-width: 900px) { .tension-grid { grid-template-columns: repeat(3, 1fr); } }
.tension-item {
  padding: 34px 30px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  transition: transform 240ms cubic-bezier(.22,.61,.36,1), border-color 240ms, box-shadow 240ms;
}
.tension-item:hover {
  transform: translateY(-4px);
  border-color: rgba(106,11,255,0.28);
  box-shadow: 0 20px 44px rgba(0,0,0,0.06);
}
.tension-num {
  font-family: 'Inter Tight', sans-serif;
  font-size: 44px;
  font-weight: 500;
  color: var(--purple);
  letter-spacing: -0.05em;
  line-height: 1;
  margin-bottom: 16px;
}
.tension-item h3 {
  font-family: 'Inter Tight', sans-serif;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 10px;
  line-height: 1.25;
}
.tension-item p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
  letter-spacing: -0.005em;
}
.tension-close {
  text-align: center;
  font-family: 'Inter Tight', sans-serif;
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink);
  max-width: 820px;
  margin: 48px auto 0;
  line-height: 1.35;
}

/* --- Unlock section (iceberg reframe — mobile-first) --- */
.unlock-section {
  padding: 100px 0;
  background: var(--cream);
}
.unlock-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px;
  align-items: center;
  max-width: 1120px;
  margin: 48px auto 0;
}
@media (min-width: 900px) {
  .unlock-grid { grid-template-columns: minmax(220px, 340px) 1fr; gap: 72px; }
}

/* Iceberg visual — SVG shape only, no in-SVG labels (text is HTML for reflow) */
.unlock-viz {
  max-width: 320px;
  width: 100%;
  margin: 0 auto;
  padding: 22px 22px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  position: relative;
  overflow: hidden;
}
.unlock-viz::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent);
}
.unlock-viz svg { width: 100%; height: auto; display: block; }

/* Tags above/below iceberg */
.unlock-viz-tags {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  margin-top: 12px;
}
.unlock-viz-tags .vtag {
  font-family: 'Inter Tight', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.unlock-viz-tags .vtag-purple {
  color: var(--purple);
  background: rgba(106,11,255,0.10);
  padding: 3px 8px;
  border-radius: 5px;
}

@media (max-width: 899px) {
  .unlock-viz { max-width: 240px; }
}

/* Copy on the right (or below on mobile) */
.unlock-copy h3 {
  font-family: 'Inter Tight', sans-serif;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 500;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin: 0 0 24px;
  line-height: 1.22;
}
.unlock-copy h3 .accent { color: var(--purple); }

.unlock-list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.unlock-list li {
  padding-left: 28px;
  position: relative;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.55;
  letter-spacing: -0.005em;
}
.unlock-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--purple);
}
.unlock-list li strong {
  color: var(--ink);
  font-weight: 500;
}
.unlock-conclusion {
  font-family: 'Inter Tight', sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.4;
  margin: 0;
}
.unlock-conclusion .accent { color: var(--purple); }

@media (max-width: 640px) {
  .unlock-section { padding: 64px 0; }
  .unlock-copy h3 { font-size: 21px; }
  .unlock-list li { font-size: 15px; }
  .unlock-conclusion { font-size: 16px; }
}

/* --- Outcome section (4 result cards with big purple numbers) --- */
.outcome-section { padding: 100px 0; background: var(--paper); }
.outcome-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 1120px;
  margin: 48px auto 0;
}
@media (min-width: 640px)  { .outcome-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .outcome-grid { grid-template-columns: repeat(4, 1fr); } }
.outcome-card {
  padding: 34px 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  transition: transform 260ms cubic-bezier(.22,.61,.36,1), border-color 260ms, box-shadow 260ms;
}
.outcome-card:hover {
  transform: translateY(-5px);
  border-color: rgba(106,11,255,0.32);
  box-shadow: 0 20px 44px rgba(106,11,255,0.10);
}
.outcome-big {
  font-family: 'Inter Tight', sans-serif;
  font-size: clamp(34px, 3.6vw, 46px);
  font-weight: 500;
  letter-spacing: -0.05em;
  color: var(--purple);
  line-height: 1;
  margin-bottom: 16px;
}
.outcome-card h3 {
  font-family: 'Inter Tight', sans-serif;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 8px;
  line-height: 1.3;
}
.outcome-card p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

/* --- Stakes section (the loss-aversion line) --- */
.stakes-section {
  padding: 80px 0;
  background: var(--cream);
  text-align: center;
}
.stakes-section .wrap { max-width: 860px; }
.stakes-section h2 {
  font-family: 'Inter Tight', sans-serif;
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 500;
  letter-spacing: -0.045em;
  color: var(--ink);
  line-height: 1.22;
  margin: 0 0 22px;
}
.stakes-section p {
  font-size: 18px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
  letter-spacing: -0.005em;
}
.stakes-section .accent { color: var(--purple); }

/* ═════════════════════════════════════════════════════════════
   PROBLEMS SECTION — marketinglab-inspired
   Bold question pill → highlighted headline → 5-icon grid →
   outro line → black pill CTA. Uses site's Inter Tight + purple
   accent (no yellow/orange highlighter — purple half-underline).
   ═════════════════════════════════════════════════════════════ */
.problems-section {
  padding: 100px 0;
  background: var(--paper);
  text-align: center;
}
.problems-badge {
  display: inline-block;
  padding: 8px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--ink);
  margin-bottom: 26px;
  text-transform: uppercase;
}
.problems-headline {
  font-family: 'Inter Tight', sans-serif;
  font-size: clamp(28px, 3.8vw, 44px) !important;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.15;
  color: var(--ink);
  max-width: 860px;
  margin: 0 auto 56px !important;
}
.problems-headline .highlight,
.problems-outro .highlight {
  color: var(--purple);
  background: none;
  padding: 0;
}
.problems-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 36px 20px;
  max-width: 1120px;
  margin: 0 auto 48px;
}
@media (min-width: 720px) { .problems-grid { grid-template-columns: repeat(5, 1fr); gap: 20px; } }
.problem-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 0 8px;
  transition: transform 260ms cubic-bezier(.22,.61,.36,1);
}
.problem-item:hover { transform: translateY(-4px); }
.problem-icon {
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: filter 260ms ease;
}
.problem-icon svg { width: 100%; height: 100%; }
.problem-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* On hover, colorize the black PNG icons purple via CSS filter */
.problem-item:hover .problem-icon { color: var(--purple); }
.problem-item:hover .problem-icon img {
  filter: brightness(0) saturate(100%) invert(15%) sepia(88%) saturate(6800%) hue-rotate(268deg) brightness(96%) contrast(114%);
}

@media (max-width: 640px) {
  .problem-icon { width: 96px; height: 96px; }
}
.problem-label {
  font-family: 'Inter Tight', sans-serif;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.3;
  max-width: 170px;
}
.problems-outro {
  font-family: 'Inter Tight', sans-serif;
  font-size: clamp(22px, 2.8vw, 32px) !important;
  font-weight: 500;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin: 48px 0 28px !important;
  line-height: 1.25;
}
.problems-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 40px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 240ms cubic-bezier(.22,.61,.36,1), background 240ms;
}
.problems-cta:hover {
  transform: translateY(-3px);
  background: var(--purple);
  color: #fff;
}
.problems-cta .arr-mini {
  display: inline-block;
  transition: transform 240ms;
}
.problems-cta:hover .arr-mini { transform: translateX(4px); }

@media (max-width: 640px) {
  .problems-section { padding: 64px 0; }
  .problem-icon { width: 52px; height: 52px; }
  .problem-label { font-size: 14px; }
}

/* ═════════════════════════════════════════════════════════════
   TOFU / MOFU / BOFU VISUAL FUNNEL
   Classic inverted-funnel graphic (Digisidekick-inspired) but
   rendered in Mscaler's purple/cream language. SVG carries the
   funnel shape only; labels are HTML so mobile reflows cleanly.
   ═════════════════════════════════════════════════════════════ */
.funnel-section {
  padding: 100px 0;
  background: var(--paper);
  position: relative;
  overflow: hidden;
}
.funnel-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(106,11,255,0.04) 0%, transparent 70%);
  pointer-events: none;
}
.funnel-section > .wrap { position: relative; }

.funnel-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
  max-width: 1180px;
  margin: 48px auto 0;
}
@media (min-width: 900px) {
  .funnel-wrap { grid-template-columns: 0.85fr 1fr; gap: 72px; }
}

/* Visual funnel (SVG shapes + HTML text overlay) */
.funnel-visual {
  position: relative;
  max-width: 440px;
  margin: 0 auto;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
}
.funnel-visual::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent);
}
.funnel-visual svg { width: 100%; height: auto; display: block; }

@media (max-width: 899px) {
  .funnel-visual { max-width: 320px; }
}
@media (max-width: 480px) {
  .funnel-visual { max-width: 280px; padding: 18px; }
}

/* Stage cards on the right (or below on mobile) */
.funnel-stages {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.funnel-stage {
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid rgba(106,11,255,0.35);
  border-radius: 14px;
  transition: transform 240ms cubic-bezier(.22,.61,.36,1), box-shadow 240ms, border-color 240ms;
}
.funnel-stage:hover {
  transform: translateX(4px);
  border-left-color: var(--purple);
  box-shadow: 0 14px 32px rgba(0,0,0,0.05);
}
.funnel-stage[data-depth="1"] { border-left-color: rgba(106,11,255,0.45); }
.funnel-stage[data-depth="2"] { border-left-color: rgba(106,11,255,0.65); }
.funnel-stage[data-depth="3"] { border-left-color: rgba(106,11,255,0.85); }
.funnel-stage[data-depth="4"] { border-left-color: var(--purple); }

.funnel-stage-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.funnel-stage-tag {
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--purple);
  letter-spacing: 0.14em;
  background: rgba(106,11,255,0.08);
  padding: 3px 9px;
  border-radius: 5px;
  white-space: nowrap;
}
.funnel-stage-name {
  font-family: 'Inter Tight', sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.funnel-stage p {
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0 0 10px;
  letter-spacing: -0.003em;
}
.funnel-stage-metric {
  font-family: 'Inter Tight', sans-serif;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.03em;
}
.funnel-stage-metric strong {
  color: var(--purple);
  font-weight: 500;
  margin-left: 4px;
}

@media (max-width: 640px) {
  .funnel-section { padding: 64px 0; }
  .funnel-stage { padding: 18px 20px; }
}

/* --- Legacy engine-funnel (v2 alt layout) — kept for compat --- */
.engine-funnel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 48px auto 0;
  max-width: 780px;
}
.engine-stage {
  width: 100%;
  padding: 30px 34px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  transition: transform 260ms cubic-bezier(.22,.61,.36,1), box-shadow 260ms, border-color 260ms;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.engine-stage:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 48px rgba(0,0,0,0.06);
  border-color: rgba(106,11,255,0.28);
}
.engine-funnel .engine-stage:nth-of-type(1) { width: 100%; }
.engine-funnel .engine-stage:nth-of-type(2) { width: 90%; }
.engine-funnel .engine-stage:nth-of-type(3) { width: 78%; }
.engine-funnel .engine-stage:nth-of-type(4) { width: 66%; }
@media (max-width: 720px) {
  .engine-funnel .engine-stage:nth-of-type(1),
  .engine-funnel .engine-stage:nth-of-type(2),
  .engine-funnel .engine-stage:nth-of-type(3),
  .engine-funnel .engine-stage:nth-of-type(4) { width: 100%; }
}
.engine-connector {
  color: rgba(0,0,0,0.28);
  font-family: 'Inter Tight', sans-serif;
  font-size: 22px;
  line-height: 1;
  margin: -2px 0;
}
.engine-tag {
  display: inline-block;
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--purple);
  background: rgba(106,11,255,0.08);
  padding: 5px 10px;
  border-radius: 999px;
  align-self: flex-start;
}
.engine-stage h3 {
  font-family: 'Inter Tight', sans-serif;
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 500;
  letter-spacing: -0.03em;
  margin: 4px 0 2px;
  color: var(--ink);
  line-height: 1.15;
}
.engine-stage p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  letter-spacing: -0.005em;
}
.engine-stage-final {
  background: var(--purple);
  border-color: var(--purple);
}
.engine-stage-final .engine-tag {
  background: rgba(255,255,255,0.16);
  color: #fff;
}
.engine-stage-final h3 { color: #fff; }
.engine-stage-final p  { color: rgba(255,255,255,0.85); }
.engine-stage-final:hover { border-color: var(--purple); box-shadow: 0 24px 48px rgba(106,11,255,0.28); }

/* ---- Engine metrics pill ---- */
.engine-metrics {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 22px;
  padding: 20px 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  max-width: 700px;
  margin: 40px auto 0;
}
.engine-metrics span {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--ink);
}
.engine-metric-sep { color: rgba(0,0,0,0.25); }
.engine-lead {
  text-align: center;
  font-size: 17px;
  color: var(--muted);
  max-width: 640px;
  margin: 32px auto 0;
}

/* ---- FOCUS section (5 brands only) ---- */
.focus-section { padding: 100px 0; background: var(--cream); }
.focus-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  max-width: 1100px;
  margin: 48px auto 40px;
}
@media (min-width: 720px) { .focus-grid { grid-template-columns: repeat(5, 1fr); gap: 16px; } }
.focus-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 30px 20px;
  text-align: center;
  transition: transform 220ms cubic-bezier(.22,.61,.36,1), border-color 220ms, box-shadow 220ms;
}
.focus-item:hover {
  transform: translateY(-4px);
  border-color: var(--purple);
  box-shadow: 0 16px 36px rgba(106,11,255,0.10);
}
.focus-num {
  font-family: 'Inter Tight', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--purple);
  letter-spacing: 0.14em;
  margin-bottom: 14px;
}
.focus-item h3 {
  font-family: 'Inter Tight', sans-serif;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  line-height: 1.25;
}
.focus-tag {
  text-align: center;
  font-family: 'Inter Tight', sans-serif;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 32px 0 0;
}

@media (max-width: 640px) {
  .engine-section { padding: 56px 0; }
  .focus-section { padding: 56px 0; }
}

/* Reveal on scroll — subtle rise + fade */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 700ms cubic-bezier(.22,.61,.36,1), transform 700ms cubic-bezier(.22,.61,.36,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ═════════════════════════════════════════════════════════════
   LEGACY .perf-* CLASSES (v1 landing page — kept for compat)
   ═════════════════════════════════════════════════════════════ */

/* ---------- HERO ---------- */
.perf-hero {
  padding: 72px 0 96px;
  background: linear-gradient(180deg, var(--cream, #f5efe6) 0%, var(--surface, #fbfaf7) 100%);
  position: relative;
  overflow: hidden;
}
.perf-hero h1 {
  font-family: 'Inter Tight', sans-serif;
  font-size: clamp(40px, 6vw, 84px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.02;
  margin: 20px 0 24px;
  max-width: 960px;
  color: var(--ink);
}
.perf-hero h1 em {
  font-style: normal;
  color: var(--purple);
  font-weight: 500;
}
.perf-hero h1 .ink-muted {
  color: var(--muted);
  font-weight: 400;
}
.perf-hero .hero-sub {
  font-size: clamp(16px, 1.4vw, 20px);
  color: var(--muted);
  max-width: 660px;
  line-height: 1.5;
  margin: 0 0 32px;
}
.perf-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.btn-large {
  padding: 18px 32px !important;
  font-size: 16px !important;
}
.perf-trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 28px;
  color: var(--muted);
  font-size: 14px;
}
.perf-trust-strip span { white-space: nowrap; }

@media (max-width: 640px) {
  .perf-hero { padding: 36px 0 56px; }
  .perf-hero h1 { font-size: 38px; }
  .perf-hero .hero-sub { font-size: 16px; margin-bottom: 24px; }
  .perf-trust-strip { gap: 14px; font-size: 13px; margin-top: 20px; }
  .btn-large { padding: 16px 24px !important; font-size: 15px !important; }
}

/* ---------- PROBLEM ---------- */
.perf-problem {
  padding: 96px 0;
  background: var(--surface, #fbfaf7);
}
.perf-problem h2,
.perf-audit h2,
.perf-compare h2,
.perf-process h2,
.perf-faq h2 {
  font-family: 'Inter Tight', sans-serif;
  font-size: clamp(28px, 3.8vw, 50px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
  max-width: 800px;
  margin: 16px 0 44px;
  color: var(--ink);
}
.perf-pain-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  max-width: 1020px;
}
.perf-pain-list li {
  padding: 20px 24px 20px 60px;
  background: var(--cream, #f5efe6);
  border-radius: var(--radius-lg, 20px);
  border: 1px solid var(--line-soft, rgba(0,0,0,0.05));
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  position: relative;
}
.perf-pain-list li::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 22px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--purple);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'><path d='M6 6l12 12M18 6L6 18'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
}
.perf-problem-close {
  margin-top: 36px;
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
  max-width: 720px;
  line-height: 1.4;
}

@media (min-width: 900px) {
  .perf-pain-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .perf-problem { padding: 56px 0; }
  .perf-pain-list li { padding: 16px 20px 16px 52px; font-size: 15px; }
  .perf-pain-list li::before { left: 16px; top: 18px; }
  .perf-problem-close { font-size: 17px; margin-top: 28px; }
}

/* ---------- AUDIT DELIVERABLES ---------- */
.perf-audit {
  padding: 96px 0;
  background: var(--cream, #f5efe6);
}
.perf-audit-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-bottom: 36px;
}
@media (min-width: 720px) { .perf-audit-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .perf-audit-grid { grid-template-columns: repeat(4, 1fr); } }

.perf-audit-card {
  padding: 32px 28px;
  background: var(--surface, #fbfaf7);
  border: 1px solid var(--line, rgba(0,0,0,0.08));
  border-radius: var(--radius-lg, 20px);
  transition: transform 220ms cubic-bezier(.22,.61,.36,1), box-shadow 220ms;
}
.perf-audit-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.06);
}
.perf-audit-num {
  font-family: 'Inter Tight', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--purple);
  letter-spacing: 0.08em;
  margin-bottom: 20px;
}
.perf-audit-card h3 {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  color: var(--ink);
  line-height: 1.2;
}
.perf-audit-card p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}
.perf-audit-note {
  font-size: 16px;
  color: var(--muted);
  max-width: 720px;
  margin: 0 0 28px;
  line-height: 1.5;
}

@media (max-width: 640px) {
  .perf-audit { padding: 56px 0; }
  .perf-audit-card { padding: 24px 22px; }
}

/* ---------- COMPARISON (dark section) ---------- */
.perf-compare {
  padding: 96px 0;
  background: var(--ink, #16151a);
  color: var(--surface, #fbfaf7);
}
.perf-compare h2 { color: var(--surface); }
.perf-compare .eyebrow-pill {
  background: rgba(255,255,255,0.08);
  color: var(--surface);
  border-color: rgba(255,255,255,0.15);
}
.perf-compare-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 800px) {
  .perf-compare-grid { grid-template-columns: 1fr 1fr; gap: 22px; }
}
.perf-compare-col {
  padding: 40px 32px;
  border-radius: var(--radius-lg, 20px);
}
.perf-compare-others {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
}
.perf-compare-us {
  background: var(--purple);
  color: white;
  box-shadow: 0 24px 64px rgba(0,0,0,0.3);
}
.perf-compare-col h3 {
  font-family: 'Inter Tight', sans-serif;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
  color: inherit;
  opacity: 0.85;
}
.perf-compare-us h3 { opacity: 1; }
.perf-compare-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.perf-compare-col li {
  font-size: 15.5px;
  line-height: 1.55;
  padding-left: 30px;
  position: relative;
  color: inherit;
}
.perf-compare-others li {
  opacity: 0.82;
}
.perf-compare-others li::before {
  content: '×';
  position: absolute;
  left: 4px;
  top: -2px;
  color: rgba(255,255,255,0.4);
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
}
.perf-compare-us li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 18px;
  height: 12px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
}

@media (max-width: 640px) {
  .perf-compare { padding: 56px 0; }
  .perf-compare-col { padding: 28px 22px; }
  .perf-compare-col li { font-size: 15px; }
}

/* ---------- FOUNDER + RESULTS ---------- */
.perf-founder {
  padding: 96px 0;
  background: var(--surface, #fbfaf7);
}
.perf-founder-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
}
@media (min-width: 900px) {
  .perf-founder-grid { grid-template-columns: 1.15fr 1fr; gap: 72px; }
}
.perf-founder-copy h2 {
  font-family: 'Inter Tight', sans-serif;
  font-size: clamp(26px, 3.4vw, 42px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 16px 0 24px;
  color: var(--ink);
}
.perf-founder-copy p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0 0 20px;
}
.perf-founder-copy p:last-of-type { margin-bottom: 32px; }
.perf-results {
  padding: 0;
}
.perf-results-title {
  font-family: 'Inter Tight', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 18px;
}
.perf-result-card {
  padding: 26px 28px;
  background: var(--cream, #f5efe6);
  border-radius: var(--radius-lg, 20px);
  margin-bottom: 12px;
  border: 1px solid var(--line-soft, rgba(0,0,0,0.05));
}
.perf-result-num {
  font-family: 'Inter Tight', sans-serif;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1.1;
  margin-bottom: 6px;
}
.perf-result-tag {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.02em;
}

@media (max-width: 640px) {
  .perf-founder { padding: 56px 0; }
  .perf-result-card { padding: 22px 22px; }
  .perf-result-num { font-size: 26px; }
}

/* ---------- PROCESS ---------- */
.perf-process {
  padding: 96px 0;
  background: var(--cream, #f5efe6);
}
.perf-process-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
@media (min-width: 800px) {
  .perf-process-grid { grid-template-columns: repeat(3, 1fr); }
}
.perf-process-step {
  padding: 36px 30px;
  background: var(--surface, #fbfaf7);
  border-radius: var(--radius-lg, 20px);
  border: 1px solid var(--line, rgba(0,0,0,0.08));
}
.perf-step-num {
  font-family: 'Inter Tight', sans-serif;
  font-size: 44px;
  font-weight: 500;
  color: var(--purple);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 20px;
}
.perf-process-step h3 {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  color: var(--ink);
}
.perf-process-step p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 640px) {
  .perf-process { padding: 56px 0; }
}

/* ---------- FAQ ---------- */
.perf-faq {
  padding: 96px 0;
  background: var(--surface, #fbfaf7);
}
.perf-faq-list {
  max-width: 820px;
}
.perf-faq-list details {
  border-bottom: 1px solid var(--line, rgba(0,0,0,0.08));
}
.perf-faq-list details:first-child {
  border-top: 1px solid var(--line, rgba(0,0,0,0.08));
}
.perf-faq-list summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 44px 22px 0;
  font-family: 'Inter Tight', sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  position: relative;
  line-height: 1.35;
}
.perf-faq-list summary::-webkit-details-marker { display: none; }
.perf-faq-list summary::after {
  content: '+';
  position: absolute;
  right: 4px;
  top: 20px;
  font-size: 24px;
  font-weight: 300;
  color: var(--muted);
  line-height: 1;
  transition: transform 220ms ease;
}
.perf-faq-list details[open] summary::after {
  content: '−';
}
.perf-faq-list details p {
  margin: 0 0 22px;
  padding-right: 40px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

@media (max-width: 640px) {
  .perf-faq { padding: 56px 0; }
  .perf-faq-list summary { font-size: 16px; padding: 18px 40px 18px 0; }
  .perf-faq-list summary::after { top: 16px; }
}

/* ---------- FINAL CTA ---------- */
.perf-final-cta {
  padding: 112px 0;
  background: var(--purple);
  color: white;
  text-align: center;
}
.perf-final-cta h2 {
  font-family: 'Inter Tight', sans-serif;
  font-size: clamp(30px, 4.5vw, 60px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: white;
  margin: 0 auto 22px;
  max-width: 940px;
}
.perf-final-cta p {
  font-size: 18px;
  color: rgba(255,255,255,0.85);
  max-width: 640px;
  margin: 0 auto 36px;
  line-height: 1.5;
}
.perf-final-cta .perf-cta-row { justify-content: center; }
.perf-final-cta .btn-primary {
  background: white;
  color: var(--purple);
  border-color: white;
}
.perf-final-cta .btn-primary:hover {
  background: rgba(255,255,255,0.92);
  color: var(--purple);
}
.perf-final-cta .btn-primary .arr {
  background-color: var(--purple);
}
.perf-final-cta .btn-ghost {
  color: white;
  border-color: rgba(255,255,255,0.4);
}
.perf-final-cta .btn-ghost:hover {
  background: rgba(255,255,255,0.1);
  color: white;
}
.perf-final-small {
  font-size: 13px !important;
  color: rgba(255,255,255,0.7) !important;
  margin-top: 22px !important;
  margin-bottom: 0 !important;
}

@media (max-width: 640px) {
  .perf-final-cta { padding: 72px 0; }
  .perf-final-cta p { font-size: 16px; }
}

/* ---------- Header nav dropdown (Services) ---------- */
.nav-links .nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-links .nav-item > a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.nav-caret {
  display: inline-block;
  font-size: 9px;
  transition: transform 220ms ease;
  position: relative; top: 1px;
}
.nav-item:hover .nav-caret,
.nav-item:focus-within .nav-caret { transform: rotate(180deg); }

.nav-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 250px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(0,0,0,0.08), var(--shadow-sm);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 200ms cubic-bezier(.22,.61,.36,1),
    visibility 200ms,
    transform 200ms cubic-bezier(.22,.61,.36,1);
  z-index: 200;
}
/* Invisible bridge so the mouse can travel from the parent link into the
   dropdown without falling into a gap that would close the menu. */
.nav-dropdown::before {
  content: '';
  position: absolute;
  top: -10px; left: 0; right: 0;
  height: 10px;
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown a {
  display: block;
  padding: 10px 16px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 10px;
  transition: background 150ms ease, color 150ms ease;
  white-space: nowrap;
}
.nav-dropdown a:hover,
.nav-dropdown a:focus-visible {
  background: var(--lavender);
  color: var(--purple);
}

/* ---------- Mobile menu — Services as expandable <details> ---------- */
.mobile-menu details.mobile-services {
  border-bottom: 1px solid var(--line-soft);
}
.mobile-menu details.mobile-services summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 20px;
  color: var(--ink);
  font-family: 'Inter Tight', sans-serif;
  font-weight: 500;
  font-size: 28px;
  letter-spacing: -0.03em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mobile-menu details.mobile-services summary::-webkit-details-marker { display: none; }
.mobile-menu details.mobile-services summary::after {
  content: '+';
  font-size: 24px;
  font-weight: 400;
  color: var(--muted);
  transition: transform 200ms ease;
  line-height: 1;
}
.mobile-menu details.mobile-services[open] summary::after {
  content: '−';
}
.mobile-menu details.mobile-services a {
  display: block;
  padding: 14px 20px 14px 36px;
  font-size: 20px;
  color: var(--muted);
  border-bottom: 1px solid var(--line-soft);
}
.mobile-menu details.mobile-services a:last-child { border-bottom: none; }
.mobile-menu details.mobile-services a:hover,
.mobile-menu details.mobile-services a:active { color: var(--ink); }

/* ---------- Primary-button arrow ----------
   The `↗` Unicode character (U+2197) renders too thin in Inter Tight and
   looks visually lighter than the button label. Swap it for a proper SVG
   drawn with stroke-width:2.5 so it matches the button text weight and
   stays crisp at any size. Uses `mask` + `currentColor` so the arrow
   inherits the button's text color automatically. */
.btn-primary .arr {
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: -1px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M7 17L17 7M9 7h8v8'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M7 17L17 7M9 7h8v8'/></svg>") no-repeat center / contain;
  font-size: 0;   /* hides the underlying ↗ character; colour must stay inherited — the mask paints currentColor */
  overflow: hidden;
}

/* ---------- Final CTA: light-purple highlight (non-italic) ---------- */
.final-cta h2 .accent-light { color: #A56DFF; }

/* ---------- Stats with title + description ---------- */
.stat-title {
  font-family: 'Inter Tight', sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.stat-desc {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
  max-width: 240px;
  margin: 0 auto;
}

/* ---------- Process steps joined by a line (desktop) ---------- */
@media (min-width: 720px) {
  .steps-wired { position: relative; }
  .steps-wired::before {
    content: '';
    position: absolute;
    top: 34px;                 /* vertical centre of the 68px step badge */
    left: calc(100% / 6);
    right: calc(100% / 6);
    height: 2px;
    background: linear-gradient(90deg, rgba(106,11,255,0.15), var(--purple), rgba(106,11,255,0.15));
    background-size: 200% 100%;
    animation: wire-flow 3s linear infinite;
    z-index: 0;
  }
  .steps-wired .step-badge { z-index: 1; }
}
@keyframes wire-flow {
  from { background-position: 200% 0; }
  to   { background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .steps-wired::before { animation: none; }
}

/* ---------- Contact form flash + honeypot (WP theme only) ---------- */
.form-flash {
  padding: 14px 16px;
  border-radius: var(--radius);
  font-size: 15px;
  line-height: 1.5;
  margin: 0 0 16px;
}
.form-flash strong { font-weight: 600; }
.form-flash a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.form-flash--ok {
  background: color-mix(in oklab, var(--accent-solid) 8%, var(--paper));
  color: var(--ink);
  border: 1px solid color-mix(in oklab, var(--accent-solid) 30%, transparent);
}
.form-flash--warn {
  background: rgba(212, 143, 30, 0.08);
  color: var(--ink);
  border: 1px solid rgba(212, 143, 30, 0.36);
}
.form-flash--err {
  background: rgba(198, 45, 45, 0.06);
  color: var(--ink);
  border: 1px solid rgba(198, 45, 45, 0.28);
}
/* Honeypot — pushed offscreen; humans never see it, bots fill it and get blocked. */
.cf-hp {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* <br class="mobile-only-br"> — force a line break on mobile so two short
   sentences don't wrap awkwardly mid-word. On tablet+ the line break is
   removed so the sentences flow naturally on one line. */
.mobile-only-br { display: inline; }
@media (min-width: 720px) { .mobile-only-br { display: none; } }

/* Hero lead — a stronger statement line above the muted hero-sub.
   Larger, ink-coloured, medium weight; sits above the sub paragraph. */
.hero-lead {
  font-family: 'Inter Tight', sans-serif;
  font-size: clamp(19px, 2.6vw, 24px);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.35;
  letter-spacing: -0.015em;
  max-width: 640px;
  margin: 0 auto 12px;
  text-wrap: pretty;
}

/* ══════════════════════════════════════════════════════════════════
   HOMEPAGE SERVICES SECTION — PREMIUM UPGRADE
   The services grid is the conversion moment on the homepage, so it
   gets richer motion + hover treatment than the base .svc card:
   - top-edge accent line draws in on hover
   - subtle purple radial glow blooms from the top-right corner
   - card lifts higher with a purple-tinted shadow
   - icon rotates + scales, picks up a soft shadow
   - number badge fills to accent color
   - staggered entry animation with a light scale-in
   All GPU-friendly (transform / opacity / box-shadow only). Scoped
   to `.svc-section` so it never leaks to service or listing pages.
   ══════════════════════════════════════════════════════════════════ */

.svc-section .svc {
  isolation: isolate;
  cursor: pointer;   /* whole card acts like a link */
  transition:
    transform 360ms cubic-bezier(.22,.61,.36,1),
    box-shadow 360ms cubic-bezier(.22,.61,.36,1),
    border-color 260ms ease,
    background 260ms ease;
}

/* Whole-card link. The h3 anchor's ::before stretches across the .svc,
   so clicks anywhere on the card go to that service's page. Interactive
   footer bits stay clickable via z-index (they navigate to the same URL,
   so no conflict). Card gets a soft focus ring when the anchor is
   keyboard-focused, so the "one big card link" reads for keyboard users. */
.svc-section .svc-title-link { outline: none; }
.svc-section .svc-title-link::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.svc-section .svc:has(.svc-title-link:focus-visible),
.svc-section .svc-title-link:focus-visible {
  /* focus-visible on the (invisible) stretched link paints a ring on
     the whole card instead of just the text */
}
.svc-section .svc:has(.svc-title-link:focus-visible) {
  outline: 2px solid var(--accent-solid);
  outline-offset: 3px;
  border-radius: var(--radius-lg);
}
/* Keep the footer link independently hoverable / focusable — same URL,
   so clicking it or the surrounding card both work. */
.svc-section .svc-foot .svc-link {
  position: relative;
  z-index: 2;
}

/* Top accent line — draws in left-to-right on hover */
.svc-section .svc::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad-purple);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 520ms cubic-bezier(.22,.61,.36,1);
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  z-index: 2;
}
.svc-section .svc:hover::before { transform: scaleX(1); }

/* Corner radial glow — soft purple aura from top-right */
.svc-section .svc::after {
  content: '';
  position: absolute;
  top: -60%; right: -25%;
  width: 220px; height: 220px;
  background: radial-gradient(
    circle,
    color-mix(in oklab, var(--accent-solid) 14%, transparent) 0%,
    transparent 65%
  );
  opacity: 0;
  transition: opacity 420ms ease;
  pointer-events: none;
  z-index: 0;
}
.svc-section .svc:hover::after { opacity: 1; }

/* Stronger hover lift + purple-tinted shadow */
.svc-section .svc:hover {
  transform: translateY(-8px);
  border-color: color-mix(in oklab, var(--accent-solid) 45%, transparent);
  box-shadow:
    0 22px 46px color-mix(in oklab, var(--accent-solid) 16%, transparent),
    var(--shadow-md);
}

/* Keep content stacked above the corner glow */
.svc-section .svc-top,
.svc-section .svc h3,
.svc-section .svc > p,
.svc-section .svc-foot {
  position: relative;
  z-index: 1;
}

/* Icon container — rotates slightly + scales + gains soft shadow */
.svc-section .svc-icon {
  transition:
    transform 420ms cubic-bezier(.34,1.56,.64,1),
    box-shadow 340ms ease,
    background 240ms ease;
}
.svc-section .svc:hover .svc-icon {
  transform: rotate(-5deg) scale(1.06);
  box-shadow: 0 8px 22px color-mix(in oklab, var(--accent-solid) 22%, transparent);
}

/* Number badge fills with accent on hover */
.svc-section .svc-num {
  transition:
    background 260ms ease,
    color 260ms ease,
    transform 260ms cubic-bezier(.34,1.56,.64,1);
}
.svc-section .svc:hover .svc-num {
  background: var(--accent-solid);
  color: var(--white);
  transform: scale(1.1);
}

/* Link arrow — travels further, faster */
.svc-section .svc-link .arr {
  transition: transform 260ms cubic-bezier(.22,.61,.36,1);
}
.svc-section .svc:hover .svc-link .arr {
  transform: translateX(6px);
}

/* Tag pill — subtle accent flush on hover */
.svc-section .svc-tag {
  transition: background 240ms ease, color 240ms ease, border-color 240ms ease;
}
.svc-section .svc:hover .svc-tag {
  background: color-mix(in oklab, var(--accent-solid) 8%, transparent);
  color: var(--accent-solid);
  border-color: color-mix(in oklab, var(--accent-solid) 30%, transparent);
}

/* Staggered entry — slight scale-in per card, one after the next.
   Overrides the base .reveal transform with a card-specific curve. */
.svc-section .svc.reveal {
  opacity: 0;
  transform: translateY(22px) scale(0.98);
  transition:
    opacity 640ms cubic-bezier(.22,.61,.36,1),
    transform 640ms cubic-bezier(.22,.61,.36,1);
}
.svc-section .svc.reveal.in {
  opacity: 1;
  transform: none;
}
.svc-section .svc:nth-child(1).reveal { transition-delay: 0ms; }
.svc-section .svc:nth-child(2).reveal { transition-delay: 90ms; }
.svc-section .svc:nth-child(3).reveal { transition-delay: 180ms; }
.svc-section .svc:nth-child(4).reveal { transition-delay: 270ms; }

@media (prefers-reduced-motion: reduce) {
  .svc-section .svc,
  .svc-section .svc-icon,
  .svc-section .svc::before,
  .svc-section .svc::after,
  .svc-section .svc-num,
  .svc-section .svc-link .arr,
  .svc-section .svc-tag { transition: none !important; }
  .svc-section .svc:hover,
  .svc-section .svc:hover .svc-icon,
  .svc-section .svc:hover .svc-num,
  .svc-section .svc:hover .svc-link .arr { transform: none !important; }
  .svc-section .svc.reveal { transition: none; opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════════════════════════════
   HOMEPAGE v5 — GROWTH-SYSTEM POSITIONING
   Structural additions for the rebuilt homepage. Reuses existing
   tokens, buttons, section-head, mirror-panel, svc-grid, and
   final-cta components. Adds new blocks for belief / process /
   who / model / founder / first-call. All rules mobile-first.
   The v4 `.hero-quote` block above is kept intact for backward
   reference; the current homepage uses `.hero-growth` instead.
   ══════════════════════════════════════════════════════════════════ */

/* ---------- HERO (growth variant) ---------- */
.hero-growth { padding-top: 48px; padding-bottom: 32px; }
@media (min-width: 720px) { .hero-growth { padding-top: 72px; padding-bottom: 56px; } }
@media (min-width: 1024px) { .hero-growth { padding-top: 96px; padding-bottom: 72px; } }

/* ---------- CORE BELIEF ---------- */
.belief-section { padding: 48px 0 32px; }
@media (min-width: 720px) { .belief-section { padding: 72px 0 48px; } }
.belief-list {
  list-style: none;
  max-width: 780px;
  margin: 0 auto;
  padding: 0;
  border-top: 1px solid var(--line);
}
.belief-list li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 20px 4px;
  border-bottom: 1px solid var(--line);
  font-size: clamp(17px, 2.6vw, 20px);
  line-height: 1.4;
}
.belief-a { color: var(--ink); font-weight: 500; }
.belief-sep {
  color: var(--muted-2);
  font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 500;
  padding: 2px 0;
}
.belief-b { color: var(--muted); }
@media (min-width: 720px) {
  .belief-list li {
    grid-template-columns: 1fr auto 1fr;
    gap: 24px;
    align-items: baseline;
    padding: 22px 8px;
  }
  .belief-a { text-align: right; }
  .belief-b { text-align: left; }
}
.belief-close {
  margin: 32px auto 0;
  text-align: center;
  font-size: clamp(17px, 2.6vw, 21px);
  color: var(--ink);
  font-weight: 500;
  max-width: 54ch;
  line-height: 1.5;
}

/* ---------- PROBLEMS (extends the .mirror-panel) ---------- */
.problems-section .mir-t strong {
  color: var(--panel-ink);
  font-weight: 600;
  margin-right: 6px;
}
/* The em highlight in the problems headline already inherits from
   `.panel-dark h2 em` — no override needed here. */

/* ---------- MSCALER PROCESS (6-phase) ---------- */
.process-section { padding: 64px 0; }
@media (min-width: 720px) { .process-section { padding: 96px 0; } }
@media (min-width: 1024px) { .process-section { padding: 112px 0; } }
.proc-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 1200px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.proc {
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
  align-items: start;
}
.proc:last-child { border-bottom: none; }
.proc-n {
  font-family: 'Inter Tight', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--accent-solid);
  padding-top: 5px;
  font-variant-numeric: tabular-nums;
}
.proc h3 {
  font-family: 'Inter Tight', sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 6px;
  line-height: 1.2;
}
.proc p {
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.6;
  max-width: 62ch;
}
@media (min-width: 720px) {
  .proc-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 40px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
  }
  .proc {
    display: block;
    padding: 4px 0 6px;
    border-bottom: none;
  }
  .proc-n { padding-top: 0; margin-bottom: 10px; display: block; }
  .proc h3 { font-size: 22px; }
}
@media (min-width: 1024px) {
  .proc-list { grid-template-columns: repeat(3, 1fr); gap: 40px 48px; padding-top: 32px; }
}

/* ---------- WHO WE WORK WITH ---------- */
.who-section { padding: 56px 0; }
@media (min-width: 720px) { .who-section { padding: 88px 0; } }
.who-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
}
@media (min-width: 720px) { .who-grid { grid-template-columns: 1fr 1fr; gap: 24px; } }
.who-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.who-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-solid);
  align-self: flex-start;
}
.who-flow {
  list-style: none;
  display: flex; flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 16px 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  margin: 0;
}
.who-flow li {
  font-family: 'Inter Tight', sans-serif;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  display: inline-flex; align-items: center; gap: 10px;
}
.who-flow li + li::before {
  content: '→';
  color: var(--muted-2);
  font-weight: 400;
}
.who-card p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

/* ---------- MODEL (five-client cap, senior owner) ---------- */
.model-section { padding: 40px 0 64px; }
@media (min-width: 720px) { .model-section { padding: 56px 0 96px; } }
.model-pills {
  list-style: none;
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: 10px 14px;
  margin: 28px auto 0;
  padding: 0;
}
.model-pills li {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.model-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-solid);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent-solid) 18%, transparent);
  flex: none;
}

/* ---------- FOUNDER ---------- */
.founder-section { padding: 64px 0; background: var(--paper-2); }
@media (min-width: 720px) { .founder-section { padding: 96px 0; } }
.founder-section .section-head--left { margin-bottom: 28px; }
.founder-prose { max-width: 68ch; margin: 0; }
.founder-prose p {
  color: var(--ink);
  font-size: clamp(17px, 2.4vw, 19px);
  line-height: 1.65;
  margin-bottom: 18px;
}
/* Highlight the key line with a subtle accent-tinted underline band */
.founder-prose p strong {
  color: var(--ink);
  font-weight: 600;
  background: linear-gradient(180deg, transparent 62%,
    color-mix(in oklab, var(--accent-solid) 22%, transparent) 62%,
    color-mix(in oklab, var(--accent-solid) 22%, transparent) 92%,
    transparent 92%);
}
.founder-sign {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-solid);
}

/* ---------- HOW THE FIRST CALL RUNS ---------- */
.teardown-section .firstcall-block {
  max-width: 820px;
  margin: 40px auto 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--line);
}
.firstcall-title {
  font-family: 'Inter Tight', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 18px;
  text-align: center;
}
.firstcall-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--line-soft);
}
.firstcall-list li {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 14px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--line-soft);
  align-items: baseline;
}
.fc-n {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--accent-solid);
  font-variant-numeric: tabular-nums;
}
.fc-b {
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
}
.fc-b strong { color: var(--ink); font-weight: 600; margin-right: 4px; }
@media (min-width: 720px) {
  .firstcall-list {
    grid-template-columns: 1fr 1fr;
    border-top: none;
  }
  .firstcall-list li:nth-child(2),
  .firstcall-list li:nth-child(4) {
    border-left: 1px solid var(--line-soft);
    padding-left: 24px;
  }
}

/* ---------- Services dropdown trigger (button, not a link) ---------- */
.nav-links .nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  background: none;
  border: 0;
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.nav-links .nav-trigger:hover,
.nav-item.open .nav-trigger { background: var(--lavender); color: var(--purple); }
.nav-item.open .nav-caret { transform: rotate(180deg); }
.nav-item.open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* ═════════════════════════════════════════════════════════════
   CONTACT PAGE v2 — centred hero with drifting line waves,
   "or" divider, floating-icon form card, channel cards, FAQ.
   ═════════════════════════════════════════════════════════════ */
.ct-hero {
  position: relative;
  overflow: hidden;
  padding: 72px 0 40px;
  text-align: center;
}
.ct-waves {
  position: absolute;
  left: 0; bottom: -40px;
  width: 200%;
  height: 420px;
  pointer-events: none;
  animation: ct-drift 38s linear infinite;
  opacity: 0.9;
}
.ct-waves path { fill: none; stroke: var(--purple); stroke-width: 1; }
@keyframes ct-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ct-waves { animation: none; } }

.ct-hero-inner { position: relative; max-width: 760px; margin: 0 auto; }
.ct-kicker {
  font-family: 'Inter Tight', sans-serif;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}
.ct-hero h1 {
  font-family: 'Inter Tight', sans-serif;
  font-size: clamp(38px, 5.4vw, 64px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.04;
  margin: 0 0 18px;
}
.ct-hero .hero-sub {
  font-size: clamp(15px, 1.4vw, 17px);
  color: var(--muted);
  max-width: 600px;
  margin: 0 auto 28px;
  line-height: 1.55;
}
.ct-hero .hero-ctas { justify-content: center; }

.ct-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 14px;
  margin-top: 32px;
}
.ct-trust span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.ct-trust svg { width: 15px; height: 15px; color: var(--purple); }

.ct-or {
  text-align: center;
  font-family: 'Inter Tight', sans-serif;
  font-size: 30px;
  font-weight: 500;
  color: var(--ink);
  margin: 8px 0 28px;
}

/* Form card with floating icon bubbles */
.ct-form-section { padding: 0 0 88px; scroll-margin-top: 100px; }
.ct-card-wrap { position: relative; max-width: 700px; margin: 0 auto; padding: 0 16px; }
.ct-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 44px 48px 36px;
  box-shadow: 0 30px 80px rgba(106,11,255,0.08), 0 2px 8px rgba(0,0,0,0.03);
  scroll-margin-top: 100px;
}
.ct-card h2 {
  font-family: 'Inter Tight', sans-serif;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 500;
  letter-spacing: -0.035em;
  text-align: center;
  margin: 0 0 6px;
}
.ct-card-sub { text-align: center; color: var(--muted); font-size: 15px; margin: 0 0 26px; }

.ct-bubble {
  position: absolute;
  z-index: 2;
  width: 58px; height: 58px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  box-shadow: 0 14px 30px rgba(106,11,255,0.28);
  animation: ct-float 5s ease-in-out infinite;
  text-decoration: none;
}
.ct-bubble svg { width: 26px; height: 26px; }
.ct-bubble--1 { background: var(--purple); left: -8px; top: 34px; }
.ct-bubble--2 { background: #25D366; right: -8px; top: 150px; animation-delay: -1.6s; box-shadow: 0 14px 30px rgba(37,211,102,0.3); }
.ct-bubble--3 { background: var(--ink); left: -2px; bottom: 90px; animation-delay: -3.2s; box-shadow: 0 14px 30px rgba(0,0,0,0.2); }
@keyframes ct-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .ct-bubble { animation: none; } }

.ct-form { display: grid; grid-template-columns: 1fr; gap: 6px 28px; }
@media (min-width: 640px) { .ct-form { grid-template-columns: 1fr 1fr; } }
.ct-form .ct-full { grid-column: 1 / -1; }

.ct-field { position: relative; }
.ct-field input,
.ct-field textarea {
  width: 100%;
  border: 0;
  border-bottom: 1.5px solid var(--line);
  background: transparent;
  padding: 26px 0 10px;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  outline: none;
  border-radius: 0;
  transition: border-color 200ms ease;
}
.ct-field textarea { resize: vertical; min-height: 96px; }
.ct-field label {
  position: absolute;
  left: 0; top: 26px;
  font-size: 16px;
  color: var(--muted-2, #9A9A94);
  pointer-events: none;
  transition: transform 200ms ease, font-size 200ms ease, color 200ms ease, top 200ms ease;
}
.ct-field input:focus,
.ct-field textarea:focus { border-bottom-color: var(--purple); }
.ct-field input:focus + label,
.ct-field input:not(:placeholder-shown) + label,
.ct-field textarea:focus + label,
.ct-field textarea:not(:placeholder-shown) + label {
  top: 4px;
  font-size: 12px;
  color: var(--purple);
  font-weight: 500;
}

.ct-chips-label { font-size: 13px; font-weight: 500; color: var(--muted); margin: 22px 0 10px; }
.ct-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ct-chips label { position: relative; cursor: pointer; }
.ct-chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ct-chips span {
  display: inline-block;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14px;
  color: var(--ink);
  background: var(--paper);
  transition: background 180ms, border-color 180ms, color 180ms;
}
.ct-chips label:hover span { border-color: var(--purple); }
.ct-chips input:checked + span { background: var(--purple); border-color: var(--purple); color: #fff; }
.ct-chips input:focus-visible + span { outline: 2px solid var(--purple); outline-offset: 2px; }

.ct-submit { margin-top: 26px; }
.ct-submit .btn-primary { width: 100%; justify-content: center; padding: 17px 24px; font-size: 16px; }
.ct-note { text-align: center; font-size: 13px; color: var(--muted); margin: 14px 0 0; }
.ct-note a { color: var(--purple); }

@media (max-width: 640px) {
  .ct-card { padding: 36px 22px 28px; border-radius: 22px; }
  .ct-bubble { width: 46px; height: 46px; }
  .ct-bubble svg { width: 21px; height: 21px; }
  .ct-bubble--1 { left: 0; top: -18px; }
  .ct-bubble--2 { right: 0; top: -18px; }
  .ct-bubble--3 { display: none; }
}

/* Channel cards */
.ct-channels { padding: 0 0 88px; }
.ct-channel-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 1040px;
  margin: 0 auto;
}
@media (min-width: 760px) { .ct-channel-grid { grid-template-columns: repeat(3, 1fr); } }
.ct-channel {
  display: block;
  padding: 28px 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  text-decoration: none;
  color: var(--ink);
  transition: transform 240ms cubic-bezier(.22,.61,.36,1), border-color 240ms, box-shadow 240ms;
}
.ct-channel:hover { transform: translateY(-4px); border-color: rgba(106,11,255,0.3); box-shadow: 0 16px 36px rgba(0,0,0,0.05); }
.ct-channel-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(106,11,255,0.1); color: var(--purple);
  display: grid; place-items: center; margin-bottom: 16px;
}
.ct-channel-icon svg { width: 22px; height: 22px; }
.ct-channel h3 { font-family: 'Inter Tight', sans-serif; font-size: 18px; font-weight: 500; letter-spacing: -0.02em; margin: 0 0 4px; }
.ct-channel p { font-size: 14px; color: var(--muted); margin: 0 0 12px; }
.ct-channel strong { font-weight: 500; color: var(--purple); font-size: 15px; }

/* Site-wide default for .accent; section-specific rules above still win. */
.accent { color: var(--purple); }

/* WhatsApp-green CTA */
.btn-primary.btn-whatsapp { background: #25D366; color: #fff; box-shadow: 0 10px 26px rgba(37,211,102,0.28); }
.btn-primary.btn-whatsapp:hover { background: #1EBE5A; color: #fff; }
.btn-whatsapp .wa-ico { width: 18px; height: 18px; flex-shrink: 0; }

/* Contact page already shows mail / WhatsApp / call — drop the sticky bottom bar there. */
.page-template-page-contact .mobile-actions { display: none !important; }
body.page-template-page-contact.has-action-bar { padding-bottom: 0; }

/* ═════════════════════════════════════════════════════════════
   LEAD GENERATION PAGE — line-icon problems, lead-engine pipeline
   (narrowing bars + count-up numbers), 4 engine parts.
   ═════════════════════════════════════════════════════════════ */
.problem-icon--line { width: 72px; height: 72px; color: var(--ink); }
.problem-icon--line svg { width: 100%; height: 100%; }
.problem-item:hover .problem-icon--line { color: var(--purple); }

.lead-engine { padding: 100px 0; background: var(--paper); position: relative; overflow: hidden; }
.lead-engine::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(106,11,255,0.05) 0%, transparent 70%);
  pointer-events: none;
}
.lead-engine > .wrap { position: relative; }

.lf-panel {
  max-width: 1040px;
  margin: 48px auto 0;
  padding: 36px 36px 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.05);
}
.lf-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; }
.lf-title {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.lf-dot { width: 7px; height: 7px; border-radius: 50%; background: #27a644; box-shadow: 0 0 0 3px rgba(39,166,68,0.15); animation: pulse-live 2s ease-in-out infinite; }
.lf-meta { font-size: 12px; color: var(--muted-2, #9A9A94); }

.lf-rows { display: flex; flex-direction: column; gap: 12px; }
.lf-row { display: grid; grid-template-columns: 140px 1fr 80px; align-items: center; gap: 16px; }
.lf-label { font-family: 'Inter Tight', sans-serif; font-size: 15px; font-weight: 500; color: var(--ink); }
.lf-track { display: block; height: 38px; background: var(--paper); border-radius: 10px; overflow: hidden; }
.lf-bar {
  display: block;
  height: 100%; width: 0;
  border-radius: 10px;
  background: rgba(106,11,255,var(--a, 0.2));
  transition: width 1400ms cubic-bezier(.22,.61,.36,1);
}
.lf-panel.in-view .lf-bar { width: var(--w); }
.lf-num { font-family: 'Inter Tight', sans-serif; font-size: 22px; font-weight: 500; letter-spacing: -0.03em; text-align: right; color: var(--ink); }
.lf-row--win .lf-label, .lf-row--win .lf-num { color: var(--purple); }
.lf-note { margin: 22px 0 0; font-size: 12px; color: var(--muted-2, #9A9A94); text-align: center; }
@media (max-width: 640px) {
  .lf-panel { padding: 24px 18px 20px; }
  .lf-row { grid-template-columns: 92px 1fr 54px; gap: 10px; }
  .lf-label { font-size: 13px; }
  .lf-num { font-size: 17px; }
  .lf-track { height: 30px; }
}
@media (prefers-reduced-motion: reduce) { .lf-bar { transition: none; } }

.engine-parts {
  display: grid; grid-template-columns: 1fr; gap: 16px;
  max-width: 1160px; margin: 40px auto 0;
}
@media (min-width: 640px)  { .engine-parts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .engine-parts { grid-template-columns: repeat(4, 1fr); } }
.engine-part {
  position: relative;
  padding: 28px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  transition: transform 240ms cubic-bezier(.22,.61,.36,1), border-color 240ms, box-shadow 240ms;
}
.engine-part:hover { transform: translateY(-4px); border-color: rgba(106,11,255,0.3); box-shadow: 0 16px 36px rgba(0,0,0,0.05); }
.engine-part-num { position: absolute; top: 24px; right: 24px; font-size: 12px; font-weight: 500; letter-spacing: 0.1em; color: var(--muted-2, #9A9A94); }
.engine-part h3 { font-family: 'Inter Tight', sans-serif; font-size: 18px; font-weight: 500; letter-spacing: -0.025em; margin: 0 0 8px; }
.engine-part p { font-size: 14.5px; color: var(--muted); line-height: 1.55; margin: 0; }

/* 2-column phone grid: centre a lone last problem icon */
@media (max-width: 719px) {
  .problems-grid > .problem-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ═════════════════════════════════════════════════════════════
   SIMPLE FINAL CTA (site-wide): plain dark panel, one text colour,
   one button. No glow, no gradient words, no small print.
   ═════════════════════════════════════════════════════════════ */
.final-cta::before { display: none; }
.final-cta h2,
.final-cta h2 em,
.final-cta h2 .accent,
.final-cta h2 .accent-light {
  color: var(--panel-ink, #FBFBF1);
  background: none;
  -webkit-text-fill-color: currentColor;
  font-style: normal;
}
.final-cta h2 { font-size: clamp(30px, 4.6vw, 54px); line-height: 1.1; max-width: 760px; }
.final-cta p { color: rgba(251,251,241,0.72); font-size: 17px; max-width: 560px; }
.final-cta .final-note { display: none; }

/* Service landing-page hero: centred on desktop, left-aligned on phones */
@media (max-width: 719px) {
  body.perf-page .hero,
  body.perf-page .hero-inner { text-align: left; }
  body.perf-page .hero h1,
  body.perf-page .hero-tagline,
  body.perf-page .hero .hero-sub { margin-left: 0; margin-right: 0; }
  body.perf-page .hero .hero-ctas { justify-content: flex-start; }
}

/* ═════════════════════════════════════════════════════════════
   BRANDED FINAL CTA: solid Mscaler purple with a faint dot texture,
   white text, black button. Still one colour family, nothing busy.
   ═════════════════════════════════════════════════════════════ */
.final-cta {
  background-color: var(--purple);
  background-image: radial-gradient(rgba(255,255,255,0.14) 1px, transparent 1.4px);
  background-size: 22px 22px;
  background-position: center;
}
.final-cta h2,
.final-cta h2 em,
.final-cta h2 .accent,
.final-cta h2 .accent-light { color: #fff; }
.final-cta p { color: rgba(255,255,255,0.84); }
.final-cta .btn-primary {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 14px 30px rgba(0,0,0,0.25);
}
.final-cta .btn-primary:hover { background: #fff; color: var(--purple); }

/* ═════════════════════════════════════════════════════════════
   FINAL CTA v3: soft light gradient (lavender → cream), dark text,
   purple button. Replaces the dotted purple panel.
   ═════════════════════════════════════════════════════════════ */
.final-cta {
  background-color: #F3EDFF;
  background-image: linear-gradient(135deg, #EDE3FF 0%, #F7F2FF 45%, #FBFBF1 100%);
  background-size: auto;
  border: 1px solid rgba(106,11,255,0.12);
  color: var(--ink);
}
.final-cta h2,
.final-cta h2 em,
.final-cta h2 .accent,
.final-cta h2 .accent-light { color: var(--ink); -webkit-text-fill-color: currentColor; }
.final-cta p { color: var(--muted); }
.final-cta .btn-primary {
  background: var(--purple);
  color: #fff;
  box-shadow: 0 14px 30px rgba(106,11,255,0.25);
}
.final-cta .btn-primary:hover { background: var(--ink); color: #fff; }

/* ═════════════════════════════════════════════════════════════
   FINAL CTA v4: deep purple gradient + animated "scaling" chart.
   Bars grow left→right and a growth line draws over them, looping.
   ═════════════════════════════════════════════════════════════ */
.final-cta {
  background-color: #4A0FB0;
  background-image: linear-gradient(135deg, #2A0770 0%, #5208D6 50%, #7A2BFF 100%);
  border: 0;
  color: #fff;
}
.final-cta h2,
.final-cta h2 em,
.final-cta h2 .accent,
.final-cta h2 .accent-light { color: #fff; -webkit-text-fill-color: currentColor; }
.final-cta p { color: rgba(255,255,255,0.82); }
.final-cta .btn-primary { background: var(--ink); color: #fff; box-shadow: 0 14px 30px rgba(0,0,0,0.3); }
.final-cta .btn-primary:hover { background: #fff; color: var(--purple); }
.final-cta > *:not(.cta-scale) { position: relative; z-index: 1; }

.cta-scale {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%; height: 48%;
  pointer-events: none;
  z-index: 0;
}
.cta-scale rect {
  fill: rgba(255,255,255,0.10);
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: cta-grow 7s cubic-bezier(.22,.61,.36,1) infinite;
}
.cta-scale rect:nth-child(2) { animation-delay: .12s; }
.cta-scale rect:nth-child(3) { animation-delay: .24s; }
.cta-scale rect:nth-child(4) { animation-delay: .36s; }
.cta-scale rect:nth-child(5) { animation-delay: .48s; }
.cta-scale rect:nth-child(6) { animation-delay: .60s; }
.cta-scale rect:nth-child(7) { animation-delay: .72s; }
.cta-scale rect:nth-child(8) { animation-delay: .84s; }
.cta-scale .cta-line {
  fill: none;
  stroke: rgba(255,255,255,0.45);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: cta-line 7s cubic-bezier(.22,.61,.36,1) infinite;
}
.cta-scale .cta-tip { fill: rgba(255,255,255,0.8); opacity: 0; animation: cta-tip 7s ease infinite; }
@keyframes cta-grow { 0% { transform: scaleY(.12); } 40%, 82% { transform: scaleY(1); } 100% { transform: scaleY(.12); } }
@keyframes cta-line { 0%, 12% { stroke-dashoffset: 1400; } 50%, 82% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1400; } }
@keyframes cta-tip  { 0%, 45% { opacity: 0; } 52%, 82% { opacity: 1; } 95%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .cta-scale rect, .cta-scale .cta-line, .cta-scale .cta-tip { animation: none; }
  .cta-scale .cta-line { stroke-dashoffset: 0; }
  .cta-scale .cta-tip { opacity: 1; }
}
@media (max-width: 640px) { .cta-scale { height: 32%; } }

/* ═════════════════════════════════════════════════════════════
   FINAL CTA v5: black panel, soft purple light flare in the corner
   (slow pulse), white text, brand-purple button.
   ═════════════════════════════════════════════════════════════ */
.final-cta {
  background: #000;
  background-image: none;
  border: 1px solid rgba(255,255,255,0.06);
  color: #fff;
}
.cta-scale { display: none; }
.final-cta::before {
  display: block;
  content: '';
  position: absolute;
  top: -260px; right: -220px; left: auto;
  width: 720px; height: 720px;
  transform: none;
  background: radial-gradient(circle, rgba(170,110,255,0.55) 0%, rgba(106,11,255,0.32) 22%, rgba(106,11,255,0.10) 45%, transparent 68%);
  filter: blur(8px);
  pointer-events: none;
  z-index: 0;
  animation: cta-flare 9s ease-in-out infinite;
}
.final-cta::after {
  content: '';
  position: absolute;
  bottom: -320px; left: -260px;
  width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(106,11,255,0.22) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
@keyframes cta-flare {
  0%, 100% { opacity: .85; transform: translate(0, 0) scale(1); }
  50%      { opacity: 1;   transform: translate(-30px, 20px) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) { .final-cta::before { animation: none; } }
@media (max-width: 640px) {
  .final-cta::before { width: 460px; height: 460px; top: -200px; right: -200px; }
  .final-cta::after { display: none; }
}
.final-cta h2,
.final-cta h2 em,
.final-cta h2 .accent,
.final-cta h2 .accent-light { color: #fff; -webkit-text-fill-color: currentColor; }
.final-cta p { color: rgba(255,255,255,0.72); }
.final-cta .btn-primary {
  background: var(--purple);
  color: #fff;
  box-shadow: 0 14px 36px rgba(106,11,255,0.45);
}
.final-cta .btn-primary:hover { background: #8A3AFF; color: #fff; }

/* CTA flare: top-right now mirrors the softer bottom-left glow, tucked into the corner. */
.final-cta::before {
  top: -320px; right: -260px;
  width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(106,11,255,0.30) 0%, rgba(106,11,255,0.10) 40%, transparent 65%);
  filter: none;
}
@media (max-width: 640px) {
  .final-cta::before { width: 420px; height: 420px; top: -230px; right: -210px; }
}

/* ═════════════════════════════════════════════════════════════
   SHOPIFY PAGE — "Common mistake → How we fix it" cards
   ═════════════════════════════════════════════════════════════ */
.fix-section { padding: 100px 0; background: var(--paper); }
.fix-grid { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 1100px; margin: 48px auto 0; }
@media (min-width: 760px) { .fix-grid { grid-template-columns: repeat(2, 1fr); } }
.fix-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 24px 26px;
  transition: transform 240ms cubic-bezier(.22,.61,.36,1), border-color 240ms, box-shadow 240ms;
}
.fix-card:hover { transform: translateY(-3px); border-color: rgba(106,11,255,0.28); box-shadow: 0 16px 36px rgba(0,0,0,0.05); }
.fix-tag { display: block; font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2, #9A9A94); margin-bottom: 8px; }
.fix-row { display: flex; gap: 12px; align-items: flex-start; }
.fix-row p { margin: 0; line-height: 1.5; }
.fix-wrong p { font-size: 15px; color: var(--muted); }
.fix-right { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line); }
.fix-right .fix-tag { color: var(--purple); }
.fix-right p { font-size: 15.5px; color: var(--ink); font-weight: 500; }
.fix-mark { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; margin-top: 1px; }
.fix-mark svg { width: 13px; height: 13px; }
.fix-wrong .fix-mark { background: rgba(0,0,0,0.06); color: var(--muted); }
.fix-right .fix-mark { background: var(--purple); color: #fff; }
.fix-stat { text-align: center; font-size: 14px; color: var(--muted); margin: 28px auto 0; max-width: 640px; }
.fix-stat strong { color: var(--ink); font-weight: 500; }

/* Phone size for problem icons — overrides an older 52px rule that made them tiny. */
@media (max-width: 640px) {
  .problem-icon { width: 96px; height: 96px; }
}

/* Drawn (SVG) problem icons: match the visual size of the PNG icons on the
   Performance Marketing page, which have built-in padding (~89% fill). */
.problem-icon svg { width: 88%; height: 88%; }

/* Problem icons: match the size currently live on mscaler.com
   (drawing ≈ 70px inside the 120px box on desktop). */
.problem-icon img { width: 66%; height: 66%; }
.problem-icon svg { width: 62%; height: 62%; }

/* ═════════════════════════════════════════════════════════════
   "WHAT'S INCLUDED" CHECKLIST (Shopify page)
   ═════════════════════════════════════════════════════════════ */
.included-section { padding: 100px 0; background: var(--paper); }
.included-grid { display: grid; grid-template-columns: 1fr; gap: 12px; max-width: 1100px; margin: 44px auto 0; }
@media (min-width: 640px)  { .included-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .included-grid { grid-template-columns: repeat(4, 1fr); } }
.included-item {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  font-size: 15px; font-weight: 500; color: var(--ink); line-height: 1.35;
  transition: border-color 220ms, transform 220ms cubic-bezier(.22,.61,.36,1);
}
.included-item:hover { border-color: rgba(106,11,255,0.3); transform: translateY(-2px); }
.included-check { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--purple); color: #fff; display: grid; place-items: center; }
.included-check svg { width: 14px; height: 14px; }
@media (max-width: 640px) { .included-section { padding: 64px 0; } }

/* ═════════════════════════════════════════════════════════════
   SHOPIFY SHOWCASE — purple panel, real store in a browser frame,
   phone view overlapping, 4 floating feature chips.
   Images scale with width (aspect ratio kept) from phone to desktop.
   ═════════════════════════════════════════════════════════════ */
.showcase-section { padding: 100px 0; }
.showcase-panel {
  position: relative;
  overflow: hidden;
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 48px 0;
  border-radius: 32px;
  background: linear-gradient(135deg, #5B12E0 0%, #4A0FB0 45%, #2B0A6B 100%);
  color: #fff;
}
.showcase-panel::before {
  content: '';
  position: absolute;
  top: -200px; left: 50%;
  width: 700px; height: 500px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255,255,255,0.14) 0%, transparent 65%);
  pointer-events: none;
}
.showcase-head { position: relative; text-align: center; max-width: 760px; margin: 0 auto 48px; }
.showcase-head h2 {
  font-family: 'Inter Tight', sans-serif;
  font-size: clamp(28px, 3.8vw, 46px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.12;
  color: #fff;
  margin: 0 0 16px;
}
.showcase-head p { font-size: 17px; line-height: 1.55; color: rgba(255,255,255,0.8); margin: 0; }

.showcase-stage { position: relative; max-width: 900px; margin: 0 auto; }
.sc-browser {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
  box-shadow: 0 -10px 60px rgba(0,0,0,0.35);
}
.sc-bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; background: #F1F1F4; border-bottom: 1px solid #E3E3E8; }
.sc-bar i { width: 10px; height: 10px; border-radius: 50%; background: #D6D6DC; }
.sc-bar em { flex: 1; margin: 0 40px 0 16px; padding: 4px 12px; border-radius: 6px; background: #fff; font-style: normal; font-size: 12px; color: #6B6B72; text-align: center; }
.sc-browser img { display: block; width: 100%; height: auto; }

.sc-phone {
  position: absolute;
  z-index: 2;
  right: -40px; bottom: 0;
  width: 22%;
  max-width: 200px;
  padding: 7px;
  border-radius: 30px 30px 0 0;
  background: #111;
  box-shadow: -20px 0 50px rgba(0,0,0,0.4);
}
.sc-phone img { display: block; width: 100%; height: auto; border-radius: 24px 24px 0 0; }

.sc-chip {
  position: absolute;
  z-index: 3;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px 12px 12px;
  background: rgba(255,255,255,0.96);
  color: var(--ink);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(20,0,60,0.35);
  max-width: 240px;
  animation: sc-float 6s ease-in-out infinite;
}
.sc-chip:nth-of-type(2) { animation-delay: -1.5s; }
.sc-chip:nth-of-type(3) { animation-delay: -3s; }
.sc-chip:nth-of-type(4) { animation-delay: -4.5s; }
@keyframes sc-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .sc-chip { animation: none; } }
.sc-chip-ico { flex-shrink: 0; width: 38px; height: 38px; border-radius: 11px; background: rgba(106,11,255,0.1); color: var(--purple); display: grid; place-items: center; }
.sc-chip-ico svg { width: 20px; height: 20px; }
.sc-chip strong { display: block; font-family: 'Inter Tight', sans-serif; font-size: 14.5px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.2; }
.sc-chip span { display: block; font-size: 12px; color: var(--muted); line-height: 1.35; margin-top: 2px; }
.sc-chip--1 { left: -90px; top: 8%; }
.sc-chip--2 { left: -110px; top: 52%; }
.sc-chip--3 { right: -100px; top: 4%; }
.sc-chip--4 { right: 90px; top: 40%; }

/* Tablet & phone: chips move into a tidy grid under the screenshot */
@media (max-width: 1100px) {
  .sc-chip--1 { left: -30px; }
  .sc-chip--2 { left: -40px; }
  .sc-chip--3 { right: -30px; }
}
@media (max-width: 860px) {
  .showcase-section { padding: 64px 0; }
  .showcase-panel { padding: 44px 20px 24px; border-radius: 24px; }
  .showcase-head { margin-bottom: 28px; }
  .showcase-head p { font-size: 15.5px; }
  .sc-browser { border-radius: 12px; }
  .sc-phone { right: -6px; width: 28%; padding: 5px; border-radius: 22px 22px 0 0; }
  .sc-phone img { border-radius: 18px 18px 0 0; }
  .sc-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
  .sc-chip { position: static; max-width: none; animation: none; padding: 12px; }
  .sc-chip-ico { width: 32px; height: 32px; }
}
@media (max-width: 480px) {
  .sc-chips { grid-template-columns: 1fr; }
  .sc-bar em { margin-right: 8px; }
}

/* ═════════════════════════════════════════════════════════════
   WHATSAPP PAGE — animated chat demo beside the copy
   ═════════════════════════════════════════════════════════════ */
.wa-section { padding: 100px 0; background: var(--paper); }
.wa-grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; max-width: 1080px; margin: 0 auto; }
@media (min-width: 900px) { .wa-grid { grid-template-columns: 1.1fr 0.9fr; gap: 72px; } }
.wa-copy h2 { font-family: 'Inter Tight', sans-serif; font-size: clamp(28px, 3.6vw, 44px); font-weight: 500; letter-spacing: -0.035em; line-height: 1.15; margin: 0 0 16px; }
.wa-copy > p { font-size: 17px; color: var(--muted); line-height: 1.6; margin: 0 0 24px; }
.wa-points { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.wa-points li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.5; color: var(--muted); }
.wa-points li strong { color: var(--ink); font-weight: 500; }
.wa-points .included-check { margin-top: 1px; }

.wa-phone {
  width: 100%; max-width: 330px; margin: 0 auto;
  border: 9px solid #111; border-radius: 40px;
  background: #ECE5DD; overflow: hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,0.18);
}
.wa-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: #075E54; color: #fff; }
.wa-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--purple); display: grid; place-items: center; font-weight: 600; font-size: 15px; }
.wa-head strong { display: block; font-size: 15px; font-weight: 500; }
.wa-head span { display: block; font-size: 12px; opacity: 0.8; }
.wa-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 12px 22px; min-height: 380px; }
.wa-msg {
  max-width: 82%; padding: 8px 11px 6px; border-radius: 10px;
  font-size: 13.5px; line-height: 1.4; color: #111; box-shadow: 0 1px 1px rgba(0,0,0,0.08);
  opacity: 0; transform: translateY(8px);
}
.wa-msg small { display: block; text-align: right; font-size: 10.5px; color: #8a8a8a; margin-top: 2px; }
.wa-in  { align-self: flex-start; background: #fff; border-top-left-radius: 2px; }
.wa-out { align-self: flex-end; background: #DCF8C6; border-top-right-radius: 2px; }
.wa-auto { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #075E54; margin-bottom: 2px; }
.wa-btn { display: block; margin-top: 6px; padding: 7px; border-radius: 7px; background: #fff; text-align: center; color: #128C7E; font-weight: 500; font-size: 13px; }
.wa-phone.is-visible .wa-msg { animation: wa-pop 420ms cubic-bezier(.22,.61,.36,1) forwards; }
.wa-phone.is-visible .wa-msg:nth-child(2) { animation-delay: .9s; }
.wa-phone.is-visible .wa-msg:nth-child(3) { animation-delay: 1.9s; }
.wa-phone.is-visible .wa-msg:nth-child(4) { animation-delay: 2.9s; }
.wa-phone.is-visible .wa-msg:nth-child(5) { animation-delay: 3.9s; }
@keyframes wa-pop { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .wa-msg { opacity: 1; transform: none; animation: none !important; } }
@media (max-width: 640px) { .wa-section { padding: 64px 0; } .wa-body { min-height: 340px; } }
.wa-head .wa-avatar { display: grid; place-items: center; flex-shrink: 0; }
.wa-msg .wa-auto { display: block; }

/* Steps section: restore side padding (an older rule zeroed it, so text touched the screen edge on phones). */
.steps-section { padding-left: 20px; padding-right: 20px; }
@media (min-width: 720px) { .steps-section { padding-left: 32px; padding-right: 32px; } }

/* Final CTA: headline + button only. The page above already explains everything. */
.final-cta > p { display: none; }
.final-cta h2 { font-weight: 600; letter-spacing: -0.035em; margin-bottom: 32px; }

/* Service-page hero on phones: fill the full width instead of short "balanced" lines. */
@media (max-width: 719px) {
  body.perf-page .hero h1 {
    text-wrap: wrap;
    max-width: none;
    width: 100%;
    font-size: 34px !important;
    line-height: 1.08;
  }
}

/* Section headings below the hero: title only, no subtitle line under it. */
.section-head > p,
.compare-head > p,
.mirror-head > p,
.showcase-head > p { display: none; }
.section-head h2,
.compare-head h2,
.mirror-head h2 { margin-bottom: 0; }

/* Drawn problem icons a touch smaller, matching the Performance Marketing PNG icons. */
.problem-icon svg { width: 56%; height: 56%; overflow: visible; }

/* ═════════════════════════════════════════════════════════════
   "WHAT'S INCLUDED" ZIG-ZAG ROWS with before / with-Mscaler mockups
   (visual language from the Mscaler carousel)
   ═════════════════════════════════════════════════════════════ */
.inc-rows { display: flex; flex-direction: column; gap: 72px; max-width: 1100px; margin: 56px auto 0; }
.inc-row { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
@media (min-width: 900px) {
  .inc-row { grid-template-columns: 0.85fr 1.15fr; gap: 64px; }
  .inc-row:nth-child(even) { grid-template-columns: 1.15fr 0.85fr; }
  .inc-row:nth-child(even) .inc-text { order: 2; }
}
.inc-tag { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--purple); margin-bottom: 14px; }
.inc-tag b { width: 28px; height: 28px; border-radius: 50%; background: var(--purple); color: #fff; display: grid; place-items: center; font-size: 13px; letter-spacing: 0; }
.inc-text h3 { font-family: 'Inter Tight', sans-serif; font-size: clamp(24px, 2.6vw, 32px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.15; margin: 0 0 12px; color: var(--ink); }
.inc-text p { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0 0 18px; }
.inc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.inc-list li { display: flex; gap: 10px; align-items: center; font-size: 15px; font-weight: 500; color: var(--ink); }
.inc-list li::before { content: ''; flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--purple) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center / 12px no-repeat; }

.inc-mock { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 26px; box-shadow: 0 24px 60px rgba(0,0,0,0.05); }
.mock-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mock-label { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.mock-label.is-good { color: var(--purple); }
.mock-card { border-radius: 14px; padding: 14px; min-height: 196px; display: flex; flex-direction: column; gap: 9px; font-size: 12.5px; color: var(--ink); }
.mock-card.is-bad { background: #F6F2E9; border: 1px solid #ECE5D6; color: #6F6A5E; }
.mock-card.is-good { background: #fff; border: 1.5px solid var(--purple); box-shadow: 0 10px 26px rgba(106,11,255,0.10); }
.mock-cap { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.mock-cap.is-good { color: var(--ink); font-weight: 500; }
.mock-cap svg { width: 13px; height: 13px; flex-shrink: 0; }
.mock-cap.is-good svg { color: var(--purple); }

/* mockup building blocks */
.m-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.m-k { font-size: 11px; color: inherit; opacity: 0.75; }
.m-big { font-family: 'Inter Tight', sans-serif; font-size: 24px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.is-good .m-big { color: var(--purple); }
.m-track { height: 7px; border-radius: 99px; background: rgba(0,0,0,0.07); overflow: hidden; }
.m-fill { display: block; height: 100%; border-radius: 99px; background: #C9C1AE; }
.is-good .m-fill { background: var(--purple); }
.m-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 99px; font-size: 10.5px; font-weight: 600; background: rgba(0,0,0,0.06); }
.is-good .m-pill { background: rgba(106,11,255,0.10); color: var(--purple); }
.m-item { display: flex; align-items: center; gap: 7px; padding: 6px 0; border-bottom: 1px solid rgba(0,0,0,0.06); }
.m-item:last-child { border-bottom: 0; }
.m-item s { opacity: 0.6; }
.m-item svg { width: 12px; height: 12px; flex-shrink: 0; }
.is-good .m-item svg { color: var(--purple); }
.m-img { border-radius: 9px; background: #E9E2D3; height: 62px; display: grid; place-items: center; }
.is-good .m-img { background: linear-gradient(135deg, #EDE3FF, #F7F2FF); height: 74px; }
.m-img svg { width: 22px; height: 22px; opacity: 0.45; }
.m-line { height: 6px; border-radius: 4px; background: rgba(0,0,0,0.09); }
.m-line.w60 { width: 60%; } .m-line.w80 { width: 80%; } .m-line.w40 { width: 40%; }
.m-btn { display: block; text-align: center; padding: 8px; border-radius: 8px; font-size: 12px; font-weight: 600; background: #E7E0D0; color: #8B8577; }
.m-btn.small { padding: 4px; font-size: 9.5px; width: 55%; }
.is-good .m-btn { background: var(--purple); color: #fff; }
.m-btn.dark { background: #111; color: #fff; }
.m-stars { color: #F5A524; letter-spacing: 1px; font-size: 12px; }
.m-field { height: 20px; border-radius: 6px; border: 1px solid #E2DACA; background: #fff; }
.m-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.m-chips span { padding: 3px 7px; border-radius: 6px; background: rgba(106,11,255,0.08); color: var(--purple); font-size: 10.5px; font-weight: 600; }
.m-title { font-weight: 600; font-size: 13px; color: inherit; }

@media (max-width: 640px) {
  .inc-rows { gap: 56px; margin-top: 40px; }
  .inc-mock { padding: 16px; border-radius: 18px; }
  .mock-pair { gap: 10px; }
  .mock-card { padding: 10px; min-height: 180px; font-size: 11.5px; }
  .m-big { font-size: 20px; }
}

/* ═════════════════════════════════════════════════════════════
   ABOUT PAGE — founder story with photo
   ═════════════════════════════════════════════════════════════ */
.about-founder { padding: 40px 0 100px; }
.about-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; max-width: 1080px; margin: 0 auto; }
@media (min-width: 900px) { .about-grid { grid-template-columns: 0.8fr 1.2fr; gap: 72px; } }
.about-photo { position: relative; max-width: 420px; margin: 0 auto; width: 100%; }
.about-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 28px; box-shadow: 0 30px 70px rgba(106,11,255,0.22); }
.about-badge { position: absolute; left: 18px; bottom: 18px; padding: 10px 14px; border-radius: 14px; background: rgba(255,255,255,0.95); box-shadow: 0 12px 30px rgba(0,0,0,0.15); }
.about-badge strong { display: block; font-family: 'Inter Tight', sans-serif; font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: -0.015em; }
.about-badge span { display: block; font-size: 12px; color: var(--muted); }
.about-story h2 { font-family: 'Inter Tight', sans-serif; font-size: clamp(28px, 3.4vw, 42px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.15; margin: 0 0 20px; }
.about-story p { font-size: 17px; line-height: 1.7; color: var(--muted); margin: 0 0 16px; }
.about-story p strong { color: var(--ink); font-weight: 500; }
.about-sign { display: flex; align-items: center; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
.about-sign b { font-family: 'Inter Tight', sans-serif; font-size: 17px; font-weight: 600; color: var(--ink); }
.about-sign span { font-size: 14px; color: var(--muted); }
.about-linkedin { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); font-size: 14px; font-weight: 500; text-decoration: none; transition: border-color 200ms, color 200ms; }
.about-linkedin:hover { border-color: var(--purple); color: var(--purple); }
.about-linkedin svg { width: 16px; height: 16px; }
@media (max-width: 640px) { .about-founder { padding: 16px 0 64px; } .about-story p { font-size: 16px; } }

/* ═══ Elementor ═══
   Designed sections sit inside Elementor's section → column → widget
   wrappers (class ms-sec). Keep those wrappers invisible so every section
   renders exactly as it does on the theme templates. */
.elementor-section.ms-sec > .elementor-container { max-width: none; }
.elementor-section.ms-sec .elementor-column { width: 100%; }
.elementor-section.ms-sec .elementor-widget-wrap { padding: 0; }
.elementor-section.ms-sec .elementor-widget-container { margin: 0; padding: 0; }
/* Elementor resets every image (.elementor img), so restore the designed ones. */
.elementor .problem-icon img { width: 66%; height: 66%; max-width: none; }
.elementor .about-photo img { height: auto; border-radius: 28px; box-shadow: 0 30px 70px rgba(106,11,255,0.22); }
/* In the Elementor editor, show every section straight away (no scroll fade). */
.elementor-editor-active .reveal { opacity: 1 !important; transform: none !important; }

/* Contact form: required-field star + on-brand error messages (replace the browser popup) */
.ct-field label .req { color: var(--purple); font-weight: 600; margin-left: 2px; }
.ct-field.is-invalid input,
.ct-field.is-invalid textarea { border-bottom: 2px solid var(--purple); }
.ct-field.is-invalid label { color: var(--purple); }
.ct-error { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; font-weight: 500; color: var(--purple); animation: ctErrIn 220ms ease; }
.ct-error::before { content: "!"; flex: none; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--purple); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; }
@keyframes ctErrIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Contact form: country code + phone on one line */
.ct-phone { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 12px; }
.ct-phone input { flex: 1; min-width: 0; width: auto; }
.ct-phone input::placeholder { color: var(--muted-2, #9A9A94); opacity: 1; }
.ct-phone label { top: 4px; font-size: 12px; color: var(--purple); font-weight: 500; }
.ct-phone .ct-error { flex-basis: 100%; }
.ct-cc { position: relative; flex: none; padding: 26px 22px 10px 0; border-bottom: 1.5px solid var(--line); font-size: 16px; color: var(--ink); white-space: nowrap; transition: border-color 200ms ease; }
.ct-cc::after { content: ""; position: absolute; right: 4px; top: 50%; margin-top: 6px; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-50%) rotate(45deg); opacity: 0.55; }
.ct-cc select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; border: 0; }
.ct-cc:focus-within { border-bottom-color: var(--purple); }

/* Contact form: privacy reassurance under Send brief */
.ct-privacy { display: flex; align-items: flex-start; justify-content: center; gap: 8px; margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.ct-privacy svg { flex: none; width: 14px; height: 14px; margin-top: 2px; color: var(--purple); }
.ct-privacy a { color: var(--purple); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }

/* Footer: Privacy Policy link (shows once the WordPress privacy page is published) */
.foot-bottom .privacy-policy-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Text pages (page.php, e.g. Privacy Policy): text starts right under the title */
.page-hero + section { padding-top: 0; }

/* Cookie banner (Europe only) */
.cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1000; max-width: 560px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; padding: 18px 20px; background: #0A0A0A; color: #FBFBF1; border-radius: 20px; box-shadow: 0 20px 50px rgba(0,0,0,0.25), 0 0 0 1px rgba(106,11,255,0.35); }
.cookie-banner[hidden] { display: none; }
.cookie-banner p { flex: 1 1 260px; margin: 0; font-size: 14px; line-height: 1.5; color: rgba(251,251,241,0.85); }
.cookie-banner a { color: #B98CFF; text-decoration: underline; text-underline-offset: 2px; }
.cookie-actions { display: flex; gap: 10px; }
.cookie-btn { font: inherit; font-size: 14px; font-weight: 600; padding: 10px 18px; border-radius: 999px; cursor: pointer; border: 1px solid rgba(251,251,241,0.3); background: transparent; color: #FBFBF1; }
.cookie-accept { background: var(--purple); border-color: var(--purple); color: #fff; }
.cookie-btn:focus-visible { outline: 2px solid #B98CFF; outline-offset: 2px; }
body.has-action-bar .cookie-banner { bottom: 92px; }