/* =========================================================================
   SELF-HOSTED TYPE
   Google Fonts was the site's only external request and it blocked render.
   These are the latin subsets of the variable faces, served from our own
   origin — which also lets the CSP drop fonts.googleapis.com / gstatic
   entirely. 109 KB total, cached for a year by the asset layer.

   Outfit carries the display voice. It is the same geometric skeleton as
   Fredoka with the rounded terminals taken off: the brand keeps its circular
   bones, the headlines stop reading as a consumer app. Fredoka survives for
   the wordmark alone, so the logo still belongs to the page.
   ========================================================================= */
@font-face {
  font-family: "Outfit";
  src: url("/fonts/outfit-var-latin.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-var-latin.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fredoka";
  src: url("/fonts/fredoka-var-latin.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================================
   Vectrapex — landing page styles
   Visual language from DESIGN-TOKENS.md (AIXOR template, look & feel only).
   ========================================================================= */

/* ----------------------------- Design tokens ----------------------------- */
:root {
  /* Color */
  --bg:          #000000;
  --surface:     #1A1A1A;
  --surface-2:   #3B3B3B;
  --text:        #FFFFFF;
  --text-dim:    #D6DAE2;   /* body copy — bright cool grey, high contrast on black */
  --text-soft:   #AEB4BF;   /* genuinely tertiary meta (copyright, notes) */
  --text-muted:  #666666;   /* GHOST HEADINGS ONLY — never small body copy */
  --border:      rgba(255,255,255,0.10);
  --border-2:    rgba(255,255,255,0.16);

  /* One brand accent — used as sparingly as AIXOR used its red. Calm, not "creative studio". */
  --accent:      #8189F2;
  --accent-dim:  rgba(129,137,242,0.14);
  --accent-headline: #A5ABF7;  /* resting colour of the italic accent word (headline) */
  --accent-sheen:    #FFFFFF;  /* crisp highlight that sweeps across it once + on hover */

  /* Type — brand identity: one rounded geometric family. Fredoka carries the
     display voice (headings, wordmark, accent words); Nunito handles body/UI. */
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Outfit", "Inter", system-ui, sans-serif;
  --wordmark: "Fredoka", "Outfit", system-ui, sans-serif;

  /* Radius */
  --r-pill: 999px;
  --r-chip: 10px;
  --r-card: 16px;
  --r-card-lg: 20px;
  --r-block: 40px;

  /* Rhythm */
  --container: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
  --section-y: clamp(72px, 11vw, 160px);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.7s;

  /* Premium surface kit — a top "edge light", a top-down sheen, layered soft
     shadows and an accent glow. Reused across every card/panel for a consistent,
     Apple/Framer-grade finish. */
  --sheen:        linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 44%);
  --sheen-hover:  linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 44%);
  --edge-light:   inset 0 1px 0 rgba(255,255,255,0.07);
  --edge-light-2: inset 0 1px 0 rgba(255,255,255,0.11);
  --shadow-1:     0 1px 2px rgba(0,0,0,0.4), 0 16px 40px -24px rgba(0,0,0,0.7);
  --shadow-hover: 0 2px 6px rgba(0,0,0,0.45), 0 34px 74px -34px rgba(0,0,0,0.85);
  --glow-accent:  0 0 0 1px rgba(129,137,242,0.16), 0 28px 74px -36px rgba(129,137,242,0.5);

  /* DELIBERATE EXCEPTION — founder photos only.
     --glow-accent above is the site-wide hover treatment: a periwinkle drop
     shadow offset 28px down. It reads as depth, not light. The founder cards
     are the one element that leaves the site (to LinkedIn) and the page's only
     human trust moment, so they get an actual halo: no vertical offset, two
     blur radii for a real falloff, and the lighter #A5ABF7 because emitted
     light is brighter than its source. Kept under-strength on purpose — a
     coloured ring around a face tips into novelty very quickly.
     Do not roll this out to other components; the rest of the site shares one
     hover language and should keep it. */
  --glow-founder:
    0 0 0 1px rgba(165,171,247,0.28),
    0 0 22px -2px rgba(165,171,247,0.30),
    0 0 58px -8px rgba(165,171,247,0.22),
    0 12px 30px -14px rgba(0,0,0,0.65);
}

/* ----------------------------- Reset / base ----------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Kill the default grey mobile tap-flash — our :active press states (§1) are
     the intentional, instant feedback instead. */
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: 0;            /* body sits near 0 (§15); large display tightens below */
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
/* Accent word — same rounded display face as the heading, coloured periwinkle
   (the deck's device; replaces the old serif-italic treatment). */
em { font-family: var(--display); font-style: normal; font-weight: inherit; color: var(--accent-headline); }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ol, ul { margin: 0; padding: 0; list-style: none; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Visible keyboard focus everywhere */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 16px; top: -60px;
  background: var(--text);
  color: var(--bg);
  padding: 10px 16px;
  border-radius: var(--r-pill);
  font-weight: 600;
  z-index: 200;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 16px; }

/* ----------------------------- Shared type ----------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: clamp(20px, 3vw, 34px);
}
/* Equalizer glyph device (from the brand deck) — small periwinkle bars. */
.barcode {
  width: 22px; height: 14px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14'%3E%3Cg fill='%238189F2'%3E%3Crect x='0' y='8' width='2.6' height='6' rx='1'/%3E%3Crect x='4.4' y='3' width='2.6' height='11' rx='1'/%3E%3Crect x='8.8' y='0' width='2.6' height='14' rx='1'/%3E%3Crect x='13.2' y='5' width='2.6' height='9' rx='1'/%3E%3Crect x='17.6' y='9' width='2.6' height='5' rx='1'/%3E%3C/g%3E%3C/svg%3E");
}

.h2 {
  font-size: clamp(30px, 4.4vw, 56px);
  font-weight: 600;
  letter-spacing: -0.015em;
  max-width: 18ch;
}
.h3 { font-size: clamp(20px, 2.4vw, 24px); font-weight: 600; }

.section-lead {
  font-size: clamp(17px, 1.6vw, 20px);
  color: var(--text-dim);
  max-width: 60ch;
  margin-top: 20px;
  line-height: 1.6;
}

.section { padding-block: var(--section-y); position: relative; }

/* ----------------------------- Buttons / links ----------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

/* Outline pill — transparent fill, hairline border, animated ↗ */
.btn--pill {
  padding: 14px 24px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  color: var(--text);
  box-shadow: var(--edge-light);
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease),
              transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.btn--pill:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.15), rgba(255,255,255,0.05));
  border-color: rgba(255,255,255,0.45);
  transform: translateY(-1px);
  box-shadow: var(--edge-light-2), 0 12px 26px -14px rgba(0,0,0,0.75);
}
.btn--lg { padding: 17px 30px; font-size: 16px; }

.arrow {
  display: inline-block;
  transition: transform 0.35s var(--ease);
}
.btn:hover .arrow { transform: translate(3px, -3px); }

.link-underline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-dim);
  font-weight: 500;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--border-2);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.link-underline:hover { color: var(--text); border-color: var(--text); }

/* Tags / chips */
.tag {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text);
}

/* Roman-numeral index device */
.num {
  font-family: var(--sans);
  font-weight: 500;
  color: var(--text-dim);
}

/* ----------------------------- Ghost heading device ----------------------------- */
.ghost-word,
.ghost-wordmark {
  color: var(--text-muted);            /* #666 on #000 — decorative only */
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.02em;
  pointer-events: none;
  user-select: none;
}
.ghost-word {
  position: absolute;
  top: clamp(24px, 5vw, 60px);
  left: var(--gutter);
  font-size: clamp(64px, 12vw, 150px);
}
.ghost-word em { color: var(--text-muted); }

/* =========================================================================
   1. NAVBAR
   ========================================================================= */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), backdrop-filter 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(14px);
  border-bottom-color: transparent;
}
/* Scroll-edge material (§12) — a soft gradient where content passes under the
   floating nav, instead of a hard 1px divider. */
.nav::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 26px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0));
  transition: opacity 0.4s var(--ease);
}
.nav.is-stuck::after { opacity: 1; }
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 74px;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--wordmark);
  font-weight: 600;
  font-size: 21px;
  letter-spacing: -0.01em;
}
/* Brand mark — the two-peak mountain logo. */
.wordmark__mark {
  width: 30px;
  height: 22px;
  flex: none;
  display: block;
}
.wordmark__ai { color: var(--accent); }
.nav__links { display: flex; gap: 34px; }
.nav__links a {
  color: var(--text-dim);
  font-weight: 500;
  font-size: 15px;
  transition: color 0.25s var(--ease);
}
.nav__links a:hover { color: var(--text); }
.nav__actions { display: flex; align-items: center; gap: 14px; }

.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--border-2);
  border-radius: var(--r-pill);
  cursor: pointer;
}
.nav__toggle span {
  display: block;
  width: 18px; height: 1.5px;
  margin-inline: auto;
  background: var(--text);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }

/* ---- Mobile menu = a dismissible sheet (apple-design §3/§7/§12) ---------
   Translucent material anchored to the top nav; a scrim dims the page behind
   it. JS springs it in/out and lets you drag it up to dismiss. ------------ */
.nav__scrim {
  position: fixed; inset: 0;
  z-index: 80;
  background: rgba(0,0,0,0.55);
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}
.nav__scrim.is-active { pointer-events: auto; }

.nav__mobile[hidden] { display: none; }
.nav__mobile {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px var(--gutter) 28px;
  padding-top: calc(74px + 8px);          /* clear the sticky nav */
  background: rgba(9,9,14,0.8);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
          backdrop-filter: blur(22px) saturate(150%);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 40px 70px -34px rgba(0,0,0,0.9);
  transform: translateY(-110%);
  visibility: hidden;
  will-change: transform;
  touch-action: none;                      /* we own the vertical drag */
}
.nav__grip {
  align-self: center;
  width: 42px; height: 4px; border-radius: 99px;
  background: var(--border-2);
  margin: 0 0 10px;
}
.nav__mobile a {
  padding: 15px 4px;
  font-size: 17px;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
}
.nav__mobile a.btn { justify-content: center; margin-top: 16px; border-bottom: 1px solid var(--border-2); color: var(--text); }

/* =========================================================================
   2. HERO
   ========================================================================= */
