/* ════════════════════════════════════════════════════════════════
   BAXTAGE · flagship design-system core  (shared across .com inner pages)
   v3 "Glass Runtime" — DARK. Matches the home page (site-dark.css):
   dark navy #05060A · electric blue #3E8BFF · IBM Plex Sans + Space Mono.
   Class names preserved from the legacy light system so existing inner-page
   markup keeps working; only the values + component rules flipped to dark.
   ════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root{
  --cream:#05060A; --bone:#0B0D14; --ink:#EAF1FB; --stone:#8A97AE;
  --ash:rgba(255,255,255,0.09); --blue:#3E8BFF; --blue-d:#6FB0FF; --blue-soft:rgba(62,139,255,0.14);
  --violet:#8595B0; --violet-soft:rgba(133,149,176,0.12);     /* secondary collapsed to slate */
  --signal:#3E8BFF; --live:#6FB0FF;                            /* "live / now" = light blue */
  --night:#05060A; --night-2:#0B0D14; --ash-dark:rgba(255,255,255,0.12);
  --glass:linear-gradient(140deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  --shadow:0 24px 60px -30px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.10);
  --ease:cubic-bezier(.22,.61,.36,1);
}

html{ scroll-behavior:smooth; scroll-padding-top:64px; overflow-x:clip; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{ font-family:'IBM Plex Sans',-apple-system,"Helvetica Neue",Arial,sans-serif; background:var(--cream); color:var(--ink); -webkit-font-smoothing:antialiased; overflow-x:clip; }
::selection{ background:var(--blue); color:#04060d; }
img,svg,video,canvas{ max-width:100%; }

h1,h2,h3,h4{ font-family:'IBM Plex Sans','Inter',sans-serif; }
.display{ font-family:'IBM Plex Sans',sans-serif; letter-spacing:-0.035em; line-height:0.97; font-weight:600; }
.h1{ font-family:'IBM Plex Sans',sans-serif; letter-spacing:-0.03em; line-height:1.05; font-weight:600; }
.h2{ font-family:'IBM Plex Sans',sans-serif; letter-spacing:-0.025em; line-height:1.1; font-weight:600; }
.eyebrow{ font-family:'IBM Plex Sans','Inter',sans-serif; letter-spacing:0.1em; text-transform:uppercase; font-weight:600; font-size:0.92rem; color:var(--stone); display:inline-flex; align-items:center; gap:.7em; }
.mono{ font-family:'Space Mono',monospace; }
.text-stone{ color:var(--stone); }
.tnum{ font-variant-numeric:tabular-nums; }
.hairline{ border-color:var(--ash); }

/* ── blue signal helpers ── */
.blue-dot{ display:inline-block; width:.55em; height:.55em; background:var(--blue); vertical-align:middle; box-shadow:0 0 8px var(--blue); }
.blue-text{ color:var(--blue); }
.blue-edge{ border-left:3px solid var(--blue); }
.blue-rule{ background:var(--blue); height:3px; width:64px; box-shadow:0 0 12px var(--blue); }
.violet-text{ color:var(--violet); }
.violet-dot{ display:inline-block; width:.55em; height:.55em; background:var(--violet); vertical-align:middle; }
.violet-edge{ border-left:3px solid var(--violet); }
.live-text{ color:var(--live); }
.u-blue{ text-decoration:underline; text-decoration-color:var(--blue); text-decoration-thickness:0.08em; text-underline-offset:0.12em; text-decoration-skip-ink:none; }
.link-underline{ border-bottom:1px solid var(--stone); padding-bottom:1px; transition:border-color .2s var(--ease), color .2s var(--ease); }
.link-underline:hover{ border-color:var(--blue); color:var(--blue-d); }

/* ── LIVE beacon ── */
.live-dot{ position:relative; display:inline-block; width:8px; height:8px; background:var(--signal); border-radius:50%; box-shadow:0 0 8px var(--signal); }
.live-dot::after{ content:''; position:absolute; inset:-3px; background:var(--signal); border-radius:50%; opacity:.4; animation:live-pulse 2.4s var(--ease) infinite; }
@keyframes live-pulse{ 0%{transform:scale(1);opacity:.4;} 60%{transform:scale(2.5);opacity:0;} 100%{transform:scale(2.5);opacity:0;} }

/* ── buttons ── */
.btn-primary{ background:var(--blue); color:#04060d; border-radius:999px; transition:transform .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease); box-shadow:0 16px 36px -10px rgba(62,139,255,0.7); display:inline-flex; align-items:center; gap:.7em; font-weight:600; }
.btn-primary:hover{ background:var(--blue-d); transform:translateY(-1px); box-shadow:0 22px 48px -10px rgba(62,139,255,0.9); }
.btn-blue{ background:var(--blue); color:#04060d; border-radius:999px; transition:background .18s var(--ease), transform .18s var(--ease); font-weight:600; display:inline-flex; align-items:center; gap:.7em; }
.btn-blue:hover{ background:var(--blue-d); transform:translateY(-1px); }
.btn-ghost{ color:var(--ink); border:1px solid var(--ash); border-radius:999px; background:rgba(255,255,255,0.02); transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); display:inline-flex; align-items:center; gap:.7em; }
.btn-ghost:hover{ background:var(--blue-soft); color:var(--blue-d); border-color:var(--blue); }
.btn-light{ color:var(--ink); border:1px solid var(--ash); border-radius:999px; transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.btn-light:hover{ background:var(--blue); color:#04060d; border-color:var(--blue); }
.arr{ font-family:'Space Mono',monospace; transition:transform .2s var(--ease); }
a:hover > .arr, button:hover > .arr{ transform:translateX(4px); }

/* ── editorial blocks → dark glass panels ── */
.block{ background:var(--glass); border:1px solid var(--ash); border-radius:18px; backdrop-filter:blur(9px) saturate(125%); box-shadow:var(--shadow); transition:border-color .25s var(--ease), transform .25s var(--ease); }
.block:hover{ border-color:rgba(62,139,255,0.45); transform:translateY(-2px); }
.block-bone{ background:var(--bone); }

.scroll-progress{ position:fixed; top:0; left:0; height:2px; width:0%; background:linear-gradient(90deg,var(--blue),var(--blue-d)); box-shadow:0 0 12px var(--blue); z-index:200; }

/* ── status tags ── */
.tag{ display:inline-flex; align-items:center; gap:.5em; padding:5px 11px; font-family:'Space Mono',monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; border:1px solid var(--ash); border-radius:999px; color:var(--stone); }
.tag.live{ color:var(--live); border-color:var(--live); }
.tag.scoping{ color:var(--violet); border-color:var(--violet); }
.tag.internal{ background:rgba(255,255,255,0.06); color:var(--ink); border-color:var(--ash); }
.tag.research{ color:var(--stone); }

/* ── module grid ── */
.mod-grid{ display:grid; grid-template-columns:1fr; gap:1px; background:var(--ash); border:1px solid var(--ash); border-radius:14px; overflow:hidden; }
@media (min-width:768px){ .mod-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .mod-grid{ grid-template-columns:repeat(3,1fr); } }
.mod{ padding:16px 18px; background:var(--bone); font-size:14px; line-height:1.5; transition:background .2s var(--ease); }
.mod:hover{ background:#10131d; }
.mod .n{ font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.14em; color:var(--blue); text-transform:uppercase; margin-bottom:6px; display:block; }

/* ════════════ NAV ════════════ */
header#siteHeader{ position:fixed; top:0; left:0; right:0; z-index:50; transition:background .35s var(--ease), border-color .35s var(--ease); border-bottom:1px solid transparent; }
header#siteHeader.solid, header#siteHeader.scrolled{ background:rgba(5,6,10,0.72); backdrop-filter:blur(14px) saturate(130%); border-bottom-color:var(--ash); }
header#siteHeader.solid .nav-link, header#siteHeader.solid .brand{ color:var(--stone); }
header#siteHeader.solid .nav-link:hover, header#siteHeader.solid .brand, header#siteHeader.solid .nav-link.active{ color:var(--ink); }
header#siteHeader.over-hero{ background:transparent; }
header#siteHeader.over-hero .nav-link, header#siteHeader.over-hero .brand{ color:rgba(234,241,251,.82); }
header#siteHeader.over-hero .nav-link:hover{ color:#fff; }
.navwrap{ position:relative; }
.nav-link{ position:relative; }
.nav-ind{ position:absolute; bottom:-7px; height:2px; background:var(--blue); width:0; left:0; opacity:0; transition:transform .3s var(--ease), width .3s var(--ease), opacity .2s var(--ease); pointer-events:none; }
.nav-link.active{ color:var(--ink); }
.nav-link.active::after{ content:''; position:absolute; left:0; right:0; bottom:-7px; height:2px; background:var(--blue); }
.nav-cta{ transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); border-radius:999px; }
header#siteHeader.solid .nav-cta, header#siteHeader.scrolled .nav-cta{ background:var(--blue); color:#04060d; border:1px solid var(--blue); box-shadow:0 12px 28px -12px rgba(62,139,255,0.7); }
header#siteHeader.solid .nav-cta:hover{ background:var(--blue-d); }
header#siteHeader.over-hero .nav-cta{ background:var(--blue); color:#04060d; border:1px solid var(--blue); }
header#siteHeader.over-hero .nav-cta:hover{ background:var(--blue-d); }

/* ════════════ MOTION VOCABULARY ════════════ */
.mask-line{ overflow:hidden; display:block; }
.mask-line > span{ display:inline-block; transition:transform .65s var(--ease); }
.js .mask-line > span{ transform:translateY(110%); }
.mask-line.in > span{ transform:translateY(0) !important; }
.reveal{ transition:opacity .55s var(--ease), transform .55s var(--ease); }
.js .reveal{ opacity:0; transform:translateY(16px); }
.reveal.in{ opacity:1 !important; transform:translateY(0) !important; }
.stagger > *{ transition:opacity .55s var(--ease), transform .55s var(--ease); }
.js .stagger > *{ opacity:0; transform:translateY(16px); }
.stagger.in > *{ opacity:1 !important; transform:translateY(0) !important; }
.draw path, .draw line, .draw polyline{ transition:stroke-dashoffset 1.1s var(--ease); }
.grow-y{ transition:transform .7s var(--ease); }
.js .grow-y{ transform:scaleY(0); transform-origin:top; }
.grow-y.in{ transform:scaleY(1) !important; }
.grow-x{ transition:transform .7s var(--ease); }
.js .grow-x{ transform:scaleX(0); transform-origin:left; }
.grow-x.in{ transform:scaleX(1) !important; }

/* ── DIMENSION-MEASURE ── */
.measure{ position:relative; height:11px; margin-top:12px; }
.measure .m-track{ position:absolute; left:0; right:0; top:5px; height:1px; background:var(--ash); }
.measure .m-fill{ position:absolute; left:0; top:5px; height:1px; background:var(--blue); transform-origin:left; transition:transform 1s var(--ease); box-shadow:0 0 8px var(--blue); }
.js .measure .m-fill{ transform:scaleX(0); }
.measure.in .m-fill{ transform:scaleX(1); }
.measure::before, .measure::after{ content:''; position:absolute; top:0; width:1px; height:11px; background:var(--stone); }
.measure::before{ left:0; } .measure::after{ right:0; }

/* ── spine echo ── */
.spine-echo{ position:relative; height:1px; background:var(--ash); overflow:visible; }
.spine-echo .se-node{ position:absolute; top:-5px; width:11px; height:11px; border:1px solid var(--stone); background:var(--cream); transform:rotate(45deg); }
.spine-echo .se-node.blue{ border-color:var(--blue); background:var(--blue); box-shadow:0 0 10px var(--blue); }
.spine-echo .se-dot{ position:absolute; top:-3px; left:0; width:7px; height:7px; background:var(--blue); border-radius:50%; box-shadow:0 0 8px var(--blue); animation:se-run 4.4s linear infinite; }
@keyframes se-run{ 0%{left:0; opacity:0;} 8%{opacity:1;} 92%{opacity:1;} 100%{left:100%; opacity:0;} }

/* ── routing cue ── */
.route{ display:inline-flex; gap:10px; flex-wrap:wrap; }
.route .m{ font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--stone); border:1px solid var(--ash); border-radius:999px; padding:4px 9px; transition:color .3s var(--ease), border-color .3s var(--ease); }
.route .m.lit{ color:var(--blue); border-color:var(--blue); }

/* ── elevated panel (was dark; now a blue-tinted glass band) ── */
.panel-dark{ background:linear-gradient(140deg, rgba(62,139,255,0.16), rgba(62,139,255,0.04)); color:var(--ink); border:1px solid rgba(62,139,255,0.30); border-radius:20px; box-shadow:var(--shadow); }
.panel-dark .eyebrow{ color:var(--blue-d); }

.caret{ display:inline-block; width:.55em; height:1.05em; background:var(--blue); margin-left:.1em; vertical-align:-0.12em; animation:caret-blink 1.1s steps(1) infinite; }
@keyframes caret-blink{ 50%{opacity:0;} }

/* ════════════ crosshair cursor ════════════ */
@media (hover:hover) and (pointer:fine){
  body.cursor-custom{ cursor:none; }
  body.cursor-custom .xhair{ display:block; }
}
.xhair{ display:none; position:fixed; top:0; left:0; z-index:9999; pointer-events:none; mix-blend-mode:difference; transform:translate(-50%,-50%); }
.xhair .h, .xhair .v{ position:absolute; background:#fff; }
.xhair .h{ width:22px; height:1px; left:-11px; top:0; }
.xhair .v{ width:1px; height:22px; left:0; top:-11px; }
body.cursor-hover .xhair .h{ width:34px; left:-17px; }
body.cursor-hover .xhair .v{ height:34px; top:-17px; }

/* form controls */
.field{ width:100%; background:var(--bone); border:1px solid var(--ash); border-radius:10px; padding:12px 14px; font-size:1rem; color:var(--ink); transition:border-color .2s var(--ease); }
.field::placeholder{ color:var(--stone); }
.field:focus{ outline:none; border-color:var(--blue); }
.field:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }

/* ════════════ FOCUS RING ════════════ */
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{ outline:2px solid var(--blue-d); outline-offset:3px; border-radius:3px; }

/* skip-to-content */
.skip-link{ position:fixed; top:-120px; left:16px; z-index:300; background:var(--blue); color:#04060d; padding:10px 16px; border-radius:6px; font-size:14px; font-weight:600; transition:top .2s var(--ease); }
.skip-link:focus{ top:14px; }

/* ════════════ MOBILE NAV ════════════ */
.nav-toggle{ display:inline-flex; flex-direction:column; gap:5px; width:44px; height:44px; align-items:center; justify-content:center; border:1px solid var(--ash); border-radius:8px; background:transparent; cursor:pointer; padding:0; }
.nav-toggle .bar{ width:18px; height:1.5px; background:var(--ink); transition:transform .25s var(--ease), opacity .2s var(--ease); }
header#siteHeader.over-hero .nav-toggle{ border-color:var(--ash); }
header#siteHeader.over-hero .nav-toggle .bar{ background:var(--ink); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
.mobile-nav{ display:none; border-top:1px solid var(--ash); background:rgba(5,6,10,0.96); backdrop-filter:blur(16px); }
.mobile-nav.open{ display:block; }
.mobile-nav a{ display:block; padding:15px 24px; border-bottom:1px solid var(--ash); color:var(--ink); font-size:1rem; font-family:'IBM Plex Sans',sans-serif; }
.mobile-nav a:last-child{ border-bottom:0; }
.mobile-nav a:hover{ background:var(--bone); }
@media (min-width:1024px){ .nav-toggle, .mobile-nav{ display:none !important; } }

/* ── touch tap-targets ── */
@media (max-width:1023px){ footer ul a{ display:inline-block; padding-block:6px; } }

/* ════════════ inner-page WebGL hero backdrop ════════════ */
.fx-hero{ position:relative; }
.fx-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.fx-hero > *:not(.fx-canvas){ position:relative; z-index:1; }
.no-webgl .fx-canvas{ background:radial-gradient(60% 60% at 50% 40%, rgba(62,139,255,0.18), transparent 70%); }
/* auto-injected section backdrops (data-fx on any element) — dimmer, behind content */
.fx-host{ position:relative; isolation:isolate; }
.fx-host > .fx-canvas{ opacity:.5; }
.fx-host > *:not(.fx-canvas){ position:relative; z-index:1; }

/* ════════════ REDUCED MOTION ════════════ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .mask-line > span, .reveal, .stagger > *{ transform:none !important; opacity:1 !important; }
  .draw path, .draw line, .draw polyline{ stroke-dashoffset:0 !important; }
  .grow-y, .grow-x, .measure .m-fill{ transform:none !important; }
  .live-dot::after, .caret, .spine-echo .se-dot{ animation:none !important; }
}