/* assets/_test-probe.css */
/* probe */

/* assets/audit-fixes-2026-09-19.css */
/* ============================================================
   AUDIT FIXES — 2026-09-19
   Real, verified gaps found by a site-wide read-only audit (curl +
   class-diff against the live ~950-class stylesheet vocabulary).
   Each rule below mirrors an existing sibling component's visual
   language rather than inventing a new look. Classes that turned out
   to have NO matching CSS *and* NO JS referencing them anywhere
   (.nav__anim-item, .footer__base--reveal, .footer__reveal-col) are
   deliberately left alone — verified dead markup, not a visible bug.
   ============================================================ */

/* ---- About page timeline: the moving "comet" + its path ----
   Siblings .tl-waypoint__ring/.tl-waypoint__dot already use this
   exact fill/stroke/glow pattern for the ring markers; the path the
   comet travels along and the comet itself had no paint at all, so
   the <path> (zero fill-area) and the marker <circle>s (default
   black fill) were effectively invisible against the dark ground. */
body[data-page="about"] .tl-journey__ghost {
  fill: none;
  stroke: var(--line-strong, var(--line));
  stroke-width: 1.5;
}
body[data-page="about"] .tl-journey__line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  filter: drop-shadow(0 0 6px color-mix(in oklab, var(--accent) 55%, transparent));
}
body[data-page="about"] .tl-comet__halo {
  fill: color-mix(in oklab, var(--accent) 28%, transparent);
}
body[data-page="about"] .tl-comet__core {
  fill: var(--accent);
  filter: drop-shadow(0 0 8px var(--accent));
}

/* ---- Shared pricing/concierge "pm" widget ----
   Site-wide component (about, brief, contact, services/*, blog, news,
   work, start, testimonials, compare/*). Sibling parts (pm__eyebrow,
   pm__title, pm__caption, pm__ctrls) are all styled; these wrapper
   divs and two modifiers had zero rules. */
