/* ============================================================
   VASEO - "The Index" design system (PRD 28, from-scratch)
   ------------------------------------------------------------
   A bottom-up dark design system. The site is a living knowledge graph: search
   presence as a navigable 3D space, with interactive before/after SEO demos as the
   spine. This stylesheet is SELF-CONTAINED for pages built in the Index system
   (they load css/tokens.css for the font + base tokens, then ONLY this file - NOT
   the old Bureau style.css/signature.css). No em dashes. WCAG 2.2 AA.

   Old Bureau site is preserved at /v1. Pages migrate to this system one at a time.
   ============================================================ */

:root.index {
  /* SINGLE-SOURCE COLOUR. Each accent is ONE rgb triplet; the solid colour and every
     alpha wash derive from it via rgb()/rgba(var(--*-rgb), a). Change a triplet and the
     whole UI, the SVG poster, the compounding curve, AND the WebGL hero recolour
     together (the hero shader reads these same *-rgb tokens through getComputedStyle).
     Nothing in this file hardcodes a colour. */
  --ix-line-rgb: 120, 150, 200;
  --ix-bg-rgb: 5, 7, 11;
  --ix-hub-rgb: 90, 160, 255;       /* cobalt: links, hubs, primary action */
  --ix-cite-rgb: 255, 198, 92;      /* amber: citations, the verified node */
  --ix-good-rgb: 127, 209, 122;     /* green: improvement / after-state */
  --ix-bad-rgb: 240, 138, 110;      /* warm: the before / problem state */

  --ix-bg: rgb(var(--ix-bg-rgb));
  --ix-bg-2: #0B0F1A;
  --ix-sunk: #0A0E18;               /* deepest well: SERP / input / compare surfaces */
  --ix-surface: #10172A;
  --ix-surface-2: #161F38;
  --ix-line: rgba(var(--ix-line-rgb), 0.16);
  --ix-line-strong: rgba(var(--ix-line-rgb), 0.32);
  --ix-text: #F2F5FA;
  --ix-text-2: #C2CBDC;
  --ix-mute: #8694AC;
  --ix-hub: rgb(var(--ix-hub-rgb));
  --ix-hub-2: #7DB6FF;
  --ix-cite: rgb(var(--ix-cite-rgb));
  --ix-good: rgb(var(--ix-good-rgb));
  --ix-bad: rgb(var(--ix-bad-rgb));
  --ix-on-accent: var(--ix-bg);     /* dark text/detail on a bright accent fill */

  /* motion */
  --ix-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ix-dur: 600ms;
  --ix-dur-fast: 150ms;

  /* metrics */
  --ix-pad: clamp(1.25rem, 4vw, 2.5rem);
  --ix-maxw: 1200px;
  --ix-narrow: 760px;
  --ix-r: 14px;
  --ix-r-sm: 8px;
}

/* ---- Reset (the Index pages do NOT load Bureau style.css, so own it here) ---- */
.index *, .index *::before, .index *::after { box-sizing: border-box; }
.index body { margin: 0; }
.index img, .index svg, .index canvas { max-width: 100%; }

/* ---- Page base ---- */
.index body,
body.index {
  background: var(--ix-bg);
  color: var(--ix-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
.index ::selection { background: rgba(var(--ix-hub-rgb), 0.3); color: var(--ix-text); }
.index .skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--ix-hub); color: var(--ix-bg); padding: 10px 16px; border-radius: 0 0 var(--ix-r-sm) 0;
}
.index .skip-link:focus { left: 0; }
.index :focus-visible { outline: 2px solid var(--ix-hub); outline-offset: 3px; border-radius: 3px; }

/* ---- Layout primitives ---- */
.ix-wrap { width: 100%; max-width: var(--ix-maxw); margin-inline: auto; padding-inline: var(--ix-pad); }
.ix-section { padding-block: clamp(3.5rem, 9vw, 7rem); position: relative; scroll-margin-top: 5rem; }
.ix-section--line { border-top: 1px solid var(--ix-line); }
.ix-eyebrow {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--ix-hub); margin: 0 0 var(--space-4, 1rem);
  display: inline-flex; align-items: center; gap: 0.6em;
}
.ix-eyebrow__num { color: var(--ix-mute); }
.ix-h2 {
  font-family: var(--font-body); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05;
  font-size: clamp(1.9rem, 4.2vw, 3.1rem); color: var(--ix-text); margin: 0 0 1rem; max-width: 22ch;
}
.ix-h2 em { font-style: normal; color: var(--ix-hub); }
.ix-lede { font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.7; color: var(--ix-text-2); max-width: 60ch; margin: 0; }
.ix-p { color: var(--ix-text-2); line-height: 1.7; }
.ix-head-grid { display: grid; gap: 1.25rem 3rem; grid-template-columns: 1fr; margin-bottom: 2.5rem; }
@media (min-width: 860px) { .ix-head-grid { grid-template-columns: 1.1fr 0.9fr; align-items: end; } }

