/* AI Labs — house design system
   Derived from agios_v1.2/docs/specialist-model-factory.html */

:root{
  --ground:#EEEFF1; --surface:#FAFAFB; --surface-2:#F3F4F6;
  --ink:#16181D; --ink-soft:#464A54; --faint:#7C818C; --line:#D9DBE0;
  --accent:#B45F1E; --accent-soft:#F0E2D4;
  --cool:#515C7A; --cool-soft:#E2E5EC;
  --verified:#2E6E54; --verified-soft:#DCEBE3;
  --danger:#B23A2E; --danger-soft:#F3DED9;
  --shadow:0 1px 2px rgba(20,24,34,.04),0 8px 28px -18px rgba(20,24,34,.28);
  --maxw:1080px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0F1013; --surface:#17191F; --surface-2:#1E2027;
    --ink:#ECEDEF; --ink-soft:#AAAEB8; --faint:#6C717C; --line:#2A2D35;
    --accent:#E08A3C; --accent-soft:#3A2A18;
    --cool:#8F9CC2; --cool-soft:#20242E;
    --verified:#54A17E; --verified-soft:#16241E;
    --danger:#E0715F; --danger-soft:#33201C;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 34px -18px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --ground:#0F1013; --surface:#17191F; --surface-2:#1E2027;
  --ink:#ECEDEF; --ink-soft:#AAAEB8; --faint:#6C717C; --line:#2A2D35;
  --accent:#E08A3C; --accent-soft:#3A2A18;
  --cool:#8F9CC2; --cool-soft:#20242E;
  --verified:#54A17E; --verified-soft:#16241E;
  --danger:#E0715F; --danger-soft:#33201C;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 34px -18px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--ground); color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  line-height:1.6; font-size:16px; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,52px)}
h1,h2,h3,h4{font-family:"Archivo",system-ui,sans-serif; text-wrap:balance; margin:0}
h1{font-weight:900; font-size:clamp(2.3rem,5.6vw,4.1rem); line-height:1; letter-spacing:-.022em}
h2{font-weight:800; font-size:clamp(1.65rem,3.3vw,2.45rem); line-height:1.06; letter-spacing:-.015em}
h3{font-weight:700; font-size:1.12rem; letter-spacing:-.01em}
p{margin:0}
a{color:var(--accent); text-underline-offset:3px}
strong{font-weight:600; color:var(--ink)}

.eyebrow{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:12px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--faint);
  display:flex; align-items:center; gap:10px}
.eyebrow::before{content:""; width:20px; height:1.5px; background:var(--accent); flex:none}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}

/* ---------- header ---------- */
header.top{border-bottom:1px solid var(--line); background:var(--ground);
  position:sticky; top:0; z-index:30}
.top .wrap{display:flex; justify-content:space-between; align-items:center;
  padding-top:15px; padding-bottom:15px; gap:20px; flex-wrap:wrap}
.brand{font-family:"IBM Plex Mono",monospace; font-size:13px; letter-spacing:.1em;
  color:var(--ink-soft); text-decoration:none; font-weight:500; white-space:nowrap;
  display:inline-flex; align-items:center; gap:10px}
.brand b{color:var(--accent); font-weight:600}
/* Full lockup (mark + wordmark) as a single image.  The artwork is cropped
   tight to its bounding box with zero padding, so the breathing room is added
   here rather than baked into the file. */
.brand-lockup{height:38px; width:auto; display:block; flex:none}
.brand-lockup--dark-bg{display:none}
footer.site .brand-lockup{height:32px}
@media(max-width:520px){ .brand-lockup{height:30px} }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand-lockup--light-bg{display:none}
  :root:not([data-theme="light"]) .brand-lockup--dark-bg{display:block}
}
:root[data-theme="dark"] .brand-lockup--light-bg{display:none}
:root[data-theme="dark"] .brand-lockup--dark-bg{display:block}
nav.main{display:flex; gap:22px; flex-wrap:wrap; align-items:center}
nav.main a{font-size:14px; color:var(--ink-soft); text-decoration:none; font-weight:500}
nav.main a:hover,nav.main a[aria-current]{color:var(--accent)}

/* ---------- mobile menu ----------
   Deliberately CSS-only: a checkbox drives the disclosure, so the menu works
   with JavaScript disabled.  A JS toggle would leave the nav unreachable on
   small screens without JS, which contradicts the rest of the site. */