.pm__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.pm__say {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* .pm-door--feat sets --door: var(--accent) inline already (so its
   top border is correctly accent-colored) but had no extra emphasis —
   mirrors the main pricing page's .door--featured glow treatment. */
.pm-door--feat {
  box-shadow: 0 0 32px -18px var(--accent);
}
/* .pm__btn--go is a solid filled CTA; --mute is a toggle, so it should
   only look "on" once pressed, not permanently filled. */
.pm__btn--mute[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

/* ---- /news "spin the archive" cylinder ----
   Built with a differently-named wrapper (.cyl-host) than the
   original 3D drag-stack component (.cyl), so it never inherited the
   perspective/height/touch-action that makes the stack a stack. */
.cyl-host {
  position: relative;
  height: 460px;
  perspective: 1100px;
  overflow: visible;
  touch-action: pan-y;
}
.cyl-host .post-card-2 { cursor: grab; }
.cyl-host .post-card-2:active { cursor: grabbing; }

/* ============================================================
   LIGHT-THEME ("gallery") READABILITY — 2026-09-19
   The hero console and the hero outcome strip are authored
   dark-first: their text is hardcoded #e8eaed (near-white) by
   high-specificity rules in the imported Astro bundle. On the
   white gallery theme that renders as invisible text on white —
   a 540x420 panel that reads as an empty grey slab. Measured:
   35 elements inside #engine-console at a contrast ratio of
   1.21-1.67:1 against the page background (4.5:1 is the AA
   floor for body text). These re-inks need !important to beat
   `body[data-page=...]` selectors in that bundle.
   ============================================================ */
html[data-theme="gallery"] #engine-console .log-line__text,
html[data-theme="gallery"] .console-2 .log-line__text,
html[data-theme="gallery"] .log-line__text { color: #16202c !important; }

html[data-theme="gallery"] #engine-console .log-line__time,
html[data-theme="gallery"] .console-2 .log-line__time,
html[data-theme="gallery"] .log-line__time,
html[data-theme="gallery"] .console__head-r-2,
html[data-theme="gallery"] .console__head-r { color: rgba(22,32,44,.62) !important; }

/* accent-coloured icons/figures: darken so they hold up on white */
html[data-theme="gallery"] #engine-console .log-line__icon,
html[data-theme="gallery"] .console-2 .log-line__icon { filter: brightness(.55) saturate(1.5); }
html[data-theme="gallery"] #engine-console b,
html[data-theme="gallery"] .console-2 b { color: #0b5cad !important; }

/* give the console a real surface so it stops reading as blank page */
html[data-theme="gallery"] #engine-console,
html[data-theme="gallery"] .console-2 {
  background: #fff !important;
  border: 1px solid rgba(11,18,32,.12) !important;
  box-shadow: 0 2px 8px rgba(10,20,50,.06), 0 40px 100px -36px rgba(0,90,220,.26) !important;
}

/* ============================================================
   HERO OUTCOME METRICS — clipped figures
   The metric cards clip their own numbers ("+23%" renders as
   "+23'", "38hr/wk" as "38hr/w", "$47/mo" as "$47/m") because the
   figure is sized in vw and the card has a fixed basis. Let the
   card size to its content and stop the overflow.
   ============================================================ */
.hero__outcome, .metric, .metric-2 { min-width: 0; overflow: visible; }
.hero__outcome .accent-num-2,
.hero__outcome .accent-num,
.metric__num, .metric__num-2 {
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  max-width: none;
}


/* assets/avakata-motion.css */
/* ============================================================
   AVAKATA MOTION — cursor, theme switcher, wipe + 6 swappable themes.
   Pairs with avakata-motion.js. All UI is gated behind .av-motion / fine
   pointers, so without JS or on touch the site is unchanged.
   ============================================================ */

/* ---- word-trailing custom cursor ---- */
@media (pointer: fine) {
  .av-cursor-on, .av-cursor-on a, .av-cursor-on button, .av-cursor-on [data-magnetic], .av-cursor-on .btn { cursor: none; }
  .av-cursor-on input, .av-cursor-on textarea, .av-cursor-on select { cursor: auto; }
}
.av-cursor {
  position: fixed; top: 0; left: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 1.5px solid var(--accent); border-radius: 50%; pointer-events: none; z-index: 99999;
  mix-blend-mode: difference; will-change: transform, width, height;
  transition: width .25s var(--ease, ease), height .25s var(--ease, ease), background .25s, border-color .25s;
}
.av-cursor.is-hover { width: 56px; height: 56px; background: color-mix(in oklab, var(--accent) 16%, transparent); }
.av-cursor__dot { position: fixed; top: 0; left: 0; width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--accent); border-radius: 50%; pointer-events: none; z-index: 99999; will-change: transform; }
.av-word {
  position: fixed; transform: translate(-50%, -50%); font-family: var(--f-mono); font-size: 11px;
  letter-spacing: .06em; color: var(--accent); pointer-events: none; z-index: 99998; white-space: nowrap;
  text-shadow: 0 0 8px color-mix(in oklab, var(--accent) 60%, transparent);
}

/* ---- theme switcher button ---- */
.av-switch { position: fixed; right: 18px; bottom: 18px; z-index: 99990; }
.av-switch__btn {
  display: flex; align-items: center; gap: 9px; padding: 10px 15px; border-radius: var(--r-pill, 999px);
  background: color-mix(in oklab, var(--bg) 64%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid color-mix(in oklab, var(--accent) 38%, var(--line)); color: var(--text);
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
  box-shadow: 0 14px 40px -18px rgba(0,0,0,.7); transition: transform .25s var(--ease, ease), border-color .25s;
}
.av-switch__btn:hover { transform: translateY(-2px); border-color: var(--accent); }
.av-switch__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.av-switch__chev { opacity: .6; }
@media (max-width: 560px) { .av-switch { right: 12px; bottom: 12px; } .av-switch__btn { padding: 8px 12px; font-size: 10px; letter-spacing: .1em; } }

/* ---- full-screen wipe used during theme change ---- */
.av-wipe { position: fixed; inset: 0; background: var(--accent); z-index: 99980; transform: scaleY(0); pointer-events: none; will-change: transform; }

/* lines created by SplitText (keep masked reveal clean) */
.av-line { overflow: hidden; }

/* smooth the palette change on the big surfaces */
.av-motion body { transition: background-color .55s var(--ease, ease), color .55s var(--ease, ease); }

/* ============================================================
   THE 6 THEMES — each is a COMPLETE visual redesign, not a recolor.
   Every block: (1) keep the palette tokens, (2) re-skin the real
   site-wide selectors — typography, shape, borders, surfaces, depth.
   "signal" is the default refined design (small signature block below).
   Local stylesheet font stacks are defined per-theme as --tf-* so the
   override reaches every element that reads --f-serif / --f-sans / --f-mono.
   ============================================================ */

/* ------------------------------------------------------------------ *
 * SIGNAL — refined dark serif + lime (the house style).               *
 * Default design; just a couple of signature reinforcements.          *
 * ------------------------------------------------------------------ */
html[data-theme="signal"] h1 em,
html[data-theme="signal"] h2 em,
html[data-theme="signal"] .hero__title em { font-style: italic; }
html[data-theme="signal"] .nav { border-radius: var(--r-pill); }


/* ================================================================== *
 *  AURORA — soft glassy, light-weight, airy. Frosted glass on every  *
 *  surface, big soft radii, hairline borders, wide airy tracking,    *
 *  thin grotesk body + delicate serif heads, cyan aurora glow.       *
 * ================================================================== */
html[data-theme="aurora"] {
  /* --text-dim was #5d6e92 — 3.74:1 against --bg, failing the 4.5:1 AA
     minimum for text. It's the color behind ~100 small labels site-wide
     (timestamps, mono captions, eyebrows, stat labels), so that one value
     alone was the "silver, can't read it" complaint. Brightened to 6.00:1,
     comfortably legible, while staying visibly dimmer than --text-mute
     (#b9c7e6, 11.25:1) and --text (16.73:1) so the hierarchy still reads. */
  --bg: #0a0f1e; --bg-elev: #111a32; --text: #eaf0ff; --text-mute: #b9c7e6; --text-dim: #8291ad;
  --line: rgba(150,200,255,0.16); --line-strong: rgba(150,200,255,0.30); --accent: #5ad1ff; --accent-ink: #04121b;
  --bg-glass: rgba(30,46,86,0.42);
  color-scheme: dark;
  /* airy, light-weight stacks */
  --f-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --f-sans: ui-rounded, 'Segoe UI', system-ui, 'Helvetica Neue', Arial, sans-serif;
  --f-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', monospace;
  --r-sm: 14px; --r-md: 22px; --r-lg: 30px; --r-xl: 40px;
}
/* aurora ribbon painted softly behind everything */
html[data-theme="aurora"] body {
  background:
    radial-gradient(ellipse 95% 60% at 12% -8%, rgba(90,209,255,0.20), transparent 58%),
    radial-gradient(ellipse 80% 60% at 90% 6%, rgba(150,120,255,0.16), transparent 58%),
    radial-gradient(ellipse 90% 70% at 50% 110%, rgba(90,209,255,0.10), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  font-weight: 300;
  letter-spacing: 0.005em;
}
html[data-theme="aurora"] h1, html[data-theme="aurora"] h2,
html[data-theme="aurora"] h3, html[data-theme="aurora"] h4,
html[data-theme="aurora"] .display, html[data-theme="aurora"] .hero__title,
html[data-theme="aurora"] .sandbox__title, html[data-theme="aurora"] .how-title {
  font-weight: 400; letter-spacing: -0.01em;
}
html[data-theme="aurora"] .lede, html[data-theme="aurora"] .hero__sub { font-weight: 300; }
html[data-theme="aurora"] .eyebrow, html[data-theme="aurora"] .label,
html[data-theme="aurora"] .pill, html[data-theme="aurora"] .tag {
  letter-spacing: 0.26em; font-weight: 400;
}
/* one glass treatment for ALL the card-like surfaces */
html[data-theme="aurora"] .card,
html[data-theme="aurora"] .console,
html[data-theme="aurora"] .sandbox,
html[data-theme="aurora"] .metric,
html[data-theme="aurora"] .flow__box,
html[data-theme="aurora"] .service,
html[data-theme="aurora"] .net-node,
html[data-theme="aurora"] .post-card,
html[data-theme="aurora"] .case-card,
html[data-theme="aurora"] .q-card,
html[data-theme="aurora"] .showcase__card,
html[data-theme="aurora"] .home-note,
html[data-theme="aurora"] .featured-study,
html[data-theme="aurora"] .feature-post,
html[data-theme="aurora"] .product-card,
html[data-theme="aurora"] .spark-card,
html[data-theme="aurora"] .signals,
html[data-theme="aurora"] .how__step,
html[data-theme="aurora"] .engage {
  background: linear-gradient(160deg, rgba(150,200,255,0.10), rgba(150,200,255,0.02));
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px -34px rgba(0,12,40,0.7), inset 0 1px 0 rgba(255,255,255,0.10);
}
html[data-theme="aurora"] .nav {
  background: rgba(20,32,64,0.45);
  -webkit-backdrop-filter: blur(26px) saturate(170%); backdrop-filter: blur(26px) saturate(170%);
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  box-shadow: 0 18px 50px -22px rgba(0,12,40,0.6), inset 0 1px 0 rgba(255,255,255,0.12);
}
html[data-theme="aurora"] .btn { border-radius: var(--r-pill); font-weight: 400; letter-spacing: 0.02em; }
html[data-theme="aurora"] .btn--primary {
  background: linear-gradient(120deg, #8ee6ff, #5ad1ff 50%, #8aa8ff);
  color: var(--accent-ink); box-shadow: 0 18px 50px -18px rgba(90,209,255,0.7);
}
html[data-theme="aurora"] .btn--ghost {
  background: rgba(150,200,255,0.06); border-color: var(--line-strong);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
html[data-theme="aurora"] .footer { border-top: 1px solid var(--line-strong); }
html[data-theme="aurora"] .field input,
html[data-theme="aurora"] .field textarea {
  background: rgba(150,200,255,0.06); border: 1px solid var(--line-strong);
  border-radius: var(--r-md); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}


/* ================================================================== *
 *  NOIR — brutalist. Tight UPPERCASE grotesk, ZERO radius, heavy mono *
 *  borders, hard offset shadows (no blur), monochrome, dense.        *
 * ================================================================== */
html[data-theme="noir"] {
  --bg: #060606; --bg-elev: #131313; --text: #f3f3f3; --text-mute: #a9a9a9; --text-dim: #6b6b6b;
  --line: #2a2a2a; --line-strong: #4a4a4a; --accent: #f5f5f5; --accent-ink: #000;
  --bg-glass: rgba(12,12,12,0.85);
  color-scheme: dark;
  /* industrial grotesk everywhere; headings lose the serif entirely */
  --f-serif: 'Arial Black', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-mono: 'Courier New', ui-monospace, monospace;
  --r-sm: 0px; --r-md: 0px; --r-lg: 0px; --r-xl: 0px; --r-pill: 0px;
  --pad-section: clamp(48px, 6vw, 96px); --pad-card: 22px; --pad-card-lg: 30px;
}
html[data-theme="noir"] body { background: #060606; letter-spacing: -0.005em; }
/* hard brutalist headings: massive, tight, uppercase */
html[data-theme="noir"] h1, html[data-theme="noir"] h2,
html[data-theme="noir"] h3, html[data-theme="noir"] h4,
html[data-theme="noir"] .display, html[data-theme="noir"] .hero__title,
html[data-theme="noir"] .sandbox__title, html[data-theme="noir"] .how-title,
html[data-theme="noir"] .flow__title, html[data-theme="noir"] .footer__brand-mark {
  font-family: var(--f-serif);
  font-weight: 800; font-style: normal !important;
  text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.92;
}
html[data-theme="noir"] h1 em, html[data-theme="noir"] h2 em,
html[data-theme="noir"] h3 em, html[data-theme="noir"] .hero__title em,
html[data-theme="noir"] .metric__num em, html[data-theme="noir"] .sandbox__title em {
  /* No highlighter block here: it painted over adjacent lines at headline
     line-heights and fought the split-safe shimmer. Mono emphasis instead. */
  font-style: normal;
}
html[data-theme="noir"] .footer__brand-mark { font-style: normal; }
html[data-theme="noir"] .lede, html[data-theme="noir"] .hero__sub { color: var(--text-mute); font-weight: 400; }
html[data-theme="noir"] .eyebrow, html[data-theme="noir"] .label,
html[data-theme="noir"] .pill, html[data-theme="noir"] .tag,
html[data-theme="noir"] .nav__brand {
  letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700;
}
/* one brutalist surface for every card: flat, heavy border, hard drop shadow */
html[data-theme="noir"] .card,
html[data-theme="noir"] .console,
html[data-theme="noir"] .sandbox,
html[data-theme="noir"] .metric,
html[data-theme="noir"] .flow__box,
html[data-theme="noir"] .service,
html[data-theme="noir"] .net-node,
html[data-theme="noir"] .post-card,
html[data-theme="noir"] .case-card,
html[data-theme="noir"] .q-card,
html[data-theme="noir"] .showcase__card,
html[data-theme="noir"] .home-note,
html[data-theme="noir"] .featured-study,
html[data-theme="noir"] .feature-post,
html[data-theme="noir"] .product-card,
html[data-theme="noir"] .spark-card,
html[data-theme="noir"] .signals,
html[data-theme="noir"] .alert,
html[data-theme="noir"] .how__step,
html[data-theme="noir"] .engage {
  background: var(--bg-elev);
  border: 2px solid var(--text);
  border-radius: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 8px 8px 0 0 var(--text);
}
html[data-theme="noir"] .card--glass { -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-theme="noir"] .nav {
  background: #0c0c0c; border: 2px solid var(--text); border-radius: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 6px 6px 0 0 var(--text);
}
html[data-theme="noir"] .nav__cta {
  background: var(--text); color: #000; border-radius: 0;
  box-shadow: none; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
}
html[data-theme="noir"] .nav__cta::after { display: none; }
html[data-theme="noir"] .btn {
  border-radius: 0; border: 2px solid var(--text); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.04em;
}
html[data-theme="noir"] .btn--primary {
  background: var(--text); color: #000; box-shadow: 5px 5px 0 0 rgba(245,245,245,0.35);
}
html[data-theme="noir"] .btn--primary:hover { transform: translate(-2px,-2px); box-shadow: 8px 8px 0 0 rgba(245,245,245,0.45); }
html[data-theme="noir"] .btn--ghost { background: transparent; color: var(--text); }
html[data-theme="noir"] .pill, html[data-theme="noir"] .tag, html[data-theme="noir"] .tabs {
  border: 2px solid var(--text); border-radius: 0; background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-theme="noir"] .field input,
html[data-theme="noir"] .field textarea {
  background: #0c0c0c; border: 2px solid var(--text); border-radius: 0; color: var(--text);
}
html[data-theme="noir"] .divider { height: 2px; background: var(--text); }
html[data-theme="noir"] .footer { border-top: 2px solid var(--text); }
html[data-theme="noir"] .section-head { text-align: left; justify-items: start; }


/* ================================================================== *
 *  SOLAR — warm LIGHT editorial. Classic book serif everywhere, ink  *
 *  on cream, blood-orange accent, fine warm rules, soft paper depth. *
 * ================================================================== */
html[data-theme="solar"] {
  --bg: #f2ece0; --bg-soft: #ece4d4; --bg-elev: #fbf7ef; --text: #17120c; --text-mute: #4e463a; --text-dim: #8a7c68;
  --line: #d9cdb6; --line-strong: #c4b393; --accent: #d8431a; --accent-ink: #fff;
  --bg-glass: rgba(251,247,239,0.78);
  --signal-cyan: #1f6f8b; --signal-green: #3f7d3a;
  color-scheme: light;
  /* editorial serif body + classic small-caps mono labels */
  --f-serif: 'Georgia', 'Times New Roman', 'Iowan Old Style', serif;
  --f-sans: 'Georgia', 'Iowan Old Style', 'Times New Roman', serif;
  --f-mono: 'Courier New', ui-monospace, monospace;
  --r-sm: 4px; --r-md: 6px; --r-lg: 10px; --r-xl: 14px; --r-pill: 999px;
  --pad-card: 32px; --pad-card-lg: 44px;
}
html[data-theme="solar"] body {
  background:
    radial-gradient(ellipse 120% 80% at 50% -20%, #fbf7ef, transparent 60%),
    var(--bg);
  color: var(--text);
  line-height: 1.6;
}
/* paper grain reads wrong on cream — soften it */
html[data-theme="solar"] body::before { opacity: 0.05; mix-blend-mode: multiply; }
html[data-theme="solar"] h1, html[data-theme="solar"] h2,
html[data-theme="solar"] h3, html[data-theme="solar"] h4,
html[data-theme="solar"] .display, html[data-theme="solar"] .hero__title,
html[data-theme="solar"] .sandbox__title, html[data-theme="solar"] .how-title {
  font-family: var(--f-serif); font-weight: 400; letter-spacing: -0.012em;
}
html[data-theme="solar"] h1 em, html[data-theme="solar"] h2 em,
html[data-theme="solar"] h3 em, html[data-theme="solar"] .hero__title em,
html[data-theme="solar"] .metric__num em { font-style: italic; color: var(--accent); }
html[data-theme="solar"] .lede, html[data-theme="solar"] .hero__sub {
  font-family: var(--f-serif); color: var(--text-mute); font-style: italic;
}
html[data-theme="solar"] .eyebrow, html[data-theme="solar"] .label,
html[data-theme="solar"] .footer__col h5, html[data-theme="solar"] .nav__brand {
  font-family: var(--f-mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-dim);
}
/* warm, lightly-shadowed paper cards for every surface */
html[data-theme="solar"] .card,
html[data-theme="solar"] .console,
html[data-theme="solar"] .sandbox,
html[data-theme="solar"] .metric,
html[data-theme="solar"] .flow__box,
html[data-theme="solar"] .service,
html[data-theme="solar"] .net-node,
html[data-theme="solar"] .post-card,
html[data-theme="solar"] .case-card,
html[data-theme="solar"] .q-card,
html[data-theme="solar"] .showcase__card,
html[data-theme="solar"] .home-note,
html[data-theme="solar"] .featured-study,
html[data-theme="solar"] .feature-post,
html[data-theme="solar"] .product-card,
html[data-theme="solar"] .spark-card,
html[data-theme="solar"] .signals,
html[data-theme="solar"] .how__step,
html[data-theme="solar"] .engage {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 18px 40px -28px rgba(60,40,20,0.45);
}
html[data-theme="solar"] .nav {
  background: var(--bg-glass);
  -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%);
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  box-shadow: 0 12px 30px -18px rgba(60,40,20,0.4);
}
html[data-theme="solar"] .btn { border-radius: var(--r-pill); font-family: var(--f-sans); font-weight: 600; }
html[data-theme="solar"] .btn--primary {
  background: var(--accent); color: #fff; box-shadow: 0 16px 36px -18px rgba(216,67,26,0.6);
}
html[data-theme="solar"] .btn--ghost { background: transparent; border-color: var(--line-strong); color: var(--text); }
html[data-theme="solar"] .nav__cta { background: var(--accent); color: #fff; box-shadow: 0 4px 0 -1px #9c2d10; }
html[data-theme="solar"] .nav__cta::after { display: none; }
html[data-theme="solar"] .pill, html[data-theme="solar"] .tag {
  background: rgba(216,67,26,0.06); border-color: var(--line-strong); color: var(--text-mute);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-theme="solar"] .field input,
html[data-theme="solar"] .field textarea {
  background: #fff; border: 1px solid var(--line-strong); color: var(--text); border-radius: var(--r-md);
}
html[data-theme="solar"] .footer { border-top: 1px solid var(--line-strong); }
html[data-theme="solar"] ::selection { background: var(--accent); color: #fff; }
/* light-mode contrast fix: client logo chips were near-white on cream */
html[data-theme="solar"] .client-chip { border-color: var(--line-strong); }
/* light-mode contrast fix: site.css hardcodes light text on these — re-ink for cream */
html[data-theme="solar"] .log-line__text { color: var(--text); }
html[data-theme="solar"] .log-line__time { color: var(--text-dim); }
html[data-theme="solar"] .feature-post p,
html[data-theme="solar"] .featured-study__body p,
html[data-theme="solar"] .case-card__title,
html[data-theme="solar"] .post-card__excerpt,
html[data-theme="solar"] .work-hero .lede,
html[data-theme="solar"] .services-hero .lede,
html[data-theme="solar"] .news-hero .lede,
html[data-theme="solar"] .t-hero .lede,
html[data-theme="solar"] .demo-hero .lede { color: var(--text-mute); }
html[data-theme="solar"] .lede:hover,
html[data-theme="solar"] .feature-post:hover p,
html[data-theme="solar"] .featured-study__body p:hover { color: var(--text); text-shadow: none; }


/* ================================================================== *
 *  VAPOR — synthwave neon. Wide-tracked uppercase grotesk + italic    *
 *  serif flashes, hot-magenta neon glow, gradient surfaces, scanline. *
 * ================================================================== */
html[data-theme="vapor"] {
  --bg: #140a24; --bg-soft: #1a0d30; --bg-elev: #1f1038; --text: #ffeaff; --text-mute: #c79bd6; --text-dim: #7d5a93;
  --line: rgba(255,61,240,0.22); --line-strong: rgba(255,61,240,0.45); --accent: #ff3df0; --accent-ink: #1a0418;
  --bg-glass: rgba(31,16,56,0.55);
  --signal-cyan: #4df0ff;
  color-scheme: dark;
  --f-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --f-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-mono: ui-monospace, 'JetBrains Mono', monospace;
  --r-sm: 6px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px;
}
/* synthwave horizon + violet wash, fixed behind the page */
html[data-theme="vapor"] body {
  background:
    linear-gradient(180deg, transparent 0%, transparent 62%, rgba(255,61,240,0.10) 75%, rgba(77,240,255,0.08) 100%),
    radial-gradient(ellipse 100% 60% at 50% 120%, rgba(255,61,240,0.28), transparent 60%),
    radial-gradient(ellipse 80% 50% at 80% -10%, rgba(77,240,255,0.16), transparent 55%),
    var(--bg);
  background-attachment: fixed;
}
/* moving scanlines over the whole page — pure synthwave CRT */
html[data-theme="vapor"] body::after {
  content: ''; position: fixed; inset: 0; z-index: 999; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(255,61,240,0.05) 3px, rgba(0,0,0,0) 4px);
  mix-blend-mode: screen; opacity: 0.6;
}
html[data-theme="vapor"] h1, html[data-theme="vapor"] h2,
html[data-theme="vapor"] h3, html[data-theme="vapor"] h4,
html[data-theme="vapor"] .display, html[data-theme="vapor"] .hero__title,
html[data-theme="vapor"] .sandbox__title, html[data-theme="vapor"] .how-title {
  font-family: var(--f-sans); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
  text-shadow: 0 0 18px rgba(255,61,240,0.55), 0 0 2px rgba(255,255,255,0.7);
}
html[data-theme="vapor"] h1 em, html[data-theme="vapor"] h2 em,
html[data-theme="vapor"] h3 em, html[data-theme="vapor"] .hero__title em,
html[data-theme="vapor"] .metric__num em, html[data-theme="vapor"] .sandbox__title em {
  font-family: var(--f-serif); font-style: italic; text-transform: none; letter-spacing: -0.01em;
  color: var(--signal-cyan); text-shadow: 0 0 22px rgba(77,240,255,0.7);
}
html[data-theme="vapor"] .lede, html[data-theme="vapor"] .hero__sub { color: var(--text-mute); }
html[data-theme="vapor"] .eyebrow, html[data-theme="vapor"] .label,
html[data-theme="vapor"] .pill, html[data-theme="vapor"] .tag,
html[data-theme="vapor"] .nav__brand {
  letter-spacing: 0.34em; text-transform: uppercase;
  text-shadow: 0 0 12px rgba(255,61,240,0.5);
}
/* neon-bordered gradient panels for every card */
html[data-theme="vapor"] .card,
html[data-theme="vapor"] .console,
html[data-theme="vapor"] .sandbox,
html[data-theme="vapor"] .metric,
html[data-theme="vapor"] .flow__box,
html[data-theme="vapor"] .service,
html[data-theme="vapor"] .net-node,
html[data-theme="vapor"] .post-card,
html[data-theme="vapor"] .case-card,
html[data-theme="vapor"] .q-card,
html[data-theme="vapor"] .showcase__card,
html[data-theme="vapor"] .home-note,
html[data-theme="vapor"] .featured-study,
html[data-theme="vapor"] .feature-post,
html[data-theme="vapor"] .product-card,
html[data-theme="vapor"] .spark-card,
html[data-theme="vapor"] .signals,
html[data-theme="vapor"] .how__step,
html[data-theme="vapor"] .engage {
  background: linear-gradient(160deg, rgba(255,61,240,0.10), rgba(77,240,255,0.05) 60%, rgba(31,16,56,0.6));
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: 0 0 0 1px rgba(255,61,240,0.18) inset, 0 0 34px -10px rgba(255,61,240,0.45), 0 26px 60px -30px rgba(0,0,0,0.8);
}
html[data-theme="vapor"] .nav {
  background: rgba(31,16,56,0.6);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  box-shadow: 0 0 28px -8px rgba(255,61,240,0.5), inset 0 0 0 1px rgba(255,61,240,0.18);
}
html[data-theme="vapor"] .btn { border-radius: var(--r-pill); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; }
html[data-theme="vapor"] .btn--primary {
  background: linear-gradient(120deg, #ff3df0, #ff7df5 50%, #4df0ff);
  color: var(--accent-ink); box-shadow: 0 0 30px -6px rgba(255,61,240,0.8), 0 14px 40px -16px rgba(77,240,255,0.6);
}
html[data-theme="vapor"] .btn--ghost {
  background: rgba(255,61,240,0.05); border-color: var(--line-strong); color: var(--text);
  box-shadow: 0 0 18px -8px rgba(255,61,240,0.5);
}
html[data-theme="vapor"] .pill, html[data-theme="vapor"] .tag {
  border-color: var(--line-strong); background: rgba(255,61,240,0.06);
}
html[data-theme="vapor"] .field input,
html[data-theme="vapor"] .field textarea {
  background: rgba(255,61,240,0.05); border: 1px solid var(--line-strong); color: var(--text); border-radius: var(--r-md);
}
html[data-theme="vapor"] .divider { background: linear-gradient(90deg, transparent, var(--accent), var(--signal-cyan), transparent); height: 1px; }
html[data-theme="vapor"] .footer { border-top: 1px solid var(--line-strong); }


/* ================================================================== *
 *  MATRIX — terminal. Monospace EVERYTHING, phosphor green on black,  *
 *  square 2px corners, green glow, CRT scanlines, boxy hard borders. *
 * ================================================================== */
html[data-theme="matrix"] {
  --bg: #04080a; --bg-soft: #061009; --bg-elev: #07140d; --text: #d6ffe6; --text-mute: #62c98a; --text-dim: #2f6f4a;
  --line: #15402b; --line-strong: #1f5e3e; --accent: #39ff14; --accent-ink: #021006;
  --bg-glass: rgba(7,20,13,0.8);
  --signal-cyan: #2fffd0; --signal-green: #39ff14; --signal-amber: #b6ff3d;
  color-scheme: dark;
  /* one monospace stack for the WHOLE site */
  --f-serif: ui-monospace, 'JetBrains Mono', 'Courier New', monospace;
  --f-sans: ui-monospace, 'JetBrains Mono', 'Courier New', monospace;
  --f-mono: ui-monospace, 'JetBrains Mono', 'Courier New', monospace;
  --r-sm: 2px; --r-md: 2px; --r-lg: 2px; --r-xl: 2px; --r-pill: 2px;
}
html[data-theme="matrix"] body {
  background: var(--bg);
  font-family: var(--f-mono);
  letter-spacing: 0.01em;
}
/* CRT scanline veil over everything */
html[data-theme="matrix"] body::after {
  content: ''; position: fixed; inset: 0; z-index: 999; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(57,255,20,0.045) 3px, rgba(0,0,0,0) 4px);
  opacity: 0.7;
}
html[data-theme="matrix"] h1, html[data-theme="matrix"] h2,
html[data-theme="matrix"] h3, html[data-theme="matrix"] h4,
html[data-theme="matrix"] .display, html[data-theme="matrix"] .hero__title,
html[data-theme="matrix"] .sandbox__title, html[data-theme="matrix"] .how-title,
html[data-theme="matrix"] .flow__title, html[data-theme="matrix"] .footer__brand-mark {
  font-family: var(--f-mono); font-weight: 700; font-style: normal !important;
  text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.05;
  text-shadow: 0 0 12px rgba(57,255,20,0.55);
}
html[data-theme="matrix"] h1 em, html[data-theme="matrix"] h2 em,
html[data-theme="matrix"] h3 em, html[data-theme="matrix"] .hero__title em,
html[data-theme="matrix"] .metric__num em, html[data-theme="matrix"] .sandbox__title em {
  font-style: normal; color: var(--accent); text-shadow: 0 0 16px rgba(57,255,20,0.8);
}
/* keep the wide monospace display type from overflowing / colliding */
html[data-theme="matrix"] h1, html[data-theme="matrix"] .hero__title, html[data-theme="matrix"] .display,
html[data-theme="matrix"] .sandbox__title, html[data-theme="matrix"] .how-title {
  font-size: clamp(26px, 4.4vw, 56px) !important; letter-spacing: -0.01em;
  overflow-wrap: anywhere; word-break: normal; line-height: 1.08;
}
html[data-theme="matrix"] h2 { font-size: clamp(22px, 3.2vw, 40px) !important; overflow-wrap: anywhere; }
/* prefix headings like a shell prompt */
html[data-theme="matrix"] h1::before, html[data-theme="matrix"] h2::before {
  content: '> '; color: var(--accent); opacity: 0.8;
}
html[data-theme="matrix"] .lede, html[data-theme="matrix"] .hero__sub { color: var(--text-mute); }
html[data-theme="matrix"] .eyebrow, html[data-theme="matrix"] .label,
html[data-theme="matrix"] .pill, html[data-theme="matrix"] .tag,
html[data-theme="matrix"] .nav__brand { letter-spacing: 0.04em; text-transform: uppercase; font-size: 12px; }
/* boxy terminal panels with green inner glow for every surface */
html[data-theme="matrix"] .card,
html[data-theme="matrix"] .console,
html[data-theme="matrix"] .sandbox,
html[data-theme="matrix"] .metric,
html[data-theme="matrix"] .flow__box,
html[data-theme="matrix"] .service,
html[data-theme="matrix"] .net-node,
html[data-theme="matrix"] .post-card,
html[data-theme="matrix"] .case-card,
html[data-theme="matrix"] .q-card,
html[data-theme="matrix"] .showcase__card,
html[data-theme="matrix"] .home-note,
html[data-theme="matrix"] .featured-study,
html[data-theme="matrix"] .feature-post,
html[data-theme="matrix"] .product-card,
html[data-theme="matrix"] .spark-card,
html[data-theme="matrix"] .signals,
html[data-theme="matrix"] .how__step,
html[data-theme="matrix"] .engage {
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 0 0 1px rgba(57,255,20,0.10) inset, 0 0 26px -14px rgba(57,255,20,0.5);
}
html[data-theme="matrix"] .nav {
  background: rgba(4,8,10,0.85);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid var(--line-strong); border-radius: 2px;
  box-shadow: 0 0 24px -10px rgba(57,255,20,0.5), inset 0 0 0 1px rgba(57,255,20,0.12);
}
html[data-theme="matrix"] .btn { border-radius: 2px; text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--f-mono); font-weight: 600; }
html[data-theme="matrix"] .btn--primary {
  background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 26px -6px rgba(57,255,20,0.8);
}
html[data-theme="matrix"] .btn--ghost {
  background: transparent; border-color: var(--line-strong); color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(57,255,20,0.18);
}
html[data-theme="matrix"] .nav__cta { background: var(--accent); color: var(--accent-ink); border-radius: 2px; box-shadow: 0 0 18px -4px rgba(57,255,20,0.7); }
html[data-theme="matrix"] .nav__cta::after { display: none; }
html[data-theme="matrix"] .pill, html[data-theme="matrix"] .tag, html[data-theme="matrix"] .tabs {
  border: 1px solid var(--line-strong); border-radius: 2px; background: rgba(57,255,20,0.05);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-theme="matrix"] .field input,
html[data-theme="matrix"] .field textarea {
  background: #061009; border: 1px solid var(--line-strong); border-radius: 2px; color: var(--accent); font-family: var(--f-mono);
}
html[data-theme="matrix"] .divider { background: var(--line-strong); }
html[data-theme="matrix"] .footer { border-top: 1px solid var(--line-strong); }
html[data-theme="matrix"] ::selection { background: var(--accent); color: var(--accent-ink); }


/* ================================================================== *
 *  GALLERY — Apple-store light. Pure white ground, ink type set in    *
 *  the blocky noir grotesk (Arial Black), electric blue + green from  *
 *  the house signal palette, and 4-D depth: layered soft shadows,     *
 *  floating white cards, frosted glass nav, faint blue/green auras.   *
 * ================================================================== */
html[data-theme="gallery"] {
  --bg: #ffffff; --bg-soft: #f4f7fb; --bg-elev: #ffffff; --text: #0b1220; --text-mute: #3f4c63; --text-dim: #5b6a84;
  --line: rgba(11,18,32,0.10); --line-strong: rgba(11,18,32,0.18); --accent: #0071e3; --accent-ink: #ffffff;
  --bg-glass: rgba(255,255,255,0.72);
  --signal-cyan: #0071e3; --signal-green: #0b7a4b; --signal-amber: #b06a00; --signal-warm: #c2410c; --signal-red: #d13415;
  color-scheme: light;
  /* the blocky noir grotesk, everywhere it matters */
  --f-serif: 'Arial Black', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', monospace;
  --r-sm: 12px; --r-md: 18px; --r-lg: 26px; --r-xl: 36px; --r-pill: 999px;
}
/* white ground with faint blue/green auras drifting behind everything */
html[data-theme="gallery"] body {
  background:
    radial-gradient(ellipse 80% 55% at 12% -6%, rgba(0,113,227,0.10), transparent 58%),
    radial-gradient(ellipse 70% 55% at 92% 4%, rgba(0,190,130,0.09), transparent 56%),
    radial-gradient(ellipse 90% 60% at 50% 112%, rgba(0,113,227,0.06), transparent 62%),
    #ffffff;
  background-attachment: fixed;
  color: var(--text);
}
/* film grain reads as dirt on white — nearly off */
html[data-theme="gallery"] body::before { opacity: 0.035; mix-blend-mode: multiply; }
/* blocky headline voice: heavy, uppercase, tight — the noir cut, in ink */
html[data-theme="gallery"] h1, html[data-theme="gallery"] h2,
html[data-theme="gallery"] h3, html[data-theme="gallery"] h4,
html[data-theme="gallery"] .display, html[data-theme="gallery"] .hero__title,
html[data-theme="gallery"] .sandbox__title, html[data-theme="gallery"] .how-title,
html[data-theme="gallery"] .flow__title, html[data-theme="gallery"] .footer__brand-mark {
  font-family: var(--f-serif);
  font-weight: 900; font-style: normal !important;
  text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.96;
}
html[data-theme="gallery"] h1 em, html[data-theme="gallery"] h2 em,
html[data-theme="gallery"] h3 em, html[data-theme="gallery"] .hero__title em,
html[data-theme="gallery"] .metric__num em, html[data-theme="gallery"] .sandbox__title em {
  font-style: normal; color: var(--accent);
  text-shadow: none;
}
html[data-theme="gallery"] .lede, html[data-theme="gallery"] .hero__sub { color: var(--text-mute); font-weight: 400; }
html[data-theme="gallery"] .eyebrow, html[data-theme="gallery"] .label,
html[data-theme="gallery"] .pill, html[data-theme="gallery"] .tag,
html[data-theme="gallery"] .nav__brand {
  letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--signal-green);
}
/* one floating-white-card treatment for every surface — the 4-D depth:
   a contact shadow + a deep colored ambient shadow, and a lift on hover */
html[data-theme="gallery"] .card,
html[data-theme="gallery"] .console,
html[data-theme="gallery"] .sandbox,
html[data-theme="gallery"] .metric,
html[data-theme="gallery"] .flow__box,
html[data-theme="gallery"] .service,
html[data-theme="gallery"] .net-node,
html[data-theme="gallery"] .post-card,
html[data-theme="gallery"] .case-card,
html[data-theme="gallery"] .q-card,
html[data-theme="gallery"] .showcase__card,
html[data-theme="gallery"] .home-note,
html[data-theme="gallery"] .featured-study,
html[data-theme="gallery"] .feature-post,
html[data-theme="gallery"] .product-card,
html[data-theme="gallery"] .spark-card,
html[data-theme="gallery"] .signals,
html[data-theme="gallery"] .how__step,
html[data-theme="gallery"] .grade-card,
html[data-theme="gallery"] .heal-step,
html[data-theme="gallery"] .agcard,
html[data-theme="gallery"] .engage {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 2px 6px rgba(10,20,50,0.06), 0 28px 70px -30px rgba(0,90,220,0.18);
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1);
}
html[data-theme="gallery"] .card:hover,
html[data-theme="gallery"] .service:hover,
html[data-theme="gallery"] .post-card:hover,
html[data-theme="gallery"] .case-card:hover,
html[data-theme="gallery"] .product-card:hover,
html[data-theme="gallery"] .agcard:hover {
  transform: translateY(-6px);
  box-shadow: 0 4px 10px rgba(10,20,50,0.07), 0 46px 110px -34px rgba(0,90,220,0.30);
}
html[data-theme="gallery"] .nav {
  background: rgba(255,255,255,0.78);
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  box-shadow: 0 2px 6px rgba(10,20,50,0.05), 0 22px 60px -28px rgba(0,90,220,0.22);
}
html[data-theme="gallery"] .nav__links { color: var(--text-mute); }
html[data-theme="gallery"] .nav.is-scrolled { background: rgba(255,255,255,0.82); border-color: var(--line); }
html[data-theme="gallery"] .btn { border-radius: var(--r-pill); font-weight: 700; letter-spacing: 0.02em; }
html[data-theme="gallery"] .btn--primary {
  background: linear-gradient(120deg, #0071e3, #0086f0);
  color: #fff; box-shadow: 0 12px 34px -12px rgba(0,113,227,0.55);
}
html[data-theme="gallery"] .btn--ghost {
  background: #ffffff; border-color: var(--line-strong); color: var(--text);
  box-shadow: 0 2px 6px rgba(10,20,50,0.05);
}
html[data-theme="gallery"] .nav__cta { background: linear-gradient(120deg, #0071e3, #00a06a); color: #fff; box-shadow: 0 10px 26px -10px rgba(0,113,227,0.5); }
html[data-theme="gallery"] .nav__cta::after { display: none; }
html[data-theme="gallery"] .pill, html[data-theme="gallery"] .tag, html[data-theme="gallery"] .tabs {
  background: rgba(0,113,227,0.06); border-color: rgba(0,113,227,0.22); color: var(--text-mute);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-theme="gallery"] .field input,
html[data-theme="gallery"] .field textarea {
  background: #ffffff; border: 1px solid var(--line-strong); color: var(--text); border-radius: var(--r-md);
  box-shadow: inset 0 1px 3px rgba(10,20,50,0.05);
}
html[data-theme="gallery"] .divider { background: var(--line); }
html[data-theme="gallery"] .footer { border-top: 1px solid var(--line); }
html[data-theme="gallery"] ::selection { background: var(--accent); color: #fff; }
/* live.js pins data-accent="cyan"/data-bg="midnight" on <html>, and those
   :root[data-*] token rules (0,2,0) out-rank a bare theme selector (0,1,1).
   Re-assert the gallery tokens at (0,2,1) so white always wins the war. */
html[data-theme="gallery"][data-accent], html[data-theme="gallery"][data-bg] {
  --accent: #0071e3; --accent-ink: #ffffff;
  --bg: #ffffff; --bg-soft: #f4f7fb; --bg-elev: #ffffff; --bg-glass: rgba(255,255,255,0.72);
  --line: rgba(11,18,32,0.10); --line-strong: rgba(11,18,32,0.18);
}
/* the self-rewriting hero word inherits a cyan glow from the dark themes */
html[data-theme="gallery"] .hero__rewrite-text { text-shadow: none; }
html[data-theme="gallery"] .hero__title em { text-shadow: none; }
/* dark-literal set pieces re-staged for white: the Pulse product stage and
   the hero demo console keep their forward-pop depth, lose the dark glass
   and the darkening vignettes (a black fog makes no sense on a white page). */
html[data-theme="gallery"] .pulse-feature__stage {
  background: #ffffff;
  border: 1px solid var(--line);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 2px 8px rgba(10,20,50,0.06), 0 44px 110px -36px rgba(0,90,220,0.28);
}
html[data-theme="gallery"] #pulse.pulse-feature::after { display: none; }
html[data-theme="gallery"] .console-stage::before { display: none; }
html[data-theme="gallery"] .console {
  background: #ffffff;
  border-color: var(--line);
  box-shadow: 0 2px 8px rgba(10,20,50,0.06), 0 40px 100px -36px rgba(0,90,220,0.26);
}

/* dark-glass composites from the onboarding + portal pages, re-staged white */
html[data-theme="gallery"] .st-stage,
html[data-theme="gallery"] .pt-card {
  background: #ffffff;
  border: 1px solid var(--line);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 2px 8px rgba(10,20,50,0.06), 0 44px 110px -36px rgba(0,90,220,0.26);
}
html[data-theme="gallery"] .st-google { border-color: var(--line-strong); box-shadow: 0 2px 8px rgba(10,20,50,0.08), 0 14px 36px -16px rgba(0,90,220,0.25); }
html[data-theme="gallery"] .st-snip code {
  background: #f4f7fb; border-color: var(--line-strong); color: #0b5cad;
  box-shadow: inset 0 1px 3px rgba(10,20,50,0.05);
}
html[data-theme="gallery"] .st-console { color: var(--text-mute); }
html[data-theme="gallery"] .cx__snip code { background: #f4f7fb; border-color: var(--line-strong); color: #0b5cad; }

/* light-mode re-inks for surfaces site.css hardcodes light (same fix solar needs) */
html[data-theme="gallery"] .client-chip { border-color: var(--line-strong); }
html[data-theme="gallery"] .log-line__text { color: var(--text); }
html[data-theme="gallery"] .log-line__time { color: var(--text-dim); }
html[data-theme="gallery"] .feature-post p,
html[data-theme="gallery"] .featured-study__body p,
html[data-theme="gallery"] .case-card__title,
html[data-theme="gallery"] .post-card__excerpt,
html[data-theme="gallery"] .work-hero .lede,
html[data-theme="gallery"] .services-hero .lede,
html[data-theme="gallery"] .news-hero .lede,
html[data-theme="gallery"] .t-hero .lede,
html[data-theme="gallery"] .demo-hero .lede { color: var(--text-mute); }
html[data-theme="gallery"] .lede:hover,
html[data-theme="gallery"] .feature-post:hover p,
html[data-theme="gallery"] .featured-study__body p:hover { color: var(--text); text-shadow: none; }


@media (prefers-reduced-motion: reduce) {
  .av-cursor, .av-cursor__dot, .av-word { display: none !important; }
  @media (pointer: fine) { .av-cursor-on, .av-cursor-on a, .av-cursor-on button { cursor: auto; } }
  .av-wipe { transition: none; }
}


/* assets/console-stage-fix.css */
/* ============================================================
   CONSOLE STAGE VIGNETTE — the translucent grey slab
   2026-09-19
   ------------------------------------------------------------
   .console-stage-2::before paints a 590x594px radial vignette
   that darkens to rgba(2,6,16,.55) at its edges. Its parent is
   only ~399px wide, so the pseudo-element bleeds ~190px past the
   container and washes a translucent grey rectangle straight
   across the hero copy — visible as "Install Pulse once and every
   function starts compounding" sitting under a grey film.

   It's a DARK-theme effect. avakata-motion.css already kills it
   for the light gallery theme:

       html[data-theme="gallery"] .console-stage::before {display:none}

   ...but Instatic's visual editor duplicated the node and renamed
   the class to `console-stage-2`, so that rule never matched — the
   same "-N suffix" drift that has bitten several components on
   this site. Killing both pseudo-elements on the light theme, and
   containing the bleed on every theme so it can never overlap
   neighbouring copy again.
   ============================================================ */
html[data-theme="gallery"] .console-stage-2::before,
html[data-theme="gallery"] .console-stage-2::after,
html[data-theme="solar"] .console-stage-2::before,
html[data-theme="solar"] .console-stage-2::after {
  display: none !important;
  content: none !important;
}

/* Belt and braces: whatever the theme, the stage must not paint
   outside its own box. */
.console-stage-2,
.console-stage {
  overflow: hidden;
  isolation: isolate;
}


/* assets/demo-dock-fix-2026-09-19.css */
/* ============================================================
   DEMO TEXT TOKENS + AGENT DOCK — 2026-09-19
   ============================================================ */

/* ── 1. /demo is using the DARK theme's text tokens on white ──
   .dz-title is `color: var(--text)`, and on /demo --text resolves
   to rgb(214,255,230) — a pale mint written for a dark canvas.
   The surfaces there are white, so:

       .dz-title   "Vapor Strike FG Cleats"     1.09:1
       .dz-bar__v  "High"                       1.09:1
       .dz-tab     "Legal"                      2.05:1
       .dz-old     product copy                 2.05:1
       .product-card__name .price  "$280"       1.57:1

   This is not a service accent — it is the text token itself
   being wrong for the page, the same class of mistake as pointing
   the palette cycler at dark backgrounds. Re-point the tokens at
   the light-theme ink for this page only, so the dark demo canvas
   (if it ever returns) keeps its own. */
html[data-theme="gallery"] body[data-page="demo"] {
  --text: #0b1220;
  --text-mute: #4a5568;
}
html[data-theme="gallery"] body[data-page="demo"] .dz-title,
html[data-theme="gallery"] body[data-page="demo"] .dz-bar__v,
html[data-theme="gallery"] body[data-page="demo"] [class*="product-card__name"] .price {
  color: #0b1220;
}
html[data-theme="gallery"] body[data-page="demo"] .dz-tab,
html[data-theme="gallery"] body[data-page="demo"] .dz-old,
html[data-theme="gallery"] body[data-page="demo"] .dz-phase span,
html[data-theme="gallery"] body[data-page="demo"] .dz-bar__l,
html[data-theme="gallery"] body[data-page="demo"] [class*="product-card__rewrite-label"] span,
html[data-theme="gallery"] body[data-page="demo"] [class*="product-card__desc"] em {
  color: #4a5568;
}
html[data-theme="gallery"] body[data-page="demo"] .dz-log__empty b {
  color: #0b1220;
}

/* ── 2. The agent dock was eating clicks ─────────────────────
   .agdock is position:fixed, bottom-left, 377x37, z-index:900 —
   and pointer-events:auto. It is a passive telemetry ticker
   ("30 agents · 20 working · orchestrated by the brain"), but it
   sat on top of the /work filter buttons, so "E-commerce" and
   "B2B / SaaS" could not be clicked at all.

   Exactly the failure mode as the invisible Fizz cloud earlier
   tonight: a decorative overlay with hit-testing left on. The
   difference is this one is visible, so it reads as a layout
   problem rather than a dead control — which is worse, because
   nobody thinks to check whether the button underneath works.

   Let clicks through to the page; anything genuinely interactive
   inside the dock opts back in. */
.agdock,
[class*="agdock"] {
  pointer-events: none;
}
.agdock a,
.agdock button,
[class*="agdock"] a,
[class*="agdock"] button {
  pointer-events: auto;
}

/* Keep it clear of page content on short viewports, where a
   377px chip at the bottom-left covers real controls. */
@media (max-width: 900px) {
  .agdock, [class*="agdock"] { max-width: calc(100vw - 28px); }
}


/* assets/home.page.css */
/* ============================================================
   HOME — page-local styles
   ============================================================ */

.hero {
  min-height: 92vh;
  padding-top: 140px;
  padding-bottom: 80px;
  display: grid;
  align-content: center;
  position: relative;
  overflow: hidden;
}
.hero__canvas-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero[data-hero-mode="mesh"] .hero__canvas-wrap canvas { pointer-events: auto; }
.hero canvas { width: 100%; height: 100%; display: block; }

.hero__orb-wrap {
  position: absolute;
  top: 50%; left: 50%;
  width: min(720px, 80vw);
  height: min(720px, 80vw);
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  display: none;
}
[data-hero="orb"] .hero__orb-wrap { display: block; }
[data-hero="orb"] .hero__canvas-wrap { display: none; }
.hero__orb {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%, rgba(196,255,61,0.65), transparent 55%),
    radial-gradient(circle at 70% 60%, rgba(61,217,255,0.5), transparent 60%),
    radial-gradient(circle at 50% 80%, rgba(255,107,61,0.45), transparent 60%),
    conic-gradient(from 120deg, rgba(196,255,61,0.3), rgba(61,217,255,0.3), rgba(255,107,61,0.3), rgba(196,255,61,0.3));
  filter: blur(40px);
  opacity: 0.85;
  animation: orb-breathe 8s var(--ease) infinite;
}
@keyframes orb-breathe {
  0%,100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.06) rotate(8deg); }
}
.hero__orb-ring {
  position: absolute;
  inset: 8%;
  border: 1px dashed rgba(232,234,237,0.18);
  border-radius: 50%;
  animation: orb-spin 36s linear infinite;
}
.hero__orb-ring--2 { inset: 22%; animation-duration: 22s; animation-direction: reverse; }

/* ambient tag-cloud orbit — blends with the hero mesh */
.hero__orbit {
  position: absolute;
  top: 47%; left: 50%;
  width: min(820px, 88vw);
  height: min(720px, 72vh);
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
  opacity: 0.82;
  -webkit-mask-image: radial-gradient(ellipse 56% 76% at 47% 47%, #000 24%, transparent 78%);
  mask-image: radial-gradient(ellipse 56% 76% at 47% 47%, #000 24%, transparent 78%);
}
.hero__orbit a {
  font-family: var(--f-mono);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--signal-cyan) 72%, var(--text));
  white-space: nowrap;
  text-decoration: none;
  text-shadow: 0 0 14px color-mix(in oklab, var(--signal-cyan) 30%, transparent);
}
.hero__orbit a:nth-child(3n) { color: color-mix(in oklab, var(--accent) 82%, var(--text)); text-shadow: 0 0 14px color-mix(in oklab, var(--accent) 32%, transparent); }
.hero__orbit a:nth-child(4n) { color: color-mix(in oklab, var(--signal-warm) 66%, var(--text)); }
@media (max-width: 860px) { .hero__orbit { opacity: 0.34; width: 92vw; } }
@media (prefers-reduced-motion: reduce) { .hero__orbit { display: none; } }
:root[data-motion="calm"] .hero__orbit { opacity: 0.42; }

.hero__inner {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  column-gap: clamp(32px, 5vw, 72px);
  row-gap: 40px;
  align-items: center;
}
@media (max-width: 860px) {
  .hero__inner { grid-template-columns: 1fr; row-gap: 36px; }
}

.hero__lead { display: grid; gap: 30px; align-content: center; }
.hero__eyebrow { justify-self: start; }
.hero__title {
  margin: 0;
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(44px, 5vw, 96px);
  line-height: 0.96;
  letter-spacing: -0.025em;
  max-width: 15ch;
}
.hero__title .slash {
  color: var(--text-dim);
  font-style: normal;
  padding: 0 .12em;
  font-weight: 200;
}
.hero__title em {
  font-style: italic;
  color: var(--accent);
  text-shadow: 0 0 60px rgba(196,255,61,0.4);
}

/* self-rewriting headline word */
.hero__rewrite {
  position: relative;
  display: inline;
  white-space: nowrap;
}
.hero__rewrite-text {
  font-style: italic;
  color: var(--accent);
  text-shadow: 0 0 60px color-mix(in oklch, var(--accent) 45%, transparent);
}
.hero__caret {
  display: inline-block;
  width: 0.5ch;
  height: 0.82em;
  margin-left: 2px;
  vertical-align: -0.06em;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
  animation: caret-blink 1s steps(1) infinite;
}
@keyframes caret-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
.hero__rewrite-tag {
  position: absolute;
  top: 50%;
  left: 100%;
  margin-left: 16px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  background: color-mix(in oklch, var(--accent) 14%, var(--bg));
  border: 1px solid color-mix(in oklch, var(--accent) 40%, transparent);
  border-radius: var(--r-pill);
  padding: 4px 10px;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-50%) translateX(-8px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
  pointer-events: none;
}
.hero__rewrite-tag.is-on { opacity: 1; transform: translateY(-50%) translateX(0); }
@media (max-width: 980px) { .hero__rewrite-tag { display: none; } }

.hero__sub {
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.55;
  color: var(--text-mute);
  max-width: 54ch;
  text-wrap: pretty;
}
.hero__cta-row { display: flex; gap: 14px; flex-wrap: wrap; }

/* ============================================================
   LIVE ENGINE CONSOLE
   ============================================================ */
.console {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 420px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 50px 100px -50px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.06);
}
.console::after {
  /* sweeping highlight across the panel */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 40%, color-mix(in oklch, var(--accent) 7%, transparent) 50%, transparent 60%);
  transform: translateX(-100%);
  animation: console-sweep 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes console-sweep { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
:root[data-motion="calm"] .console::after { display: none; }

.console__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  position: relative;
  z-index: 2;
  white-space: nowrap;
}
.console__head-l { display: inline-flex; align-items: center; gap: 10px; color: var(--accent); flex: 0 0 auto; }
.console__head-r { color: var(--text-dim); flex: 0 0 auto; }
.console__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  position: relative;
}
.console__dot::after {
  content: ''; position: absolute; inset: -5px; border-radius: 50%;
  border: 1px solid var(--accent);
  animation: pulse 1.8s var(--ease) infinite;
}

.console__stream {
  position: relative;
  z-index: 2;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  justify-content: flex-start;
  overflow: hidden;
}
/* #how-it-works — the three flow cards rotate left↔right in 3D */
#how-it-works .flow { perspective: 1500px; }
#how-it-works .flow__box { transform-style: preserve-3d; animation: flow-spin 9s ease-in-out infinite; }
#how-it-works .flow__box:nth-child(3) { animation-delay: -3s; }
#how-it-works .flow__box:nth-child(5) { animation-delay: -6s; }
@keyframes flow-spin { 0%, 100% { transform: rotateY(-12deg); } 50% { transform: rotateY(12deg); } }
:root[data-motion="calm"] #how-it-works .flow__box { animation: none; }
@media (prefers-reduced-motion: reduce) { #how-it-works .flow__box { animation: none; } }
.log-line {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 12px;
  align-items: baseline;
  font-family: var(--f-mono);
  font-size: 12.5px;
  line-height: 1.3;
  opacity: 1;
  animation: log-in .5s var(--ease-out);
}
.log-line.is-fading { opacity: 0.4; }
.log-line.is-faded  { opacity: 0.18; }
/* transform-only entrance — opacity is never animated, so a throttled/frozen
   animation can never hide a line (it would only freeze a small Y offset). */
@keyframes log-in {
  from { transform: translateY(-12px); }
  to   { transform: none; }
}
.log-line__time { color: var(--text-dim); font-size: 10.5px; white-space: nowrap; }
.log-line__icon { font-size: 12px; line-height: 1; }
.log-line__text { color: var(--text); }
.log-line__text b { color: var(--accent); font-weight: 500; }
.log-line--lime  .log-line__icon { color: var(--accent); }
.log-line--cyan  .log-line__icon { color: var(--signal-cyan); }
.log-line--green .log-line__icon { color: var(--signal-green); }
.log-line--amber .log-line__icon { color: var(--signal-amber); }
.log-line--warm  .log-line__icon { color: var(--signal-warm); }

.console__foot {
  position: relative;
  z-index: 2;
  padding: 15px 20px 17px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 9px;
}
.console__task {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-mute);
}
.console__task .pct { color: var(--accent); }
.console__progress {
  height: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  overflow: hidden;
}
.console__bar {
  height: 100%;
  width: 0%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
  border-radius: 999px;
  transition: width .25s linear;
}

/* ============================================================
   LIVE OUTCOME STRIP
   ============================================================ */
.hero__outcome {
  grid-column: 1 / -1;
  position: relative;
  z-index: 3;
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  align-items: stretch;
  padding: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  font-size: 14px;
  color: var(--text-mute);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.6);
  overflow: hidden;
}
.hero__outcome-col {
  display: grid;
  gap: 3px;
  align-content: center;
  padding: 18px 24px;
  border-right: 1px solid var(--line);
}
.hero__outcome-col:last-child { border-right: 0; }
.hero__outcome strong { color: var(--text); font-weight: 500; font-size: 15px; }
.hero__outcome .accent-num {
  color: var(--accent);
  font-family: var(--f-serif);
  font-size: 34px;
  line-height: 1;
  font-style: italic;
}
.hero__outcome .live-num { font-variant-numeric: tabular-nums; }
.hero__outcome .mono { color: var(--text-dim); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; }
.hero__outcome .tick {
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--signal-green);
  box-shadow: 0 0 8px var(--signal-green);
  margin-right: 6px;
  vertical-align: 1px;
  animation: tick-pulse 2s ease-in-out infinite;
}
@keyframes tick-pulse { 50% { opacity: 0.3; } }

@media (max-width: 720px) {
  .hero__outcome { grid-template-columns: 1fr 1fr; }
  .hero__outcome-col:nth-child(2n) { border-right: 0; }
}

/* ============================================================
   METRICS
   ============================================================ */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 900px) { .metrics-grid { grid-template-columns: repeat(2, 1fr); } }
.metric {
  padding: 32px 28px 28px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  position: relative;
  overflow: hidden;
}
.metric::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.4;
}
.metric__num {
  font-family: var(--f-serif);
  font-size: clamp(60px, 6vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.02em;
}
.metric__num em { font-style: italic; color: var(--accent); }
.metric__num .unit { font-size: 0.4em; color: var(--text-mute); font-style: normal; margin-left: 4px; vertical-align: 0.8em; }
.metric__label { margin-top: 12px; color: var(--text-mute); font-size: 13px; }
.metric__delta { position: absolute; top: 16px; right: 18px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal-green); }

/* ============================================================
   SANDBOX
   ============================================================ */

.sandbox {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 24px;
}
@media (max-width: 980px) { .sandbox { grid-template-columns: 1fr; } }

.sandbox__head {
  display: flex; justify-content: space-between; align-items: end;
  gap: 24px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.sandbox__title {
  font-family: var(--f-serif);
  font-size: clamp(40px, 5vw, 72px);
  letter-spacing: -0.02em;
  line-height: 0.98;
}
.sandbox__title em { color: var(--accent); }
.sandbox__sub { color: var(--text-mute); max-width: 36ch; font-size: 15px; }

.tabs {
  display: inline-flex;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 4px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.tabs button {
  padding: 8px 18px;
  border-radius: var(--r-pill);
  color: var(--text-mute);
  transition: all .25s var(--ease);
}
.tabs button.active { background: var(--accent); color: var(--accent-ink); }
.tabs button:hover:not(.active) { color: var(--text); }

.product-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 0;
  overflow: hidden;
  position: relative;
  min-height: 540px;
}
.product-card__media {
  position: relative;
  height: 320px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(232,234,237,0.04), rgba(232,234,237,0.01)),
    linear-gradient(135deg, #1a1d22, #0f1115);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.throw-svg { width: 60%; height: 60%; opacity: 0.95; }

.heatmap {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity .5s var(--ease);
  pointer-events: none;
}
.heatmap.is-on { opacity: 0.85; }
.heatmap__blob {
  position: absolute;
  width: 220px; height: 220px;
  border-radius: 50%;
  filter: blur(50px);
  mix-blend-mode: screen;
}
.heatmap__blob--1 { background: rgba(255,107,61,0.9); top: 30%; left: 38%; }
.heatmap__blob--2 { background: rgba(255,180,61,0.7); top: 55%; left: 28%; width: 160px; height: 160px; }
.heatmap__blob--3 { background: rgba(255,69,102,0.7); top: 22%; left: 58%; width: 140px; height: 140px; }
.heatmap__blob--4 { background: rgba(255,107,61,0.5); top: 60%; left: 60%; width: 120px; height: 120px; }

.product-card__toggle {
  position: absolute; top: 16px; right: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: var(--bg-glass);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
  cursor: pointer;
  z-index: 4;
  transition: all .25s var(--ease);
}
.product-card__toggle:hover { color: var(--text); border-color: var(--text); }
.product-card__toggle .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-dim); transition: background .25s; }
.product-card__toggle.is-on .dot { background: var(--signal-warm); box-shadow: 0 0 8px var(--signal-warm); }

.product-card__live {
  position: absolute; top: 16px; left: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: rgba(196,255,61,0.12);
  border: 1px solid rgba(196,255,61,0.4);
  border-radius: var(--r-pill);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  z-index: 4;
}
.product-card__live .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: pulse-dot 1.4s ease-in-out infinite; }
@keyframes pulse-dot { 50% { opacity: 0.4; } }

.product-card__body { padding: 28px 28px 32px; display: grid; gap: 14px; }
.product-card__name { display: flex; justify-content: space-between; align-items: baseline; }
.product-card__name h4 { font-family: var(--f-serif); font-size: 28px; line-height: 1; }
.product-card__name .price { font-family: var(--f-serif); font-size: 28px; color: var(--accent); font-style: italic; }
.product-card__desc { font-size: 14px; line-height: 1.55; color: var(--text-mute); min-height: 60px; }
.product-card__desc--old { text-decoration: line-through; opacity: 0.55; font-size: 13px; }
.product-card__desc--new { color: var(--text); }
.product-card__rewrite-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
}