.hero {
  position: relative;
  min-height: min(88vh, 820px);
  display: flex;
  align-items: center;
  /* Trimmed from 14vh/180px. The hero measured 1,522px tall, which pushed the
     mockup's top edge to 904px — just under a 900px laptop fold, so the first
     scroll revealed empty black. Now the window peeks above the fold instead. */
  padding-block: clamp(56px, 8vh, 104px);
  overflow: hidden;
}
.hero__inner { position: relative; z-index: 2; }
.hero__title {
  font-size: clamp(38px, 6.2vw, 82px);
  font-weight: 560;
  letter-spacing: -0.025em;   /* largest display → most negative tracking (§15) */
  line-height: 1.02;          /* tight leading tracks size inversely (§15) */
  max-width: 16ch;
  margin-block: 6px 28px;
}
.hero__title em { color: var(--text); }
.hero__sub {
  font-size: clamp(17px, 1.9vw, 21px);
  color: var(--text-dim);
  max-width: 54ch;
  margin-bottom: 32px;
}
.hero__cta { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }

/* Rotating hero headline: animated words + accent sheen + cursor parallax.
   (Structure is built by script.js from public/headings.js.)
   JS reserves the tallest headline's height as min-height; anchoring the text to
   the bottom keeps it hugging the subheading so nothing below ever shifts. */
.hero__title { display: flex; flex-direction: column; justify-content: flex-end; }
.hero__title .hw-line { display: block; }
.hero__title .hw-word { display: inline-block; transition: transform 0.35s var(--ease); }
.hero__title .hw-ink  { display: inline-block; }

/* Hidden start state — applied only while JS is animating (class .hw-anim). */
.js .hero__title.hw-anim .hw-ink {
  opacity: 0;
  transform: translateY(0.72em);
  filter: blur(10px);
}
.js .hero__title.hw-anim.is-shown .hw-ink {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition: opacity 0.7s var(--ease), transform 0.9s var(--ease), filter 0.7s var(--ease);
  transition-delay: calc(var(--i, 0) * 55ms);
}

/* Accent word — Arapey italic in the brand accent (visible, on-brand), with a
   one-time light sweep of the accent hue and a subtle brighten on hover.
   `color: var(--accent)` is the fallback for browsers without text-clip. */
.hero__title .hw-accent .hw-ink {
  color: var(--accent-headline);
  background-image: linear-gradient(100deg, var(--accent-headline) 0 42%, var(--accent-sheen) 50%, var(--accent-headline) 58% 100%);
  background-size: 260% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background-position 0.6s var(--ease);
}
.hero__title.is-shown .hw-accent .hw-ink {
  animation: hw-sheen 1.15s var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 55ms + 0.45s);
}
.hero__title .hw-accent:hover .hw-ink { background-position: 46% 0; }
@keyframes hw-sheen { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* Calm on-brand background: two slow-drifting gradient orbs + grain. No chrome/3D. */
.hero__bg { position: absolute; inset: 0; z-index: 1; }
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
}
.orb--1 {
  width: 46vw; height: 46vw;
  max-width: 640px; max-height: 640px;
  right: -8vw; top: -10vw;
  background: radial-gradient(circle at 30% 30%, rgba(129,137,242,0.5), rgba(129,137,242,0) 62%);
  animation: drift1 22s var(--ease) infinite alternate;
}
.orb--2 {
  width: 40vw; height: 40vw;
  max-width: 560px; max-height: 560px;
  right: 8vw; top: 14vw;
  background: radial-gradient(circle at 60% 40%, rgba(255,255,255,0.14), rgba(255,255,255,0) 60%);
  animation: drift2 26s var(--ease) infinite alternate;
}
/* Ambient morphing 3D orb. Sits to the right of the headline, behind the text
   (hero__inner is z-index 2). The source is pure black on black like the page,
   and a radial mask feathers the square video edges so it melts into #000 with
   no visible box. Bleeds off the right edge; .hero has overflow:hidden. */
.hero__orb {
  position: absolute;
  top: clamp(230px, 41vh, 430px);   /* sit beside the headline, not the middle of the tall hero */
  right: -6vw;
  translate: 0 -50%;
  width: min(52vw, 640px);
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  opacity: 0.9;
  pointer-events: none;
  /* The orb video is baked in the old cornflower blue; nudge its hue toward the
     brand periwinkle (#8189F2) so it matches the CSS accent. */
  filter: hue-rotate(14deg) saturate(1.05);
  -webkit-mask-image: radial-gradient(circle at 52% 50%, #000 54%, transparent 74%);
  mask-image: radial-gradient(circle at 52% 50%, #000 54%, transparent 74%);
}

.grain {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 3px 3px;
  mask-image: linear-gradient(to bottom, #000, transparent 85%);
}
@keyframes drift1 { to { transform: translate(-6%, 5%) scale(1.08); } }
@keyframes drift2 { to { transform: translate(5%, -4%) scale(0.94); } }

/* status pill, top-left, like a live-recording badge */
.demo__status {
  position: absolute; top: 20px; left: 22px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  border: 1px solid var(--border-2);
  border-radius: 999px;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
}

/* =========================================================================
   5. SOLUTIONS  /  6. BENEFITS  (cards)
   ========================================================================= */
.cards {
  display: grid;
  gap: clamp(16px, 2vw, 22px);
  margin-top: clamp(36px, 5vw, 56px);
}
.cards--4 { grid-template-columns: repeat(4, 1fr); }
.cards--3 { grid-template-columns: repeat(3, 1fr); }

.card {
  padding: clamp(24px, 2.6vw, 34px);
  border-radius: var(--r-card-lg);
  border: 1px solid var(--border);
  background: var(--sheen), var(--surface);
  box-shadow: var(--edge-light), var(--shadow-1);
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease),
              box-shadow 0.5s var(--ease), background 0.5s var(--ease);
  min-height: 220px;
  display: flex;
  flex-direction: column;
}
.card:hover {
  transform: translateY(-5px);
  border-color: var(--border-2);
  background: var(--sheen-hover), var(--surface-2);
  box-shadow: var(--edge-light-2), var(--shadow-hover), var(--glow-accent);
}
.card__title {
  font-size: clamp(19px, 2vw, 22px);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 24px 0 10px;
  text-wrap: balance;
}
.card__body { color: var(--text-dim); font-size: 16.5px; line-height: 1.62; }

/* =========================================================================
   7. HOW IT WORKS
   ========================================================================= */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 22px);
  margin-top: clamp(36px, 5vw, 56px);
}
.step {
  padding: clamp(26px, 3vw, 38px);
  border-radius: var(--r-card-lg);
  border: 1px solid var(--border);
  background: var(--sheen), var(--surface);
  box-shadow: var(--edge-light), var(--shadow-1);
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.step:hover {
  transform: translateY(-5px);
  border-color: var(--border-2);
  box-shadow: var(--edge-light-2), var(--shadow-hover), var(--glow-accent);
}
.num--step { font-size: clamp(30px, 4vw, 46px); color: var(--text-muted); display: block; }
.step__title { margin: 20px 0 12px; font-size: clamp(20px, 2.2vw, 26px); }
.step__body { color: var(--text-dim); }
.step__note { color: var(--accent); }
.how__note {
  margin-top: clamp(28px, 4vw, 40px);
  font-size: clamp(16px, 1.7vw, 20px);
  color: var(--text-dim);
}

/* ----------------------------- Security / data trust ----------------------------- */
/* Eight commitments as a two-column editorial index — the roman-numeral device
   again, but as rules rather than steps, so it reads as a plain-spoken list. */
.trust__list {
  list-style: none;
  margin: clamp(34px, 5vw, 54px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(32px, 5vw, 72px);
}
.trust__item {
  display: flex;
  gap: 16px;
  padding: clamp(20px, 2.4vw, 26px) 0;
  border-top: 1px solid var(--border);
}
.num--trust { flex: none; min-width: 3.6ch; font-size: 15px; padding-top: 3px; }
.trust__text { min-width: 0; }
.trust__title {
  margin: 0 0 8px;
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.3;
}
.trust__body { margin: 0; color: var(--text-dim); font-size: 16px; line-height: 1.62; }

.trust__note {
  margin-top: clamp(28px, 4vw, 40px);
  padding-top: clamp(20px, 2.6vw, 28px);
  border-top: 1px solid var(--border);
  max-width: 72ch;
  color: var(--text-soft);
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.62;
}
/* Inside the merged low-risk card, left-align the pricing content. */
.lowrisk__proof .pricing__amount--text { text-align: left; }

/* =========================================================================
   HUMAN-IN-THE-LOOP card (bento) — an approval mockup: the agent pauses for
   your sign-off before a costly action.
   ========================================================================= */
.hitl { display: flex; flex-direction: column; gap: 14px; width: 100%; justify-content: center; }
.hitl__head { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--text-dim); }
.hitl__spark {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-dim); border: 1px solid rgba(129,137,242,0.35);
  color: var(--accent-headline);
}
.hitl__spark svg { width: 14px; height: 14px; }
.hitl__task {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(129,137,242,0.06), transparent 60%), var(--surface);
  box-shadow: var(--edge-light);
}
.hitl__label { font-size: 14px; color: var(--text-dim); }
.hitl__val { font-size: 14px; font-weight: 600; color: var(--text); }
.hitl__actions { display: flex; gap: 10px; }
.hitl__btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 10px;
  font-size: 13px; font-weight: 700;
  border: 1px solid var(--border-2); color: var(--text-dim);
}
.hitl__btn svg { width: 15px; height: 15px; }
.hitl__btn--approve {
  background: var(--accent); color: #08122e; border-color: transparent;
  box-shadow: 0 0 20px -6px rgba(129,137,242,0.75);
}

/* =========================================================================
   10. FINAL CTA + FORM
   ========================================================================= */
.contact { padding-top: clamp(140px, 20vw, 260px); }
.contact__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.contact__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: 30px;
  color: var(--text-dim);
  font-size: 14.5px;
}
.contact__trust li { display: flex; align-items: center; gap: 9px; }
.contact__trust li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

.form {
  padding: clamp(26px, 3vw, 40px);
  border-radius: var(--r-block);
  border: 1px solid var(--border);
  background: var(--sheen), var(--surface);
  box-shadow: var(--edge-light), var(--shadow-1);
  display: grid;
  gap: 20px;
}
.form__honeypot {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}
.field { display: grid; gap: 9px; }
.field label { font-size: 14px; font-weight: 600; color: var(--text-dim); letter-spacing: 0.01em; }
.field input,
.field textarea {
  width: 100%;
  padding: 15px 16px;
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--border-2);
  border-radius: 12px;
  color: var(--text);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.field input::placeholder,
