/* ============================================================
   StreamlineID — Stack sub-pages
   Adopts the StreamlineID Brand System v1
   (Space Grotesk · Inter · IBM Plex Mono)
   ============================================================ */
:root{
  --paper:#F4F4F2; --white:#fff; --navy:#0D1B4C; --navy0:#070C24; --navy1:#0E1A45;
  --purple:#6B46E5; --purpleb:#7C5CFF; --lav:#C4B5FD; --lavpale:#EDE9FE;
  --ink:#10131C; --mute:#5b6072; --line:#E2E1DC; --dline:rgba(255,255,255,.13);
  /* diagram owner colours (semantic — do not restyle) */
  --client:#0E9F8E; --fi:#E07B3A; --sid:#6B46E5; --api:#2563EB; --vendor:#64748B; --ai:#EC4899;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',Arial,sans-serif;color:var(--ink);background:var(--paper);
  line-height:1.6;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
.disp{font-family:'Space Grotesk',Arial,sans-serif;letter-spacing:-.03em;line-height:1}
.mono{font-family:'IBM Plex Mono',monospace;letter-spacing:.04em}
.wrap{max-width:1200px;margin:0 auto;padding:0 46px}
.kick{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--purple)}
.kick.lav{color:var(--lav)}
section{padding:96px 0;border-top:1px solid var(--line)}
.dark{background:var(--navy);color:#fff;border-top:1px solid rgba(255,255,255,.08)}
.dark .kick{color:var(--lav)}
.bg-white{background:#fff}

/* ---------- buttons ---------- */
.b{font:600 15px 'Inter';border-radius:12px;padding:15px 26px;cursor:pointer;border:none;
  display:inline-flex;align-items:center;gap:10px;transition:.2s;text-decoration:none}
.b svg,.b .ar{transition:transform .2s}
.b:hover svg,.b:hover .ar{transform:translateX(4px)}
.b-p{background:var(--purple);color:#fff}.b-p:hover{background:#7d5bf0}
.b-d{background:var(--navy);color:#fff}.b-d:hover{background:var(--navy1)}
.b-o{background:transparent;color:var(--navy);border:1.5px solid #D2CFE0}.b-o:hover{border-color:var(--purple);color:var(--purple)}
.b-g{background:rgba(255,255,255,.07);color:#fff;border:1px solid rgba(255,255,255,.22)}
.b-g:hover{background:rgba(255,255,255,.13);border-color:var(--lav)}

/* ---------- header ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:60;transition:.3s}
header.scrolled{background:rgba(7,12,36,.86);backdrop-filter:blur(12px);
  box-shadow:0 1px 0 rgba(255,255,255,.08)}
.nav{position:relative;display:flex;align-items:center;justify-content:space-between;padding:20px 46px;
  max-width:1200px;margin:0 auto}
.wm{font:700 21px 'Space Grotesk';color:#fff;display:inline-flex;align-items:center}.wm i{color:var(--lav);font-style:normal}
.links{display:flex;gap:26px;font-size:14px;color:#C7CBE0;flex-wrap:wrap}
.links a{color:inherit;transition:.2s}.links a:hover{color:#fff}
.links a.active{color:#fff;border-bottom:2px solid var(--lav);padding-bottom:2px}
.navcta{font:600 13px 'Inter';color:var(--navy0);background:#fff;border:none;
  padding:11px 18px;border-radius:10px;cursor:pointer;transition:.2s;text-decoration:none}
.navcta:hover{background:var(--lav)}

/* ---------- skip link / focus ---------- */
.skip{position:absolute;left:-999px;top:0;z-index:999;background:var(--purple);color:#fff;
  padding:12px 20px;border-radius:0 0 10px 0;font:600 13px 'Inter'}
.skip:focus{left:0}
a:focus-visible,button:focus-visible{outline:2px solid var(--lav);outline-offset:3px;border-radius:6px}

/* ---------- mobile nav toggle ---------- */
.menubtn{display:none;width:38px;height:38px;border:none;background:transparent;cursor:pointer;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;flex:0 0 auto}
.menubtn span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:.2s}
.menubtn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menubtn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menubtn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden;border:none;
  padding:170px 0 96px}
.hero.tall{padding:200px 0 120px}
.herobg{position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(1100px 520px at 82% -8%, rgba(124,92,255,.55), transparent 60%),
    radial-gradient(760px 460px at -5% 108%, rgba(196,181,253,.18), transparent 58%),
    linear-gradient(160deg,var(--navy) 0%, #0a1338 100%)}
.hero .wrap{position:relative;z-index:2}
.hero h1{color:#fff;font-family:'Space Grotesk';font-weight:600;
  font-size:clamp(40px,6vw,84px);line-height:.98;letter-spacing:-.04em;max-width:16ch;margin:22px 0 0}
.hero h1 .g{color:var(--lav)}
.hero .tagline{margin-top:18px;font:600 clamp(16px,1.8vw,21px) 'Space Grotesk';color:var(--lav);letter-spacing:-.01em}
.hero .sub{margin:14px 0 34px;max-width:60ch;font-size:clamp(16px,1.5vw,20px);color:#C7CBE0}
.ctas{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font:600 11px 'IBM Plex Mono';
  letter-spacing:.2em;text-transform:uppercase;color:var(--lav);
  border:1px solid rgba(255,255,255,.2);padding:7px 14px;border-radius:100px}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--ai);box-shadow:0 0 10px var(--ai)}

/* ---------- section heads ---------- */
.shead{max-width:820px;margin-bottom:48px}
.shead h2{font-family:'Space Grotesk';font-size:clamp(28px,4vw,48px);line-height:1.04;
  margin:16px 0 0;font-weight:600;color:var(--navy)}
.shead p{margin-top:18px;font-size:18px;color:var(--mute);max-width:64ch}
.dark .shead h2{color:#fff}.dark .shead p{color:#aeb3d0}

/* ---------- trust / stat strip ---------- */
.tstrip{background:var(--navy);padding:34px 0;border-top:1px solid rgba(255,255,255,.08)}
.tstrip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.tstat .n{font:600 32px 'Space Grotesk';letter-spacing:-.02em;color:#fff}
.tstat .n em{font-style:normal;color:var(--lav)}
.tstat .l{font-size:13px;color:#aeb3d0;margin-top:3px}

/* ---------- cards ---------- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;transition:.2s;position:relative}
.card:hover{border-color:var(--lav);transform:translateY(-3px);box-shadow:0 16px 38px rgba(13,27,76,.08)}
.card .ic{width:56px;height:56px;border-radius:14px;background:var(--lavpale);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;font-size:24px}
.card h3{font-size:18px;font-weight:600;margin-bottom:8px;font-family:'Space Grotesk';color:var(--navy)}
.card p{font-size:14px;color:var(--mute);line-height:1.55}
.card .tagrow{margin-top:14px;display:flex;flex-wrap:wrap;gap:7px}
.chip{font:600 10.5px 'IBM Plex Mono';letter-spacing:.05em;text-transform:uppercase;
  padding:5px 10px;border-radius:8px;background:var(--lavpale);color:#3C3489}
.chip.ai{background:#FDECF4;color:#b0247c}
/* owner accent bar */
.card.o-sid{border-top:3px solid var(--sid)}
.card.o-ai{border-top:3px solid var(--ai)}.card.o-ai .ic{background:#FDECF4}
.card.o-fi{border-top:3px solid var(--fi)}
.card.o-vendor{border-top:3px solid var(--vendor)}
.card.o-client{border-top:3px solid var(--client)}

/* ---------- access hierarchy panel ---------- */
.hierarchypanel{background:#fbfbfd;border:1px solid var(--line);border-radius:18px;padding:22px}

/* ---------- simplified stack preview (public-safe, no component-level detail) ---------- */
.stackprev{background:var(--navy);border-radius:20px;padding:30px 26px 22px;max-width:680px;margin:0 auto}
.stackprev-legend{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12)}
.stackprev-legend .l{display:flex;align-items:center;gap:7px;font-size:11.5px;color:#aeb3d0}
.stackprev-legend .sw{width:11px;height:11px;border-radius:3px;flex:0 0 11px}
.stackcta{text-align:center;margin-top:28px}
.card.o-api{border-top:3px solid var(--api)}

/* ---------- pillar link cards (hub) ---------- */
.pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.pillar-card{display:block;border:1px solid var(--line);border-radius:20px;padding:32px;
  background:#fff;transition:.2s;position:relative}
.pillar-card:hover{transform:translateY(-3px);box-shadow:0 22px 50px rgba(13,27,76,.1);border-color:var(--lav)}
.pillar-card .num{font:600 12px 'IBM Plex Mono';letter-spacing:.14em;color:var(--purple)}
.pillar-card h3{font:600 24px 'Space Grotesk';color:var(--navy);letter-spacing:-.02em;margin-top:8px}
.pillar-card p{font-size:14.5px;color:var(--mute);margin-top:10px}
.pillar-card .go{margin-top:18px;font:600 14px 'Space Grotesk';color:var(--purple);
  display:inline-flex;align-items:center;gap:7px}
.pillar-card .go .ar{transition:.2s}
.pillar-card:hover .go .ar{transform:translateX(4px)}

/* ---------- flow steps ---------- */
.flow{display:grid;gap:2px;margin-top:6px}
.flow .step{display:grid;grid-template-columns:44px 1fr;gap:18px;padding:20px 0;
  border-top:1px solid var(--line);align-items:start}
.flow .n{width:36px;height:36px;border-radius:10px;background:var(--navy);color:#fff;
  font:600 15px 'IBM Plex Mono';display:grid;place-items:center}
.flow .step.ai .n{background:var(--ai)}
.flow h4{font:600 17px 'Space Grotesk';color:var(--navy)}
.flow p{font-size:14px;color:var(--mute);margin-top:3px}

/* ---------- callouts ---------- */
.callout{border-left:4px solid var(--purple);background:var(--lavpale);
  border-radius:0 12px 12px 0;padding:20px 24px;margin-top:26px}
.callout h4{font:600 16px 'Space Grotesk';color:var(--navy)}
.callout p{font-size:14.5px;color:#4a4f63;margin-top:6px}
.callout.ai{border-left-color:var(--ai);background:#FDECF4}
.callout.ai h4{color:#a01c68}

/* ============================================================
   Diagram stage + engine (owner colours are semantic)
   ============================================================ */
.stage{position:relative;height:min(72vh,720px);border-radius:18px;overflow:hidden;
  border:1px solid var(--line);
  background:radial-gradient(circle at 1px 1px, #dcdce6 1px, transparent 0) 0 0/26px 26px, #fbfbfd}
.stage.full{height:min(82vh,860px)}
svg#svg{width:100%;height:100%;display:block;cursor:grab;touch-action:none}
svg#svg.grabbing{cursor:grabbing}
.controls{position:absolute;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:5}
.controls button{width:42px;height:42px;border:none;border-radius:11px;background:#fff;
  color:var(--navy);font-size:20px;font-weight:bold;cursor:pointer;
  box-shadow:0 4px 14px rgba(13,27,76,.14);transition:.15s}
.controls button:hover{background:var(--purple);color:#fff}
.controls button.reset{font:600 12px 'IBM Plex Mono'}
.hintbar{position:absolute;left:16px;bottom:16px;z-index:5;background:rgba(255,255,255,.92);
  border:1px solid #e5e5ee;border-radius:10px;padding:8px 13px;font-size:12px;color:#5a6377;
  max-width:420px;backdrop-filter:blur(6px)}
.legend{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:18px}
.legend .item{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--mute)}
.legend .sw{width:13px;height:13px;border-radius:4px;flex:0 0 auto}

.node rect.box{fill:#fff;stroke-width:2}
.node .title{font-size:15px;font-weight:bold;fill:var(--navy);font-family:'Space Grotesk'}
.node .sub{font-size:11px;fill:#6b7280}
.edge{fill:none;stroke-width:2}
.ai-edge{stroke-width:3;filter:drop-shadow(0 0 3px rgba(236,72,153,.55))}
.elabel{font-size:10.5px;fill:#475569}
.elabel-bg{fill:#fbfbfd;opacity:.92}
.zone{fill:rgba(107,70,229,.045);stroke:var(--purple);stroke-width:1.6;stroke-dasharray:7 6}
.zone-label{font-size:12.5px;font-weight:bold;fill:var(--purple)}
.ai-title{font-size:16px;font-weight:bold;fill:var(--ai);font-family:'Space Grotesk'}
.ai-feat{font-size:11.5px;fill:var(--navy)}
.ai-badge{font-size:11px;font-weight:bold;fill:var(--ai)}
.suite-badge{font-size:9.5px;font-weight:bold;fill:var(--sid)}
.ai-suite-badge{font-size:9.5px;font-weight:bold;fill:var(--ai)}
.opt-badge{font-size:9.5px;font-weight:bold;fill:var(--api)}
.ai-pill{font-size:9.5px;font-weight:bold;fill:var(--ai)}
.bus-label{font-size:11px;font-weight:bold;fill:var(--sid)}
.etl-title{font-size:13px;font-weight:bold;fill:var(--sid)}
.etl-sub{font-size:11px;fill:#6b7280}
.or-label{font-size:12px;font-weight:bold;fill:#6b7280}
.int-note{font-size:12px;font-weight:bold;fill:var(--purple)}
.node{cursor:pointer}

.node.dim{opacity:.14;transition:opacity .2s}
.edge.dim{opacity:.07;transition:opacity .2s}
.lbl.dim{opacity:.07}
.diagram.hoverfocus .node{opacity:.16;transition:opacity .15s}
.diagram.hoverfocus .edge,.diagram.hoverfocus .lbl{opacity:.06;transition:opacity .15s}
.diagram.hoverfocus .node.hot{opacity:1}
.diagram.hoverfocus .edge.hot{opacity:1}

/* ---------- footer ---------- */
footer{background:var(--navy0);color:#aeb3d0;border-top:1px solid rgba(255,255,255,.08)}
footer .wrap{padding-top:56px;padding-bottom:40px;display:grid;
  grid-template-columns:1.5fr 1fr 1fr;gap:34px}
footer .wm{font:700 20px 'Space Grotesk';color:#fff;display:inline-flex;align-items:center}
footer .about{font-size:14px;color:#8a90b3;max-width:40ch;margin-top:14px}
footer .smh{font:600 11px 'IBM Plex Mono';letter-spacing:.16em;text-transform:uppercase;
  color:var(--lav);margin-bottom:14px}
footer a{display:block;font-size:14px;color:#c7cbe0;padding:5px 0;transition:.15s}
footer a:hover{color:#fff}
.fbottom{border-top:1px solid rgba(255,255,255,.1);padding:18px 46px;text-align:center;
  font:500 11.5px 'IBM Plex Mono';letter-spacing:.08em;color:#7d87b8}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .grid3,.grid4{grid-template-columns:repeat(2,1fr)}
  .pillars{grid-template-columns:1fr}
  .tstrip .wrap{grid-template-columns:repeat(2,1fr)}
  footer .wrap{grid-template-columns:1fr}
  .menubtn{display:flex;order:3}
  .navcta{order:2}
  .links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:2px;
    background:rgba(7,12,36,.97);backdrop-filter:blur(12px);padding:14px 24px 18px;
    border-bottom:1px solid rgba(255,255,255,.1);box-shadow:0 18px 30px rgba(0,0,0,.25)}
  .links.open{display:flex}
  .links a{padding:11px 0;border-top:1px solid rgba(255,255,255,.08)}
  .links a:first-child{border-top:none}
}
@media(max-width:560px){
  .grid2,.grid3,.grid4{grid-template-columns:1fr}
  .wrap{padding:0 24px}
  .nav{padding:16px 24px}
  .navcta{font-size:12px;padding:10px 14px}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}