/* ============================================================
   A1 Consulting — Landing v4
   Dark hero (near-black, violet accent) → dither → light body
   Centered composition · pill CTAs · mono technical labels
   Type: Instrument Sans (display+body) · IBM Plex Mono (labels)
   ============================================================ */

:root {
  --dark: #0A0A0D;
  --dark-soft: #131318;
  --bg: #FAFAF8;
  --card: #FFFFFF;
  --ink: #101013;
  --ink-soft: #45474E;
  --muted: #85878F;
  --line: #E8E7E3;
  --line-strong: #D5D4CE;
  --accent: #2563EB;
  --accent-up: color-mix(in srgb, var(--accent) 55%, #FFFFFF);
  --on-dark: #F4F4F2;
  --on-dark-dim: rgba(244, 244, 242, 0.55);
  --on-dark-faint: rgba(244, 244, 242, 0.35);
  --sans: "Instrument Sans", "Helvetica Neue", sans-serif;
  --mono: "IBM Plex Mono", "SF Mono", monospace;
  --maxw: 1200px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--accent); color: #fff; }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 clamp(22px, 4.5vw, 56px);
}

.dark { background: var(--dark); color: var(--on-dark); }

/* hero background image */
header.dark {
  position: relative;
  background-color: var(--dark);
  background-image: url("images/hero-bg.jpg");
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
}
header.dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(10, 10, 13, 0.78) 0%,
    rgba(10, 10, 13, 0.42) 22%,
    rgba(10, 10, 13, 0.18) 48%,
    rgba(10, 10, 13, 0.70) 82%,
    rgba(10, 10, 13, 0.94) 100%
  );
}
header.dark > .wrap { position: relative; z-index: 1; }

/* ---------- type ---------- */

h1, h2, h3 { font-weight: 600; letter-spacing: -0.035em; text-wrap: balance; }
h1 { font-size: clamp(50px, 6.8vw, 104px); line-height: 1.0; letter-spacing: -0.045em; }
h2 { font-size: clamp(34px, 4vw, 60px); line-height: 1.04; letter-spacing: -0.04em; }
h3 { font-size: clamp(18px, 1.7vw, 22px); line-height: 1.25; letter-spacing: -0.02em; }

h1 em, h2 em { font-style: normal; color: var(--muted); }
.dark h1 em, .dark h2 em, .final h2 em { color: var(--on-dark-faint); }

p { text-wrap: pretty; }

.lede { font-size: clamp(16.5px, 1.4vw, 19px); line-height: 1.6; color: var(--ink-soft); max-width: 54ch; }
.dark .lede { color: var(--on-dark-dim); }

.kicker {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.kicker b { color: var(--accent); font-weight: 500; }
.dark .kicker { color: var(--on-dark-faint); }
.dark .kicker b { color: var(--accent-up); }

.mono-note { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.05em; color: var(--muted); }

/* ---------- buttons (pill, sans) ---------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--accent);
  color: #fff;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15.5px;
  letter-spacing: -0.01em;
  padding: 17px 32px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
  box-shadow: 0 12px 28px -16px color-mix(in srgb, var(--accent) 70%, transparent);
}
.btn:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--accent) 82%, #fff); }
.btn:active { transform: translateY(0); }
.btn .arr { transition: transform 0.16s ease; position: relative; }
.btn:hover .arr { transform: translateX(4px); }
.btn-sm { padding: 12px 22px; font-size: 14px; }

.btn-light { background: #fff; color: var(--ink); box-shadow: 0 10px 24px -16px rgba(0, 0, 0, 0.6); }
.btn-light:hover { background: #F1F1EE; }

.btn-ghost {
  background: transparent;
  color: var(--on-dark);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.14); }

.cta-micro { margin-top: 12px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.05em; color: var(--muted); }
.dark .cta-micro { color: var(--on-dark-faint); }

.ghost-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: -0.01em;
  color: var(--accent);
  text-decoration: none;
  transition: gap 0.15s ease, color 0.15s ease;
}
.ghost-link:hover { gap: 12px; }

/* ---------- topbar / sticky ---------- */

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.03em;
}
.brand-mark {
  height: 30px;
  display: grid;
  place-items: center;
  flex: none;
}
.brand-mark img { height: 30px; width: auto; display: block; }
/* scan-line wordmark logo */
.brand-word {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 27px;
  letter-spacing: -0.04em;
  background-image: repeating-linear-gradient(
    180deg,
    currentColor 0,
    currentColor 2.2px,
    transparent 2.2px,
    transparent 3px
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: currentColor;
}
.top-index {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.4vw, 34px);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.top-index a {
  color: var(--on-dark);
  text-decoration: none;
  transition: color 0.15s ease;
  white-space: nowrap;
}
.top-index a:hover { color: var(--muted); }
@media (max-width: 900px) { .top-index { display: none; } }

/* hamburger toggle (hidden on desktop) */
.nav-toggle {
  display: none;
  flex: none;
  width: 44px; height: 44px;
  border: none;
  background: none;
  cursor: pointer;
  padding: 11px 9px;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 4px;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.28s cubic-bezier(0.2,0.8,0.2,1), opacity 0.2s;
}
.nav-toggle--dark span { background: var(--on-dark); }
body.menu-open .nav-toggle span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
body.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }
/* the single root-level fab: fixed top-right, above everything */
.nav-fab {
  position: absolute;
  top: 24px;
  right: clamp(13px, 4.5vw, 47px);
  z-index: 101;
}
/* pin it only when the sticky bar is on screen (or the menu is open) */
body.scrolled .nav-fab,
body.menu-open .nav-fab { position: fixed; }
body.scrolled .nav-fab { top: 13px; } /* sticky bar is shorter — align with its Qovra */
.nav-fab span { background: var(--on-dark); }            /* white over the dark hero */
body.scrolled .nav-fab span { background: var(--ink); }  /* dark over the light sticky bar */
body.menu-open .nav-fab span { background: var(--ink); } /* dark over the light menu */