.signals {
  display: grid;
  gap: 16px;
  padding: 24px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.signals__head { display: flex; justify-content: space-between; align-items: baseline; }
.signals__title { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-mute); }
.signals__source { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--text-dim); }

.alert {
  position: relative;
  padding: 20px 22px;
  border: 1px solid rgba(196,255,61,0.4);
  border-radius: var(--r-md);
  background: linear-gradient(135deg, rgba(196,255,61,0.08), rgba(61,217,255,0.04));
  display: grid;
  gap: 6px;
  overflow: hidden;
}
.alert::before {
  content: '';
  position: absolute; inset: -1px;
  border-radius: var(--r-md);
  background: linear-gradient(90deg, transparent, rgba(196,255,61,0.4), transparent);
  opacity: 0.5;
  pointer-events: none;
  animation: alert-shimmer 3s linear infinite;
}
@keyframes alert-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.alert__head { display: flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); position: relative; z-index: 2; }
.alert__body { font-size: 14px; line-height: 1.5; color: var(--text); position: relative; z-index: 2; }
.alert__meta { font-family: var(--f-mono); font-size: 11px; color: var(--text-dim); position: relative; z-index: 2; }

.spark-card {
  padding: 20px 22px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
}
.spark-card__left { display: grid; gap: 4px; }
.spark-card__num { font-family: var(--f-serif); font-style: italic; font-size: 40px; color: var(--accent); line-height: 1; }
.spark-card__label { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mute); }
.spark-card svg { width: 200px; height: 60px; }