.field textarea::placeholder { color: #8a90a0; }
.field input:focus,
.field textarea:focus {
  border-color: var(--accent);
  background: rgba(129,137,242,0.07);
  outline: none;
  box-shadow: 0 0 0 3px rgba(129,137,242,0.18), inset 0 1px 0 rgba(255,255,255,0.05);
}
.field textarea { resize: vertical; min-height: 110px; }
.field--invalid input,
.field--invalid textarea { border-color: #ff6b6b; }
.field__error { color: #ff8f8f; font-size: 13px; min-height: 1em; }
.form__status {
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14.5px;
  border: 1px solid var(--border);
}
.form__status[data-kind="ok"] { border-color: rgba(129,137,242,0.5); color: var(--text); background: var(--accent-dim); }
.form__status[data-kind="err"] { border-color: #ff6b6b; color: #ffbcbc; }
.form__note { color: var(--text-soft); font-size: 14px; }
.btn--solidfocus { justify-content: center; }

/* =========================================================================
   11. FAQ
   ========================================================================= */
/* ---- FAQ: rounded cards with a spring-animated expand + a +/- icon that
   morphs with a little overshoot. JS (script.js) drives the height; the icon
   and open-appearance are pure CSS driven by .is-open (JS) or [open] (no-JS). */
.faq__list { margin-top: clamp(36px, 5vw, 56px); display: flex; flex-direction: column; gap: 10px; }
.faq__item {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--sheen), var(--surface);
  box-shadow: var(--edge-light);
  overflow: hidden;
  transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.faq__item.is-open,
html:not(.js) .faq__item[open] {
  border-color: var(--border-2);
  box-shadow: var(--edge-light-2), 0 22px 55px -32px rgba(129,137,242,0.4);
}
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  cursor: pointer;
  font-family: var(--display);
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-dim);
  list-style: none;
  transition: color 0.25s var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover,
.faq__item.is-open summary,
html:not(.js) .faq__item[open] summary { color: var(--text); }

/* +/- icon: two bars in a circle. Vertical bar collapses to make a "-", and the
   whole circle rotates with a spring-y overshoot ease. */
.faq__icon {
  position: relative; flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-2);
  transition: transform 0.5s cubic-bezier(0.34, 1.4, 0.5, 1),
              border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.faq__icon i {
  position: absolute; width: 14px; height: 2px; border-radius: 2px;
  background: var(--text-dim);
  transition: transform 0.5s cubic-bezier(0.34, 1.4, 0.5, 1), background 0.3s var(--ease);
}
.faq__icon i:nth-child(2) { transform: rotate(90deg); }        /* completes the "+" */
.faq__item.is-open .faq__icon,
html:not(.js) .faq__item[open] .faq__icon {
  transform: rotate(180deg);
  border-color: rgba(129,137,242,0.5);
  background: var(--accent-dim);
}
.faq__item.is-open .faq__icon i,
html:not(.js) .faq__item[open] .faq__icon i { background: var(--accent-headline); }
.faq__item.is-open .faq__icon i:nth-child(2),
html:not(.js) .faq__item[open] .faq__icon i:nth-child(2) { transform: rotate(90deg) scaleX(0); }

.faq__answer { overflow: hidden; }                               /* JS animates the height */
.faq__answer-inner { padding: 2px 24px 24px; max-width: 72ch; }
.faq__answer p { color: var(--text-dim); font-size: 17px; line-height: 1.62; }

/* =========================================================================
   12. FOOTER
   ========================================================================= */
.footer { border-top: 1px solid var(--border); padding-top: clamp(56px, 8vw, 96px); position: relative; overflow: hidden; }
.footer__inner {
  display: grid;
  grid-template-columns: 1.3fr 2fr;
  gap: clamp(36px, 5vw, 72px);
}
.footer__tagline { color: var(--text-dim); max-width: 34ch; margin: 18px 0 22px; }
.footer__trust { display: grid; gap: 8px; color: var(--text-dim); font-size: 14px; }
.footer__trust li { display: flex; align-items: center; gap: 9px; }
.footer__trust li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

.footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.footer__col { display: grid; gap: 12px; align-content: start; }
.footer__h { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); font-weight: 600; margin-bottom: 4px; }
.footer__col a { color: var(--text-dim); font-size: 15px; transition: color 0.25s var(--ease); width: fit-content; }
.footer__col a:hover { color: var(--text); }

.footer__bottom {
  position: relative;
  margin-top: clamp(48px, 7vw, 90px);
  padding-top: 28px;
  border-top: 1px solid var(--border);
  min-height: clamp(90px, 12vw, 160px);
  display: flex;
  align-items: flex-end;
}
.ghost-wordmark {
  position: absolute;
  left: 0; bottom: -0.12em;
  font-size: clamp(64px, 15vw, 200px);
  white-space: nowrap;
}
.footer__copy { position: relative; z-index: 1; color: var(--text-soft); font-size: 14px; padding-bottom: 26px; }

/* Placeholder markers (unfilled [BRACKET] items) — visibly incomplete, never look shipped */
[data-placeholder],
[data-placeholder-link] {
  color: var(--accent) !important;
  border-bottom: 1px dashed rgba(129,137,242,0.5);
}

/* =========================================================================
   MOTION — scroll reveals + scroll-linked text fill
   ========================================================================= */
.reveal {
  /* Only transform + opacity animate — both composite on the GPU (§11). No
     filter:blur here; animating blur forces a per-element repaint = scroll jank. */
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
/* Only hide reveals when JS is present to reveal them again — no-JS visitors see all content. */
.js .reveal { opacity: 0; transform: translateY(26px) scale(0.985); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* Scroll-linked word/line text-fill: starts grey (#666), fills to white as it passes through. */
/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 960px) {
  .cards--4 { grid-template-columns: repeat(2, 1fr); }
  .footer__cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .nav__links { display: none; }
  .nav__actions .btn--pill { display: none; }
  .nav__toggle { display: flex; }
  .oldnew__grid,
  .cards--3,
  .steps,
  .lowrisk__inner,
  .trust__list,
  .contact__inner { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr; }
  /* Text goes full-width here — push the orb further off-screen and fade it so
     its bright highlights never sit behind reading copy. */
  .hero__orb { width: min(84vw, 480px); right: -22vw; top: 24vh; opacity: 0.5; }
}
@media (max-width: 520px) {
  .cards--4 { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: 1fr; }
  .hero__cta { gap: 18px; }
  .hero { min-height: auto; }
  .hero__orb { opacity: 0.42; }
}

/* =========================================================================
   REDUCED MOTION — reveals appear instantly, continuous motion stops
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal, .js .reveal { opacity: 1; transform: none; filter: none; }
  .orb { animation: none; }
  }

/* =========================================================================
   APPLE-FEEL PASS (Tier 1) — instant press feedback (§1) plus the reduced-
   transparency and increased-contrast accessibility signals (§14).
   ========================================================================= */

/* §1 Response — feedback on pointer-DOWN, instant. Press-in is fast (~90ms);
   release eases back via each element's own transition. */
.btn:active { transform: scale(0.965); transition-duration: 0.09s; }
.nav__toggle:active { transform: scale(0.92); }
.faq__item summary:active { transform: scale(0.992); }
.tag:active { transform: scale(0.96); }
.nav__links a:active,
.nav__mobile a:active,
.footer__cols a:active,
.footer__brand a:active,
.link-underline:active,
.wordmark:active { opacity: 0.6; }

/* Promote the layers that lift on hover only while motion is imminent (§11). */
.card:hover, .step:hover, .bento__card:hover { will-change: transform; }

/* §14 Reduced transparency — make translucent materials solid/frosty. */
@media (prefers-reduced-transparency: reduce) {
  .nav.is-stuck { background: #08080c; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .card, .step, .bento__card, .bento__visual,
  .composer__card, .composer__window, .form {
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
  .card, .step { background: var(--surface); }
}

/* §14 Increased contrast — stronger borders + brighter secondary text. */
@media (prefers-contrast: more) {
  :root {
    --border:   rgba(255,255,255,0.30);
    --border-2: rgba(255,255,255,0.44);
    --text-dim: #E6E9EF;
    --text-soft: #C2C7D0;
  }
  .card, .step, .bento__card, .flow__stage,
  .form, .pricing__card, .composer__window { border-color: rgba(255,255,255,0.42); }
}

/* =========================================================================
   INTEGRATIONS MARQUEE — auto-scrolling logo/trust strip under the hero.
   Two identical groups slide left as one; translateX(-50%) lands the 2nd
   group exactly where the 1st began, so the loop is seamless. Speed is
   set once via --marquee-duration (lower = faster).
   ========================================================================= */
.marquee {
  --marquee-duration: 34s;           /* tweak this to change the scroll speed */
  padding-block: clamp(40px, 6vw, 68px);
  border-block: 1px solid var(--border);
  overflow: hidden;
}
/* Real brand marks: monochrome, sized uniformly, inherit the item colour. */
.marquee__item svg { height: clamp(22px, 2.6vw, 30px); width: auto; display: block; }

/* =========================================================================
   CARD ICONS — small line-icon chip that anchors each Solutions/Benefit card,
   sitting on a row with the roman-numeral index.
   ========================================================================= */
.card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: auto;   /* pushes title + body to the bottom of the card */
}
.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 13px;
  border: 1px solid rgba(129,137,242,0.28);
  background: linear-gradient(180deg, rgba(129,137,242,0.22), rgba(129,137,242,0.06));
  color: var(--accent-headline);
  box-shadow: var(--edge-light), 0 8px 18px -10px rgba(129,137,242,0.5);
  transition: transform 0.45s var(--ease), border-color 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.card__icon svg { width: 24px; height: 24px; }
.card:hover .card__icon {
  transform: translateY(-2px);
  border-color: rgba(129,137,242,0.55);
  box-shadow: var(--edge-light-2), 0 14px 26px -10px rgba(129,137,242,0.7);
}

/* =========================================================================
   WORKFLOW DIAGRAM — "one agent, wired across your tools". Three stages joined
   by arrows; the middle (agent) stage is accent-lit. Stacks on narrow screens
   with the arrows rotated to point downward.
   ========================================================================= */
.flow__diagram {
  display: flex;
  align-items: stretch;
  gap: clamp(10px, 1.4vw, 18px);
  margin-top: clamp(36px, 5vw, 56px);
}
.flow__stage {
  flex: 1;
  padding: clamp(22px, 2.4vw, 30px);
  border-radius: var(--r-card-lg);
  border: 1px solid var(--border);
  background: var(--sheen), var(--surface);
  box-shadow: var(--edge-light), var(--shadow-1);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.flow__stage--agent {
  border-color: var(--accent);
  background:
    linear-gradient(180deg, rgba(129,137,242,0.12), rgba(129,137,242,0.02) 55%),
    var(--surface);
  box-shadow: var(--edge-light-2), 0 0 0 1px rgba(129,137,242,0.18), 0 24px 64px -30px rgba(129,137,242,0.6);
  position: relative;
}
.flow__orb {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #CBCEF9 0%, #A5ABF7 26%, #8189F2 52%, #24284d 100%);
  box-shadow: 0 0 26px -4px rgba(129,137,242,0.7);
}
.flow__kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.flow__stage--agent .flow__kicker { color: var(--accent-headline); }
.flow__agentdesc { color: var(--text-dim); font-size: 16px; line-height: 1.55; }
.flow__chips { display: flex; flex-direction: column; gap: 10px; margin-top: 2px; }
.flow__chips li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--r-chip);
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
  font-size: 15.5px;
  color: var(--text-dim);
}
.flow__chips--actions li { color: var(--text); }
.flow__chips svg { width: 17px; height: 17px; flex: none; color: var(--accent); }
.flow__hitl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding: 8px 12px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(129,137,242,0.35);
  background: var(--accent-dim);
  color: var(--accent-headline);
  font-size: 13px;
  font-weight: 600;
  align-self: flex-start;
}
.flow__hitl svg { width: 15px; height: 15px; flex: none; }
.flow__arrow {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-soft);
}
.flow__arrow svg { width: 26px; height: 26px; }

@media (max-width: 820px) {
  .flow__diagram { flex-direction: column; }
  .flow__arrow { padding: 4px 0; }
  .flow__arrow svg { transform: rotate(90deg); }   /* point downward when stacked */
  .flow__hitl { align-self: stretch; justify-content: center; }
}

/* =========================================================================
   HERO COMPOSER — decorative "AI agent" mockup that sits BELOW the headline.
   A macOS-style app window with a sidebar + main pane, and the composer card
   overhanging its top edge. Core idea adapted from the reference template;
   recoloured to our accent (no orange). The ambient orb is untouched behind it.
   ========================================================================= */
.hero__inner { display: block; }   /* headline block, then the composer below */

/* Primary CTA glow ring — the reference's "glowing ring", in our blue. */
.btn--glow {
  border-color: rgba(129,137,242,0.5);
  box-shadow: 0 0 0 1px rgba(129,137,242,0.35), 0 0 34px -6px rgba(129,137,242,0.55);
}
.btn--glow:hover {
  box-shadow: 0 0 0 1px rgba(129,137,242,0.6), 0 0 44px -4px rgba(129,137,242,0.8);
}

.hero__composer {
  position: relative;
  z-index: 2;
  left: 50%;                                     /* break out of the 1200px container and */
  width: min(1600px, 70vw);                      /* centre on the viewport. Window = ~70%  */
  margin-left: calc(min(1600px, 70vw) / -2);     /* of the screen (capped on ultrawide).   */
  margin-top: clamp(32px, 4vw, 60px);
  padding-top: 34px;                             /* headroom for the card overhang */
  /* Purely decorative (aria-hidden): don't let clicks or text-selection engage
     the fake chat input — that's what surfaced a stray blinking caret. */
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

/* macOS-style window behind the card. No drop shadow, and the bottom is masked
   to transparent so the panel dissolves into the page instead of reading as a
   separate box — the border, sidebar and edges all fade out downward. */
.composer__window {
  position: relative;
  border: 1px solid var(--border-2);
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, #0d0d14 0%, #0a0a12 45%, #050508 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 98%);
          mask-image: linear-gradient(to bottom, #000 40%, transparent 98%);
}
.composer__bar { display: flex; gap: 8px; align-items: center; padding: 15px 18px; border-bottom: 1px solid var(--border); }
.composer__bar span { width: 11px; height: 11px; border-radius: 50%; background: var(--surface-2); }
.composer__shell { display: flex; min-height: clamp(240px, 26vw, 360px); }
.composer__side {
  flex: none;
  width: clamp(190px, 27%, 250px);
  border-right: 1px solid var(--border);
  padding: 18px 16px;
  display: flex; flex-direction: column; gap: 16px;
}
.composer__new {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 14px; border-radius: 10px;
  border: 1px solid var(--border-2); background: rgba(255,255,255,0.03);
  font-size: 13px; font-weight: 600; color: var(--text);
}
.composer__new svg { width: 15px; height: 15px; color: var(--accent); flex: none; }
.composer__threads {
  display: flex; flex-direction: column; gap: 15px; margin: 0; padding: 0;
  -webkit-mask-image: linear-gradient(#000 62%, transparent);
          mask-image: linear-gradient(#000 62%, transparent);
}
.composer__threads li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text-soft); }
.composer__threads li::before {
  content: ""; flex: none;
  width: 15px; height: 15px; border-radius: 5px;
  border: 1px solid var(--border-2);
}
.composer__main {
  flex: 1;
  background: radial-gradient(130% 90% at 72% 6%, rgba(129,137,242,0.12), transparent 56%);
}

/* Floating composer card — an ANIMATED glowing border: a conic gradient rotates
   around the edge (a bright accent spot travels the perimeter) over a dark
   padding-box fill, plus an ambient accent bloom. Overhangs and is centred on
   the window top. --composer-angle is a registered property so it can animate;
   without @property support it falls back to a static gradient border. */
@property --composer-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.composer__card {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);       /* centred over the top of the window */
  z-index: 3;
  width: clamp(400px, 54%, 680px);
  border-radius: 16px;
  padding: 18px 20px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(#0c0c12, #0c0c12) padding-box,
    conic-gradient(from var(--composer-angle),
      var(--accent-headline), var(--accent), rgba(129,137,242,0.10), var(--accent), var(--accent-headline)) border-box;
  box-shadow: 0 0 34px -2px rgba(129,137,242,0.42), 0 44px 110px -50px rgba(129,137,242,0.5);
  animation: composer-border-spin 14s linear infinite;   /* gentle drift, not attention-grabbing */
}
@keyframes composer-border-spin { to { --composer-angle: 360deg; } }
.composer__head { margin-bottom: 14px; }
.composer__model {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--border-2); background: rgba(255,255,255,0.03);
  font-size: 13px; font-weight: 600; color: var(--text);
}
.composer__model svg { width: 15px; height: 15px; color: var(--accent); flex: none; }
.composer__chevron { color: var(--text-soft); }
.composer__input {
  min-height: 50px;
  padding: 6px 2px 16px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
  font-size: 16px; line-height: 1.5; color: var(--text);
}
.composer__caret {
  display: inline-block;
  width: 2px; height: 1.05em;
  margin-left: 2px; vertical-align: -0.16em;
  background: var(--accent);
  animation: composer-blink 1s steps(1) infinite;
}
@keyframes composer-blink { 50% { opacity: 0; } }
.composer__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.composer__tabs { display: flex; gap: 6px; }
.composer__tabs span {
  font-size: 12px; font-weight: 600; color: var(--text-soft);
  padding: 6px 11px; border-radius: var(--r-pill); border: 1px solid transparent;
}
.composer__tabs .is-active { color: var(--text); background: rgba(255,255,255,0.05); border-color: var(--border); }
.composer__send {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  padding: 9px 15px; border-radius: 10px;
  background: var(--accent); color: #08122e;
  font-size: 13px; font-weight: 700;
  box-shadow: 0 0 22px -3px rgba(129,137,242,0.8);
}
.composer__send svg { width: 16px; height: 16px; }

/* Stack the card ABOVE the window (no overlap) on narrower screens. The card
   is first in the DOM, so static positioning puts it on top naturally. */
@media (max-width: 860px) {
  .hero__composer {
    left: auto; margin-left: auto; margin-right: auto;
    width: 100%; max-width: 560px;
    padding-top: 0;
  }
  .composer__card { position: static; left: auto; transform: none; width: 100%; margin-bottom: 16px; }
  .composer__shell { min-height: 230px; }
}
@media (max-width: 520px) {
  .composer__side { width: 150px; padding: 14px 12px; }
  .composer__shell { min-height: 200px; }
  .composer__input { font-size: 15px; }
}

/* =========================================================================
   BENTO FEATURE GRID — asymmetric 2×2 (narrow|wide / wide|narrow). Each card
   has a 24px radius, a glowing blue gradient hairline border, an illustrative
   top panel and a title + one-line description. Adapted from the reference
   grid; recoloured to our accent (no orange).
   ========================================================================= */
.bento-sec .eyebrow--center { display: flex; justify-content: center; }
.bento-sec__title { text-align: center; max-width: none; margin-inline: auto; }
.bento-sec__lead { text-align: center; margin-inline: auto; }

/* Immersive backdrop — two soft accent glows bleed in from opposite corners so
   the whole section reads as a lit space; the glassy cards below let it through. */
.bento-sec { isolation: isolate; }
.bento-sec::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(56% 48% at 14% 6%,  rgba(129,137,242,0.13), transparent 62%),
    radial-gradient(52% 46% at 86% 94%, rgba(129,137,242,0.11), transparent 62%);
}
.bento-sec > .container { position: relative; z-index: 1; }

.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(16px, 2vw, 22px);
  margin-top: clamp(40px, 5vw, 62px);
}
.bento__card--sm { grid-column: span 5; }
.bento__card--lg { grid-column: span 7; }

.bento__card {
  min-height: 340px;
  border-radius: 24px;
  padding: clamp(20px, 2vw, 26px);
  border: 1px solid transparent;
  /* Opaque fill (no backdrop-filter) — the ambient section glow still reads
     around the cards; live-blurring behind every card was killing scroll perf. */
  background:
    linear-gradient(#13131b, #0d0d14) padding-box,
    linear-gradient(120deg, rgba(129,137,242,0.5), rgba(129,137,242,0.06) 46%, rgba(143,168,255,0.5)) border-box;
  box-shadow: var(--edge-light), var(--shadow-1);
  display: flex;
  flex-direction: column;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.bento__card:hover {
  transform: translateY(-5px);
  box-shadow: var(--edge-light-2), var(--shadow-hover), var(--glow-accent);
}
.bento__visual {
  flex: 1;
  min-height: 210px;
  margin-bottom: 22px;
  border-radius: 16px;
  border: 1px solid var(--border);
  /* Semi-translucent so the card's lit backdrop bleeds through the panel; a
     brighter top glow makes it feel like a window into a lit space. */
  background:
    radial-gradient(130% 120% at 50% -8%, rgba(129,137,242,0.15), transparent 62%),
    rgba(8,8,13,0.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), inset 0 -60px 60px -40px rgba(0,0,0,0.6);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 3vw, 34px);
}
.bento__visual--flush { align-items: stretch; }
.bento__h { font-size: clamp(20px, 2.2vw, 24px); font-weight: 600; letter-spacing: -0.015em; text-wrap: balance; }
.bento__p { color: var(--text-dim); font-size: 15.5px; line-height: 1.55; margin-top: 9px; }

/* --- Visual 1: integration orbit --------------------------------------- */
.orbit {
  position: relative;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1 / 0.86;
  display: flex;
  align-items: center;
  justify-content: center;
}
.orbit__ring {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid var(--border);
  border-radius: 50%;
  aspect-ratio: 1;
}
.orbit__ring--1 { width: 48%; }
.orbit__ring--2 { width: 82%; }
.orbit__core {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #D3D5FE 0%, #A5ABF7 28%, #8189F2 54%, #24284d 100%);
  box-shadow: 0 0 34px -4px rgba(129,137,242,0.85);
}
.orbit__chip {
  position: absolute;
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #16161f, #101017);
  border: 1px solid var(--border-2);
  color: var(--text-dim);
  box-shadow: var(--edge-light), 0 8px 18px -10px rgba(0,0,0,0.8);
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.orbit__chip svg { width: 18px; height: 18px; }
.bento__card:hover .orbit__chip { color: var(--accent-headline); border-color: rgba(129,137,242,0.4); }
.orbit__chip--1 { top: 2%;  left: 50%; transform: translate(-50%,-50%); }
.orbit__chip--2 { top: 26%; left: 92%; transform: translate(-50%,-50%); }
.orbit__chip--3 { top: 74%; left: 92%; transform: translate(-50%,-50%); }
.orbit__chip--4 { top: 98%; left: 50%; transform: translate(-50%,-50%); }
.orbit__chip--5 { top: 74%; left: 8%;  transform: translate(-50%,-50%); }
.orbit__chip--6 { top: 26%; left: 8%;  transform: translate(-50%,-50%); }

/* --- Visual 2: conversational actions chat ----------------------------- */
.chat { display: flex; flex-direction: column; gap: 14px; width: 100%; justify-content: center; }
.chat__user { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.chat__bubble {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-2);
  border-radius: 14px 14px 4px 14px;
  padding: 11px 15px;
  font-size: 14px; color: var(--text);
  max-width: 74%;
  box-shadow: var(--edge-light);
}
.chat__avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: linear-gradient(180deg, #3a3f52, #20232e);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: var(--text-dim);
}
.chat__ai { display: flex; gap: 10px; align-items: flex-start; }
.chat__spark {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  background: var(--accent-dim);
  border: 1px solid rgba(129,137,242,0.35);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-headline);
  box-shadow: var(--edge-light);
}
.chat__spark svg { width: 17px; height: 17px; }
.chat__reply { flex: 1; min-width: 0; }
.chat__said { font-size: 14px; color: var(--text-dim); margin-bottom: 8px; }
.chat__result {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(129,137,242,0.06), transparent 60%), var(--surface);
  overflow: hidden;
  box-shadow: var(--edge-light);
}
.chat__row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 10px 14px;
  font-size: 13px; color: var(--text-dim);
  border-bottom: 1px solid var(--border);
}
.chat__val { color: var(--text); font-weight: 600; text-align: right; }
.chat__row--foot { color: var(--accent-headline); font-size: 12.5px; border-bottom: none; }