/* ---- Buttons ---- */
.ix-btn {
  display: inline-flex; align-items: center; gap: 0.55em; padding: 13px 22px; border-radius: 999px;
  font-family: var(--font-body); font-size: 0.9rem; font-weight: 600; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: transform 150ms var(--ix-ease), background 150ms ease, border-color 150ms ease;
}
.ix-btn svg { width: 14px; height: 14px; stroke-width: 1.5; }
.ix-btn--primary { background: var(--ix-hub); color: var(--ix-bg); border-color: var(--ix-hub); }
.ix-btn--primary:hover { background: var(--ix-hub-2); transform: translateY(-1px); }
.ix-btn--ghost { background: transparent; color: var(--ix-text); border-color: var(--ix-line-strong); }
.ix-btn--ghost:hover { border-color: var(--ix-text); transform: translateY(-1px); }

/* ---- Chrome: header ---- */
.ix-header { position: sticky; top: 0; z-index: 100; background: rgba(var(--ix-bg-rgb), 0.72); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color 250ms ease, background 250ms ease; }
.ix-header.is-scrolled { border-bottom-color: var(--ix-line); }
.ix-header__inner { display: flex; align-items: center; gap: 1.5rem; min-height: 64px; }
.ix-brand { display: inline-flex; align-items: baseline; gap: 0.6rem; text-decoration: none; color: var(--ix-text); }
.ix-brand__mark { font-size: 1.06rem; font-weight: 700; letter-spacing: 0.04em; }
.ix-brand__mark i { font-style: normal; color: var(--ix-hub); }
.ix-nav { display: none; gap: 1.4rem; margin-left: auto; }
.ix-nav a { color: var(--ix-text-2); text-decoration: none; font-size: 0.9rem; position: relative; padding: 4px 0; transition: color 150ms ease; }
.ix-nav a:hover, .ix-nav a[aria-current="page"] { color: var(--ix-text); }
.ix-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ix-hub); }
.ix-header__cta { display: none; margin-left: 0; }

/* Mobile menu (the Index header's own, .ix-* hooks wired by js/motion/index.js) */
.ix-menu-toggle { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; background: transparent; border: 1px solid var(--ix-line-strong); border-radius: var(--ix-r-sm); color: var(--ix-text); cursor: pointer; }
.ix-menu-toggle svg { width: 20px; height: 20px; }
.ix-mobile { position: fixed; inset: 0; z-index: 150; background: rgba(var(--ix-bg-rgb), 0.97); backdrop-filter: blur(8px); padding: 5rem var(--ix-pad) 2rem; display: flex; flex-direction: column; gap: 1rem; transform: translateY(-100%); visibility: hidden; transition: transform 320ms var(--ix-ease), visibility 320ms; }
.ix-mobile.is-open { transform: none; visibility: visible; }
.ix-mobile__close { position: absolute; top: 1rem; right: var(--ix-pad); width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--ix-line-strong); border-radius: var(--ix-r-sm); color: var(--ix-text); cursor: pointer; }
.ix-mobile__close svg { width: 20px; height: 20px; }
.ix-mobile__nav { display: flex; flex-direction: column; gap: 0.25rem; }
.ix-mobile__nav a { color: var(--ix-text); text-decoration: none; font-size: 1.5rem; font-weight: 600; padding: 0.6rem 0; border-bottom: 1px solid var(--ix-line); }
.ix-mobile__nav a[aria-current="page"] { color: var(--ix-hub); }
.ix-mobile__cta { align-self: flex-start; margin-top: 1rem; }
@media (min-width: 860px) {
  .ix-nav { display: flex; }
  .ix-header__cta { display: inline-flex; margin-left: 0; }
  .ix-menu-toggle { display: none; }
  .ix-mobile { display: none; }
}