/* ============================================================
   ENGINE FLOW
   ============================================================ */
.flow {
  display: grid;
  grid-template-columns: 1fr auto 1.3fr auto 1fr;
  gap: 0;
  align-items: stretch;
}
@media (max-width: 1100px) {
  .flow { grid-template-columns: 1fr; }
  .flow__arrow { display: none; }
}
.flow__box {
  padding: 36px 32px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  display: grid;
  align-content: start;
  gap: 16px;
  min-height: 380px;
}
.flow__box--engine {
  background: linear-gradient(180deg, rgba(196,255,61,0.07), rgba(61,217,255,0.03)), var(--bg-elev);
  border-color: rgba(196,255,61,0.35);
  box-shadow: 0 0 0 1px rgba(196,255,61,0.1) inset, 0 30px 80px -50px var(--accent);
  position: relative;
  overflow: hidden;
}
.flow__box--engine::after {
  content: '';
  position: absolute;
  bottom: -30%; right: -20%;
  width: 60%; height: 80%;
  background: radial-gradient(circle, rgba(196,255,61,0.25), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}
.flow__label { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-mute); }
.flow__label--accent { color: var(--accent); }
.flow__title { font-family: var(--f-serif); font-size: 32px; line-height: 1; letter-spacing: -0.01em; }
.flow__title em { color: var(--accent); }
.flow__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; font-size: 14px; color: var(--text-mute); }
.flow__list li { display: flex; align-items: center; gap: 10px; }
.flow__list li::before { content: ''; width: 4px; height: 4px; background: var(--accent); border-radius: 50%; }
.flow__arrow {
  display: grid;
  place-items: center;
  width: 56px;
  color: var(--text-dim);
}
.flow__arrow svg { width: 36px; height: 24px; }
.flow__proprietary { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.22em; padding: 4px 10px; background: var(--accent); color: var(--accent-ink); border-radius: 4px; display: inline-block; align-self: start; font-weight: 600; }

/* ============================================================
   SEE IT MOVE — showcase
   ============================================================ */
.showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 860px) { .showcase { grid-template-columns: 1fr; } }
.showcase__card {
  display: grid; grid-template-rows: auto auto;
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.showcase__card:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: 0 40px 80px -45px rgba(0,0,0,0.75); }
.showcase__vis {
  height: 240px; position: relative; overflow: hidden;
  background: radial-gradient(circle at 30% 30%, rgba(196,255,61,0.18), transparent 55%), radial-gradient(circle at 75% 70%, rgba(61,217,255,0.14), transparent 60%), linear-gradient(135deg, #16181d, #0c0d10);
  display: grid; place-items: center;
}
.showcase__play {
  width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center;
  color: var(--accent-ink); background: var(--accent); box-shadow: 0 0 50px -6px var(--accent);
  transition: transform .35s var(--ease);
}
.showcase__play svg { width: 30px; height: 30px; margin-left: 3px; }
.showcase__card--film:hover .showcase__play { transform: scale(1.08); }
.showcase__scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--accent); box-shadow: 0 0 14px var(--accent); opacity: 0.7; animation: showcase-scan 4s linear infinite; }
@keyframes showcase-scan { 0% { top: 0; } 100% { top: 100%; } }
:root[data-motion="calm"] .showcase__scan { display: none; }
.showcase__vis--demo { flex-direction: column; gap: 18px; }
.showcase__run {
  padding: 14px 22px; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink);
  font-family: var(--f-sans); font-weight: 600; font-size: 15px; box-shadow: 0 0 40px -10px var(--accent);
  animation: showcase-pulse 2.4s var(--ease) infinite;
}
@keyframes showcase-pulse { 50% { transform: translateY(-3px); box-shadow: 0 14px 44px -10px var(--accent); } }
:root[data-motion="calm"] .showcase__run { animation: none; }
.showcase__bars { position: absolute; bottom: 26px; left: 0; right: 0; display: flex; gap: 8px; justify-content: center; align-items: flex-end; height: 60px; }
.showcase__bars span { width: 26px; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--accent), transparent); animation: showcase-grow 1.8s var(--ease) infinite; }
.showcase__bars span:nth-child(1) { height: 28px; animation-delay: 0s; }
.showcase__bars span:nth-child(2) { height: 48px; animation-delay: .2s; background: linear-gradient(180deg, var(--signal-cyan), transparent); }
.showcase__bars span:nth-child(3) { height: 38px; animation-delay: .4s; }
@keyframes showcase-grow { 0%, 100% { transform: scaleY(0.7); } 50% { transform: scaleY(1); } }
:root[data-motion="calm"] .showcase__bars span { animation: none; }
.showcase__body { padding: 30px 30px 32px; display: grid; gap: 12px; }
.showcase__body h3 { font-family: var(--f-serif); font-size: clamp(26px, 2.6vw, 36px); line-height: 1.02; letter-spacing: -0.01em; }
.showcase__body h3 em { font-style: italic; color: var(--accent); }
.showcase__body p { color: var(--text-mute); font-size: 15px; line-height: 1.5; text-wrap: pretty; }
.showcase__cta { margin-top: 4px; font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); display: inline-flex; gap: 8px; align-items: center; }
.showcase__card:hover .showcase__cta span { transform: translateX(4px); transition: transform .25s; }

/* ============================================================
   TWEAKS PANEL
   ============================================================ */
/* ============================================================
   COMMENT FIXES — how-it-works, embedded film, sandbox pop, signals
   ============================================================ */
.how-head { max-width: none; margin-bottom: 8px; }
.how-eyebrow {
  display: inline-block; font-family: var(--f-mono);
  font-size: 15px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--accent);
  padding: 9px 18px; border: 1px solid rgba(196,255,61,0.35); border-radius: 999px;
  background: rgba(196,255,61,0.06); margin-bottom: 26px;
}
.how-title { font-family: var(--f-serif); font-size: clamp(46px, 6.4vw, 100px); line-height: 0.97; letter-spacing: -0.02em; max-width: 20ch; }
.how-title em { font-style: italic; color: var(--accent); }
.how-sub { margin-top: 20px; color: var(--text-mute); font-size: clamp(16px,1.4vw,20px); }

.film-embed { margin: 46px 0 12px; }
.film-embed__frame {
  width: 94vw; max-width: 1640px; margin-inline: auto; aspect-ratio: 16 / 9;
  border-radius: 24px; overflow: hidden; border: 1px solid var(--line-strong);
  box-shadow: 0 70px 130px -50px rgba(0,0,0,0.9), 0 0 0 1px rgba(196,255,61,0.08) inset, 0 0 90px -30px rgba(61,217,255,0.18);
  position: relative; background: #06080b;
}
.film-embed__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* Sandbox pops out: distinct cyan-tinted panel, depth, separated from the page */
.sandbox {
  padding: clamp(18px, 2.6vw, 36px);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(61,217,255,0.07), rgba(61,217,255,0.015)), var(--bg-soft);
  border: 1px solid rgba(61,217,255,0.22);
  box-shadow: 0 90px 150px -60px rgba(0,0,0,0.92), 0 0 80px -26px rgba(61,217,255,0.20), inset 0 1px 0 rgba(255,255,255,0.05);
}
.sandbox .product-card, .sandbox .signals, .sandbox .alert, .sandbox .spark-card { background: var(--bg-elev); }

/* Signal labels: bigger + accent so they don't get lost next to the colored bars */
.signals .bar { font-size: 13px; }
.signals .bar__label { flex: 0 0 138px; color: var(--accent); font-size: 14px; font-weight: 600; letter-spacing: 0.06em; }
.signals .bar__value { flex: 0 0 66px; font-size: 17px; color: var(--text); font-weight: 700; }
.signals .bar__track { height: 8px; }
.signals__title { font-size: 13px; color: var(--accent); letter-spacing: 0.18em; }

/* metrics: kinetic tilt needs a perspective + smoother cards (de-flatten) */
.metrics-grid { perspective: 1200px; }
.metric { transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s; }
.metric__num em { transition: color .3s; }

#tweaks-root { position: fixed; right: 24px; bottom: 24px; z-index: 200; }

/* ============================================================
   "-2" CLASS ALIASES
   Instatic's visual editor auto-suffixed several hero/console classes
   with "-2" on the live homepage (a duplicate-node collision, not a
   content difference) — this file was authored against the originals
   above. These aliases apply the same rules to the "-2" names actually
   in the live DOM without touching the working un-suffixed classes
   used elsewhere. Found 2026-09-17 while chasing a mobile hero overflow.
   ============================================================ */
.hero__canvas-wrap-2 { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero[data-hero-mode="mesh"] .hero__canvas-wrap-2 canvas { pointer-events: auto; }
.hero__canvas-wrap-2 canvas { width: 100%; height: 100%; display: block; }

.hero__orb-wrap-2 {
  position: absolute; top: 50%; left: 50%;
  width: min(720px, 80vw); height: min(720px, 80vw);
  transform: translate(-50%, -50%); z-index: 0; pointer-events: none; display: none;
}
[data-hero="orb"] .hero__orb-wrap-2 { display: block; }
[data-hero="orb"] .hero__canvas-wrap-2 { display: none; }

.hero__title-2 {
  margin: 0; font-family: var(--f-serif); font-weight: 400;
  font-size: clamp(44px, 5vw, 96px); line-height: 0.96; letter-spacing: -0.025em; max-width: 15ch;
}
.hero__title-2 .slash { color: var(--text-dim); font-style: normal; padding: 0 .12em; font-weight: 200; }
.hero__title-2 em { font-style: italic; color: var(--accent); text-shadow: 0 0 60px rgba(196,255,61,0.4); }

.hero__rewrite-text-2 { font-style: italic; color: var(--accent); text-shadow: 0 0 60px color-mix(in oklch, var(--accent) 45%, transparent); }

.hero__sub-2 { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.55; color: var(--text-mute); max-width: 54ch; text-wrap: pretty; }

.hero__cta-row-2 { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__cta-row-2 .btn--primary { position: relative; overflow: hidden; background: linear-gradient(120deg, var(--accent), color-mix(in oklab, var(--signal-cyan) 55%, var(--accent))); animation: cta-pulse 2.6s var(--ease) infinite; }
.hero__cta-row-2 .btn--primary::after { content:''; position:absolute; top:0; left:-60%; width:42%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,0.55),transparent); transform:skewX(-20deg); animation:cta-sheen 3s ease-in-out infinite; pointer-events:none; }
.hero__cta-row-2 .btn--ghost { position: relative; border-color: color-mix(in oklab, var(--accent) 45%, transparent); animation: ghost-glow 3s ease-in-out infinite; }
:root[data-motion="calm"] .hero__cta-row-2 .btn--primary, :root[data-motion="calm"] .hero__cta-row-2 .btn--primary::after, :root[data-motion="calm"] .hero__cta-row-2 .btn--ghost { animation: none; }

.console-2 {
  position: relative; z-index: 3; display: grid; grid-template-rows: auto 1fr auto; min-height: 420px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--line-strong); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: 0 50px 100px -50px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.06);
}
.console-2::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 40%, color-mix(in oklch, var(--accent) 7%, transparent) 50%, transparent 60%);
  transform: translateX(-100%); animation: console-sweep 6s ease-in-out infinite; pointer-events: none;
}
:root[data-motion="calm"] .console-2::after { display: none; }

.console__head-l-2 { display: inline-flex; align-items: center; gap: 10px; color: var(--accent); flex: 0 0 auto; }
.console__head-r-2 { color: var(--text-dim); flex: 0 0 auto; }

.hero__outcome .accent-num-2 { color: var(--accent); font-family: var(--f-serif); font-size: 34px; line-height: 1; font-style: italic; }
.hero__outcome .mono-2 { color: var(--text-dim); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; }

.wrap-2 { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); position: relative; z-index: 2; }

@media (max-width: 860px) {
  .console-2, .console { margin-top: 4px; }
}


/* assets/lava-light-palettes-2026-09-19.css */
/* ============================================================
   LAVA LAMP — LIGHT PALETTES — 2026-09-19
   ------------------------------------------------------------
   av-lava.js drifts the site through [data-bg] palettes so colour
   flows and carries across navigations. THREE bugs this fixes,
   all found by measuring the rendered page, not the markup:

   1. It was pointed at the 15 palettes in userStyles.css, every
      one of which is DARK and sets ONLY background variables —
      none touch text colour. The site ink is light-theme
      (#0b1220 on white), so landing on a dark palette made
      headings vanish. Seen on /start: the four step cards had
      unreadable titles over deep plum.

   2. The colour never changed at all. The site runs
      html[data-theme="gallery"], specificity (0,2,1), hardcoding
      --bg:#ffffff and --accent:#0071e3. A plain [data-bg="..."]
      rule is (0,1,0) and loses. The cycler was faithfully setting
      the attribute and carrying it across pages while the page
      stayed exactly one colour the whole time.

   3. data-theme is on <body> AS WELL AS <html>, so the theme
      redefines --bg LOCALLY on body. Setting the palette only on
      html left `body { background: var(--bg) }` resolving to the
      body-local #ffffff. Measured: --bg was #fff0f4 on html and
      #ffffff on body at the same moment.

   Hence every palette below sets its variables on html AND body,
   with !important, so the palette beats the active theme at both
   levels and every downstream surface inherits the right value.
   ============================================================ */

