/* ==========================================================================
   umerqureshi.com — FINAL v4 "Definitive"
   Dual theme (dark default #090A11 · light #FBFBFD) · indigo→teal→blue accent
   Wide modern layout · glass menu · per-section bespoke visuals
   Self-contained. System fonts only. No external assets.
   ========================================================================== */

/* ---------- Shared tokens ----------
   CANONICAL (2026-07-08, user-locked): accent colors are theme-specific and
   live ONLY in the per-theme blocks below —
     · DARK  = frankshines.com  → navy #0B1A30 + antique-gold #D2A94A + sky-blue #2E86E6
     · LIGHT = analyticsaiml.com → skin #FBFAF6 + teal #0F766E + sunset ochre #C27310
   No indigo. Decorative rgba() accents use the --rgb-a/--rgb-b/--rgb-c channels. */
:root {
  --font-sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-head: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;

  --container:      min(90vw, 1440px);
  --container-wide: min(92vw, 1560px);
  --container-narrow: min(90vw, 860px);
  --pad-x: clamp(1.25rem, 4vw, 3.5rem);

  --radius:    18px;
  --radius-sm: 12px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --header-h: 76px;
  --header-h-min: 62px;
}

/* ---------- DARK theme (default) — inspired by frankshines.com ----------
   Deep navy canvas · antique-gold accent · sky-blue action + links. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:        #0B1A30;
  --bg-2:      #0E1F38;
  --bg-3:      #12294A;
  --ink:       #DCE3EC;
  --ink-soft:  #9BA7BC;
  --ink-dim:   #6E7A90;
  --line:      rgba(199,206,218,.14);
  --line-soft: rgba(199,206,218,.07);

  --card-bg:     rgba(199,206,218,.045);
  --card-solid:  #0E1F38;
  --card-raised: #14294A;
  --glass:       rgba(11,26,48,.66);
  --glass-solid: rgba(11,26,48,.95);

  --indigo:      #2E86E6;
  --indigo-btn:  #2E86E6;
  --indigo-deep: #1F6FD0;
  --teal:        #D2A94A;
  --mint:        #E7C879;
  --blue:        #5BB0F2;
  --ok:          #46D08A;
  --rgb-a: 46,134,230;    /* primary blue */
  --rgb-b: 210,169,74;    /* gold */
  --rgb-c: 91,176,242;    /* sky blue */
  --grad:     linear-gradient(135deg, #5BB0F2, #D2A94A);
  --grad-135: linear-gradient(135deg, #5BB0F2 0%, #2E86E6 45%, #D2A94A 100%);

  --hl-a: #7FC0F6;  --hl-b: #E7C879;
  --icon-g1: #5BB0F2;  --icon-g2: #D2A94A;
  --icon-fill: rgba(210,169,74,.14);
  --chip-bg: rgba(199,206,218,.06);

  --shadow-1: 0 2px 10px rgba(3,9,20,.55);
  --shadow-2: 0 16px 50px rgba(3,9,20,.6);
  --glow-indigo: 0 0 34px rgba(46,134,230,.3);
  --glow-teal:   0 0 30px rgba(210,169,74,.28);

  --term-bg: #0A1526;
  --term-line: rgba(199,206,218,.16);

  --net-node: #D2A94A;
  --net-hub:  #5BB0F2;
  --net-link-rgb: 91, 176, 242;

  --aurora-op: .55;
  --grain-op: .05;
  --sel-bg: rgba(210,169,74,.32);
}

/* ---------- LIGHT theme — analyticsaiml.com identity: teal + sunset ochre on skin ---------- */
:root[data-theme="light"] {
  color-scheme: light;
  --bg:        #FBFAF6;   /* warm skin white */
  --bg-2:      #F5F1E8;   /* cream / skin */
  --bg-3:      #EFEADF;   /* deeper skin */
  --ink:       #1B1B18;
  --ink-soft:  #4A4843;
  --ink-dim:   #7B776D;
  --line:      rgba(27,27,24,.12);
  --line-soft: rgba(27,27,24,.06);

  --card-bg:     #FFFFFF;
  --card-solid:  #FFFFFF;
  --card-raised: #FFFFFF;
  --glass:       rgba(251,250,246,.72);
  --glass-solid: rgba(255,255,255,.96);

  --indigo:      #0F766E;
  --indigo-btn:  #0F766E;
  --indigo-deep: #0B5952;
  --teal:        #0F766E;
  --mint:        #C27310;
  --blue:        #0B5952;
  --ok:          #0F766E;
  --rgb-a: 15,118,110;    /* teal */
  --rgb-b: 194,115,16;    /* ochre */
  --rgb-c: 15,118,110;    /* teal */
  --grad:     linear-gradient(135deg, #0F766E, #C27310);
  --grad-135: linear-gradient(135deg, #0F766E 0%, #14907F 48%, #C27310 100%);

  --hl-a: #0F766E;  --hl-b: #C27310;
  --icon-g1: #0F766E;  --icon-g2: #C27310;
  --icon-fill: rgba(15,118,110,.12);
  --chip-bg: rgba(15,118,110,.06);

  --shadow-1: 0 1px 3px rgba(40,34,20,.06), 0 6px 20px rgba(40,34,20,.07);
  --shadow-2: 0 4px 10px rgba(40,34,20,.07), 0 18px 50px rgba(40,34,20,.11);
  --glow-indigo: 0 10px 30px rgba(15,118,110,.2);
  --glow-teal:   0 10px 28px rgba(194,115,16,.18);

  --term-bg: #0C0E1A;               /* the terminal stays a dark object */
  --term-line: rgba(148,163,205,.22);

  --net-node: #0F766E;
  --net-hub:  #C27310;
  --net-link-rgb: 15, 118, 110;

  --aurora-op: .3;
  --grain-op: .025;
  --sel-bg: rgba(194,115,16,.22);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.68;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  transition: background-color .35s ease, color .35s ease;
}
img, svg, canvas { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 800; line-height: 1.12; margin: 0 0 .55em; letter-spacing: -.022em; }
h1 { font-size: clamp(2.5rem, 5.2vw, 4.15rem); }
h2 { font-size: clamp(1.95rem, 3.5vw, 2.85rem); }
h3 { font-size: clamp(1.18rem, 1.9vw, 1.42rem); }
p  { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.25em; }
a { color: var(--blue); text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 3px;
  border-radius: 4px;
}
::selection { background: var(--sel-bg); }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon-stop-a { stop-color: var(--icon-g1); }
.icon-stop-b { stop-color: var(--icon-g2); }
.ico-fill  { fill: var(--icon-fill); }
.ico-solid { fill: var(--icon-g2); }

/* Visuals only animate while on screen (JS toggles .live) and tab visible */
.viz-gate { --play: paused; }
.viz-gate.viz-live { --play: running; }
html.page-hidden .viz-gate { --play: paused; }
html.page-hidden .card--glow { animation-play-state: paused; }

/* Grain overlay — very fine, both themes */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 2147483000;
  pointer-events: none;
  opacity: var(--grain-op);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* Headline gradient — the ONE emphasized word */
.hl {
  font-style: italic;
  background: linear-gradient(110deg, var(--hl-a), var(--hl-b) 42%, var(--hl-a) 84%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: .06em;
  animation: hlShimmer 7s linear infinite;
}
@keyframes hlShimmer { to { background-position: 220% center; } }

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 3000;
  background: var(--indigo-btn); color: #fff;
  padding: .6rem 1.1rem; border-radius: 10px; font-weight: 600;
  transition: top .25s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* ---------- Layout primitives ---------- */
.container        { width: var(--container);        margin-inline: auto; padding-inline: var(--pad-x); }
.container-wide   { width: var(--container-wide);   margin-inline: auto; padding-inline: var(--pad-x); }
.container-narrow { width: var(--container-narrow); margin-inline: auto; padding-inline: var(--pad-x); }

.section { padding-block: clamp(4rem, 8vw, 7.5rem); position: relative; }
.section--alt { background: var(--bg-2); border-block: 1px solid var(--line-soft); }
.section--tight { padding-block: clamp(2.75rem, 5vw, 4.25rem); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 1.1rem;
  display: flex; align-items: center; gap: .6rem;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; border-radius: 2px;
  background: var(--grad); flex: none;
}
.eyebrow .dot { color: var(--mint); }
.lead { font-size: clamp(1.08rem, 1.5vw, 1.24rem); color: var(--ink-soft); max-width: 62ch; }

/* ---------- Aurora ambient background ---------- */
.aurora {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  opacity: var(--aurora-op);
  z-index: 0;
}
.aurora span {
  position: absolute; border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
}
.aurora .a1 { width: 46vw; height: 46vw; left: -12vw; top: -18vw;  background: rgba(var(--rgb-a),.5);  animation: aur1 42s ease-in-out infinite alternate; }
.aurora .a2 { width: 38vw; height: 38vw; right: -10vw; top: 4vw;   background: rgba(var(--rgb-b),.42); animation: aur2 54s ease-in-out infinite alternate; }
.aurora .a3 { width: 30vw; height: 30vw; left: 32vw; bottom: -20vw; background: rgba(var(--rgb-c),.34); animation: aur3 64s ease-in-out infinite alternate; }
@keyframes aur1 { to { transform: translate(9vw, 7vw)  scale(1.12); } }
@keyframes aur2 { to { transform: translate(-7vw, 9vw) scale(1.16); } }
@keyframes aur3 { to { transform: translate(-9vw,-7vw) scale(1.1); } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .8rem 1.65rem;
  border-radius: 999px;
  font-weight: 700; font-size: .98rem; font-family: var(--font-sans);
  border: 1.5px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: transform .18s var(--ease), box-shadow .3s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
  will-change: transform;
}
.btn--lg { padding: 1rem 2.1rem; font-size: 1.05rem; }
.btn--primary {
  background: var(--indigo-btn); color: #fff;
  box-shadow: 0 6px 22px rgba(var(--rgb-a),.35);
}
.btn--primary:hover { filter: brightness(1.08); box-shadow: 0 10px 30px rgba(var(--rgb-a),.5); }
.btn--grad {
  background: var(--grad-135); color: #fff;
  background-size: 160% 160%;
  box-shadow: 0 8px 26px rgba(var(--rgb-a),.35);
}
.btn--grad:hover { background-position: 90% 60%; box-shadow: 0 12px 36px rgba(var(--rgb-b),.4); }
.btn--ghost {
  border-color: var(--line); color: var(--ink);
  background: transparent;
}
.btn--ghost:hover { border-color: var(--indigo); color: var(--indigo); background: rgba(var(--rgb-a),.06); }
:root[data-theme="dark"] .btn--ghost:hover { color: #7FC0F6; border-color: #5BB0F2; }

/* ---------- Icon chips (the cohesive icon system) ---------- */
.icon-chip {
  width: 54px; height: 54px; flex: none;
  display: grid; place-items: center;
  border-radius: 16px;
  position: relative; isolation: isolate;
  background:
    linear-gradient(155deg, rgba(var(--rgb-c),.14), var(--card-raised) 46%) padding-box,
    linear-gradient(135deg, rgba(var(--rgb-a),.85), rgba(var(--rgb-b),.85)) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 6px 20px rgba(var(--rgb-a),.2), inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .3s var(--ease), box-shadow .3s ease;
}
.icon-chip::before { /* top sheen */
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background: linear-gradient(180deg, rgba(255,255,255,.1), transparent 55%);
}
.icon-chip::after { /* soft aura */
  content: ""; position: absolute; inset: -9px; border-radius: 22px; z-index: -2;
  background: radial-gradient(closest-side, rgba(var(--rgb-b),.2), transparent 72%);
}
.card:hover .icon-chip, .svc:hover .icon-chip, .channel:hover .icon-chip {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 10px 26px rgba(var(--rgb-a),.3);
}
.icon-chip svg { width: 27px; height: 27px; filter: drop-shadow(0 1px 3px rgba(var(--rgb-a),.35)); }
.icon-chip--sm { width: 44px; height: 44px; border-radius: 13px; }
.icon-chip--sm svg { width: 22px; height: 22px; }

/* ---------- Cards ---------- */
.card {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 2.4vw, 2.2rem);
  position: relative;
  box-shadow: var(--shadow-1);
  transition: transform .25s var(--ease), box-shadow .35s ease, border-color .25s ease;
}
:root[data-theme="dark"] .card { backdrop-filter: blur(4px); }

/* Animated gradient border for feature cards */
@property --gb-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.card--glow { border: 1px solid transparent; }
.card--glow {
  background:
    linear-gradient(var(--card-solid), var(--card-solid)) padding-box,
    conic-gradient(from var(--gb-angle),
      rgba(var(--rgb-a),.55), rgba(var(--rgb-c),.2), rgba(var(--rgb-b),.55),
      rgba(var(--rgb-a),.12), rgba(var(--rgb-a),.55)) border-box;
  animation: gb-spin 9s linear infinite;
  animation-play-state: var(--spin, paused);
}
@keyframes gb-spin { to { --gb-angle: 360deg; } }
.card--glow.in, .card--glow:hover { --spin: running; }

/* Spotlight follows the cursor (JS sets --mx/--my) */
.spot::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 40%),
    rgba(var(--rgb-a),.13), transparent 65%);
  opacity: 0; transition: opacity .35s ease; pointer-events: none;
}
.spot:hover::before { opacity: 1; }

.chip {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--chip-bg);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: .42rem 1rem;
  font-size: .92rem; font-weight: 600;
  white-space: nowrap;
}
.chip svg { color: var(--mint); flex: none; }
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .6rem; }