/* ---- Chrome: footer ---- */
.ix-footer { border-top: 1px solid var(--ix-line); padding-block: 2.5rem; margin-top: 2rem; }
.ix-footer__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.ix-footer__brand { color: var(--ix-mute); font-size: 0.85rem; }
.ix-footer__brand a { color: var(--ix-text-2); }
.ix-footer__version { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ix-mute); margin-left: auto; }
.ix-motion-toggle { display: inline-flex; align-items: center; gap: 0.5em; background: transparent; border: 1px solid var(--ix-line-strong); color: var(--ix-text-2); border-radius: 999px; padding: 6px 12px; font-family: var(--font-mono); font-size: 0.72rem; cursor: pointer; }
.ix-motion-toggle__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ix-good); }
.ix-motion-toggle[aria-pressed="true"] .ix-motion-toggle__dot { background: var(--ix-mute); }

/* ============================================================
   Persistent WebGL knowledge-graph BACKGROUND (The Index signature)
   A fixed, full-viewport canvas behind ALL content that the camera travels through as
   you scroll, with hover-labelled + clickable hub nodes. pointer-events:none so it
   NEVER intercepts a content click (js/motion/index-graph.js hit-tests on the window
   and only navigates on a click that landed on exposed background). When WebGL/motion
   is unavailable the canvas stays hidden and the token-driven gradient below shows.
   ============================================================ */
.ix-bg {
  position: fixed; inset: 0; z-index: 0; background: var(--ix-bg);
  background-image:
    radial-gradient(60% 50% at 50% 36%, rgba(var(--ix-hub-rgb), 0.10), transparent 70%),
    radial-gradient(42% 42% at 78% 66%, rgba(var(--ix-cite-rgb), 0.05), transparent 72%);
}
.ix-bg__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: none; opacity: 0; transition: opacity 900ms ease; pointer-events: none; }
.index.has-motion .ix-bg__canvas { display: block; }
.ix-bg__canvas.is-live { opacity: 1; }
.ix-bg__scrim { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(125% 95% at 50% 45%, transparent 50%, rgba(var(--ix-bg-rgb), 0.55) 100%); }

/* Hover/focus label for a clickable hub node (positioned at the node's projected
   screen point by the graph script). Never intercepts the pointer. */
.ix-node-label {
  position: fixed; z-index: 90; transform: translate(-50%, -170%);
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em;
  color: var(--ix-text); background: rgba(var(--ix-bg-rgb), 0.82);
  border: 1px solid var(--ix-line-strong); border-radius: 999px;
  padding: 5px 11px; white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity 160ms ease;
}
.ix-node-label.is-on { opacity: 1; }
/* The graph script adds this to <html> while the pointer is over a clickable hub. */
.index.ix-graph-hot { cursor: pointer; }

/* Persistent labels naming the REAL nodes of the site-graph (positioned each frame by
   index-graph.js). They sit in the graph's background layer (behind page content), so the
   structure reads in the hero and recedes under the section scrims as you scroll. */