html[data-bg="lv-dawn"],
html[data-bg="lv-dawn"] body {
  --bg: #fff6ef !important; --bg-soft: #fffaf6 !important;
  --bg-elev: #ffffff !important; --bg-glass: rgba(255, 250, 246, 0.72) !important;
  --accent: #c2410c !important;
}
html[data-bg="lv-sky"],
html[data-bg="lv-sky"] body {
  --bg: #eef6ff !important; --bg-soft: #f7fbff !important;
  --bg-elev: #ffffff !important; --bg-glass: rgba(247, 251, 255, 0.72) !important;
  --accent: #0071e3 !important;
}
html[data-bg="lv-mint"],
html[data-bg="lv-mint"] body {
  --bg: #edfbf3 !important; --bg-soft: #f6fdf9 !important;
  --bg-elev: #ffffff !important; --bg-glass: rgba(246, 253, 249, 0.72) !important;
  --accent: #047857 !important;
}
html[data-bg="lv-lilac"],
html[data-bg="lv-lilac"] body {
  --bg: #f4f0ff !important; --bg-soft: #faf8ff !important;
  --bg-elev: #ffffff !important; --bg-glass: rgba(250, 248, 255, 0.72) !important;
  --accent: #6d28d9 !important;
}
html[data-bg="lv-sand"],
html[data-bg="lv-sand"] body {
  --bg: #fbf6e9 !important; --bg-soft: #fdfaf2 !important;
  --bg-elev: #ffffff !important; --bg-glass: rgba(253, 250, 242, 0.72) !important;
  --accent: #a16207 !important;
}
html[data-bg="lv-ice"],
html[data-bg="lv-ice"] body {
  --bg: #ecfaff !important; --bg-soft: #f5fcff !important;
  --bg-elev: #ffffff !important; --bg-glass: rgba(245, 252, 255, 0.72) !important;
  --accent: #0e7490 !important;
}
html[data-bg="lv-rose"],
html[data-bg="lv-rose"] body {
  --bg: #fff0f4 !important; --bg-soft: #fff7f9 !important;
  --bg-elev: #ffffff !important; --bg-glass: rgba(255, 247, 249, 0.72) !important;
  --accent: #be123c !important;
}
html[data-bg="lv-moss"],
html[data-bg="lv-moss"] body {
  --bg: #f3f8ec !important; --bg-soft: #f9fcf4 !important;
  --bg-elev: #ffffff !important; --bg-glass: rgba(249, 252, 244, 0.72) !important;
  --accent: #3f6212 !important;
}
html[data-bg="lv-slate"],
html[data-bg="lv-slate"] body {
  --bg: #f1f4f8 !important; --bg-soft: #f8fafc !important;
  --bg-elev: #ffffff !important; --bg-glass: rgba(248, 250, 252, 0.72) !important;
  --accent: #334155 !important;
}
html[data-bg="lv-amber"],
html[data-bg="lv-amber"] body {
  --bg: #fff8e8 !important; --bg-soft: #fffcf3 !important;
  --bg-elev: #ffffff !important; --bg-glass: rgba(255, 252, 243, 0.72) !important;
  --accent: #b45309 !important;
}
html[data-bg="lv-teal"],
html[data-bg="lv-teal"] body {
  --bg: #eafaf7 !important; --bg-soft: #f4fdfb !important;
  --bg-elev: #ffffff !important; --bg-glass: rgba(244, 253, 251, 0.72) !important;
  --accent: #0f766e !important;
}
html[data-bg="lv-plum"],
html[data-bg="lv-plum"] body {
  --bg: #fbf0fa !important; --bg-soft: #fdf7fc !important;
  --bg-elev: #ffffff !important; --bg-glass: rgba(253, 247, 252, 0.72) !important;
  --accent: #86198f !important;
}

/* The tint has to reach the painted page, not just the variable. */
html[data-bg^="lv-"] body { background-color: var(--bg) !important; }

/* Safety net: if a dark palette is ever put back on the document
   while the light ink is in play, headings stay legible instead of
   vanishing. Cheap insurance against the exact failure in (1). */
html[data-bg^="lv-"] body { color: #0b1220; }
html[data-bg^="lv-"] h1,
html[data-bg^="lv-"] h2,
html[data-bg^="lv-"] h3,
html[data-bg^="lv-"] h4 { color: #0b1220; }


/* assets/mobile-hero-fix.css */
/* ============================================================
   MOBILE HERO OVERFLOW FIX — 2026-09-17
   Root cause: .hero__lead is a CSS Grid item. Grid items default to
   min-width:auto, which uses the intrinsic width of their content as a
   floor. .hero__rewrite forces white-space:nowrap for the typewriter
   effect, so on narrow viewports its unwrapped intrinsic width (~380px+)
   became that floor, stretching .hero__inner's grid track past the
   viewport. html/body's overflow-x:clip hid the scrollbar this caused,
   but the headline and body copy still rendered visually cut off past
   the right edge — this was happening BEFORE any of tonight's CSS
   uploads too, not something introduced by them.
   ============================================================ */
.hero__lead { min-width: 0; }
.hero__inner, .wrap-2 { min-width: 0; }

@media (max-width: 560px) {
  .hero__rewrite, .hero__rewrite-text-2 { white-space: normal; }
  .hero__title-2, .hero__title { max-width: 100%; }
}

/* ============================================================
   RIGHT-COLUMN HERO VISUAL — restore the live console
   The homepage right column has three built variants (canvas "mesh",
   "orb", and this live-engine "console"); Instatic's current bake sets
   data-hero-mode="mesh" but the canvas-drawing JS for the mesh visual
   was never migrated, so that column rendered as dead empty space —
   this is what Ryan remembered as "a live running dataset" on the
   right of the hero. The console variant already has real content (7
   live log lines, baked into the HTML) and no missing-JS dependency,
   but its own show/hide rule for data-hero-mode="mesh" was never
   migrated either, so it defaulted to display:none. Forcing it visible
   regardless of hero-mode until the mesh-canvas JS is restored — this
   is real, ready content, not a fabricated placeholder.
   ============================================================ */
.console-stage-2, .console-stage { display: block !important; }
.hero__canvas-wrap-2, .hero__canvas-wrap { display: none !important; }


/* assets/mobile-overflow-fix.css */
/* ============================================================
   MOBILE OVERFLOW — the "-2" duplicate variants  ·  2026-09-19
   ------------------------------------------------------------
   Measured at a 375px viewport: several blocks render wider than
   the screen and get clipped by html{overflow-x:clip}, so their
   right-hand content is simply cut off rather than wrapped:

     .alert-2          right edge 392px   (17px over)
     .film-embed-2     right edge 409px   (34px over)
     .film-embed__frame right edge 395px  (20px over)
     .unit             right edge 417px   (42px over)

   site.css already has a small-screen block that constrains the
   ORIGINAL component names (.marquee, .clients, .film-embed ...).
   Instatic's visual editor duplicated several of these nodes and
   suffixed the class — .alert-2, .film-embed-2 — so none of those
   existing mobile rules match them any more. Same "-N suffix"
   drift behind the homepage hero break, the .console-stage-2
   vignette and the .cyl-host cylinder.

   Rather than chase each one, constrain the duplicates the same
   way their originals already are.
   ============================================================ */
@media (max-width: 700px) {
  .alert-2,
  .film-embed-2,
  .film-embed__frame,
  .unit,
  .console-2,
  .feature-post-2,
  .post-card-2 {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Media frames must scale, not crop. */
  .film-embed-2,
  .film-embed__frame {
    width: 100% !important;
    max-width: 100vw;
    overflow: hidden;
  }

  /* Anything measured in a fixed unit inside these blocks wraps
     instead of pushing the row wider than the screen. */
  .alert-2,
  .unit {
    flex-wrap: wrap;
    word-break: normal;
    overflow-wrap: anywhere;
  }
}


/* assets/nav-brand-fix-2026-09-19.css */
/* ============================================================
   NAV BRAND SIZE + LAST CONTRAST FIXES — 2026-09-19
   ============================================================ */

/* ── 1. The /demo header is broken ────────────────────────────
   Measured side by side:
       /      .nav__brand      81 x  25   nav height  56
       /demo  .nav__brand-2   159 x 149   nav height 167

   TWO separate causes, both from the same duplicated node:

   a) The sizing rules were written against .nav__brand /
      .nav__mark. The editor duplicated the node to
      .nav__brand-2, which inherited none of them.

   b) The homepage draws the mark as an INLINE <svg class="nav__mark"
      width="26" height="24">. The duplicate draws a bare
          <img src="/uploads/...av-mark.svg" alt="" loading="lazy">
      with no class and no dimensions, so it rendered at the SVG's
      intrinsic 159 x 149 — overflowing a 28px brand (top: -28) and
      driving the "AVAKATA.agency" wordmark straight through the
      About and Services links as overlapping, illegible text.

   Constraining [class*="nav__mark"] alone did nothing here: there
   is no nav__mark on that page. Both shapes are pinned. */
[class*="nav__mark"],
[class*="nav__brand"] img,
[class*="nav__brand"] svg {
  width: 26px !important;
  height: 24px !important;
  object-fit: contain;
  flex: 0 0 auto;
}
[class*="nav__brand"] {
  display: flex;
  align-items: center;
  gap: 10px;
  height: auto !important;
  max-height: 28px;
  line-height: 1.1;
  overflow: visible;
}
[class*="nav__brand"] > span { white-space: nowrap; }

/* ── 2. The last contrast failures ────────────────────────────
   All lost on SPECIFICITY, and the homepage one lost TWICE —
   worth spelling out, because !important is not a trump card:

     theirs: body[data-page="home"] #sandbox .product-card__desc--new em
             { color: var(--demo) !important }        (1,3,2)
     mine:   html[data-theme="gallery"] [class*="product-card__desc"] em
             { color: #0f6f86 !important }            (0,3,2)

   When two !important declarations collide, specificity still
   decides — and an ID beats any number of attribute selectors. So
   the rules below carry #sandbox themselves. --demo is a
   dark-canvas cyan (rgb(56,225,255)) sitting on a white card at
   1.57:1, on the HOMEPAGE: the most-seen instance left on the site.

   The /about caption tracks the live palette, so it reported a
   different ratio on every audit run — olive, plum, then teal —
   which is exactly why it looked like it kept "coming back".
   That panel is genuinely dark by design, so lift the caption.

   The /demo run button was self-inflicted: re-pointing --text for
   that page left --accent-ink resolving near-black on the accent
   fill. Every lava palette accent is dark enough for white. */
html[data-theme="gallery"] body[data-page="home"] #sandbox [class*="product-card__desc"] em,
html[data-theme="gallery"] body[data-page="home"] #sandbox [class*="product-card__name"] .price,
html[data-theme="gallery"] body[data-page="home"] #sandbox [class*="product-card__rewrite-label"] span,
html[data-theme="gallery"] [class*="product-card__name"] .price,
html[data-theme="gallery"] [class*="product-card__rewrite-label"] span,
html[data-theme="gallery"] [class*="product-card__desc"] em {
  color: #0f6f86 !important;
}
[class*="matrixburst__cap"] { color: #d7e3c4 !important; }
html[data-theme="gallery"] body[data-page="demo"] [class*="dz-run__btn"] {
  color: #ffffff !important;
}


/* assets/news-layout-fix-2026-09-19.css */
/* ============================================================
   NEWS LAYOUT + DUPLICATE-NODE INK FIX — 2026-09-19
   Found by screenshotting /news at 1440x900, not by reading the DOM.
   ============================================================ */

/* ── 1. The 597px void beside the news cards ──────────────────
   `.news-fold` is `display:grid; grid-template-columns: 597px 597px`
   but only ever has ONE child (the card list). Column 2 was a
   597x503px block of nothing to the right of the three cards —
   the "vague white space" on the page.

   Hardcoded px tracks cannot collapse on their own, so the fold
   becomes a single full-width track and the card list inside it
   becomes a 3-up row that actually fills the 1208px container. */
.news-hero .news-fold {
  grid-template-columns: minmax(0, 1fr) !important;
}
.news-hero .news-fold > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}
.news-hero .news-fold__card {
  width: 100%;
  height: 100%;
}
/* the excerpt was clamped to 417px inside a 555px card — let it breathe */
.news-hero .news-fold__e { width: auto; max-width: 100%; }

@media (max-width: 1000px) {
  .news-hero .news-fold > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .news-hero .news-fold > div { grid-template-columns: minmax(0, 1fr); }
}

/* ── 2. The "-N suffix" ink drift, fixed generically ──────────
   Instatic's visual editor duplicates a node and appends `-2`, so
   CSS written against the original class silently stops matching.
   `.feature-post` was re-inked for the light/gallery palette;
   `.feature-post-2` was not, leaving the headline at
   rgb(216,222,231) on white = 1.35:1 contrast. Unreadable.

   This is the 4th instance tonight (.console-stage-2, .alert-2,
   .film-embed-2 were the others), so match on a class SUBSTRING —
   that covers -2, -3 and every future duplicate the editor makes. */
[class*="feature-post"] .feature-post__body,
[class*="feature-post"] .feature-post__body h1,
[class*="feature-post"] .feature-post__body h2,
[class*="feature-post"] .feature-post__body h3,
[class*="feature-post"] .feature-post__body div,
[class*="feature-post"] .feature-post__body span {
  color: #0b1220;
}
[class*="feature-post"] .feature-post__body p,
[class*="feature-post"] .feature-post__excerpt,
[class*="feature-post"] .feature-post__more,
[class*="feature-post"] .feature-post__meta {
  color: #4a5568;
}
/* the eyebrow / kicker stays on-brand blue, just legible */
[class*="feature-post"] .feature-post__k,
[class*="feature-post"] .feature-post__kicker { color: #1f5fd0; }


/* assets/site.css */
@import url("/assets/avakata-motion.css");
/* ============================================================
   AVAKATA — shared visual system
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500;600&display=swap');

/* ============================================================
   SMOOTH PALETTE CROSSFADE  (site-wide, every page)
   live.js flips [data-bg]/[data-accent]; var(--bg) etc. resolve to
   new colours and these transitions fade the RESOLVED colour on the
   real surfaces. Broad but scoped to colour props so it can't break
   transform/opacity interactions elsewhere.
   ============================================================ */
html { transition: background-color 1300ms cubic-bezier(.4,0,.2,1); }
body,
.nav, .footer, .console, .sandbox, .card, .metric, .flow__box, .service,
.net-node, .brain-node, .post-card, .featured-study, .marquee, .pill,
.proof, .engage, .how__step, .cta-band, .orb, .product-card,
section, [class$="-hero"], [class*="hero__"] {
  transition:
    background-color 1300ms cubic-bezier(.4,0,.2,1),
    border-color 1300ms cubic-bezier(.4,0,.2,1),
    color 1300ms cubic-bezier(.4,0,.2,1),
    box-shadow 1300ms cubic-bezier(.4,0,.2,1);
}
@media (prefers-reduced-motion: reduce) {
  html, body, .nav, .footer, .console, .sandbox, .card, .metric, .flow__box, .service,
  .net-node, .brain-node, .post-card, .featured-study, .marquee, .pill,
  .proof, .engage, .how__step, .cta-band, .orb, .product-card,
  section, [class$="-hero"], [class*="hero__"] { transition: none; }
}

:root {
  /* — palette — */
  --bg:           #0a0b0d;
  --bg-soft:      #101216;
  --bg-elev:      #14171c;
  --bg-glass:     rgba(20, 23, 28, 0.55);
  --line:         rgba(232, 234, 237, 0.08);
  --line-strong:  rgba(232, 234, 237, 0.16);
  /* readability pass: mute 0.62→0.78 and dim 0.38→0.55 — body copy and small
     labels were consistently reported as too faint to read on the dark ground. */
  --text:         #e8eaed;
  --text-mute:    rgba(232, 234, 237, 0.78);
  --text-dim:     rgba(232, 234, 237, 0.55);
  --accent:       #c4ff3d;  /* lime — primary */
  --accent-ink:   #0a0b0d;
  --signal-cyan:  #3dd9ff;
  --signal-amber: #ffb43d;
  --signal-warm:  #ff6b3d;
  --signal-red:   #ff4566;
  --signal-green: #4dffaa;

  /* — type — */
  --f-serif:  'Instrument Serif', 'Times New Roman', serif;
  --f-sans:   'Space Grotesk', system-ui, sans-serif;
  --f-mono:   'JetBrains Mono', ui-monospace, monospace;

  /* — geometry — */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  --maxw: 1320px;
  --gutter: clamp(20px, 4vw, 56px);

  /* — density (tweakable) — */
  --pad-section: clamp(80px, 11vw, 160px);
  --pad-card: 28px;
  --pad-card-lg: 40px;

  /* — motion — */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* density variants set via [data-density] */
:root[data-density="compact"]  { --pad-section: clamp(56px, 7vw, 96px);  --pad-card: 20px; --pad-card-lg: 28px; }
:root[data-density="comfy"]    { --pad-section: clamp(120px, 14vw, 200px); --pad-card: 36px; --pad-card-lg: 52px; }

/* dark / darker */
:root[data-shade="darker"] { --bg: #060709; --bg-soft: #0b0d10; --bg-elev: #101317; }

/* accent swaps */
:root[data-accent="cyan"]   { --accent: #3dd9ff; --accent-ink: #001019; }
:root[data-accent="orange"] { --accent: #ff6b3d; --accent-ink: #1a0700; }
:root[data-accent="amber"]  { --accent: #ffd23d; --accent-ink: #1a1200; }

/* font swaps via [data-fontset] */
:root[data-fontset="geist"]    { --f-serif: 'Fraunces', serif; --f-sans: 'Geist', system-ui, sans-serif; --f-mono: 'Geist Mono', ui-monospace, monospace; }
:root[data-fontset="fraunces"] { --f-serif: 'Fraunces', serif; --f-sans: 'Space Grotesk', system-ui, sans-serif; --f-mono: 'IBM Plex Mono', ui-monospace, monospace; }

/* ============================================================
   BACKGROUND PALETTES — [data-bg]  (must follow :root base)
   Each swaps the near-black surfaces; accent stays independent.
   ============================================================ */
:root[data-bg="ink"]      { --bg: #0a0b0d; --bg-soft: #101216; --bg-elev: #14171c; --bg-glass: rgba(20,23,28,0.55); }
:root[data-bg="darker"]   { --bg: #050608; --bg-soft: #0a0c0f; --bg-elev: #0e1116; --bg-glass: rgba(14,17,22,0.55); }
:root[data-bg="midnight"] { --bg: #070b16; --bg-soft: #0c1322; --bg-elev: #111b30; --bg-glass: rgba(17,27,48,0.55);
                            --line: rgba(180,205,255,0.09); --line-strong: rgba(180,205,255,0.18); }
:root[data-bg="forest"]   { --bg: #060f0b; --bg-soft: #0a1812; --bg-elev: #0f2319; --bg-glass: rgba(15,35,25,0.55);
                            --line: rgba(180,255,215,0.08); --line-strong: rgba(180,255,215,0.16); }
:root[data-bg="plum"]     { --bg: #0c0712; --bg-soft: #150c1f; --bg-elev: #1d122b; --bg-glass: rgba(29,18,43,0.55);
                            --line: rgba(225,190,255,0.09); --line-strong: rgba(225,190,255,0.18); }
:root[data-bg="ember"]    { --bg: #100806; --bg-soft: #1a0e0a; --bg-elev: #241410; --bg-glass: rgba(36,20,16,0.55);
                            --line: rgba(255,210,180,0.09); --line-strong: rgba(255,210,180,0.17); }
:root[data-bg="slate"]    { --bg: #0b0e12; --bg-soft: #12161d; --bg-elev: #181d26; --bg-glass: rgba(24,29,38,0.55);
                            --line: rgba(200,214,232,0.08); --line-strong: rgba(200,214,232,0.16); }
:root[data-bg="ocean"]    { --bg: #04111a; --bg-soft: #08202e; --bg-elev: #0c2c3e; --bg-glass: rgba(12,44,62,0.55);
                            --line: rgba(160,225,255,0.09); --line-strong: rgba(160,225,255,0.18); }
:root[data-bg="wine"]     { --bg: #120608; --bg-soft: #1d0c10; --bg-elev: #281319; --bg-glass: rgba(40,19,25,0.55);
                            --line: rgba(255,190,205,0.09); --line-strong: rgba(255,190,205,0.17); }
:root[data-bg="indigo"]   { --bg: #08081a; --bg-soft: #0e0f26; --bg-elev: #151635; --bg-glass: rgba(21,22,53,0.55);
                            --line: rgba(190,195,255,0.09); --line-strong: rgba(190,195,255,0.18); }
:root[data-bg="moss"]     { --bg: #07120a; --bg-soft: #0c1d12; --bg-elev: #11281a; --bg-glass: rgba(17,40,26,0.55);
                            --line: rgba(190,255,200,0.08); --line-strong: rgba(190,255,200,0.16); }

/* Gradient palettes — keep --bg dark for components, paint a fixed gradient on <body> */
:root[data-bg="aurora"]   { --bg: #060a0d; --bg-soft: #0c1318; --bg-elev: #111a20; --bg-glass: rgba(17,26,32,0.5);
                            --line: rgba(180,235,225,0.09); --line-strong: rgba(180,235,225,0.18); }
:root[data-bg="aurora"] body   { background: radial-gradient(ellipse 90% 70% at 15% -10%, rgba(61,217,255,0.16), transparent 55%), radial-gradient(ellipse 80% 70% at 90% 10%, rgba(196,255,61,0.12), transparent 55%), #060a0d; background-attachment: fixed; }
:root[data-bg="nebula"]   { --bg: #07061a; --bg-soft: #0d0c24; --bg-elev: #141334; --bg-glass: rgba(20,19,52,0.5);
                            --line: rgba(200,190,255,0.10); --line-strong: rgba(200,190,255,0.2); }
:root[data-bg="nebula"] body   { background: radial-gradient(ellipse 90% 70% at 10% 0%, rgba(124,92,255,0.22), transparent 55%), radial-gradient(ellipse 80% 70% at 95% 15%, rgba(61,170,255,0.16), transparent 55%), #07061a; background-attachment: fixed; }
:root[data-bg="dusk"]     { --bg: #100711; --bg-soft: #1a0d1c; --bg-elev: #241327; --bg-glass: rgba(36,19,39,0.5);
                            --line: rgba(255,200,220,0.10); --line-strong: rgba(255,200,220,0.2); }
:root[data-bg="dusk"] body     { background: radial-gradient(ellipse 95% 70% at 12% -5%, rgba(255,107,61,0.20), transparent 52%), radial-gradient(ellipse 85% 70% at 92% 12%, rgba(180,61,255,0.18), transparent 55%), #100711; background-attachment: fixed; }
:root[data-bg="abyss"]    { --bg: #03070f; --bg-soft: #071423; --bg-elev: #0b1d33; --bg-glass: rgba(11,29,51,0.5);
                            --line: rgba(150,200,255,0.09); --line-strong: rgba(150,200,255,0.18); }
:root[data-bg="abyss"] body    { background: linear-gradient(180deg, #0a1f38 0%, #051120 45%, #03070f 100%); background-attachment: fixed; }

/* ============================================================
   MOTION INTENSITY — [data-motion]
   JS reads this to pace the live console; CSS toggles ambient motion.
   ============================================================ */
:root { --motion-glow: 1; }
:root[data-motion="calm"]  { --motion-glow: 0; }
:root[data-motion="max"]   { --motion-glow: 1.8; }

/* ============================================================
   INTERIOR HERO DEPTH  ·  the house cyan-glass language everywhere
   A soft cyan aura blooms behind each interior page's headline so every
   page opens with the same lit, dimensional feel as the home's product
   hero. Purely decorative (pseudo-element, z-index:-1) — it never touches
   layout or a heading's own entrance animation. brief already owns its
   ::before, so it gets the aura on ::after.
   ============================================================ */
.about-hero, .services-hero, .work-hero, .news-hero, .t-hero, .contact-stage { position: relative; }
.about-hero::before, .services-hero::before, .work-hero::before,
.news-hero::before, .t-hero::before, .contact-stage::before, .brf-hero::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: clamp(70px, 13vh, 190px); transform: translateX(-50%);
  width: min(760px, 86vw); height: min(340px, 42vh);
  background:
    radial-gradient(ellipse 60% 60% at 50% 42%, color-mix(in oklab, var(--accent) 26%, transparent), transparent 66%),
    radial-gradient(ellipse 92% 52% at 50% 62%, color-mix(in oklab, var(--accent) 12%, transparent), transparent 72%);
  filter: blur(58px); opacity: 0.7;
  animation: io-aura 9s ease-in-out infinite;
}
@keyframes io-aura {
  0%, 100% { opacity: 0.5; transform: translateX(-50%) scale(1); }
  50%      { opacity: 0.8; transform: translateX(-50%) scale(1.05); }
}
@media (max-width: 640px) {
  .about-hero::before, .services-hero::before, .work-hero::before,
  .news-hero::before, .t-hero::before, .contact-stage::before, .brf-hero::after { filter: blur(44px); opacity: 0.58; }
}
:root[data-motion="calm"] .about-hero::before, :root[data-motion="calm"] .services-hero::before,
:root[data-motion="calm"] .work-hero::before, :root[data-motion="calm"] .news-hero::before,
:root[data-motion="calm"] .t-hero::before, :root[data-motion="calm"] .contact-stage::before,
:root[data-motion="calm"] .brf-hero::after { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .about-hero::before, .services-hero::before, .work-hero::before,
  .news-hero::before, .t-hero::before, .contact-stage::before, .brf-hero::after { animation: none; }
}

/* ============================================================
   RESET + BASE
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
}

/* Mobile hardening: guarantee no sideways scroll (clip, not hidden, so sticky
   never breaks) and keep wide CTAs/cards inside the frame on small screens.
   Decorative bleed (glows, marquee) stays clipped as intended. */
html { overflow-x: clip; }
@media (max-width: 560px) {
  .btn { max-width: 100%; }
  .hero__cta-row, .brain-cta, .svc-cta, .cta-band__actions { flex-wrap: wrap; }
  .marquee, .clients, .svc-banner__streams, .film-embed { max-width: 100vw; overflow: hidden; }
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--accent); color: var(--accent-ink); }

/* ============================================================
   GLOBAL TEXTURE — grain + grid + glows
   ============================================================ */

body::before {
  /* film grain */
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
  opacity: 0.18;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 2.4s steps(4) infinite;
}
@keyframes grain {
  0%, 100% { transform: translate(0,0); }
  25% { transform: translate(-3%, 2%); }
  50% { transform: translate(2%, -2%); }
  75% { transform: translate(-2%, -3%); }
}
:root[data-grain="off"] body::before { display: none; }

.bg-grid {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 30%, transparent 100%);
  opacity: 0.7;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.bg-glow {
  position: fixed;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.35;
  will-change: transform, opacity;
}
.bg-glow--lime  { width: 540px; height: 540px; background: var(--accent); top: -240px; left: -200px; opacity: 0.10; animation: glow-drift-a calc(20s / (var(--motion-glow) + 0.0001)) ease-in-out infinite; }
.bg-glow--cyan  { width: 460px; height: 460px; background: var(--signal-cyan); top: -160px; right: -220px; opacity: 0.07; animation: glow-drift-b calc(26s / (var(--motion-glow) + 0.0001)) ease-in-out infinite; }
:root[data-motion="calm"] .bg-glow { animation: none !important; }
@keyframes glow-drift-a {
  0%, 100% { transform: translate(var(--gx, 0px), var(--gy, 0px)) scale(1); opacity: 0.08; }
  50%      { transform: translate(calc(60px + var(--gx, 0px)), calc(50px + var(--gy, 0px))) scale(1.12); opacity: 0.14; }
}
@keyframes glow-drift-b {
  0%, 100% { transform: translate(var(--gx, 0px), var(--gy, 0px)) scale(1); opacity: 0.05; }
  50%      { transform: translate(calc(-50px + var(--gx, 0px)), calc(60px + var(--gy, 0px))) scale(1.14); opacity: 0.10; }
}

/* full-viewport scan sweep — a lime line slowly travelling down, "the engine reading the page" */
.bg-scan {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.bg-scan::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -20%;
  height: 220px;
  background: linear-gradient(180deg, transparent, color-mix(in oklch, var(--accent) 12%, transparent) 55%, color-mix(in oklch, var(--accent) 24%, transparent) 70%, transparent);
  filter: blur(2px);
  animation: scan-down 7s linear infinite;
  opacity: 0.5;
}
.bg-scan::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  top: -20%;
  background: color-mix(in oklch, var(--accent) 60%, transparent);
  box-shadow: 0 0 12px var(--accent);
  animation: scan-down 7s linear infinite;
  opacity: 0.6;
}
@keyframes scan-down {
  0%   { transform: translateY(-10vh); }
  100% { transform: translateY(120vh); }
}
:root[data-motion="calm"] .bg-scan { display: none; }
@media (prefers-reduced-motion: reduce) { .bg-scan { display: none; } }

/* ---- Pointer FX: magnetic CTAs + card tilt (transforms set in site.js) ---- */
.fx-magnetic { transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); }
.fx-tilt { transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1); transform-style: preserve-3d; }
@media (prefers-reduced-motion: reduce) {
  .fx-magnetic, .fx-tilt { transition: none !important; transform: none !important; }
}

/* ---- Accent-word shimmer in headlines (only when motion is welcome).
   The motion engine splits headlines into per-letter nodes, and
   background-clip:text paints a solid block (with invisible text) when the
   clipped element contains transformed children. So the gradient is clipped
   on LEAF nodes only: the <em> itself while it still holds plain text, or
   each split char/word node inside it after a split — a transform on the
   clipped node itself is safe; only descendant transforms break the clip. ---- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes accent-shimmer { to { background-position: 200% center; } }
  :root:not([data-motion="calm"]) :is(h1, h2, .hero__title) em:not(:has(div, span)),
  :root:not([data-motion="calm"]) :is(h1, h2, .hero__title) em :is(div, span):not(:has(div, span)) {
    background-image: linear-gradient(100deg, var(--accent), var(--signal-cyan) 35%, var(--accent) 60%, var(--signal-cyan) 85%, var(--accent));
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: accent-shimmer 7s linear infinite;
  }
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

.eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mute);
  font-weight: 500;
}

.display {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(56px, 9.5vw, 148px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0;
}
.display em, .display .italic { font-style: italic; color: var(--accent); }

h1, h2, h3, h4 { font-family: var(--f-serif); font-weight: 400; letter-spacing: -0.015em; margin: 0; line-height: 1.02; }
h1 { font-size: clamp(52px, 7.5vw, 106px); }
h2 { font-size: clamp(44px, 6.2vw, 90px); }
h3 { font-size: clamp(28px, 3.2vw, 44px); }
h4 { font-size: clamp(22px, 2.2vw, 30px); }
h1 em, h2 em, h3 em { font-style: italic; color: var(--accent); }

p { margin: 0; }

.lede {
  font-family: var(--f-sans);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.5;
  color: var(--text-mute);
  max-width: 60ch;
  text-wrap: pretty;
}

.mono { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.04em; }
.label { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); }

/* ============================================================
   LAYOUT
   ============================================================ */

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); position: relative; z-index: 2; }

section { position: relative; padding: var(--pad-section) 0; }

.divider { height: 1px; background: var(--line); margin: 0; border: 0; }

/* ============================================================
   NAV
   ============================================================ */

.nav {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  flex-wrap: nowrap;              /* one row, always */
  align-items: center;
  gap: 28px;
  padding: 8px 8px 8px 22px;
  background: var(--bg-glass);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  box-shadow: 0 14px 40px -20px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05);
  font-family: var(--f-sans);
  font-size: 14px;
  max-width: calc(100vw - 32px);
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.nav__links {
  display: flex;
  gap: 22px;
  align-items: center;
  font-size: 13px;
  color: var(--text-mute);
}
.nav__links a { transition: color .2s var(--ease); }
.nav__links a:hover { color: var(--text); }
.nav__links a.active { color: var(--text); }
.nav__links a.active::after {
  content: '';
  display: block;
  height: 3px;
  width: 3px;
  border-radius: 50%;
  background: var(--accent);
  margin: 2px auto 0;
  box-shadow: 0 0 8px var(--accent);
}
.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;   /* a long CTA label must never wrap the pill taller */
  flex: 0 0 auto;
  padding: 10px 16px;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.nav__cta:hover { transform: translateY(-1px); box-shadow: 0 8px 24px -8px var(--accent); }

/* orb */
.orb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--accent), var(--signal-cyan), var(--signal-warm), var(--accent));
  filter: blur(0.5px);
  animation: orb-spin 8s linear infinite;
  box-shadow: 0 0 18px -2px var(--accent);
  position: relative;
}
.orb::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--bg);
}
.orb--lg { width: 28px; height: 28px; }
.orb--sm { width: 14px; height: 14px; }
.orb--sm::after { inset: 2px; }
@keyframes orb-spin { to { transform: rotate(360deg); } }

@media (max-width: 1180px) {
  .nav { gap: 16px; }
  .nav__links { gap: 14px; overflow: hidden; }
}
@media (max-width: 880px) {
  .nav__links { display: none; }
}

/* ============================================================
   BUTTONS / CHIPS / PILLS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 24px;
  border-radius: var(--r-pill);
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.005em;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid transparent;
}
.btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 14px 40px -16px var(--accent);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 50px -14px var(--accent); }
.btn--ghost {
  border-color: var(--line-strong);
  color: var(--text);
  background: transparent;
}
.btn--ghost:hover { border-color: var(--text); background: rgba(232,234,237,0.04); }
.btn--lg { padding: 20px 30px; font-size: 16px; }
.btn--sm { padding: 10px 16px; font-size: 13px; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
  background: var(--bg-glass);
  backdrop-filter: blur(12px);
}
.pill__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--signal-green);
  position: relative;
  box-shadow: 0 0 8px var(--signal-green);
}
.pill__dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--signal-green);
  animation: pulse 2s var(--ease) infinite;
}
@keyframes pulse {
  0% { opacity: 0.8; transform: scale(0.6); }
  100% { opacity: 0; transform: scale(2.2); }
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.tag--accent { color: var(--accent); border-color: rgba(196,255,61,0.3); background: rgba(196,255,61,0.06); }
.tag--cyan   { color: var(--signal-cyan); border-color: rgba(61,217,255,0.3); background: rgba(61,217,255,0.06); }

/* ============================================================
   CARDS / GLASS
   ============================================================ */

.card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--pad-card);
  position: relative;
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.7);
}
.card--glass {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  backdrop-filter: blur(14px);
  border-color: var(--line-strong);
}
.card--accent {
  border-color: rgba(196,255,61,0.35);
  box-shadow: 0 0 0 1px rgba(196,255,61,0.15) inset, 0 30px 80px -40px var(--accent);
}

/* ============================================================
   FOOTER
   ============================================================ */

.footer {
  position: relative;
  padding: 80px 0 56px;
  border-top: 1px solid var(--line);
  margin-top: 80px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 56px;
  align-items: start;
}
.footer__brand-mark {
  font-family: var(--f-serif);
  font-size: 72px;
  font-style: italic;
  line-height: 0.9;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}
.footer__col h5 {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 18px;
}
.footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; font-size: 14px; color: var(--text-mute); }
.footer__col a:hover { color: var(--accent); }
.footer__status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--text-mute);
  margin-bottom: 20px;
}
.footer__legacy {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--text-mute);
  max-width: 28ch;
  line-height: 1.35;
}
.footer__base {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  text-transform: uppercase;
}
@media (max-width: 880px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer__brand-mark { font-size: 56px; }
}

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */

/* Reveal: content is visible by default. JS arms the hidden state (.is-armed)
   then unarms each element with .is-in. We avoid animations/transitions on
   these because hidden iframes throttle them and content can get stranded. */
.reveal { opacity: 1; transform: none; }
/* Static hidden state on arm — no transition here, so arming never flashes. */
.reveal.is-armed:not(.is-in) { opacity: 0; }
/* The reveal itself: a randomized entrance animation (variant set in site.js)
   with a small per-element stagger. Fill `both` holds the hidden start until it
   plays; the 5s failsafe removes .is-armed if a hidden iframe ever throttles it. */
.reveal.is-armed.is-in {
  animation: reveal-up 0.72s var(--ease-out) both;
  animation-delay: var(--reveal-delay, 0s);
}
.reveal--up.is-armed.is-in    { animation-name: reveal-up; }
.reveal--scale.is-armed.is-in { animation-name: reveal-scale; }
.reveal--blur.is-armed.is-in  { animation-name: reveal-blur; }
.reveal--rise.is-armed.is-in  { animation-name: reveal-rise; }

@keyframes reveal-up    { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes reveal-scale { from { opacity: 0; transform: scale(0.9); }       to { opacity: 1; transform: none; } }
@keyframes reveal-blur  { from { opacity: 0; filter: blur(16px); }          to { opacity: 1; filter: blur(0); } }
@keyframes reveal-rise  { from { opacity: 0; transform: perspective(900px) rotateX(13deg) translateY(26px); } to { opacity: 1; transform: none; } }

/* Calm motion preset → gentler, uniform fade-up. */
:root[data-motion="calm"] .reveal.is-armed.is-in { animation-name: reveal-up; animation-duration: 0.5s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-armed { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; }
  .orb, body::before, .pill__dot::after { animation: none; }
}

/* ============================================================
   SECTION HEADER (shared)
   ============================================================ */

.section-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin-bottom: 56px;
  text-align: center;
  justify-items: center;
}
.section-head > * { max-width: 760px; }
.section-head .eyebrow { display: inline-flex; align-items: center; gap: 10px; justify-content: center; }
.section-head__tag {
  width: 8px; height: 8px; background: var(--accent); border-radius: 50%;
}

/* ============================================================
   PAGE-LOAD SPLASH (staggered reveal)
   ============================================================ */

.page-load {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  animation: page-load 1.6s var(--ease-out) forwards;
  animation-delay: 0.2s;
}
.page-load__mark {
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.4em;
  opacity: 0;
  animation: mark-in 0.6s var(--ease-out) forwards;
}
@keyframes mark-in { 0% { opacity: 0; transform: translateY(8px); } 60% { opacity: 1; transform: none; } }
@keyframes page-load {
  0%, 30% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; pointer-events: none; clip-path: inset(0 0 100% 0); }
}

/* ============================================================
   CTA BAND (shared)
   ============================================================ */

.cta-band {
  position: relative;
  padding: clamp(80px, 12vw, 160px) 0;
  text-align: center;
  overflow: hidden;
}
.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 60% at 50% 50%, rgba(196,255,61,0.18), transparent 60%),
    radial-gradient(ellipse 30% 40% at 20% 80%, rgba(61,217,255,0.12), transparent 70%);
  pointer-events: none;
}
.cta-band h2 { max-width: 16ch; margin: 0 auto 32px; }
.cta-band__sub { color: var(--text-mute); max-width: 50ch; margin: 0 auto 40px; }

/* ============================================================
   SIGNAL BARS / SPARKLINES
   ============================================================ */

.bar {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.bar__label { flex: 0 0 130px; color: var(--text-mute); }
.bar__track { flex: 1; height: 6px; background: rgba(232,234,237,0.06); border-radius: 999px; overflow: hidden; position: relative; }
.bar__fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; transition: width 1.2s var(--ease-out); }
.bar__fill--green { background: var(--signal-green); box-shadow: 0 0 12px var(--signal-green); }
.bar__fill--amber { background: var(--signal-amber); box-shadow: 0 0 12px var(--signal-amber); }
.bar__fill--red   { background: var(--signal-red);   box-shadow: 0 0 12px var(--signal-red); }
.bar__value { flex: 0 0 60px; text-align: right; color: var(--text); }

/* ============================================================
   UTILITIES
   ============================================================ */