.pullquote {
  font-family: var(--font-head);
  font-size: clamp(1.25rem, 2.1vw, 1.65rem);
  font-weight: 700; font-style: italic;
  line-height: 1.4;
  border-left: 3px solid; border-image: var(--grad) 1;
  margin: 1.6rem 0; padding: .35rem 0 .35rem 1.4rem;
  color: var(--ink);
}
.pullquote--center { border: 0; text-align: center; padding: 0; }
.pullquote--center::after {
  content: ""; display: block; width: 68px; height: 3px; border-radius: 3px;
  background: var(--grad); margin: 1rem auto 0;
}
.u-link { font-weight: 700; color: var(--blue); border-bottom: 1px solid transparent; }
.u-link:hover { border-color: currentColor; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }

/* ==========================================================================
   HEADER — sticky glass, scroll-progress, condense on scroll
   ========================================================================== */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1402;
  background: transparent; pointer-events: none;
}
.scroll-progress span {
  display: block; height: 100%; width: 100%;
  background: var(--grad-135);
  transform: scaleX(0); transform-origin: 0 50%;
}

.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1400;
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--line-soft);
  transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.site-header.scrolled { box-shadow: var(--shadow-1); border-bottom-color: var(--line); }
.header-inner {
  display: flex; align-items: center; gap: 1.4rem;
  height: var(--header-h);
  transition: height .3s var(--ease);
}
.site-header.scrolled .header-inner { height: var(--header-h-min); }

/* Brand / logo */
.brand {
  display: inline-flex; align-items: center; gap: .7rem;
  color: var(--ink); font-family: var(--font-head);
  font-weight: 800; font-size: 1.14rem; letter-spacing: -.02em;
  margin-right: auto;
}
.logo-badge { width: 36px; height: 36px; border-radius: 10px; flex: none;
  filter: drop-shadow(0 3px 10px rgba(var(--rgb-a),.4));
  transition: transform .3s var(--ease);
}
.brand:hover .logo-badge { transform: rotate(-5deg) scale(1.05); }
.brand-caret {
  display: inline-block; width: 3px; height: 1.05em; margin-left: .18em;
  background: var(--grad); border-radius: 2px;
  animation: caretBlink 1.4s steps(1) infinite;
  align-self: center;
}
@keyframes caretBlink { 50% { opacity: 0; } }

/* Nav */
.primary-nav { display: flex; align-items: center; gap: clamp(.4rem, 1.3vw, 1.1rem); }
.nav-link {
  position: relative;
  color: var(--ink-soft); font-weight: 600; font-size: .99rem;
  padding: .5rem .55rem;
  transition: color .2s ease;
}
.nav-link::after {
  content: ""; position: absolute; left: .55rem; right: .55rem; bottom: .18rem;
  height: 2px; border-radius: 2px;
  background: var(--grad);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .3s var(--ease);
}
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--ink); }
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: .8rem; }
.header-actions .btn--primary { padding: .62rem 1.35rem; font-size: .93rem; }

/* Theme toggle */
.theme-toggle {
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--chip-bg);
  border: 1px solid var(--line);
  color: var(--ink-soft); cursor: pointer;
  position: relative; overflow: hidden;
  transition: border-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.theme-toggle:hover { border-color: var(--indigo); color: var(--ink); box-shadow: 0 0 18px rgba(var(--rgb-a),.25); }
.theme-toggle svg {
  position: absolute; width: 21px; height: 21px;
  transition: transform .5s var(--ease), opacity .35s ease;
}
:root[data-theme="dark"]  .theme-toggle .tt-sun  { transform: rotate(0) scale(1);        opacity: 1; }
:root[data-theme="dark"]  .theme-toggle .tt-moon { transform: rotate(120deg) scale(.3);  opacity: 0; }
:root[data-theme="light"] .theme-toggle .tt-sun  { transform: rotate(-120deg) scale(.3); opacity: 0; }
:root[data-theme="light"] .theme-toggle .tt-moon { transform: rotate(0) scale(1);        opacity: 1; }