.ix-glabels { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.ix-glabel { position: absolute; left: 0; top: 0; transform: translate(-9999px, -9999px); font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.03em; line-height: 1; color: var(--ix-text-2); white-space: nowrap; padding: 3px 7px; border-radius: 5px; background: rgba(var(--ix-bg-rgb), 0.5); opacity: 0; transition: opacity 200ms ease; will-change: transform, opacity; }
.ix-glabel--core { color: var(--ix-text); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; background: rgba(var(--ix-bg-rgb), 0.62); }
.ix-glabel--cite { color: var(--ix-cite); }

/* Content sits above the fixed graph; sections + footer carry a semi-opaque scrim so
   the graph glows through behind copy while text stays legible (opaque cards stay fully
   crisp). The hero stays transparent so the graph reads at full strength up top. */
.index main, .ix-footer { position: relative; z-index: 1; }
.ix-section, .ix-footer { background: rgba(var(--ix-bg-rgb), 0.62); }

/* ---- HERO (text over the global knowledge graph; transparent so the graph reads at
   full strength here; the inner::before gradient keeps the headline legible) ---- */
.index-hero { position: relative; min-height: 92vh; min-height: 92svh; display: flex; align-items: flex-end; color: var(--ix-text); overflow: hidden; isolation: isolate; }
.index-hero__inner { position: relative; z-index: 2; width: 100%; max-width: var(--ix-maxw); margin-inline: auto; padding: clamp(3rem,8vw,6rem) var(--ix-pad) clamp(2.5rem,5vw,4rem); }
.index-hero__inner::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 170%; z-index: -1; background: linear-gradient(to top, rgba(var(--ix-bg-rgb),0.94) 12%, rgba(var(--ix-bg-rgb),0.5) 48%, rgba(var(--ix-bg-rgb),0) 100%); pointer-events: none; }
.index-hero__eyebrow { display: inline-flex; align-items: center; gap: 0.6em; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ix-hub); margin: 0 0 1.25rem; }
.index-hero__title { font-family: var(--font-body); font-weight: 700; font-size: clamp(2.6rem, 6.2vw, 5rem); line-height: 1.02; letter-spacing: -0.035em; margin: 0 0 1.25rem; max-width: 18ch; }
.index-hero__title em { font-style: normal; color: var(--ix-hub); }
.index-hero__sub { font-size: clamp(1.05rem,1.6vw,1.2rem); line-height: 1.7; color: var(--ix-mute); max-width: 56ch; margin: 0 0 1.75rem; }
.index-hero__sub abbr { color: var(--ix-text); text-decoration: none; border-bottom: 1px dotted var(--ix-mute); }
.index-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: 0 0 1.5rem; }
.index-hero__hint { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--ix-mute); }
.index-hero__hint .ix-dot { color: var(--ix-cite); }
.c-eyebrow__pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--ix-cite); box-shadow: 0 0 0 0 rgba(var(--ix-cite-rgb),0.5); }
.index.has-motion .c-eyebrow__pulse { animation: ix-pulse 2.4s ease-out infinite; }
@keyframes ix-pulse { 0% { box-shadow: 0 0 0 0 rgba(var(--ix-cite-rgb),0.45); } 70% { box-shadow: 0 0 0 8px rgba(var(--ix-cite-rgb),0); } 100% { box-shadow: 0 0 0 0 rgba(var(--ix-cite-rgb),0); } }

/* ---- Before/after SEO demo (the signature interactive) ---- */
.ix-demo { background: var(--ix-surface); border: 1px solid var(--ix-line); border-radius: var(--ix-r); padding: clamp(1.25rem, 3vw, 2rem); }
.ix-demo__label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ix-mute); margin: 0 0 1rem; }
.ix-demo__label b { color: var(--ix-hub); font-weight: 500; }
.ix-serp { background: var(--ix-sunk); border: 1px solid var(--ix-line); border-radius: var(--ix-r-sm); padding: 1rem 1.1rem; }
.ix-serp__title { color: var(--ix-hub-2); font-size: 1.15rem; line-height: 1.3; margin: 0 0 4px; word-break: break-word; }
.ix-serp__url { color: var(--ix-good); font-size: 0.8rem; font-family: var(--font-mono); margin: 0 0 6px; }
.ix-serp__desc { color: var(--ix-text-2); font-size: 0.92rem; line-height: 1.55; margin: 0; }
.ix-serp__truncated { color: var(--ix-mute); }
/* Live title-tag editor: visualise Google's ~60-char cut so the user SEES what is lost. */
.ix-serp__ell { color: var(--ix-mute); }
.ix-serp__cut { color: var(--ix-mute); opacity: 0.5; text-decoration: line-through; text-decoration-color: rgba(var(--ix-bad-rgb), 0.75); }
.ix-demo__warn { display: none; font-family: var(--font-mono); font-size: 0.72rem; line-height: 1.55; color: var(--ix-text-2); margin: 0.7rem 0 0; padding: 0.6rem 0.8rem; border-left: 2px solid var(--ix-bad); background: rgba(var(--ix-bad-rgb), 0.08); border-radius: 0 var(--ix-r-sm) var(--ix-r-sm) 0; }
.ix-demo__warn.is-on { display: block; }
.ix-demo__warn b { color: var(--ix-bad); font-weight: 600; }
.ix-demo__meter { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.9rem; font-family: var(--font-mono); font-size: 0.78rem; color: var(--ix-mute); }
.ix-demo__bar { flex: 1; height: 5px; border-radius: 3px; background: var(--ix-surface-2); overflow: hidden; }
.ix-demo__bar-fill { height: 100%; width: 0%; background: var(--ix-good); transition: width 200ms ease, background 200ms ease; }
.ix-demo__bar-fill.is-over { background: var(--ix-bad); }
.ix-demo__readout { color: var(--ix-text); }
.ix-demo__readout.is-over { color: var(--ix-bad); }
.ix-field { display: block; margin-top: 0.9rem; }
.ix-field span { display: block; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ix-mute); margin-bottom: 0.35rem; }
.ix-input { width: 100%; background: var(--ix-sunk); color: var(--ix-text); border: 1px solid var(--ix-line-strong); border-radius: var(--ix-r-sm); padding: 10px 12px; font-family: var(--font-body); font-size: 0.95rem; }
.ix-input:focus { outline: none; border-color: var(--ix-hub); box-shadow: 0 0 0 3px rgba(var(--ix-hub-rgb),0.18); }
.ix-demo__hint { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ix-mute); margin: 1rem 0 0; }
.ix-demo__hint b { color: var(--ix-good); font-weight: 500; }

