/* ==========================================================================
   GEARBOOK — Waitlist Landing Page
   Built on the Dooken design system (monochrome + Inter) and matched to the
   Gearbook CRM look: white surfaces, hairline borders, status dots,
   license-plate chips. Single accent = the CRM's emerald "Clock In" green.
   ========================================================================== */

:root {
  /* Monochrome base (Dooken tokens) */
  --background: #ffffff;
  --foreground: #1f1f1f;          /* near-black body */
  --ink: #131313;                 /* headline black */
  --muted: #5c5c5c;               /* secondary copy */
  --faint: #8a8a8a;               /* tertiary */
  --border: #e6e6e6;              /* hairline */
  --border-strong: #d4d4d4;
  --surface: #f6f6f5;             /* subtle fill */
  --surface-2: #f0f0ef;
  --bg-ink: #111110;              /* dark band */

  /* Single accent — CRM emerald */
  --accent: #16a34a;              /* green-600 */
  --accent-strong: #15803d;       /* green-700 hover */
  --accent-soft: #ecfdf3;         /* green tint bg */
  --accent-border: #c5ecd2;
  --accent-bright: #34d77a;     /* vivid accent for the dark section */

  /* status dots (from CRM) */
  --dot-amber: #f59e0b;
  --dot-red: #ef4444;
  --dot-blue: #60a5fa;

  --radius-btn: 10px;
  --radius-card: 14px;
  --radius-lg: 18px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 4px 14px -4px rgba(0,0,0,.10);
  --shadow-lg: 0 18px 50px -12px rgba(0,0,0,.18);
  --shadow-screen: 0 30px 70px -24px rgba(0,0,0,.28);

  --container: 1320px;
  --container-narrow: 760px;
  --pad: 24px;

  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', 'Roboto Mono', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 70px; }
[hidden] { display: none !important; }

body {
  font-family: var(--font);
  color: var(--foreground);
  background: var(--background);
  font-size: 19px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";
}
/* guard against incidental horizontal scroll on mobile — on main (not body) so the sticky nav is unaffected */
main { overflow-x: clip; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.container-narrow { max-width: var(--container-narrow); }

/* faint grid backdrop (very restrained, Dooken-style) */
.grid-bg {
  background-image:
    linear-gradient(to right, rgba(0,0,0,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,.035) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: center top;
}
.grid-bg.grid-bg-off { background-image: none; }

/* emerald aurora — drifting, streaky curtains of light behind the hero */
.aurora { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; filter: blur(34px);
  -webkit-mask-image: linear-gradient(to bottom, #000 22%, transparent 60%);
          mask-image: linear-gradient(to bottom, #000 22%, transparent 60%); }
.aurora span {
  position: absolute; top: -28%; bottom: -28%; width: 34%;
  border-radius: 46% / 50%;
  opacity: .08; will-change: transform, opacity;
}
.aurora span:nth-child(1) { left: -7%; background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(22,163,74,.55), transparent 70%);  animation: aur1 6.5s ease-in-out infinite; }
.aurora span:nth-child(2) { left: 21%; background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(52,215,122,.50), transparent 70%); animation: aur2 8.5s ease-in-out infinite -3s; }
.aurora span:nth-child(3) { left: 47%; background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(16,185,129,.50), transparent 70%); animation: aur3 5.5s ease-in-out infinite -5s; }
.aurora span:nth-child(4) { left: 72%; background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(52,215,122,.45), transparent 70%); animation: aur4 7.5s ease-in-out infinite -1.5s; }
@keyframes aur1 { 0%, 100% { transform: translateX(-7%) rotate(-9deg)  scaleY(1);    opacity: .45; } 50% { transform: translateX(11%) rotate(7deg)  scaleY(1.22); opacity: .75; } }
@keyframes aur2 { 0%, 100% { transform: translateX(7%)  rotate(9deg)   scaleY(1.12); opacity: .62; } 50% { transform: translateX(-9%) rotate(-7deg) scaleY(.90);  opacity: .40; } }
@keyframes aur3 { 0%, 100% { transform: translateX(-5%) rotate(5deg)   scaleY(1);    opacity: .50; } 50% { transform: translateX(9%)  rotate(-9deg) scaleY(1.28); opacity: .78; } }
@keyframes aur4 { 0%, 100% { transform: translateX(6%)  rotate(-11deg) scaleY(1.15); opacity: .55; } 50% { transform: translateX(-8%) rotate(7deg)  scaleY(.95);  opacity: .38; } }
@media (max-width: 768px) { .aurora { filter: blur(24px); } .aurora span { opacity: .07; } }
@media (prefers-reduced-motion: reduce) { .aurora span { animation: none; } }

/* ---------- Type ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-strong);
}
.eyebrow.neutral { color: var(--muted); }
.eyebrow::before {
  content: "";
  width: 16px; height: 2px;
  border-radius: 0;
  background: var(--accent);
}
.eyebrow.neutral::before { background: var(--faint); }

/* small section icon above the heading */
.sec-ic {
  width: 40px; height: 40px; border-radius: 11px;
  border: 1px solid var(--border); background: var(--surface);
  display: grid; place-items: center; color: var(--ink);
  margin: 0 0 16px;
}
.sec-ic svg { width: 21px; height: 21px; stroke-width: 1.6; }
.sec-head.center .sec-ic, .final .sec-ic { margin-left: auto; margin-right: auto; }
.final .sec-ic { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: var(--accent-bright); }

h1, h2, h3 { color: var(--ink); letter-spacing: -.025em; font-weight: 700; text-wrap: balance; }

.display {
  font-size: clamp(2.5rem, 5vw + 1rem, 3.8rem);
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -.035em;
}
/* narrow screens: shrink so the no-wrap "automotive workshop" fits one line (no h-scroll) */
@media (max-width: 460px) {
  .display { font-size: clamp(1.8rem, 8.4vw, 2.45rem); line-height: 1.07; }
}

/* hand-drawn underline under "mechanic shop" */
.ud-wrap { position: relative; white-space: nowrap; }
.ud-line {
  position: absolute; left: -1%; bottom: -.18em;
  width: 102%; height: .42em; overflow: visible; pointer-events: none;
}
.ud-line path {
  fill: none; stroke: var(--accent); stroke-width: 5;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 640; stroke-dashoffset: 0;
  animation: udDraw 1.1s cubic-bezier(.6,.05,.2,1) forwards;
}
@keyframes udDraw { from { stroke-dashoffset: 640; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ud-line path { animation: none; stroke-dashoffset: 0; }
}
.h2 { font-size: clamp(2rem, 2.5vw + 1rem, 3rem); line-height: 1.08; }
.h3 { font-size: clamp(1.35rem, 1vw + 1rem, 1.6rem); line-height: 1.2; }
.lead {
  font-size: clamp(1.15rem, .6vw + 1rem, 1.4rem);
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}
.muted { color: var(--muted); }
.accent-text { color: var(--accent-strong); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 52px;
  padding: 0 26px;
  border-radius: var(--radius-btn);
  font-size: 16px;
  font-weight: 600;
  border: 1px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-strong); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #2a2a2a; }
.btn-outline { background: #fff; color: var(--ink); border-color: var(--border-strong); }
.btn-outline:hover { background: var(--surface); }
.btn-sm { height: 34px; padding: 0 14px; font-size: 13px; border-radius: var(--radius-btn); }
.btn-lg { height: 56px; padding: 0 30px; font-size: 17px; }
.btn-block { width: 100%; }

/* ---------- Nav ---------- */
.announce {
  background: var(--ink);
  color: #fff;
  text-align: center;
  font-size: 13.5px;
  padding: 9px 16px;
  letter-spacing: .005em;
}
.announce .dot { color: var(--accent); }
.announce strong { font-weight: 600; }

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.nav.scrolled { border-bottom-color: var(--border); }
.nav-inner {
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a {
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
  transition: color .15s ease;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--ink); }
.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-toggle { display: none; background: none; border: 0; padding: 6px; }

/* ---------- Logo ---------- *
   Matches src/components/shared/GearbookLogo.tsx (horizontal variant — sidebar).
   34px mark + Outfit wordmark, 24/17px letters, weight 200/300, #111 / #bbb. */
.logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.logo .mark { width: 34px; height: 34px; flex-shrink: 0; display: block; }
.logo .word {
  font-family: 'Outfit', 'Inter', sans-serif;
  letter-spacing: 5px;
  display: flex;
  align-items: baseline;
  line-height: 1;
  white-space: nowrap;
  transform: translate(-2px, 0);
}
.logo .word .gear { color: #111; }
.logo .word .book { color: #bbb; }
.logo .word .big { font-size: 24px; font-weight: 200; }
.logo .word .small { font-size: 17px; font-weight: 300; }

/* ---------- License plate chip ---------- */
.plate {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .12em;
  color: var(--ink);
  background: linear-gradient(#fff, #f3f3f1);
  border: 1.5px solid #1c1c1c;
  border-radius: 4px;
  padding: 3px 9px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 -2px 3px rgba(0,0,0,.07), 0 1px 0 rgba(0,0,0,.12);
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}

/* status dot */
.sdot { width: 8px; height: 8px; border-radius: var(--radius-full); flex-shrink: 0; display: inline-block; }
.sdot.green { background: var(--accent); }
.sdot.amber { background: var(--dot-amber); }
.sdot.red { background: var(--dot-red); }
.sdot.blue { background: var(--dot-blue); }
.sdot.grey { background: #c4c4c4; }

/* ---------- Sections ---------- */
section { position: relative; }
.section-pad { padding: 40px 0; }
.section-pad-sm { padding: 40px 0; }

/* ---------- Hero ---------- */
.hero { padding-top: clamp(28px, 5vw, 60px); padding-bottom: clamp(25px, 4vw, 57px); isolation: isolate; }

/* centered hero — viewport-height column with social-proof at top, scroll-cue at bottom */
.hero-center {
  text-align: center; max-width: 940px; margin: -30px auto 0;
  display: flex; flex-direction: column; align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 2.4vw, 30px);
  min-height: calc(100vh - 110px); /* viewport minus announce strip + nav */
}
.hero-center .eyebrow { justify-content: center; }
.hero-center h1 { margin: -38px 0 0; width: 100%; text-align: center; }
.hero-center .lead { margin: -9px 0 0; max-width: 46ch; }
.hero-body {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(20px, 2.4vw, 30px); width: 100%;
  margin-top: -60px;
}

/* hero social proof (above headline) */
.hero-social {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 16px 7px 7px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: var(--radius-full);
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -16px rgba(0,0,0,.18);
}
.hs-avatars { display: flex; }
.hs-av {
  width: 34px; height: 34px; border-radius: var(--radius-full);
  border: 2px solid #fff; box-sizing: border-box;
  object-fit: cover; flex-shrink: 0;
}
.hs-av:not(:first-child) { margin-left: -11px; }
.hs-avatars img.hs-av { filter: grayscale(1); transition: filter .25s ease; }
.hero-social:hover .hs-avatars img.hs-av { filter: grayscale(0); }
.hs-mono {
  display: grid; place-items: center;
  background: var(--m, #444); color: #fff;
  font-size: 12px; font-weight: 600; letter-spacing: .01em;
}
/* "+ more" — reads as "and more shops" rather than another avatar chip. */
.hs-more {
  align-self: center; margin-left: 2px;
  font-size: 17px; font-weight: 600; color: var(--muted); white-space: nowrap;
}
.hs-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1; }
.hs-stars { display: inline-flex; gap: 0; }
.hs-stars svg { width: 14px; height: 14px; fill: var(--accent); }
.hs-line { font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.hs-line strong { color: var(--ink); font-weight: 700; }
@media (max-width: 540px) {
  .hero-social { gap: 8px; padding-right: 14px; }
  .hs-line { font-size: 12.5px; }
  .nav-cta .btn { display: none; } /* drop redundant nav CTA on phones (hamburger holds it) — was overflowing */
}
.hero-center .waitlist { margin: 27px 0 0; max-width: 480px; }
.hero-center .reassure { justify-content: center; margin-top: 20px; }
.hero-body .waitlist .fields { margin-top: -20px; }
.hero-center .waitlist-done { max-width: 480px; margin: 0 auto; }
.hero-shot {
  max-width: 1040px; margin: clamp(-5px, 2.2vw, 3px) auto 0;
  max-height: 360px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 64%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 64%, transparent 100%);
}
.hero-shot .screen {
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -1px 0 var(--border), 0 40px 80px -30px rgba(0,0,0,.28);
}

/* video variant — show full, all corners rounded, no bottom fade */
.hero-shot-video {
  max-height: none;
  margin-bottom: 0;
  -webkit-mask-image: none;
          mask-image: none;
}
.hero-shot-video .screen { border-radius: 16px; }
.hero-vid { width: 100%; display: block; background: var(--ink); }

/* scroll cue — "see it in action" nudge toward the product preview */
.scroll-cue {
  margin-top: -53px;
  position: relative; bottom: 25px;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
  transition: color .2s ease;
}
.scroll-cue:hover { color: var(--ink); }
.scroll-cue .sc-chevron {
  width: 17px; height: 17px; color: var(--accent);
  animation: sc-bob 1.7s ease-in-out 2s infinite backwards;
}
@keyframes sc-bob { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .scroll-cue .sc-chevron { animation: none; } }

/* subtle staggered entrance on load — guides the eye down through the value prop */
@keyframes heroIn { from { opacity: 0; transform: translateY(13px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .hero-center > *            { animation: heroIn .5s cubic-bezier(.2,.7,.2,1) both; }
  .hero-center > .hero-social { animation-delay: .03s; }
  .hero-center > h1           { animation-delay: .10s; }
  .hero-center > .lead        { animation-delay: .18s; }
  .hero-center > .waitlist    { animation-delay: .26s; }
  .hero-center > .scroll-cue  { animation-delay: .34s; }
}

/* hero call demo (anchors the hero) */
.hero-demo { max-width: 500px; margin: 36px auto 0; }
.hero-demo .call-card { box-shadow: var(--shadow-lg); }

/* urgency badge */
.urgency {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--accent-strong);
  background: var(--accent-soft); border: 1px solid var(--accent-border);
  border-radius: 999px; padding: 6px 14px; margin: 0 auto 20px;
}
.urgency .ud { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }

/* hero 3-beat value strip */
.value-strip {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  margin: -8px auto 22px; max-width: 600px;
}
.value-strip span { font-size: 15px; font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; }
.value-strip span:not(:last-child)::after { content: "·"; margin: 0 12px; color: var(--accent-strong); font-weight: 700; }

/* fineprint reassurance under a form button */
.fineprint { font-size: 12.5px; color: var(--faint); margin-top: 12px; text-align: center; line-height: 1.45; }

/* mid-page CTA button row */
.mid-cta { display: flex; justify-content: center; margin-top: 42px; }

/* complete-system flagship product shot */
.system-shot { max-width: 1000px; margin: 46px auto 8px; }
.system-shot .screen { border-radius: 16px; box-shadow: 0 30px 70px -28px rgba(0,0,0,.3); overflow: hidden; }
.system-shot .screen img { width: 100%; display: block; }

/* ==========================================================================
   FEATURE MARQUEE — CRM "run it all in one" (endless slide)
   ========================================================================== */
.fmarquee {
  position: relative; margin-top: 50px; overflow: hidden; display: flex; flex-direction: column; gap: 16px; padding-top: 15px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.fmarquee-track { display: flex; gap: 14px; width: max-content; animation: fmarq 44s linear infinite; will-change: transform; }
.fmarquee-track--rev { animation: fmarq-rev 44s linear infinite; }
.fmarquee:hover .fmarquee-track { animation-play-state: paused; }
@keyframes fmarq     { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes fmarq-rev { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.fcard {
  flex: 0 0 380px; width: 380px; min-height: 232px; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: var(--radius-card); background: #fff;
  box-shadow: var(--shadow-sm); padding: 32px 30px;
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.fcard:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); transform: translateY(-3px); }
.fcard .ic { width: 48px; height: 48px; border-radius: 12px; background: var(--surface); display: grid; place-items: center; color: var(--ink); margin-bottom: 20px; }
.fcard .ic svg { width: 24px; height: 24px; stroke-width: 1.6; }
.fcard h3 { font-size: 19px; letter-spacing: -.02em; margin-bottom: 10px; color: var(--ink); }
.fcard p { font-size: 15px; color: var(--muted); line-height: 1.5; }
@media (prefers-reduced-motion: reduce) {
  .fmarquee { overflow-x: auto; }
  .fmarquee-track { animation: none; transform: none; }
}
@media (max-width: 600px) { .fcard { flex: 0 0 300px; width: 300px; } }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}

/* rotating word */
.rotor {
  display: inline-grid;
  overflow: hidden;
  vertical-align: baseline;
}
.rotor span {
  grid-area: 1 / 1;
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(70%);
  transition: opacity .4s ease, transform .4s cubic-bezier(.2,.7,.2,1);
}
.rotor span.active { opacity: 1; transform: translateY(0); }
.rotor span.out { opacity: 0; transform: translateY(-70%); }

/* waitlist form */
.waitlist {
  margin-top: 30px;
  max-width: 460px;
}
.waitlist .fields { display: flex; flex-direction: column; gap: 10px; }
.waitlist .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fstep-head { font-size: 14px; line-height: 1.45; color: var(--muted); text-align: center; margin: 0 2px 2px; }
.field {
  height: 52px;
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-btn);
  padding: 0 16px;
  font-size: 15.5px;
  font-family: inherit;
  color: var(--ink);
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field::placeholder { color: var(--faint); }
.field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.reassure {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 18px;
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--muted);
}
.reassure span { display: inline-flex; align-items: center; gap: 7px; }
.reassure svg { width: 15px; height: 15px; color: var(--accent); }
.reassure svg.flagnz { width: 19px; height: 13px; color: inherit; border-radius: 2px; }

.waitlist-done {
  display: none;
  align-items: flex-start;
  gap: 14px;
  padding: 22px;
  border: 1px solid var(--accent-border);
  background: var(--accent-soft);
  border-radius: var(--radius-card);
}
.waitlist-done.show { display: flex; }
.waitlist-done .check {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--accent);
  color: #fff;
  display: grid; place-items: center;
}
.waitlist-done .check svg { width: 20px; height: 20px; }

/* ---------- App screen frame ---------- */
.screen {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-screen);
  overflow: hidden;
}
.screen-bar {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.screen-bar .tl { width: 11px; height: 11px; border-radius: var(--radius-full); background: #d6d6d6; }
.screen-bar .addr {
  margin-left: 12px;
  font-size: 12px;
  color: var(--faint);
  font-family: var(--mono);
}
.screen img { width: 100%; display: block; }
.screen-slot {
  background: var(--surface);
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--faint);
  font-size: 14px;
  min-height: 320px;
  gap: 10px;
}
.screen-slot svg { width: 34px; height: 34px; opacity: .5; }

/* hero floating callout */
.hero-media { position: relative; }
.float-card {
  position: absolute;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 13.5px;
}
.float-card .ico {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--accent-soft); color: var(--accent-strong);
  display: grid; place-items: center; flex-shrink: 0;
}
.float-card .ico svg { width: 18px; height: 18px; }
.float-card b { color: var(--ink); font-weight: 600; }
.float-card .sub { color: var(--muted); font-size: 12px; }
.float-call { bottom: -22px; left: -26px; }
.float-due { top: -20px; right: -22px; }


/* ---------- trust strip ---------- */
.trust {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  padding: 7.5px 0;
}
.trust-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  padding: 10px 24px;
  white-space: nowrap;
}
.trust-item { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; color: var(--muted); font-weight: 500; white-space: nowrap; }
.trust-item svg { width: 18px; height: 18px; color: var(--ink); margin-right: 6px; }
.trust-item strong { color: var(--ink); font-weight: 600; }

/* Mobile: the 4-item trust row is far wider than a phone, so it overflowed
   horizontally (and pushed the whole page sideways). Stack the items vertically
   and let labels wrap. Desktop (>900px) is unchanged. [mobile fix 2026-06-18] */
@media (max-width: 900px) {
  .trust-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 18px;
    white-space: normal;
  }
  .trust-item {
    justify-content: flex-start;
    text-align: left;
    flex-wrap: wrap;
    white-space: normal;
    font-size: 13px;
    max-width: 100%;
  }
}

/* ---------- section header ---------- */
.sec-head { max-width: 680px; }
.sec-head.center { margin: 0 auto; text-align: center; }
.sec-head h2 { margin: 16px 0 18px; }

/* ---------- feature grid ---------- */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 54px;
}
.feat {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: #fff;
  padding: 26px 24px;
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.feat:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); transform: translateY(-2px); }
.feat .ico {
  width: 44px; height: 44px;
  border-radius: 11px;
  background: var(--surface);
  display: grid; place-items: center;
  color: var(--ink);
  margin-bottom: 18px;
}
.feat .ico svg { width: 22px; height: 22px; stroke-width: 1.6; }
.feat h3 { font-size: 18px; margin-bottom: 8px; letter-spacing: -.02em; }
.feat p { font-size: 15px; color: var(--muted); line-height: 1.5; }

/* ---------- split block ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}
.split.flip .split-media { order: -1; }
.benefit-list { list-style: none; margin: 26px 0 0; display: flex; flex-direction: column; gap: 16px; }
.benefit-list li { display: flex; gap: 13px; align-items: flex-start; }
.benefit-list .tick {
  width: 24px; height: 24px; flex-shrink: 0; margin-top: 1px;
  border-radius: var(--radius-full);
  background: var(--accent-soft); color: var(--accent-strong);
  display: grid; place-items: center;
}
.benefit-list .tick svg { width: 14px; height: 14px; stroke-width: 2.4; }
.benefit-list b { color: var(--ink); font-weight: 600; }
.benefit-list .bl-text { font-size: 16px; color: var(--muted); }
.benefit-list .bl-text b { display: block; font-size: 16.5px; margin-bottom: 1px; }

/* ---------- AI dark section ---------- */
.dark {
  background: var(--bg-ink);
  color: #fff;
}
.dark h2, .dark h3 { color: #fff; }
.dark .lead { color: rgba(255,255,255,.66); }
.dark .eyebrow { color: var(--accent-bright); }
.dark .eyebrow::before { background: var(--accent-bright); }
.dark .muted { color: rgba(255,255,255,.6); }

/* ---------- AI section ambient animation ---------- */
#ai, #tech { overflow: hidden; }
#ai { padding-bottom: 55px; }
.dark .container { position: relative; z-index: 1; }
.ai-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ai-glow {
  position: absolute; width: 820px; height: 820px; right: -220px; top: -280px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent-bright) 16%, transparent) 0%, transparent 64%);
  filter: blur(32px);
  animation: aiGlow 11s ease-in-out infinite;
}
@keyframes aiGlow { 0%, 100% { transform: scale(1); opacity: .35; } 50% { transform: scale(1.14); opacity: .6; } }
.ai-waves { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; }
.ai-waves path {
  fill: none; stroke: var(--accent-bright);
  vector-effect: non-scaling-stroke; will-change: transform;
  animation: aiShift var(--dur, 20s) linear infinite;
}
@keyframes aiShift { to { transform: translateX(calc(var(--shift, 300px) * -1)); } }
@media (prefers-reduced-motion: reduce) {
  .ai-glow, .ai-waves path { animation: none; }
}