/* Burger */
.nav-toggle {
  display: none;
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--chip-bg); border: 1px solid var(--line);
  cursor: pointer; place-items: center;
}
.nav-toggle .bars { display: grid; gap: 4.5px; width: 18px; }
.nav-toggle .bars span { height: 2px; border-radius: 2px; background: var(--ink); transition: transform .3s var(--ease), opacity .2s ease; }
body.nav-open .nav-toggle .bars span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body.nav-open .nav-toggle .bars span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle .bars span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.drawer-overlay {
  position: fixed; inset: 0; z-index: 1398;
  background: rgba(4,5,10,.55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
body.nav-open .drawer-overlay { opacity: 1; pointer-events: auto; }
.nav-mobile-cta { display: none; }

/* ==========================================================================
   HERO — copy + animated "ai-consulting" terminal
   ========================================================================== */
.hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(3.2rem, 7vw, 6.2rem));
  padding-bottom: clamp(3.6rem, 7vw, 6.4rem);
  overflow: hidden;
}
.hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.02fr .98fr;
  gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: center;
}
.hero--sub { padding-bottom: clamp(2.2rem, 4vw, 3.4rem); }
.hero--sub .hero-grid { grid-template-columns: 1fr; }
.hero-copy .lead { max-width: 58ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.9rem; }
.hero-trustline {
  display: flex; align-items: center; gap: .65rem; flex-wrap: wrap;
  margin-top: 2rem; color: var(--ink-dim); font-size: .92rem; font-weight: 600;
}
.hero-trustline .stars { color: #F5B324; letter-spacing: .1em; }

.hero-scrollcue {
  position: absolute; left: 50%; bottom: 1.1rem; transform: translateX(-50%);
  color: var(--ink-dim); animation: cueBob 2.4s ease-in-out infinite; z-index: 1;
}
@keyframes cueBob { 0%,100% { transform: translate(-50%, 0); opacity: .55; } 50% { transform: translate(-50%, 8px); opacity: 1; } }

/* The terminal */
.term {
  border-radius: 16px;
  background: linear-gradient(180deg, var(--term-bg), #0B0E1E 130%);
  border: 1px solid var(--term-line);
  box-shadow: 0 30px 80px rgba(2,4,12,.55), var(--glow-indigo);
  overflow: hidden;
  max-width: 640px; margin-left: auto;
  position: relative;
}
:root[data-theme="light"] .term { box-shadow: 0 30px 70px rgba(15,23,42,.28), 0 0 34px rgba(var(--rgb-a),.18); }
.term::before { /* top sheen */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 60px;
  background: linear-gradient(180deg, rgba(148,163,205,.07), transparent);
  pointer-events: none;
}
.term-bar {
  display: flex; align-items: center; gap: .5rem;
  padding: .8rem 1.1rem;
  border-bottom: 1px solid var(--term-line);
}
.term-bar .td { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.td.r { background: #FF5F57; } .td.y { background: #FEBC2E; } .td.g { background: #28C840; }
.term-title {
  margin-inline: auto;
  font-family: var(--font-mono); font-size: .82rem; color: #8E9AB5;
}
.term-live {
  display: inline-flex; align-items: center; gap: .42rem;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 700;
  color: #34D399; letter-spacing: .08em;
}
.term-live i {
  width: 7px; height: 7px; border-radius: 50%; background: #34D399;
  box-shadow: 0 0 8px #34D399;
  animation: beacon 1.6s ease-in-out infinite;
}
@keyframes beacon { 50% { opacity: .35; } }
.term-body {
  padding: 1.15rem 1.25rem 1.3rem;
  font-family: var(--font-mono);
  font-size: clamp(.76rem, 1.05vw, .875rem);
  line-height: 2.05;
  min-height: 262px;
  color: #AAB6D3;
}
.tl { display: flex; align-items: baseline; gap: .8rem; white-space: nowrap; }
.tl-text { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tl--cmd .tl-text { color: #C7D2FE; font-weight: 600; }
.tl--out .tl-text { color: #9AA8C7; }
.tl .tm { color: #EBC981; font-weight: 700; }
.tl-check { margin-left: auto; color: #34D399; font-weight: 700; opacity: 0; transform: scale(.4); flex: none; }
.tl.done .tl-check { opacity: 1; transform: scale(1); transition: opacity .25s ease, transform .3s cubic-bezier(.34,1.6,.5,1); }
.term-cursor {
  display: inline-block; width: 8px; height: 1.05em; margin-left: 2px;
  background: #EBC981; vertical-align: text-bottom; border-radius: 1px;
  animation: caretBlink 1s steps(1) infinite;
}

/* ==========================================================================
   TRUST METRICS
   ========================================================================== */
.stats-strip { padding-block: clamp(2.6rem, 4.6vw, 4rem); border-block: 1px solid var(--line-soft); background: var(--bg-2); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2.4vw, 2.4rem); }
.stat { display: flex; align-items: center; gap: 1.1rem; }
.stat .num {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1;
  letter-spacing: -.03em;
  background: linear-gradient(135deg, var(--hl-a), var(--hl-b));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat .num .suffix { font-size: .62em; }
.stat .label { color: var(--ink-soft); font-weight: 600; font-size: .95rem; line-height: 1.35; }
.stats-caption { text-align: center; color: var(--ink-dim); font-size: .95rem; margin: 2.1rem 0 0; font-weight: 600; }

/* ==========================================================================
   TOOLS MARQUEE — two rows, opposite directions
   ========================================================================== */
.tools-band {
  padding-block: clamp(2.6rem, 4.5vw, 3.8rem);
  overflow: hidden;
}
.tools-eyebrow {
  text-align: center; font-family: var(--font-mono); font-size: .8rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-dim);
  margin: 0 0 1.7rem;
}
.marquee {
  overflow: hidden; padding-block: .5rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex; gap: .9rem; width: max-content;
  animation: marqueeMove 42s linear infinite;
  animation-play-state: var(--play, paused);
}
.marquee[data-dir="right"] .marquee-track { animation-direction: reverse; animation-duration: 50s; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marqueeMove { to { transform: translateX(-50%); } }
.tchip {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .68rem 1.35rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--chip-bg);
  color: var(--ink-soft); font-weight: 700; font-size: .95rem;
  white-space: nowrap;
}
.tchip svg { width: 18px; height: 18px; flex: none; }

/* ==========================================================================
   PAIN POINTS
   ========================================================================== */
.grid--pain { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.1rem, 2vw, 1.8rem); margin-top: 2.6rem; }
.pillar { display: flex; flex-direction: column; gap: .9rem; }
.pillar .kicker { font-family: var(--font-mono); color: var(--ink-dim); font-size: .82rem; letter-spacing: .12em; }
.pillar h3 { margin: 0; }
.pillar p { margin: 0; color: var(--ink-soft); }
.closing-line { margin-top: 2.4rem; font-size: 1.14rem; color: var(--ink-soft); }
.closing-line strong { color: var(--ink); }

/* ==========================================================================
   SERVICES — bento grid, each card carries its own on-topic visual
   ========================================================================== */
.grid--services {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.1rem, 2vw, 1.8rem); margin-top: 2.8rem;
}
.svc { display: flex; flex-direction: column; gap: .85rem; }
.svc-1 { grid-column: span 7; }
.svc-2 { grid-column: span 5; }
.svc-3 { grid-column: span 5; }
.svc-4 { grid-column: span 7; }
.svc-head { display: flex; align-items: center; gap: 1rem; }
.svc-head .kicker { font-family: var(--font-mono); color: var(--ink-dim); font-size: .8rem; letter-spacing: .12em; display: block; margin-bottom: .2rem; }
.svc h3 { margin: 0; }
.svc-benefit { font-style: italic; color: var(--ink); font-weight: 600; font-size: 1.05rem; margin: 0; }
.svc-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .9rem; }
.svc-2 .svc-list, .svc-3 .svc-list { grid-template-columns: 1fr; }
.svc-list li { display: flex; gap: .55rem; align-items: baseline; color: var(--ink-soft); font-size: .95rem; line-height: 1.45; }
.svc-list li::before {
  content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%;
  background: var(--grad); transform: translateY(-2px);
}
.svc-viz {
  margin-top: auto; position: relative; overflow: hidden;
  border-radius: 14px; border: 1px solid var(--line-soft);
  background: var(--bg-3);
  height: 200px;
}
:root[data-theme="dark"] .svc-viz { background: rgba(5,6,12,.55); }
.viz-label {
  position: absolute; top: .65rem; left: .8rem; z-index: 3;
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-dim);
  background: var(--glass-solid); border: 1px solid var(--line-soft);
  padding: .18rem .55rem; border-radius: 999px;
}
.services-cta { margin-top: 2.6rem; text-align: center; }

/* --- Visual 1: agent node-network (canvas) --- */
.viz-net-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* --- Visual 2: query → ranked + cited by AI --- */
.viz-aeo { padding: 2.4rem .95rem .8rem; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: .8rem; align-items: start; }
.aeo-left, .aeo-answer { min-width: 0; }
.aeo-query span { overflow: hidden; text-overflow: ellipsis; }
.aeo-query {
  display: flex; align-items: center; gap: .5rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--card-solid);
  padding: .42rem .8rem; margin-bottom: .75rem;
  font-family: var(--font-mono); font-size: .68rem; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden;
}
.aeo-query svg { flex: none; width: 13px; height: 13px; color: var(--ink-dim); }
.aeo-serp { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; position: relative; }
.serp-row {
  display: flex; align-items: center; gap: .5rem;
  height: 26px; border-radius: 8px; padding-inline: .5rem;
  background: var(--card-solid); border: 1px solid var(--line-soft);
  position: relative;
}
.serp-row .fav { width: 12px; height: 12px; border-radius: 4px; background: var(--line); flex: none; font-size: 0; }
.serp-row .bar { height: 6px; border-radius: 3px; background: var(--line); flex: 1; transform-origin: 0 50%; }
.serp-you { border-color: rgba(var(--rgb-b),.5); z-index: 2; }
.serp-you .fav { background: var(--grad); }
.serp-you .bar { background: linear-gradient(90deg, var(--icon-g1), var(--icon-g2)); }
.serp-badge {
  font-family: var(--font-mono); font-size: .64rem; font-weight: 700; color: #04211C;
  background: var(--mint); border-radius: 6px; padding: .05rem .4rem; flex: none;
  opacity: 0;
}
.viz-aeo .serp-you   { animation: aeoClimb 9s var(--ease) infinite; animation-play-state: var(--play, paused); }
.viz-aeo .serp-first { animation: aeoDrop  9s var(--ease) infinite; animation-play-state: var(--play, paused); }
.viz-aeo .serp-badge { animation: aeoBadge 9s ease infinite;        animation-play-state: var(--play, paused); }
.viz-aeo .bar        { animation: aeoBar   9s var(--ease) infinite; animation-play-state: var(--play, paused); }
@keyframes aeoClimb { 0%, 16% { transform: translateY(0); } 26%, 90% { transform: translateY(-34px); } 97%, 100% { transform: translateY(0); } }
@keyframes aeoDrop  { 0%, 16% { transform: translateY(0); } 26%, 90% { transform: translateY(34px); }  97%, 100% { transform: translateY(0); } }
@keyframes aeoBadge { 0%, 27% { opacity: 0; transform: scale(.55); } 33%, 90% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; } }
@keyframes aeoBar   { 0% { transform: scaleX(.45); } 12%, 100% { transform: scaleX(1); } }
.aeo-answer {
  border: 1px solid rgba(var(--rgb-a),.4); border-radius: 12px;
  background: var(--card-solid);
  padding: .7rem .8rem;
  box-shadow: 0 8px 26px rgba(var(--rgb-a),.14);
  font-size: .74rem; line-height: 1.55; color: var(--ink-soft);
  animation: aeoAnswer 9s var(--ease) infinite; animation-play-state: var(--play, paused);
}
.aeo-answer p { margin: 0 0 .45rem; }
.aeo-answer strong { color: var(--ink); }
.aeo-answer .cite {
  display: inline-block; font-family: var(--font-mono); font-size: .62rem; font-weight: 700;
  color: var(--mint); border: 1px solid rgba(var(--rgb-b),.45); border-radius: 5px;
  padding: 0 .3rem; margin-left: .15rem;
}
.aeo-answer-head {
  display: flex; align-items: center; gap: .45rem;
  font-family: var(--font-mono); font-size: .64rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--indigo);
  margin-bottom: .45rem;
}
:root[data-theme="dark"] .aeo-answer-head { color: #7FC0F6; }
.aeo-answer-head svg { width: 13px; height: 13px; }
.aeo-sources { display: flex; flex-wrap: wrap; gap: .3rem; }
.aeo-sources .src {
  font-family: var(--font-mono); font-size: .58rem; color: var(--ink-dim);
  border: 1px solid var(--line-soft); border-radius: 999px; padding: .08rem .45rem;
}
@keyframes aeoAnswer { 0%, 38% { opacity: 0; transform: translateY(12px); } 48%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }

/* --- Visual 3: browser frame assembling a layout --- */
.viz-web { padding: 2.35rem .95rem .85rem; }
.wb-frame {
  height: 100%; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line); background: var(--card-solid);
  display: flex; flex-direction: column;
}
.wb-top {
  display: flex; align-items: center; gap: .4rem;
  padding: .4rem .6rem; border-bottom: 1px solid var(--line-soft);
}
.wb-top i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.wb-url {
  flex: 1; margin-left: .3rem; height: 14px; border-radius: 999px;
  background: var(--bg-3); border: 1px solid var(--line-soft);
  font-family: var(--font-mono); font-size: .56rem; color: var(--ink-dim);
  display: flex; align-items: center; padding-inline: .55rem;
}
.wb-stage { position: relative; flex: 1; padding: .55rem; display: grid; grid-template-rows: 14px 34px 1fr 16px; gap: .5rem; }
.wb-block { border-radius: 6px; background: var(--bg-3); border: 1px solid var(--line-soft); position: relative; overflow: hidden; }
.wb-nav  { background: linear-gradient(90deg, rgba(var(--rgb-a),.28), rgba(var(--rgb-b),.22)); }
.wb-hero { background: linear-gradient(135deg, rgba(var(--rgb-a),.34), rgba(var(--rgb-c),.18)); }
.wb-cards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .5rem; border: 0; background: none; }
.wb-cards .wb-block { min-height: 100%; }
.wb-cta { width: 44%; background: var(--grad); border: 0; justify-self: start; }
.viz-web .wb-anim { opacity: 0; animation: wbIn 8s var(--ease) infinite; animation-play-state: var(--play, paused); }
.viz-web .wb-anim.d1 { animation-delay: .0s; } .viz-web .wb-anim.d2 { animation-delay: .35s; }
.viz-web .wb-anim.d3 { animation-delay: .7s; } .viz-web .wb-anim.d4 { animation-delay: .95s; }
.viz-web .wb-anim.d5 { animation-delay: 1.2s; } .viz-web .wb-anim.d6 { animation-delay: 1.5s; }
@keyframes wbIn {
  0% { opacity: 0; transform: translateY(12px) scale(.96); }
  8%, 88% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: translateY(12px) scale(.96); }
}
.wb-beam {
  position: absolute; left: 0; right: 0; top: 0; height: 34px; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(var(--rgb-b),.14), transparent);
  animation: wbBeam 8s linear infinite; animation-play-state: var(--play, paused);
}
@keyframes wbBeam { 0% { transform: translateY(-40px); opacity: 1; } 30% { transform: translateY(160px); opacity: 1; } 34%, 100% { transform: translateY(180px); opacity: 0; } }

