/* SCIKIQ company-page design system — extracted from the GMR reference page.
   Reusable for any company. EY/McKinsey light theme: charcoal ink, signature
   yellow, soft pastels. Do not hand-edit per company. */
/* ============================================================
   SCIKIQ × GMR — Enterprise Intelligence narrative.
   Standalone artifact. McKinsey-light aesthetic adapted to a
   GMR aviation palette (deep navy + GMR red + signal amber).
   ============================================================ */
:root{
  /* McKinsey / EY light system — white surfaces, deep ink, one confident
     accent, a sparing gold, restrained data hues. Legacy token names are
     remapped to the new palette so every component shifts at once. */
  /* EY-flavoured: charcoal ink, signature yellow "spark", soft pastel
     secondaries used sparingly for accent. */
  --navy:#1A1A24; --navy-2:#33333F; --navy-700:#2E2E38;
  --ink:#2E2E38; --ink-muted:#5F5F6B; --ink-subtle:#9A9AA5;
  --red:#C0392B; --red-700:#992D22; --red-50:#F8EAE8;
  --amber:#B8893B; --amber-50:#F6EFE2;
  --teal:#1F9D6B; --teal-50:#E6F4EE;
  --blue:#3F6FD6; --blue-50:#EAF0FB;
  --violet:#7E6BC4;
  --accent:#2E2E38; --accent-deep:#1A1A24; --gold:#B8893B;
  --spark:#FFE600; --spark-deep:#E6CE00; --spark-soft:#FFF7C2;
  --p-blue:#EAF0FB; --pa-blue:#3F6FD6;
  --p-mint:#E6F4EE; --pa-mint:#1F9D6B;
  --p-lilac:#EFEBF8; --pa-lilac:#7E6BC4;
  --p-peach:#FBEDE3; --pa-peach:#DE7B4E;
  --p-yellow:#FFF7C2; --pa-yellow:#B89A00;
  --surface:#FFFFFF; --surface-alt:#F6F6F4; --surface-muted:#FAFAF8;
  --border:#E7E7EA; --border-strong:#D4D4D9;
  --good:#16776A; --warn:#B8893B; --bad:#B23A2E;
  --shadow-sm:0 1px 2px rgba(11,27,43,.04);
  --shadow-md:0 6px 22px rgba(11,27,43,.07);
  --shadow-lg:0 20px 50px rgba(11,27,43,.10);
  --f:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--f);color:var(--ink);background:var(--surface-alt);
  -webkit-font-smoothing:antialiased;line-height:1.55;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 26px}
section{scroll-margin-top:78px}

/* ── Top nav ─────────────────────────────────────────────── */
.nav{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--border);
}
.nav-in{display:flex;align-items:center;gap:18px;height:60px;max-width:1180px;margin:0 auto;padding:0 26px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.02em;color:var(--navy)}
.brand .sq{width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,var(--red),var(--amber));
  display:grid;place-items:center;color:#fff;font-size:14px}