.nav-check{position:absolute; width:1px; height:1px; margin:0; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.burger{display:none}

@media(max-width:860px){
  .top .wrap{flex-wrap:nowrap}
  .burger{display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:44px; height:44px; padding:10px; margin:-10px -10px -10px 0;
    box-sizing:border-box; cursor:pointer; flex:none; border-radius:8px}
  .burger span{display:block; height:2px; width:100%; background:var(--ink);
    border-radius:2px; transition:transform .18s ease, opacity .18s ease}
  .nav-check:focus-visible ~ .burger{outline:2px solid var(--accent); outline-offset:2px}

  nav.main{display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--ground); border-bottom:1px solid var(--line);
    box-shadow:0 14px 28px rgba(0,0,0,.22); padding:6px 0}
  .nav-check:checked ~ nav.main{display:flex}
  nav.main a{padding:14px clamp(18px,5vw,28px); font-size:15px;
    border-top:1px solid var(--line)}
  nav.main a:first-child{border-top:none}

  /* burger becomes a close icon while the menu is open */
  .nav-check:checked ~ .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-check:checked ~ .burger span:nth-child(2){opacity:0}
  .nav-check:checked ~ .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
@media(prefers-reduced-motion:reduce){ .burger span{transition:none} }

/* ---------- sections ---------- */
section{padding:clamp(46px,6.5vw,76px) 0; border-top:1px solid var(--line)}
section:first-of-type{border-top:none}
.band{background:var(--surface-2)}
.sec-head{max-width:66ch}
.sec-head h2{margin-top:16px}
.sec-head .sub{color:var(--ink-soft); margin-top:14px; font-size:1.05rem; max-width:62ch}

/* ---------- hero ---------- */
/* ---------- hero background: engineered grid + graph lattice ----------
   Both layers are drawn from the theme's own tokens, so the hero stays
   readable in light and dark without being pinned to either. */
.hero{position:relative; isolation:isolate; overflow:hidden;
  padding:clamp(64px,9vw,124px) 0 clamp(56px,6vw,84px); border-top:none;
  min-height:clamp(430px,46vw,600px); display:flex; align-items:center}
.hero .wrap{position:relative; z-index:1; width:100%}
.hero-bg{position:absolute; inset:0; z-index:0; pointer-events:auto; overflow:hidden}
.hero-bg canvas{display:block; width:100%; height:100%}

/* fine blueprint grid, fading out toward the headline */
.hero-bg::before{content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(to right,  var(--line) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 88px);
  opacity:.30;
  -webkit-mask-image:linear-gradient(100deg, transparent 26%, #000 68%);
  mask-image:linear-gradient(100deg, transparent 26%, #000 68%)}

/* a single soft accent bloom so the right side has depth rather than flatness */
.hero-bg::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(58% 78% at 78% 46%,
    color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 70%)}

@media(max-width:760px){
  .hero{min-height:auto; display:block}
  .hero-bg::before{-webkit-mask-image:linear-gradient(to bottom, transparent 34%, #000 78%);
    mask-image:linear-gradient(to bottom, transparent 34%, #000 78%); opacity:.24}
  .hero-bg::after{background:radial-gradient(70% 40% at 62% 84%,
    color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 72%)}
}
@media(prefers-reduced-motion:reduce){ .hero-bg{pointer-events:none} }
.hero h1{margin:22px 0 0; max-width:17ch}
.hero h1 .hl{color:var(--accent)}
.lede{font-size:clamp(1.06rem,1.6vw,1.28rem); color:var(--ink-soft); max-width:62ch; margin-top:26px}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:34px}
.btn{display:inline-flex; align-items:center; gap:9px; padding:11px 20px; border-radius:10px;
  font-size:.95rem; font-weight:600; text-decoration:none; border:1px solid var(--line);
  background:var(--surface); color:var(--ink); box-shadow:var(--shadow)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn:hover{transform:translateY(-1px)}

/* ---------- cards / grid ---------- */
.grid{display:grid; gap:16px; margin-top:32px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.g2,.g3{grid-template-columns:1fr}}
.card{background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:22px; box-shadow:var(--shadow)}

/* ---------- pipeline / flow diagrams ---------- */
.flow{display:flex; align-items:stretch; margin-top:34px; flex-wrap:wrap; justify-content:center}
.node{flex:1 1 150px; min-width:146px; background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:18px 16px; box-shadow:var(--shadow)}
.node .who{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; font-weight:600; margin-bottom:8px}
.node .title{font-family:"Archivo",sans-serif; font-weight:700; font-size:1.05rem; line-height:1.15}
.node .desc{font-size:.85rem; color:var(--ink-soft); margin-top:8px; line-height:1.55}
.node .refusal{margin-top:10px; display:inline-flex; align-items:center; gap:5px;
  font-family:"IBM Plex Mono",monospace; font-size:10px; font-weight:600; letter-spacing:.04em;
  color:var(--danger); background:var(--danger-soft); padding:3px 8px; border-radius:999px}
.node .tag-note{margin-top:10px; display:inline-flex; align-items:center; gap:5px;
  font-family:"IBM Plex Mono",monospace; font-size:10px; font-weight:600; letter-spacing:.04em;
  color:var(--cool); background:var(--cool-soft); padding:3px 8px; border-radius:999px}
.node.teacher, .node.tier-cool{border-top:3px solid var(--cool)}
.node.teacher .who, .node.tier-cool .who{color:var(--cool)}
.node.oracle, .node.tier-ink{border-top:3px solid var(--ink)}
.node.oracle .who, .node.tier-ink .who{color:var(--ink)}
.node.student, .node.tier-accent{border-top:3px solid var(--accent)}
.node.student .who, .node.tier-accent .who{color:var(--accent)}
.node.result, .node.tier-verified{border-top:3px solid var(--verified)}
.node.result .who, .node.tier-verified .who{color:var(--verified)}
.arrow{display:flex; align-items:center; justify-content:center; flex:0 0 34px}
.arrow svg{overflow:visible}
.arrow-line{stroke:var(--faint); stroke-width:2; fill:none; stroke-dasharray:30; stroke-dashoffset:30;
  transition:stroke-dashoffset .55s ease}
.arrow-head{fill:none; stroke:var(--faint); stroke-width:2; opacity:0; transition:opacity .3s ease .45s}
.flow.in-view .arrow-line{stroke-dashoffset:0}
.flow.in-view .arrow-head{opacity:1}
@media(max-width:820px){
  .flow{flex-direction:column}
  .arrow{flex-basis:30px; height:30px}
  .arrow svg{transform:rotate(90deg)}
}
.loopnote{margin-top:16px; text-align:center; font-family:"IBM Plex Mono",monospace; font-size:12px;
  color:var(--faint); letter-spacing:.03em}
.loopnote b{color:var(--accent); font-weight:600}

/* ---------- merge diagram (two sources -> one result) ---------- */
.merge{margin-top:34px}
.merge-inputs{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:700px){.merge-inputs{grid-template-columns:1fr}}
.merge-y{height:56px; margin:0 auto; max-width:360px}
.merge-y svg{width:100%; height:100%; overflow:visible}
.merge-line{stroke:var(--faint); stroke-width:2; fill:none; stroke-dasharray:120; stroke-dashoffset:120;
  transition:stroke-dashoffset .8s ease}
.merge.in-view .merge-line{stroke-dashoffset:0}
.node.source{border-top:3px solid var(--cool)} .node.source .who{color:var(--cool)}
.node.center{max-width:360px; margin:0 auto; text-align:center; border-top:3px solid var(--verified)}
.node.center .who{color:var(--verified)}

/* ---------- illustrative-diagram caption (reused under the ops-console) ---------- */
.kg-caption{margin-top:14px; text-align:center; font-size:.83rem; color:var(--ink-soft); line-height:1.5}
.kg-caption b{color:var(--ink); font-weight:600}

/* ---------- AXONREL ops-console: a self-contained dark widget showing what the
   operator screen looks like. Deliberately NOT theme-linked -- like a product
   screenshot, it stays dark regardless of the page's light/dark mode. ---------- */
.ops-console{
  --ops-bg:#060811; --ops-bg2:#0c1220; --ops-line:rgba(148,178,214,.15);
  --ops-panel-bg:rgba(8,12,20,.72); --ops-panel-border:rgba(120,160,210,.22);
  --ops-text:#dde5f0; --ops-text-soft:#8b96ab;
  --ops-green:#3ee08a; --ops-blue:#4cc2f0; --ops-amber:#f0a63e; --ops-gray:#4a5568;
  position:relative; margin-top:34px; border-radius:18px; overflow:hidden;
  background:radial-gradient(ellipse at 50% 42%, var(--ops-bg2), var(--ops-bg) 72%);
  border:1px solid var(--ops-line); aspect-ratio:2/1;
  box-shadow:0 20px 60px -30px rgba(0,0,0,.55);
}
.ops-console canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.ops-panel{width:220px; padding:14px 16px; border-radius:12px;
  background:var(--ops-panel-bg); border:1px solid var(--ops-panel-border);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  font-family:"IBM Plex Mono",monospace; color:var(--ops-text); z-index:2}
.ops-panel.tl, .ops-panel.tr, .ops-panel.br{position:absolute}
.ops-panel h4{margin:0 0 10px; font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:600; display:flex; align-items:center; gap:8px; color:var(--ops-text)}
.ops-panel h4::before{content:""; width:7px; height:7px; border-radius:50%; flex:none;
  background:var(--dot, var(--ops-blue)); box-shadow:0 0 8px var(--dot, var(--ops-blue))}
.ops-panel ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.ops-panel li{display:flex; align-items:flex-start; gap:8px; font-size:11px; line-height:1.4;
  color:var(--ops-text-soft)}
.ops-panel li::before{content:""; flex:none; margin-top:5px; width:6px; height:6px; border-radius:2px;
  background:var(--li-dot, var(--ops-green))}
.ops-panel .row{display:flex; justify-content:space-between; gap:10px; font-size:11.5px;
  padding:6px 0; border-bottom:1px solid rgba(255,255,255,.07); color:var(--ops-text-soft)}
.ops-panel .row:last-child{border-bottom:none}
.ops-panel .row .v{color:var(--ops-text); font-weight:700; font-size:12.5px}
.ops-panel.tl{top:20px; left:20px}
.ops-panel.tr{top:20px; right:20px}
.ops-panel.br{bottom:20px; right:20px}
.ops-bar{margin-top:10px; height:3px; border-radius:2px; background:rgba(255,255,255,.09); overflow:hidden}
.ops-bar span{display:block; height:100%; width:36%; border-radius:2px;
  background:linear-gradient(90deg, var(--ops-blue), var(--ops-green))}
@media (prefers-reduced-motion: no-preference){
  .ops-bar span{animation:ops-scan 2.6s ease-in-out infinite}
}
@keyframes ops-scan{0%{transform:translateX(-110%)} 100%{transform:translateX(380%)}}
.ops-stack{position:absolute; left:20px; bottom:20px; display:flex; flex-direction:column; gap:14px; z-index:2}
.ops-legend{display:flex; gap:16px; font-family:"IBM Plex Mono",monospace; font-size:10.5px;
  color:var(--ops-text-soft)}
.ops-legend span{display:inline-flex; align-items:center; gap:6px}
.ops-legend i{width:8px; height:8px; border-radius:2px; display:inline-block}
.ops-legend i.coverage{background:var(--ops-gray)}
.ops-legend i.activity{background:var(--ops-blue)}
.ops-legend i.tracked{background:var(--ops-green)}
@media(max-width:760px){
  .ops-console{aspect-ratio:1/1}
  .ops-panel, .ops-stack{display:none}
}

/* ---------- AGIOS "Observatory" gallery: real designed artboards, embedded
   at scale via assets/observatory-embed.js. Own dark instrument-panel
   background so there's no flash before the iframe paints. ---------- */
.obs-gallery{margin-top:34px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media(max-width:900px){.obs-gallery{grid-template-columns:1fr}}
.obs-scene{
  border-radius:14px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow);
  display:flex; flex-direction:column; background:var(--surface);
}
.obs-scene .obs-label{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-soft); padding:11px 14px; border-bottom:1px solid var(--line);
  flex:none}
.obs-frame{position:relative; aspect-ratio:1280/800; background:#04060B; overflow:hidden}
.obs-frame iframe{position:absolute; top:0; left:0}
.obs-gallery-caption{margin-top:14px; text-align:center; font-size:.83rem; color:var(--ink-soft); line-height:1.5}
.obs-gallery-caption b{color:var(--ink); font-weight:600}

/* ---------- verification ladder ---------- */
.ladder{margin-top:32px}
.ladder-rung{display:flex; gap:16px; align-items:flex-start; position:relative; padding:16px 0}
.ladder-rung::before{content:""; position:absolute; left:17px; top:0; bottom:0; width:2px;
  background:var(--line); z-index:0}
.ladder-rung:first-child::before{top:34px}
.ladder-rung:last-child::before{bottom:auto; height:34px}
.ladder-rung .dot{position:relative; z-index:1; flex:0 0 36px; width:36px; height:36px;
  border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:17px;
  font-weight:700; background:var(--surface); border:2px solid var(--line)}
.ladder-rung.tier-strong .dot{border-color:var(--verified); color:var(--verified)}
.ladder-rung.tier-mid .dot{border-color:var(--accent); color:var(--accent)}
.ladder-rung.tier-weak .dot{border-color:var(--faint); color:var(--faint)}
.ladder-rung.tier-danger .dot{border-color:var(--danger); color:var(--danger); background:var(--danger-soft)}
.ladder-rung .body{padding-top:5px}
.ladder-rung .name{font-family:"Archivo",sans-serif; font-weight:700; font-size:1.02rem; color:var(--ink)}
.ladder-rung .desc{color:var(--ink-soft); font-size:.92rem; margin-top:4px; line-height:1.55; max-width:58ch}

/* ---------- scroll-reveal motion (progressive enhancement — see assets/motion.js) ----------
   JS sets the initial opacity:0/translateY inline (so content is never hidden without JS);
   this just supplies the transition so the JS-driven change animates instead of snapping. */
@media (prefers-reduced-motion: no-preference){
  .card, .pcard, .stat, .key, .flow, .ladder-rung, .merge, .obs-scene, .term-console{transition:opacity .6s ease, transform .6s ease}
}
.card h3{margin-bottom:8px}
.card p{color:var(--ink-soft); font-size:.96rem}

/* product cards */
a.pcard{display:block; text-decoration:none; color:inherit; position:relative;
  border-top:3px solid var(--line)}
a.pcard:hover{border-top-color:var(--accent)}
a.pcard .pname{font-family:"Archivo",sans-serif; font-weight:800; font-size:1.3rem;
  letter-spacing:-.015em; color:var(--ink)}
a.pcard .prole{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--accent); font-weight:600; margin-bottom:9px}
a.pcard .parrow{color:var(--accent); font-weight:600; font-size:.9rem; margin-top:14px;
  display:inline-block}
a.pcard.flag{border-top-color:var(--accent); background:var(--surface)}

/* status pills */
.pill{display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:10.5px;
  font-weight:600; letter-spacing:.06em; padding:3px 9px; border-radius:999px;
  text-transform:uppercase; white-space:nowrap}
.pill.live{background:var(--verified-soft); color:var(--verified)}
.pill.dev{background:var(--accent-soft); color:var(--accent)}
.pill.oss{background:var(--cool-soft); color:var(--cool)}
.pill.research{background:var(--cool-soft); color:var(--cool)}

/* callouts */
.key{margin-top:28px; background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--verified); border-radius:14px; padding:22px 24px; box-shadow:var(--shadow)}
.key.accent{border-left-color:var(--accent)}
.key.warn{border-left-color:var(--danger)}
.key .lab{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; font-weight:600; color:var(--verified)}
.key.accent .lab{color:var(--accent)}
.key.warn .lab{color:var(--danger)}
.key p{margin-top:9px; color:var(--ink); font-size:1.04rem; max-width:70ch}

/* tables */
.tblwrap{overflow-x:auto; margin-top:30px; border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--shadow)}
table{border-collapse:collapse; width:100%; min-width:520px; background:var(--surface)}
th,td{text-align:left; padding:13px 18px; border-bottom:1px solid var(--line); vertical-align:top}
thead th{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint); font-weight:600}
tbody tr:last-child td{border-bottom:none}
td strong{color:var(--ink)}

/* stat row */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1px;
  margin-top:32px; background:var(--line); border:1px solid var(--line);
  border-radius:14px; overflow:hidden; box-shadow:var(--shadow)}
.stat{background:var(--surface); padding:22px}
.stat .n{font-family:"Archivo",sans-serif; font-weight:800; font-size:2rem;
  letter-spacing:-.02em; color:var(--accent); line-height:1}
.stat .l{font-size:.87rem; color:var(--ink-soft); margin-top:7px}

/* feature list */
ul.ticks{list-style:none; padding:0; margin:22px 0 0; display:grid; gap:11px}
ul.ticks li{padding-left:26px; position:relative; color:var(--ink-soft); font-size:.98rem}
ul.ticks li::before{content:"—"; position:absolute; left:0; color:var(--accent); font-weight:600}

/* footer */
footer.site{border-top:1px solid var(--line); background:var(--surface-2);
  padding:52px 0 40px; margin-top:0}
.fgrid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px}
@media(max-width:900px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.fgrid{grid-template-columns:1fr}}
footer.site h4{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint); font-weight:600; margin-bottom:14px}
footer.site a{display:block; color:var(--ink-soft); text-decoration:none;
  font-size:.93rem; margin-bottom:9px}