/* --- Visual 4: DMAIC cycle ring --- */
.viz-dmaic { display: grid; place-items: center; padding: 1.4rem .8rem .8rem; }
.viz-dmaic svg { height: 100%; max-height: 176px; width: auto; overflow: visible; }
.dm-base { stroke: var(--line); }
.dm-seg { stroke: url(#dmaicGrad); opacity: .22; }
.viz-dmaic .dm-seg { animation: dmSeg 12.5s ease infinite; animation-play-state: var(--play, paused); }
.dm-seg.s1 { animation-delay: 0s; }   .dm-seg.s2 { animation-delay: 2.5s; }
.dm-seg.s3 { animation-delay: 5s; }   .dm-seg.s4 { animation-delay: 7.5s; }
.dm-seg.s5 { animation-delay: 10s; }
@keyframes dmSeg { 0%, 2% { opacity: .22; } 5%, 17% { opacity: 1; } 24%, 100% { opacity: .22; } }
.dm-letter { font-family: var(--font-mono); font-size: 13px; font-weight: 700; fill: var(--ink-dim); }
.viz-dmaic .dm-letter { animation: dmLetter 12.5s ease infinite; animation-play-state: var(--play, paused); }
.dm-letter.l1 { animation-delay: 0s; }   .dm-letter.l2 { animation-delay: 2.5s; }
.dm-letter.l3 { animation-delay: 5s; }   .dm-letter.l4 { animation-delay: 7.5s; }
.dm-letter.l5 { animation-delay: 10s; }
@keyframes dmLetter { 0%, 2% { fill: var(--ink-dim); } 5%, 17% { fill: var(--mint); } 24%, 100% { fill: var(--ink-dim); } }
.dm-word { font-family: var(--font-head); font-size: 15px; font-weight: 800; fill: var(--ink); opacity: 0; text-anchor: middle; letter-spacing: .04em; }
.viz-dmaic .dm-word { animation: dmWord 12.5s ease infinite; animation-play-state: var(--play, paused); }
.dm-word.w1 { animation-delay: 0s; }   .dm-word.w2 { animation-delay: 2.5s; }
.dm-word.w3 { animation-delay: 5s; }   .dm-word.w4 { animation-delay: 7.5s; }
.dm-word.w5 { animation-delay: 10s; }
@keyframes dmWord { 0%, 2% { opacity: 0; } 6%, 16% { opacity: 1; } 22%, 100% { opacity: 0; } }
.dm-static { display: none; font-family: var(--font-head); font-size: 15px; font-weight: 800; fill: var(--ink); text-anchor: middle; }
.dm-orbit { transform-origin: 100px 100px; animation: dmOrbit 12.5s linear infinite; animation-play-state: var(--play, paused); }
@keyframes dmOrbit { to { transform: rotate(360deg); } }
.dm-comet { fill: var(--mint); filter: drop-shadow(0 0 5px rgba(var(--rgb-b),.9)); }

/* ==========================================================================
   FLAGSHIP · AEO AGENT X
   ========================================================================== */
.flagship-head { max-width: 880px; }
.flagship-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; margin: 1.7rem 0 2.6rem; }
.flagship-cta .dom { font-family: var(--font-mono); font-size: .85rem; color: var(--ink-dim); }
.channels { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(.8rem, 1.4vw, 1.2rem); margin-bottom: 2.8rem; }
.channel { display: flex; flex-direction: column; gap: .65rem; padding: 1.3rem 1.2rem; }
.channel .tag {
  font-family: var(--font-mono); font-size: .72rem; font-weight: 700; letter-spacing: .14em;
  color: var(--mint);
}
.channel h3 { font-size: 1.04rem; margin: 0; line-height: 1.3; }
.ch-status {
  margin-top: auto; display: flex; align-items: center; gap: .45rem;
  font-family: var(--font-mono); font-size: .68rem; color: var(--ink-dim);
}
.ch-status i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 7px var(--ok); animation: beacon 1.8s ease-in-out infinite;
}