/* --- Visual 3: workflow node SVG --------------------------------------- */
.wf { width: 100%; height: auto; max-height: 240px; }

/* --- Visual 4: multi-channel chips + skeleton bars --------------------- */
.chans { display: flex; flex-direction: column; gap: 14px; width: 100%; justify-content: center; margin: 0; }
.chan {
  display: flex; align-items: center; gap: 14px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--sheen), var(--surface);
  box-shadow: var(--edge-light);
}
.chan__icon {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  background: linear-gradient(180deg, rgba(129,137,242,0.22), rgba(129,137,242,0.06));
  border: 1px solid rgba(129,137,242,0.28);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-headline);
}
.chan__icon svg { width: 19px; height: 19px; }
.chan__body { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.chan__name { font-size: 14px; font-weight: 600; color: var(--text); }
.chan__bar {
  height: 7px; border-radius: 99px; width: 80%;
  position: relative; overflow: hidden;
  background: linear-gradient(90deg, rgba(129,137,242,0.55), rgba(129,137,242,0.12));
}
.chan__bar--2 { width: 62%; }
.chan__bar--3 { width: 46%; }
.chan__bar::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.16), transparent);
  transform: translateX(-100%);
  animation: chan-shimmer 3.6s var(--ease) infinite;
}
.chan__bar--2::after { animation-delay: 0.4s; }
.chan__bar--3::after { animation-delay: 0.8s; }
@keyframes chan-shimmer { to { transform: translateX(100%); } }