.brand small{font-weight:600;color:var(--ink-subtle);font-size:11px;letter-spacing:.04em}
.nav-links{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
.nav-links a{font-size:12.5px;font-weight:600;color:var(--ink-muted);padding:7px 11px;border-radius:8px}
.nav-links a:hover{background:var(--surface-alt);color:var(--navy)}
.nav-burger{display:none;margin-left:auto;width:40px;height:40px;border-radius:9px;place-items:center;font-size:23px;color:var(--navy);cursor:pointer;border:1px solid var(--border);background:var(--surface)}
.nav-burger:hover{background:var(--surface-alt)}
@media(max-width:820px){
  .nav-burger{display:grid}
  .nav-links{
    position:absolute;top:60px;left:0;right:0;margin-left:0;
    display:none;flex-direction:column;gap:2px;
    background:var(--surface);border-bottom:1px solid var(--border);
    box-shadow:var(--shadow-md);padding:8px 14px 14px;
    max-height:calc(100vh - 60px);overflow-y:auto
  }
  .nav-toggle-cb:checked ~ .nav-links{display:flex}
  .nav-links a{padding:12px 12px;font-size:14.5px;border-radius:8px}
  .nav-links a:not(:last-child){border-bottom:1px solid var(--border)}
}

/* ── Hero ────────────────────────────────────────────────── */
.hero{
  background:
    radial-gradient(1100px 460px at 85% -8%,rgba(245,166,35,.16),transparent 60%),
    radial-gradient(900px 420px at 8% 10%,rgba(226,35,26,.14),transparent 55%),
    linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 55%,#0c2854 100%);
  color:#fff;padding:64px 0 78px;position:relative;overflow:hidden;
}
.hero:after{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:46px 46px;mask-image:radial-gradient(900px 500px at 70% 0%,#000,transparent 75%);
  opacity:.5;pointer-events:none}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:#FFD9A0;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  padding:6px 13px;border-radius:999px;position:relative;z-index:1}
.hero h1{font-size:43px;line-height:1.08;letter-spacing:-.03em;font-weight:800;
  margin:20px 0 14px;max-width:880px;position:relative;z-index:1}
.hero h1 .grad{background:linear-gradient(90deg,#FFB454,#FF7A6E);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.hero p.lead{font-size:17px;line-height:1.6;color:#D6E0EE;max-width:760px;margin:0 0 12px;position:relative;z-index:1}
.hero .sub{font-size:14px;color:#9FB2CC;max-width:760px;position:relative;z-index:1}
.hero-chain{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:26px;position:relative;z-index:1}
.hero-chip{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:11px 15px;backdrop-filter:blur(4px)}
.hero-chip .n{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-size:11px;
  font-weight:800;background:linear-gradient(135deg,var(--red),var(--amber));color:#fff}
.hero-chip b{font-size:13.5px;font-weight:700}
.hero-chip span{display:block;font-size:11px;color:#9FB2CC;font-weight:500}
.hero-arrow{color:rgba(255,255,255,.4);font-size:16px}
@media(max-width:680px){.hero h1{font-size:32px}.hero-arrow{display:none}}

/* ── Value-add: the four questions ───────────────────────── */
.vsec{padding:54px 0 18px}
.sec-kick{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.sec-h{font-size:27px;font-weight:800;letter-spacing:-.02em;margin:8px 0 6px;color:var(--navy)}
.sec-p{font-size:14.5px;color:var(--ink-muted);max-width:740px;margin:0}
.qgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:30px}
@media(max-width:980px){.qgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.qgrid{grid-template-columns:1fr}}
.qcard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);
  border-radius:18px;padding:24px 20px 20px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.qcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--border-strong)}
.qcard:before{content:"";position:absolute;left:0;top:0;height:5px;width:100%;border-radius:18px 18px 0 0}
.qcard.q1:before{background:linear-gradient(90deg,var(--blue),var(--teal))}
.qcard.q2:before{background:linear-gradient(90deg,var(--violet),var(--blue))}
.qcard.q3:before{background:linear-gradient(90deg,var(--teal),var(--amber))}
.qcard.q4:before{background:linear-gradient(90deg,var(--red),var(--amber))}
.qcard .qtop{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.qcard .ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:21px;color:#fff;
  box-shadow:var(--shadow-sm)}
.q1 .ic{background:linear-gradient(135deg,var(--blue),var(--teal))}
.q2 .ic{background:linear-gradient(135deg,var(--violet),var(--blue))}
.q3 .ic{background:linear-gradient(135deg,var(--teal),#36b7a8)}
.q4 .ic{background:linear-gradient(135deg,var(--red),var(--amber))}
.qcard .qnum{font-size:34px;font-weight:800;line-height:1;letter-spacing:-.04em;color:var(--surface-alt);
  -webkit-text-stroke:1px var(--border-strong)}
.qcard .qeyebrow{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-subtle);
  margin-bottom:5px}
.qcard .q{font-size:17px;font-weight:800;color:var(--navy);letter-spacing:-.015em;line-height:1.25;margin-bottom:10px;
  min-height:42px}
.qcard p{font-size:13px;line-height:1.6;color:var(--ink-muted);margin:0 0 16px}
.qcard .tag{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;
  font-weight:700;color:var(--navy);background:var(--surface-alt);border:1px solid var(--border);
  border-radius:999px;padding:6px 12px}
.qcard .tag i{font-size:12px}
.q1 .tag i{color:var(--blue)} .q2 .tag i{color:var(--violet)} .q3 .tag i{color:var(--teal)} .q4 .tag i{color:var(--red)}

/* ── Stack (the 4 layers) ────────────────────────────────── */
.stack{display:flex;flex-direction:column;gap:14px;margin-top:34px}
.layer{display:grid;grid-template-columns:54px 1fr;gap:18px;align-items:stretch;
  background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm)}
.layer .rail{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:18px;gap:4px}
.layer.l1 .rail{background:linear-gradient(180deg,var(--blue),#0d4f9e)}
.layer.l2 .rail{background:linear-gradient(180deg,var(--violet),#4b349a)}
.layer.l3 .rail{background:linear-gradient(180deg,var(--teal),#0a7d70)}
.layer.l4 .rail{background:linear-gradient(180deg,var(--red),var(--red-700))}
.layer .rail i{font-size:20px}
.layer .body{padding:18px 20px}
.layer .body .top{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.layer .body h3{margin:0;font-size:18px;font-weight:800;color:var(--navy);letter-spacing:-.01em}
.layer .body .ask{font-size:13px;font-style:italic;color:var(--ink-muted)}
.layer .body p{margin:8px 0 12px;font-size:13.5px;color:var(--ink-muted);max-width:780px}
.layer .feats{display:flex;gap:8px;flex-wrap:wrap}
.layer .feats span{font-size:12px;font-weight:600;color:var(--navy);background:var(--surface-alt);
  border:1px solid var(--border);border-radius:8px;padding:5px 10px;display:inline-flex;align-items:center;gap:6px}
.layer .feats i{color:var(--red)}

/* ── Generic section card ────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-sm)}
.card-h{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--border)}
.card-h h3{margin:0;font-size:15.5px;font-weight:800;color:var(--navy);display:flex;align-items:center;gap:9px}
.card-h h3 i{color:var(--red)}
.card-h .muted{margin-left:auto;font-size:12px;color:var(--ink-subtle)}

/* ── Stat strip ──────────────────────────────────────────── */
.stats{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.stat{flex:1 1 150px;background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:14px 16px;box-shadow:var(--shadow-sm)}
.stat .n{font-size:23px;font-weight:800;color:var(--navy);letter-spacing:-.02em}
.stat .n small{font-size:14px;color:var(--red);font-weight:700}
.stat .l{font-size:11.5px;font-weight:600;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.04em;margin-top:2px}

/* ── Taxonomy + Graph two-column ─────────────────────────── */
.kbody{display:grid;grid-template-columns:340px 1fr;gap:20px;align-items:start;margin-top:24px}
@media(max-width:980px){.kbody{grid-template-columns:1fr}}

/* tree */
.tree{padding:10px;max-height:680px;overflow:auto}
.t-domain{margin-bottom:3px}
.t-row{display:flex;align-items:center;gap:8px;padding:8px 9px;border-radius:9px;cursor:pointer;font-size:13px;user-select:none}
.t-row:hover{background:var(--surface-alt)}
.t-domain>.t-row{font-weight:800;color:var(--navy)}
.t-group>.t-row{font-weight:600;color:var(--navy-700)}
.t-row .caret{transition:transform .15s;color:var(--ink-subtle);font-size:11px;width:12px}
.t-node.collapsed>.t-children{display:none}
.t-node.collapsed>.t-row .caret{transform:rotate(-90deg)}
.t-count{margin-left:auto;font-size:10px;color:var(--ink-subtle);font-weight:700;
  background:var(--surface-alt);border-radius:999px;padding:1px 8px}
.t-row .dom-ic{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;color:#fff;font-size:12px;flex:none}
.t-children{padding-left:14px;border-left:1px dashed var(--border);margin-left:10px}
.t-leaf{display:flex;align-items:center;gap:9px;padding:6px 9px;border-radius:8px;cursor:pointer;
  font-size:12.5px;color:var(--ink-muted)}
.t-leaf:hover{background:var(--surface-alt);color:var(--ink)}
.t-leaf.active{background:var(--navy);color:#fff;font-weight:600}
.t-leaf .dot{width:8px;height:8px;border-radius:50%;flex:none}
.dot.entity{background:var(--blue)} .dot.metric{background:var(--teal)}
.dot.system{background:var(--amber)} .dot.agent{background:var(--red)}
.t-leaf .k{margin-left:auto;font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-subtle);font-weight:700}
.t-leaf.active .k{color:rgba(255,255,255,.7)}

/* detail panel */
.detail{padding:20px 22px;min-height:140px}
.d-hint{color:var(--ink-subtle);font-size:13.5px;display:flex;align-items:center;gap:9px}
.d-kind{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;color:#fff}
.d-kind.entity{background:var(--blue)} .d-kind.metric{background:var(--teal)}
.d-kind.system{background:var(--amber);color:var(--ink)} .d-kind.agent{background:var(--red)}
.d-title{font-size:21px;font-weight:800;color:var(--navy);margin:10px 0 4px;letter-spacing:-.01em}
.d-path{font-size:12px;color:var(--ink-subtle);margin-bottom:12px}
.d-def{font-size:14px;line-height:1.62;color:var(--ink)}
.d-prose{font-size:13px;line-height:1.62;color:var(--ink-muted)}
.d-prose code{font-family:var(--mono);font-size:12px;color:var(--navy)}
.d-ask{font-size:13.5px;line-height:1.5;color:var(--navy);font-weight:600;font-style:italic;
  background:var(--blue-50);border:1px solid #D5E3F5;border-left:3px solid var(--blue);border-radius:9px;
  padding:10px 13px;display:flex;align-items:flex-start;gap:9px}
.d-ask i{color:var(--blue);font-style:normal;font-size:15px;margin-top:1px;flex:none}
.d-sec-h{font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-muted);
  margin:18px 0 9px;display:flex;align-items:center;gap:7px}
.d-sec-h i{color:var(--red)}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{font-size:12px;padding:5px 11px;border-radius:999px;cursor:pointer;border:1px solid var(--border);
  background:var(--surface);color:var(--navy-700);transition:border-color .12s,color .12s}
.chip:hover{border-color:var(--red);color:var(--red)}
.d-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.d-mbox{flex:1 1 180px;background:var(--surface-alt);border:1px solid var(--border);border-radius:10px;padding:10px 13px}
.d-mlabel{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-subtle);margin-bottom:3px}
.d-mval{font-size:13px;color:var(--ink);font-weight:600}

/* ── Knowledge graph svg ─────────────────────────────────── */
.graph-card{margin-top:24px}
/* Static SVG in normal flow: a non-empty inline <svg> with a viewBox sizes
   itself from its intrinsic ratio — no absolute positioning (which could
   overlap other sections) and no JS injection (which breaks on Save As). */
.graph-wrap{position:relative;width:100%;overflow:hidden;
  background:radial-gradient(900px 380px at 50% -10%,var(--surface-alt),var(--surface))}
#graph{display:block;width:100%;height:auto}
.g-edge{stroke:#C8D2E0;stroke-width:1.5;fill:none;transition:stroke .18s,stroke-width .18s,opacity .18s}
.g-edge.hot{stroke:var(--navy-700);stroke-width:2.4}
.g-edge.dim{opacity:.25}
.g-elabel{font-size:10px;fill:#94A2B8;font-weight:600;letter-spacing:.01em;transition:fill .18s,opacity .18s}
.g-elabel.hot{fill:var(--navy)}
.g-elabel.dim{opacity:.12}
.g-node{cursor:pointer;transition:opacity .18s}
.g-node .nbox{fill:#fff;stroke:#D8E0EC;stroke-width:1.6;transition:stroke .18s,stroke-width .18s}
.g-node:hover .nbox{stroke-width:2.4;filter:drop-shadow(0 8px 18px rgba(10,30,63,.16))}
.g-node.dim{opacity:.32}
.g-node .nlabel{font-size:12.5px;font-weight:700;fill:var(--navy);pointer-events:none}
.g-node .nsub{font-size:8.5px;font-weight:700;fill:#9AA8BD;text-transform:uppercase;letter-spacing:.06em;pointer-events:none}
.g-legend{display:flex;gap:18px;flex-wrap:wrap;padding:14px 20px;border-top:1px solid var(--border);
  font-size:12px;font-weight:600;color:var(--ink-muted)}
.g-legend span{display:inline-flex;align-items:center;gap:7px}
.g-legend .sw{width:10px;height:10px;border-radius:50%}

/* ── Reasoning chains ────────────────────────────────────── */
.chains{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:24px}
@media(max-width:820px){.chains{grid-template-columns:1fr}}
.chain{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:18px 20px;box-shadow:var(--shadow-sm)}
.chain .q{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;font-weight:700;color:var(--navy);margin-bottom:14px}
.chain .q i{color:var(--red);font-size:17px;margin-top:1px}
.flow-steps{display:flex;flex-direction:column;gap:0}
.fstep{display:flex;align-items:center;gap:11px;padding:7px 0}
.fstep .b{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:14px;color:#fff;
  background:var(--navy)}
.fstep.bad .b{background:var(--red)} .fstep.warn .b{background:var(--amber);color:var(--ink)}
.fstep.good .b{background:var(--teal)}
.fstep .tx{font-size:13.5px;color:var(--ink);font-weight:600}
.fstep .tx small{display:block;font-size:11.5px;color:var(--ink-muted);font-weight:500}
.fconn{width:30px;display:flex;justify-content:center;color:var(--border-strong);font-size:14px;height:14px;align-items:center}
.chain .ans{margin-top:14px;background:var(--navy);color:#fff;border-radius:12px;padding:13px 15px}
.chain .ans .lab{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#FFD9A0;margin-bottom:5px;display:flex;align-items:center;gap:6px}
.chain .ans .txt{font-size:13px;line-height:1.55}
.chain .ans b{color:#FFCB8A}

/* ── Agent factory ───────────────────────────────────────── */
.agrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:24px}
@media(max-width:760px){.agrid{grid-template-columns:1fr}}
.agent{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:18px 20px;
  box-shadow:var(--shadow-sm);position:relative;transition:transform .15s,box-shadow .15s}
.agent:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.agent .ah{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.agent .ah .ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-size:18px;color:#fff;
  background:linear-gradient(135deg,var(--red),var(--amber))}
.agent .ah h4{margin:0;font-size:15.5px;font-weight:800;color:var(--navy)}
.agent .ah small{font-size:11.5px;color:var(--ink-subtle);font-weight:600}
.agent .trig{font-size:12.5px;color:var(--ink-muted);background:var(--red-50);border:1px solid #F7D4D2;
  border-radius:9px;padding:8px 11px;margin-bottom:12px;font-family:var(--mono);display:flex;align-items:center;gap:8px}
.agent .trig i{color:var(--red)}
.agent .acts{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px}
.agent .acts li{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink)}
.agent .acts li i{color:var(--teal);font-size:14px}

/* ── Vision pyramid ──────────────────────────────────────── */
.vision{background:linear-gradient(160deg,var(--navy),#0c2a55);border-radius:20px;padding:36px 30px;color:#fff;margin-top:26px;position:relative;overflow:hidden}
.vision:after{content:"";position:absolute;inset:0;background-image:
  linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:40px 40px;mask-image:radial-gradient(600px 360px at 50% 0%,#000,transparent 70%);opacity:.5}
.vision .vt{text-align:center;position:relative;z-index:1}
.vision .vt .eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#FFD9A0}
.vision .vt h3{font-size:24px;font-weight:800;margin:6px 0 0;letter-spacing:-.01em}
.pyramid{display:flex;flex-direction:column;align-items:center;gap:8px;margin:26px 0 22px;position:relative;z-index:1}
.prow{border-radius:12px;padding:13px 22px;text-align:center;font-weight:700;color:#fff;box-shadow:var(--shadow-md);
  display:flex;flex-direction:column;gap:1px}
.prow small{font-size:11px;font-weight:500;opacity:.82}
.prow.p4{width:46%;background:linear-gradient(90deg,var(--red),var(--red-700))}
.prow.p3{width:60%;background:linear-gradient(90deg,var(--teal),#0a7d70)}
.prow.p2{width:74%;background:linear-gradient(90deg,var(--violet),#4b349a)}
.prow.p1{width:88%;background:linear-gradient(90deg,var(--blue),#0d4f9e)}
@media(max-width:680px){.prow{width:100% !important}}
.vbase{position:relative;z-index:1;border-top:1px dashed rgba(255,255,255,.22);padding-top:18px;margin-top:4px}
.vbase .bt{text-align:center;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#9FB2CC;margin-bottom:12px}
.vbase .row{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}
.vbase .pill{font-size:12px;font-weight:600;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  border-radius:999px;padding:6px 13px;color:#E7EEF8}
.vbus{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-bottom:14px}
.vbus .pill{font-size:12px;font-weight:700;background:rgba(245,166,35,.14);border:1px solid rgba(245,166,35,.32);
  border-radius:999px;padding:6px 14px;color:#FFD9A0}

/* ── Pilot timeline ──────────────────────────────────────── */
.pilot{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
@media(max-width:820px){.pilot{grid-template-columns:1fr}}
.phase{background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm)}
.phase .ph{padding:15px 18px;color:#fff;display:flex;align-items:center;justify-content:space-between}
.phase.ph1 .ph{background:linear-gradient(120deg,var(--blue),#0d4f9e)}
.phase.ph2 .ph{background:linear-gradient(120deg,var(--violet),#4b349a)}
.phase.ph3 .ph{background:linear-gradient(120deg,var(--teal),#0a7d70)}
.phase .ph .d{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.phase .ph h4{margin:3px 0 0;font-size:17px;font-weight:800}
.phase .ph .num{font-size:30px;font-weight:800;opacity:.4}
.phase .pb{padding:16px 18px}
.phase .pb p{margin:0 0 11px;font-size:12.5px;color:var(--ink-muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.phase .pb ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.phase .pb li{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink)}
.phase .pb li i{color:var(--teal)}
.outcome{margin-top:22px;background:var(--amber-50);border:1px solid #F3DCA6;border-left:4px solid var(--amber);
  border-radius:12px;padding:18px 22px}
.outcome h4{margin:0 0 6px;font-size:15px;font-weight:800;color:var(--navy);display:flex;align-items:center;gap:9px}
.outcome h4 i{color:var(--amber)}
.outcome p{margin:0;font-size:14px;color:var(--ink)}
.outcome p b{color:var(--red-700)}

/* ── Footer ──────────────────────────────────────────────── */
.foot{margin-top:54px;background:var(--navy);color:#9FB2CC;padding:30px 0;font-size:12.5px}
.foot .wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.foot .brand{color:#fff}
.foot .r{margin-left:auto;color:var(--ink-subtle)}

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

/* ════════ Interactive product walkthrough ════════ */
.demo{margin-top:30px}
.demo-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.demo-tab{display:inline-flex;align-items:center;gap:9px;font-family:var(--f);font-size:13.5px;font-weight:700;
  color:var(--ink-muted);background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:10px 15px;cursor:pointer;transition:all .15s}
.demo-tab:hover{border-color:var(--border-strong);color:var(--navy)}
.demo-tab.is-active{color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--navy),var(--navy-2));box-shadow:var(--shadow-md)}
.demo-tab .dt-n{width:21px;height:21px;border-radius:6px;display:grid;place-items:center;font-size:11px;font-weight:800;
  background:var(--surface-alt);color:var(--navy)}
.demo-tab.is-active .dt-n{background:linear-gradient(135deg,var(--red),var(--amber));color:#fff}
.demo-frame{background:var(--surface);border:1px solid var(--border-strong);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-lg)}
.demo-bar{display:flex;align-items:center;gap:8px;padding:11px 15px;background:#0d2347;border-bottom:1px solid rgba(255,255,255,.08)}
.demo-bar .dot{width:11px;height:11px;border-radius:50%}
.demo-bar .dot.r{background:#ff5f57}.demo-bar .dot.y{background:#febc2e}.demo-bar .dot.g{background:#28c840}
.demo-url{margin-left:10px;flex:1;max-width:430px;display:flex;align-items:center;gap:7px;font-size:12px;color:#9FB2CC;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:5px 11px}
.demo-url i{font-size:10px;color:#28c840}
.demo-url-path{color:#cfe0f5;font-weight:600}
.demo-live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;letter-spacing:.08em;color:#7CF0A8}
.demo-live .pulse{width:8px;height:8px;border-radius:50%;background:#28c840;animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(40,200,64,.55)}70%{box-shadow:0 0 0 8px rgba(40,200,64,0)}100%{box-shadow:0 0 0 0 rgba(40,200,64,0)}}
.demo-stage{position:relative;background:var(--surface-alt);min-height:460px}
.demo-panel{display:none;padding:20px}
.demo-panel.is-active{display:block;animation:fadeUp .35s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.demo-caption{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-muted);margin-bottom:14px}
.demo-caption b{color:var(--navy)} .demo-caption i{color:var(--red)}
.btn-run{display:inline-flex;align-items:center;gap:8px;font-family:var(--f);font-size:13px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--red),var(--amber));border:none;border-radius:10px;padding:9px 16px;cursor:pointer;box-shadow:var(--shadow-sm);transition:filter .15s}
.btn-run:hover{filter:brightness(1.06)} .btn-run:disabled{filter:grayscale(.45);cursor:default}
@keyframes spin{to{transform:rotate(360deg)}}
.sp{display:inline-block;width:14px;height:14px;border:2px solid rgba(120,140,170,.35);border-top-color:var(--blue);border-radius:50%;animation:spin .7s linear infinite}

/* — Layer 1: Enterprise 360 integration — */
.d360{display:grid;grid-template-columns:236px 1fr;gap:18px}
@media(max-width:820px){.d360{grid-template-columns:1fr}}
.d360-h{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-subtle);margin-bottom:9px}
.d360-sources{display:flex;flex-direction:column;gap:8px}
.src{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:11px;
  padding:9px 11px;cursor:pointer;text-align:left;font-family:var(--f);transition:all .15s}
.src:hover{border-color:var(--border-strong);transform:translateX(2px)}
.src.lit{border-color:var(--c);box-shadow:0 3px 12px rgba(10,30,63,.1)}
.src .si{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:#fff;font-size:14px;background:var(--c);flex:none}
.src .smeta{min-width:0} .src .sname{font-size:12.5px;font-weight:700;color:var(--navy)} .src .sdesc{font-size:10px;color:var(--ink-muted)}
.src .sstat{margin-left:auto;font-size:8.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--good);display:flex;align-items:center;gap:4px}
.src .sstat .d{width:6px;height:6px;border-radius:50%;background:var(--good)}
.d360-main{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 18px}
.d360-runbar{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.d360-prog{flex:1;min-width:120px;height:7px;background:var(--surface-alt);border-radius:99px;overflow:hidden}
.d360-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--blue));transition:width .35s}
.d360-count{font-size:12px;font-weight:700;color:var(--navy);display:inline-flex;align-items:center;gap:6px}
.d360-count i{color:var(--good)}
.e360-card{border:1px dashed var(--border-strong);border-radius:12px;padding:14px;background:var(--surface-muted)}
.e360-title{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:800;color:var(--navy);margin-bottom:12px}
.e360-title .b{font-size:9.5px;font-weight:800;text-transform:uppercase;background:var(--blue-50);color:var(--blue);border-radius:6px;padding:2px 7px;letter-spacing:.04em}
.e360-fields{display:grid;grid-template-columns:1fr 1fr;gap:9px}
@media(max-width:560px){.e360-fields{grid-template-columns:1fr}}
.e360-field{background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:9px 11px;opacity:.4;transition:opacity .3s,box-shadow .2s,border-color .2s}
.e360-field.filled{opacity:1}
.e360-field.hot{border-color:var(--c);box-shadow:0 3px 12px rgba(10,30,63,.1)}
.e360-flabel{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-subtle);display:flex;align-items:center;gap:6px;margin-bottom:4px}
.e360-src{font-size:7.5px;font-weight:800;color:#fff;background:var(--c);border-radius:5px;padding:1px 5px;letter-spacing:.02em;margin-left:auto}
.e360-fval{font-size:13px;font-weight:700;color:var(--navy);min-height:16px}
.e360-fval .skl{display:inline-block;width:75%;height:12px;border-radius:4px;background:linear-gradient(90deg,#e7edf4,#f3f6fa,#e7edf4);background-size:200% 100%;animation:shimmer 1.1s infinite}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* — Layer 2: Knowledge Graph traversal — */
.dkg{display:grid;grid-template-columns:1fr 290px;gap:18px}
@media(max-width:820px){.dkg{grid-template-columns:1fr}}
.dkg-stage{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 18px}
.dkg-q{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.dkg-qchip{font-size:12.5px;font-weight:600;color:var(--navy-700);background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:7px 12px;cursor:pointer;transition:all .15s}
.dkg-qchip:hover{border-color:var(--red);color:var(--red)}
.dkg-qchip.is-active{background:var(--navy);color:#fff;border-color:var(--navy)}
.dkg-chain{display:flex;flex-direction:column}
.dkg-step{display:flex;align-items:center;gap:12px;padding:6px 0;opacity:.28;transform:translateX(-7px);transition:opacity .4s,transform .4s}
.dkg-step.on{opacity:1;transform:none}
.dkg-step .ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:16px;color:#fff;flex:none;background:var(--navy);box-shadow:var(--shadow-sm)}
.dkg-step.cause .ic{background:var(--red)}
.dkg-step .tx{font-size:13.5px;font-weight:700;color:var(--navy)}
.dkg-step .tx small{display:block;font-size:11px;font-weight:500;color:var(--ink-muted)}
.dkg-conn{height:14px;width:38px;display:flex;justify-content:center}
.dkg-conn span{width:2px;height:100%;background:var(--border-strong);transition:background .35s}
.dkg-side{display:flex;flex-direction:column;gap:12px}
.dkg-find{background:linear-gradient(155deg,var(--navy),var(--navy-2));color:#fff;border-radius:14px;padding:16px;opacity:0;transform:translateY(10px);transition:.45s}
.dkg-find.show{opacity:1;transform:none}
.dkg-find .lab{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#FFD9A0;margin-bottom:6px;display:flex;align-items:center;gap:6px}
.dkg-find .ftx{font-size:13px;line-height:1.55} .dkg-find .ftx b{color:#FFCB8A}

/* — Layer 3: AI Copilot chat — */
.dco{max-width:740px;margin:0 auto}
.dco-win{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;height:436px;box-shadow:var(--shadow-md)}
.dco-head{display:flex;align-items:center;gap:11px;padding:12px 16px;background:linear-gradient(135deg,var(--navy),var(--navy-2));color:#fff}
.dco-head .av{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(135deg,var(--red),var(--amber));font-size:16px}
.dco-head b{font-size:14px} .dco-head small{font-size:11px;color:#9FB2CC;display:block}
.dco-head .badge{margin-left:auto;font-size:9.5px;font-weight:800;letter-spacing:.06em;color:#7CF0A8;background:rgba(40,200,64,.14);border:1px solid rgba(40,200,64,.3);border-radius:999px;padding:3px 9px}
.dco-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:11px;background:var(--surface-alt)}
.msg{max-width:86%;font-size:13px;line-height:1.55;border-radius:14px;padding:10px 13px}
.msg.user{align-self:flex-end;background:var(--navy);color:#fff;border-bottom-right-radius:4px}
.msg.bot{align-self:flex-start;background:var(--surface);border:1px solid var(--border);color:var(--ink);border-bottom-left-radius:4px;box-shadow:var(--shadow-sm)}
.msg.bot b{color:var(--navy)}
.dco-note{margin-top:9px;font-size:11.5px;color:var(--ink-muted);display:flex;align-items:center;gap:6px}
.dco-note i{color:var(--good)}
.dco-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.dco-tile{background:var(--surface-alt);border:1px solid var(--border);border-radius:9px;padding:9px 6px;text-align:center}
.dco-tile .n{font-size:18px;font-weight:800;color:var(--red);line-height:1} .dco-tile .l{font-size:9px;color:var(--ink-muted);margin-top:3px}
.dco-steps{align-self:flex-start;display:flex;flex-direction:column;gap:7px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:11px 13px;box-shadow:var(--shadow-sm)}
.dco-stepi{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--ink-muted)}
.dco-stepi.done{color:var(--navy);font-weight:600} .dco-stepi.done i{color:var(--good);font-size:15px}
.dco-foot{padding:11px 14px;border-top:1px solid var(--border);background:var(--surface);display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.dco-foot .lbl{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-subtle)}
.dco-sug{font-size:12px;font-weight:600;color:var(--navy-700);background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:6px 11px;cursor:pointer;transition:all .15s}
.dco-sug:hover{border-color:var(--blue);color:var(--blue)}

/* — Layer 4: Agent Factory — */
.dag{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:820px){.dag{grid-template-columns:1fr}}
.dag-agents{display:flex;flex-direction:column;gap:10px}
.dag-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 14px;transition:border-color .15s}
.dag-card.active{border-color:var(--red);box-shadow:var(--shadow-md)}
.dag-card .top{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.dag-card .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:15px;color:#fff;background:linear-gradient(135deg,var(--red),var(--amber));flex:none}
.dag-card h5{margin:0;font-size:13px;font-weight:800;color:var(--navy)} .dag-card .top small{font-size:10.5px;color:var(--ink-subtle)}
.dag-card .trig{font-size:11px;color:var(--ink-muted);font-family:var(--mono);background:var(--red-50);border:1px solid #F7D4D2;border-radius:8px;padding:6px 9px;margin-bottom:10px;display:flex;align-items:center;gap:7px}
.dag-card .trig i{color:var(--red)}
.dag-io{display:flex;gap:8px;font-size:11.5px;line-height:1.4;margin-bottom:6px}
.dag-io .io-k{flex:none;width:38px;font-weight:800;text-transform:uppercase;font-size:9px;letter-spacing:.05em;color:var(--ink-subtle);padding-top:2px}
.dag-io .io-v{color:var(--ink);font-weight:500}
.dag-impact{font-size:11.5px;font-weight:700;color:var(--good,#1A7F55);background:#E9F6EF;border-radius:8px;padding:6px 9px;margin:2px 0 10px;display:flex;align-items:center;gap:7px}
.dag-run{display:inline-flex;align-items:center;gap:7px;font-family:var(--f);font-size:12px;font-weight:700;color:#fff;background:var(--navy);border:none;border-radius:8px;padding:7px 13px;cursor:pointer;transition:filter .15s}
.dag-run:hover{filter:brightness(1.12)} .dag-run:disabled{filter:grayscale(.5);cursor:default}
.dag-console{background:#0b1f3f;border-radius:12px;padding:14px 15px;display:flex;flex-direction:column;min-height:360px}
.dag-ch{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#7e94b6;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:9px;margin-bottom:11px}
.dag-ch i{color:#FFD9A0}
.dag-log{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;font-family:var(--mono);font-size:12px;color:#cfe0f5}
.dag-empty{color:#62799c;font-size:12px;font-style:italic}
.dag-line{display:flex;align-items:flex-start;gap:9px;opacity:0;animation:fadeUp .3s forwards}
.dag-line .mk{flex:none;width:16px;display:grid;place-items:center;margin-top:1px}
.dag-line .mk .sp{width:12px;height:12px}
.dag-line.ok .mk{color:#3ddc6f}
.dag-value{display:flex;flex-direction:column;gap:3px;background:rgba(80,150,255,.12);border:1px solid rgba(90,140,255,.34);border-left:3px solid #5b8cff;border-radius:9px;padding:9px 11px;margin-bottom:4px}
.dag-value .vk{font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#8fb3ff}
.dag-value>span:last-child{font-size:12.5px;font-weight:700;color:#eaf2ff;line-height:1.4}
.dag-howk{font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#62799c;margin:6px 0 2px}
.dag-done{margin-top:10px;background:rgba(40,200,64,.13);border:1px solid rgba(40,200,64,.32);color:#9af0b6;border-radius:9px;padding:9px 11px;font-family:var(--mono);font-size:12px;font-weight:700;display:none;align-items:flex-start;gap:8px}
.dag-done i{color:#3ddc6f;margin-top:1px}

/* ════════ Living knowledge graph (D3) ════════ */
.kg-card{margin-top:24px;overflow:hidden;padding:0}
.kg-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:13px 16px;border-bottom:1px solid var(--border);background:var(--surface)}
.kg-search{position:relative;display:flex;align-items:center;min-width:210px;flex:1;max-width:330px}
.kg-search i{position:absolute;left:11px;color:var(--ink-subtle);font-size:13px}
.kg-search input{width:100%;padding:8px 12px 8px 32px;border:1px solid var(--border);border-radius:9px;font-size:13px;font-family:var(--f);background:var(--surface-alt);color:var(--ink)}
.kg-search input:focus{outline:2px solid var(--blue);border-color:var(--blue)}
.kg-btn{display:inline-flex;align-items:center;gap:7px;font-family:var(--f);font-size:12.5px;font-weight:700;color:var(--navy);background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:8px 13px;cursor:pointer;transition:all .15s}
.kg-btn:hover{border-color:var(--border-strong)}
.kg-btn-primary{color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--red),var(--amber))}
.kg-btn-primary:hover{filter:brightness(1.06)}
.kg-hint{margin-left:auto;font-size:11.5px;color:var(--ink-subtle);display:flex;align-items:center;gap:6px}
.kg-main{display:grid;grid-template-columns:1fr 300px}
@media(max-width:860px){.kg-main{grid-template-columns:1fr}}
.kg-canvas-wrap{position:relative;background:radial-gradient(circle at 50% 35%,#fbfdff,#eaeff6);border-right:1px solid var(--border);overflow:hidden}
@media(max-width:860px){.kg-canvas-wrap{border-right:none;border-bottom:1px solid var(--border)}}
#kg-svg{display:block;width:100%;height:560px;cursor:grab;touch-action:none}
#kg-svg:active{cursor:grabbing}
.kg-link{stroke:#C2CDDC;stroke-width:1.3;fill:none;transition:stroke .2s,stroke-width .2s,opacity .2s}
.kg-link.faded{opacity:.1}
.kg-link.hot{stroke:var(--navy-700);stroke-width:2.4}
.kg-link.path{stroke:var(--red);stroke-width:3}
.kg-elabel{font-size:9px;fill:#7c8aa0;font-weight:700;pointer-events:none;opacity:0;transition:opacity .2s}
.kg-elabel.show{opacity:1}
.kg-node{cursor:pointer}
.kg-node circle{stroke:#fff;stroke-width:2;transition:stroke .2s,stroke-width .2s,opacity .2s}
.kg-node.faded{opacity:.18}
.kg-node.hot circle{stroke:var(--navy);stroke-width:3}
.kg-node.seed circle{stroke:var(--red);stroke-width:4}
.kg-node.pulse circle{animation:kgpulse .9s ease-out}
@keyframes kgpulse{0%{stroke:var(--red);stroke-width:9}100%{stroke-width:2}}
.kg-nlabel{font-size:9.5px;font-weight:600;fill:var(--navy);pointer-events:none;text-anchor:middle;transition:opacity .2s}
.kg-node.faded .kg-nlabel{opacity:.2}
.kg-detail{padding:16px 16px 20px;background:var(--surface);max-height:560px;overflow:auto}
.kg-detail-empty{color:var(--ink-subtle);font-size:13px;text-align:center;padding:46px 12px;display:flex;flex-direction:column;align-items:center;gap:13px;line-height:1.5}
.kg-detail-empty i{font-size:28px;color:var(--border-strong)}
.kgd-kind{display:inline-flex;align-items:center;gap:6px;font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff;border-radius:999px;padding:3px 10px}
.kgd-title{font-size:18px;font-weight:800;color:var(--navy);margin:10px 0 2px;line-height:1.2}
.kgd-sub{font-size:11.5px;color:var(--ink-subtle);margin-bottom:8px}
.kgd-val{background:var(--surface-alt);border:1px solid var(--border);border-left:3px solid var(--c,var(--blue));border-radius:8px;padding:9px 12px;font-size:13.5px;font-weight:700;color:var(--navy);margin:10px 0}
.kgd-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.kgd-chip{font-size:11px;font-weight:600;color:var(--ink-muted);background:var(--surface-alt);border:1px solid var(--border);border-radius:7px;padding:4px 9px}
.kgd-chip b{color:var(--navy)}
.kgd-status{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;letter-spacing:.03em;border-radius:999px;padding:3px 10px;margin-left:6px}
.kgd-status.good{background:#E5F5EC;color:#1A7F55} .kgd-status.warn{background:#FBF1D9;color:#8A6D00} .kgd-status.bad{background:#FBE6E3;color:#B3392F}
.kgd-status:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.kgd-desc{font-size:12.5px;line-height:1.5;color:var(--ink);background:var(--surface-alt);border-radius:8px;padding:9px 11px;margin:10px 0}
.kgd-facts{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:10px 0 2px}
.kgd-fact{border:1px solid var(--border);border-radius:8px;padding:7px 10px;background:var(--surface)}
.kgd-fact .fk{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-subtle)}
.kgd-fact .fv{font-size:13.5px;font-weight:700;color:var(--navy);margin-top:1px}
.kgd-h{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-subtle);margin:15px 0 8px;display:flex;align-items:center;gap:6px}
.kgd-h i{color:var(--red)}
/* live graph-expansion: "add node via web research" */
.kg-add{display:flex;flex-direction:column;gap:9px;align-items:flex-start;padding:4px 2px}
.kg-add-q{font-size:13px;font-weight:600;color:var(--navy)}
.kg-add-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--f);font-size:12.5px;font-weight:700;color:#fff;background:var(--accent,#1A4FD6);border:none;border-radius:8px;padding:9px 13px;cursor:pointer;text-align:left;line-height:1.3}
.kg-add-btn:hover{filter:brightness(1.08)} .kg-add-btn i{font-size:14px}
.kg-add-hint{font-size:11px;color:var(--ink-subtle);line-height:1.45}
.kg-spin{width:22px;height:22px;border:2.5px solid var(--border-strong);border-top-color:var(--accent,#1A4FD6);border-radius:50%;display:inline-block;animation:kgspin .7s linear infinite}
@keyframes kgspin{to{transform:rotate(360deg)}}
.kg-node.pulse circle{animation:kgpulse 1s ease-in-out infinite}
@keyframes kgpulse{0%,100%{opacity:1}50%{opacity:.45}}
.kgd-rel{display:flex;flex-direction:column;gap:5px}
.kgd-relitem{display:flex;align-items:center;gap:8px;font-size:12px;cursor:pointer;border:1px solid var(--border);border-radius:8px;padding:6px 9px;background:var(--surface);transition:border-color .12s,transform .12s}
.kgd-relitem:hover{border-color:var(--red);transform:translateX(2px)}
.kgd-relitem .dot{width:8px;height:8px;border-radius:50%;flex:none}
.kgd-relitem .nm{font-weight:600;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kgd-relitem .rel{margin-left:auto;font-size:9px;color:var(--ink-subtle);text-transform:uppercase;letter-spacing:.03em;flex:none}
.kg-story{position:absolute;left:14px;right:14px;bottom:14px;max-width:540px;background:rgba(10,30,63,.95);color:#fff;border-radius:12px;padding:13px 16px;box-shadow:var(--shadow-lg);opacity:0;transform:translateY(12px);transition:.3s;pointer-events:none}
.kg-story.show{opacity:1;transform:none;pointer-events:auto}
.kg-story .st-step{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#FFD9A0;margin-bottom:4px;display:flex;align-items:center;gap:7px}
.kg-story .st-tx{font-size:13px;line-height:1.5} .kg-story .st-tx b{color:#FFCB8A}
.kg-story .st-bar{height:3px;background:rgba(255,255,255,.15);border-radius:99px;margin-top:9px;overflow:hidden}
.kg-story .st-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--red),var(--amber));transition:width .4s}
#kg-legend{padding:12px 16px}

/* ════════ Executive Control Tower (Chart.js) ════════ */
.ct{margin-top:26px;background:linear-gradient(155deg,#0a1e3f,#13305c);border-radius:18px;padding:7px;box-shadow:var(--shadow-lg)}
.ct-inner{background:#0c2249;border-radius:13px;overflow:hidden}
.ct-top{display:flex;align-items:center;gap:11px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.08)}
.ct-top .ttl{color:#fff;font-weight:800;font-size:15px;display:flex;align-items:center;gap:9px}
.ct-top .ttl i{color:#FFD9A0}
.ct-top .sub{font-size:11.5px;color:#8ea3c4}
.ct-live{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:800;letter-spacing:.07em;color:#7CF0A8}
.ct-live .pulse{width:8px;height:8px;border-radius:50%;background:#28c840;animation:pulse 1.8s infinite}
.ct-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.07)}
@media(max-width:680px){.ct-grid{grid-template-columns:repeat(2,1fr)}}
.ct-kpi{background:#0c2249;padding:15px 17px;transition:background .15s}
.ct-kpi:hover{background:#0e2a58}
.ct-kpi .l{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#7e94b6;display:flex;align-items:center;gap:6px}
.ct-kpi .v{font-size:25px;font-weight:800;color:#fff;margin:5px 0 2px;letter-spacing:-.02em}
.ct-kpi .dl{font-size:12px;font-weight:700;display:inline-flex;align-items:center;gap:4px}
.ct-kpi .dl.up{color:#3ddc6f} .ct-kpi .dl.down{color:#ff7a6e} .ct-kpi .dl.warn{color:#FFD9A0}
.ct-charts{display:grid;grid-template-columns:1.5fr 1fr;gap:1px;background:rgba(255,255,255,.07)}
@media(max-width:760px){.ct-charts{grid-template-columns:1fr}}
.ct-chart{background:#0c2249;padding:15px 18px 18px}
.ct-chart h4{margin:0 0 6px;font-size:12.5px;color:#cfe0f5;font-weight:700;display:flex;align-items:center;gap:7px}
.ct-chart h4 i{color:#FFD9A0}
.ct-chart .cap{font-size:10.5px;color:#7e94b6;margin-bottom:10px}
.ct-canvas-box{position:relative;height:210px}
.ct-foot{display:flex;align-items:center;gap:10px;padding:11px 18px;background:#0a1c3d;border-top:1px solid rgba(255,255,255,.08);font-size:12px;color:#cfe0f5;flex-wrap:wrap}
.ct-foot .tag{font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#0a1e3f;background:#FFD9A0;border-radius:6px;padding:3px 8px}
.ct-foot b{color:#fff} .ct-foot .red{color:#ff9a8f}

/* ══════════════════════════════════════════════════════════════════
   McKinsey / EY LIGHT THEME — editorial overrides (loaded last, wins).
   White surfaces, deep-ink serif headlines, one confident accent,
   sparing gold, flat (no gradients), generous whitespace.
   ══════════════════════════════════════════════════════════════════ */
body{background:var(--surface);color:var(--ink);letter-spacing:.001em}
.wrap{max-width:1120px}
.vsec{padding:64px 0 20px}

/* Editorial section heads */
.sec-kick{color:var(--accent);font-size:11.5px;letter-spacing:.16em}
.sec-h{font-family:var(--serif);font-weight:500;font-size:33px;line-height:1.12;
  letter-spacing:-.01em;color:var(--ink-strong,#06141F);margin:12px 0 10px}
.sec-p{font-size:15.5px;line-height:1.65;color:var(--ink-muted);max-width:780px}

/* Nav — quiet, lettered */
.nav{background:rgba(255,255,255,.9)}
.brand{color:var(--navy);font-weight:700}
.brand .sq{background:var(--ink);border-radius:5px}
.brand small{color:var(--ink-subtle)}
.nav-links a{font-weight:500}

/* ── Hero → white editorial cover ── */
.hero{background:var(--surface);color:var(--ink);padding:62px 0 30px;border-bottom:1px solid var(--border)}
.hero:after{display:none}
.hero:before{content:"";position:absolute;left:0;top:0;height:3px;width:96px;background:var(--accent);
  margin-left:max(26px,calc((100% - 1120px)/2 + 26px))}
.hero-eyebrow{background:none;border:none;padding:0;color:var(--accent);font-weight:700;letter-spacing:.16em;font-size:12px}
.hero h1{font-family:var(--serif);font-weight:500;font-size:50px;line-height:1.08;letter-spacing:-.015em;
  color:var(--ink-strong,#06141F);max-width:940px;margin:18px 0 18px}
.hero h1 .grad{-webkit-text-fill-color:initial;background:none;color:var(--accent)}
.hero p.lead{color:var(--ink);font-size:18.5px;line-height:1.62;max-width:800px;font-weight:400}
.hero .sub{color:var(--ink-muted);font-size:14.5px;max-width:800px}
.hero .sub b{color:var(--ink)!important}
.hero-chain{margin-top:34px;gap:0;border-top:1px solid var(--border);padding-top:22px}
.hero-chip{background:none;border:none;border-left:1px solid var(--border);border-radius:0;padding:2px 22px;backdrop-filter:none;flex:1 1 0;min-width:150px}
.hero-chip:first-child{border-left:none;padding-left:0}
.hero-chip .n{background:none;color:var(--accent);font-family:var(--serif);font-size:18px;width:auto;height:auto;font-weight:600}
.hero-chip b{color:var(--ink);font-size:14px}
.hero-chip span{color:var(--ink-subtle)}
.hero-arrow{display:none}

/* ── Value cards → flat editorial ── */
.qcard{border-radius:4px;box-shadow:none;border:1px solid var(--border)}
.qcard:hover{box-shadow:var(--shadow-md);transform:none;border-color:var(--border-strong)}
.qcard:before{height:3px;background:var(--accent)!important;border-radius:0}
.qcard.q2:before,.qcard.q3:before,.qcard.q4:before{background:var(--accent)!important}
.qcard .ic{border-radius:8px;background:var(--accent)!important;box-shadow:none}
.q2 .ic,.q3 .ic,.q4 .ic{background:var(--accent)!important}
.qcard .qnum{-webkit-text-stroke:1px var(--border-strong);color:var(--surface);font-family:var(--serif)}
.qcard .q{font-family:var(--serif);font-weight:600;font-size:18px;color:var(--ink-strong,#06141F)}
.qcard .tag i{color:var(--accent)!important}

/* ── Stack rails → quiet numerals ── */
.layer{border-radius:4px;box-shadow:none}
.layer .rail{background:var(--surface-alt)!important;color:var(--accent);border-right:1px solid var(--border);
  font-family:var(--serif);font-weight:600}
.layer .rail i{color:var(--ink-subtle)}
.layer .body h3{font-family:var(--serif);font-weight:600}
.layer .feats i{color:var(--accent)}
.layer .body .ask{color:var(--gold)}

/* ── Demo frame → light product chrome ── */
.demo-tab{border-radius:4px}
.demo-tab.is-active{background:var(--ink)!important;box-shadow:none}
.demo-tab.is-active .dt-n{background:var(--accent)!important}
.demo-frame{border-radius:6px;box-shadow:var(--shadow-md)}
.demo-bar{background:var(--surface-alt);border-bottom:1px solid var(--border)}
.demo-url{background:var(--surface);border:1px solid var(--border);color:var(--ink-muted)}
.demo-url-path{color:var(--ink)}
.demo-live{color:var(--good)}
.demo-caption b{color:var(--ink)} .demo-caption i{color:var(--accent)}
.btn-run{background:var(--accent)!important;border-radius:6px;box-shadow:none}
.src.lit,.e360-field.hot{box-shadow:0 4px 14px rgba(11,27,43,.08)}
.e360-title .b{background:var(--accent-soft,#EBF0FD);color:var(--accent)}

/* ── KG ── */
.kg-btn-primary{background:var(--accent)!important}
.kg-node.seed circle,.kg-node.pulse circle{stroke:var(--accent)}
@keyframes kgpulse{0%{stroke:var(--accent);stroke-width:9}100%{stroke-width:2}}
.kg-link.hot{stroke:var(--accent)} .kg-link.path{stroke:var(--accent)}
.kg-elabel.hot{fill:var(--accent)}
.kgd-title{font-family:var(--serif);font-weight:600}
.kg-story{background:var(--ink);border-radius:6px}
.kg-story .st-step{color:#A9C0FF}
.kg-story .st-tx b{color:#fff;border-bottom:1px solid rgba(255,255,255,.3)}
.kg-story .st-bar i{background:var(--accent)}

/* ── Control Tower → light report exhibit ── */
.ct{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:0;box-shadow:var(--shadow-md)}
.ct-inner{background:var(--surface);border-radius:6px}
.ct-top{border-bottom:1px solid var(--border)}
.ct-top .ttl{color:var(--ink);font-family:var(--serif);font-weight:600} .ct-top .ttl i{color:var(--accent)}
.ct-top .sub{color:var(--ink-subtle)} .ct-live{color:var(--good)}
.ct-grid,.ct-charts{background:var(--border)}
.ct-kpi{background:var(--surface)} .ct-kpi:hover{background:var(--surface-muted)}
.ct-kpi .l{color:var(--ink-subtle)} .ct-kpi .v{color:var(--ink-strong,#06141F);font-family:var(--serif);font-weight:600}
.ct-kpi .dl.up{color:var(--good)} .ct-kpi .dl.down{color:var(--bad)} .ct-kpi .dl.warn{color:var(--gold)}
.ct-chart{background:var(--surface)} .ct-chart h4{color:var(--ink)} .ct-chart h4 i{color:var(--accent)} .ct-chart .cap{color:var(--ink-subtle)}
.ct-foot{background:var(--surface-alt);border-top:1px solid var(--border);color:var(--ink-muted)}
.ct-foot .tag{background:var(--ink);color:#fff} .ct-foot b{color:var(--ink)} .ct-foot .red{color:var(--bad)}
.ct-foot span[style]{color:var(--good)!important}

/* ── Copilot chat → light ── */
.dco-head{background:var(--surface-alt)!important;color:var(--ink);border-bottom:1px solid var(--border)}
.dco-head .av{background:var(--accent)!important}
.dco-head small{color:var(--ink-subtle)} .dco-head .badge{color:var(--good);background:var(--teal-50);border-color:#CFE5E0}
.msg.user{background:var(--accent)}
.msg.bot b{color:var(--ink)}

/* ── Agent console → light log ── */
.dag-card.active{border-color:var(--accent)}
.dag-card .ic{background:var(--accent)!important}
.dag-card h5{font-family:var(--serif);font-weight:600}
.dag-card .trig{background:var(--red-50);border-color:#EAD3CF;color:var(--ink-muted)} .dag-card .trig i{color:var(--red)}
.dag-run{background:var(--ink)!important}
.dag-console{background:var(--surface-alt);border:1px solid var(--border)}
.dag-ch{color:var(--ink-subtle);border-bottom-color:var(--border)} .dag-ch i{color:var(--accent)}
.dag-log{color:var(--ink-muted)} .dag-empty{color:var(--ink-subtle)}
.dag-line.ok .mk{color:var(--good)}
.dag-done{background:var(--teal-50);border-color:#CFE5E0;color:var(--teal)} .dag-done i{color:var(--good)}

/* ── Reasoning chains, vision, pilot ── */
.chain{border-radius:4px} .chain .q{font-family:var(--serif);font-weight:600} .chain .q i{color:var(--accent)}
.fstep .b{background:var(--ink)} .fstep.bad .b{background:var(--red)} .fstep.warn .b{background:var(--gold)} .fstep.good .b{background:var(--teal)}
.chain .ans{background:var(--ink);border-radius:6px} .chain .ans .lab{color:#A9C0FF} .chain .ans b{color:#fff}
.agent{border-radius:4px} .agent .ah .ic{background:var(--accent)!important} .agent .ah h4{font-family:var(--serif);font-weight:600}
.agent .trig{background:var(--red-50);border-color:#EAD3CF} .agent .trig i{color:var(--red)} .agent .acts li i{color:var(--accent)}
.vision{background:var(--surface-alt);border:1px solid var(--border);border-radius:6px;color:var(--ink)}
.vision:after{display:none}
.vision .vt .eyebrow{color:var(--accent)} .vision .vt h3{color:var(--ink-strong,#06141F);font-family:var(--serif);font-weight:600}
.prow{box-shadow:none;color:#fff;border-radius:4px}
.prow.p1{background:var(--accent)} .prow.p2{background:var(--accent-deep)} .prow.p3{background:#274B7A} .prow.p4{background:var(--ink)}
.prow small{opacity:.85}
.vbase{border-top:1px dashed var(--border-strong)} .vbase .bt{color:var(--ink-subtle)}
.vbase .pill{background:var(--surface);border:1px solid var(--border);color:var(--ink-muted)}
.vbus .pill{background:var(--gold-soft,#F6EFE2);border:1px solid #E6D6B6;color:var(--amber)}
.phase{border-radius:4px} .phase .ph{color:#fff}
.phase.ph1 .ph{background:var(--accent)} .phase.ph2 .ph{background:var(--accent-deep)} .phase.ph3 .ph{background:var(--ink)}
.phase .ph h4{font-family:var(--serif);font-weight:600} .phase .pb li i{color:var(--accent)}
.outcome{background:var(--surface-alt);border-color:var(--border);border-left:3px solid var(--accent)}
.outcome h4{font-family:var(--serif);font-weight:600} .outcome h4 i{color:var(--accent)} .outcome p b{color:var(--accent)}

/* ── Knowledge base (taxonomy) heads ── */
.kb-title,.d-title,.kgd-title{font-family:var(--serif)}

/* ── Footer → light ── */
.foot{background:var(--ink);color:#9FB0BD}
.foot .brand{color:#fff} .foot .brand .sq{background:var(--accent)}
.foot .r{color:#71808D}

/* ══════════════════════════════════════════════════════════════════
   EY ACCENT LAYER — charcoal + signature yellow spark + soft pastels,
   used sparingly for warmth and wayfinding (loaded last, wins).
   ══════════════════════════════════════════════════════════════════ */
/* Signature yellow on the hero rule + the emphasised headline word */
.hero:before{height:6px;width:120px;background:var(--spark)}
.hero h1 .grad{color:var(--ink);-webkit-text-fill-color:initial;
  background:linear-gradient(180deg,transparent 60%,var(--spark) 60%,var(--spark) 92%,transparent 92%);padding:0 3px}
.hero-eyebrow{color:var(--ink-muted)}
.hero-eyebrow:before{content:"";display:inline-block;width:18px;height:10px;background:var(--spark);margin-right:9px;vertical-align:middle}
.hero-chip .n{color:var(--ink)}
.hero-chip{border-top:3px solid transparent}
.hero-chain .hero-chip:nth-child(1){border-top-color:var(--pa-blue)}
.hero-chain .hero-chip:nth-child(2){border-top-color:var(--pa-lilac)}
.hero-chain .hero-chip:nth-child(3){border-top-color:var(--pa-mint)}
.hero-chain .hero-chip:nth-child(4){border-top-color:var(--spark-deep)}
.hero-chip{padding-top:14px}

/* Kicker: small yellow tick */
.sec-kick{color:var(--ink-muted);display:inline-flex;align-items:center;gap:9px}
.sec-kick:before{content:"";width:16px;height:9px;background:var(--spark);display:inline-block}

/* Value cards — flat, minimal, contemporary: clean white card, thin pastel
   top-rule, a soft pastel-tinted icon tile with the glyph in the accent
   colour. No fills, no shadows, no lift — a crisp border on hover. */
.qcard{background:var(--surface)!important;box-shadow:none!important;transition:border-color .18s ease}
.qcard:hover{transform:none;box-shadow:none!important;border-color:var(--ink)}
.qcard .ic{box-shadow:none!important;border-radius:10px;background:var(--surface-alt)!important;color:var(--ink)!important}
.qcard:before{height:3px;border-radius:0}
.qcard.q1:before{background:var(--pa-blue)!important} .qcard.q1 .ic{background:var(--p-blue)!important;color:var(--pa-blue)!important}
.qcard.q2:before{background:var(--pa-lilac)!important} .qcard.q2 .ic{background:var(--p-lilac)!important;color:var(--pa-lilac)!important}
.qcard.q3:before{background:var(--pa-mint)!important} .qcard.q3 .ic{background:var(--p-mint)!important;color:var(--pa-mint)!important}
.qcard.q4:before{background:var(--spark-deep)!important} .qcard.q4 .ic{background:var(--spark-soft)!important;color:#8A7400!important}
.q1 .tag i{color:var(--pa-blue)!important} .q2 .tag i{color:var(--pa-lilac)!important}
.q3 .tag i{color:var(--pa-mint)!important} .q4 .tag i{color:var(--pa-yellow)!important}

/* Stack rails — pastel wash, charcoal numeral */
.layer.l1 .rail{background:var(--p-blue)!important;color:var(--pa-blue)}
.layer.l2 .rail{background:var(--p-lilac)!important;color:var(--pa-lilac)}
.layer.l3 .rail{background:var(--p-mint)!important;color:var(--pa-mint)}
.layer.l4 .rail{background:var(--p-yellow)!important;color:var(--pa-yellow)}
.layer .feats i{color:var(--ink)}
.layer .body .ask{color:var(--pa-peach)}

/* Active demo tab — yellow chip */
.demo-tab.is-active .dt-n{background:var(--spark)!important;color:var(--ink)}
.demo-live .pulse,.ct-live .pulse{background:var(--teal)}

/* Walkthrough panel icons — pastel set */
.demo-caption i{color:var(--pa-peach)}
.src[data-src="aodb"]{--c:var(--pa-blue)}
.dco-head .av{background:var(--ink)!important}

/* Control tower — a whisper of warmth + yellow KPI accents */
.ct{background:var(--surface-alt)}
.ct-kpi:nth-child(1){box-shadow:inset 3px 0 0 var(--pa-blue)}
.ct-kpi:nth-child(2){box-shadow:inset 3px 0 0 var(--pa-lilac)}
.ct-kpi:nth-child(3){box-shadow:inset 3px 0 0 var(--spark-deep)}
.ct-kpi:nth-child(4){box-shadow:inset 3px 0 0 var(--pa-mint)}
.ct-foot .tag{background:var(--spark);color:var(--ink)}

/* Vision pyramid — charcoal base, pastel mid-bands, yellow apex line */
.vision{background:var(--surface-alt)}
.prow.p1{background:#3A3A46} .prow.p2{background:#2E2E38} .prow.p3{background:#23232C} .prow.p4{background:#1A1A24}
.prow.p4{border-bottom:4px solid var(--spark)}
.vbus .pill{background:var(--spark-soft);border-color:#EFE08A;color:#7A6A12}
.vbase .pill{background:var(--surface)}

/* Pilot phases — pastel headers */
.phase.ph1 .ph{background:var(--pa-blue)} .phase.ph2 .ph{background:var(--pa-lilac)} .phase.ph3 .ph{background:var(--ink)}
.phase .pb li i{color:var(--ink)}
.outcome{border-left-color:var(--spark);background:var(--spark-soft);border-color:#EFE08A}
.outcome h4 i{color:var(--pa-yellow)} .outcome p b{color:var(--ink)}

/* Buttons keep charcoal; yellow on hover for the primary CTAs */
.btn-run:hover,.kg-btn-primary:hover{background:var(--spark)!important;color:var(--ink)!important;filter:none}
.brand .sq,.foot .brand .sq{background:var(--ink)}
.foot .brand .sq{background:var(--spark);color:var(--ink)}
.kg-story .st-bar i{background:var(--spark)}
.chain .ans .lab,.kg-story .st-step{color:var(--spark)}

/* ════════ Stack layers — flat editorial rows, left accent stripe ════════ */
.stack{display:flex;flex-direction:column;gap:14px;margin-top:34px}
.layer{display:grid;grid-template-columns:64px 1fr;gap:20px;align-items:start;
  background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--border-strong);
  border-radius:8px;padding:26px 30px;overflow:visible;box-shadow:none;transition:border-color .18s ease,box-shadow .18s ease}
.layer:hover{box-shadow:var(--shadow-sm)}
@media(max-width:680px){.layer{grid-template-columns:1fr;gap:14px;padding:22px}}
.lyr-num{font-family:var(--serif);font-size:42px;font-weight:600;line-height:.9;letter-spacing:-.02em}
.lyr-main{min-width:0}
.lyr-head{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-bottom:11px}
.lyr-ic{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;font-size:17px;flex:none}
.lyr-head h3{font-family:var(--serif);font-weight:600;font-size:22px;color:var(--ink-strong,#1A1A24);margin:0;line-height:1.1}
.lyr-q{font-size:15px;font-weight:600;font-style:italic}
.lyr-desc{margin:0 0 16px;font-size:14.5px;line-height:1.66;color:var(--ink-muted);max-width:820px}
.lyr-desc b{color:var(--ink);font-weight:600} .lyr-desc em{font-style:italic;color:var(--ink)}
.lyr-caps{display:flex;gap:8px;flex-wrap:wrap}
.lyr-caps span{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--ink);
  background:var(--surface-alt);border:1px solid var(--border);border-radius:999px;padding:6px 13px}
.lyr-caps span i{font-size:12px}
.layer.l1{border-left-color:var(--pa-blue)} .layer.l1 .lyr-num,.layer.l1 .lyr-q{color:var(--pa-blue)} .layer.l1 .lyr-ic,.layer.l1 .lyr-caps span i{background:var(--p-blue);color:var(--pa-blue)}
.layer.l2{border-left-color:var(--pa-lilac)} .layer.l2 .lyr-num,.layer.l2 .lyr-q{color:var(--pa-lilac)} .layer.l2 .lyr-ic,.layer.l2 .lyr-caps span i{background:var(--p-lilac);color:var(--pa-lilac)}
.layer.l3{border-left-color:var(--pa-mint)} .layer.l3 .lyr-num,.layer.l3 .lyr-q{color:var(--pa-mint)} .layer.l3 .lyr-ic,.layer.l3 .lyr-caps span i{background:var(--p-mint);color:var(--pa-mint)}
.layer.l4{border-left-color:var(--spark-deep)} .layer.l4 .lyr-num,.layer.l4 .lyr-q{color:#8A7400} .layer.l4 .lyr-ic,.layer.l4 .lyr-caps span i{background:var(--spark-soft);color:#8A7400}
/* the .lyr-caps span i needs flat (not tile) look */
.lyr-caps span i{width:auto;height:auto;background:none!important;border-radius:0}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE — tablet & mobile (loaded last; overrides desktop sizes)
   ══════════════════════════════════════════════════════════════════ */
html{-webkit-text-size-adjust:100%}
body{overflow-x:hidden}
img,svg,canvas{max-width:100%}

@media(max-width:980px){
  .hero h1{font-size:42px}
  .sec-h{font-size:29px}
}
@media(max-width:760px){
  .wrap{padding:0 18px}
  .nav-in{padding:0 18px;gap:10px}
  .vsec{padding:42px 0 12px}
  .hero{padding:40px 0 24px}
  .hero:before{width:84px;height:5px}
  .hero h1{font-size:31px;line-height:1.15;margin:16px 0 14px}
  .hero p.lead{font-size:16px}
  .hero .sub{font-size:13.5px}
  .sec-h{font-size:25px}
  .sec-p{font-size:14px}
  /* hero chain → clean stacked rows */
  .hero-chain{flex-direction:column;align-items:stretch;border-top:none;padding-top:6px;margin-top:22px;gap:0}
  .hero-chip{flex:none;border-left:none;border-top-width:3px;padding:13px 0;min-width:0}
  .hero-chip:first-child{padding-left:0}
  /* demo / walkthrough */
  .demo-panel{padding:15px}
  .demo-stage{min-height:0}
  .demo-tab{font-size:12.5px;padding:9px 12px}
  .demo-caption{font-size:12px}
  .ct-top{flex-wrap:wrap;row-gap:4px}
  /* knowledge graph */
  #kg-svg{height:440px}
  .kg-detail{max-height:none}
  .kg-hint{display:none}
  .kg-story{left:10px;right:10px;bottom:10px;max-width:none}
  .tree{max-height:420px}
  /* stack rows already collapse at 680 (below) */
}
@media(max-width:520px){
  .wrap{padding:0 15px}
  .hero h1{font-size:26px}
  .sec-h{font-size:22px}
  .sec-kick{font-size:11px}
  .qcard .q{font-size:16px;min-height:0}
  .lyr-num{font-size:34px}
  .lyr-head{gap:10px}
  .lyr-head h3{font-size:19px}
  .lyr-q{font-size:13.5px}
  .ct-kpi .v{font-size:21px}
  .ct-kpi{padding:13px 13px}
  .chain{padding:16px}
  .vision{padding:26px 18px}
  .outcome{padding:16px 18px}
  .demo-url{max-width:none}
  .kg-toolbar{gap:8px}
  .kg-btn,.kg-search{font-size:12px}
}