/* before/after compare slider */
.ix-compare { position: relative; border-radius: var(--ix-r-sm); overflow: hidden; border: 1px solid var(--ix-line); user-select: none; }
/* generous top padding so the title clears the Before/After chips (no overlap) */
.ix-compare__layer { padding: 2.6rem 1.25rem 1.3rem; }
.ix-compare__after { position: absolute; inset: 0; overflow: hidden; width: 50%; border-right: 2px solid var(--ix-hub); }
.ix-compare__after .ix-compare__layer { width: var(--compare-w, 200%); }
.ix-compare__tag { position: absolute; top: 11px; z-index: 2; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; }
.ix-compare__tag--before { right: 11px; background: rgba(var(--ix-bad-rgb),0.22); color: var(--ix-bad); border: 1px solid rgba(var(--ix-bad-rgb),0.42); }
.ix-compare__tag--after { left: 11px; background: rgba(var(--ix-good-rgb),0.22); color: var(--ix-good); border: 1px solid rgba(var(--ix-good-rgb),0.42); }
.ix-compare__range { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.ix-compare__handle { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ix-hub); left: 50%; pointer-events: none; }
.ix-compare__handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; transform: translate(-50%,-50%); border-radius: 50%; background: var(--ix-hub); border: 3px solid var(--ix-bg); }

/* ---- Service / node cards ---- */
.ix-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .ix-grid--2 { grid-template-columns: 1fr 1fr; } }
.ix-card { background: var(--ix-surface); border: 1px solid var(--ix-line); border-radius: var(--ix-r); padding: 1.5rem; transition: border-color 200ms ease, transform 200ms ease; }
.ix-card { transition: border-color 200ms ease, transform 200ms var(--ix-ease), box-shadow 200ms ease; }
.ix-card:hover { border-color: var(--ix-line-strong); transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(var(--ix-hub-rgb), 0.4), 0 18px 50px rgba(var(--ix-hub-rgb), 0.1); }
.ix-card__tag { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ix-hub); margin: 0 0 0.6rem; }
.ix-card__title { font-size: 1.2rem; font-weight: 600; margin: 0 0 0.5rem; color: var(--ix-text); }
.ix-card__body { color: var(--ix-text-2); line-height: 1.6; margin: 0; font-size: 0.95rem; }

/* ---- CTA band ---- */
.ix-cta-band { text-align: center; }
.ix-cta-band .ix-h2 { margin-inline: auto; }
.ix-cta-band__row { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 1.75rem; }

/* ---- Reveal (settle, not bounce). The hidden state is gated on .has-motion so a
   no-JS / failed-motion load shows everything (the head failsafe + js/motion/index.js
   own has-motion). One personality: rise ~16px, ease out, fire once, never reverse. */
.index.has-motion .ix-reveal { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ix-ease), transform 600ms var(--ix-ease); }
.index.has-motion .ix-reveal.is-in { opacity: 1; transform: none; }

/* No prefers-reduced-motion media block is needed: every animated thing (canvas,
   reveals, pulse, counters, Lenis) is gated on html.has-motion, which the motion
   authority sets ONLY when motion is allowed (OS reduce-motion respected by default,
   overridable by the explicit force-on path). Reduced-motion users get the static,
   fully-visible page; forced-on users get the full motion experience. */

/* ============================================================
   Section components (PRD 28 homepage build)
   ============================================================ */

/* Prose links inside the dark body copy */
.ix-p a, .ix-lede a { color: var(--ix-hub); text-decoration: none; border-bottom: 1px solid var(--ix-line-strong); transition: border-color 150ms ease; }
.ix-p a:hover, .ix-lede a:hover { border-bottom-color: var(--ix-hub); }