.spanner-quote {
  font-size: clamp(1.7rem, 2.6vw + 1rem, 2.9rem);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -.03em;
  color: #fff;
  max-width: 16ch;
}
.spanner-quote .hl { color: var(--accent-bright); }

.ai-points { list-style: none; margin-top: 30px; display: flex; flex-direction: column; gap: 18px; }
.ai-points li { display: flex; gap: 14px; align-items: flex-start; }
.ai-points .tick {
  width: 26px; height: 26px; flex-shrink: 0; margin-top: 1px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--accent-bright) 15%, transparent); color: var(--accent-bright);
  display: grid; place-items: center;
}
.ai-points .tick svg { width: 15px; height: 15px; stroke-width: 2.2; }
.ai-points b { color: #fff; font-weight: 600; display: block; margin-bottom: 2px; }
.ai-points .sub { color: rgba(255,255,255,.6); font-size: 15.5px; }

/* phone / call mockup */
.call-card {
  background: #1c1c1b;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-lg);
}
.call-head { display: flex; align-items: center; gap: 13px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.08); }
.call-head .avatar {
  width: 44px; height: 44px; border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--accent-bright) 16%, transparent); color: var(--accent-bright);
  display: grid; place-items: center; flex-shrink: 0;
}
.call-head .avatar svg { width: 22px; height: 22px; }
.call-head .who { flex: 1 1 auto; min-width: 0; }
.call-head .who b { color: #fff; font-size: 15.5px; display: block; white-space: nowrap; }
.call-head .who .live { font-size: 12.5px; color: var(--accent-bright); display: inline-flex; align-items: center; gap: 6px; }
.call-head .who .live::before { content:""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-bright); display: inline-block; animation: pulse 1.6s ease-in-out infinite; }
.call-head .timer { margin-left: auto; font-family: var(--mono); font-size: 13px; color: rgba(255,255,255,.5); }

