/* ============================================================
   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-brand__sub { font-family: var(--font-mono); font-size: 0.68rem; color: var(--ix-mute); letter-spacing: 0.08em; display: none; }
.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-brand__sub { display: inline; }
  .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); }

/* ---- HERO (the WebGL knowledge graph) ---- */
.index-hero { position: relative; min-height: 92vh; min-height: 92svh; display: flex; align-items: flex-end; background: var(--ix-bg); color: var(--ix-text); overflow: hidden; isolation: isolate; }
.index-hero__viz { position: absolute; inset: 0; z-index: 0; }
.index-hero__viz::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(58% 48% at 50% 40%, rgba(var(--ix-hub-rgb), 0.06), transparent 70%),
    radial-gradient(125% 95% at 50% 48%, transparent 52%, rgba(var(--ix-bg-rgb), 0.6) 100%);
}
.index-hero__poster, .index-hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.index-hero__poster { display: block; }
/* The canvas shows ONLY when motion is allowed (has-motion, set by the JS authority,
   which honours OS reduce-motion AND the force-on path). No-JS / reduced-motion = the
   poster stands alone. This replaces the old prefers-reduced-motion media hide so a
   forced-on visitor actually gets the canvas. */
.index-hero__canvas { display: none; opacity: 0; transition: opacity 900ms ease; }
.index.has-motion .index-hero__canvas { display: block; }
.index-hero__canvas.is-live { opacity: 1; }
.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); }
.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; }
.ix-compare__layer { padding: 1rem 1.1rem; }
.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: 10px; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; }
.ix-compare__tag--before { right: 10px; background: rgba(var(--ix-bad-rgb),0.18); color: var(--ix-bad); }
.ix-compare__tag--after { left: 10px; background: rgba(var(--ix-good-rgb),0.18); color: var(--ix-good); }
.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: 168px; }
.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) ---- */
.index-rail { display: none; }
@media (min-width: 1240px) {
  .index-rail { display: flex; flex-direction: column; gap: 0.1rem; position: fixed; left: 1.5rem; top: 50%; transform: translateY(-50%); z-index: 80; }
  .index-rail__item { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; padding: 0.3rem 0; opacity: 0.5; transition: opacity 200ms ease; }
  .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 { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--ix-text-2); max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width 250ms ease, opacity 250ms ease; }
  .index-rail__item:hover .index-rail__name, .index-rail__item.is-active .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); }
}