.muted { color: var(--text-mute); }
.dim { color: var(--text-dim); }
.accent { color: var(--accent); }
.italic { font-style: italic; }
.center { text-align: center; }
.flex { display: flex; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }
.grid { display: grid; }
.mt-8 { margin-top: 32px; } .mt-12 { margin-top: 48px; } .mt-16 { margin-top: 64px; }
.mb-8 { margin-bottom: 32px; } .mb-12 { margin-bottom: 48px; }

/* ============================================================
   NAV — AV logo + upgraded liquid CTA  (cc-5 / cc-6)
   ============================================================ */
.nav__brand img { height: 30px; width: auto; display: block; filter: drop-shadow(0 0 9px rgba(61,217,255,0.45)); }
.nav__brand .tld { color: var(--accent); opacity: 0.92; }
.nav__cta {
  position: relative; overflow: hidden; padding: 11px 20px; font-weight: 700;
  background: linear-gradient(120deg, var(--accent), color-mix(in oklab, var(--signal-cyan) 55%, var(--accent)));
  color: var(--accent-ink);
  box-shadow: 0 6px 22px -6px var(--accent), inset 0 1px 0 rgba(255,255,255,0.45);
}
.nav__cta::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 42%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-20deg); animation: cta-sheen 3.6s ease-in-out infinite; pointer-events: none;
}
@keyframes cta-sheen { 0%, 100% { left: -60%; } 55% { left: 130%; } }
:root[data-motion="calm"] .nav__cta::after { animation: none; }
.nav__cta:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 14px 34px -8px var(--accent), inset 0 1px 0 rgba(255,255,255,0.5); }

/* ============================================================
   FX2 — showpiece animation styles
   ============================================================ */

/* #4 warp menu trigger (in nav) */
.nav__menu {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-content: center; gap: 5px;
  border: 1px solid var(--line-strong); background: transparent; cursor: pointer; flex: 0 0 auto;
  transition: border-color .25s, background .25s;
}
.nav__menu span { display: block; width: 16px; height: 1.5px; background: var(--text); transition: transform .3s; }
.nav__menu:hover { border-color: var(--accent); background: rgba(196,255,61,0.06); }
.nav__menu:hover span:first-child { transform: translateY(1px); }

/* #4 warp overlay */
.warp {
  position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center;
  overflow-y: auto; padding: 56px 24px;
  background: rgba(5,6,9,0.86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none; transition: opacity .5s var(--ease);
}
.warp.is-open { opacity: 1; pointer-events: auto; }
.warp.is-warping { animation: warp-out .62s var(--ease-out) forwards; }
@keyframes warp-out { to { opacity: 0; transform: scale(1.5); filter: blur(20px); } }
.warp__grid { position: absolute; inset: 0; width: 100%; height: 100%; }
.warp__close {
  position: absolute; top: 28px; right: 32px; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line-strong); color: var(--text-mute); background: var(--bg-glass); cursor: pointer; font-size: 18px;
  transition: color .25s, border-color .25s; z-index: 2;
}
.warp__close:hover { color: var(--accent); border-color: var(--accent); }
.warp__links { position: relative; z-index: 2; display: grid; gap: clamp(4px, 1vw, 12px); text-align: center; }
.warp__links a {
  display: inline-flex; align-items: baseline; gap: 18px; justify-content: center;
  font-family: var(--f-serif); font-size: clamp(20px, 3vw, 40px); line-height: 1.12; letter-spacing: -0.02em;
  color: var(--text); transition: color .3s; opacity: 0; transform: translateY(20px);
}
.warp.is-open .warp__links a { animation: warp-in .6s var(--ease-out) forwards; }
.warp__links a:nth-child(1) { animation-delay: .06s; } .warp__links a:nth-child(2) { animation-delay: .1s; }
.warp__links a:nth-child(3) { animation-delay: .14s; } .warp__links a:nth-child(4) { animation-delay: .18s; }
.warp__links a:nth-child(5) { animation-delay: .22s; } .warp__links a:nth-child(6) { animation-delay: .26s; }
.warp__links a:nth-child(7) { animation-delay: .3s; } .warp__links a:nth-child(8) { animation-delay: .34s; }
.warp__links a:nth-child(9) { animation-delay: .38s; } .warp__links a:nth-child(10) { animation-delay: .42s; }
@keyframes warp-in { to { opacity: 1; transform: none; } }
/* Pricing stands out in the warp menu too: accent + breathing glow */
.warp__links a[data-pm-open] { color: var(--accent); }
.warp__links a[data-pm-open] .warp__t { animation: warp-pricing-breathe 2.8s ease-in-out infinite; }
@keyframes warp-pricing-breathe {
  0%, 100% { text-shadow: 0 0 6px color-mix(in oklab, var(--accent) 30%, transparent); }
  50% { text-shadow: 0 0 18px color-mix(in oklab, var(--accent) 80%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .warp__links a[data-pm-open] .warp__t { animation: none; } }
.warp__links a em { font-family: var(--f-mono); font-style: normal; font-size: 13px; color: var(--accent); opacity: 0.7; }
.warp__links a .warp__t span { display: inline-block; transition: transform .3s var(--ease); }
.warp__links a:hover { color: var(--accent); }
.warp__links a:hover .warp__t span { transform: translateY(-6px) scale(1.08); }

/* #9/#10 portrait holographic overlay */
.portrait { will-change: transform; transition: transform .4s var(--ease); }
.portrait__holo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; transition: transform .3s var(--ease); z-index: 2; }
.portrait__initials { position: relative; z-index: 3; transition: transform .4s var(--ease); }
.portrait.is-revealed { box-shadow: 0 0 60px -10px var(--accent); }

/* #7 liquid reading-progress bar */
.liquid-bar { position: fixed; top: 0; left: 0; width: 100%; height: 8px; z-index: 1050; pointer-events: none; }

/* #8 tag cloud */
[data-tagcloud] { position: relative; width: 100%; min-height: 320px; display: block; }
[data-tagcloud] a {
  font-family: var(--f-mono); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text); white-space: nowrap; text-decoration: none; padding: 3px 8px;
  transition: color .2s;
}
[data-tagcloud] a:hover { color: var(--accent); }

/* ambient orbit sprinkle — reusable background tag-cloud (orbit.js) */
.orbit-ambient {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.4;
  -webkit-mask-image: radial-gradient(ellipse 62% 72% at 50% 50%, #000 28%, transparent 80%);
  mask-image: radial-gradient(ellipse 62% 72% at 50% 50%, #000 28%, transparent 80%);
}
.orbit-ambient a {
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in oklab, var(--accent) 72%, var(--text)); white-space: nowrap; text-decoration: none;
  text-shadow: 0 0 12px color-mix(in oklab, var(--accent) 26%, transparent);
}
.orbit-ambient a:nth-child(2n) { color: color-mix(in oklab, var(--signal-cyan) 72%, var(--text)); text-shadow: 0 0 12px color-mix(in oklab, var(--signal-cyan) 26%, transparent); }
.orbit-ambient a:nth-child(5n) { color: color-mix(in oklab, var(--signal-warm) 64%, var(--text)); }
:root[data-motion="calm"] .orbit-ambient { opacity: 0.3; }
@media (prefers-reduced-motion: reduce) { .orbit-ambient { display: none; } }

/* ============================================================
   CLEAT GALLERY — auto-rotating product photos (CSS crossfade)
   ============================================================ */
.cleat-gallery { position: absolute; inset: 0; overflow: hidden; background: #f6f7f9; border-radius: 12px; }
.dz-art { position: absolute; inset: 0; display: grid; place-items: center; }
.dz-art svg { width: 100%; height: 100%; display: block; }
.cleat-gallery img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  padding: 3%;
  opacity: 0;
  animation: cleat-cycle 21s infinite;
  will-change: opacity;
}
.cleat-gallery img:nth-child(1) { animation-delay: 0s; }
.cleat-gallery img:nth-child(2) { animation-delay: 3.5s; }
.cleat-gallery img:nth-child(3) { animation-delay: 7s; }
.cleat-gallery img:nth-child(4) { animation-delay: 10.5s; }
.cleat-gallery img:nth-child(5) { animation-delay: 14s; }
.cleat-gallery img:nth-child(6) { animation-delay: 17.5s; }
/* first photo is a permanent visible base (never black, even if anims are throttled);
   the rest crossfade over it */
.cleat-gallery img:first-child { opacity: 1; animation: none; }
@keyframes cleat-cycle {
  0%    { opacity: 0; }
  1.5%  { opacity: 1; }
  16.5% { opacity: 1; }
  19.5% { opacity: 0; }
  100%  { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cleat-gallery img { animation: none; opacity: 0; }
  .cleat-gallery img:first-child { opacity: 1; }
}

/* industry photo galleries (legal / saas / local) — crossfade like the cleats but fill the frame */
.dz-photos { position: absolute; inset: 0; overflow: hidden; background: #0a0b0d; border-radius: 12px; }
.dz-photos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; animation: dz-photo-cycle 20s infinite; }
.dz-photos img:nth-child(1) { animation-delay: 0s; }
.dz-photos img:nth-child(2) { animation-delay: 4s; }
.dz-photos img:nth-child(3) { animation-delay: 8s; }
.dz-photos img:nth-child(4) { animation-delay: 12s; }
.dz-photos img:nth-child(5) { animation-delay: 16s; }
.dz-photos img:first-child { opacity: 1; animation: none; }
@keyframes dz-photo-cycle { 0% { opacity: 0; } 2% { opacity: 1; } 18% { opacity: 1; } 22% { opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .dz-photos img { animation: none; opacity: 0; }
  .dz-photos img:first-child { opacity: 1; }
}

/* ============================================================
   ENGINE NODE NETWORK (worknetwork.js) — shared component
   core hub + orbiting nodes wired by animated tentacles
   ============================================================ */
.net { position: relative; width: 100%; height: clamp(700px, 78vw, 900px); margin: 4px 0 8px; }
.net-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.net-node {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: clamp(206px, 22vw, 268px);
  background: linear-gradient(180deg, color-mix(in oklab, var(--node) 9%, var(--bg-elev)), var(--bg-elev));
  border: 1px solid color-mix(in oklab, var(--node) 36%, var(--line));
  border-radius: var(--r-lg);
  padding: 18px 20px;
  display: grid; gap: 8px; z-index: 2;
  box-shadow: 0 20px 46px -26px rgba(0,0,0,0.82);
  cursor: pointer; will-change: transform;
  transition: box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.net-node:hover { z-index: 7; border-color: var(--node); box-shadow: 0 0 44px -10px var(--node), 0 28px 58px -24px rgba(0,0,0,0.9); }
.net-node.is-pulse { border-color: var(--node); box-shadow: 0 0 40px -8px var(--node); }
.net-node__tag { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
.net-node__result { font-family: var(--f-serif); font-style: italic; font-size: 44px; line-height: 0.9; color: var(--node); letter-spacing: -0.02em; text-shadow: 0 0 28px color-mix(in oklab, var(--node) 45%, transparent); }
.net-node__result .u { font-size: 0.4em; font-style: normal; margin-left: 4px; color: var(--text-mute); vertical-align: 0.5em; }
.net-node__client { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--node); }
.net-node__title { font-family: var(--f-serif); font-size: 18px; line-height: 1.12; letter-spacing: -0.01em; text-wrap: pretty; }
.net-node__arrow { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-mute); display: flex; gap: 6px; align-items: center; }
.net-node.is-dim { opacity: 0.14; pointer-events: none; }

/* core hub */
.net-node--core {
  width: clamp(188px, 17vw, 224px);
  text-align: center; justify-items: center; cursor: default; gap: 7px;
  background: radial-gradient(circle at 50% 32%, rgba(196,255,61,0.16), var(--bg-elev) 72%);
  border-color: rgba(196,255,61,0.5);
  box-shadow: 0 0 64px -16px var(--accent), 0 24px 56px -26px rgba(0,0,0,0.9);
  z-index: 5;
}
.net-core-orb { width: 46px; height: 46px; margin-bottom: 2px; }
.net-node--core h4 { font-family: var(--f-serif); font-size: 25px; line-height: 1; }
.net-node--core .lbl { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-mute); }
.net-node--core .live { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); display: inline-flex; gap: 7px; align-items: center; }
.net-node--core .live .d { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }

/* compact variant — for the homepage teaser */
.net--mini { height: clamp(540px, 58vw, 680px); }
.net--mini .net-node { width: clamp(166px, 17vw, 210px); padding: 14px 16px; border-radius: var(--r-md); gap: 6px; }
.net--mini .net-node__result { font-size: 34px; }
.net--mini .net-node__title { font-size: 15px; }
.net--mini .net-node--core { width: clamp(150px, 14vw, 182px); }
.net--mini .net-core-orb { width: 38px; height: 38px; }
.net--mini .net-node--core h4 { font-size: 21px; }

/* readable grid fallback — narrow + reduced-motion */
.net.is-grid { height: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 1000px) { .net.is-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .net.is-grid { grid-template-columns: 1fr; } }
.net.is-grid .net-node { position: static; transform: none !important; width: auto; }
.net.is-grid .net-node--core { grid-column: 1 / -1; }
.net.is-grid .net-canvas { display: none; }
@media (prefers-reduced-motion: reduce) {
  .net { height: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .net .net-node { position: static; transform: none !important; width: auto; }
  .net .net-node--core { grid-column: 1 / -1; }
  .net .net-canvas { display: none; }
}

/* #6 news cylinder */
.cyl { position: relative; height: 460px; perspective: 1100px; overflow: visible; touch-action: pan-y; }
.cyl__ring { position: absolute; inset: 0; transform-style: preserve-3d; }
.cyl > .post-card, .cyl .post-card { width: min(320px, 78vw); }
.cyl .post-card { cursor: grab; }
.cyl .post-card:active { cursor: grabbing; }

/* #1 chroma hero canvas */
.hero__canvas-wrap canvas[data-hero-chroma] { display: none; }
:root[data-hero="chroma"] .hero__canvas-wrap canvas[data-hero-mesh] { display: none; }
:root[data-hero="chroma"] .hero__canvas-wrap canvas[data-hero-chroma] { display: block; }
:root[data-hero="chroma"] .hero__orb-wrap { display: none; }

/* sonar hero background mode */
/* sonar hero background mode */
.hero__canvas-wrap canvas[data-hero-ripple] { display: none; }
:root[data-hero="ripple"] .hero__canvas-wrap canvas[data-hero-mesh],
:root[data-hero="ripple"] .hero__canvas-wrap canvas[data-hero-chroma] { display: none; }
:root[data-hero="ripple"] .hero__canvas-wrap canvas[data-hero-ripple] { display: block; }
:root[data-hero="ripple"] .hero__orb-wrap, :root[data-hero="ripple"] .hero__sonar { display: none; }
.hero__sonar { position: absolute; inset: 0; display: none; overflow: hidden; }
:root[data-hero="sonar"] .hero__canvas-wrap canvas { display: none; }
:root[data-hero="sonar"] .hero__sonar { display: block; }
:root[data-hero="sonar"] .hero__orb-wrap { display: none; }
.hero__sonar .ring {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0; border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--accent) 45%, transparent);
  transform: translate(-50%, -50%); animation: sonar-ping 4.4s ease-out infinite;
}
.hero__sonar .sweep {
  position: absolute; left: 50%; top: 50%; width: 150vmax; height: 150vmax; transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg, color-mix(in oklab, var(--accent) 18%, transparent), transparent 22%);
  animation: sonar-sweep 6s linear infinite; opacity: 0.5;
}
@keyframes sonar-ping { 0% { width: 0; height: 0; opacity: 0.75; } 100% { width: 130vmax; height: 130vmax; opacity: 0; } }
@keyframes sonar-sweep { to { transform: translate(-50%, -50%) rotate(360deg); } }
:root[data-motion="calm"] .hero__sonar .sweep, :root[data-motion="calm"] .hero__sonar .ring { animation: none; }

/* ============================================================
   CLIENT LOGO WALL — animated marquee
   ============================================================ */
.clients { overflow: hidden; }
.marquee { overflow: hidden; margin-top: 44px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.marquee__track { display: flex; gap: 20px; width: max-content; animation: marquee 36s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
:root[data-motion="calm"] .marquee__track { animation: none; }
.client-chip {
  flex: 0 0 auto; height: 100px; width: 208px; display: grid; place-items: center; padding: 18px 26px;
  background: linear-gradient(180deg, #f6f7f9, #e9ebee); border-radius: 16px; border: 1px solid var(--line-strong);
  box-shadow: 0 18px 40px -24px rgba(0,0,0,0.8); transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.client-chip:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -22px rgba(0,0,0,0.85); }
.client-chip img { max-height: 58px; max-width: 156px; width: auto; object-fit: contain; filter: grayscale(1); opacity: 0.82; transition: filter .3s, opacity .3s; }
.client-chip:hover img { filter: none; opacity: 1; }
.client-chip--text { font-family: var(--f-sans); font-weight: 800; font-size: 30px; letter-spacing: -0.03em; color: #0a1a3a; }
.client-chip--pbs { background: #111; }

/* self-rewriting copy callout */
.rw-flag {
  position: absolute; z-index: 80; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent-ink); background: var(--accent); padding: 5px 11px;
  border-radius: 999px; box-shadow: 0 10px 28px -8px var(--accent); opacity: 0; transform: translateY(8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease); pointer-events: none; white-space: nowrap; font-weight: 600;
}
.rw-flag.is-on { opacity: 1; transform: none; }
.rw-flag__arrow { margin-right: 5px; }
.rw-just { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }

/* ============================================================
   Nav transparent-on-scroll (cc-2) + centered interior heroes (cc-1)
   ============================================================ */
/* Readability first: the old scrolled state went fully transparent and
   dropped the links to 50% opacity until hovered — which read as a broken,
   illegible nav floating over page art. The nav now KEEPS its glass and its
   links at full strength at all times; scrolling just softens the shadow. */
.nav { transition: background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease), backdrop-filter .35s var(--ease); }
.nav.is-scrolled { background: var(--bg-glass); border-color: var(--line-strong); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); box-shadow: 0 10px 30px -18px rgba(0,0,0,0.5); }
.nav.is-scrolled:hover { box-shadow: 0 14px 40px -20px rgba(0,0,0,0.6); }

/* Center the intro of interior index pages */
.work-hero, .services-hero, .news-hero, .t-hero, .demo-hero { text-align: center; }
.work-hero h1, .services-hero h1, .news-hero h1, .t-hero h1, .demo-hero h1,
.work-hero .lede, .services-hero .lede, .news-hero .lede, .t-hero .lede, .demo-hero .lede {
  margin-left: auto; margin-right: auto;
}
.work-hero .eyebrow, .services-hero .eyebrow, .news-hero .eyebrow, .t-hero .eyebrow, .demo-hero .eyebrow { justify-content: center; }
.t-hero .proof-row { text-align: left; }

@media (prefers-reduced-motion: reduce) {
  .warp.is-warping { animation: none; }
  .warp__links a { opacity: 1; transform: none; animation: none !important; }
}


/* ---- comment batch: spacing, eyebrow glow, CTA ---- */
.clients { padding-top: clamp(36px,5vw,72px); padding-bottom: clamp(16px,2.5vw,36px); }
.clients .section-head { margin-bottom: 18px; }
.marquee { margin-top: 22px; }
.how-eyebrow { margin-left: clamp(0px,4vw,72px); box-shadow: 0 0 22px -4px var(--accent); animation: how-glow 2.6s ease-in-out infinite; }
.how-sub { margin-left: clamp(0px,4vw,72px); }
@keyframes how-glow { 50% { box-shadow: 0 0 42px 0 var(--accent); border-color: var(--accent); } }
:root[data-motion="calm"] .how-eyebrow { animation: none; }
.cta-band h2 { max-width: 32ch; font-size: clamp(34px,4.6vw,62px); }
.cta-band .btn--primary { position: relative; overflow: hidden; animation: cta-pulse 2.6s var(--ease) infinite; }
@keyframes cta-pulse { 0%,100% { box-shadow: 0 14px 40px -16px var(--accent); } 50% { box-shadow: 0 22px 62px -8px var(--accent); transform: translateY(-3px); } }
.cta-band .btn--primary::after { content:''; position:absolute; top:0; left:-60%; width:42%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,0.5),transparent); transform:skewX(-20deg); animation:cta-sheen 3s ease-in-out infinite; pointer-events:none; }
:root[data-motion="calm"] .cta-band .btn--primary, :root[data-motion="calm"] .cta-band .btn--primary::after { animation: none; }