@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.3;} }

.bubbles { display: flex; flex-direction: column; gap: 12px; padding-top: 18px; }
.bubble { max-width: 80%; font-size: 14.5px; line-height: 1.45; padding: 11px 14px; border-radius: 14px; }
.bubble.them { align-self: flex-start; background: rgba(255,255,255,.08); color: rgba(255,255,255,.92); border-bottom-left-radius: 5px; }
.bubble.ai { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 5px; }
.bubble .tag { display: block; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; opacity: .6; margin-bottom: 3px; }

/* live-call layout: speaker icon beside each bubble + word-by-word subtitles */
.cmsg { display: flex; align-items: flex-end; gap: 8px; max-width: 100%; }
.cmsg.them { justify-content: flex-start; }
.cmsg.ai { justify-content: flex-end; }
.cmsg .bubble { align-self: flex-end; max-width: calc(100% - 40px); }
.spk {
  width: 28px; height: 28px; flex-shrink: 0; margin-bottom: 2px;
  border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.07); color: rgba(255,255,255,.4);
  opacity: 0; transition: opacity .3s ease, background .25s ease, color .25s ease;
}
/* only the current speaker shows a mic; the previous one fades out as the next starts */
.spk.active { opacity: 1; }
.spk svg { width: 15px; height: 15px; }
.spk svg .wave { opacity: .35; }
.spk.speaking { background: color-mix(in srgb, var(--accent-bright) 16%, transparent); color: var(--accent-bright); }
.spk.speaking svg .wave.w1 { animation: spkWave 1s ease-in-out infinite; }
.spk.speaking svg .wave.w2 { animation: spkWave 1s ease-in-out infinite .18s; }
@keyframes spkWave { 0%, 100% { opacity: .18; } 50% { opacity: 1; } }
/* words are all placed up-front (layout locked) and only their opacity fades in,
   so the subtitle reveal is perfectly smooth with no reflow/jumping */