@media (max-width: 960px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento__card--sm, .bento__card--lg { grid-column: span 1; }
}
@media (max-width: 620px) {
  .bento { grid-template-columns: 1fr; }
  .bento__card--sm, .bento__card--lg { grid-column: span 1; }
}

/* =========================================================================
   AMBIENT SECTION LIGHTING — the black canvas lights up around the cards so
   the whole page feels like an atmospheric space rather than flat boxes on
   black. One soft accent glow per card section, from alternating corners.
   ========================================================================= */
.solutions, .benefits, .how { isolation: isolate; }
.solutions::before, .benefits::before, .how::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.how::before       { background: radial-gradient(46% 42% at 88% 90%, rgba(129,137,242,0.08), transparent 62%); }
.solutions > .container,
.benefits > .container,
.how > .container { position: relative; z-index: 1; }

/* Opaque cards (no backdrop-filter) — the ambient section glow reads around
   them; the per-card live blur was a major scroll-jank source. */
.card, .step {
  background: var(--sheen), var(--surface);
}
.card:hover { background: var(--sheen-hover), var(--surface-2); }

/* =========================================================================
   ABOUT — why we exist (vision + mission) and the founders. Content and
   founder-avatar treatment taken from the brand deck.
   ========================================================================= */
.about__statements { margin-top: clamp(28px, 4vw, 44px); }
.about__block { padding-block: clamp(24px, 3.5vw, 40px); }
.about__block + .about__block { border-top: 1px solid var(--border); }
.about__label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 16px;
}
.about__vision { max-width: 20ch; }
.about__mission {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(22px, 3vw, 34px); line-height: 1.24; letter-spacing: -0.01em;
  max-width: 24ch; color: var(--text);
}
.about__note {
  margin-top: 20px; color: var(--text-dim);
  font-size: clamp(16px, 1.6vw, 18px); max-width: 58ch; line-height: 1.6;
}
.about__founders {
  margin-top: clamp(36px, 5vw, 56px);
  padding-top: clamp(28px, 4vw, 40px);
  border-top: 1px solid var(--border);
}
/* Founder portraits. Rounded squares rather than circles: the same corner
   language as every card on the page, and a square crop wastes none of a
   headshot. The photo carries the accent only on hover, so three faces don't
   fight the page's single-accent discipline. */
.about__founders-lead {
  margin-top: -6px;
  margin-bottom: 26px;
  color: var(--text-dim);
  font-size: clamp(16px, 1.6vw, 18px);
}
.founders {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  margin-top: 22px;
  max-width: 760px;
}
.founder { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
/* The whole card is the link, not just the image — a 220px photo plus the name
   is a far easier target than the photo alone, and the name is the thing people
   instinctively click. */
.founder__link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  color: inherit;
  border-radius: var(--r-card-lg);
}
.founder__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.founder__link:hover .founder__name { color: var(--accent-headline); }
.founder__name { transition: color 0.3s var(--ease); }

/* A LinkedIn mark that fades in over the photo on hover, so it is obvious where
   the click goes before anyone makes it. */
.founder__li {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: rgba(10,10,14,0.72);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  color: #fff;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  pointer-events: none;
}
.founder__li svg { width: 15px; height: 15px; display: block; }
.founder__link:hover .founder__li,
.founder__link:focus-visible .founder__li { opacity: 1; transform: none; }

/* On touch there is no hover, so the badge is simply always visible. */
@media (hover: none) {
  .founder__li { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .founder__li, .founder__name { transition: none; }
}
/* <picture> is an inline box with no intrinsic size of its own, so a
   width:100% image inside it collapses. Give the wrapper the box.
   The frame — border, radius, shadow — lives here rather than on the image,
   because the image now moves inside it. Scaling an element that carries its
   own border scales the border too, which reads as a rendering fault. */
.founder picture {
  display: block;
  width: 100%;
  max-width: 220px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  isolation: isolate;          /* keeps the clip clean at the rounded corners */
  border-radius: var(--r-card-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--edge-light), var(--shadow-1);
  margin-bottom: 14px;
  /* box-shadow trails the lift by 60ms so the light appears to warm up rather
     than switch on with the movement. */
  transition: transform 0.5s var(--ease),
              border-color 0.5s var(--ease),
              box-shadow 0.6s var(--ease) 0.06s;
}
.founder__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Slower than the frame's lift on purpose: the card reacts, then the face
     settles into it. Same easing curve as everything else on the page. */
  transition: transform 0.75s var(--ease);
}

/* Hover: the frame lifts, and the photograph pushes gently toward the viewer
   inside it. Nothing reflows — both are transforms. */
.founder:hover picture,
.founder__link:focus-visible picture {
  transform: translateY(-3px);
  border-color: rgba(165,171,247,0.45);
  box-shadow: var(--edge-light-2), var(--glow-founder);
}
.founder__link:hover .founder__photo,
.founder__link:focus-visible .founder__photo {
  transform: scale(1.07);
}

@media (prefers-reduced-motion: reduce) {
  .founder picture, .founder__photo { transition: none; }
  .founder__link:hover .founder__photo,
  .founder__link:focus-visible .founder__photo { transform: none; }
}
.founder__name { font-family: var(--display); font-weight: 500; font-size: clamp(17px, 1.9vw, 20px); }

@media (max-width: 620px) {
  /* Two up on a phone: a 3-wide row makes each face too small to read as a
     person, and one-per-row costs three screens. */
  .founders { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
  .about__founders-lead { font-size: 15.5px; margin-bottom: 20px; }
  .founder__photo { margin-bottom: 10px; }
}

/* =========================================================================
   LENIS smooth scroll — required base styles (self-hosted). Lenis adds the
   .lenis / .lenis-smooth / .lenis-stopped classes to <html> at runtime.
   ========================================================================= */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* =========================================================================
   CONVERSION FURNITURE  (added in the structure pass)
   Three pieces that fix the same measured problem: the page ran ~11,000px
   between the hero CTA and the next clickable action.
     1. .hero__assure  — risk-reversal beside the primary button
     2. .cta-inline    — a contextual CTA at the end of a section that earned it
     3. .stickycta     — a phone-only action bar, since the nav CTA scrolls away
   ========================================================================= */

/* --- Secondary hero action: a link that reads as a link, not a second button.
       Two equal pills would split attention; this one defers. ---------------- */
.btn--ghostlink {
  padding: 17px 4px;
  color: var(--text-dim);
  border-bottom: 1px solid transparent;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.btn--ghostlink:hover { color: var(--text); border-bottom-color: var(--border-2); }
.arrow--down { transition: transform 0.35s var(--ease); }
.btn--ghostlink:hover .arrow--down { transform: translateY(3px); }

/* --- Hero assurance row ------------------------------------------------- */
.hero__assure {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  margin-top: 26px;
  font-size: 14px;
  color: var(--text-soft);
}
.hero__assure li { display: inline-flex; align-items: center; gap: 9px; }
/* Small accent tick, drawn in CSS so it costs no request. */
.hero__assure li::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

/* --- Honest label under the hero mockup --------------------------------- */
.hero__caption {
  margin-top: 18px;
  text-align: center;
  font-size: 13px;
  color: var(--text-soft);
}

/* --- Contextual mid-page CTA -------------------------------------------- */
.cta-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px 28px;
  margin-top: clamp(36px, 5vw, 56px);
  padding: clamp(20px, 2.6vw, 28px) clamp(22px, 3vw, 34px);
  border: 1px solid var(--border);
  border-radius: var(--r-card-lg);
  background: var(--sheen), rgba(255,255,255,0.02);
  box-shadow: var(--edge-light);
}
.cta-inline__text {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(17px, 2vw, 21px);
  letter-spacing: -0.01em;
  max-width: 40ch;
}
.cta-inline .btn { flex: none; }

/* --- Phone-only sticky action bar --------------------------------------- */
.stickycta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 95;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(9,9,14,0.82);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
          backdrop-filter: blur(18px) saturate(150%);
  border-top: 1px solid var(--border);
  transform: translateY(110%);
  transition: transform 0.45s var(--ease), opacity 0.3s var(--ease);
  opacity: 0;
}
.stickycta[hidden] { display: none; }
.stickycta.is-shown { transform: none; opacity: 1; }
.stickycta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.stickycta__text {
  font-family: var(--display);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.25;
}
.stickycta .btn { flex: none; padding: 12px 20px; }