/* ---- Grids ---- */
.ix-grid--3 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .ix-grid--3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .ix-grid--3 { grid-template-columns: 1fr 1fr 1fr; } }

/* ---- Card variants ---- */
.ix-card--feature { padding: 1.75rem; }
.ix-card__tag--cite { color: var(--ix-cite); }
.ix-card__title--sm { font-size: 1.05rem; }

/* ---- Demo grid (the before/after SEO signature) ---- */
.ix-demo-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .ix-demo-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.ix-compare { background: var(--ix-sunk); min-height: 210px; }
.ix-compare .ix-serp { border: none; border-radius: 0; background: transparent; padding: 0; }
.ix-compare__after { background: var(--ix-sunk); }
.ix-compare__range:focus-visible { outline: 2px solid var(--ix-hub); outline-offset: 2px; }

/* ---- Services teaser ---- */
.ix-services__teaser { color: var(--ix-mute); font-size: 0.95rem; margin: 1.5rem 0 1.75rem; max-width: 60ch; }

/* ---- Compounding curve (dark) ---- */
.ix-curve { color: var(--ix-text-2); margin-top: 1rem; background: var(--ix-surface); border: 1px solid var(--ix-line); border-radius: var(--ix-r); padding: clamp(1rem, 3vw, 2rem); }
.ix-curve__svg { width: 100%; height: auto; display: block; }
.ix-curve__line { fill: none; stroke: var(--ix-hub); }
.ix-curve__band, .ix-curve__area { fill: var(--ix-hub); }
.ix-curve__node { fill: var(--ix-bg); stroke: currentColor; }
.ix-curve__node--cite { fill: var(--ix-cite); stroke: var(--ix-bg); }
.index.has-motion .ix-curve__line { stroke-dasharray: 1400; stroke-dashoffset: 1400; }
.index.has-motion .ix-reveal.is-in .ix-curve__line { animation: ix-draw 1.8s var(--ix-ease) forwards; }
@keyframes ix-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .index.has-motion .ix-curve__line { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; } }

/* ---- Mono Readout (count-up facts) ---- */
.ix-readout { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: 1fr 1fr; }
@media (min-width: 760px) { .ix-readout { grid-template-columns: repeat(4, 1fr); } }
.ix-readout__item { display: flex; flex-direction: column; gap: 0.25rem; border-top: 1px solid var(--ix-line); padding-top: 0.85rem; }
.ix-readout__num { font-family: var(--font-mono); font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 600; color: var(--ix-hub); line-height: 1; }
.ix-readout__label { color: var(--ix-mute); font-size: 0.82rem; line-height: 1.4; }

/* ---- Engagement ---- */
.ix-engage { display: grid; gap: 1.5rem 2.5rem; grid-template-columns: 1fr; margin-top: 1.25rem; }
@media (min-width: 920px) { .ix-engage { grid-template-columns: 1.4fr 1fr; align-items: start; } }
.ix-engage__main .ix-p { margin: 1rem 0 1.5rem; }
.ix-engage__meta { display: grid; gap: 1rem 1.5rem; grid-template-columns: 1fr 1fr; margin: 0; }
.ix-engage__meta dt { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ix-mute); margin-bottom: 0.25rem; }
.ix-engage__meta dd { margin: 0; color: var(--ix-text-2); font-size: 0.92rem; line-height: 1.45; }
.ix-engage__card { background: var(--ix-surface); border: 1px solid var(--ix-line-strong); border-radius: var(--ix-r); padding: 1.75rem; position: relative; }
.ix-engage__price-label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ix-mute); margin: 0; }
.ix-engage__price { font-family: var(--font-body); font-weight: 700; font-size: 2rem; color: var(--ix-text); margin: 0.25rem 0 0.5rem; letter-spacing: -0.02em; }
.ix-engage__price-sub { color: var(--ix-mute); font-size: 0.85rem; line-height: 1.5; margin: 0 0 1.25rem; }
.ix-engage__points { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.ix-engage__points li { color: var(--ix-text-2); font-size: 0.9rem; padding-left: 1.4rem; position: relative; line-height: 1.45; }
.ix-engage__points li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 7px; height: 7px; border-radius: 50%; background: var(--ix-good); }
.ix-engage__cta { width: 100%; justify-content: center; }
.ix-engage__foot { color: var(--ix-mute); font-size: 0.9rem; line-height: 1.6; max-width: 70ch; margin: 1.75rem 0 0; }