.call-card.chat-anim .words .w { opacity: 0; transition: opacity .55s ease; }
.call-card.chat-anim .words .w.in { opacity: 1; }
.booked-row {
  margin-top: 16px;
  display: flex; align-items: center; gap: 11px;
  background: color-mix(in srgb, var(--accent-bright) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-bright) 25%, transparent);
  border-radius: 11px;
  padding: 12px 14px;
}
.booked-row svg { width: 18px; height: 18px; color: var(--accent-bright); flex-shrink: 0; }
.booked-row b { color: #fff; font-weight: 600; font-size: 14px; }
.booked-row .sub { color: rgba(255,255,255,.6); font-size: 12.5px; }

/* ---------- AI chat animation (JS-driven, looping) ---------- */
.call-card.chat-anim .cmsg { opacity: 0; transform: translateY(10px) scale(.98); transition: opacity .3s ease, transform .3s cubic-bezier(.2,.7,.2,1); }
.call-card.chat-anim .cmsg.in { opacity: 1; transform: none; }
.call-card.chat-anim .booked-row { transition: opacity .4s ease, transform .4s cubic-bezier(.2,.7,.2,1); }
.call-card.chat-anim .booked-row.chat-pending { opacity: 0; transform: translateY(10px); }
.bubble.typing { display: inline-flex; align-items: center; padding: 13px 16px; }
.bubble.typing .dots { display: inline-flex; gap: 5px; }
.bubble.typing .dots i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .5; animation: typedot 1.1s infinite ease-in-out; }
.bubble.typing.them { color: rgba(255,255,255,.7); }
.bubble.typing.ai { color: #fff; }
.bubble.typing .dots i:nth-child(2) { animation-delay: .15s; }
.bubble.typing .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes typedot { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: .95; transform: translateY(-3px); } }

/* ==========================================================================
   TECH DESK — verified specs + self-drawing cam-belt diagram (JS-driven loop)
   Mirrors .call-card; all classes prefixed .td- so they never collide with the
   singular .call-card / plural .ai-waves selectors in app.js.
   ========================================================================== */

/* Tech Desk flare: hairline seam + cooler glow + drifting blueprint grid */
#tech { border-top: 1px solid rgba(255,255,255,.07); padding-bottom: 50px !important; }
/* the compact chat card is shorter than the copy column — centre it so it sits balanced */
#tech .split { align-items: center; }
.td-glow { right: auto; left: -240px; top: -300px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent-bright) 14%, transparent) 0%, transparent 64%); }
.td-blueprint {
  position: absolute; inset: -2px;
  background-image:
    linear-gradient(to right, rgba(52,215,122,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(52,215,122,.06) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse 72% 60% at 28% 32%, #000, transparent 76%);
          mask-image: radial-gradient(ellipse 72% 60% at 28% 32%, #000, transparent 76%);
  animation: tdGrid 26s linear infinite;
}
@keyframes tdGrid { to { background-position: 40px 40px; } }

.td-trademark { margin-top: 24px; font-size: 12px; line-height: 1.5; color: rgba(255,255,255,.4); max-width: 46ch; }

/* card shell — mirrors .call-card */
.td-card {
  background: #1c1c1b;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-lg);
}

/* header — mirrors .call-head */
.td-head { display: flex; align-items: center; gap: 13px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.08); }
.td-avatar {
  width: 44px; height: 44px; border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--accent-bright) 16%, transparent); color: var(--accent-bright);
  display: grid; place-items: center; flex-shrink: 0;
}
.td-avatar svg { width: 22px; height: 22px; }
.td-who { flex: 1 1 auto; min-width: 0; }
.td-who b { color: #fff; font-size: 15.5px; display: block; white-space: nowrap; }
.td-live { font-size: 12.5px; color: var(--accent-bright); display: inline-flex; align-items: center; gap: 6px; }
.td-live::before { content:""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-bright); display: inline-block; animation: pulse 1.6s ease-in-out infinite; }
.td-ref { margin-left: auto; font-family: var(--mono); font-size: 12px; color: rgba(255,255,255,.5); letter-spacing: .04em; white-space: nowrap; }

/* thread — mirrors .bubbles */
.td-thread { display: flex; flex-direction: column; gap: 12px; padding-top: 18px; }
/* when animating, the thread is a fixed-height window the chat scrolls inside
   (older messages slide up off the top) so the card stays compact */
.td-card.td-anim .td-thread {
  height: 480px; overflow-y: auto; scrollbar-width: none; scroll-behavior: smooth;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 20px);
          mask-image: linear-gradient(to bottom, transparent 0, #000 20px);
}
.td-card.td-anim .td-thread::-webkit-scrollbar { display: none; }
/* expanding the procedure document lets the window grow so the full page is readable */
.td-card.td-anim .td-thread.td-thread--open { height: auto; overflow: visible; -webkit-mask-image: none; mask-image: none; }
.td-bubble { max-width: 88%; font-size: 14.5px; line-height: 1.45; padding: 11px 14px; border-radius: 14px; }
.td-bubble.them { align-self: flex-start; background: rgba(255,255,255,.08); color: rgba(255,255,255,.92); border-bottom-left-radius: 5px; }
.td-bubble.ai { align-self: flex-end; max-width: 93%; background: color-mix(in srgb, var(--accent-bright) 9%, transparent); border: 1px solid color-mix(in srgb, var(--accent-bright) 22%, transparent); color: rgba(255,255,255,.92); border-bottom-right-radius: 5px; }
.td-bubble .tag { display: block; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; opacity: .6; margin-bottom: 3px; }
.td-answer-lead { display: block; margin-top: 2px; }

/* ✓ Auto Data verified badge */
.td-verify {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .03em;
  color: var(--accent-bright);
  background: color-mix(in srgb, var(--accent-bright) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-bright) 30%, transparent);
  border-radius: var(--radius-full);
  padding: 3px 9px 3px 6px; margin-bottom: 9px;
}
.td-verify svg { width: 12px; height: 12px; }