/* Pipeline (the reference-quality centerpiece — kept & upgraded) */
.pipeline-wrap {
  border-radius: 22px; border: 1px solid var(--line);
  background: var(--card-solid);
  padding: clamp(1.4rem, 2.6vw, 2.4rem);
  box-shadow: var(--shadow-2);
  position: relative; overflow: hidden;
}
.pipeline-wrap::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  background: radial-gradient(60% 90% at 50% -20%, rgba(var(--rgb-a),.14), transparent 70%);
}
.pipeline-title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.8rem; }
.pipeline-title h3 { margin: 0; }
.live {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-mono); font-size: .8rem; color: var(--mint);
  background: rgba(var(--rgb-b),.08); border: 1px solid rgba(var(--rgb-b),.3);
  padding: .34rem .85rem; border-radius: 999px; white-space: nowrap;
}
.live .beacon { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: beacon 1.6s ease-in-out infinite; }
.pipeline { display: flex; align-items: stretch; gap: 0; }
.pipe-stage {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: .35rem;
  border: 1px solid var(--line-soft); border-radius: 14px;
  background: var(--card-bg);
  padding: .95rem .85rem;
  transition: border-color .3s ease, box-shadow .3s ease, background-color .3s ease, transform .3s ease;
}
.pipe-stage .step-no { font-family: var(--font-mono); font-size: .68rem; color: var(--ink-dim); letter-spacing: .12em; }
.pipe-icon { color: var(--ink-dim); transition: color .3s ease; }
.pipe-stage .name { font-weight: 800; font-size: .98rem; color: var(--ink); }
.pipe-stage .sub { font-family: var(--font-mono); font-size: .62rem; color: var(--mint); border: 1px solid rgba(var(--rgb-b),.35); border-radius: 5px; padding: 0 .35rem; width: fit-content; }
.pipe-stage .micro { font-size: .78rem; line-height: 1.45; color: var(--ink-dim); }
.pipe-stage.active {
  border-color: rgba(var(--rgb-a),.65);
  box-shadow: 0 0 0 1px rgba(var(--rgb-a),.35), var(--glow-indigo);
  transform: translateY(-3px);
}
.pipe-stage.active .pipe-icon { color: var(--mint); }
.pipe-stage.done { border-color: rgba(var(--rgb-b),.4); }
.pipe-stage.done .pipe-icon { color: var(--teal); }
.pipe-link { flex: none; width: clamp(14px, 2vw, 30px); position: relative; align-self: center; height: 2px; background: var(--line); margin-inline: 2px; border-radius: 2px; overflow: visible; }
.pipe-link.lit { background: linear-gradient(90deg, var(--indigo), var(--teal)); }
.pipe-link .pulse {
  position: absolute; top: 50%; left: 0; width: 8px; height: 8px; margin-top: -4px;
  border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px var(--mint);
  opacity: 0;
}
.pipe-link.flow .pulse { animation: pulseRun .56s linear forwards; }
@keyframes pulseRun { 0% { left: -4px; opacity: 1; } 100% { left: calc(100% - 4px); opacity: 1; } }
.pipeline-quote { margin: 1.9rem 0 0; text-align: center; color: var(--ink-soft); font-size: 1.06rem; }
.pipeline-quote strong { color: var(--ink); }

/* ==========================================================================
   PROOF — growth chart + clients + portfolio strip
   ========================================================================== */
.proof-grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(1.2rem, 2.2vw, 2rem); margin-top: 2.4rem; align-items: stretch; }
.proof-chart-card { padding: clamp(1.4rem, 2.4vw, 2rem); display: flex; flex-direction: column; }
.proof-num {
  font-family: var(--font-head); font-weight: 800; line-height: 1;
  font-size: clamp(3rem, 6vw, 4.6rem); letter-spacing: -.035em;
  background: linear-gradient(135deg, var(--hl-a), var(--hl-b));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.proof-num .suffix { font-size: .58em; }
.proof-cap { color: var(--ink-soft); max-width: 46ch; }
.growth-svg { width: 100%; height: auto; margin-top: auto; }
.growth-svg .grid-line { stroke: var(--line-soft); }
.growth-svg .gp {
  fill: none; stroke: url(#growthGrad); stroke-width: 3.5; stroke-linecap: round;
  stroke-dasharray: 900; stroke-dashoffset: 900;
}
.growth-svg .ga { fill: url(#growthArea); opacity: 0; }
.growth-svg .gdot { fill: var(--mint); opacity: 0; transform: scale(.2); transform-origin: center; transform-box: fill-box; }
.growth-svg .gring { fill: none; stroke: var(--mint); opacity: 0; }
.growth-svg.drawn .gp { transition: stroke-dashoffset 2.3s var(--ease) .15s; stroke-dashoffset: 0; }
.growth-svg.drawn .ga { transition: opacity 1.1s ease 1.5s; opacity: 1; }
.growth-svg.drawn .gdot { transition: opacity .3s ease, transform .4s cubic-bezier(.34,1.6,.5,1); opacity: 1; transform: scale(1); }
.growth-svg.drawn .gdot.p1 { transition-delay: .7s; } .growth-svg.drawn .gdot.p2 { transition-delay: 1.2s; }
.growth-svg.drawn .gdot.p3 { transition-delay: 1.7s; } .growth-svg.drawn .gdot.p4 { transition-delay: 2.2s; }
.growth-svg.drawn .gring { animation: gRing 2.4s ease-out 2.4s infinite; }
@keyframes gRing { 0% { opacity: .8; r: 6; stroke-width: 2; } 70%, 100% { opacity: 0; r: 18; stroke-width: .5; } }
.proof-side { display: flex; flex-direction: column; gap: 1.2rem; }
.proof-side .card { flex: 1; }
.proof-side h2 { font-size: clamp(1.6rem, 2.5vw, 2.1rem); }

.work-strip-head { margin-top: 3.4rem; display: flex; align-items: baseline; gap: 1.2rem; flex-wrap: wrap; }
.work-strip-head h3 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); margin: 0; }
.work-strip-head p { margin: 0; color: var(--ink-soft); }
.grid--work {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 1.8vw, 1.5rem); margin-top: 1.6rem;
}
.work-card { display: flex; flex-direction: column; gap: .5rem; padding: 1.4rem 1.4rem 1.3rem; overflow: hidden; }
.work-card .tag {
  font-family: var(--font-mono); font-size: .68rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mint);
  width: fit-content; border: 1px solid rgba(var(--rgb-b),.35); border-radius: 999px; padding: .16rem .6rem;
  background: rgba(var(--rgb-b),.06);
}
.work-card h3 { margin: .35rem 0 0; font-size: 1.16rem; }
.work-card p { margin: 0; color: var(--ink-soft); font-size: .94rem; }
.card-glint {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.06) 50%, transparent 58%);
  background-size: 260% 100%; background-position: 120% 0;
}
.tilt:hover .card-glint { animation: glint 1s ease forwards; }
@keyframes glint { to { background-position: -60% 0; } }
.work-note { margin-top: 1.8rem; color: var(--ink-dim); font-size: .96rem; }

/* ==========================================================================
   THE BOOK — 3D floating cover
   ========================================================================== */