/* Desktop keeps its CTA in the sticky nav — the bar would just be clutter. */
@media (min-width: 861px) {
  .stickycta { display: none !important; }
}

@media (max-width: 620px) {
  .cta-inline { flex-direction: column; align-items: flex-start; }
  .cta-inline .btn { width: 100%; justify-content: center; }
  .hero__assure { gap: 8px 18px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .stickycta { transition: none; }
}

/* =========================================================================
   PHONE DENSITY PASS
   The page measured 18.3 screens of scroll on a 375px phone for only ~1,100
   words — the length came from desktop-scale padding and visual panels, not
   from content. Nothing is removed here; the rhythm is just tightened to phone
   proportions so the same copy reads in roughly half the scrolling.
   ========================================================================= */
@media (max-width: 620px) {
  :root {
    --section-y: 56px;          /* was a flat 72px on phones */
    --r-block: 28px;
  }

  /* Display type tuned for a 375px column — 36px still dominates a phone. */
  .h2 { font-size: clamp(27px, 7.4vw, 34px); max-width: none; }
  .section-lead { font-size: 16.5px; margin-top: 16px; }
  .eyebrow { margin-bottom: 16px; }

  /* Hero: the tall mockup earns its space on desktop, not on a phone. */
  .hero { padding-block: 40px 48px; }
  .hero__sub { margin-bottom: 26px; font-size: 16.5px; }
  .hero__composer { margin-top: 28px; }
  .hero__caption { margin-top: 14px; font-size: 12px; }

  /* Eight commitments: same eight, half the vertical cost. */
  .trust__item { padding: 15px 0; gap: 13px; }
  .trust__title { font-size: 16.5px; margin-bottom: 5px; }
  .trust__body { font-size: 15px; line-height: 1.55; }
  .num--trust { font-size: 13.5px; min-width: 3ch; }
  .trust__note { margin-top: 22px; padding-top: 18px; font-size: 15px; }
  .step { padding: 22px 20px; }
  .step__body { font-size: 16px; }

  /* Bento: the illustrative panels are the tallest thing on the phone page. */
  .bento__visual { min-height: 0; }
  .bento__card { padding-bottom: 4px; }
  .bento__meta { padding: 16px 18px 20px; }
  .bento__p { font-size: 15px; }

  .faq__item summary { padding-block: 16px; }
  .cta-inline { margin-top: 28px; padding: 20px; }
  .footer__inner { gap: 32px; }
}

/* Give the footer's link columns a real touch target (they measured 24px tall,
   below the 44px minimum) without changing how they look. */
@media (max-width: 820px) {
  .footer__col a { padding-block: 9px; }
}

/* --- Phone: the biggest two space consumers ------------------------------
   The hero mockup measured 617px on a 375px screen — most of a screen spent on
   a decorative window whose sidebar text is unreadable at that size. Keep the
   composer card (it carries the typewriter and the idea); drop the window.
   The bento panels get a ceiling for the same reason. ---------------------- */
@media (max-width: 620px) {
  .composer__window { display: none; }
  .composer__card { margin-bottom: 0; }
  /* Capped, with a fade at the cut so a clipped illustration reads as a
     deliberate soft edge rather than a broken panel. */
  .bento__visual {
    max-height: 170px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
  }
  .flow__stage { padding: 18px 20px; }
  .flow__diagram { gap: 12px; }
}

/* =========================================================================
   CLIENT TESTIMONIALS
   Quote-first cards. The quote leads at display size because a client's own
   words are the most persuasive thing on the page; the before/now rows sit
   underneath as the evidence, and the case-study link is a text link rather
   than a button so it never competes with "Book a free audit".
   ========================================================================= */
.tstm__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 32px);
  margin-top: clamp(34px, 5vw, 54px);
}
.tstm__card {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: clamp(26px, 3vw, 38px);
  border: 1px solid var(--border);
  border-radius: var(--r-card-lg);
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(129,137,242,0.07), transparent 55%),
    var(--sheen),
    var(--surface);
  box-shadow: var(--edge-light), var(--shadow-1);
  transition: border-color 0.5s var(--ease), box-shadow 0.5s var(--ease), transform 0.5s var(--ease);
}
.tstm__card:hover {
  transform: translateY(-2px);
  border-color: rgba(129,137,242,0.28);
  box-shadow: var(--edge-light-2), var(--shadow-hover);
}

.tstm__quote { margin: 0; }
/* Decorative opening mark, kept out of the text flow so the first line still
   aligns with everything below it. */
.tstm__quote::before {
  content: "C";
  display: block;
  font-family: var(--display);
  font-size: 54px;
  line-height: 0.7;
  color: var(--accent);
  opacity: 0.5;
  margin-bottom: 10px;
}
.tstm__quote p {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(17px, 1.9vw, 21px);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--text);
}

.tstm__who {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(22px, 2.6vw, 30px);
  padding-top: clamp(18px, 2.2vw, 24px);
  border-top: 1px solid var(--border);
}
.tstm__avatar {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 600; font-size: 15px;
  color: var(--accent-headline);
  background: radial-gradient(circle at 30% 25%, rgba(129,137,242,0.24), rgba(129,137,242,0.06));
  border: 1px solid rgba(129,137,242,0.3);
  box-shadow: var(--edge-light);
}
.tstm__id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tstm__name { font-family: var(--display); font-weight: 500; font-size: 17px; }
.tstm__role { font-size: 13.5px; color: var(--text-soft); }

.tstm__stats { margin: clamp(20px, 2.4vw, 26px) 0 0; display: grid; gap: 10px; }
.tstm__stats > div {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.tstm__stats dt {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent);
}
.tstm__stats dd { margin: 0; font-size: 15px; color: var(--text-dim); line-height: 1.5; }

/* Pushed to the bottom so both cards' links line up even when the quotes
   differ in length. */
.tstm__more { margin-top: auto; padding-top: clamp(22px, 2.6vw, 28px); align-self: flex-start; }

@media (max-width: 820px) {
  .tstm__grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .tstm__card { padding: 24px 20px; }
  .tstm__quote p { font-size: 17px; }
  .tstm__quote::before { font-size: 44px; }
  .tstm__stats > div { grid-template-columns: 1fr; gap: 2px; }
  .tstm__stats dd { font-size: 14.5px; }
}

/* =========================================================================
   FAIL-VISIBLE FALLBACK
   Every .reveal and every headline word starts at opacity 0 and is brought
   back by JS. That means a single failure — IntersectionObserver blocked, a
   background tab that never runs rAF, a device throttling rendering — leaves
   the visitor looking at a black page. script.js sets .vx-fallback when it
   detects that case; these rules show everything immediately, no transition
   (a transition can't complete on a device that isn't painting frames).
   ========================================================================= */
.js.vx-fallback .reveal,
.js.vx-fallback .hero__title.hw-anim .hw-ink,
.js.vx-fallback .hero__title.hw-anim.is-shown .hw-ink {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
  animation: none !important;
}

/* =========================================================================
   PASS A — new furniture
   Client strip, benefit chips, static tool row, and the merged price panel.
   ========================================================================= */

/* --- Benefit chips: what used to be a full "Benefits" section, on one line. -- */
.benefitchips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 28px;
  margin-top: clamp(28px, 3.5vw, 40px);
  padding-top: clamp(22px, 2.6vw, 28px);
  border-top: 1px solid var(--border);
}
.benefitchips li { font-size: 15px; color: var(--text-dim); line-height: 1.55; }
.benefitchips strong { display: block; color: var(--text); font-weight: 700; margin-bottom: 2px; }

/* --- Price panel: the loud moment of the process section. ------------------ */
.pricepanel {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  margin-top: clamp(34px, 4.5vw, 52px);
  padding: clamp(26px, 3.4vw, 44px);
  border: 1px solid rgba(129,137,242,0.22);
  border-radius: var(--r-block);
  background:
    radial-gradient(90% 140% at 8% 0%, rgba(129,137,242,0.13), transparent 62%),
    var(--sheen),
    var(--surface);
  box-shadow: var(--edge-light), var(--shadow-1), var(--glow-accent);
}
.pricepanel__label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 14px;
}
.pricepanel__amount {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.pricepanel__support {
  margin-top: 16px;
  color: var(--text-dim);
  font-size: clamp(15.5px, 1.6vw, 17px);
  line-height: 1.62;
  max-width: 54ch;
}
.pricepanel__chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.pricepanel__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding-left: clamp(0px, 2vw, 32px);
  border-left: 1px solid var(--border);
}
.pricepanel__asidetext {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(17px, 1.9vw, 20px);
  line-height: 1.35;
}

