/* ============================================================
   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);
  --text:         #e8eaed;
  --text-mute:    rgba(232, 234, 237, 0.62);
  --text-dim:     rgba(232, 234, 237, 0.38);
  --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; }

/* ============================================================
   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;
}

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;
}

.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(0, 0) scale(1); opacity: 0.08; }
  50%      { transform: translate(60px, 50px) scale(1.12); opacity: 0.14; }
}
@keyframes glow-drift-b {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.05; }
  50%      { transform: translate(-50px, 60px) 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; } }

/* ============================================================
   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(48px, 7vw, 96px); }
h2 { font-size: clamp(40px, 5.6vw, 80px); }
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;
  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;
  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: 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; }
.reveal.is-armed:not(.is-in) { opacity: 0; transform: translateY(18px); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-armed { opacity: 1 !important; transform: 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;
}
.section-head .eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.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;
  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(34px, 6vw, 78px); line-height: 1.04; 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; }
@keyframes warp-in { to { opacity: 1; transform: 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; }
}

/* ============================================================
   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)
   ============================================================ */
.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: transparent; border-color: transparent; box-shadow: none; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.nav.is-scrolled .nav__links { opacity: 0.5; transition: opacity .3s; }
.nav.is-scrolled:hover { 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 14px 40px -20px rgba(0,0,0,0.6); }
.nav.is-scrolled:hover .nav__links { opacity: 1; }

/* 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%; }