/* Shared stylesheet for the application pages (platform, operations,
   security, carbon, agents). The homepage keeps its own inline <style>;
   tokens and the nav/footer rules below are deliberately kept identical
   to it, so a change to either must be made in both places. */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#ffffff;
  --fg:#111111;
  --w:980px;
  --wide:1140px;
  --line:#dddddd;
  --role:#777777;
  --arrow:#aaaaaa;
  --muted:#666666;
  --faint:#999999;
  --border:#e5e5e5;
  --border-light:#f0f0f0;
  --wash:#fafafa;
  --green:#2e7d55;
  --acc-ops:#2f6db3;
  --acc-sec:#bd6a1c;
  --acc-car:#2e7d55;
  --acc-agt:#5d4fa3;
  --acc:var(--fg);
  --tint:#f5f5f5;
}
body.p-ops{--acc:var(--acc-ops);--tint:#f2f6fb}
body.p-sec{--acc:var(--acc-sec);--tint:#fcf6ef}
body.p-car{--acc:var(--acc-car);--tint:#f1f7f4}
body.p-agt{--acc:var(--acc-agt);--tint:#f5f3fa}

html{scroll-behavior:smooth;scroll-padding-top:78px}
body{background:var(--bg);color:var(--fg);font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
.wrap{max-width:var(--w);margin:0 auto;padding:0 48px}
.wrap-wide{max-width:var(--wide);margin:0 auto;padding:0 48px}

/* ---------- nav (mirrors index.html) ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:12px 48px;display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,0.95);backdrop-filter:blur(12px);border-bottom:1px solid var(--border-light)}
.logo{display:flex;align-items:center;font-size:15px;font-weight:700;letter-spacing:-0.3px;color:var(--fg);text-decoration:none}
.nav-toggle{display:none;background:none;border:none;color:var(--fg);cursor:pointer;padding:4px}
.nav-r{display:flex;align-items:center;gap:24px}
.nav-r a{color:var(--muted);text-decoration:none;font-size:13px;font-weight:500;transition:color 0.2s}
.nav-r a:hover{color:var(--fg)}
.nav-btn{background:var(--fg);color:var(--bg)!important;padding:9px 18px;border-radius:6px;font-weight:600!important}
.nav-btn:hover{opacity:.85;color:var(--bg)!important}
.nav-r a.here{color:var(--fg);font-weight:600;position:relative}
.nav-r a.here::after{content:"";position:absolute;left:0;right:0;bottom:-17px;height:2px;background:var(--acc)}

/* ---------- type ---------- */
h1,h2,h3{font-weight:400}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--acc);font-weight:600}
.eyebrow::before{content:"";width:18px;height:2px;background:var(--acc)}
.page-h1{font-family:'DM Serif Display',serif;font-size:clamp(36px,5.4vw,60px);line-height:1.01;letter-spacing:-2px;max-width:14em;margin:18px 0 24px}
.sec-h2{font-family:'DM Serif Display',serif;font-size:clamp(28px,3.4vw,40px);line-height:1.06;letter-spacing:-1.4px;max-width:19em;margin:14px 0 18px}
.lead{font-size:17px;line-height:1.68;color:var(--muted);max-width:42em}
.section{padding:78px 0}
.section+.section{border-top:1px solid var(--border-light)}
.section-tight{padding:0 0 74px}
.section-tight+.cta{border-top:1px solid var(--border-light)}
.section.wash{background:var(--wash);border-top:1px solid var(--border-light);border-bottom:1px solid var(--border-light)}
.head{margin-bottom:34px}

/* ---------- hero ---------- */
.page-hero{padding:132px 0 60px;background:linear-gradient(var(--tint),var(--bg));border-bottom:1px solid var(--border-light);position:relative}
.page-hero::after{content:"";position:absolute;left:0;bottom:-1px;width:132px;height:2px;background:var(--acc)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.btn{display:inline-block;padding:13px 28px;border-radius:6px;font-size:14px;font-weight:600;text-decoration:none;transition:opacity .2s,border-color .2s,background .2s}
.btn-a{background:var(--fg);color:var(--bg)}
.btn-a:hover{opacity:.85}
.btn-b{border:1px solid var(--border);color:var(--fg)}
.btn-b:hover{border-color:var(--fg);background:var(--bg)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.chip{border:1px solid var(--border);background:rgba(255,255,255,.6);padding:7px 12px;border-radius:999px;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:1.2px;color:var(--muted)}

/* ---------- cards ---------- */
.grid4,.grid3,.grid2{display:grid;gap:16px}
.grid4{grid-template-columns:repeat(4,1fr)}
.grid3{grid-template-columns:repeat(3,1fr)}
.grid2{grid-template-columns:repeat(2,1fr)}
.card{border:1px solid var(--border);border-radius:10px;padding:24px;background:var(--bg);transition:border-color .2s,box-shadow .2s}
.card:hover{border-color:var(--line);box-shadow:0 1px 3px rgba(0,0,0,.04)}
.card .n{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;letter-spacing:1.4px;color:var(--acc);text-transform:uppercase}
.card h3{font-size:16px;font-weight:700;letter-spacing:-0.3px;margin:11px 0 9px}
.card p{font-size:13.5px;line-height:1.62;color:var(--muted)}
.card.mark{border-top:2px solid var(--acc)}
.card.tall{padding:28px}

/* ---------- horizontal flow ---------- */
.flow{border:1px solid var(--border);border-radius:12px;padding:28px}
.flowrow{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.node{padding:11px 14px;border:1px solid var(--border);border-radius:7px;font-family:'JetBrains Mono',monospace;font-size:11.5px;background:var(--bg);color:var(--muted)}
.node.hot{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.arw{color:var(--arrow);font-size:14px}

/* ---------- vertical lineage pipeline ---------- */
.pipe{list-style:none;position:relative;padding-left:30px}
.pipe::before{content:"";position:absolute;left:5px;top:9px;bottom:9px;width:1px;background:var(--border)}
.pipe li{position:relative;padding:11px 0;display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:baseline}
.pipe li::before{content:"";position:absolute;left:-30px;top:17px;width:11px;height:11px;border-radius:50%;background:var(--bg);border:1px solid var(--line)}
.pipe li.on::before{background:var(--acc);border-color:var(--acc)}
.pipe .pk{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--faint)}
.pipe li.on .pk{color:var(--acc)}
.pipe .pv{font-size:14.5px;line-height:1.5}
.pipe .pv small{display:block;font-size:12.5px;color:var(--muted);margin-top:3px}

/* ---------- versus pair ---------- */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.vs>div{padding:28px}
.vs>div+div{border-left:1px solid var(--border);background:var(--wash);border-top:2px solid var(--acc)}
.vs .k{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:1.8px;text-transform:uppercase;color:var(--faint)}
.vs>div+div .k{color:var(--acc)}
.vs h3{font-size:19px;font-weight:700;letter-spacing:-0.4px;margin:12px 0 10px;line-height:1.3}
.vs p{font-size:14px;line-height:1.65;color:var(--muted)}

/* ---------- pull quote ---------- */
.quote{border-left:2px solid var(--acc);padding:4px 0 4px 24px;font-size:20px;line-height:1.45;letter-spacing:-0.4px;max-width:800px;font-weight:500}

/* ---------- dark demo panel ---------- */
.demo{background:#0d0d0d;color:#fff;border-radius:14px;overflow:hidden}
.demo small{color:#8a8a8a;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:1.6px;text-transform:uppercase;display:block}
.demo-grid{display:grid;grid-template-columns:1.15fr 0.85fr;gap:18px}
.panel{border:1px solid #262626;border-radius:10px;padding:22px;background:#141414}
.panel p{font-size:13.5px;line-height:1.95;color:#d4d4d4}
.metric{font-size:30px;font-weight:600;letter-spacing:-0.9px;margin:8px 0 4px}
.muted{color:#8a8a8a}
.on{color:var(--acc)}
.bar{height:5px;background:#262626;border-radius:3px;margin:13px 0;overflow:hidden}
.bar i{display:block;height:100%;background:var(--acc)}
.source{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:1.4px;color:#6e6e6e;text-transform:uppercase;margin-top:12px}

/* ---------- agent chain ---------- */
.chain{display:flex;flex-wrap:wrap;gap:0 9px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);line-height:2.1}
.chain .arw{color:var(--arrow)}
.chainv{list-style:none;position:relative;padding-left:56px}
.chainv::before{content:"";position:absolute;left:17px;top:22px;bottom:22px;width:1px;background:var(--border)}
.chainv>li{position:relative;padding-bottom:20px}
.chainv>li::before{content:attr(data-n);position:absolute;left:-56px;top:0;width:35px;height:35px;border-radius:50%;border:1px solid var(--border);background:var(--bg);color:var(--acc);font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center}
.stage{border:1px solid var(--border);border-radius:10px;padding:22px 24px;background:var(--bg)}
.stage .k{font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:600;letter-spacing:1.6px;color:var(--acc);text-transform:uppercase}
.stage h3{font-size:17px;font-weight:700;letter-spacing:-0.35px;margin:9px 0 11px}
.stage p{font-size:14px;line-height:1.62;color:var(--muted)}
.stage p+p{margin-top:8px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin-top:15px;font-size:13px}
.kv dt{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--faint);padding-top:3px}
.kv dd{color:var(--muted)}
.pill{display:inline-block;margin-top:15px;border:1px solid var(--acc);color:var(--acc);border-radius:999px;padding:5px 13px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:1.2px;text-transform:uppercase}
.tl{display:grid;grid-template-columns:70px 1fr 78px;align-items:center;gap:12px;margin-top:10px;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--faint)}
.tl .bar{background:var(--border-light);margin:0}
.steps{display:flex;flex-direction:column;gap:10px;margin-top:15px}
.step{display:grid;grid-template-columns:auto 1fr;gap:14px;font-size:13.5px;line-height:1.5}
.step b{font-weight:600;white-space:nowrap}
.step span{color:var(--muted)}

/* ---------- cta ---------- */
.cta{padding:88px 0;text-align:center;border-top:1px solid var(--border-light);background:var(--wash)}
.cta .sec-h2{max-width:740px;margin:0 auto 14px}
.cta p{color:var(--muted);font-size:15px;line-height:1.7;max-width:560px;margin:0 auto}
.cta-btn{display:inline-block;margin-top:24px;padding:14px 34px;border-radius:6px;background:var(--fg);color:var(--bg);font-size:14px;font-weight:600;text-decoration:none;transition:opacity .2s}
.cta-btn:hover{opacity:.85}
.cta .btn{margin-top:24px}

/* ---------- sibling pages ---------- */
.siblings{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.sib{border:1px solid var(--border);border-radius:9px;padding:18px;text-decoration:none;border-top:2px solid var(--sa);transition:background .2s}
.sib:hover{background:var(--wash)}
.sib .n{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--sa)}
.sib .t{font-size:15px;font-weight:700;letter-spacing:-0.3px;margin-top:7px;display:flex;align-items:center}
.sib .t::after{content:"\2192";margin-left:auto;color:var(--sa);opacity:.45;transition:opacity .2s,transform .2s}
.sib:hover .t::after{opacity:1;transform:translateX(3px)}
.sib .d{font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:6px}
.sib.s-ops{--sa:var(--acc-ops)}
.sib.s-sec{--sa:var(--acc-sec)}
.sib.s-car{--sa:var(--acc-car)}
.sib.s-agt{--sa:var(--acc-agt)}
.sib.s-pla{--sa:var(--fg)}

/* ---------- footer (mirrors index.html) ---------- */
footer{border-top:1px solid var(--border-light);padding:56px 48px 28px}
.ft{max-width:var(--w);margin:0 auto}
.ft-cols{display:grid;grid-template-columns:1.7fr 1fr 1.1fr 1fr;gap:40px}
.ft-brand{display:flex;align-items:center;font-size:13px;font-weight:700;color:inherit;text-decoration:none}
.ft-tag{margin-top:10px;font-size:14px;color:var(--muted);line-height:1.65;max-width:250px}
.ft-h{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--faint);margin-bottom:14px}
.ft-col a{display:block;color:var(--muted);text-decoration:none;font-size:14px;line-height:2;transition:color 0.2s}
.ft-col a:hover{color:var(--fg)}
.ft-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:44px;padding-top:20px;border-top:1px solid var(--border-light);font-size:12px;color:var(--faint)}

@media(max-width:1080px){
  .nav-r{gap:18px}
  .nav-r a{font-size:12.5px}
  .grid4,.siblings{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  nav{padding:14px 20px}
  .nav-toggle{display:block}
  .nav-r{display:none;position:absolute;top:100%;left:0;right:0;background:rgba(255,255,255,0.98);flex-direction:column;align-items:flex-start;padding:20px;gap:16px;border-bottom:1px solid var(--border-light)}
  .nav-r.nav-open{display:flex}
  .nav-r a.here::after{display:none}
  .wrap,.wrap-wide{padding:0 20px}
  .page-hero{padding:104px 0 44px}
  .section{padding:52px 0}
  .grid4,.grid3,.grid2,.demo-grid,.siblings,.vs{grid-template-columns:1fr}
  .vs>div+div{border-left:none;border-top:2px solid var(--acc);margin-top:0}
  .flow,.demo{padding:20px}
  .pipe li{grid-template-columns:1fr;gap:4px}
  .chainv{padding-left:0}
  .chainv::before{display:none}
  .chainv>li::before{position:static;margin-bottom:10px}
  .cta{padding:60px 0}
  footer{padding:44px 20px 24px}
  .ft-cols{grid-template-columns:1fr 1fr;gap:28px}
  .ft-bottom{flex-direction:column;align-items:flex-start;gap:6px}
  .tl{grid-template-columns:60px 1fr 68px}
}

/* ---------- agent console (the page's focal moment) ---------- */
.console{background:#0b0b0b;color:#fff;border:1px solid #1f1f1f;border-radius:16px;overflow:hidden;box-shadow:0 24px 60px -30px rgba(0,0,0,.5)}
.con-top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 26px;border-bottom:1px solid #1c1c1c;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:1.7px;text-transform:uppercase;color:#7a7a7a}
.con-top .live{display:inline-flex;align-items:center;gap:8px}
.con-top .live i{width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 3px rgba(255,255,255,.07)}
.con-ask{padding:28px 26px;border-bottom:1px solid #1c1c1c}
.con-k{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:1.7px;text-transform:uppercase;color:var(--acc);font-weight:600}
.con-q{font-family:'DM Serif Display',serif;font-size:clamp(21px,2.4vw,28px);line-height:1.3;letter-spacing:-0.7px;margin-top:12px;max-width:24em}
.con-body{display:grid;grid-template-columns:0.82fr 1.18fr}
.con-ev{padding:26px;border-right:1px solid #1c1c1c}
.con-ans{padding:26px}
.evl{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:13px}
.evl li{display:grid;grid-template-columns:82px 1fr;gap:14px;align-items:baseline;font-size:12.5px}
.evl b{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:1.4px;text-transform:uppercase;color:#6e6e6e;font-weight:500}
.evl span{color:#c9c9c9;line-height:1.5}
.con-ans p{font-size:14.5px;line-height:1.7;color:#d6d6d6;margin-top:14px}
.con-ans p strong{color:#fff;font-weight:600}
.con-split{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;margin-top:22px;padding-top:20px;border-top:1px solid #1c1c1c}
.con-big{font-size:42px;font-weight:700;letter-spacing:-1.8px;color:var(--acc);line-height:1}
.con-big small{display:block;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:#6e6e6e;font-weight:500;margin-top:7px}
.con-rec{margin-top:22px;padding-top:20px;border-top:1px solid #1c1c1c}
.con-rec .con-h{font-size:17px;font-weight:700;letter-spacing:-0.4px;margin-top:11px;color:#fff}
.con-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}
.con-tag{border:1px solid #2c2c2c;border-radius:999px;padding:5px 12px;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:1.3px;text-transform:uppercase;color:#9a9a9a}
.con-tag.go{border-color:var(--acc);color:var(--acc)}
@media(max-width:768px){
  .con-body{grid-template-columns:1fr}
  .con-ev{border-right:none;border-bottom:1px solid #1c1c1c}
  .con-split{grid-template-columns:1fr;gap:14px}
}

/* ---------- motion ----------
   Nothing here hides content on its own. .is-hidden is applied by main.js
   only to blocks already below the fold, and only after the script has run.
   Without JS, or with reduced motion, every element renders as normal. */
@media (prefers-reduced-motion: no-preference){
  .is-hidden{opacity:0;transform:translateY(18px)}
  .is-in{opacity:1;transform:none;
    transition:opacity .72s cubic-bezier(.16,1,.3,1),transform .72s cubic-bezier(.16,1,.3,1)}

  .is-hidden .bar i{transform:scaleX(0)}
  .bar i{transform-origin:left;transition:transform 1.15s cubic-bezier(.16,1,.3,1) .18s}

  .is-hidden .eyebrow::before{width:0}
  .eyebrow::before{transition:width .6s cubic-bezier(.16,1,.3,1) .12s}


  .page-hero .eyebrow,
  .page-hero .page-h1,
  .page-hero .lead,
  .page-hero .chips,
  .page-hero .hero-actions{animation:vg-rise .78s cubic-bezier(.16,1,.3,1) both}
  .page-hero .page-h1{animation-delay:.07s}
  .page-hero .lead{animation-delay:.14s}
  .page-hero .chips{animation-delay:.21s}
  .page-hero .hero-actions{animation-delay:.28s}

  .con-top .live i{animation:vg-pulse 2.6s ease-in-out infinite}

  .card,.app,.sib{transition:border-color .2s,box-shadow .2s,background .2s,transform .2s}
  .card:hover,.app:hover,.sib:hover{transform:translateY(-2px)}
}

@keyframes vg-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes vg-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.20)}
  55%{box-shadow:0 0 0 6px rgba(255,255,255,0)}
}

/* ---------- asset hub: one asset, every application ---------- */
.hub{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.hub-cell{border:1px solid var(--border);border-radius:9px;padding:16px 18px;background:var(--bg)}
.hub-cell .hk{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--faint)}
.hub-cell .hn{font-size:14.5px;font-weight:600;letter-spacing:-0.2px;margin-top:5px}
.hub-cell .hd{font-size:12px;color:var(--muted);line-height:1.5;margin-top:4px}
.c-app{border-top:2px solid var(--ha)}
.c-app .hk,.c-app .hn{color:var(--ha)}
.c-app .hn{font-weight:700}
.h-ops{--ha:var(--acc-ops)}
.h-sec{--ha:var(--acc-sec)}
.h-car{--ha:var(--acc-car)}
.h-agt{--ha:var(--acc-agt)}
.c-ctx{background:var(--wash);border-style:dashed}
.hub-core{position:relative;border:1px solid var(--fg);border-radius:9px;background:var(--fg);color:#fff;padding:20px 18px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.hub-core .hk{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:1.6px;text-transform:uppercase;color:#8a8a8a}
.hub-core strong{font-family:'JetBrains Mono',monospace;font-size:19px;font-weight:600;letter-spacing:1px;margin:6px 0 4px}
.hub-core span{font-size:12px;color:#9a9a9a}
.hub-core i{position:absolute;background:var(--line);display:block}
.hub-core i.up{left:50%;top:-18px;width:1px;height:18px;transform-origin:bottom}
.hub-core i.dn{left:50%;bottom:-18px;width:1px;height:18px;transform-origin:top}
.hub-core i.lf{top:50%;left:-18px;height:1px;width:18px;transform-origin:right}
.hub-core i.rt{top:50%;right:-18px;height:1px;width:18px;transform-origin:left}
.hub-note{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--faint);text-align:center;margin-top:20px}

/* ---------- three-layer architecture ---------- */
.tri{border:1px solid var(--border);border-radius:14px;padding:28px;background:var(--bg)}
.tri-l{border:1px solid var(--border);border-radius:10px;padding:18px 22px;text-align:center}
.tri-l.top{border-top:2px solid var(--fg)}
.tri-l.mid{background:var(--wash)}
.tri-l.bot{border-color:var(--fg);background:var(--wash)}
.tri-k{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:1.8px;text-transform:uppercase;color:var(--faint);font-weight:600}
.tri-v{display:flex;flex-wrap:wrap;justify-content:center;gap:0 12px;margin-top:9px;font-size:14px;line-height:1.8;color:var(--muted)}
.tri-v b{color:var(--fg);font-weight:600}
.tri-v a{text-decoration:none;border-bottom:1px solid var(--border);transition:border-color .2s}
.tri-v a:hover{border-color:var(--fg)}
.tri-v .sep{color:var(--border)}
.tri-a{text-align:center;color:var(--arrow);font-size:16px;margin:12px 0}

@media(max-width:768px){
  .hub{grid-template-columns:1fr}
  .hub-core i{display:none}
  .tri{padding:18px}
}

/* ---------- asset hub motion: spokes draw out from the asset, then the
   surrounding cells arrive. Hidden states scoped to .is-hidden as always. --- */
@media (prefers-reduced-motion: no-preference){
  .hub.is-hidden{opacity:1;transform:none}
  .hub.is-hidden .hub-cell{opacity:0;transform:translateY(10px)}
  .hub.is-hidden .hub-core i{transform:scale(0)}

  .hub.is-in .hub-core i.up{animation:j-down .3s ease .30s both}
  .hub.is-in .hub-core i.dn{animation:j-down .3s ease .38s both}
  .hub.is-in .hub-core i.lf{animation:j-wide .3s ease .46s both}
  .hub.is-in .hub-core i.rt{animation:j-wide .3s ease .54s both}
  .hub.is-in .hub-cell{animation:j-rise .5s cubic-bezier(.16,1,.3,1) both}
  .hub.is-in .hub-cell:nth-child(2){animation-delay:.62s}
  .hub.is-in .hub-cell:nth-child(4){animation-delay:.70s}
  .hub.is-in .hub-cell:nth-child(6){animation-delay:.78s}
  .hub.is-in .hub-cell:nth-child(8){animation-delay:.86s}
  .hub.is-in .hub-cell:nth-child(1){animation-delay:.98s}
  .hub.is-in .hub-cell:nth-child(3){animation-delay:1.04s}
  .hub.is-in .hub-cell:nth-child(7){animation-delay:1.10s}
  .hub.is-in .hub-cell:nth-child(9){animation-delay:1.16s}

  .tri.is-hidden{opacity:1;transform:none}
  .tri.is-hidden .tri-l{opacity:0;transform:translateY(10px)}
  .tri.is-hidden .tri-a{opacity:0}
  .tri.is-in .tri-l.bot{animation:j-rise .5s cubic-bezier(.16,1,.3,1) .16s both}
  .tri.is-in .tri-a:nth-of-type(2){animation:j-fade .4s ease .60s both}
  .tri.is-in .tri-l.mid{animation:j-rise .5s cubic-bezier(.16,1,.3,1) .72s both}
  .tri.is-in .tri-a:nth-of-type(1){animation:j-fade .4s ease 1.10s both}
  .tri.is-in .tri-l.top{animation:j-rise .5s cubic-bezier(.16,1,.3,1) 1.22s both}
}
@keyframes j-rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes j-down{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes j-wide{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes j-fade{from{opacity:0}to{opacity:1}}

/* ---------- live correlation panel (moved from the homepage) ---------- */
.corr{max-width:820px;margin:0 auto;text-align:left;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.corr-bar{display:flex;align-items:center;gap:16px;background:var(--fg);color:#fff;padding:11px 18px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:1.6px;text-transform:uppercase}
.corr-live{display:inline-flex;align-items:center;gap:7px;color:#8fbf8f}
.corr-live i{width:6px;height:6px;border-radius:50%;background:#5fbf7f}
.corr-id{color:#fff;font-weight:600;letter-spacing:2px}
.corr-t{margin-left:auto;color:#9a9a9a;font-variant-numeric:tabular-nums}
.corr-body{display:grid;grid-template-columns:1fr 1fr}
.corr-col{padding:20px 22px 22px}
.corr-col+.corr-col{border-left:1px solid var(--border)}
.c-ot{--ja:var(--acc-ops)}
.c-net{--ja:var(--acc-sec)}
.corr-h{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:1.8px;text-transform:uppercase;color:var(--ja,var(--faint));font-weight:600;padding-bottom:11px;margin-bottom:14px;border-bottom:1px solid var(--ja)}
.corr-r{display:grid;grid-template-columns:62px 1fr;gap:14px;padding:6px 0;align-items:baseline}
.corr-r dt{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--faint)}
.corr-r dd{font-size:13.5px;line-height:1.45;color:var(--fg);font-variant-numeric:tabular-nums}
.spark{display:inline-flex;align-items:flex-end;gap:2px;height:12px;margin-left:6px;vertical-align:-1px}
.spark i{width:3px;background:var(--ja);opacity:.55;transition:height .55s cubic-bezier(.16,1,.3,1)}
.corr-out{border-top:1px solid var(--border);background:#fafafa;padding:20px 22px 22px;position:relative}
.corr-out .corr-h{color:var(--fg);border-bottom:none;padding-bottom:0;margin-bottom:10px}
.corr-out::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:100%;background:linear-gradient(90deg,var(--acc-ops),var(--acc-sec));transform-origin:left}
.corr-stat{font-size:18px;font-weight:600;letter-spacing:-0.35px;line-height:1.4;max-width:34em}
.corr-sub{font-size:13px;color:var(--muted);line-height:1.6;max-width:44em;margin-top:9px}
.c-ot{--ja:var(--acc-ops)}
.c-net{--ja:var(--acc-sec)}
@media (prefers-reduced-motion: no-preference){
.corr.is-hidden{opacity:1;transform:none}
  .corr.is-hidden .corr-r,
  .corr.is-hidden .corr-h,
  .corr.is-hidden .corr-stat,
  .corr.is-hidden .corr-sub{opacity:0}
  .corr.is-hidden .corr-out::before{transform:scaleX(0)}

  .corr.is-in .corr-h{animation:j-rise .45s cubic-bezier(.16,1,.3,1) .18s both}
  .corr.is-in .corr-r:nth-child(1){animation:j-rise .45s cubic-bezier(.16,1,.3,1) .34s both}
  .corr.is-in .corr-r:nth-child(2){animation:j-rise .45s cubic-bezier(.16,1,.3,1) .44s both}
  .corr.is-in .corr-r:nth-child(3){animation:j-rise .45s cubic-bezier(.16,1,.3,1) .54s both}
  .corr.is-in .corr-r:nth-child(4){animation:j-rise .45s cubic-bezier(.16,1,.3,1) .64s both}
  .corr.is-in .corr-out::before{animation:j-wide .55s cubic-bezier(.16,1,.3,1) .92s both}
  .corr.is-in .corr-out .corr-h{animation:j-rise .45s cubic-bezier(.16,1,.3,1) 1.06s both}
  .corr.is-in .corr-stat{animation:j-rise .5s cubic-bezier(.16,1,.3,1) 1.16s both}
  .corr.is-in .corr-sub{animation:j-rise .5s cubic-bezier(.16,1,.3,1) 1.30s both}

  .corr-live i{animation:j-pulse 1.9s ease-in-out infinite}
}