footer.site a:hover{color:var(--accent)}
.fbot{margin-top:40px; padding-top:22px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:.86rem; color:var(--faint)}

/* ---------- Axonscanner terminal dashboard: a real example scan, reproduced
   for illustration. Own dark terminal palette, not theme-linked, like the
   AXONREL ops-console and AGIOS Observatory. Bars grow in on scroll via the
   shared --target custom-property + .in-view mechanism (assets/motion.js). ---------- */
.term-console{
  --term-bg:#0B0E14; --term-panel:#11151D; --term-line:#1E2530;
  --term-text:#D6DDE8; --term-soft:#6B7686; --term-dim:#454E5C;
  --term-green:#4ADE80; --term-cyan:#38D9C9; --term-purple:#8B7CF6;
  --term-amber:#E8B655; --term-red:#E86A6A; --term-blue:#5FB4E8;
  border-radius:14px; overflow:hidden; border:1px solid var(--term-line);
  background:var(--term-bg); box-shadow:var(--shadow); margin-top:34px;
  font-family:"IBM Plex Mono",monospace; color:var(--term-text);
}
.term-chrome{display:flex; align-items:center; gap:8px; padding:11px 16px;
  border-bottom:1px solid var(--term-line); background:var(--term-panel)}
.term-chrome .dot{width:9px; height:9px; border-radius:50%; background:var(--term-dim)}
.term-chrome .term-title{margin-left:8px; font-size:11.5px; color:var(--term-soft)}
.term-body{padding:20px 22px 18px}
.term-head{display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:8px}
.term-brand{font-family:"Archivo",sans-serif; font-weight:800; font-size:1.15rem; letter-spacing:.06em;
  display:flex; align-items:center; gap:9px}
.term-brand::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--term-blue);
  box-shadow:0 0 8px var(--term-blue)}
.term-head-r{font-size:11px; color:var(--term-soft)}
.term-meta{margin-top:10px; padding-bottom:14px; border-bottom:1px solid var(--term-line);
  font-size:12px; color:var(--term-soft)}
.term-meta b{color:var(--term-text)}
.term-panel{margin-top:16px; border:1px solid var(--term-line); border-radius:8px; padding:14px 16px;
  background:var(--term-panel)}
.term-panel-h{font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--term-blue);
  margin-bottom:12px}