@media (max-width: 860px) {
  .pricepanel { grid-template-columns: 1fr; align-items: start; }
  .pricepanel__aside { padding-left: 0; padding-top: 24px; border-left: 0; border-top: 1px solid var(--border); width: 100%; }
  .benefitchips { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 620px) {
      .pricepanel { padding: 22px 20px; }
  .pricepanel__aside .btn { width: 100%; justify-content: center; }
}

/* =========================================================================
   PASS A — type scale + section loudness
   Eleven <h2>s at an identical 56px gave the page no hierarchy: every section
   announced itself at the same volume, so after a few screens none of them
   registered. Three tiers now, assigned by how much each section matters.
   ========================================================================= */

/* Default section heading — down from 56px. */
.h2 { font-size: clamp(28px, 3.6vw, 44px); }

/* Loud: the two sections that carry proof and the ask. */
.tstm .h2,
.contact .h2 { font-size: clamp(32px, 4.4vw, 56px); }

/* Quiet: reference material people scan rather than read. */
.trust .h2,
.faq .h2 { font-size: clamp(24px, 2.8vw, 34px); }

/* Section padding follows the same map, so rhythm comes from space as well as
   type: proof and the ask breathe, reference material tightens up. */
.trust, .faq { padding-block: calc(var(--section-y) * 0.72); }
.tstm, .contact { padding-block: calc(var(--section-y) * 1.05); }

/* --- Security: same eight commitments, half the vertical cost -------------- */
.trust__item { padding: clamp(14px, 1.8vw, 18px) 0; gap: 0; }
.trust__title { font-size: clamp(16px, 1.5vw, 17.5px); margin-bottom: 6px; }
.trust__body { font-size: 15.5px; line-height: 1.55; }
.trust__list { column-gap: clamp(28px, 4.5vw, 64px); }

/* =========================================================================
   PASS A — phone pass for the new furniture
   The Pass A components landed at desktop proportions. Same content, phone
   rhythm.
   ========================================================================= */
@media (max-width: 620px) {
  /* Testimonial stat rows: the earlier rule stacked label over value, which
     turned six short facts into twelve lines. A narrow label column keeps them
     to one line each and reads as a table, which is what they are. */
  .tstm__stats > div { grid-template-columns: 88px minmax(0, 1fr); gap: 10px; align-items: baseline; }
  .tstm__stats dt { font-size: 10.5px; letter-spacing: 0.1em; }
  .tstm__stats dd { font-size: 14px; }
  .tstm__card { padding: 22px 18px; }
  .tstm__quote p { font-size: 16.5px; line-height: 1.42; }

  /* Illustration panels are decoration; they earn less room on a phone. */
  .bento__visual { max-height: 140px; }
  .bento__meta { padding: 14px 16px 18px; }

  .benefitchips { margin-top: 22px; padding-top: 18px; gap: 12px; }
  .benefitchips li { font-size: 14.5px; }

      
  .pricepanel { margin-top: 26px; }
  .pricepanel__amount { font-size: 24px; }
  .pricepanel__support { font-size: 15px; }
  .pricepanel__aside { padding-top: 20px; gap: 12px; }
}

/* =========================================================================
   PASS B — SECTION LOUDNESS
   Ten sections previously shared one treatment: bordered cards on black. The
   page read as one continuous volume, so after a few screens the eye stopped
   registering that a section had changed. Two sections now break the pattern.
   ========================================================================= */

/* --- "How an agent works": a full-bleed dark well ------------------------
   Edge-to-edge instead of container-bound, on a slightly lifted ground with a
   cool wash from above. Costs no height and makes the diagram read as a stage
   rather than another card. ------------------------------------------------ */
.flow {
  background:
    radial-gradient(120% 85% at 50% 0%, rgba(129,137,242,0.10), transparent 62%),
    #06060A;
  border-block: 1px solid var(--border);
}

/* --- "The process + what it costs": the light panel -----------------------
   The one inverted moment on the page. Implemented by re-pointing the design
   tokens inside this section rather than restyling its children — everything
   downstream (cards, tags, borders, sheens) already reads from these, so the
   whole block flips with the palette instead of a pile of overrides.
   The off-white is #F5F5F4, the same tone as the second peak in the logo. -- */
.how--light {
  --bg:          #F5F5F4;
  --surface:     #FFFFFF;
  --surface-2:   #ECECEA;
  --text:        #0B0B0D;
  --text-dim:    #3C3C42;   /* body copy on light */
  --text-soft:   #5C5C64;   /* tertiary meta */
  --text-muted:  rgba(11,11,13,0.22);   /* decorative numerals only */
  --border:      rgba(11,11,13,0.12);
  --border-2:    rgba(11,11,13,0.22);

  /* Periwinkle at full brightness fails on off-white, so the accent darkens
     here. Same hue family, enough contrast to carry small text. */
  --accent:          #3F45B8;
  --accent-headline: #3F45B8;
  --accent-dim:      rgba(63,69,184,0.10);

  --sheen:        linear-gradient(180deg, rgba(11,11,13,0.03) 0%, rgba(11,11,13,0) 44%);
  --sheen-hover:  linear-gradient(180deg, rgba(11,11,13,0.05) 0%, rgba(11,11,13,0) 44%);
  --edge-light:   inset 0 1px 0 rgba(255,255,255,0.9);
  --edge-light-2: inset 0 1px 0 rgba(255,255,255,1);
  --shadow-1:     0 1px 2px rgba(11,11,13,0.06), 0 16px 40px -28px rgba(11,11,13,0.28);
  --shadow-hover: 0 2px 8px rgba(11,11,13,0.08), 0 30px 60px -34px rgba(11,11,13,0.34);
  --glow-accent:  0 0 0 1px rgba(63,69,184,0.14), 0 24px 60px -40px rgba(63,69,184,0.45);

  background: var(--bg);
  color: var(--text);
}

/* The ambient accent glow is a dark-ground effect; it only muddies the light
   panel. */
.how--light::before { display: none; }

/* Buttons invert too: on off-white, the outline pill would vanish. */
.how--light .btn--pill {
  background: #0B0B0D;
  border-color: #0B0B0D;
  color: #FFFFFF;
  box-shadow: 0 1px 2px rgba(11,11,13,0.18);
}
.how--light .btn--pill:hover {
  background: #24242A;
  border-color: #24242A;
  box-shadow: 0 8px 22px -10px rgba(11,11,13,0.45);
}
.how--light .btn--glow {
  box-shadow: 0 0 0 1px rgba(63,69,184,0.35), 0 12px 34px -12px rgba(63,69,184,0.5);
}
.how--light .btn--glow:hover {
  box-shadow: 0 0 0 1px rgba(63,69,184,0.5), 0 16px 40px -12px rgba(63,69,184,0.65);
}

/* Selection and focus rings need the darker accent to stay visible. */
.how--light :focus-visible { outline-color: var(--accent); }

/* The price panel sits on white inside a light section — give it a tinted
   ground so it still reads as the loud element of the block. */
.how--light .pricepanel {
  border-color: rgba(63,69,184,0.22);
  background:
    radial-gradient(90% 140% at 8% 0%, rgba(63,69,184,0.09), transparent 62%),
    var(--sheen),
    var(--surface);
}

.form__note a { color: var(--text-dim); }
.form__note a:hover { color: var(--text); }

/* --- Hero proof numbers ---------------------------------------------------
   Both reference sites put their evidence in the hero; ours made the visitor
   scroll to screen two for it. Set in the display face at a size that reads as
   a fact rather than a headline, with the qualifying clause underneath so the
   number is never left to stand on its own. ------------------------------- */
/* Frames the figures as evidence from two named builds, not as a service menu. */
.hero__statslabel {
  margin-top: clamp(28px, 3.6vw, 40px);
  padding-top: clamp(20px, 2.6vw, 28px);
  border-top: 1px solid var(--border);
  max-width: 900px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-soft);
}
/* The label now carries the rule and the spacing above the numbers. */
.hero__statslabel + .hero__stats {
  margin-top: 18px;
  padding-top: 0;
  border-top: 0;
}
.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.5vw, 18px);
  margin-top: clamp(20px, 2.4vw, 26px);
  /* Was capped at 720px, which left ~126px of the column unused at tablet
     widths and squeezed the three columns together. */
  max-width: 900px;
}
/* Three cards, in the same surface language as every other card on the site.
   They also solve a legibility problem: these sit directly over the brightest
   part of the hero orb, and an opaque ground stops the figures fighting it. */
.hero__stats li {
  display: flex;
  flex-direction: column;
  padding: clamp(16px, 2vw, 22px);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--sheen), var(--surface);
  box-shadow: var(--edge-light), var(--shadow-1);
  transition: border-color 0.5s var(--ease), box-shadow 0.5s var(--ease), transform 0.5s var(--ease);
}
.hero__stats li:hover {
  transform: translateY(-2px);
  border-color: rgba(129,137,242,0.28);
  box-shadow: var(--edge-light-2), var(--glow-accent);
}

.hero__stat {
  display: block;
  font-family: var(--display);
  font-weight: 500;
  /* Up from clamp(26,3.2vw,38). At 27px these read as body copy; a figure has
     to carry weight against an 82px headline to register as evidence. */
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent-headline);
  font-variant-numeric: tabular-nums;
}
.hero__statlabel {
  display: block;
  margin-top: 11px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-soft);
  max-width: 22ch;
}
.hero__sub strong { color: var(--text); font-weight: 700; }

@media (max-width: 620px) {
  /* Three across is unreadable at 375px; two columns with the third wrapping
     keeps each number paired with its clause. */
  /* One per row on a phone: two columns put a 24px figure next to a two-line
     label in ~160px, which is where it actually looked cramped. Stacked, each
     fact gets the full width and the rules become horizontal. */
  /* One card per row on a phone, laid out horizontally so three stacked cards
     don't cost three-quarters of a screen: figure on the left, label beside it. */
  .hero__stats {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 18px;
  }
  .hero__stats li {
    display: grid;
    /* Fixed first column, not `auto`: "<2 min" is wider than "3", which left the
       three labels starting at three different x positions. */
    grid-template-columns: 78px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
  }
  .hero__stat { font-size: 26px; }
  .hero__statlabel { margin-top: 0; font-size: 13px; max-width: none; }
}

/* =========================================================================
   INTEGRATIONS MARQUEE — restored. The static row read as a spec sheet;
   movement is what makes a logo strip register. It now lives inside "What we
   build" rather than as its own section, so it says "this is what we connect
   to" instead of implying a client wall.

   Two identical groups slide as one; the track shifts by exactly -50%, so the
   second group lands where the first began and the seam is invisible. Speed is
   set once via --marquee-duration (lower = faster).
   ========================================================================= */
.marquee {
  --marquee-duration: 34s;
  overflow: hidden;
}
.marquee--inline {
  margin-top: clamp(26px, 3.4vw, 40px);
  padding-top: clamp(22px, 2.8vw, 30px);
  border-top: 1px solid var(--border);
}
.marquee__label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: clamp(18px, 2.2vw, 24px);
}
/* The viewport clips the track and fades both edges so logos dissolve in and
   out rather than being chopped off at the container. */