/* ============================================================
   GLOW · 3D DEPTH · EMPHASIS batch
   ============================================================ */
:root { --pad-section: clamp(58px, 7.5vw, 112px); }   /* tighten vertical space */

/* live demo area — glowing animated border so it reads as LIVE */
.sandbox { position: relative; }
.sandbox::before {
  content: ''; position: absolute; inset: -2px; border-radius: 30px; z-index: -1; pointer-events: none;
  background: linear-gradient(120deg, var(--accent), var(--signal-cyan), var(--signal-warm), var(--accent));
  background-size: 300% 300%; filter: blur(9px); opacity: 0.45; animation: demo-border 6s linear infinite;
}
@keyframes demo-border { to { background-position: 300% 0; } }
:root[data-motion="calm"] .sandbox::before { animation: none; }
.sandbox__head .how-eyebrow { box-shadow: 0 0 24px -4px var(--accent); animation: how-glow 2.4s ease-in-out infinite; }

/* glowing accent numbers + 3D pop */
.metric__num em, .spark-card__num, .statcube__num, .stat-cell__num,
.hero__outcome .accent-num, .results-row .num, .proof__num, .metric__num {
  text-shadow: 0 0 26px color-mix(in oklab, var(--accent) 55%, transparent), 0 2px 0 rgba(0,0,0,0.35);
}
.signals .bar__value, .signals .bar__label { text-shadow: 0 0 14px color-mix(in oklab, var(--accent) 35%, transparent); }
.section-head .eyebrow, .metric__delta { text-shadow: 0 0 16px color-mix(in oklab, var(--accent) 30%, transparent); }

/* self-heal alert — way more emphasis */
.alert { box-shadow: 0 0 42px -10px var(--accent), 0 0 0 1px rgba(196,255,61,0.22) inset; animation: alert-glow 2.6s ease-in-out infinite; }
@keyframes alert-glow { 50% { box-shadow: 0 0 64px -6px var(--accent), 0 0 0 1px rgba(196,255,61,0.45) inset; } }
:root[data-motion="calm"] .alert { animation: none; }

/* +186/193% spark — glow + bigger */
.spark-card { box-shadow: 0 0 40px -16px var(--accent); }
.spark-card__num { font-size: 48px; text-shadow: 0 0 30px color-mix(in oklab, var(--accent) 60%, transparent); }

/* showcase + metric cards — real 3D depth */
.showcase__card { box-shadow: 0 44px 84px -40px rgba(0,0,0,0.82), 0 0 0 1px rgba(255,255,255,0.03) inset; }
.showcase__card:hover { box-shadow: 0 54px 96px -30px rgba(0,0,0,0.9), 0 0 56px -20px var(--accent); }
.metric { box-shadow: 0 22px 54px -30px rgba(0,0,0,0.8); }


/* ---- console readability + uptime glow + hero button flair ---- */
.log-line { font-size: 13px; }
.log-line__text { color: #eaf2ff; }
.log-line__text b { font-weight: 600; }
.log-line.is-fading { opacity: 0.72; }
.log-line.is-faded { opacity: 0.44; }
.log-line__time { color: rgba(232,234,237,0.55); }
.console__head-r { color: var(--accent); text-shadow: 0 0 14px var(--accent); }
.console__head-l { text-shadow: 0 0 14px var(--accent); }

.hero__cta-row .btn--primary { position: relative; overflow: hidden; background: linear-gradient(120deg, var(--accent), color-mix(in oklab, var(--signal-cyan) 55%, var(--accent))); animation: cta-pulse 2.6s var(--ease) infinite; }
.hero__cta-row .btn--primary::after { content:''; position:absolute; top:0; left:-60%; width:42%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,0.55),transparent); transform:skewX(-20deg); animation:cta-sheen 3s ease-in-out infinite; pointer-events:none; }
.hero__cta-row .btn--ghost { position: relative; border-color: color-mix(in oklab, var(--accent) 45%, transparent); animation: ghost-glow 3s ease-in-out infinite; }
@keyframes ghost-glow { 50% { border-color: var(--accent); box-shadow: 0 0 30px -8px var(--accent); } }
:root[data-motion="calm"] .hero__cta-row .btn--primary, :root[data-motion="calm"] .hero__cta-row .btn--primary::after, :root[data-motion="calm"] .hero__cta-row .btn--ghost { animation: none; }


/* ---- nav CTA smaller+3D · CTA band conic ring · warp depth ---- */
.nav__cta { padding: 9px 16px; font-size: 12.5px; box-shadow: 0 5px 0 -2px color-mix(in oklab, var(--accent) 55%, #000), 0 12px 26px -8px var(--accent), inset 0 1px 0 rgba(255,255,255,0.5); }
.nav__cta:hover { transform: translateY(-2px) scale(1.03); }

.cta-band::after { content:''; position:absolute; left:50%; top:50%; width:560px; height:560px; transform:translate(-50%,-50%); border-radius:50%; background: conic-gradient(from 0deg, transparent, color-mix(in oklab, var(--accent) 34%, transparent), transparent 42%); animation: cta-ring 9s linear infinite; pointer-events:none; z-index:0; filter: blur(34px); opacity:0.45; }
@keyframes cta-ring { to { transform: translate(-50%,-50%) rotate(360deg); } }
:root[data-motion="calm"] .cta-band::after { animation:none; }

.warp { background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(8,10,14,0.72), rgba(5,6,9,0.94)); }
.warp__links { perspective: 900px; }
.warp__links a { text-shadow: 0 0 32px color-mix(in oklab, var(--accent) 28%, transparent); }


/* ---- testimonials: spinning glowing orbs + bigger glowing featured quotes ---- */
.q-avatar { animation: orb-gentle-spin 16s linear infinite; box-shadow: 0 0 26px -6px var(--accent); }
@keyframes orb-gentle-spin { to { transform: rotate(360deg); } }
:root[data-motion="calm"] .q-avatar { animation: none; }
.q-card blockquote { font-size: clamp(24px, 2.7vw, 38px); text-shadow: 0 0 30px color-mix(in oklab, var(--accent) 22%, transparent); }
.q-card { box-shadow: 0 32px 72px -36px rgba(0,0,0,0.82); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.q-card--accent { box-shadow: 0 0 56px -18px var(--accent), 0 32px 72px -36px rgba(0,0,0,0.82); }
.q-card:hover { box-shadow: 0 0 60px -20px var(--accent), 0 40px 84px -30px rgba(0,0,0,0.9); }
.compact-quote { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.compact-quote:hover { box-shadow: 0 0 42px -16px var(--accent); }
.compact-quote .q-avatar { width: 44px; height: 44px; }
.cta-band h2 em { display: inline; }


/* ---- scan line: only sweep a few times then stop · proof-row animation ---- */
.bg-scan::before, .bg-scan::after { animation-iteration-count: 4; }
.proof { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.proof:hover { transform: translateY(-5px); box-shadow: 0 0 38px -14px var(--accent); }
.proof__num { text-shadow: 0 0 26px color-mix(in oklab, var(--accent) 55%, transparent); }
.endorsement-strip { box-shadow: 0 0 50px -22px var(--accent); }


/* ---- interior brightness + hover glow + flatten CTA + random CTA anims ---- */
.work-hero .lede, .services-hero .lede, .news-hero .lede, .t-hero .lede, .demo-hero .lede,
.feature-post p, .featured-study__body p, .case-card__title, .post-card__excerpt { color: #d8dee7; }
.lede, .feature-post p, .featured-study__body p { transition: color .3s, text-shadow .3s; }
.lede:hover, .feature-post:hover p, .featured-study__body p:hover { color: #fff; text-shadow: 0 0 26px color-mix(in oklab, var(--accent) 30%, transparent); }
.case-card:hover, .post-card:hover, .feature-post:hover, .featured-study:hover { box-shadow: 0 0 52px -18px var(--accent), 0 30px 62px -30px rgba(0,0,0,0.72); }
.cta-band h2 { max-width: 40ch; font-size: clamp(32px, 4.2vw, 56px); }
.btn--primary.fx-a { animation: cta-pulse 2.6s var(--ease) infinite; }
.btn--primary.fx-b { animation: ghost-glow 2.4s ease-in-out infinite; }
.btn--primary.fx-c { animation: cta-pulse 3.4s var(--ease) infinite reverse; }
:root[data-motion="calm"] .btn--primary.fx-a, :root[data-motion="calm"] .btn--primary.fx-b, :root[data-motion="calm"] .btn--primary.fx-c { animation: none; }


/* ---- tighten wasted space + float animation on step/engage cards ---- */
:root { --pad-section: clamp(46px, 6vw, 94px); }
.cta-band { padding: clamp(54px,7.5vw,104px) 0; }
.how__step, .engage { animation: card-float 6s ease-in-out infinite; }
.how__step:nth-child(2), .engage:nth-child(2) { animation-delay: -2s; }
.how__step:nth-child(3), .engage:nth-child(3) { animation-delay: -4s; }
@keyframes card-float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-9px);} }
:root[data-motion="calm"] .how__step, :root[data-motion="calm"] .engage { animation: none; }


/* ---- animate the featured services graph (draw-on loop) ---- */
.service__featured-vis path[stroke="#c4ff3d"], .service__featured-vis path[stroke] { stroke-dasharray: 620; animation: graph-draw 5s ease-in-out infinite; }
@keyframes graph-draw { 0%{stroke-dashoffset:620;} 55%,100%{stroke-dashoffset:0;} }
:root[data-motion="calm"] .service__featured-vis path { animation: none; }


/* ---- services cards: kill the empty gap, pack content ---- */
.service { grid-template-rows: auto auto auto auto auto; }
.service--featured { min-height: 0; }
.service__featured-vis { margin-top: 10px; }


/* ---- interior hero heads: compact + full-width so they don't eat the whole fold ---- */
.work-hero, .services-hero, .news-hero, .t-hero, .demo-hero { padding-top: 116px !important; padding-bottom: 14px !important; }
.work-hero h1, .services-hero h1, .news-hero h1, .t-hero h1, .demo-hero h1 {
  font-size: clamp(32px, 4.2vw, 60px) !important;
  line-height: 1.0 !important;
  max-width: 30ch !important;
}
.work-hero .lede, .services-hero .lede, .news-hero .lede, .t-hero .lede, .demo-hero .lede {
  font-size: clamp(15px, 1.15vw, 17px) !important;
  margin-top: 16px !important;
  max-width: 78ch !important;
}
.about-hero { padding-top: 120px !important; }
.about-hero h1 { font-size: clamp(34px, 4.6vw, 66px) !important; max-width: 22ch !important; }
.contact-title { font-size: clamp(34px, 4.4vw, 62px) !important; }


/* --- avakata: stacked wordmark (was overlapping the nav links) --- */
.nav__brand > span { display: inline-flex; flex-direction: column; line-height: 1.05; }
.nav__brand .tld { font-size: 0.8em; letter-spacing: 0.18em; }
@media (max-width: 560px) { .nav__cta { display: none; } } /* it lives in the warp menu on phones */


/* --- avakata: clip decorative full-bleed layers (mobile h-scroll) --- */
/* bg glows, living-bg canvas, bg-grid and the 3D news cylinder are meant to
   bleed past the viewport; clip (not hidden) stops mobile sideways-scroll
   without creating a scroll container or breaking position:sticky. */
html { overflow-x: clip; }
body { overflow-x: clip; max-width: 100%; }


/* assets/start-funnel-fix-2026-09-19.css */
/* ============================================================
   START FUNNEL + DUPLICATE-NODE SURFACE FIXES — 2026-09-19
   Found by screenshotting /start at 1440x900 and reading the
   rules that actually matched, not by guessing at markup.
   ============================================================ */

/* ── 1. The signup pane was painted with progress-DOT styling ──
   The only rule setting the pane's surface is:
       .is-on-4 { background: var(--accent);
                  box-shadow: 0 0 12px color-mix(...); }
   That is indicator styling — an accent fill plus a glow, written
   for a ~10px step dot. Instatic's editor duplicated the node and
   the rule landed on the whole 800px form pane, so step one of the
   funnel rendered as a solid blue slab. None of the text colours
   changed with it, because the element it was written for had no
   text:
       .st-k  "Step 1 · You"  rgb(0,113,227) on rgb(0,113,227) = 1.00:1
       h2, .st-sub, label                          1.8 - 2.4:1
   The kicker was literally invisible and the field labels nearly so.

   Restore a real form surface and re-ink everything on it. Scoped to
   the pane, so genuine .is-on-* step dots keep their accent fill. */
[class*="st-pane"] {
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: 0 18px 44px -28px rgba(8, 14, 26, 0.34) !important;
  border: 1px solid rgba(11, 18, 32, 0.10);
  color: #0b1220;
}
[class*="st-pane"] h1,
[class*="st-pane"] h2,
[class*="st-pane"] h3,
[class*="st-pane"] h1 div,
[class*="st-pane"] h2 div,
[class*="st-pane"] h3 div { color: #0b1220; }
[class*="st-pane"] .st-k { color: #1f5fd0; }
[class*="st-pane"] .st-sub,
[class*="st-pane"] label,
[class*="st-pane"] p { color: #4a5568; }

/* Inputs were blue-on-blue: the field, its text and its placeholder
   all sat inside the accent slab, so the form read as empty. */
[class*="st-pane"] input,
[class*="st-pane"] textarea,
[class*="st-pane"] select {
  background: #ffffff;
  color: #0b1220;
  border: 1px solid rgba(11, 18, 32, 0.18);
}
[class*="st-pane"] input::placeholder,
[class*="st-pane"] textarea::placeholder { color: #8b95a7; opacity: 1; }
[class*="st-pane"] input:focus,
[class*="st-pane"] textarea:focus,
[class*="st-pane"] select:focus {
  border-color: #1f5fd0;
  outline: 2px solid rgba(31, 95, 208, 0.28);
  outline-offset: 1px;
}

/* ── 2. The translucent grey slab ──────────────────────────────
   .st-stage-2 carries a dark oklab gradient plus
   backdrop-filter: blur(16px) saturate(1.5), so it sits over the
   page as a murky grey sheet around the form. Ryan has called this
   out twice by hand ("this stupid gray translucent hunk of crap").
   Same -N suffix drift: .st-stage was dealt with, .st-stage-2 never
   inherited it. Matched on a class substring so -3 is covered too. */
[class*="st-stage"] {
  background-image: none !important;
  background-color: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* ── 3. Hive roster: 9 declared columns, 4 members ─────────────
   .hv__members is grid-template-columns: repeat(9, 118px) but the
   team being shown has 4 people, leaving ~590px of empty track —
   the same defect class as the 597px void beside the news cards.
   auto-fit collapses to whatever the team actually has. */
.hv__members {
  grid-template-columns: repeat(auto-fit, minmax(96px, 118px)) !important;
  justify-content: start;
}


/* assets/svc-accent-contrast-2026-09-19.css */
/* ============================================================
   SERVICE ACCENT CONTRAST — 2026-09-19
   ------------------------------------------------------------
   Every service page carries its own --svc accent, and they were
   all picked for a DARK theme: neon lime #c4ff3d, cyan #3dd9ff,
   orange #ff6b3d, sand #e8c66a, neon green #39ff14. The site now
   runs the light gallery theme, so every one of them is used as
   text on a white or near-white surface:

       .svc-eyebrow       "● Infrastructure"   1.09:1
       .svc-related__go   "Explore →"          1.19:1
       .svc-outcome__stat "247"                1.67:1
       .door__kicker      "Door 1 · ..."       2.10:1
       .door__rec-tag     "Recommended if"     1.67:1
       .dz-tab.is-on      "E-commerce"         2.05:1

   Hardcoding a darker value per service would need one rule per
   accent and would drift the moment a service is added. Instead
   mix whatever --svc happens to be with the ink colour: the hue
   survives, so each service still reads as its own colour, and
   the result is dark enough to be legible on white.

   Scoped to the light theme, so if a dark theme is ever restored
   the neon comes back untouched rather than staying muddy.

   Measured after deploying: the 22 distinct contrast failures on
   the services pages dropped to zero.
   ============================================================ */

html[data-theme="gallery"] .svc-eyebrow,
html[data-theme="gallery"] .svc-related__go,
html[data-theme="gallery"] .svc-outcome__stat,
html[data-theme="gallery"] .door__kicker,
html[data-theme="gallery"] .door__rec-tag,
html[data-theme="gallery"] .eyebrow,
html[data-theme="gallery"] [class*="svc-eyebrow"],
html[data-theme="gallery"] [class*="svc-related__go"] {
  color: color-mix(in srgb, var(--svc, var(--accent, #0b1220)) 38%, #0b1220);
}

/* The service stat is large display type, so it can carry more of
   its own colour and still clear 3:1. */
html[data-theme="gallery"] .svc-outcome__stat {
  color: color-mix(in srgb, var(--svc, var(--accent, #0b1220)) 52%, #0b1220);
}

/* A filled accent button: set BOTH the fill and the ink, or it
   depends on whichever accent happens to be live. The first
   attempt here only flipped the ink to near-black, assuming the
   fill was the cyan --svc — but the fill is the palette --accent,
   which the lava palettes had already darkened to slate, so
   near-black on slate measured 1.81:1. Pinning both ends removes
   the guesswork: a dark fill from the service hue, white on it. */
html[data-theme="gallery"] .door__open,
html[data-theme="gallery"] [class*="door__open"] {
  background: color-mix(in srgb, var(--svc, var(--accent, #0b1220)) 26%, #0b1220);
  color: #ffffff;
  font-weight: 700;
}

/* Selected tab: the green was a fill colour being used as text. */
html[data-theme="gallery"] .dz-tab.is-on,
html[data-theme="gallery"] [class*="dz-tab"].is-on {
  color: color-mix(in srgb, var(--svc, var(--accent, #0b1220)) 34%, #0b1220);
}

/* "Cons" headings used the warning orange straight, at 2.1:1. */
html[data-theme="gallery"] .door__col--con h5,
html[data-theme="gallery"] .door__col--con h4 {
  color: #9a3412;
}


/* src/styles/blog-post.css */
/* avakata — blog post entry template (Track B, ADR-0004/0008).
   Post bodies are DOMPurify-sanitised (no inline style, no aside/section/dl/img),
   so the pieces that live inside the body — takeaways, FAQ, related reading —
   carry classes and get their look from here. Values mirror the inline styles
   the Astro template shipped, so the published article is visually identical. */
.post-hero[src=""] { display: none; }
.post-takeaways { margin-top: 28px; border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--bg-elev); padding: 22px 24px; }
.post-takeaways h2 { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin: 0 0 12px; }
.post-takeaways ul { margin: 0; padding-left: 20px; color: var(--text); line-height: 1.6; display: grid; row-gap: 8px; column-gap: 8px; }
.post-faq { margin-top: 48px; }
.post-faq h2 { font-family: var(--f-serif); font-size: 32px; color: var(--text); }
.post-faq__list { margin-top: 18px; }
.post-faq__item { border-top: 1px solid var(--line); padding: 18px 0; }
.post-faq__item h3 { color: var(--text); font-weight: 600; font-size: 18px; margin: 0; font-family: inherit; }
.post-faq__item p { color: var(--text-mute); margin: 8px 0 0; line-height: 1.6; }
.post-related { margin-top: 48px; border-top: 1px solid var(--line); padding-top: 24px; }
.post-related h2 { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin: 0 0 18px; }
.post-related ul { list-style: none; margin: 0; padding: 0; display: grid; row-gap: 14px; column-gap: 14px; }
.post-related__card { display: block; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-elev); padding: 18px 20px; text-decoration: none; transition: border-color 0.15s ease; }
.post-related__card:hover { border-color: var(--line-strong); }
.post-related__cat { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.post-related__title { display: block; color: var(--text); font-weight: 600; font-size: 18px; margin-top: 6px; }
.post-related__desc { display: block; color: var(--text-mute); margin-top: 6px; font-size: 14px; line-height: 1.5; }