/* full-screen mobile menu — clean editorial */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: var(--bg);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 6.5vw, 44px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.32s ease, visibility 0.32s;
}
body.menu-open .mobile-menu { opacity: 1; visibility: visible; }
.menu-brand {
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.menu-links {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(2px, 0.6vh, 6px);
}
.mobile-menu a {
  text-decoration: none;
  color: var(--ink);
  font-size: clamp(34px, 11vw, 52px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.06;
  opacity: 0;
  transform: translateY(8px);
  transition: color 0.18s ease, opacity 0.4s ease, transform 0.4s cubic-bezier(0.2,0.8,0.2,1);
}
body.menu-open .mobile-menu a { opacity: 1; transform: none; }
.mobile-menu a:hover, .mobile-menu a:active { color: var(--muted); }
.mobile-menu a:last-child { color: var(--accent); }
.mobile-menu a:last-child:hover, .mobile-menu a:last-child:active { color: color-mix(in srgb, var(--accent) 70%, #000); }
@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  /* the fab only shows while a bar is on screen (or the menu is open) — no floating in the gap */
  .nav-fab { display: none; }
  body.bar-visible .nav-fab,
  body.menu-open .nav-fab { display: flex; }
  /* mobile bars → Qovra left (the fab floats top-right) */
  .stickybar .wrap, .topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .stickybar .bar-book, .topbar .btn { display: none; }
  .stickybar .brand-word, .topbar .brand-word {
    font-size: 32px;
    letter-spacing: -0.05em;
    background-image: repeating-linear-gradient(180deg, currentColor 0, currentColor 3px, transparent 3px, transparent 3.6px);
  }
  .stickybar .cta-label { display: none; }
  .stickybar .cta-label-sm { display: inline; }
}
/* short bar label only shows in the sticky bar on mobile */
.cta-label-sm { display: none; }

.stickybar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  background: rgba(250, 250, 248, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  transform: translateY(-110%);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.stickybar.is-on { transform: translateY(0); }
.stickybar .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* ---------- hero ---------- */

.hero-center {
  position: relative;
  padding-top: clamp(64px, 10vh, 120px);
  padding-bottom: clamp(120px, 22vh, 260px);
  display: grid;
  justify-items: start;
  text-align: left;
  gap: 26px;
}
.hero-center > *:not(.hero-visual) { position: relative; z-index: 1; }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-dark-dim);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 9px 18px;
}
.hero-badge i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent-up);
  animation: blink 2.4s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0.25; } }