.book-panel { display: grid; grid-template-columns: minmax(280px, 5fr) 7fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; margin-top: 1.4rem; }
.book-scene { perspective: 1300px; display: grid; place-items: center; padding-block: 1.4rem; }
.book3d {
  position: relative; width: min(250px, 62vw); aspect-ratio: 5 / 7.2;
  transform-style: preserve-3d;
  transform: rotateY(-24deg) rotateX(4deg);
  animation: bookFloat 7s ease-in-out infinite;
  animation-play-state: var(--play, paused);
}
@keyframes bookFloat {
  0%, 100% { transform: rotateY(-24deg) rotateX(4deg) translateY(0); }
  50%      { transform: rotateY(-19deg) rotateX(2.5deg) translateY(-14px); }
}
.book-cover2 {
  position: absolute; inset: 0; border-radius: 6px 14px 14px 6px;
  background:
    radial-gradient(120% 110% at 85% -10%, rgba(var(--rgb-a),.5), transparent 55%),
    radial-gradient(110% 120% at 10% 110%, rgba(var(--rgb-b),.42), transparent 55%),
    linear-gradient(160deg, #16305A, #0A1526 72%);
  border: 1px solid rgba(148,163,205,.25);
  box-shadow: -30px 34px 60px rgba(2,4,12,.55);
  padding: 1.5rem 1.3rem;
  display: flex; flex-direction: column;
  color: #E7ECF8;
  overflow: hidden;
}
.book-cover2::before { /* spine ridge */
  content: ""; position: absolute; top: 0; bottom: 0; left: 9px; width: 1.5px;
  background: rgba(148,163,205,.3);
}
.book-cover2::after { /* shine sweep */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.13) 48%, transparent 58%);
  background-size: 280% 100%; background-position: 130% 0;
  animation: bookShine 6.5s ease-in-out infinite;
  animation-play-state: var(--play, paused);
}
@keyframes bookShine { 0%, 55% { background-position: 130% 0; } 85%, 100% { background-position: -80% 0; } }
.book-pages {
  position: absolute; top: 5px; bottom: 5px; right: -9px; width: 9px;
  background: repeating-linear-gradient(180deg, #E8E6DC 0 2px, #CFCCC0 2px 3px);
  border-radius: 0 3px 3px 0;
  transform: rotateY(38deg); transform-origin: left center;
}
.bc-eyebrow { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: #8FA0C4; margin-bottom: auto; }
.bc-title {
  font-family: var(--font-head); font-weight: 800; font-size: clamp(1.5rem, 3vw, 1.9rem);
  line-height: 1.08; letter-spacing: -.02em; margin-bottom: .7rem;
  background: linear-gradient(135deg, #7FC0F6, #EBC981);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bc-rule { display: block; width: 44px; height: 3px; border-radius: 2px; background: var(--grad); margin-bottom: .7rem; }
.bc-sub { font-size: .78rem; line-height: 1.5; color: #AAB6D3; margin-bottom: auto; }
.bc-author { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: #8FA0C4; }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.grid--testimonials { columns: 2; column-gap: clamp(1.1rem, 2vw, 1.8rem); margin-top: 2.4rem; }
.grid--testimonials .tcard { break-inside: avoid; margin-bottom: clamp(1.1rem, 2vw, 1.8rem); display: flow-root; }
.tcard--feature { column-span: all; }
.tcard .li-badge {
  display: inline-flex; align-items: center; gap: .4rem; margin-bottom: .9rem;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-dim);
}
.tcard .li-badge svg { color: #0A66C2; flex: none; }
.tcard blockquote { margin: 0 0 1.4rem; font-size: 1.02rem; line-height: 1.62; color: var(--ink-soft); }
.tcard blockquote p { margin: 0 0 .8rem; }
.tcard blockquote p:last-child { margin-bottom: 0; }
.tcard .who { display: flex; align-items: center; gap: .9rem; }
.tcard .avatar {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--grad); color: #fff; font-weight: 800; font-size: .95rem;
}
.tcard .name { font-weight: 700; }
.tcard .title { color: var(--ink-dim); font-size: .9rem; }
.tcard--placeholder { border-style: dashed; }
.tcard--placeholder .avatar { background: var(--chip-bg); color: var(--ink-dim); border: 1px solid var(--line); }
.ph-label {
  position: absolute; top: 1rem; right: 1.1rem;
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-dim); border: 1px dashed var(--line); border-radius: 999px; padding: .18rem .6rem;
}
.aggregate-proof { text-align: center; font-size: 1.16rem; font-weight: 700; margin: 2.6rem 0 1.3rem; }
.aggregate-proof .star { color: #F5B324; }

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta-band { text-align: center; overflow: hidden; }
.cta-band .lead { margin-inline: auto; }
.cta-band .hero-ctas { justify-content: center; }
.cta-card {
  position: relative;
  border-radius: 26px; border: 1px solid var(--line);
  background: var(--card-solid);
  padding: clamp(2.6rem, 5vw, 4.6rem) clamp(1.4rem, 4vw, 3.5rem);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
.cta-card .aurora { border-radius: inherit; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { border-top: 1px solid var(--line-soft); background: var(--bg-2); padding: clamp(2.6rem, 5vw, 4rem) 0 2rem; }
.footer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; flex-wrap: wrap; margin-bottom: 2.2rem; }
.footer-tagline { max-width: 46ch; font-family: var(--font-head); font-weight: 700; font-size: 1.12rem; line-height: 1.5; margin: 0; }
.footer-tagline .fchl {
  background: linear-gradient(135deg, var(--hl-a), var(--hl-b));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.footer-links { display: flex; flex-wrap: wrap; gap: .7rem; }
.footer-links a {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--ink-soft); font-weight: 600; font-size: .94rem;
  border: 1px solid var(--line); border-radius: 999px; padding: .5rem 1.05rem;
  transition: border-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.footer-links a:hover { color: var(--ink); border-color: var(--indigo); box-shadow: 0 0 16px rgba(var(--rgb-a),.2); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 1.4rem; flex-wrap: wrap;
  border-top: 1px solid var(--line-soft); padding-top: 1.7rem;
  color: var(--ink-dim); font-size: .92rem;
}
.footer-loc { margin: 0 0 .3rem; }
.footer-nav { display: flex; gap: 1.3rem; }
.footer-nav a { color: var(--ink-dim); font-weight: 600; }
.footer-nav a:hover { color: var(--ink); }

/* ==========================================================================
   ABOUT — waypoints timeline
   ========================================================================== */
.waypoints { position: relative; margin-top: 2.6rem; padding-left: 3.4rem; }
.flight-rail { position: absolute; left: 17px; top: 8px; bottom: 8px; width: 2px; background: var(--line); border-radius: 2px; }
.rail-fill {
  position: absolute; top: 0; left: 0; width: 100%; height: 0;
  background: linear-gradient(180deg, var(--indigo), var(--teal));
  border-radius: 2px;
}
.craft {
  position: absolute; left: 50%; top: 0; width: 14px; height: 14px;
  transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--mint);
  box-shadow: 0 0 0 4px rgba(var(--rgb-b),.18), 0 0 16px rgba(var(--rgb-b),.8);
}
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.8rem, 3.4vw, 3rem); }
.waypoint { position: relative; }
.wp-node {
  position: absolute; left: -3.4rem; top: .1rem;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: .74rem; font-weight: 700;
  color: var(--ink-dim);
  background:
    linear-gradient(var(--card-solid), var(--card-solid)) padding-box,
    linear-gradient(135deg, rgba(var(--rgb-a),.5), rgba(var(--rgb-b),.5)) border-box;
  border: 1.5px solid transparent;
  transition: color .4s ease, box-shadow .4s ease, background .4s ease;
}
.waypoint.lit .wp-node { color: #fff; background: var(--grad); box-shadow: var(--glow-teal); border-color: transparent; }
.waypoint h3 { margin-bottom: .35rem; }
.waypoint p { color: var(--ink-soft); margin: 0; max-width: 62ch; }

.cred-chips { list-style: none; padding: 0; margin: 1.8rem 0 0; display: flex; flex-wrap: wrap; gap: .7rem; }
.grid--toolkit { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 1.8vw, 1.5rem); margin-top: 2.4rem; }
.toolkit-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.toolkit-card li { color: var(--ink-soft); font-size: .95rem; display: flex; gap: .55rem; align-items: baseline; }
.toolkit-card li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--grad); transform: translateY(-2px); }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-layout { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(1.4rem, 2.6vw, 2.4rem); align-items: start; }
.contact-form-card { padding: clamp(1.7rem, 3vw, 2.6rem); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field { margin-bottom: 1.15rem; }
.field label { display: block; font-weight: 700; font-size: .93rem; margin-bottom: .4rem; }
.field .req { color: var(--mint); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; color: var(--ink);
  background: var(--bg-3);
  border: 1.5px solid var(--line); border-radius: 12px;
  padding: .78rem 1rem;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--indigo);
  box-shadow: 0 0 0 3px rgba(var(--rgb-a),.18);
  background: var(--card-solid);
}
.field.invalid input, .field.invalid textarea { border-color: #F87171; }
.error-msg { display: block; min-height: 1.1em; color: #F87171; font-size: .84rem; margin-top: .3rem; }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin-top: 1rem; }
.toast {
  display: flex; gap: .7rem; align-items: flex-start;
  border-radius: 12px; padding: .95rem 1.1rem; font-size: .97rem;
}
.toast svg { flex: none; margin-top: .15rem; }
.toast--ok  { background: rgba(52,211,153,.1);  border: 1px solid rgba(52,211,153,.4); color: var(--ink); }
.toast--err { background: rgba(248,113,113,.09); border: 1px solid rgba(248,113,113,.4); color: var(--ink); }
.toast a { font-weight: 700; }
.side-stack { display: grid; gap: 1.2rem; }
.side-card h3 { font-size: 1.12rem; }
.direct-links, .detail-lines { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.direct-links a { display: flex; align-items: center; gap: .7rem; color: var(--ink-soft); font-weight: 600; }
.direct-links a:hover { color: var(--ink); }
.direct-links svg, .detail-lines svg { color: var(--mint); flex: none; }
.detail-lines li { display: flex; align-items: flex-start; gap: .7rem; color: var(--ink-soft); }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: .95rem; counter-reset: step; }
.steps li { display: flex; gap: .85rem; align-items: flex-start; }
.steps p { margin: .25rem 0 0; color: var(--ink-soft); }
.step-num {
  flex: none; width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 700; color: #fff;
  background: var(--grad);
}
.faq details { border-top: 1px solid var(--line-soft); padding: .65rem 0; }
.faq details:first-of-type { border-top: 0; }
.faq summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--mint); font-weight: 800; font-size: 1.1rem; transition: transform .25s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: .5rem 0 0; color: var(--ink-soft); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1120px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-term { max-width: 640px; }
  .term { margin-left: 0; }
  .channels { grid-template-columns: repeat(3, 1fr); }
  .grid--work { grid-template-columns: repeat(2, 1fr); }
  .svc-1, .svc-2, .svc-3, .svc-4 { grid-column: span 6; }
  .svc-list { grid-template-columns: 1fr; }
  .proof-grid { grid-template-columns: 1fr; }
  .grid--toolkit { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .header-actions .btn--primary { display: none; }
  .nav-toggle { display: grid; }
  .nav-mobile-cta { display: inline-flex; margin-top: 1.4rem; }
  .primary-nav {
    /* NOTE: the glass header's backdrop-filter makes it the containing block
       for this fixed drawer — use explicit viewport height, not bottom: 0. */
    position: fixed; top: 0; right: 0; height: 100vh; height: 100dvh; z-index: 1401;
    width: min(84vw, 360px);
    flex-direction: column; align-items: flex-start; justify-content: flex-start;
    gap: .3rem;
    background: var(--glass-solid);
    -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
    border-left: 1px solid var(--line);
    padding: calc(var(--header-h) + 1.6rem) 1.8rem 2rem;
    transform: translateX(105%);
    transition: transform .38s var(--ease);
    overflow-y: auto;
  }
  body.nav-open .primary-nav { transform: none; box-shadow: -30px 0 80px rgba(2,4,12,.4); }
  .nav-link { font-size: 1.25rem; padding: .65rem .2rem; width: 100%; }
  .nav-link::after { left: .2rem; right: auto; width: 34px; }
  .grid--pain { grid-template-columns: 1fr; }
  .grid--services { grid-template-columns: 1fr; }
  .svc-1, .svc-2, .svc-3, .svc-4 { grid-column: auto; }
  .grid--testimonials { columns: 1; }
  .contact-layout { grid-template-columns: 1fr; }
  .book-panel { grid-template-columns: 1fr; }
  .book-scene { order: -1; }
  .pipeline { flex-direction: column; }
  .pipe-link { width: 2px; height: 26px; align-self: center; margin: 2px 0; }
  .pipe-link .pulse { left: 50%; top: 0; margin: 0 0 0 -4px; }
  .pipe-link.flow .pulse { animation: pulseRunV .56s linear forwards; }
  .channels { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 1.6rem 1rem; }
}
@keyframes pulseRunV { 0% { top: -4px; opacity: 1; } 100% { top: calc(100% - 4px); opacity: 1; } }

@media (max-width: 640px) {
  :root { --header-h: 64px; --header-h-min: 56px; }
  .chip { white-space: normal; }
  .grid--work { grid-template-columns: 1fr; }
  .channels { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .grid--toolkit { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .viz-aeo { grid-template-columns: 1fr; }
  .viz-aeo .aeo-answer { display: none; }
  .stat { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .hero-scrollcue { display: none; }
  .aurora span { filter: blur(60px); }
  .waypoints { padding-left: 2.9rem; }
  .wp-node { left: -2.9rem; width: 32px; height: 32px; }
}

/* ==========================================================================
   Reduced motion — stop loops, show finished states (both themes)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001s !important;
  }
  .reveal { opacity: 1; transform: none; }
  .aurora span { animation: none; }
  .marquee-track { animation: none; }
  .book3d { animation: none; transform: rotateY(-24deg) rotateX(4deg); }
  .book-cover2::after { animation: none; background-position: -80% 0; opacity: .5; }
  /* AEO visual: settle on the end state — ranked #1 + cited */
  .viz-aeo .serp-you   { animation: none; transform: translateY(-34px); }
  .viz-aeo .serp-first { animation: none; transform: translateY(34px); }
  .viz-aeo .serp-badge { animation: none; opacity: 1; transform: none; }
  .viz-aeo .bar        { animation: none; transform: none; }
  .aeo-answer          { animation: none; opacity: 1; transform: none; }
  /* Web visual: layout fully assembled */
  .viz-web .wb-anim { animation: none; opacity: 1; transform: none; }
  .wb-beam { display: none; }
  /* DMAIC: all segments lit, static center label */
  .viz-dmaic .dm-seg { animation: none; opacity: 1; }
  .viz-dmaic .dm-letter { animation: none; fill: var(--mint); }
  .viz-dmaic .dm-word { animation: none; opacity: 0; }
  .viz-dmaic .dm-static { display: block; }
  .dm-orbit { animation: none; }
  .dm-comet { display: none; }
  /* Growth chart: drawn */
  .growth-svg .gp { stroke-dashoffset: 0; }
  .growth-svg .ga { opacity: 1; }
  .growth-svg .gdot { opacity: 1; transform: scale(1); }
  .growth-svg .gring { display: none; }
  .term-live i, .live .beacon, .ch-status i { animation: none; }
  .brand-caret, .term-cursor { animation: none; }
  .card--glow { animation: none; }
  .hero-scrollcue { animation: none; }
}

/* ==========================================================================
   LIGHT THEME — NO GRADIENT · professional / subtle (analyticsaiml.com feel)
   Scoped to [data-theme="light"] ONLY — the dark navy theme is untouched.
   Per user (2026-07-08): "in light mode do not use gradient … use sunset
   ochre instead … professional subtle … headings with teal and sunset
   ochre." So every accent gradient becomes a SOLID hue: teal #0F766E is the
   primary, sunset ochre #C27310 is the accent (headline word, numbers,
   underlines, dots, bars). Ambient blur/hover glows are removed.
   ========================================================================== */

/* 1) SOLID colors, no gradient. Icons = solid teal (shared #iconGrad
      collapses to one hue). Every var(--grad)/var(--grad-135) accent
      (underlines, eyebrow rule, nav underline, scroll bar, dots, CTA
      fills, waypoint nodes…) becomes SOLID sunset ochre. */
:root[data-theme="light"] {
  --icon-g1: #0F766E;
  --icon-g2: #0F766E;
  --grad:     #C27310;           /* was teal→ochre gradient — now solid ochre */
  --grad-135: #C27310;
  --aurora-op: .09;              /* near-flat, whiter hero ambient */
}
:root[data-theme="light"] .icon-chip svg { filter: none; }

/* 2) Icon chips: clean & flat — no gradient border, no aura glow.
      Subtle teal-tinted panel with a thin solid border instead. */
:root[data-theme="light"] .icon-chip {
  background: rgba(15,118,110,.07);
  border: 1.5px solid rgba(15,118,110,.16);
  box-shadow: 0 1px 2px rgba(40,34,20,.05);
}
:root[data-theme="light"] .icon-chip::before,
:root[data-theme="light"] .icon-chip::after { content: none; }
:root[data-theme="light"] .card:hover .icon-chip,
:root[data-theme="light"] .svc:hover .icon-chip,
:root[data-theme="light"] .channel:hover .icon-chip {
  box-shadow: 0 4px 12px rgba(15,118,110,.15);
}

/* 3) Feature cards: drop the animated rainbow conic border for a calm,
      solid teal-tinted edge (keeps the raised card, loses the flash). */
:root[data-theme="light"] .card--glow {
  background: var(--card-solid);
  border: 1px solid rgba(15,118,110,.20);
  animation: none;
}

/* 4) Headline & numbers = SOLID sunset ochre (no more clipped gradient text).
      The one emphasized headline word, big stat/proof numbers and footer
      highlight now read in solid ochre against the teal-ink headings. */
:root[data-theme="light"] .hl,
:root[data-theme="light"] .stat .num,
:root[data-theme="light"] .proof-num,
:root[data-theme="light"] .footer-tagline .fchl {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: #C27310;
  color: #C27310;
  animation: none;
}

/* 5) Remove the radial hover-spotlight glow; fix the pullquote bar (border-image
      needs an image — with a solid token it must fall back to a solid color). */
:root[data-theme="light"] .spot::before { display: none; }
:root[data-theme="light"] .pullquote { border-image: none; border-left-color: #C27310; }

/* ==========================================================================
   LIGHT THEME · remaining flatten + heading colors + name wordmark
   (2026-07-08) — the last decorative gradients removed, and headings recolored
   to the analyticsaiml.com system: black h1/h2 with ochre emphasis, TEAL h3
   sub-heads, ochre eyebrows/numbers. Scoped to [data-theme="light"] ONLY —
   the dark theme is left exactly as it was.
   ========================================================================== */

/* Kill remaining ambient / decorative gradients in light */
:root[data-theme="light"] .aurora { display: none; }
:root[data-theme="light"] .pipeline-wrap::before { content: none; }
:root[data-theme="light"] .wb-beam { display: none; }
:root[data-theme="light"] .wb-nav  { background: rgba(15,118,110,.20); }
:root[data-theme="light"] .wb-hero { background: rgba(15,118,110,.28); }
:root[data-theme="light"] .card-glint { display: none; }

/* SVG chart accents → solid teal (were teal→ochre gradients via url(#…Grad)) */
:root[data-theme="light"] .dm-seg { stroke: #0F766E; }
:root[data-theme="light"] .growth-svg .gp { stroke: #0F766E; }
:root[data-theme="light"] .growth-svg .ga { fill: rgba(15,118,110,.10); }

/* Timeline node — flat teal-tinted ring (was a gradient border) */
:root[data-theme="light"] .wp-node {
  background: var(--card-solid);
  border: 1.5px solid rgba(15,118,110,.28);
}

/* The 3D book — solid deep-teal cover + solid ochre title (no gradients) */
:root[data-theme="light"] .book-cover2 { background: #0F3E39; border-color: rgba(255,255,255,.14); }
:root[data-theme="light"] .book-cover2::after { content: none; }
:root[data-theme="light"] .book-pages { background: #E8E6DC; }
:root[data-theme="light"] .bc-title {
  background: none;
  -webkit-text-fill-color: #E0A64B; color: #E0A64B;
}
:root[data-theme="light"] .bc-eyebrow,
:root[data-theme="light"] .bc-author { color: #B9C9C2; }
:root[data-theme="light"] .bc-sub { color: #D6E0DB; }

/* Terminal stays a dark object but flat (remove its subtle vertical gradient) */
:root[data-theme="light"] .term { background: #0C0E1A; }

/* ---- Headings: analyticsaiml.com tri-tone (black · teal · sunset ochre) ---- */
/* Eyebrows + small labels → sunset ochre */
:root[data-theme="light"] .eyebrow,
:root[data-theme="light"] .tools-eyebrow { color: #C27310; }
:root[data-theme="light"] .eyebrow .dot { color: #C27310; }
/* Sub-headings (cards, services, channels, products, timeline) → teal */
:root[data-theme="light"] .pillar h3,
:root[data-theme="light"] .svc h3,
:root[data-theme="light"] .channel h3,
:root[data-theme="light"] .work-card h3,
:root[data-theme="light"] .waypoint h3,
:root[data-theme="light"] .toolkit-card h3,
:root[data-theme="light"] .side-card h3,
:root[data-theme="light"] .work-strip-head h3,
:root[data-theme="light"] .proof-side h2 { color: #0F766E; }

/* ---- Brand: light theme = "Umer" (teal) · "Qureshi" (ochre) wordmark.
        Dark theme keeps its original badge — logo swaps by theme. ---- */
.brand-name { font-family: var(--font-head); font-weight: 800; font-size: 1.28rem; letter-spacing: -.02em; white-space: nowrap; }
.bn-first { color: var(--indigo); }
.bn-last  { color: var(--mint); }
:root[data-theme="light"] .logo-badge { display: none; }
:root[data-theme="dark"]  .brand-name { display: none; }

/* ============================================================
   Selected engagements + AEO Agent credential strip  (v1.2.0)
   Tokens only — inherits both light and dark themes.
   ============================================================ */

.chips-note {
  margin: .9rem 0 0; color: var(--ink-dim);
  font-size: .86rem; font-style: italic;
}

/* ---- AEO Agent: what the platform encodes ---- */
.cred-strip {
  list-style: none; padding: 0; margin: 1.6rem 0 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.9rem, 1.6vw, 1.6rem);
  border-top: 1px solid var(--line); padding-top: 1.4rem;
}
.cs-item { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.cs-num {
  font-family: var(--font-head); font-weight: 800; line-height: 1;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem); letter-spacing: -.03em;
  background: linear-gradient(135deg, var(--hl-a), var(--hl-b));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cs-num .suffix { font-size: .46em; letter-spacing: 0; }
.cs-lab { color: var(--ink-soft); font-size: .92rem; line-height: 1.45; max-width: 30ch; }

/* ---- Selected engagements grid ---- */
.grid--eng {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.8vw, 1.5rem); margin-top: 1.6rem;
}
.eng-card {
  display: flex; flex-direction: column; gap: .55rem;
  padding: 1.5rem 1.4rem 1.35rem; overflow: hidden;
  position: relative; isolation: isolate;
  transition: transform .45s var(--ease), border-color .45s var(--ease);
}
.eng-card::before {
  content: ""; position: absolute; inset: 0 auto auto 0;
  width: 100%; height: 3px; border-radius: inherit;
  background: linear-gradient(90deg, var(--hl-a), var(--hl-b));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .55s var(--ease);
}
.eng-card:hover { transform: translateY(-4px); border-color: var(--line); }
.eng-card:hover::before { transform: scaleX(1); }

.eng-sector {
  font-family: var(--font-mono); font-size: .69rem; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase; color: var(--ink-dim);
}
.eng-sector .dot { color: var(--mint); }
.eng-metric {
  font-family: var(--font-head); font-weight: 800; line-height: 1;
  font-size: clamp(2rem, 3.6vw, 2.9rem); letter-spacing: -.035em;
  background: linear-gradient(135deg, var(--hl-a), var(--hl-b));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.eng-metric .suffix { font-size: .42em; letter-spacing: 0; }
.eng-metric--text { font-size: clamp(1.25rem, 2vw, 1.5rem); letter-spacing: -.02em; line-height: 1.3; padding-bottom: .12em; }
.eng-what { margin: .1rem 0 0; color: var(--ink-soft); font-size: .93rem; line-height: 1.6; }

.eng-tags {
  list-style: none; padding: 0; margin: auto 0 0;
  display: flex; flex-wrap: wrap; gap: .4rem; padding-top: 1rem;
}
.eng-tags li {
  font-family: var(--font-mono); font-size: .66rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim);
  border: 1px solid var(--line); border-radius: 999px; padding: .2rem .55rem;
}

@media (max-width: 1080px) {
  .grid--eng { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .grid--eng  { grid-template-columns: 1fr; }
  .cred-strip { grid-template-columns: 1fr; gap: 1.1rem; }
  .cs-lab     { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .eng-card, .eng-card::before { transition: none; }
  .eng-card:hover { transform: none; }
  .eng-card:hover::before { transform: scaleX(1); }
}

/* ============================================================
   Blog — index, article, related  (v1.3.0)
   Tokens only; inherits light + dark themes.
   ============================================================ */

.post-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.8vw, 1.5rem);
}
.post-card {
  position: relative; overflow: hidden; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--card-bg);
  transition: transform .45s var(--ease), border-color .45s var(--ease);
}
.post-card::before {
  content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--hl-a), var(--hl-b));
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .55s var(--ease);
}
.post-card:hover { transform: translateY(-4px); }
.post-card:hover::before { transform: scaleX(1); }
.post-card--lead { grid-column: span 2; }
.pc-link {
  display: flex; flex-direction: column; gap: .55rem; height: 100%;
  padding: 1.5rem 1.45rem 1.4rem; text-decoration: none; color: inherit;
}
.pc-cat {
  font-family: var(--font-mono); font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--mint);
}
.pc-title {
  margin: 0; font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.3; letter-spacing: -.015em;
}
.post-card--lead .pc-title { font-size: clamp(1.4rem, 2.4vw, 1.95rem); }
.pc-excerpt { margin: 0; color: var(--ink-soft); font-size: .94rem; line-height: 1.6; }
.pc-meta {
  margin-top: auto; padding-top: .9rem; color: var(--ink-dim);
  font-size: .82rem; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
}

/* ---- article ---- */
.crumbs {
  margin: 1.6rem 0 0; font-size: .84rem; color: var(--ink-dim);
  display: flex; gap: .45rem; flex-wrap: wrap;
}
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--mint); text-decoration: underline; }

.post-head { padding: 1.4rem 0 1.6rem; border-bottom: 1px solid var(--line); margin-bottom: 2rem; }
.post-head h1 {
  margin: .5rem 0 .9rem; font-size: clamp(1.9rem, 4.2vw, 3rem);
  line-height: 1.12; letter-spacing: -.025em;
}
.post-meta {
  margin: 0; color: var(--ink-dim); font-size: .9rem;
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.pm-author { color: var(--ink-soft); font-weight: 600; }

.post-body { font-size: 1.045rem; line-height: 1.75; color: var(--ink); }
.post-body h2 {
  margin: 2.4rem 0 .8rem; font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  line-height: 1.25; letter-spacing: -.02em;
}
.post-body h3 { margin: 1.8rem 0 .55rem; font-size: clamp(1.08rem, 1.7vw, 1.22rem); }
.post-body p { margin: 0 0 1.15rem; color: var(--ink-soft); }
.post-body strong { color: var(--ink); font-weight: 700; }
.post-body ul, .post-body ol { margin: 0 0 1.3rem; padding-left: 1.35rem; color: var(--ink-soft); }
.post-body li { margin-bottom: .5rem; }
.post-body li::marker { color: var(--mint); }
.post-body a { color: var(--mint); text-underline-offset: 3px; }
.post-body a:hover { text-decoration-thickness: 2px; }
.post-body table { width: 100%; border-collapse: collapse; min-width: 620px; font-size: .93rem; }
.post-body table th {
  background: var(--card-raised); color: var(--ink); text-align: left;
  padding: 12px; border: 1px solid var(--line); font-weight: 700;
}
.post-body table td { padding: 12px; border: 1px solid var(--line); color: var(--ink-soft); }
.post-body table tbody tr:first-child {
  background: rgba(var(--rgb-b), .07); border-left: 4px solid var(--mint);
}
.post-body table tbody tr:first-child td { color: var(--ink); font-weight: 600; }
.post-body blockquote {
  margin: 1.6rem 0; padding: .2rem 0 .2rem 1.2rem;
  border-left: 3px solid var(--mint); color: var(--ink-soft); font-style: italic;
}
.post-body .callout {
  margin: 1.6rem 0; padding: 1.1rem 1.25rem; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--card-bg);
}
.post-body .callout p:last-child { margin-bottom: 0; }

.post-tags { list-style: none; padding: 2rem 0 0; margin: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.post-tags li {
  font-family: var(--font-mono); font-size: .68rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim);
  border: 1px solid var(--line); border-radius: 999px; padding: .24rem .62rem;
}

.post-cta {
  margin: 2.6rem 0 0; padding: clamp(1.4rem, 3vw, 2.1rem);
  border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--card-bg); text-align: center;
}
.post-cta h2 { margin: 0 0 .6rem; font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
.post-cta p { margin: 0 auto 1.3rem; color: var(--ink-soft); max-width: 52ch; }

.related { margin: 3rem 0 1rem; }
.related h2 { font-size: clamp(1.2rem, 2vw, 1.45rem); margin-bottom: 1.1rem; }
.rel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.rel-card {
  display: flex; flex-direction: column; gap: .4rem; padding: 1.1rem 1.15rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card-bg); text-decoration: none; color: inherit;
  transition: transform .4s var(--ease), border-color .4s var(--ease);
}
.rel-card:hover { transform: translateY(-3px); border-color: var(--mint); }
.rel-cat {
  font-family: var(--font-mono); font-size: .63rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--mint);
}
.rel-title { font-weight: 700; font-size: .96rem; line-height: 1.35; }
.rel-date { color: var(--ink-dim); font-size: .8rem; margin-top: auto; padding-top: .35rem; }

@media (max-width: 1080px) {
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-card--lead { grid-column: span 2; }
  .rel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .post-grid, .rel-grid { grid-template-columns: 1fr; }
  .post-card--lead { grid-column: span 1; }
  .post-body table { min-width: 520px; }
}
@media (prefers-reduced-motion: reduce) {
  .post-card, .rel-card, .post-card::before { transition: none; }
  .post-card:hover, .rel-card:hover { transform: none; }
  .post-card:hover::before { transform: scaleX(1); }
}