.marquee__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll var(--marquee-duration) linear infinite;
  will-change: transform;
}
/* Pause on hover so a visitor can actually look at a logo. */
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }
.marquee__group {
  display: flex;
  align-items: center;
  flex: none;
  gap: clamp(34px, 5vw, 72px);
  padding-right: clamp(34px, 5vw, 72px);   /* equals the gap, so spacing stays even across the seam */
  margin: 0;
}
.marquee__item { display: flex; }
.marquee__item svg {
  height: clamp(21px, 2.3vw, 26px);
  width: auto;
  display: block;
  color: var(--text-soft);
  opacity: 0.7;
  transition: opacity 0.3s var(--ease), color 0.3s var(--ease);
}
.marquee__item:hover svg { opacity: 1; color: var(--text); }

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Reduced motion: the strip stops dead rather than crawling. */
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; flex-wrap: wrap; width: 100%; }
  .marquee__group:last-child { display: none; }
  .marquee__viewport { -webkit-mask-image: none; mask-image: none; }
}

/* =========================================================================
   CONTACT — ghost-word clearance
   "Let's talk" is absolutely positioned decoration, and the section's own
   padding was shorter than the word is tall, so the heading and form collided
   with it by ~30px on desktop and more on a phone. Both now derive from the
   same two variables, so the clearance holds at every width.
   ========================================================================= */
.contact {
  --ghost-top: clamp(20px, 4vw, 52px);
  --ghost-size: clamp(56px, 11vw, 132px);
  padding-top: calc(var(--ghost-top) + (var(--ghost-size) * 0.9) + clamp(26px, 3vw, 44px));
}
.contact .ghost-word {
  top: var(--ghost-top);
  font-size: var(--ghost-size);
}

/* =========================================================================
   REVIEW FIXES
   ========================================================================= */

/* --- FAQ: collapse closed answers explicitly -----------------------------
   The accordion relied on the browser hiding a closed <details>' content, and
   set height only from JS on click. Chrome 148 renders that content anyway, so
   every answer was visible at full height and colliding with the question below
   it — eight overlapping blocks, ~81-113px each. Never depend on UA behaviour
   for something this visible: state the closed height. The JS animation still
   wins, because it writes an inline height and adds .is-open before measuring. */
.js .faq__item:not(.is-open) .faq__answer { height: 0; }

/* --- Footer: keep the copyright legible over the ghost wordmark ----------
   .footer__copy is z-indexed deliberately on top of the giant ghost wordmark,
   so the two overlap by design. But #666 letters behind #AEB4BF text put the
   overlapping run at ~2.8:1 — unreadable, and invisible to a contrast check
   that only looks at ancestor backgrounds. Dropping the ghost to a near-black
   keeps the device and takes the overlap to ~6.8:1. */
.ghost-wordmark { color: #2A2A2E; }

/* =========================================================================
   SOCIAL ROW
   The wrapper is deliberately `position: relative; display: inline-flex` —
   it is the positioning context for the shared hover card that will sit above
   it later (one card, springing between icons on `left`/`width`/`height`).
   Each item is `position: relative; z-index: 1` so it stays above the card's
   ground but below its content. Building the row this way now means the card
   is purely additive.
   ========================================================================= */
.socialrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;                      /* the 40px boxes already hold the glyphs 20px apart */
  margin-top: 14px;
  margin-left: -10px;          /* optical: pulls the first glyph back into line with the text above */
}
/* Two classes deep on purpose: `.footer__col a` sets `width: fit-content` and
   beats a single class, which collapsed these to the width of the glyph. */
.socialrow .socialrow__item {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  flex: none;                  /* never let the row shrink the hit area */
  width: 40px;                 /* four of these fit the 168px footer column */
  height: 40px;
  border-radius: 12px;
  color: var(--text-soft);
  transition: color 0.3s var(--ease), background-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.socialrow .socialrow__item svg { width: 20px; height: 20px; display: block; }
.socialrow .socialrow__item:hover { color: var(--text); background-color: rgba(255,255,255,0.07); }
.socialrow .socialrow__item:active { transform: scale(0.94); transition-duration: 0.09s; }
.socialrow .socialrow__item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Placeholder state. The global [data-placeholder-link] rule underlines with a
   dashed border, which reads as damage on an icon — a dashed ring says the same
   thing ("not finished") without looking broken. */
.socialrow .socialrow__item[data-placeholder-link] {
  border-bottom: 0;
  box-shadow: inset 0 0 0 1px rgba(129,137,242,0.45);
}

@media (prefers-reduced-motion: reduce) {
  .socialrow .socialrow__item { transition: none; }
}

/* On a phone the footer collapses to one column, so the touch target can have
   its full 44px without crowding. */
@media (max-width: 820px) {
  .socialrow { gap: 4px; margin-left: -12px; }
  .socialrow .socialrow__item { width: 44px; height: 44px; }
}

/* =========================================================================
   HERO STAT CARDS — centred
   ========================================================================= */
.hero__stats li { align-items: center; text-align: center; }
.hero__statlabel { max-width: 26ch; margin-inline: auto; }

@media (max-width: 620px) {
  /* Centre the figure+label pair as a group. This gives up the fixed 78px
     column that aligned the three labels — centring and left-alignment can't
     both be true, and centring is what was asked for. */
  .hero__stats li {
    grid-template-columns: auto auto;
    justify-content: center;
    gap: 12px;
    text-align: left;          /* the pair is centred; the label itself stays flush */
  }
  .hero__statlabel { margin-inline: 0; }
}

/* =========================================================================
   TESTIMONIALS — compressed
   The cards measured ~506px tall each, which is most of a laptop screen for two
   quotes. The quotes themselves are untouched: they are attributed words and
   not ours to trim. Everything around them tightens instead — type down a step,
   padding in, the before/now rows condensed, and the client logo replacing a
   46px monogram that said "AP" on both cards.
   ========================================================================= */
.tstm { padding-block: calc(var(--section-y) * 0.85); }
.tstm__card { padding: clamp(22px, 2.4vw, 30px); }
.tstm__quote::before { font-size: 40px; margin-bottom: 6px; }
.tstm__quote p { font-size: clamp(16px, 1.6vw, 18.5px); line-height: 1.5; }

.tstm__who {
  margin-top: clamp(18px, 2vw, 22px);
  padding-top: clamp(14px, 1.6vw, 18px);
  gap: 12px;
}
/* Client logo in place of the initials chip. White tile so the brand colours
   read correctly against the dark card. */
.tstm__logo {
  display: block;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--edge-light), 0 1px 3px rgba(0,0,0,0.45);
}
.tstm__logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tstm__name { font-size: 16px; }
.tstm__role { font-size: 13px; }

.tstm__stats { margin-top: clamp(16px, 1.8vw, 20px); gap: 6px; }
.tstm__stats > div { grid-template-columns: 96px minmax(0, 1fr); padding-top: 7px; gap: 12px; }
.tstm__stats dt { font-size: 10.5px; letter-spacing: 0.1em; }
.tstm__stats dd { font-size: 14px; line-height: 1.45; }
.tstm__more { padding-top: clamp(16px, 1.8vw, 20px); font-size: 14.5px; }

@media (max-width: 620px) {
  .tstm__card { padding: 20px 18px; }
  .tstm__quote p { font-size: 16px; }
  .tstm__stats > div { grid-template-columns: 84px minmax(0, 1fr); gap: 10px; }
  .tstm__stats dd { font-size: 13.5px; }
}

/* --- Testimonials, second pass -------------------------------------------
   The decorative quote mark was costing ~46px of flow height per card for a
   piece of pure decoration. Moved to the top-right corner as a watermark: it
   keeps the character and takes no vertical space at all. The before/now rows
   and the padding tighten again; the quotes themselves stay untouched. ----- */
.tstm__card { position: relative; padding: clamp(20px, 2.2vw, 26px); }
.tstm__quote::before {
  position: absolute;
  top: 6px;
  right: 16px;
  margin: 0;
  font-size: 62px;
  line-height: 1;
  opacity: 0.16;
  pointer-events: none;
}
.tstm__quote p { font-size: clamp(15.5px, 1.5vw, 17.5px); line-height: 1.52; }

.tstm__who { margin-top: 16px; padding-top: 14px; }
.tstm__stats { margin-top: 16px; gap: 4px; }
.tstm__stats > div { padding-top: 6px; }
.tstm__stats dd { font-size: 13.5px; line-height: 1.4; }
.tstm__more { padding-top: 16px; }

/* =========================================================================
   TRUST STRIP (home)
   The condensed form of /security. Four commitments, one line each, plus the
   "what we don't claim" sentence — which stays on the home page deliberately,
   because it is the most differentiating thing on the site and belongs where
   the visitor is deciding, not behind a click.
   ========================================================================= */
.trust--strip { padding-block: calc(var(--section-y) * 0.62); }

.tstrip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 32px);
  margin-top: clamp(26px, 3.4vw, 38px);
  padding-top: clamp(20px, 2.6vw, 28px);
  border-top: 1px solid var(--border);
}
.tstrip h3 {
  font-family: var(--display);
  font-size: clamp(15.5px, 1.6vw, 17px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: 7px;
}
/* A short accent rule above each item, so four short blocks read as a set
   rather than four stray paragraphs. */
.tstrip li { position: relative; padding-top: 14px; }
.tstrip li::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 20px; height: 2px;
  border-radius: 2px;
  background: var(--accent);
  opacity: 0.75;
}
.tstrip p { color: var(--text-soft); font-size: 14px; line-height: 1.5; }

.tstrip__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  margin-top: clamp(24px, 3vw, 32px);
  padding-top: clamp(18px, 2.2vw, 24px);
  border-top: 1px solid var(--border);
}
.tstrip__note {
  color: var(--text-soft);
  font-size: clamp(14.5px, 1.5vw, 16px);
  line-height: 1.6;
  max-width: 62ch;
}
.tstrip__more { flex: none; }

@media (max-width: 900px) {
  .tstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .tstrip { grid-template-columns: 1fr; gap: 16px; }
  .tstrip__foot { flex-direction: column; align-items: flex-start; }
}

/* --- Hero stat: the before/after delta -----------------------------------
   "78% → 100%" set flat at the full figure size measures ~275px against 244px
   of card, so the before-value and arrow step down. It also reads better this
   way: the eye lands on the number that matters, with the old one as context.
   The 78% is Sushilanand's own published IndiaMART response rate — if that
   figure ever changes, the case study and its results table carry it too. --- */
.hero__stat--delta { display: flex; align-items: baseline; justify-content: center; gap: 0; }
.hero__stat-was {
  font-size: 0.56em;
  color: var(--text-soft);
  letter-spacing: -0.01em;
}
.hero__stat-arrow {
  font-size: 0.44em;
  color: var(--text-soft);
  padding-inline: 0.34em;
  position: relative;
  top: -0.12em;
}

@media (max-width: 620px) {
  /* The horizontal card layout on phones gives the figure a fixed 78px column;
     the delta needs the room, so this one card lets its figure size itself. */
  .hero__stats li:has(.hero__stat--delta) { grid-template-columns: auto minmax(0, 1fr); }
  .hero__stat--delta { justify-content: flex-start; }
}