/* ---- Work cards ---- */
.ix-work-card { display: flex; flex-direction: column; gap: 0.5rem; }
.ix-work-card__num { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ix-mute); }
.ix-work-card__status { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--ix-cite); margin-top: auto; padding-top: 0.5rem; }

/* ---- Guide card ---- */
.ix-guide-card__link { color: var(--ix-text); text-decoration: none; }
.ix-guide-card__link:hover { color: var(--ix-hub); }

/* ---- Index Rail (sticky section spine, built by js/motion/index.js) ----
   Shows at >=1280px (covers common laptops) in the left gutter. The container is
   pointer-events:none and only the narrow NUMBER hit-area is
   clickable; the section name is absolutely positioned + pointer-events:none, so even
   when it expands on hover it can never capture a pointer over the content (this is what
   was blocking the before/after compare slider near the rail). The name expands on HOVER
   only, never on .is-active, so the active section name can't sit over the headline. */
.index-rail { display: none; }
@media (min-width: 1280px) {
  .index-rail { display: flex; flex-direction: column; gap: 0.1rem; position: fixed; left: 1rem; top: 50%; transform: translateY(-50%); z-index: 80; pointer-events: none; }
  .index-rail__item { position: relative; display: flex; align-items: center; text-decoration: none; padding: 0.3rem 0; opacity: 0.5; transition: opacity 200ms ease; pointer-events: auto; }
  .index-rail__item:hover, .index-rail__item.is-active { opacity: 1; }
  .index-rail__num { font-family: var(--font-mono); font-size: 0.7rem; color: var(--ix-mute); width: 1.5rem; }
  .index-rail__item.is-active .index-rail__num { color: var(--ix-hub); }
  .index-rail__name { position: absolute; left: 2.1rem; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--ix-text-2); background: rgba(var(--ix-bg-rgb), 0.72); padding: 3px 9px; border-radius: 6px; max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; pointer-events: none; transition: max-width 250ms ease, opacity 250ms ease; }
  .index-rail__item:hover .index-rail__name { max-width: 12rem; opacity: 1; }
}

/* ============================================================
   Wow layer (PRD 28) - all gated on .has-motion (reduced-motion / no-JS = static)
   ============================================================ */

/* Cinematic hero entrance: elements rise + fade in, staggered, on load. */
@keyframes ix-hero-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.index.has-motion .index-hero__eyebrow,
.index.has-motion .index-hero__title,
.index.has-motion .index-hero__sub,
.index.has-motion .index-hero__cta,
.index.has-motion .index-hero__hint { opacity: 0; animation: ix-hero-in 0.85s var(--ix-ease) both; }
.index.has-motion .index-hero__eyebrow { animation-delay: 0.10s; }
.index.has-motion .index-hero__title   { animation-delay: 0.24s; }
.index.has-motion .index-hero__sub     { animation-delay: 0.46s; }
.index.has-motion .index-hero__cta     { animation-delay: 0.62s; }
.index.has-motion .index-hero__hint    { animation-delay: 0.78s; }

/* Living cobalt sheen across the italic accent word in the hero headline. */
.index.has-motion .index-hero__title em {
  background: linear-gradient(100deg, var(--ix-hub) 18%, var(--ix-hub-2) 50%, var(--ix-hub) 82%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: ix-sheen 7s linear infinite;
}
@keyframes ix-sheen { to { background-position: -220% 0; } }

/* Drifting aurora behind the closing CTA band (a second, quieter wow moment). */
.ix-cta-band { position: relative; overflow: hidden; }
.index.has-motion .ix-cta-band::before {
  content: ""; position: absolute; inset: -25% -10%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 55% at 30% 38%, rgba(var(--ix-hub-rgb), 0.16), transparent 70%),
    radial-gradient(36% 50% at 72% 64%, rgba(var(--ix-cite-rgb), 0.08), transparent 72%);
  animation: ix-aurora 16s ease-in-out infinite alternate;
}
.ix-cta-band .ix-wrap { position: relative; z-index: 1; }
@keyframes ix-aurora {
  from { transform: translate3d(-3%, -2%, 0) scale(1.05); }
  to   { transform: translate3d(5%, 3%, 0) scale(1.18); }
}