.hero-center h1 { max-width: 14ch; color: #fff; }
.hero-center .lede { max-width: 40ch; }
.hero-ctas { display: flex; align-items: center; justify-content: flex-start; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.hero-center .cta-micro { margin-top: 0; }
.hero-qualify {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.03em;
  color: var(--on-dark-faint);
  margin-top: 4px;
}

/* ---------- hero visual: white wireframe + scan lines ---------- */

.hero-visual {
  position: absolute;
  z-index: 0;
  right: clamp(-40px, -1.4vw, 4px);
  top: clamp(0px, 1.4vh, 40px);
  width: min(660px, 52vw);
  margin-top: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(100deg, transparent 6%, #000 38%, #000 92%, transparent 100%);
  mask-image: linear-gradient(100deg, transparent 6%, #000 38%, #000 92%, transparent 100%);
}
.hero-visual::before {
  content: "";
  position: absolute;
  inset: -8% -12%;
  background: radial-gradient(ellipse 48% 46% at 60% 44%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 66%);
  pointer-events: none;
  z-index: -1;
}

/* hero workflow constellation */
.hero-net { position: relative; width: 100%; aspect-ratio: 760 / 820; container-type: inline-size; }
.net-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 0; }
.net-wires .frame { fill: none; stroke: rgba(120,150,235,.10); stroke-width: 1; }
.net-wires .w { fill: none; stroke: color-mix(in srgb, var(--accent) 60%, #1a2238); stroke-width: 1.2; stroke-dasharray: 2.5 6; opacity: .65; }
.net-wires .w-lit { fill: none; stroke: var(--accent-up); stroke-width: 1.1; opacity: .55; filter: url(#netglow); }
.net-wires .nd { fill: #d6e4ff; filter: url(#netglow); }
.net-wires .nd-ring { fill: #0a0a0d; stroke: var(--accent-up); stroke-width: 1.4; }

.np {
  position: absolute;
  border-radius: 1.9cqw;
  padding: 2cqw 2.2cqw;
  background: linear-gradient(158deg, rgba(30,37,57,.82), rgba(13,16,26,.88));
  border: 1px solid rgba(122,152,238,.16);
  box-shadow: 0 30px 60px -34px rgba(0,0,0,.92), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  color: rgba(214,224,250,.9);
  z-index: 1;
}
.np-h { display: flex; align-items: center; justify-content: space-between; gap: 6px;
  font-family: var(--mono); font-size: 1.42cqw; letter-spacing: .14em; text-transform: uppercase; color: rgba(150,170,225,.72);
  padding-bottom: 1.3cqw; margin-bottom: 1cqw; border-bottom: 1px solid rgba(122,152,238,.13); }
.np-row { display: flex; align-items: center; gap: 1.3cqw; padding: 0.92cqw 0; font-size: 1.72cqw; color: rgba(198,210,240,.84); letter-spacing: -0.01em; line-height: 1.2; }
.np-ic { flex: none; width: 2.3cqw; height: 2.3cqw; color: rgba(152,174,232,.62); display: grid; place-items: center; }
.np-ic svg { width: 100%; height: 100%; }
.np-row .spark { color: var(--accent-up); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 75%, transparent)); }
.np-tog { margin-left: auto; flex: none; width: 4cqw; height: 2.2cqw; border-radius: 999px; background: var(--accent); position: relative;
  box-shadow: 0 0 9px -1px color-mix(in srgb, var(--accent) 80%, transparent), inset 0 0 0 1px rgba(255,255,255,.12); }
.np-tog::after { content: ""; position: absolute; top: 50%; right: 0.35cqw; transform: translateY(-50%); width: 1.5cqw; height: 1.5cqw; border-radius: 50%; background: #fff; }
.np-act { margin-left: auto; font-family: var(--mono); font-size: 1.32cqw; letter-spacing: .1em; color: rgba(150,200,255,.62); }

/* center impact panel */
.np-chip { font-family: var(--mono); font-size: 1.3cqw; letter-spacing: .04em; padding: 0.5cqw 1cqw; border-radius: 1cqw;
  border: 1px solid rgba(122,152,238,.22); color: rgba(184,202,242,.78); display: inline-flex; gap: 0.6cqw; align-items: center; text-transform: none; }
.np-chart { margin: 1.4cqw 0 1.6cqw; }
.np-chart svg { width: 100%; height: auto; display: block; }
.np-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4cqw; padding-top: 1.6cqw; border-top: 1px solid rgba(122,152,238,.13); }
.np-stat .k { font-family: var(--mono); font-size: 1.28cqw; letter-spacing: .03em; color: rgba(152,170,218,.62); }
.np-stat .v { font-size: 2.7cqw; font-weight: 600; color: #eaf0ff; letter-spacing: -0.02em; margin-top: 0.4cqw; }

/* panel placement */
.np--sources { left: 24.5%; top: 7%; width: 24%; }
.np--ai { left: 3.5%; top: 42%; width: 19.5%; }
.np--impact { left: 24%; top: 33%; width: 37.5%; z-index: 2; }
.np--auto { left: 65.5%; top: 19%; width: 26%; }
.np--delivery { left: 65.5%; top: 53.5%; width: 21.5%; }
.np--outcomes { left: 22%; top: 70%; width: 24%; }

@media (max-width: 900px) {
  .hero-center { justify-items: center; text-align: center; }
  .hero-center h1 { max-width: 16ch; }
  .hero-center .lede { max-width: 46ch; }
  .hero-ctas { justify-content: center; }
  .hero-visual {
    position: relative;
    right: auto;
    top: auto;
    width: min(640px, 86vw);
    margin-top: clamp(16px, 4vh, 40px);
    opacity: 1;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ---------- console stage ---------- */

.console-stage {
  position: relative;
  max-width: 880px;
  margin: clamp(52px, 8vh, 92px) auto 0;
}
.console-stage::after {
  content: "";
  position: absolute;
  inset: -22% -30% -18%;
  background: radial-gradient(ellipse 52% 56% at 50% 44%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.pixel-field {
  position: absolute;
  top: 4%; bottom: 12%;
  width: clamp(70px, 16vw, 220px);
  background-image:
    radial-gradient(circle at 2px 2px, var(--accent) 1.3px, transparent 0),
    radial-gradient(circle at 2px 2px, var(--accent-up) 0.8px, transparent 0);
  background-size: 8px 8px, 13px 13px;
  background-position: 0 0, 4px 5px;
  opacity: 0.4;
  pointer-events: none;
  z-index: 1;
}
.pixel-field.pf-l { right: calc(100% + 32px); -webkit-mask-image: linear-gradient(90deg, transparent, black 70%); mask-image: linear-gradient(90deg, transparent, black 70%); }
.pixel-field.pf-r { left: calc(100% + 32px); -webkit-mask-image: linear-gradient(270deg, transparent, black 70%); mask-image: linear-gradient(270deg, transparent, black 70%); }
@media (max-width: 1180px) { .pixel-field { display: none; } }

/* ---------- ops console window ---------- */

.console {
  position: relative;
  z-index: 2;
  background: var(--card);
  color: var(--ink);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.09),
    0 2px 6px rgba(0, 0, 0, 0.4),
    0 60px 120px -40px rgba(0, 0, 0, 0.85);
  text-align: left;
}
.console-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  background: #F3F2EF;
  border-bottom: 1px solid var(--line);
  padding: 11px 16px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.console-head .ch-title { text-align: center; }
.traffic { display: flex; gap: 7px; }
.traffic i { width: 11px; height: 11px; border-radius: 50%; }
.traffic i:nth-child(1) { background: #FF5F57; }
.traffic i:nth-child(2) { background: #FEBC2E; }
.traffic i:nth-child(3) { background: #28C840; }
.console-head .ch-live { justify-self: end; color: #0E9F6E; display: inline-flex; align-items: center; gap: 7px; }
.console-head .ch-live i { width: 6px; height: 6px; background: #34D399; border-radius: 50%; animation: blink 1.8s steps(2) infinite; }

.console-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.cp-track { flex: 1; height: 6px; border-radius: 999px; background: var(--line); position: relative; overflow: hidden; }
.cp-fill { position: absolute; inset: 0; right: auto; background: var(--accent); border-radius: 999px; width: 38%; transition: width 0.6s ease; }
#cp-pct { color: var(--ink); }

.console table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12px; }
.console td {
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.console tr:last-child td { border-bottom: none; }
.console .c-name { color: var(--ink); max-width: 0; width: 56%; }
.console .c-type { color: var(--muted); width: 14%; }
.console .c-status { width: 30%; text-align: right; }
.console .st { display: inline-flex; align-items: center; gap: 7px; }
.console .st i { width: 6px; height: 6px; border-radius: 50%; }
.console .st-done { color: #0E9F6E; } .console .st-done i { background: #0E9F6E; }
.console .st-proc { color: var(--accent); } .console .st-proc i { background: var(--accent); animation: blink 1.2s steps(2) infinite; }
.console .st-ready { color: var(--muted); } .console .st-ready i { background: var(--line-strong); }

.console-foot {
  display: flex;
  justify-content: space-between;
  padding: 11px 18px;
  border-top: 1px solid var(--line);
  background: #FCFCFA;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.console-foot b { color: var(--ink); font-weight: 500; }
@media (max-width: 640px) {
  .console .c-type { display: none; }
  .console .c-name { width: 64%; }
}

/* ---------- hero meta ---------- */

.hero-meta {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(18px, 3.2vw, 40px);
  margin-top: clamp(52px, 8vh, 88px);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--on-dark-faint);
}
.hero-meta span { display: inline-flex; align-items: center; gap: 8px; }
.hero-meta span::before { content: "+"; color: var(--accent-up); }

/* ---------- trust strip (on dark) ---------- */

.trust-dark {
  margin-top: clamp(64px, 9vh, 110px);
  padding-bottom: clamp(64px, 9vh, 100px);
  display: grid;
  gap: 30px;
  justify-items: center;
}
.trust-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-dark-faint);
}
.trust-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(26px, 4.5vw, 60px);
}
.lw { font-weight: 650; font-size: 17px; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.85); white-space: nowrap; }
.lw-serif { font-family: Georgia, "Times New Roman", serif; font-weight: 500; font-style: italic; font-size: 18px; }
.lw-wide { letter-spacing: 0.2em; text-transform: uppercase; font-size: 13px; font-weight: 700; }
.lw-mono { font-family: var(--mono); font-size: 13.5px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; }
.trust-more { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-dark-faint); }

/* ---------- dither transitions ---------- */

.dither-out, .dither-in {
  height: 84px;
  background-image:
    radial-gradient(circle at 2px 2px, var(--dark) 1.5px, transparent 0),
    radial-gradient(circle at 2px 2px, var(--dark) 1px, transparent 0),
    radial-gradient(circle at 2px 2px, var(--dark) 0.6px, transparent 0);
  background-size: 5px 5px, 9px 9px, 15px 15px;
  background-position: 0 0, 2px 4px, 7px 2px;
}
.dither-out {
  -webkit-mask-image: linear-gradient(180deg, black 0%, rgba(0,0,0,0.55) 35%, transparent 100%);
  mask-image: linear-gradient(180deg, black 0%, rgba(0,0,0,0.55) 35%, transparent 100%);
}
.dither-in {
  -webkit-mask-image: linear-gradient(0deg, black 0%, rgba(0,0,0,0.55) 35%, transparent 100%);
  mask-image: linear-gradient(0deg, black 0%, rgba(0,0,0,0.55) 35%, transparent 100%);
}

/* ---------- sections (centered) ---------- */

.section { padding: clamp(76px, 11vh, 130px) 0; }
.section-head {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 18px;
  margin-bottom: clamp(44px, 6vh, 68px);
}
.section-head h2 { max-width: 21ch; }
#problem .section-head h2 { max-width: 40ch; text-wrap: balance; }
.section-head .lede { margin: 0 auto; }

/* ---------- statement ---------- */

.statement {
  padding: clamp(84px, 13vh, 150px) 0 clamp(40px, 6vh, 70px);
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 26px;
}
.statement h2 { font-size: clamp(40px, 5.4vw, 84px); max-width: 16ch; }
.statement h2 span { display: block; color: #B9BBC0; }

/* ---------- problem ---------- */

.pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 56px); }

/* "why we exist" scene cards — gray panel of floating UI, title + copy below */
.pcard { display: flex; flex-direction: column; gap: clamp(18px, 1.8vw, 26px); }
.pscene {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  background: #F1F1EF;
  overflow: hidden;
}
.pscene > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pcard-text { display: grid; gap: 11px; }
.pcard-eyebrow { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; color: var(--accent); }
.pcard-title { font-size: clamp(20px, 1.5vw, 24px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.14; color: var(--ink); }
.pcard-copy { font-size: 16px; line-height: 1.6; color: var(--ink-soft); max-width: 40ch; }

/* floating app tiles */
.pp-tile {
  position: absolute;
  width: clamp(38px, 3.4vw, 48px);
  aspect-ratio: 1;
  border-radius: 12px;
  background: #fff;
  display: grid;
  place-items: center;
  color: #16161b;
  box-shadow: 0 10px 22px -12px rgba(20, 25, 50, 0.28), 0 1px 3px rgba(20, 25, 50, 0.08);
}
.pp-tile svg { width: 46%; height: 46%; }

/* accent agent chip + person tag + cursors */
.pp-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px 5px 7px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 12%, #fff);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--accent) 60%, transparent);
}
.pp-chip svg { width: 13px; height: 13px; }
.pp-tag {
  position: absolute;
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 7px;
  background: var(--accent);
  color: #fff;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--accent) 70%, transparent);
}
.pp-cursor { position: absolute; width: 16px; height: 16px; color: var(--accent); }
.pp-cursor svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 3px rgba(20, 25, 50, 0.25)); }

/* flow pills + dashed wires + checklist */
.pp-wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pp-wires path { fill: none; stroke: color-mix(in srgb, var(--accent) 28%, #c7cede); stroke-width: 1.4; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.pp-pill {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 9px;
  background: #fff;
  color: #2a3550;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 10px 22px -12px rgba(20, 25, 50, 0.3), 0 1px 3px rgba(20, 25, 50, 0.08);
}
.pp-pill .ring { width: 12px; height: 12px; border-radius: 50%; flex: none; border: 2px solid color-mix(in srgb, var(--accent) 35%, #cfd8ea); border-top-color: var(--accent); }
.pp-list {
  position: absolute;
  background: #fff;
  border-radius: 11px;
  padding: 11px 13px;
  display: grid;
  gap: 9px;
  box-shadow: 0 16px 30px -16px rgba(20, 25, 50, 0.35), 0 1px 3px rgba(20, 25, 50, 0.08);
}
.pp-row { display: flex; align-items: center; gap: 9px; font-size: 12px; color: #2a3550; white-space: nowrap; }
.pp-row .box { width: 15px; height: 15px; flex: none; display: grid; place-items: center; }
.pp-row .box.on { background: var(--accent); border-radius: 4px; color: #fff; }
.pp-row .box.on svg { width: 10px; height: 10px; stroke-width: 3.4; }
.pp-row .box.off { border: 2px solid #d5dae6; border-radius: 50%; }
.pp-row.pending { color: #9aa1b2; }

/* single agent note card */
.pscene--note { display: grid; place-items: center; padding: 0 9%; }
.pp-note {
  background: #fff;
  border-radius: 12px;
  padding: 14px 16px;
  max-width: 88%;
  box-shadow: 0 18px 36px -18px rgba(20, 25, 50, 0.4), 0 1px 3px rgba(20, 25, 50, 0.08);
}
.pp-note-h { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: #1a1f2e; margin-bottom: 6px; }
.pp-note-h .pp-spark { color: var(--accent); display: inline-flex; }
.pp-note-h .pp-spark svg { width: 14px; height: 14px; }
.pp-note p { font-size: 13px; line-height: 1.5; color: #5a6172; }
.pain {
  background: #F2F2F0;
  border: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  border-radius: 24px;
  padding: 16px 16px 28px;
  display: flex;
  flex-direction: column;
  align-content: start;
}

/* unified light "soft UI" visual panel (problem + process) — matches proof illustrations */
.soft-art {
  position: relative;
  aspect-ratio: 486 / 300;
  border-radius: 16px;
  overflow: visible;
  margin-bottom: 22px;
  padding: 26px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  box-shadow: none;
}
/* enlarged, slightly tilted inner cards floating on the page */
.step .viz-list,
.step .viz-opps { width: 94%; transform: rotate(-2.6deg); }
.step:nth-child(2) .viz-opps { transform: rotate(2.6deg); }
.soft-card {
  width: 100%;
  background: #fff;
  border-radius: 15px;
  padding: 16px 16px 17px;
  display: grid;
  gap: 13px;
  box-shadow: 0 24px 42px -26px rgba(30, 52, 120, 0.5), 0 3px 8px -3px rgba(30, 52, 120, 0.12);
}
.soft-top { display: flex; align-items: center; gap: 12px; }
.soft-app {
  flex: none;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: linear-gradient(148deg, #3F79F1, #2155D6);
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: 0 9px 16px -7px rgba(37, 99, 235, 0.7);
}
.soft-app svg { width: 23px; height: 23px; }
.soft-app [fill] { fill: #fff; }
.soft-hd { display: grid; gap: 7px; flex: 1; }
.soft-hd i { display: block; height: 8px; border-radius: 999px; background: #E5E8F1; }
.soft-hd i.s { width: 52%; height: 7px; background: #EDEFF5; }
.soft-rows { display: grid; gap: 9px; }
.soft-rows i { display: block; height: 9px; border-radius: 999px; background: #EDEFF4; }
.soft-rows i.a { width: 60%; background: color-mix(in srgb, var(--accent) 32%, #E7ECFB); }
.soft-chip {
  position: absolute;
  left: 15px; bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border-radius: 9px;
  padding: 8px 11px;
  box-shadow: 0 16px 28px -16px rgba(30, 52, 120, 0.6), 0 2px 5px -2px rgba(30, 52, 120, 0.14);
}
.soft-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.soft-chip i { display: block; width: 32px; height: 7px; border-radius: 999px; background: #E5E8F1; }
.soft-badge {
  position: absolute;
  top: 17px; right: 15px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(148deg, #3F79F1, #2155D6);
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: 0 10px 18px -8px rgba(37, 99, 235, 0.7);
}
.soft-badge svg { width: 15px; height: 15px; }

/* ---------- richer process illustrations ---------- */
.viz-wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.viz-wires path { fill: none; stroke: color-mix(in srgb, var(--accent) 34%, #d4ddf2); stroke-width: 1.6; stroke-dasharray: 2.5 5.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.viz-wires .ring { fill: #fff; stroke: color-mix(in srgb, var(--accent) 50%, #d0daf3); stroke-width: 1.8; }
.viz-wires .dot { fill: var(--accent); }

/* card 1 — discover list */
.viz-list { position: relative; z-index: 2; width: 80%; background: #fff; border-radius: 14px; padding: 14px; display: grid; gap: 12px;
  box-shadow: 0 24px 42px -26px rgba(30, 52, 120, 0.5), 0 3px 8px -3px rgba(30, 52, 120, 0.12); }
.viz-list-top { display: flex; align-items: center; gap: 11px; }
.viz-applogo { flex: none; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(148deg, #3F79F1, #2155D6); display: grid; place-items: center; color: #fff; box-shadow: 0 8px 14px -6px rgba(37, 99, 235, 0.7); }
.viz-applogo svg { width: 18px; height: 18px; }
.viz-hd { display: grid; gap: 6px; flex: 1; }
.viz-hd i { height: 7px; border-radius: 999px; background: #E5E8F1; }
.viz-hd i.s { width: 48%; height: 6px; background: #EDEFF5; }
.viz-list-grid { display: grid; grid-template-columns: 30px 1fr; gap: 11px; align-items: start; }
.viz-rail { display: grid; gap: 8px; }
.viz-rail i { height: 14px; border-radius: 6px; background: #EEF1F8; }
.viz-cols { display: grid; gap: 8px; }
.viz-cols .r { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; align-items: center; height: 14px; }
.viz-cols .r i { height: 7px; border-radius: 999px; background: #EDEFF4; }
.viz-cols .r i.hl { background: color-mix(in srgb, var(--accent) 34%, #E3EAFB); }

/* floating circular action (search / trend) */
.viz-fab { position: absolute; z-index: 3; right: 4%; bottom: 12%; width: 42px; height: 42px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--accent);
  box-shadow: 0 18px 30px -14px rgba(30, 52, 120, 0.5), 0 3px 8px -3px rgba(30, 52, 120, 0.16); }
.viz-fab svg { width: 22px; height: 22px; }
/* step 1 floating "found" marker — top-right to balance the search chip */
.viz-fab--tag { right: 6%; bottom: auto; top: 14%; width: 38px; height: 38px; }
.viz-fab--tag svg { width: 19px; height: 19px; }

/* card 2 — ranked opportunities */
.viz-opps { position: relative; z-index: 2; width: 80%; background: #fff; border-radius: 14px; padding: 15px 16px; display: grid; gap: 10px;
  box-shadow: 0 24px 42px -26px rgba(30, 52, 120, 0.5), 0 3px 8px -3px rgba(30, 52, 120, 0.12); }
.viz-opps-title { font-weight: 600; font-size: 12px; color: #2a3550; letter-spacing: -0.01em; white-space: nowrap; }
.viz-opp { display: grid; grid-template-columns: 22px 1fr auto 40px; gap: 8px; align-items: center; }
.viz-opp .lbl { height: 7px; border-radius: 999px; background: #E7EAF2; }
.viz-opp .track { height: 9px; border-radius: 999px; background: #EEF1F8; overflow: hidden; }
.viz-opp .track b { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 52%, #a6c0f6), var(--accent)); }
.viz-opp em { font-style: normal; font-weight: 600; font-size: 11px; color: #6b7488; white-space: nowrap; }
.viz-chip { position: absolute; z-index: 3; left: 7%; bottom: 13%; width: 46px; height: 46px; border-radius: 13px; background: #fff; display: grid; place-items: center; color: var(--accent);
  box-shadow: 0 16px 28px -16px rgba(30, 52, 120, 0.6), 0 2px 6px -2px rgba(30, 52, 120, 0.16); }
.viz-chip svg { width: 24px; height: 24px; }

/* card 3 — build constellation */
.viz-frame--build { padding: 14px; }
.viz-hub, .viz-logo { position: absolute; background: #fff; display: grid; place-items: center; transform: translate(-50%, -50%); }
.viz-hub { z-index: 3; top: 50%; left: 50%; width: 64px; height: 64px; border-radius: 18px; color: var(--accent);
  box-shadow: 0 20px 36px -16px rgba(37, 99, 235, 0.55), 0 3px 8px -3px rgba(30, 52, 120, 0.18); }
.viz-hub svg { width: 30px; height: 30px; }
.viz-logo { z-index: 2; width: 46px; height: 46px; border-radius: 50%; overflow: hidden;
  box-shadow: 0 14px 26px -14px rgba(30, 52, 120, 0.5), 0 2px 6px -2px rgba(30, 52, 120, 0.16); }
.viz-logo svg { width: 25px; height: 25px; }
.viz-logo--tl { top: 24%; left: 24%; }
.viz-logo--tr { top: 24%; left: 76%; }
.viz-logo--bl { top: 76%; left: 24%; }
.viz-logo--br { top: 76%; left: 76%; }

/* problem + process cards now use the shared .case-head / .case-copy treatment */
@media (max-width: 900px) {
  .pain-grid { grid-template-columns: 1fr; }
}

.pivot { margin-top: clamp(48px, 7vh, 76px); display: grid; justify-items: center; text-align: center; }
.pivot p { font-weight: 600; font-size: clamp(24px, 3vw, 42px); letter-spacing: -0.035em; line-height: 1.08; max-width: 26ch; }
.pivot p em { font-style: normal; color: var(--accent); }

/* feature rows — alternating image / text */
.frow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
  margin-top: clamp(44px, 7vh, 80px);
}
.frow .pscene { aspect-ratio: 4 / 3; }
.frow .frow-text { gap: 16px; }
.frow .pcard-title { font-size: clamp(26px, 2.4vw, 38px); line-height: 1.1; }
.frow .pcard-copy { font-size: clamp(17px, 1.3vw, 20px); max-width: 36ch; }
@media (max-width: 760px) {
  .frow { grid-template-columns: 1fr; gap: 24px; }
  .frow .pscene { order: -1; aspect-ratio: 16 / 10; }
}

/* full-width image with text overlaid at the bottom */
.frow--overlay {
  display: block;
  grid-template-columns: none;
}
.frow--overlay .pscene {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
}
.frow--overlay .pscene img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.frow--overlay .pscene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 38%, rgba(10, 10, 13, 0.78) 100%);
  pointer-events: none;
}
.frow--overlay .frow-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: clamp(28px, 4vw, 52px);
  color: #fff;
}
.frow--overlay .frow-text .pcard-title,
.frow--overlay .frow-text .pcard-copy { color: #fff; }
@media (max-width: 760px) {
  .frow--overlay .pscene { aspect-ratio: 4 / 3; }
}

/* feature slideshow — stacked overlay slides */
.fslides { position: relative; margin-top: clamp(44px, 7vh, 80px); }
.fslides-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: #F1F1EF;
}
.fslide {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.fslide.is-prev { opacity: 1; z-index: 1; }
.fslide.is-active { opacity: 1; z-index: 2; pointer-events: auto; }
.fslide .pscene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  cursor: pointer;
}
.fslide .pscene img { width: 100%; height: 100%; object-fit: cover; }
.fslide .pscene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 38%, rgba(10, 10, 13, 0.78) 100%);
  pointer-events: none;
}
.fslide .frow-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: clamp(28px, 4vw, 52px);
  display: grid;
  gap: 16px;
}
.fslide .frow-text .pcard-title { color: #fff; font-size: clamp(26px, 2.4vw, 38px); line-height: 1.1; }
.fslide .frow-text .pcard-copy { color: #fff; font-size: clamp(17px, 1.3vw, 20px); max-width: 36ch; }
.fslides-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.42);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  display: grid;
  place-items: center;
  backdrop-filter: blur(3px);
  box-shadow: none;
  opacity: 0.55;
  transition: opacity 0.2s ease, background 0.2s ease;
}
.fslides-arrow:hover { opacity: 1; background: rgba(255, 255, 255, 0.6); }
.fslides-arrow svg { width: 16px; height: 16px; display: block; }
.fslides-prev { left: clamp(14px, 2vw, 24px); }
.fslides-next { right: clamp(14px, 2vw, 24px); }
.fslides-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(16px, 2.4vw, 24px);
  z-index: 3;
  display: flex;
  gap: 9px;
  justify-content: center;
}
.fdot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  padding: 0;
  background: #fff;
  opacity: 0.4;
  transition: opacity 0.2s ease;
}
.fdot.is-active { opacity: 1; }
@media (max-width: 760px) {
  .fslides-stage { aspect-ratio: 4 / 3; }
  .fslides-arrow { width: 30px; height: 30px; font-size: 16px; }
}

/* ---------- how it works ---------- */

.steps { display: flex; flex-direction: column; gap: clamp(56px, 9vh, 116px); }
.step {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(40px, 6vw, 104px);
  align-items: center;
}
/* default row: text left, visual right */
.step .step-text { order: 0; }
.step .soft-art { order: 1; }
/* middle row flips: text right, visual left */
.step:nth-child(2) { grid-template-columns: 1.18fr 0.82fr; }
.step:nth-child(2) .step-text { order: 1; }
.step:nth-child(2) .soft-art { order: 0; }

/* boxes removed — words sit straight on the background */
.step .soft-art { margin: 0; }
.step .step-text { display: grid; gap: 22px; max-width: 30rem; }
#process .case-head { padding: 0; margin: 0; gap: 16px; align-items: center; }
#process .case-ic svg { width: 38px; height: 38px; }
#process .case-headtext { display: flex; flex-direction: column-reverse; gap: 10px; }
#process .case-what { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; color: var(--accent); }
#process .case-title { font-size: clamp(28px, 3.1vw, 42px); line-height: 1.04; color: var(--ink); }
#process .case-copy { padding: 0; font-size: clamp(16.5px, 1.25vw, 19px); line-height: 1.62; max-width: 40ch; }

@media (max-width: 900px) {
  .steps { gap: 48px; }
  .step, .step:nth-child(2) { grid-template-columns: 1fr; gap: 24px; }
  .step .soft-art, .step:nth-child(2) .soft-art { order: 0; }
  .step .step-text, .step:nth-child(2) .step-text { order: 1; max-width: none; }
  /* normalize step 1 & 2 visuals to read like the build frame: no tilt, filled & centered */
  .step .viz-list,
  .step .viz-opps,
  .step:nth-child(2) .viz-opps {
    width: 100%;
    max-width: 360px;
    transform: none;
  }
}

.mid-cta { margin-top: clamp(44px, 7vh, 68px); display: grid; justify-items: center; text-align: center; }

/* ---------- self selection ---------- */

.selector-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.selector-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(28px, 3.2vw, 46px);
  display: grid;
  gap: 20px;
  align-content: start;
}
.selector-card.is-dark { background: var(--dark); border-color: var(--dark); color: var(--on-dark); }
.selector-card .who { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.selector-card.is-dark .who { color: var(--accent-up); }
.selector-card h3 { font-size: clamp(20px, 2vw, 25px); }
.selector-card ul { list-style: none; display: grid; gap: 12px; }
.selector-card li { display: flex; gap: 12px; font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; }
.selector-card.is-dark li { color: var(--on-dark-dim); }
.selector-card li::before { content: "→"; font-family: var(--mono); color: var(--accent); flex: none; font-size: 12px; line-height: 1.9; }
.selector-card.is-dark li::before { color: var(--accent-up); }
.selector-card .ghost-link { justify-self: start; }
.selector-card.is-dark .ghost-link { color: var(--accent-up); }
@media (max-width: 900px) { .selector-grid { grid-template-columns: 1fr; } }

/* ---------- proof ---------- */

.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.case {
  background: #F2F2F0;
  border: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  border-radius: 24px;
  padding: 16px 16px 28px;
  display: flex;
  flex-direction: column;
  align-content: start;
}
.case-art {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 486 / 300;
  background: #fff;
  margin-bottom: 22px;
}
.case-art img { width: 100%; height: 100%; display: block; object-fit: cover; }
.case-head { display: flex; align-items: center; gap: 13px; padding: 0 8px; margin-bottom: 13px; }
.case-ic { flex: none; color: var(--accent); display: flex; }
.case-ic svg { width: 30px; height: 30px; }
.case-headtext { display: grid; gap: 2px; }
.case-title { font-weight: 700; font-size: clamp(22px, 2vw, 27px); line-height: 1.08; letter-spacing: -0.03em; color: var(--accent); }
.case-what { font-size: 15px; color: var(--muted); }
.case-copy { padding: 0 8px; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
@media (max-width: 900px) { .case-grid { grid-template-columns: 1fr; } }

/* numbers bar */
.numbers {
  margin-top: clamp(44px, 6vh, 68px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
}
.num { padding: clamp(8px, 1.2vw, 16px) 12px; }
.num + .num { border-left: 1px solid var(--line); }
.num .n { font-weight: 700; font-size: clamp(30px, 3.2vw, 48px); line-height: 1; letter-spacing: -0.045em; }
.num .l { margin-top: 10px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.num .src { margin-bottom: 8px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.03em; color: var(--muted); opacity: 0.65; }
@media (max-width: 900px) {
  .numbers {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * clamp(22px, 4.5vw, 56px));
    padding-inline: clamp(22px, 4.5vw, 56px);
    scrollbar-width: none;
  }
  .numbers::-webkit-scrollbar { display: none; }
  .num {
    flex: 0 0 60%;
    scroll-snap-align: center;
    padding: 4px 18px;
  }
  .num + .num { border-left: 1px solid var(--line); }
}

/* quotes */
.quotes { margin-top: clamp(44px, 6vh, 68px); display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.quote {
  background: #F2F2F0;
  border: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  border-radius: 24px;
  padding: clamp(26px, 3vw, 38px);
  display: grid;
  gap: 22px;
  align-content: space-between;
}
.quote blockquote { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.55; color: var(--ink-soft); }
.quote blockquote::before { content: "“"; }
.quote blockquote::after { content: "”"; }
.quote-who { display: flex; align-items: center; gap: 13px; }
.quote-who .qname { font-weight: 600; font-size: 14.5px; line-height: 1.3; }
.quote-who .qtitle { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--muted); }
@media (max-width: 900px) {
  .quotes {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * clamp(22px, 4.5vw, 56px));
    padding-inline: clamp(22px, 4.5vw, 56px);
    scrollbar-width: none;
  }
  .quotes::-webkit-scrollbar { display: none; }
  .quote {
    flex: 0 0 84%;
    scroll-snap-align: center;
  }
}

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

.faq-list { max-width: 800px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 22px;
  padding: 22px 4px;
  font-weight: 600;
  font-size: clamp(17px, 1.7vw, 21px);
  letter-spacing: -0.02em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .faq-i { font-family: var(--mono); font-size: 11px; color: var(--muted); flex: none; min-width: 38px; }
.faq summary .faq-x { margin-left: auto; font-weight: 400; font-size: 20px; color: var(--muted); flex: none; transition: transform 0.25s ease; }
.faq[open] summary .faq-x { transform: rotate(45deg); }
.faq[open] summary { color: var(--accent); }
.faq-a { padding: 0 4px 24px 60px; max-width: 64ch; color: var(--ink-soft); font-size: 15px; }
@media (max-width: 700px) { .faq-a { padding-left: 4px; } }

/* ---------- why it works (differentiator grid) ---------- */

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.6vw, 24px);
}
.why-card {
  position: relative;
  border-radius: 26px;
  padding: clamp(28px, 2.4vw, 38px);
  min-height: clamp(380px, 34vw, 470px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
  isolation: isolate;
}
/* light gray backgrounds */
.why-card--blue,
.why-card--pink,
.why-card--green,
.why-card--amber { background: #F2F2F0; }

.why-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.why-card h3 {
  font-size: clamp(19px, 1.5vw, 24px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: #15171C;
  max-width: 14ch;
}
.why-chev {
  flex: none;
  margin-top: 2px;
  color: #15171C;
  opacity: 0.85;
}
.why-chev svg { display: block; width: clamp(20px, 1.5vw, 24px); height: clamp(20px, 1.5vw, 24px); }
.why-card p {
  color: #3A3D45;
  font-size: 15px;
  line-height: 1.5;
  max-width: 34ch;
  text-wrap: pretty;
}
.why-art { margin-top: auto; padding-top: 18px; }
.why-art svg { display: block; width: 100%; height: auto; }
@media (max-width: 980px) {
  /* swipeable horizontal carousel on mobile/tablet */
  .why-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * clamp(22px, 4.5vw, 56px));
    padding-inline: clamp(22px, 4.5vw, 56px);
    scrollbar-width: none;
  }
  .why-grid::-webkit-scrollbar { display: none; }
  .why-card {
    flex: 0 0 84%;
    scroll-snap-align: center;
  }
}
@media (max-width: 540px) {
  .why-card { min-height: clamp(360px, 90vw, 440px); }
}

/* ---------- final CTA ---------- */

.final { background: var(--dark); color: var(--on-dark); }
.final .kicker { color: var(--on-dark-faint); }
.final .kicker b { color: var(--accent-up); }
.final h2 { color: #fff; }
.final-grid {
  display: grid;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
  padding: clamp(64px, 9vh, 110px) 0;
}
.final-copy { display: grid; gap: 26px; align-content: start; max-width: 760px; }
.final h2 { font-size: clamp(38px, 4.6vw, 72px); }
.final-copy .lede { color: var(--on-dark-dim); }
.founder { display: flex; gap: 16px; align-items: flex-start; border-top: 1px solid rgba(255, 255, 255, 0.14); padding-top: 26px; }
.founder-note { display: grid; gap: 8px; }
.founder-note p { font-size: 15px; line-height: 1.6; color: rgba(244, 244, 242, 0.8); max-width: 44ch; }
.founder-note .sig { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-dark-faint); }

.booking {
  background: var(--card);
  color: var(--ink);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.8);
}
.booking-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.booking-body { min-height: 480px; display: grid; }
.booking-body iframe { width: 100%; height: 620px; border: none; }
.booking-placeholder { display: grid; place-content: center; gap: 16px; text-align: center; padding: 48px 32px; justify-items: center; }
.booking-placeholder .cal-glyph {
  width: 56px; height: 56px;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 18px;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 12px;
}
.booking-placeholder h3 { font-size: 20px; }
.booking-placeholder p { max-width: 40ch; color: var(--muted); font-size: 13.5px; }
@media (max-width: 980px) { .final-grid { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */

.footer { background: var(--dark); color: var(--on-dark-faint); position: relative; }
.footer .wrap {
  padding-top: clamp(56px, 8vh, 96px);
  padding-bottom: clamp(30px, 5vh, 46px);
}
/* clear visual separation from the dark CTA section above */
.footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.16) 22%, rgba(255,255,255,0.16) 78%, transparent);
}

.footer a {
  color: var(--on-dark-dim);
  text-decoration: none;
  font-size: 14px;
  width: fit-content;
  transition: color 0.18s ease;
}
.footer a:hover { color: #fff; }

/* ---- secondary capture (newsletter column, right of nav) ---- */
.foot-capture { display: flex; flex-direction: column; gap: 18px; }
.foot-capture-copy h3 {
  color: #fff;
  font-size: clamp(18px, 1.5vw, 22px);
  margin-top: 0;
  letter-spacing: -0.025em;
  line-height: 1.18;
}
.foot-capture-sub {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--on-dark-dim);
}
.foot-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.foot-form input {
  flex: 1;
  min-width: 180px;
  font-family: var(--sans);
  font-size: 14.5px;
  padding: 13px 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--on-dark);
  outline: none;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.foot-form input::placeholder { color: var(--on-dark-faint); }
.foot-form input:focus { border-color: var(--accent-up); background: rgba(255, 255, 255, 0.07); }
.foot-form .btn-sm { flex: none; }
.foot-form-done {
  flex-basis: 100%;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--accent-up);
  display: none;
}
.foot-form.is-done input,
.foot-form.is-done .btn { display: none; }
.foot-form.is-done .foot-form-done { display: block; }

/* ---- brand + nav grid ---- */
.foot-grid {
  display: grid;
  grid-template-columns: 1.9fr 1fr 1fr;
  gap: clamp(24px, 3.5vw, 56px);
  align-items: start;
}
.foot-brand .fm {
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.04em;
  display: inline-block;
}
.foot-brand p {
  margin-top: 16px;
  max-width: 34ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--on-dark-dim);
}
.foot-contact {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.foot-contact a { font-weight: 500; }
.foot-loc { font-size: 14px; color: var(--on-dark-dim); }
.foot-social {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}
.foot-social a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: var(--on-dark-dim);
  transition: color 0.18s ease, transform 0.18s ease;
}
.foot-social a:hover {
  color: #fff;
  transform: translateY(-2px);
}
.foot-social svg { width: 16px; height: 16px; display: block; }

.foot-col { display: flex; flex-direction: column; gap: 13px; }
.foot-h {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-dark-faint);
  margin-bottom: 4px;
}
.foot-cta-col { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.foot-cta-col .foot-h { margin-bottom: 0; }
.foot-cta-micro {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--on-dark-faint);
}

/* ---- trust & compliance strip ---- */
.foot-trust {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px clamp(18px, 3vw, 34px);
  margin-top: clamp(40px, 6vh, 60px);
  padding-top: clamp(28px, 4vh, 38px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.foot-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-dark-dim);
}
.foot-badge svg { width: 18px; height: 18px; color: var(--accent-up); flex: none; }
.foot-rating {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--on-dark-dim);
}
.foot-stars { color: #F5B544; letter-spacing: 0.08em; font-size: 13px; }

/* ---- base bar ---- */
.foot-base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: clamp(34px, 5vh, 50px);
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
}
.foot-copy { color: var(--on-dark-faint); }
.foot-base-links { display: flex; align-items: center; gap: clamp(16px, 2.5vw, 26px); }
.foot-base-links a { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; }
.foot-top {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--on-dark-dim);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: color 0.18s ease;
}
.foot-top:hover { color: #fff; }

[data-placeholder] { position: relative; }
[data-placeholder]::after { content: none; }
.numbers-src { text-align: center; margin-top: 22px; max-width: 70ch; margin-inline: auto; line-height: 1.6; }

@media (max-width: 980px) {
  .foot-grid {
    grid-template-columns: 1.4fr 1fr 1fr;
    row-gap: clamp(32px, 5vh, 44px);
  }
  .foot-brand { grid-column: 1 / -1; }
  .foot-capture { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-base { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ---------- exit intent ---------- */

.exit-veil {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10, 10, 13, 0.62);
  display: grid; place-items: center; padding: 24px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.exit-veil.is-on { opacity: 1; pointer-events: auto; }
.exit-card {
  background: var(--card);
  border-radius: 18px;
  max-width: 540px; width: 100%;
  padding: clamp(30px, 4vw, 48px);
  display: grid; gap: 16px;
  position: relative;
  transform: translateY(14px);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.exit-veil.is-on .exit-card { transform: translateY(0); }
.exit-close {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: none;
  font-size: 14px;
  cursor: pointer;
  color: var(--muted);
  display: grid; place-items: center;
}
.exit-close:hover { border-color: var(--ink); color: var(--ink); }
.exit-card h3 { font-size: clamp(21px, 2.3vw, 27px); }
.exit-card > p { color: var(--ink-soft); font-size: 14.5px; }
.exit-form { display: flex; gap: 10px; }
.exit-form input {
  flex: 1;
  font-family: var(--sans);
  font-size: 14.5px;
  padding: 13px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
  outline: none;
}
.exit-form input:focus { border-color: var(--accent); }
.exit-done { font-family: var(--mono); font-size: 12.5px; color: var(--accent); }
@media (max-width: 600px) { .exit-form { flex-direction: column; } }

/* ---------- reveal motion ---------- */

/* ---------- card hover: gentle colour shift, no outline ---------- */
.pain, .step, .case, .selector-card {
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.selector-card:not(.is-dark):hover {
  background: color-mix(in srgb, var(--accent) 6%, #fff);
  border-color: color-mix(in srgb, var(--accent) 24%, var(--line));
  box-shadow: 0 18px 36px -26px color-mix(in srgb, var(--accent) 50%, transparent);
}
.pain:hover, .case:hover {
  background: #fff;
  border-color: color-mix(in srgb, var(--line) 90%, transparent);
  transform: translateY(-3px);
  box-shadow: 0 26px 50px -32px rgba(20, 20, 25, 0.45);
}
.selector-card.is-dark:hover {
  background: color-mix(in srgb, var(--dark) 88%, #fff);
  border-color: color-mix(in srgb, var(--dark) 88%, #fff);
}

@media (prefers-reduced-motion: no-preference) {
  body.motion [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.65s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.65s cubic-bezier(0.2, 0.7, 0.2, 1), background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    transition-delay: var(--rd, 0s);
  }
  body.motion [data-reveal].is-in { opacity: 1; transform: none; }
}
body.no-motion [data-reveal] { opacity: 1 !important; transform: none !important; }

/* Environments with frozen CSS transitions: disable all transitions so class
   toggles (sticky bar, exit veil) apply instantly. Set by JS watchdog. */
body.css-frozen *, body.css-frozen *::before, body.css-frozen *::after { transition: none !important; }

@media (max-width: 600px) {
  .btn { width: 100%; }
  .stickybar .btn, .topbar .btn { width: auto; }
  .hero-ctas { gap: 14px; }
}