.term-panel-h i{color:var(--term-dim); font-style:normal; text-transform:none; letter-spacing:0}
.term-vbar{display:flex; height:16px; border-radius:4px; overflow:hidden; background:var(--term-bg)}
.term-bar-fill{width:0; transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.term-console.in-view .term-bar-fill{width:var(--target)}
.term-vseg.asserted{background:var(--term-green)}
.term-vseg.tested{background:var(--term-cyan)}
.term-vseg.reachable{background:var(--term-purple)}
.term-vseg.claimed{background:var(--term-amber)}
.term-vlegend{display:flex; flex-wrap:wrap; gap:16px; margin-top:10px; font-size:11px; color:var(--term-soft)}
.term-vlegend span{display:inline-flex; align-items:center; gap:6px}
.term-vlegend b{color:var(--term-text); font-weight:600}
.term-d{width:7px; height:7px; border-radius:50%; display:inline-block}
.term-d.asserted{background:var(--term-green)} .term-d.tested{background:var(--term-cyan)}
.term-d.reachable{background:var(--term-purple)} .term-d.claimed{background:var(--term-amber)}
.term-grid2{display:grid; grid-template-columns:1fr 1.4fr; gap:16px; margin-top:16px}
@media(max-width:760px){.term-grid2{grid-template-columns:1fr}}
.term-kv{display:flex; justify-content:space-between; padding:5px 0; font-size:12px;
  border-bottom:1px solid var(--term-line)}
.term-kv:last-child{border-bottom:none}
.term-kv span{color:var(--term-soft)}
.term-kv b{color:var(--term-text); font-weight:600}
.term-kv b.g{color:var(--term-green)} .term-kv b.a{color:var(--term-amber)}
.term-kv i{color:var(--term-dim); font-style:normal}
.term-hot{display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:10px;
  font-size:11px; padding:4px 0}
.term-hot b{color:var(--term-amber); font-weight:600}
.term-hbar{height:6px; border-radius:3px; background:var(--term-bg); overflow:hidden}
.term-hbar .term-bar-fill{height:100%; background:repeating-linear-gradient(45deg,var(--term-amber) 0 4px,rgba(232,182,85,.35) 4px 8px)}
.term-hname{color:var(--term-soft); white-space:nowrap}
.term-pkg-row{display:grid; grid-template-columns:110px 26px 1fr auto; align-items:center; gap:10px;
  font-size:11.5px; padding:6px 0}
.term-pkg-name{color:var(--term-text)}
.term-pkg-n{color:var(--term-soft); text-align:right}
.term-pkg-bar{display:flex; height:9px; border-radius:3px; overflow:hidden; background:var(--term-bg)}
.term-pkg-tag{font-size:10px; white-space:nowrap}
.term-pkg-tag.claimed{color:var(--term-amber)} .term-pkg-tag.tested{color:var(--term-cyan)}
.term-footer{margin-top:16px; padding-top:14px; border-top:1px solid var(--term-line);
  display:flex; flex-wrap:wrap; gap:16px; align-items:center; font-size:11px; color:var(--term-soft)}
.term-footer span{display:inline-flex; align-items:center; gap:6px}
.term-cmds{color:var(--term-dim)}
.term-caption{margin-top:14px; text-align:center; font-size:.83rem; color:var(--ink-soft); line-height:1.5}
.term-caption b{color:var(--ink); font-weight:600}

/* report table -- dark, matches the terminal aesthetic */
.term-report{border-radius:14px; overflow:hidden; border:1px solid var(--term-line, #1E2530);
  margin-top:20px}
.term-report table{width:100%; border-collapse:collapse; background:#0B0E14; color:#D6DDE8;
  font-family:"IBM Plex Mono",monospace; font-size:12px}
.term-report thead th{text-align:left; padding:10px 16px; font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:#6B7686; border-bottom:1px solid #1E2530}
.term-report td{padding:9px 16px; border-bottom:1px solid #161B24; white-space:nowrap}
.term-report tr:last-child td{border-bottom:none}
.term-report td.status{color:#E8B655; font-weight:600}
.term-report td.mod{color:#D6DDE8; font-weight:600}
.term-report td.note{color:#6B7686; white-space:normal; min-width:220px}

/* ---------- Axonscanner dependency graph ("intel" command) --------------
   Illustrative synthetic codebase (see assets/axonscanner-graph.js).
   Own dark palette, not theme-linked -- a "real product screen" widget
   like the AXONREL ops-console / AGIOS Observatory. ---------- */
.depgraph{position:relative; border-radius:14px; overflow:hidden; margin-top:34px;
  background:#04060B; border:1px solid rgba(148,178,214,.15); box-shadow:var(--shadow);
  aspect-ratio:16/10}
.depgraph canvas{position:absolute; inset:0; width:100%; height:100%; display:block; cursor:grab}

.dg-toolbar{position:absolute; top:16px; left:16px; display:flex; gap:8px; z-index:3}
.dg-btn{font-family:"IBM Plex Mono",monospace; font-size:11px; color:#B8C4D4; background:rgba(8,12,20,.75);
  border:1px solid rgba(148,178,214,.25); border-radius:8px; padding:6px 12px; cursor:pointer;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
.dg-btn.active{color:#3EDB94; border-color:#3EDB94}
.dg-btn:hover{border-color:rgba(148,178,214,.5)}

.dg-hud{position:absolute; top:16px; right:16px; z-index:3; text-align:right; max-width:56%;
  font-family:"IBM Plex Mono",monospace; font-size:11px; color:#8B96AB;
  background:rgba(8,12,20,.75); border:1px solid rgba(148,178,214,.25); border-radius:8px;
  padding:8px 14px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
.dg-hud .dg-count{color:#D6DDE8}
.dg-hud b{display:block; color:#5FB4E8; font-weight:600; margin-top:2px; min-height:14px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.dg-tooltip{position:absolute; z-index:4; display:none; width:200px; pointer-events:none;
  background:rgba(8,12,20,.94); border:1px solid rgba(148,178,214,.3); border-radius:8px;
  padding:10px 12px; font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:#B8C4D4}
.dg-tt-name{color:#D6DDE8; font-weight:600; margin-bottom:5px}
.dg-tt-row{margin-top:2px}
.dg-tt-row b{text-transform:uppercase; font-size:9.5px}
.dg-tt-cta{margin-top:7px; color:#5FB4E8}

.dg-panel{position:absolute; top:0; right:0; bottom:0; width:300px; max-width:78%;
  background:rgba(8,12,20,.97); border-left:1px solid rgba(148,178,214,.2);
  padding:20px 18px; overflow-y:auto; transform:translateX(100%); transition:transform .3s ease;
  font-family:"IBM Plex Mono",monospace; color:#B8C4D4; z-index:5}
.dg-panel.open{transform:translateX(0)}
.dg-panel-h{display:flex; justify-content:space-between; align-items:center}
.dg-close{background:none; border:none; color:#8B96AB; font-size:20px; cursor:pointer; line-height:1; padding:0}
.dg-panel-name{margin-top:10px; font-size:14px; color:#fff; font-weight:600; word-break:break-word}
.dg-panel-path{margin-top:4px; font-size:10px; color:#5B6B7E; word-break:break-all}
.dg-stats{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:16px}
.dg-stat{border:1px solid rgba(148,178,214,.15); border-radius:6px; padding:8px 10px}
.dg-stat .l{font-size:9px; letter-spacing:.08em; color:#5B6B7E; text-transform:uppercase}
.dg-stat .v{font-size:14px; color:#D6DDE8; font-weight:700; margin-top:3px}
.dg-sec{margin-top:16px; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:#5FB4E8}
.dg-evidence{margin-top:7px; font-size:11.5px; color:#E8B655; background:rgba(232,182,85,.08);
  border:1px solid rgba(232,182,85,.3); border-radius:6px; padding:8px 10px; line-height:1.5}
.dg-chips{margin-top:7px; display:flex; flex-wrap:wrap; gap:6px}
.dg-chip{font-size:10px; padding:3px 8px; border-radius:999px; background:rgba(148,178,214,.1);
  border:1px solid rgba(148,178,214,.25); color:#B8C4D4}
.dg-action{margin-top:7px; font-size:11.5px; color:#3EDB94; background:rgba(62,219,148,.08);
  border:1px solid rgba(62,219,148,.3); border-radius:6px; padding:8px 10px; line-height:1.5}
.dg-commit{margin-top:7px; font-size:11px; color:#8B96AB; line-height:1.6}
.dg-hash{color:#5FB4E8}

.dg-badge{font-size:10px; padding:3px 9px; border-radius:999px; text-transform:uppercase;
  letter-spacing:.04em; background:rgba(255,255,255,.06); border:1px solid currentColor}
.dg-tt-row b.s-proven, .dg-badge.s-proven, .dg-chip.s-proven{color:#3EDB94}
.dg-tt-row b.s-claimed-only, .dg-badge.s-claimed-only{color:#E8B655}
.dg-tt-row b.s-synthetic-risk, .dg-badge.s-synthetic-risk{color:#E85A9E}
.dg-tt-row b.s-stub, .dg-badge.s-stub{color:#E8813F}
.dg-tt-row b.s-entrypoint, .dg-badge.s-entrypoint{color:#5FB4E8}
.dg-tt-row b.s-unknown, .dg-badge.s-unknown{color:#8B96AB}

.dg-legend{position:absolute; left:16px; bottom:16px; right:16px; z-index:3; display:flex; flex-wrap:wrap;
  gap:14px; align-items:center; font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:#8B96AB}
.dg-legend span{display:inline-flex; align-items:center; gap:6px}
.dg-legend i{width:8px; height:8px; border-radius:50%; display:inline-block}
.dg-legend i.proven{background:#3EDB94} .dg-legend i.claimed{background:#E8B655}
.dg-legend i.synthetic{background:#E85A9E} .dg-legend i.stub{background:#E8813F}
.dg-legend i.entrypoint{background:#5FB4E8} .dg-legend i.unknown{background:#8B96AB}
.dg-legend .sep{color:#3A4452}
@media(max-width:760px){
  .depgraph{aspect-ratio:3/4}
  .dg-panel{width:100%; max-width:100%}
  .dg-legend{font-size:8.5px; gap:7px; line-height:1.6}
  .dg-toolbar{right:16px}
  .dg-hud{top:60px; left:16px; right:16px; max-width:none; text-align:left; font-size:10px}
  .dg-hud b{margin-top:1px}
}

/* ---------- AXONQUAKE demo: scripted walkthrough, illustrative only.
   Own dark palette, not theme-linked. Upload -> dual-pipeline processing ->
   chat -> animated mind-map search -> cited answer -> evidence popover. ---------- */
.aq-demo{position:relative; margin-top:34px; border-radius:16px; overflow:hidden;
  border:1px solid rgba(148,178,214,.15); background:#04060B; box-shadow:var(--shadow);
  font-family:"IBM Plex Mono",monospace; color:#D6DDE8}
.aq-tabs{display:flex; gap:0; padding:14px 22px 0; border-bottom:1px solid rgba(148,178,214,.14)}
.aq-tab{background:none; border:none; color:#6B7686; font-family:inherit; font-size:11.5px;
  letter-spacing:.08em; text-transform:uppercase; padding:8px 4px 12px; margin-right:26px;
  cursor:pointer; border-bottom:2px solid transparent}
.aq-tab.active{color:#D6DDE8; border-bottom-color:#5FB4E8}
.aq-tab:disabled{color:#3A4452; cursor:not-allowed}
.aq-panel{display:none; padding:24px 22px 26px}
.aq-panel.active{display:block}

.aq-upload-zone{border:1.5px dashed rgba(148,178,214,.3); border-radius:12px; padding:34px 20px;
  text-align:center; color:#8B96AB}
.aq-upload-icon{font-size:26px; margin-bottom:8px; color:#5FB4E8}
.aq-upload-zone p{margin:0; font-size:12px; line-height:1.6}
.aq-btn-add{margin-top:16px; background:#5FB4E8; color:#04060B; border:none; border-radius:8px;
  padding:10px 20px; font-family:inherit; font-weight:700; font-size:11.5px; cursor:pointer}
.aq-btn-add:hover{filter:brightness(1.1)}
.aq-btn-add:disabled{opacity:.45; cursor:not-allowed; filter:none}

.aq-files{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; margin-top:16px}
.aq-file{display:flex; align-items:center; gap:10px; background:#0B0F17; border:1px solid rgba(148,178,214,.15);
  border-radius:8px; padding:10px 12px; opacity:0; transform:translateY(8px);
  transition:opacity .4s ease, transform .4s ease}
.aq-file.show{opacity:1; transform:none}
.aq-file .ic{width:28px; height:28px; border-radius:6px; display:flex; align-items:center;
  justify-content:center; font-size:10px; font-weight:800; flex:none}
.aq-file .meta{overflow:hidden; flex:1}
.aq-file .name{font-size:11px; color:#D6DDE8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.aq-file .row2{display:flex; align-items:center; gap:6px; margin-top:3px}
.aq-file .size{font-size:9.5px; color:#5B6B7E; flex:none}
.aq-file .ic.pdf{background:rgba(232,90,90,.18); color:#E85A5A}
.aq-file .ic.docx{background:rgba(95,180,232,.18); color:#5FB4E8}
.aq-file .ic.xlsx{background:rgba(62,219,148,.18); color:#3EDB94}
.aq-file .ic.csv{background:rgba(232,182,85,.18); color:#E8B655}

.aq-clear{font-size:8.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:1.5px 6px; border-radius:4px; white-space:nowrap; flex:none}
.aq-clear.public{background:rgba(148,178,214,.14); color:#8FA3B8}
.aq-clear.internal{background:rgba(95,180,232,.16); color:#5FB4E8}
.aq-clear.confidential{background:rgba(232,182,85,.16); color:#E8B655}
.aq-clear.restricted{background:rgba(232,90,90,.18); color:#E85A5A}
.aq-clear-key{display:flex; flex-wrap:wrap; gap:12px; margin-top:14px; font-size:10px; color:#6B7686}
.aq-clear-key span{display:inline-flex; align-items:center; gap:6px}

.aq-pipelines{margin-top:22px; display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:760px){.aq-pipelines{grid-template-columns:1fr}}
.aq-track{border:1px solid rgba(148,178,214,.15); border-radius:10px; padding:16px}
.aq-track-h{display:flex; justify-content:space-between; align-items:center; font-size:10.5px;
  letter-spacing:.08em; text-transform:uppercase; color:#8B96AB; margin-bottom:14px}
.aq-track-status{font-size:9.5px; padding:2px 8px; border-radius:999px; background:rgba(148,178,214,.1); color:#6B7686}
.aq-track-status.done{background:rgba(62,219,148,.15); color:#3EDB94}
.aq-steps{display:grid; gap:10px}
.aq-step{display:flex; align-items:center; gap:10px; font-size:11.5px; color:#5B6B7E; transition:color .25s ease}
.aq-step .dot{width:16px; height:16px; border-radius:50%; border:1.5px solid rgba(148,178,214,.3);
  flex:none; display:flex; align-items:center; justify-content:center; font-size:9px; transition:all .25s ease}
.aq-step.active{color:#D6DDE8}
.aq-step.active .dot{border-color:#5FB4E8; box-shadow:0 0 6px rgba(95,180,232,.6)}
.aq-step.done{color:#3EDB94}
.aq-step.done .dot{border-color:#3EDB94; background:#3EDB94; color:#04060B}
.aq-btn-goto{margin-top:20px; background:#3EDB94; color:#04060B; border:none; border-radius:8px;
  padding:11px 22px; font-family:inherit; font-weight:700; font-size:11.5px; cursor:pointer}

.aq-chat-layout{display:grid; grid-template-columns:1.15fr 1fr; gap:18px}
@media(max-width:860px){.aq-chat-layout{grid-template-columns:1fr}}
.aq-chat-col{display:flex; flex-direction:column; border:1px solid rgba(148,178,214,.14);
  border-radius:10px; overflow:hidden; height:460px}
.aq-messages{flex:1; padding:16px; overflow-y:auto; display:flex; flex-direction:column; gap:12px}
.aq-msg{max-width:90%; font-size:12px; line-height:1.65; padding:10px 13px; border-radius:10px;
  opacity:0; transform:translateY(6px); animation:aq-msg-in .35s ease forwards}
@keyframes aq-msg-in{to{opacity:1; transform:none}}
.aq-msg.user{align-self:flex-end; background:rgba(95,180,232,.14); color:#D6DDE8}
.aq-msg.assistant{align-self:flex-start; background:#0B0F17; border:1px solid rgba(148,178,214,.15); color:#D6DDE8}
.aq-msg.thinking{align-self:flex-start; color:#6B7686; font-style:italic}
.aq-cite{display:inline-flex; align-items:center; justify-content:center; min-width:16px; height:16px;
  padding:0 4px; border-radius:4px; background:rgba(95,180,232,.2); color:#5FB4E8; font-size:9.5px;
  font-weight:700; cursor:pointer; margin:0 1px; vertical-align:2px; border:none; font-family:inherit}
.aq-cite:hover{background:rgba(95,180,232,.4)}
.aq-composer{display:flex; gap:8px; padding:12px; border-top:1px solid rgba(148,178,214,.14)}
.aq-input{flex:1; background:#0B0F17; border:1px solid rgba(148,178,214,.2); border-radius:8px;
  color:#D6DDE8; padding:9px 12px; font-family:inherit; font-size:11.5px}
.aq-input::placeholder{color:#4A5568}
.aq-send{background:#5FB4E8; color:#04060B; border:none; border-radius:8px; padding:9px 16px;
  font-family:inherit; font-weight:700; font-size:11.5px; cursor:pointer; flex:none}
.aq-send:disabled{opacity:.4; cursor:not-allowed}

.aq-mindmap-col{position:relative; border:1px solid rgba(148,178,214,.14); border-radius:10px;
  overflow:hidden; background:#04060B; height:460px}
.aq-mindmap-col canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.aq-mindmap-label{position:absolute; top:12px; left:14px; font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; color:#6B7686; z-index:2}
.aq-mindmap-badge{position:absolute; top:12px; right:14px; font-size:9.5px; padding:3px 9px;
  border-radius:999px; background:rgba(148,178,214,.1); color:#6B7686; z-index:2; transition:all .3s ease}
.aq-mindmap-badge.show{background:rgba(62,219,148,.15); color:#3EDB94}

.aq-popover{position:absolute; z-index:10; width:250px; max-width:80vw; background:#0B0F17;
  border:1px solid rgba(148,178,214,.25); border-radius:10px; padding:14px; font-size:11px;
  color:#B8C4D4; box-shadow:0 20px 50px -20px rgba(0,0,0,.7); display:none}
.aq-popover.show{display:block}
.aq-popover .src{color:#5FB4E8; font-weight:700; font-size:10.5px; margin-bottom:3px}
.aq-popover .loc{color:#5B6B7E; font-size:9.5px; margin-bottom:8px}
.aq-popover .excerpt{background:rgba(232,182,85,.08); border:1px solid rgba(232,182,85,.25);
  border-radius:6px; padding:8px 10px; line-height:1.55}
.aq-popover .excerpt b{color:#E8B655}
.aq-popover .close{position:absolute; top:7px; right:9px; background:none; border:none;
  color:#6B7686; cursor:pointer; font-size:15px; line-height:1; padding:2px}
@media(max-width:760px){
  .aq-chat-col, .aq-mindmap-col{height:340px}
}

/* ---------- AxonTrade Terminal: a real session, reproduced for illustration
   (numbers are from an actual paper-trading run, not fabricated -- same
   principle as the axonscanner werkzeug scan). Own dark palette, not
   theme-linked. Strategy logic ("The Math") is deliberately not reproduced. ---------- */
.at-term{
  --at-bg:#0A0C10; --at-panel:#0E1116; --at-line:rgba(148,178,214,.12);
  --at-text:#D6DDE8; --at-soft:#7C8798; --at-dim:#4A5568;
  --at-green:#3ED9A3; --at-red:#E85A5A; --at-amber:#E8B655; --at-blue:#5FB4E8;
  border-radius:14px; overflow:hidden; border:1px solid var(--at-line);
  background:var(--at-bg); box-shadow:var(--shadow); margin-top:34px;
  font-family:"IBM Plex Mono",monospace; color:var(--at-text); font-size:12px;
}
.at-topbar{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:12px 16px;
  border-bottom:1px solid var(--at-line); background:var(--at-panel)}
.at-brand{font-family:"Archivo",sans-serif; font-weight:800; font-size:13px; color:#fff}
.at-brand b{font-weight:400; color:var(--at-soft)}
.at-room-btn{font-family:inherit; font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  background:none; border:1px solid var(--at-line); color:var(--at-soft); border-radius:6px;
  padding:4px 10px; cursor:pointer}
.at-room-btn.active{color:var(--at-blue); border-color:var(--at-blue)}
.at-feed{display:inline-flex; align-items:center; gap:6px; font-size:10px; color:var(--at-green)}
.at-feed .d{width:6px; height:6px; border-radius:50%; background:var(--at-green)}
@media (prefers-reduced-motion: no-preference){.at-feed .d{animation:at-breathe 2s infinite}}
@keyframes at-breathe{0%,100%{opacity:.4} 50%{opacity:1}}
.at-stats{display:flex; gap:22px; flex-wrap:wrap; margin-left:auto; font-size:10.5px}
.at-stats .s{text-align:right}
.at-stats .l{color:var(--at-dim); font-size:9px; letter-spacing:.06em; text-transform:uppercase}
.at-stats .v{color:var(--at-text); font-weight:700; margin-top:1px}
.at-stats .v.pos{color:var(--at-green)} .at-stats .v.neg{color:var(--at-red)}
.at-estop{font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--at-red);
  border:1px solid rgba(232,90,90,.4); background:rgba(232,90,90,.1); border-radius:6px;
  padding:5px 10px}

.at-body{display:grid; grid-template-columns:190px 1fr 260px; min-height:560px}
@media(max-width:980px){.at-body{grid-template-columns:1fr}}

.at-watchlist{border-right:1px solid var(--at-line); padding:12px; overflow-y:auto; max-height:640px}
.at-wl-count{font-size:9.5px; color:var(--at-dim); letter-spacing:.06em; text-transform:uppercase;
  margin-bottom:10px}
.at-wl-group{margin-bottom:6px}
.at-wl-h{font-size:9.5px; color:var(--at-soft); letter-spacing:.06em; text-transform:uppercase;
  padding:6px 4px; cursor:default}
.at-wl-row{display:flex; justify-content:space-between; align-items:center; padding:5px 6px;
  border-radius:5px; cursor:default}
.at-wl-row:hover{background:rgba(255,255,255,.03)}
.at-wl-row.sel{background:rgba(95,180,232,.1)}
.at-wl-sym{color:var(--at-text); font-size:11px}
.at-wl-name{font-size:9px; color:var(--at-dim); display:flex; align-items:center; gap:4px}
.at-wl-name .d{width:5px; height:5px; border-radius:50%; background:var(--at-green); flex:none}
.at-wl-px{text-align:right}
.at-wl-px .main{font-size:11px; color:var(--at-text)}
.at-wl-px .sub{font-size:9px; color:var(--at-dim)}

.at-main{padding:14px 16px; overflow-x:auto}
.at-chart-h{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.at-chart-h .sym{font-family:"Archivo",sans-serif; font-weight:800; font-size:15px}
.at-chart-h .px{font-size:13px}
.at-chart-h .ask{font-size:10px; color:var(--at-dim)}
.at-chart-h .meta{margin-left:auto; font-size:9.5px; color:var(--at-dim)}
.at-chart-wrap{position:relative; height:260px; margin-top:8px; border:1px solid var(--at-line);
  border-radius:8px; background:var(--at-panel)}
.at-chart-wrap canvas{position:absolute; inset:0; width:100%; height:100%}

.at-indicators{display:grid; grid-template-columns:repeat(auto-fit,minmax(78px,1fr)); gap:0;
  margin-top:10px; border:1px solid var(--at-line); border-radius:8px; overflow:hidden}
.at-ind{padding:8px 10px; border-right:1px solid var(--at-line); border-bottom:1px solid var(--at-line)}
.at-ind .l{font-size:8.5px; color:var(--at-dim); letter-spacing:.05em; text-transform:uppercase}
.at-ind .v{font-size:11px; margin-top:3px; color:var(--at-text)}
.at-ind .v.bull{color:var(--at-green)} .at-ind .v.warn{color:var(--at-red)}

.at-tabs{display:flex; gap:20px; margin-top:14px; border-bottom:1px solid var(--at-line);
  flex-wrap:wrap}
.at-tab{background:none; border:none; font-family:inherit; color:var(--at-soft); font-size:11px;
  padding:8px 2px 10px; cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap}
.at-tab.active{color:var(--at-text); border-bottom-color:var(--at-blue)}
.at-tab .n{color:var(--at-dim); margin-left:3px}
.at-tabpanel{display:none; padding-top:12px}
.at-tabpanel.active{display:block}

.at-table{width:100%; border-collapse:collapse; font-size:11px}
.at-table th{text-align:left; padding:6px 10px; font-size:9px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--at-dim); border-bottom:1px solid var(--at-line);
  white-space:nowrap}
.at-table td{padding:7px 10px; border-bottom:1px solid rgba(255,255,255,.04); white-space:nowrap}
.at-table tr:last-child td{border-bottom:none}
.at-badge{font-size:9.5px; font-weight:700; padding:1.5px 7px; border-radius:4px}
.at-badge.buy{background:rgba(62,217,163,.15); color:var(--at-green)}
.at-badge.sell{background:rgba(232,90,90,.15); color:var(--at-red)}
.at-pnl.pos{color:var(--at-green)} .at-pnl.neg{color:var(--at-red)}

.at-decision-row{cursor:pointer}
.at-decision-row:hover{background:rgba(255,255,255,.02)}
.at-decision-detail{display:none; padding:14px 16px; background:var(--at-panel); border-radius:8px;
  margin:0 0 12px; font-size:12px; line-height:1.7; color:var(--at-soft)}
.at-decision-detail.open{display:block}
.at-decision-detail p{margin-top:10px}
.at-decision-detail p:first-child{margin-top:0}
.at-decision-detail strong{color:var(--at-text)}

.at-side{border-left:1px solid var(--at-line); padding:14px; overflow-y:auto; max-height:640px}
.at-side-h{display:flex; justify-content:space-between; align-items:center; font-size:10px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--at-soft); margin-bottom:12px}
.at-mode-row{display:flex; gap:6px; margin-bottom:14px}
.at-mode{flex:1; text-align:center; font-size:9.5px; letter-spacing:.04em; padding:6px 4px;
  border:1px solid var(--at-line); border-radius:6px; color:var(--at-dim)}
.at-mode.on{border-color:var(--at-red); color:var(--at-red); background:rgba(232,90,90,.08)}
.at-kv{display:flex; justify-content:space-between; padding:5px 0; font-size:10.5px;
  border-bottom:1px solid rgba(255,255,255,.04)}
.at-kv span{color:var(--at-dim)}
.at-kv b{color:var(--at-text); font-weight:600}
.at-kv b.warn{color:var(--at-red)}
.at-section-lab{font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--at-blue);
  margin:16px 0 6px}
.at-assistant{margin-top:16px; border:1px solid var(--at-line); border-radius:8px; padding:12px}
.at-assistant-h{display:flex; justify-content:space-between; font-size:10px; color:var(--at-soft);
  margin-bottom:8px}
.at-assistant-h .ready{color:var(--at-green); display:inline-flex; align-items:center; gap:5px}
.at-assistant-h .ready .d{width:5px; height:5px; border-radius:50%; background:var(--at-green)}
.at-assistant-msg{font-size:11px; line-height:1.65; color:var(--at-soft); min-height:120px}
.at-assistant-msg .ts{display:block; margin-top:8px; font-size:9.5px; color:var(--at-dim)}
.at-assistant-input{display:flex; gap:6px; margin-top:10px}
.at-assistant-input input{flex:1; background:var(--at-panel); border:1px solid var(--at-line);
  border-radius:6px; color:var(--at-text); padding:7px 9px; font-family:inherit; font-size:10.5px}
.at-assistant-input button{background:var(--at-blue); color:#04060B; border:none; border-radius:6px;
  padding:7px 12px; font-family:inherit; font-weight:700; font-size:10.5px; cursor:pointer}

/* engine room */
.at-room{padding:16px}
.at-room-note{font-size:11px; color:var(--at-soft); margin-bottom:14px; line-height:1.6}
.at-limit{margin-bottom:16px}
.at-limit-h{display:flex; justify-content:space-between; font-size:10.5px; margin-bottom:6px}
.at-limit-h span:first-child{color:var(--at-soft)}
.at-limit-h span:last-child{color:var(--at-text)}
.at-limit-bar{height:6px; border-radius:3px; background:rgba(255,255,255,.06); overflow:hidden}
.at-limit-fill{height:100%; border-radius:3px; width:0; transition:width 1s ease}
.at-locked{border:1px dashed var(--at-line); border-radius:8px; padding:28px; text-align:center;
  color:var(--at-dim); font-size:11px}
.at-bars-track{width:70px; height:4px; background:rgba(255,255,255,.08); border-radius:2px;
  display:inline-block; vertical-align:middle; margin-right:6px; overflow:hidden}
.at-bars-fill{height:100%; background:var(--at-blue)}

@media(max-width:980px){
  .at-watchlist{max-height:260px; border-right:none; border-bottom:1px solid var(--at-line)}
  .at-side{border-left:none; border-top:1px solid var(--at-line); max-height:none}
}

/* ---------- Axonsploit phone-frame demo: real app screens, reproduced.
   All target/network data is synthetic (10.0.0.5 / example.local / fake
   WiFi names) -- never real recon data, per instruction. Empty screens
   (Modules/Sessions/Jobs in the real app) are filled with synthetic
   examples. Colors sampled from the app's own documentation palette. ---------- */
.axp-wrap{display:flex; justify-content:center; margin-top:34px}
.axp-phone{
  --axp-bg:#0A1120; --axp-panel:#131C2E; --axp-panel2:#0E1524; --axp-line:rgba(91,107,134,.25);
  --axp-text:#E6EDF7; --axp-soft:#8EA0BD; --axp-dim:#5B6B86;
  --axp-blue:#3B82F6; --axp-green:#22C55E; --axp-red:#EF4444; --axp-amber:#EAB308; --axp-purple:#7C6BF5;
  width:100%; max-width:400px; background:var(--axp-bg); color:var(--axp-text);
  border:1px solid var(--axp-line); border-radius:28px; box-shadow:var(--shadow);
  overflow:hidden; font-family:"IBM Plex Sans",system-ui,sans-serif; position:relative;
}
.axp-notch{height:22px; display:flex; align-items:center; justify-content:center}
.axp-notch::before{content:""; width:70px; height:6px; border-radius:4px; background:rgba(255,255,255,.14)}
.axp-topbar{padding:6px 20px 14px}
.axp-topbar h4{font-size:19px; font-weight:600; margin:0}
.axp-topbar .sub{font-size:12.5px; color:var(--axp-soft); margin-top:3px}
.axp-screen{height:560px; overflow-y:auto; padding:0 18px 18px; position:relative}
.axp-panel{display:none}
.axp-panel.active{display:block}

.axp-back{color:var(--axp-blue); font-size:14px; display:inline-flex; align-items:center; gap:3px;
  cursor:pointer; background:none; border:none; font-family:inherit; padding:0; margin-bottom:6px}

.axp-eng-card{background:var(--axp-panel); border-radius:16px; padding:18px 16px; margin-top:4px}
.axp-eng-h{display:flex; align-items:center; gap:8px; font-size:11.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--axp-soft)}
.axp-dot{width:8px; height:8px; border-radius:50%; background:var(--axp-green); flex:none}
@media (prefers-reduced-motion: no-preference){.axp-dot.live{animation:axp-pulse 2s infinite}}
@keyframes axp-pulse{0%,100%{opacity:.5} 50%{opacity:1}}
.axp-eng-active{margin-left:auto; background:rgba(59,130,246,.15); color:var(--axp-blue);
  font-size:12px; padding:3px 12px; border-radius:999px}
.axp-eng-name{font-size:26px; font-weight:600; margin-top:10px}
.axp-eng-scope-lab{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--axp-soft);
  margin-top:14px}
.axp-eng-scope{background:var(--axp-panel2); border-radius:8px; padding:8px 12px; margin-top:6px;
  font-family:"IBM Plex Mono",monospace; font-size:14px; display:inline-block}
.axp-eng-counts{display:flex; gap:34px; margin-top:16px}
.axp-eng-counts b{font-size:24px; font-weight:600; display:block}
.axp-eng-counts span{font-size:12px; color:var(--axp-soft)}
.axp-report-btn{width:100%; margin-top:16px; background:var(--axp-purple); color:#fff; border:none;
  border-radius:999px; padding:12px; font-size:14.5px; font-weight:600; font-family:inherit; cursor:pointer}

.axp-subtabs{display:flex; gap:16px; margin-top:22px; flex-wrap:wrap; font-size:14.5px; font-weight:600}
.axp-subtab{background:none; border:none; font-family:inherit; cursor:pointer; padding:0;
  color:var(--axp-dim)}
.axp-subtab[data-color="rf"].sel{color:var(--axp-amber)}
.axp-subtab[data-color="mem"].sel{color:var(--axp-green)}
.axp-subtab[data-color="audit"].sel{color:var(--axp-purple)}
.axp-subtab[data-color="osint"].sel{color:var(--axp-blue)}
.axp-subtab[data-color="tgt"].sel{color:var(--axp-text)}

.axp-row{display:flex; align-items:center; justify-content:space-between; background:var(--axp-panel);
  border-radius:12px; padding:14px 16px; margin-top:14px}
.axp-row .mono{font-family:"IBM Plex Mono",monospace; font-size:15px}
.axp-added{background:rgba(255,255,255,.06); color:var(--axp-soft); font-size:12px; padding:4px 12px;
  border-radius:999px}

.axp-hint{font-size:12.5px; color:var(--axp-soft); line-height:1.6; margin-top:16px}
.axp-count-line{font-size:14px; margin-top:10px}
.axp-count-line b{color:var(--axp-amber)}

.axp-ap-card{background:var(--axp-panel); border-radius:12px; padding:14px 16px; margin-top:12px;
  opacity:0; transform:translateY(6px); transition:opacity .35s ease, transform .35s ease}
.axp-ap-card.show{opacity:1; transform:none}
.axp-ap-h{display:flex; justify-content:space-between; align-items:baseline}
.axp-ap-h .name{font-size:16px; font-weight:600}
.axp-ap-badge{background:rgba(255,255,255,.08); color:var(--axp-soft); font-size:11.5px;
  padding:3px 10px; border-radius:999px}
.axp-ap-meta{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--axp-soft); margin-top:6px}

.axp-mem-card{border:1px solid; border-radius:12px; padding:14px 16px; margin-top:12px}
.axp-mem-card.worked{border-color:rgba(34,197,94,.4)}
.axp-mem-card.failed{border-color:rgba(234,179,8,.4)}
.axp-mem-badge{font-size:12px; font-weight:700; padding:3px 12px; border-radius:6px; display:inline-block}
.axp-mem-card.worked .axp-mem-badge{background:rgba(34,197,94,.15); color:var(--axp-green)}
.axp-mem-card.failed .axp-mem-badge{background:rgba(234,179,8,.15); color:var(--axp-amber)}
.axp-mem-conf{font-size:12.5px; color:var(--axp-soft); margin-left:8px}
.axp-mem-name{font-family:"IBM Plex Mono",monospace; font-size:14px; margin-top:10px}

.axp-verified{background:rgba(34,197,94,.12); border-radius:10px; padding:12px 14px; margin-top:14px;
  color:var(--axp-green); font-size:13.5px; display:flex; align-items:center; gap:8px}
.axp-signed{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--axp-soft); margin-top:12px}
.axp-audit-card{background:var(--axp-panel); border-radius:12px; padding:14px 16px; margin-top:12px}
.axp-audit-tag{font-size:11px; letter-spacing:.06em; color:var(--axp-soft)}
.axp-audit-num{color:var(--axp-dim); font-family:"IBM Plex Mono",monospace}
.axp-audit-body{font-size:14.5px; margin-top:6px}
.axp-audit-hash{font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--axp-dim); margin-top:6px}

.axp-input-row{display:flex; gap:10px; margin-top:16px}
.axp-input{flex:1; background:var(--axp-panel2); border:1px solid var(--axp-line); border-radius:10px;
  padding:12px 14px; color:var(--axp-text); font-family:inherit; font-size:14px}
.axp-btn-pill{border:none; border-radius:999px; padding:12px 20px; font-family:inherit; font-weight:600;
  font-size:14px; cursor:pointer; white-space:nowrap}
.axp-btn-pill.blue{background:var(--axp-blue); color:#fff}
.axp-btn-pill.amber{background:var(--axp-amber); color:#1a1400}
.axp-btn-pill:disabled{opacity:.4; cursor:not-allowed}

.axp-console-banner{font-family:"IBM Plex Mono",monospace; font-size:11px; line-height:1.5;
  color:var(--axp-soft); white-space:pre-wrap; margin-top:10px}
.axp-prompt-row{display:flex; align-items:center; gap:10px; background:var(--axp-panel2);
  border:1px solid var(--axp-line); border-radius:10px; padding:12px 14px; margin-top:16px;
  font-family:"IBM Plex Mono",monospace; font-size:14px}
.axp-console-out{font-family:"IBM Plex Mono",monospace; font-size:12px; line-height:1.7;
  margin-top:12px; min-height:70px}
.axp-console-out .in{color:var(--axp-blue)}
.axp-console-out .ok{color:var(--axp-green)}

.axp-modtab-h{display:flex; gap:10px; margin-top:4px}
.axp-result{background:var(--axp-panel); border-radius:10px; padding:12px 14px; margin-top:10px;
  opacity:0; transform:translateY(6px); transition:opacity .3s ease, transform .3s ease}
.axp-result.show{opacity:1; transform:none}
.axp-result .path{font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--axp-text)}
.axp-result .kind{font-size:11px; color:var(--axp-soft); margin-top:3px}

.axp-session-card, .axp-job-card{background:var(--axp-panel); border-radius:12px; padding:14px 16px;
  margin-top:14px}
.axp-session-h{display:flex; justify-content:space-between; align-items:center}
.axp-session-type{background:rgba(34,197,94,.15); color:var(--axp-green); font-size:11px;
  padding:3px 10px; border-radius:999px}
.axp-session-meta{font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--axp-soft);
  margin-top:8px; line-height:1.7}

.axp-fab{position:absolute; right:20px; bottom:96px; width:52px; height:52px; border-radius:16px;
  background:linear-gradient(135deg, var(--axp-blue), var(--axp-purple)); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:20px; box-shadow:0 8px 20px -6px rgba(59,130,246,.6);
  z-index:5}
.axp-bottomnav{display:flex; border-top:1px solid var(--axp-line); background:var(--axp-panel2)}
.axp-navbtn{flex:1; background:none; border:none; font-family:inherit; color:var(--axp-dim);
  padding:12px 4px 14px; font-size:11.5px; cursor:pointer}
.axp-navbtn.active{color:var(--axp-blue)}

.axp-copilot{position:absolute; inset:0; background:var(--axp-bg); transform:translateY(100%);
  transition:transform .35s ease; z-index:6; display:flex; flex-direction:column}
.axp-copilot.open{transform:translateY(0)}
.axp-copilot-h{display:flex; align-items:center; gap:10px; padding:16px 18px; border-bottom:1px solid var(--axp-line)}
.axp-copilot-h .back{color:var(--axp-blue); cursor:pointer; font-size:20px; background:none; border:none}
.axp-copilot-h .title{font-size:17px; font-weight:600; flex:1}
.axp-copilot-h .badge{background:rgba(234,179,8,.15); color:var(--axp-amber); font-size:11px;
  padding:3px 10px; border-radius:999px}
.axp-copilot-h .modelinfo{font-size:11.5px; color:var(--axp-soft); position:absolute; left:18px; top:52px}
.axp-copilot-body{flex:1; overflow-y:auto; padding:16px 18px}
.axp-cp-msg{background:var(--axp-blue); color:#fff; border-radius:14px 14px 4px 14px; padding:12px 16px;
  font-size:14.5px; align-self:flex-end; margin-left:auto; max-width:80%}
.axp-plan-card{background:var(--axp-panel); border-radius:14px; padding:16px; margin-top:14px}
.axp-plan-h{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--axp-soft);
  margin-bottom:10px}
.axp-plan-step{display:flex; gap:10px; align-items:flex-start; padding:9px 0; border-bottom:1px solid var(--axp-line)}
.axp-plan-step:last-child{border-bottom:none}
.axp-plan-step .num{font-family:"IBM Plex Mono",monospace; color:var(--axp-dim); font-size:12px; flex:none; width:16px}
.axp-plan-step .plan-mid{flex:1; min-width:0}
.axp-plan-step .mod{font-family:"IBM Plex Mono",monospace; font-size:12.5px; word-break:break-all}
.axp-plan-step .why{font-size:11.5px; color:var(--axp-soft); margin-top:3px}
.axp-scope-ok{color:var(--axp-green); font-size:10.5px; font-weight:700; flex:none; text-align:right; white-space:nowrap}
.axp-gate-row{display:flex; gap:10px; margin-top:16px}
.axp-gate-btn{flex:1; border:none; border-radius:10px; padding:12px; font-family:inherit;
  font-weight:600; font-size:14px; cursor:pointer}
.axp-gate-btn.approve{background:var(--axp-green); color:#04150a}
.axp-gate-btn.decline{background:var(--axp-panel2); color:var(--axp-soft); border:1px solid var(--axp-line)}
.axp-exec-log{font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--axp-green);
  margin-top:14px; line-height:1.7}

@media(max-width:460px){
  .axp-phone{border-radius:18px}
  .axp-screen{height:520px}
}

/* ---------- Home page portfolio graph: the whole company as one system.
   Every node and edge is a real, documented fact (axonscanner audits the
   others' codebases; AGIOS's harness patterns feed Axonsploit; AXONQUAKE
   is built on AXONREL; CivicNepal runs on AXONREL's infrastructure) --
   not a decorative diagram. Reuses the same dark-panel palette as every
   product page's centerpiece, so the whole site reads as one system. ---------- */
.hub-section{position:relative}
.hub-wrap{position:relative; margin-top:34px; border-radius:18px; overflow:hidden;
  border:1px solid rgba(148,178,214,.14); background:#05070c; box-shadow:var(--shadow)}
.hub-wrap::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 55% at 50% 42%, rgba(95,180,232,.10), transparent 70%),
    repeating-linear-gradient(0deg, rgba(148,178,214,.05) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(90deg, rgba(148,178,214,.05) 0 1px, transparent 1px 42px)}
.hub-hud{position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:8px; padding:16px 22px; font-family:"IBM Plex Mono",monospace; font-size:11px;
  color:#7C8798; border-bottom:1px solid rgba(148,178,214,.14)}
.hub-hud b{color:#D6DDE8; font-weight:600}
.hub-hud .live{display:inline-flex; align-items:center; gap:6px; color:#3EDB94}
.hub-hud .live i{width:6px; height:6px; border-radius:50%; background:#3EDB94; display:inline-block}
@media (prefers-reduced-motion: no-preference){.hub-hud .live i{animation:hub-blink 2s infinite}}
@keyframes hub-blink{0%,100%{opacity:.4} 50%{opacity:1}}
.hub-stage{position:relative; height:520px}
.hub-stage canvas{position:absolute; inset:0; width:100%; height:100%; display:block; cursor:pointer}
.hub-tooltip{position:absolute; z-index:4; display:none; max-width:220px; pointer-events:none;
  background:rgba(8,12,20,.95); border:1px solid rgba(148,178,214,.28); border-radius:8px;
  padding:9px 12px; font-family:"IBM Plex Mono",monospace; font-size:11px; color:#B8C4D4;
  line-height:1.5}
.hub-tooltip b{color:#E6EDF7}

.hub-card{position:absolute; z-index:3; right:20px; bottom:20px; left:20px; max-width:380px;
  margin-left:auto; background:rgba(9,13,21,.92); border:1px solid rgba(148,178,214,.22);
  border-radius:14px; padding:20px 22px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transform:translateY(14px); opacity:0; pointer-events:none; transition:transform .3s ease, opacity .3s ease}
.hub-card.show{transform:translateY(0); opacity:1; pointer-events:auto}
.hub-card .top{display:flex; justify-content:space-between; align-items:flex-start; gap:10px}
.hub-card .name{font-family:"Archivo",sans-serif; font-weight:800; font-size:1.2rem; color:#F2F5FA}
.hub-card .close{background:none; border:none; color:#7C8798; font-size:18px; cursor:pointer; padding:0; line-height:1}
.hub-card .status{display:inline-block; margin-top:8px; font-family:"IBM Plex Mono",monospace;
  font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:3px 10px;
  border-radius:999px}
.hub-card .fact{margin-top:12px; font-size:13px; line-height:1.6; color:#AEB9C9}
.hub-card a.hub-link{display:inline-flex; align-items:center; gap:6px; margin-top:14px; font-size:12.5px;
  font-weight:600; color:#5FB4E8; text-decoration:none}
.hub-caption{margin-top:14px; text-align:center; font-size:.83rem; color:var(--ink-soft); line-height:1.5}
.hub-caption b{color:var(--ink); font-weight:600}

@media(max-width:700px){
  .hub-stage{height:440px}
  .hub-card{position:static; margin-top:14px; max-width:none; transform:none; opacity:1; pointer-events:auto;
    display:none}
  .hub-card.show{display:block}
}