/* embedded manual document (procedure page / torque table image) */
.td-doc { margin-top: 10px; border-radius: var(--radius-card); overflow: hidden; border: 1px solid rgba(255,255,255,.14); background: #fff; }
.td-doc-bar { display: flex; align-items: center; gap: 8px; padding: 8px 11px; background: #f2f2f0; border-bottom: 1px solid rgba(0,0,0,.08); }
.td-doc-ic { width: 15px; height: 15px; color: #6b6b6b; flex-shrink: 0; }
.td-doc-title { font-size: 12px; font-weight: 600; color: #2a2a2a; white-space: nowrap; }
.td-doc-meta { margin-left: auto; font-family: var(--mono); font-size: 9.5px; color: #8a8a8a; letter-spacing: .02em; white-space: nowrap; }
.td-doc-view { position: relative; background: #fff; }
.td-doc-img { display: block; width: 100%; height: auto; }
/* procedure doc collapses to a preview */
.td-doc--collapsible:not(.expanded) .td-doc-view { max-height: 208px; overflow: hidden; }
.td-doc--collapsible:not(.expanded) .td-doc-view::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 96px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 76%); pointer-events: none;
}
.td-doc-expand {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 14px 10px 11px; border: 0; cursor: pointer;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 55%);
  color: var(--accent-strong); font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .02em;
}
.td-doc.expanded .td-doc-expand { position: static; background: #f2f2f0; border-top: 1px solid rgba(0,0,0,.08); padding: 9px; }
.td-doc-expand .td-pt-more, .td-doc-expand .td-pt-less { display: inline-flex; align-items: center; gap: 7px; }
.td-doc-expand svg { width: 13px; height: 13px; }
.td-doc-expand .td-pt-less { display: none; }
.td-doc.expanded .td-doc-expand .td-pt-more { display: none; }
.td-doc.expanded .td-doc-expand .td-pt-less { display: inline-flex; }
/* plain-text torque answer */
.td-answer-big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 11px; margin-top: 8px; }
.td-answer-big b { font-family: var(--mono); font-weight: 700; color: #fff; font-size: 30px; line-height: 1; letter-spacing: -.01em; }
.td-answer-conv { font-family: var(--mono); font-size: 12px; color: rgba(255,255,255,.5); }

/* answer extras: print button + source line */
.td-extras { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 12px; }
.td-print {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 14px;
  background: var(--accent); color: #fff;
  border: 1px solid transparent; border-radius: var(--radius-btn);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .15s ease;
}
.td-print:hover { background: var(--accent-strong); }
.td-print svg { width: 15px; height: 15px; }
.td-source { font-family: var(--mono); font-size: 11px; color: rgba(255,255,255,.45); letter-spacing: .02em; }

/* card footer: persistent Powered-by-Autodata credit */
.td-foot { margin-top: 18px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.td-poweredby {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .02em; color: rgba(255,255,255,.7);
  border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-full); padding: 4px 11px 4px 8px;
}
.td-poweredby b { color: #fff; font-weight: 600; }
.td-pb-tick { width: 15px; height: 15px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent-bright) 16%, transparent); color: var(--accent-bright); }
.td-pb-tick svg { width: 10px; height: 10px; }
.td-foot-note { font-size: 12px; color: rgba(255,255,255,.4); }

/* ---------- Tech Desk choreography (mirrors .call-card.chat-anim) ---------- */
.td-card.td-anim .td-bubble { opacity: 0; transform: translateY(10px) scale(.98); transition: opacity .32s ease, transform .32s cubic-bezier(.2,.7,.2,1); }
.td-card.td-anim .td-bubble.in { opacity: 1; transform: none; }
.td-card.td-anim .td-bubble.typing { display: inline-flex; align-items: center; padding: 13px 16px; }

/* embedded manual document fades up with its bubble */
.td-card.td-anim .td-doc { opacity: 0; transform: translateY(8px); transition: opacity .45s ease .12s, transform .45s cubic-bezier(.2,.7,.2,1) .12s; }
.td-card.td-anim .td-bubble.in .td-doc { opacity: 1; transform: none; }

/* answer extras (print / source) hidden until released by JS (.show-extras) */
.td-card.td-anim .td-extras { opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s cubic-bezier(.2,.7,.2,1); }
.td-card.td-anim .td-bubble.show-extras .td-extras { opacity: 1; transform: none; }

/* print button gives a couple of subtle pulses once it lands */
.td-card.td-anim .td-print.pulse { animation: tdPulse 1.4s ease-in-out 2; }
@keyframes tdPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-bright) 0%, transparent); }
  50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent-bright) 20%, transparent); }
}

/* reduced motion: force the finished static state (JS early-returns, never adds classes) */
@media (prefers-reduced-motion: reduce) {
  .td-blueprint, .td-live::before, .td-print.pulse { animation: none; }
  .td-card.td-anim .td-bubble,
  .td-card.td-anim .td-doc,
  .td-card.td-anim .td-extras { opacity: 1; transform: none; transition: none; }
}

/* ---------- old vs new ---------- */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 52px;
}
.compare-card {
  border-radius: var(--radius-card);
  padding: 32px 30px;
}
.compare-card.old { border: 1px dashed var(--border-strong); background: var(--surface); }
.compare-card.new { border: 2px solid var(--ink); background: #fff; box-shadow: var(--shadow-lg); }
.compare-card .tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 11px; border-radius: var(--radius-full); margin-bottom: 20px;
}
.compare-card.old .tag { background: #ebebeb; color: var(--muted); }
.compare-card.new .tag { background: var(--accent); color: #fff; }
.compare-card h3 { font-size: 22px; margin-bottom: 22px; }
.compare-card.old h3 { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(0,0,0,.25); }
.cmp-list { list-style: none; display: flex; flex-direction: column; gap: 15px; }
.cmp-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; }
.cmp-list .ic { width: 21px; height: 21px; flex-shrink: 0; margin-top: 1px; display: grid; place-items: center; border-radius: var(--radius-full); }
.cmp-list .ic svg { width: 13px; height: 13px; stroke-width: 2.4; }
.compare-card.old .ic { color: var(--faint); }
.compare-card.old li { color: var(--muted); }
.compare-card.new .ic { background: var(--accent-soft); color: var(--accent-strong); }
.compare-card.new li { color: var(--foreground); }

/* ---------- everything-in-one strip ---------- */
.allinone {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 40px;
  justify-content: center;
}
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: var(--radius-full);
  padding: 9px 16px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--foreground);
}
.pill svg { width: 15px; height: 15px; color: var(--muted); stroke-width: 1.7; }
.pill.killed { color: var(--faint); text-decoration: line-through; border-style: dashed; background: var(--surface); }

/* ---------- FAQ ---------- */
.faq { max-width: 760px; margin: 48px auto 0; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: none; border: 0;
  text-align: left;
  padding: 22px 4px;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}
.faq-q .chev { width: 20px; height: 20px; color: var(--faint); transition: transform .25s ease; flex-shrink: 0; }
.faq-item.open .chev { transform: rotate(180deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.faq-a-inner { padding: 0 4px 24px; font-size: 16px; color: var(--muted); line-height: 1.6; max-width: 64ch; }

/* ---------- final CTA ---------- */
.final {
  background: var(--bg-ink);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(44px, 6vw, 76px) clamp(28px, 5vw, 64px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.final h2 { color: #fff; margin-bottom: 16px; }
.final > *:not(.ai-bg) { position: relative; z-index: 1; }
.final .lead { color: rgba(255,255,255,.66); margin: 0 auto 30px; max-width: 46ch; }
.final .waitlist { margin: 0 auto; }
.final .field { background: #1f1f1e; border-color: rgba(255,255,255,.16); color: #fff; }
.final .field::placeholder { color: rgba(255,255,255,.4); }
.final .field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-bright) 18%, transparent); }
.final .reassure { color: rgba(255,255,255,.55); justify-content: center; }
.final .reassure svg { color: var(--accent-bright); }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--border); padding: 16px 0 10px; }
.footer .container { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px;
  font-size: 13px; color: var(--faint);
  text-align: center;
}
.footer-bottom .heart { color: var(--dot-red); }
.footer-privacy-link {
  border: none; background: none; padding: 0;
  font: inherit; font-size: 13px; color: var(--faint);
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
  transition: color .15s ease;
}
.footer-privacy-link:hover { color: var(--muted); }

/* ---------- privacy popup ---------- */
.privacy-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; transition: opacity .18s ease;
}
.privacy-modal.open { opacity: 1; }
.privacy-modal[hidden] { display: none; }
.privacy-backdrop {
  position: absolute; inset: 0;
  background: rgba(17,17,16,.55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.privacy-dialog {
  position: relative;
  width: 100%; max-width: 540px;
  max-height: 85vh; overflow-y: auto;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 30px 30px 26px;
  transform: translateY(8px);
  transition: transform .18s ease;
}
.privacy-modal.open .privacy-dialog { transform: none; }
.privacy-close {
  position: absolute; top: 14px; right: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border: none; background: transparent; color: var(--faint);
  border-radius: var(--radius-full); cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.privacy-close:hover { background: var(--surface); color: var(--ink); }
.privacy-close svg { width: 18px; height: 18px; }
.privacy-title {
  font-size: 19px; font-weight: 650; color: var(--ink);
  margin: 0 0 14px; letter-spacing: -.01em;
  padding-right: 24px;
}
.privacy-body { font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.privacy-body p { margin: 0 0 11px; }
.privacy-body p:last-child { margin-bottom: 0; }
.privacy-body strong { color: var(--foreground); font-weight: 600; }
.privacy-body a { color: var(--accent-strong); text-decoration: none; }
.privacy-body a:hover { text-decoration: underline; }
.privacy-contact {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--faint);
}

/* ---------- reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .rotor span { transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero .lead { max-width: 46ch; }
  .hero-media { max-width: 560px; }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split.flip .split-media { order: 0; }
  .feat-grid { grid-template-columns: repeat(2, 1fr); }
  .compare { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  body { font-size: 17.5px; }
  .feat-grid { grid-template-columns: 1fr; }
  .waitlist .row2 { grid-template-columns: 1fr; }
  .float-card { display: none; }
  .nav .btn-outline { display: none; }
  .footer-cols { gap: 36px; }
}

/* mobile menu */
.mobile-menu {
  display: none;
  position: fixed; inset: 66px 0 auto 0; z-index: 49;
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 14px var(--pad) 22px;
  box-shadow: var(--shadow-md);
}
.mobile-menu.open { display: block; }
.mobile-menu a { display: block; padding: 12px 0; font-size: 16px; font-weight: 500; border-bottom: 1px solid var(--border); color: var(--foreground); }
.mobile-menu .btn { margin-top: 16px; }

/* ==========================================================================
   UI ILLUSTRATIONS — designed interface vignettes (not screenshots)
   ========================================================================== */
.split-media.illus { position: relative; }
.section-band { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
#customers { margin-top: -5px; padding-top: 0 !important; padding-bottom: 55px !important; }

/* --- Vehicle profile card with WOF gauge --- */
.vcard {
  border: 1px solid var(--border); border-radius: var(--radius-card); background: #fff;
  box-shadow: var(--shadow-lg); padding: 24px; position: relative; z-index: 2;
}
.vcard-head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.vcard-head .vname { line-height: 1.2; }
.vcard-head .vname b { display: block; font-size: 16px; color: var(--ink); font-weight: 600; }
.vcard-head .vname span { font-size: 13px; color: var(--muted); }
.vcard-head .sdot { margin-left: auto; width: 10px; height: 10px; }
.vcard-body { display: flex; gap: 22px; align-items: center; padding: 22px 0 18px; }
.gauge { position: relative; width: 124px; height: 124px; flex-shrink: 0; }
.gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gauge .gc { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gauge .gc b { font-family: var(--mono); font-size: 30px; font-weight: 600; color: var(--ink); line-height: 1; letter-spacing: -.01em; }
.gauge .gc span { font-size: 9.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; margin-top: 5px; line-height: 1.3; text-align: center; }
.vstats { flex: 1; display: flex; flex-direction: column; gap: 13px; min-width: 0; }
.vstat { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; }
.vstat .k { color: var(--muted); }
.vstat .v { color: var(--ink); font-weight: 600; }
.vtl { position: relative; height: 6px; background: var(--surface-2); border-radius: 6px; margin: 8px 0 6px; }
.vtl .fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 6px; background: var(--accent); }
.vtl i { position: absolute; top: 50%; transform: translate(-50%,-50%); width: 12px; height: 12px; border-radius: 50%; background: #d4d4d4; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--border); }
.vtl i.done { background: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.vtl i.now { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.vtl-labels { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; color: var(--faint); }
.vtl-due { position: absolute; top: 0; left: 80%; width: 16%; height: 100%; border-radius: 0 6px 6px 0; background: color-mix(in srgb, var(--dot-amber) 24%, transparent); }
.js-svc-days, .js-svc-km { color: var(--muted); font-weight: 600; }
.js-wof-days, .js-km, .js-svc-days, .js-svc-km, .js-last { font-variant-numeric: tabular-nums; }
@keyframes svcDotPulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dot-amber) 65%, transparent); }
  70%  { box-shadow: 0 0 0 9px color-mix(in srgb, var(--dot-amber) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dot-amber) 0%, transparent); }
}
.sdot.is-due { animation: svcDotPulse 1.1s ease-out 2; }

/* --- Customer list card --- */
.ccard { border: 1px solid var(--border); border-radius: var(--radius-card); background: #fff; box-shadow: var(--shadow-lg); padding: 18px; position: relative; z-index: 2; }
.cc-search { height: 40px; border: 1px solid var(--border); border-radius: 10px; display: flex; align-items: center; gap: 9px; padding: 0 13px; color: var(--faint); font-size: 13.5px; }
.cc-search svg { width: 16px; height: 16px; }
.cc-row { display: flex; align-items: center; gap: 13px; padding: 13px 4px; border-top: 1px solid var(--border); }
.cc-row:first-of-type { border-top: 0; }
.cc-av { width: 38px; height: 38px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--muted); flex-shrink: 0; }
.cc-id { min-width: 0; }
.cc-id b { font-size: 14.5px; color: var(--ink); font-weight: 600; display: block; }
.cc-id span { font-size: 12.5px; color: var(--muted); }
.cc-right { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
.cc-plate-row { display: flex; gap: 6px; }
.cc-last { font-size: 12px; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }

/* --- SMS reminder phone --- */
/* floating accent chips on illustrations (reuses .float-card) */
.illus .float-card { z-index: 5; }
.fc-tr { top: -20px; right: -18px; }
.fc-bl { bottom: -22px; left: -20px; }
.fc-br { bottom: -20px; right: -16px; }

/* floating chips: idle bob + cursor parallax + lifted shadow (depth) */
@property --px { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --py { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --bob { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --rise { syntax: "<length>"; inherits: false; initial-value: 0px; }
.illus .float-card {
  transform: translate3d(var(--px), calc(var(--py) + var(--bob) + var(--rise)), 0);
  transition: --px .4s cubic-bezier(.2,.7,.2,1), --py .4s cubic-bezier(.2,.7,.2,1), --rise .45s cubic-bezier(.2,.7,.2,1), opacity .45s ease, box-shadow .3s ease;
  animation: fcBob 6s ease-in-out infinite;
  box-shadow: 0 24px 46px -16px rgba(0,0,0,.30), 0 6px 16px -6px rgba(0,0,0,.14);
}
/* live WOF/service card: the reminder chip sinks + fades out, then rises back in at the payoff */
#svc-chip.is-hidden { opacity: 0; --rise: 14px; }
@keyframes fcBob { 0%, 100% { --bob: 0px; } 50% { --bob: -9px; } }
.illus .fc-tr { animation-duration: 7.4s; animation-delay: -3.2s; }
.illus .fc-bl { animation-duration: 6.2s; animation-delay: -1s; }
.illus .fc-br { animation-duration: 6.8s; animation-delay: -2.1s; }
@media (prefers-reduced-motion: reduce) {
  .illus .float-card { animation: none; transform: none; }
}

@media (max-width: 980px) {
  .sms-phone { margin: 0 auto; }
  .vcard, .ccard { max-width: 520px; margin: 0 auto; }
}

/* --- Running engine animation (CRM intro) --- */
.engine-fig { margin: 30px auto 0; width: 248px; max-width: 80%; }
.engine-svg { width: 100%; height: auto; display: block; stroke: var(--ink); stroke-width: 1.8; }
.engine-svg .eg-bore rect { stroke: var(--border-strong); stroke-width: 1.4; fill: #fff; }
.engine-svg .eg-piston rect { fill: #fff; stroke: var(--ink); stroke-width: 1.8; }
.engine-svg .eg-piston line { stroke: var(--muted); stroke-width: 2.4; }
.engine-svg .eg-block { fill: var(--surface); stroke: var(--ink); stroke-width: 1.8; }
.engine-svg .eg-pan { fill: var(--surface); stroke: var(--ink); stroke-width: 1.8; }
.engine-svg .eg-belt { stroke: var(--border-strong); stroke-width: 1.6; }
.engine-svg .eg-crankhouse circle { fill: #fff; stroke: var(--ink); stroke-width: 1.8; }
.engine-svg .eg-crank line { stroke: var(--accent); stroke-width: 2.4; }
.engine-svg .eg-crank .eg-fill { fill: var(--accent); stroke: none; }
.engine-svg .eg-gear circle { stroke: var(--accent); stroke-width: 2; fill: none; }
.engine-svg .eg-gear .eg-toothed { stroke-width: 5.6; stroke-dasharray: 4.2 5.8; }
.engine-svg .eg-spark path { stroke: var(--accent); stroke-width: 2; }

/* motion */
.engine-svg .eg-piston { animation: egPiston 1s ease-in-out infinite; }
.engine-svg .eg-piston.p1, .engine-svg .eg-piston.p4 { animation-delay: 0s; }
.engine-svg .eg-piston.p2, .engine-svg .eg-piston.p3 { animation-delay: -.5s; }
.engine-svg .eg-spin { transform-box: fill-box; transform-origin: center; }
.engine-svg .eg-crank { animation: egSpin 1s linear infinite; }
.engine-svg .eg-gear { animation: egSpin 1.7s linear infinite reverse; }
.engine-svg .eg-spark { opacity: 0; }
.engine-svg .eg-spark.s14 { animation: egSpark 1s ease-out infinite; animation-delay: 0s; }
.engine-svg .eg-spark.s23 { animation: egSpark 1s ease-out infinite; animation-delay: -.5s; }
@keyframes egPiston { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(26px); } }
@keyframes egSpin { to { transform: rotate(360deg); } }
@keyframes egSpark { 0% { opacity: .9; } 12% { opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .engine-svg .eg-piston, .engine-svg .eg-crank, .engine-svg .eg-gear, .engine-svg .eg-spark { animation: none; }
  .engine-svg .eg-spark { opacity: 0; }
}

/* CRM: engine motif moved above the heading, smaller */
#crm { padding-bottom: 55px; }
#crm .sec-head.center { display: flex; flex-direction: column; align-items: center; }
#crm .engine-fig { order: -1; width: 108px; margin: 0 0 18px; }

/* ==========================================================================
   SECTION MOTIFS — small animated line-art above each h2
   ========================================================================== */
.sec-anim { height: 58px; width: fit-content; margin: 0 0 16px; }
.sec-anim svg { height: 100%; width: auto; display: block; overflow: visible;
  fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sec-anim .g-fill { fill: var(--accent); stroke: none; }
.sec-head.center .sec-anim, .final .sec-anim { margin-left: auto; margin-right: auto; }
@keyframes secSpin { to { transform: rotate(360deg); } }

/* cars: drive in from the left, settle on the suspension, then locator ping */
.anim-car .cr-tire { stroke: var(--ink); }
.anim-car .cr-body { animation: crDrive 4.2s cubic-bezier(.45,.05,.25,1) infinite; }
.anim-car .cr-wheel { stroke: var(--muted); transform-box: view-box; transform-origin: var(--cx) var(--cy); animation: crRoll 4.2s cubic-bezier(.32,0,.36,1) infinite; }
.anim-car .cr-wave { stroke: var(--accent); fill: none; stroke-width: 2; transform-box: view-box; transform-origin: 50px 12px; animation: crPing 4.2s ease-out infinite; }
@keyframes crDrive {
  0%        { transform: translateX(-20px) translateY(0); }
  26%       { transform: translateX(2px)   translateY(0); }   /* roll in with a touch of overshoot */
  32%       { transform: translateX(0)     translateY(0); }   /* land */
  37%       { transform: translateX(0)     translateY(1.8px); } /* nose dips on the suspension */
  43%       { transform: translateX(0)     translateY(-0.7px); } /* rebound */
  48%, 100% { transform: translateX(0)     translateY(0); }   /* settle + hold */
}
@keyframes crRoll {
  0%   { transform: rotate(0deg); }
  32%  { transform: rotate(540deg); }   /* wheels turn only while moving */
  100% { transform: rotate(540deg); }
}
@keyframes crPing {
  0%, 52%   { transform: scale(1); opacity: 0; }
  57%       { transform: scale(1); opacity: .7; }   /* fires once the car is parked */
  80%, 100% { transform: scale(3); opacity: 0; }
}

/* customers: scanning highlight over a list */
.anim-list .ls-hl { fill: var(--accent-soft); stroke: none; animation: lsScan 3s cubic-bezier(.5,0,.5,1) infinite; }
.anim-list .ls-av { stroke: var(--ink); }
.anim-list .ls-bar { stroke: var(--border-strong); }
.anim-list .ls-bar.s { stroke: var(--faint); }
@keyframes lsScan { 0%, 14% { transform: translateY(0); } 33%, 47% { transform: translateY(19px); } 66%, 80% { transform: translateY(38px); } 100% { transform: translateY(0); } }

/* how: stress gauge needle dropping */
.anim-gauge .gg-arc { stroke: var(--border-strong); stroke-width: 3; }
.anim-gauge .gg-tick { stroke: var(--faint); stroke-width: 2; }
.anim-gauge .gg-needle { stroke: var(--accent); stroke-width: 3; transform-box: view-box; transform-origin: 50px 54px; animation: ggSweep 3.2s ease-in-out infinite; }
@keyframes ggSweep { 0%, 16% { transform: rotate(58deg); } 56%, 78% { transform: rotate(-58deg); } 100% { transform: rotate(58deg); } }

/* apps: many tiles merge into one */
.anim-merge .mg { fill: #fff; stroke: var(--ink); transform-box: fill-box; transform-origin: center; }
.anim-merge .mg-center { fill: var(--accent-soft); stroke: var(--accent); transform-box: fill-box; transform-origin: center; animation: mgCenter 2.8s ease-in-out infinite; }
.anim-merge .t1 { animation: mgT1 2.8s ease-in-out infinite; }
.anim-merge .t2 { animation: mgT2 2.8s ease-in-out infinite; }
.anim-merge .t3 { animation: mgT3 2.8s ease-in-out infinite; }
.anim-merge .t4 { animation: mgT4 2.8s ease-in-out infinite; }
@keyframes mgT1 { 0%, 100% { transform: none; opacity: 1; } 44%, 58% { transform: translate(22px, 20px) scale(.4); opacity: .1; } }
@keyframes mgT2 { 0%, 100% { transform: none; opacity: 1; } 44%, 58% { transform: translate(-22px, 20px) scale(.4); opacity: .1; } }
@keyframes mgT3 { 0%, 100% { transform: none; opacity: 1; } 44%, 58% { transform: translate(22px, -20px) scale(.4); opacity: .1; } }
@keyframes mgT4 { 0%, 100% { transform: none; opacity: 1; } 44%, 58% { transform: translate(-22px, -20px) scale(.4); opacity: .1; } }
@keyframes mgCenter { 0%, 100% { transform: scale(.3); opacity: 0; } 44%, 58% { transform: scale(1); opacity: 1; } }

/* faq: chat bubble with typing dots */
.anim-faq .fq-bubble { stroke: var(--ink); }
.anim-faq .fq-dot { fill: var(--accent); stroke: none; transform-box: fill-box; transform-origin: center; animation: fqDot 1.3s ease-in-out infinite; }
.anim-faq .d2 { animation-delay: .16s; }
.anim-faq .d3 { animation-delay: .32s; }
@keyframes fqDot { 0%, 70%, 100% { transform: translateY(0); opacity: .4; } 35% { transform: translateY(-5px); opacity: 1; } }

/* team: two meshing gears */
.anim-gears circle { stroke: var(--ink); fill: none; }
.anim-gears .gr-tooth { stroke-width: 5; stroke-dasharray: 3.6 5; }
.anim-gears .gr-b circle { stroke: var(--accent); }
.anim-gears .gr-spin { transform-box: fill-box; transform-origin: center; }
.anim-gears .gr-a { animation: secSpin 4.4s linear infinite; }
.anim-gears .gr-b { animation: secSpin 3s linear infinite reverse; }

/* final: waving flag (dark band) */
.anim-flag .fl-pole { stroke: rgba(255,255,255,.55); stroke-width: 2.5; }
.anim-flag .fl-cloth { stroke: var(--accent-bright); stroke-width: 2; fill: color-mix(in srgb, var(--accent-bright) 18%, transparent); transform-box: view-box; transform-origin: 21px 16px; animation: flWave 2.4s ease-in-out infinite; }
@keyframes flWave { 0%, 100% { transform: scaleX(1) skewY(0deg); } 25% { transform: scaleX(.93) skewY(-3.5deg); } 50% { transform: scaleX(1) skewY(0deg); } 75% { transform: scaleX(.93) skewY(3.5deg); } }

/* ai (dark): voice equaliser bars */
.anim-voice .vb { fill: var(--accent-bright); stroke: none; transform-box: fill-box; transform-origin: center; animation: eqBar 1.1s ease-in-out infinite; }
.anim-voice .vb2 { animation-delay: -.35s; }
.anim-voice .vb3 { animation-delay: -.7s; }
.anim-voice .vb4 { animation-delay: -.2s; }
.anim-voice .vb5 { animation-delay: -.55s; }
@keyframes eqBar { 0%, 100% { transform: scaleY(.28); } 50% { transform: scaleY(1); } }

/* tech desk (dark): torque wrench clicking onto a nut */
.anim-torque .tq-head, .anim-torque .tq-handle { stroke: var(--accent-bright); }
.anim-torque .tq-handle { stroke-width: 5; }
.anim-torque .tq-nut { fill: var(--accent-bright); stroke: none; }
.anim-torque .tq-wrench { transform-box: view-box; transform-origin: 40px 26px; animation: tqClick 2.6s ease-in-out infinite; }
.anim-torque .tq-spark { stroke: var(--accent-bright); stroke-width: 2; opacity: 0; animation: tqSpark 2.6s ease-in-out infinite; }
@keyframes tqClick { 0% { transform: rotate(-13deg); } 30% { transform: rotate(0deg); } 38% { transform: rotate(-4deg); } 46%, 100% { transform: rotate(-13deg); } }
@keyframes tqSpark { 0%, 26% { opacity: 0; } 31% { opacity: .95; } 46%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .sec-anim .cr-body, .sec-anim .cr-wheel, .sec-anim .cr-wave, .sec-anim .ls-hl, .sec-anim .gg-needle,
  .anim-merge .mg, .anim-merge .mg-center, .anim-faq .fq-dot, .anim-gears .gr-spin, .anim-flag .fl-cloth, .anim-voice .vb,
  .anim-torque .tq-wrench, .anim-torque .tq-spark { animation: none; }
  .anim-merge .mg-center { opacity: 1; transform: scale(1); }
  .anim-voice .vb { transform: scaleY(.7); }
  .anim-torque .tq-wrench { transform: rotate(-6deg); }
}

/* ==========================================================================
   AD STUDIO section (#ads) — third AI dark section
   ========================================================================== */
#accounting { padding-bottom: 70px !important; }
#founder { padding-bottom: 55px !important; }
#ads { overflow: hidden; border-top: 1px solid rgba(255,255,255,.07); padding-top: 55px !important; padding-bottom: 65px !important; }
#ads .split-media { padding-top: 20px; }

/* signature glow — placed centre-low so the three dark sections each have a unique
   signature (#ai: top-right, #tech: top-left, #ads: centre) */
.ad-glow {
  position: absolute; right: auto; left: 50%; top: 18%;
  transform: translateX(-50%);
  width: 880px; height: 880px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent-bright) 13%, transparent) 0%, transparent 62%);
  filter: blur(40px);
  animation: aiGlow 13s ease-in-out infinite;
}

/* dotted grid (vs #tech's lined blueprint) */
.ad-grid {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(52,215,122,.075) 1.2px, transparent 1.2px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 30% 35%, #000, transparent 78%);
          mask-image: radial-gradient(ellipse 80% 60% at 30% 35%, #000, transparent 78%);
  animation: adGrid 32s linear infinite;
}
@keyframes adGrid { to { background-position: 24px 24px; } }

/* sparkle eyebrow motif — four stars popping in sequence */
.anim-spark .sp { fill: var(--accent-bright); transform-box: fill-box; transform-origin: center; opacity: 0; }
.anim-spark .s1 { animation: spPop 3.4s ease-in-out infinite; }
.anim-spark .s2 { animation: spPop 3.4s ease-in-out infinite .3s; }
.anim-spark .s3 { animation: spPop 3.4s ease-in-out infinite .6s; }
.anim-spark .s4 { animation: spPop 3.4s ease-in-out infinite .9s; }
@keyframes spPop {
  0%, 6% { opacity: 0; transform: scale(.25) rotate(0deg); }
  18%, 72% { opacity: 1; transform: scale(1) rotate(18deg); }
  88%, 100% { opacity: 0; transform: scale(.25) rotate(36deg); }
}

/* trust row below the lead (echo of Dooken's "600+ Agencies · 60s Setup · 10 Free Ads") */
.ad-trustrow {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px 22px;
  margin-top: 22px;
  font-size: 13.5px;
  color: rgba(255,255,255,.7);
}
.ad-trustrow span { display: inline-flex; align-items: center; gap: 8px; }
.ad-trustrow svg { width: 16px; height: 16px; color: var(--accent-bright); flex-shrink: 0; }

/* Powered-by-Dooken chip — sits below the .ai-points list */
.dooken-credit {
  display: inline-flex; align-items: center; gap: 11px;
  margin-top: 30px;
  padding: 9px 18px 9px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.82);
  font-size: 14px;
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.dooken-credit:hover { border-color: rgba(255,255,255,.34); background: rgba(255,255,255,.07); transform: translateY(-1px); }
.dooken-credit b { color: #fff; font-weight: 700; letter-spacing: -.01em; }
.dk-mark {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  display: grid; place-items: center;
  color: #fff;
}
.dk-mark svg { width: 18px; height: 18px; display: block; }

/* ad-card stack on the right column */
.ad-stack { display: flex; flex-direction: column; gap: 18px; justify-content: center; }
.ad-card {
  position: relative;
  background: #1c1c1b;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ad-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 22px 56px -12px rgba(0,0,0,.55);
}

/* photo area — holds the finished, ready-to-push ad creative */
.ad-photo { position: relative; aspect-ratio: 1 / 1; overflow: hidden; }
.ad-photo-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 880px) {
  .ad-stack { gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .ad-glow, .ad-grid { animation: none; }
  .anim-spark .sp { animation: none; opacity: 1; transform: scale(1); }
}

/* ==========================================================================
   ACCOUNTING SYNC section (#accounting)
   ========================================================================== */
.accounting-marks {
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
  gap: clamp(14px, 3vw, 36px);
  margin: 32px auto 4px;
}
.acc-mark {
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(20px, 2.3vw, 28px);
  letter-spacing: -.025em;
  color: var(--ink);
  padding: 8px 22px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  white-space: nowrap;
}

/* accounting motif: documents on each side, arrow between, synced badge */
.anim-sync .sy-box { fill: #fff; stroke: var(--border-strong); stroke-width: 2; }
.anim-sync .sy-line { stroke: var(--faint); stroke-width: 1.8; stroke-linecap: round; }
.anim-sync .sy-line.s { opacity: .55; }
.anim-sync .sy-flow { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.anim-sync .sy-badge-bg { fill: #fff; stroke: var(--accent); stroke-width: 1.8; }
.anim-sync .sy-check {
  fill: none; stroke: var(--accent); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
  transform-box: fill-box; transform-origin: center;
  animation: synCheck 3.4s ease-in-out infinite;
}
@keyframes synCheck {
  0%, 18% { opacity: 0; transform: scale(.35); }
  34%, 78% { opacity: 1; transform: scale(1); }
  92%, 100% { opacity: 0; transform: scale(.35); }
}
@media (prefers-reduced-motion: reduce) {
  .anim-sync .sy-check { animation: none; opacity: 1; transform: none; }
}

/* ===========================================================================
   MOBILE OPTIMIZATION PASS — overrides for ≤760px only.
   Desktop layout above 760px is byte-identical.
   ========================================================================== */
@media (max-width: 760px) {
  /* Hero — neutralise desktop negative margins, restore natural rhythm. */
  .hero-center { margin-top: 0; min-height: auto; gap: 22px; padding-block: 16px; }
  .hero-center h1 { margin: 0; }
  .hero-center .lead { margin: 0; }
  .hero-body { margin-top: 0; gap: 18px; }
  .hero-center .waitlist { margin: 0; }
  .hero-body .waitlist .fields { margin-top: 0; }
  .hero-center .reassure { margin-top: 12px; }
  .scroll-cue { margin-top: 0; bottom: 0; position: static; }
  .hero-social { margin-bottom: 6px; }

  /* Feature marquee — show ~1.5 cards at 375px viewport. */
  .fcard { flex: 0 0 240px; width: 240px; padding: 22px 20px; }
  .fcard h3 { font-size: 17px; }
  .fcard p  { font-size: 14px; line-height: 1.45; }
  .fmarquee-track      { animation-duration: 30s; }
  .fmarquee-track--rev { animation-duration: 30s; }

  /* Service Desk + Tech Desk bubbles — let them breathe, no cut-off. */
  .call-card, .td-card { padding: 16px; }
  .bubble { max-width: 100%; }
  .cmsg .bubble { max-width: calc(100% - 34px); }
  .spk { width: 22px; height: 22px; }
  .td-bubble { max-width: 100%; }
  .td-bubble.ai { max-width: 100%; }
  .td-doc, .td-doc-img { max-width: 100%; height: auto; }

  /* Tech Desk header + procedure bar — these nowrap labels force the
     card's grid column to ~400px, overflowing the 327px container on
     a 375px viewport. Allow them to wrap on mobile. */
  #tech .td-who b,
  #tech .td-ref,
  #tech .td-doc-title,
  #tech .td-doc-meta { white-space: normal; }

  /* Floating chips — desktop overlays them on the card corners with negative
     offsets. The existing @media (max-width: 620px) rule hides them entirely;
     re-show them on mobile and constrain to safe-inside-the-viewport offsets
     so they overlap the card edge like desktop instead of going off-screen. */
  .illus .float-card {
    display: flex;
    max-width: 220px;
    padding: 10px 12px;
    font-size: 12.5px;
    gap: 9px;
  }
  .illus .float-card .ico { width: 28px; height: 28px; border-radius: 8px; }
  .illus .float-card .ico svg { width: 15px; height: 15px; }
  .illus .float-card .sub { font-size: 11px; }
  .illus .fc-tr { top: -12px; right: -12px; left: auto; }
  .illus .fc-bl { bottom: -12px; left: -12px; right: auto; top: auto; }
  .illus .fc-br { bottom: -12px; right: -12px; left: auto; top: auto; }
}

/* Contact pills — footer + founder section (refined outline pill) */
.contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 42px;
  padding: 0 20px;
  font-family: var(--font);
  font-size: 14.5px;
  font-weight: 600;
  border-radius: var(--radius-full);
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.contact-btn svg { width: 18px; height: 18px; color: var(--muted); transition: color .15s ease; }
.contact-btn:hover { border-color: var(--accent-border); background: var(--accent-soft); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.contact-btn:hover svg { color: var(--accent-strong); }
.contact-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }