/* ============================================================
   InfoVista Visualiser — design system
   Editorial dark canvas · serif display · mono engineering labels
   ============================================================ */

/* ---- local brand font: Antonio (shared with the Hppn landing page) ---- */
@font-face{
  font-family:"Antonio";
  src:url("../../assets/fonts/Antonio-Variable.ttf") format("truetype");
  font-weight:100 700; font-display:swap; font-style:normal;
}

:root{
  /* ---- ink / paper (dark, default) ---- */
  --ink:        #0f1317;
  --ink-1:      #141a20;
  --ink-2:      #1b232b;
  --ink-3:      #232e38;
  --paper:      #ece7dd;
  --paper-dim:  #a9b0b4;
  --paper-faint:#6c757d;
  --line:       rgba(236,231,221,0.12);
  --line-soft:  rgba(236,231,221,0.07);
  --panel-bg:   rgba(15,19,23,.86);
  --ink-on-sig: #15110a;   /* dark text that sits on the yellow accent */
  --signal-text:var(--signal);            /* yellow reads fine on dark */
  --web-line:   rgba(236,231,221,0.18);   /* faint connection lines */
  --hero-dot:   rgba(236,231,221,0.35);   /* hero constellation dots */
  --home-logo:  url("../brand/hppn-logo-white.png");
  --nav-bg:     color-mix(in srgb, var(--ink) 70%, transparent);

  /* illustration surfaces — themed so the diagrams never become black blobs */
  --fig-surface:    #141a20;              /* container / box fill */
  --fig-surface-2:  #1b232b;              /* interior / secondary fill */
  --fig-stroke-soft:rgba(236,231,221,.25);/* faint structural edge */
  --fig-line:       rgba(236,231,221,.5); /* manifest connectors */
  --fig-line-faint: rgba(236,231,221,.2); /* faint connectors */

  /* ---- accents (same L/C, hue varied) ---- */
  --signal:     oklch(0.78 0.125 200);   /* cyan — coordination */
  --signal-dim: oklch(0.78 0.125 200 / 0.18);
  --amber:      oklch(0.80 0.115 70);    /* warm — value / human */
  --amber-dim:  oklch(0.80 0.115 70 / 0.16);
  --violet:     oklch(0.74 0.11 300);    /* strategy layer tint */

  /* layer tints */
  --L-core:   oklch(0.78 0.125 200);
  --L-plat:   oklch(0.80 0.115 70);
  --L-strat:  oklch(0.74 0.11 300);
  --L-ent:    oklch(0.78 0.10 152);

  --maxw: 1280px;
  --gut: clamp(20px, 5vw, 80px);

  --serif: "Archivo", system-ui, sans-serif;
  --xpand: "Archivo Expanded", "Archivo", sans-serif;
  --display:"Antonio", "Arial Narrow", system-ui, sans-serif;
  --sans:  "IBM Plex Sans", system-ui, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, monospace;
  color-scheme: dark;
}

/* ---- light theme — a warm, deliberate companion to the dark canvas
       (espresso ink on ivory paper, manila illustration surfaces, the same signal yellow) ---- */
:root[data-theme="light"]{
  --ink:        #f3ede1;   /* warm ivory page */
  --ink-1:      #fbf7ef;   /* lifted paper card / band */
  --ink-2:      #ebe3d3;   /* raised surface / hover */
  --ink-3:      #ded3bf;   /* deepest surface */
  --paper:      #221d14;   /* warm espresso — main text */
  --paper-dim:  #5e5642;   /* warm taupe */
  --paper-faint:#847a62;   /* muted warm grey-tan */
  --line:       rgba(34,29,20,0.15);
  --line-soft:  rgba(34,29,20,0.07);
  --panel-bg:   rgba(251,247,239,.9);
  --ink-on-sig: #1f1708;
  --signal-text:#8a6700;                   /* rich brand gold — confident, AA on ivory */
  --web-line:   rgba(34,29,20,0.32);       /* connection lines read on paper */
  --hero-dot:   rgba(34,29,20,0.26);
  --home-logo:  url("../brand/hppn-logo-black.png");
  --nav-bg:     color-mix(in srgb, var(--ink) 76%, transparent);

  /* illustration surfaces: warm manila crates rather than black blobs */
  --fig-surface:    #ece1c9;
  --fig-surface-2:  #e2d6ba;
  --fig-stroke-soft:rgba(34,29,20,0.30);
  --fig-line:       rgba(34,29,20,0.42);
  --fig-line-faint: rgba(34,29,20,0.22);

  /* accents: deepened + a touch more chroma so they feel vivid, not washed */
  --signal:     oklch(0.58 0.14 200);
  --signal-dim: oklch(0.58 0.14 200 / 0.16);
  --amber:      oklch(0.60 0.13 70);
  --amber-dim:  oklch(0.60 0.13 70 / 0.16);
  --violet:     oklch(0.52 0.14 300);

  --L-core:   oklch(0.58 0.14 200);
  --L-plat:   oklch(0.60 0.13 70);
  --L-strat:  oklch(0.52 0.14 300);
  --L-ent:    oklch(0.54 0.12 152);

  color-scheme: light;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{ background:var(--signal); color:var(--ink); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
h1,h2,h3,h4{ font-weight:400; margin:0; }

/* ---------- type primitives ---------- */
.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--paper-faint);
  display:flex; align-items:center; gap:.7em;
}
.eyebrow .tick{ color:var(--signal-text); }
.mono{ font-family:var(--mono); }
.display{
  font-family:var(--display);
  font-weight:600;
  line-height:1.0;
  letter-spacing:0.0em;
  text-transform:uppercase;
  text-wrap:balance;
}
.display em{ font-style:normal; color:var(--signal-text); }
.lead{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(20px,2.4vw,26px);
  line-height:1.5;
  color:var(--paper);
  text-wrap:pretty;
}
.dim{ color:var(--paper-dim); }
.faint{ color:var(--paper-faint); }
.sig{ color:var(--signal-text); }
.amb{ color:var(--amber); }

.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut); }
section{ position:relative; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:80;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--gut);
  background:var(--nav-bg);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid transparent;
  transition:border-color .3s, padding .3s;
}
.nav.scrolled{ border-bottom-color:var(--line); padding-block:12px; }
.nav a, .nav button{ pointer-events:auto; }
.brand{
  font-family:var(--mono); font-size:13px; letter-spacing:0.12em;
  color:var(--paper); display:flex; align-items:center; gap:.55em;
}
.brand .star{ color:var(--signal-text); }
.nav-links{ display:flex; gap:26px; }
.nav-links a{
  font-family:var(--mono); font-size:12px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--paper-dim); transition:color .2s;
}
.nav-links a:hover{ color:var(--paper); }
@media(max-width:720px){ .nav-links{ display:none; } }
/* back-to-Hppn home link */
.nav-left{ display:flex; align-items:center; gap:13px; }
.nav-left .brand{ border-left:1px solid var(--line); padding-left:13px; }
.home-link{ display:flex; align-items:center; opacity:.9; transition:opacity .2s; }
.home-link:hover{ opacity:1; }
.home-link .home-mark{ width:30px; height:30px; background:var(--home-logo) center/contain no-repeat; }

/* right cluster + theme toggle (carried over from the Hppn landing page) */
.nav-right{ display:flex; align-items:center; gap:18px; }
.theme-toggle{
  width:38px; height:38px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:2px; background:transparent;
  color:var(--paper-dim); cursor:pointer; transition:.18s; flex:none;
}
.theme-toggle:hover{ border-color:var(--signal); color:var(--signal-text); }
.theme-toggle svg{ width:17px; height:17px; }
.theme-toggle .moon{ display:none; }
:root[data-theme="light"] .theme-toggle .sun{ display:none; }
:root[data-theme="light"] .theme-toggle .moon{ display:block; }
@media(max-width:720px){ .nav-right{ gap:0; } }

/* progress rail */
.progress{
  position:fixed; left:0; top:0; height:2px; z-index:90;
  background:var(--signal); width:0%;
  box-shadow:0 0 12px var(--signal);
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  min-height:100vh; display:flex; flex-direction:column; justify-content:center;
  padding-block:108px 92px;
  position:relative; overflow:hidden;
}
.hero canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.55; }
.hero .wrap{ position:relative; z-index:2; }
.hero-grad{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 80% at 70% 30%, transparent 40%, var(--ink) 78%);
}
.hero h1{
  font-size:clamp(46px, 8vw, 116px);
  line-height:1.05;
  margin:.16em 0 .34em;
}
.hero .sub{
  font-size:clamp(19px,2.1vw,25px);
  line-height:1.45;
  color:var(--paper);
}
/* Hero subtitle width is controlled inline (style="width:…") on the element itself,
   so the Edit feature can freely resize it with no max-width cap fighting it. */
.hero .meta{
  margin-top:40px; display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center;
}
.hero .meta .mono{ flex-basis:100%; margin-top:4px; }
.scroll-cue{
  position:absolute; bottom:22px; right:var(--gut); left:auto; transform:none;
  font-family:var(--mono); font-size:11px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--paper-faint); z-index:3; display:flex; flex-direction:column; align-items:center; gap:8px;
}
.scroll-cue .bar{ width:1px; height:36px; background:linear-gradient(var(--paper-faint), transparent); animation:cue 2.4s ease-in-out infinite; }
@keyframes cue{ 0%,100%{transform:scaleY(.4);opacity:.4} 50%{transform:scaleY(1);opacity:1} }

.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--mono); font-size:13px; letter-spacing:0.1em;
  padding:13px 20px; border:1px solid var(--line);
  border-radius:2px; color:var(--paper); background:transparent;
  cursor:pointer; transition:.22s; text-transform:uppercase;
}
.btn:hover{ border-color:var(--signal); color:var(--signal-text); transform:translateY(-1px); }
.btn-solid{ background:var(--signal); color:var(--ink-on-sig); border-color:var(--signal); }
.btn-solid:hover{ color:var(--ink-on-sig); filter:brightness(1.08); }

/* ============================================================
   ACT divider
   ============================================================ */
.act-tag{
  font-family:var(--mono); font-size:12px; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--paper-faint); padding:6px 0; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center; gap:10px 20px; flex-wrap:wrap;
}
.act-tag b{ color:var(--signal-text); font-weight:400; }

/* ============================================================
   SCROLLYTELLING : sticky figure + stepped prose
   ============================================================ */
.scrolly{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:0; }
.scrolly .sticky{
  position:sticky; top:0; height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:var(--gut);
}
.scrolly .steps{ padding:14vh var(--gut) 14vh; }
.step{ min-height:78vh; display:flex; flex-direction:column; justify-content:center; max-width:30rem; }
.step .stepnum{ font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:var(--paper-faint); margin-bottom:18px; }
.step h3 em{ color:var(--signal-text); font-style:normal; }
.step p{ color:var(--paper-dim); font-size:18px; }
.step p strong{ color:var(--paper); font-weight:600; }
.step.is-active h3{ color:var(--paper); }
/* subtle per-panel prev/next links — surface on the active step, brighten on hover */
.step-nav{ display:flex; gap:26px; margin-top:32px; opacity:0; transform:translateY(4px); transition:opacity .55s ease, transform .55s ease; pointer-events:none; }
.step.is-active .step-nav{ opacity:1; transform:none; pointer-events:auto; }
.step-link{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--paper-faint); text-decoration:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:color .25s ease; }
.step-link:hover{ color:var(--signal-text); }
.step-link .ar{ font-size:13px; line-height:1; transition:transform .25s ease; }
.step-link.step-next:hover .ar{ transform:translateY(2px); }
.step-link.step-prev:hover .ar{ transform:translateY(-2px); }
.intro-cue{ margin-top:40px; }
.intro-next:hover .ar{ transform:translateY(2px); }
/* chapter-to-chapter links under each Act-header sub-heading */
.sect-nav{ display:flex; gap:28px; margin-top:34px; }
@media(max-width:860px){
  .scrolly{ grid-template-columns:1fr; }
  .scrolly .sticky{ height:62vh; top:0; order:-1; }
  .scrolly .steps{ padding:6vh var(--gut); }
  .step{ min-height:64vh; }
}

/* the container/capability figure */
.figure-stage{ width:100%; max-width:560px; aspect-ratio:1/1; position:relative; }
.figure-stage svg{ width:100%; height:100%; overflow:visible; }

/* ---- figure micro-animations (run only while a state is on screen: .fig-on) ---- */
.figure-stage [data-state] .fig-wheel,
.figure-stage [data-state] .fig-prop,
.figure-stage [data-state] .fig-sheen,
.figure-stage [data-state] .fig-stack{ transform-box:fill-box; }
.figure-stage [data-state] .fig-wheel,
.figure-stage [data-state] .fig-prop{ transform-origin:center; }
.figure-stage [data-state] .fig-stack{ transform-origin:center top; }

/* steel box: a slow light-sheen sweep */
.figure-stage [data-state] .fig-sheen{ opacity:0; }
.figure-stage [data-state].fig-on .fig-sheen{ animation:figSheen 6.5s ease-in-out infinite; }
@keyframes figSheen{ 0%{ transform:translateX(-12px); opacity:0; } 4%{ opacity:.85; } 16%{ transform:translateX(58px); opacity:0; } 100%{ transform:translateX(58px); opacity:0; } }

/* standard edge: a container swings in on crane cables, lands flat, cables drop away */
.figure-stage [data-state] .fig-stack{ opacity:0; }
.figure-stage [data-state].fig-on .fig-stack{ animation:figStack 4.8s ease-in-out infinite; }
@keyframes figStack{ 0%{ transform:translateY(-42px) rotate(6deg); opacity:0; } 10%{ opacity:1; } 35%{ transform:translateY(-19px) rotate(-4deg); } 55%{ transform:translateY(-7px) rotate(2.4deg); } 72%,86%{ transform:translateY(0) rotate(0deg); opacity:1; } 94%{ opacity:0; } 100%{ transform:translateY(-42px) rotate(6deg); opacity:0; } }
.figure-stage [data-state] .fig-cables{ transform-box:fill-box; }
.figure-stage [data-state].fig-on .fig-cables{ animation:figCables 4.8s ease-in-out infinite; }
@keyframes figCables{ 0%,70%{ opacity:1; transform:translateY(0); } 84%,100%{ opacity:0; transform:translateY(-14px); } }
.figure-stage [data-state] .fig-lock{ stroke-opacity:0; }
.figure-stage [data-state].fig-on .fig-lock{ animation:figLock 4.8s ease-in-out infinite; }
@keyframes figLock{ 0%,68%{ stroke-opacity:0; } 75%{ stroke-opacity:.9; } 88%,100%{ stroke-opacity:0; } }

/* one box, every mode: spinning wheels + ship's propeller */
.figure-stage [data-state].fig-on .fig-wheel{ animation:figSpin 2.2s linear infinite; }
.figure-stage [data-state].fig-on .fig-prop{ animation:figSpin .55s linear infinite; }
@keyframes figSpin{ to{ transform:rotate(360deg); } }

/* capability container → manifest → interior: ONE persistent box, driven by .phase-* */
/* the box outline + interior are always present; the door, connectors and captions
   reveal in sequence as the reader scrolls capsule → manifest → inside           */

/* the door morphs from container skin to the cap label, then peels open on a hinge */
.figure-stage [data-state] .cap-door{ transform-box:fill-box; transform-origin:left center; transition:transform .85s cubic-bezier(.5,0,.25,1); }
.figure-stage [data-state] .cap-corr{ opacity:0; }
.figure-stage [data-state] .cap-label{ opacity:1; }
.figure-stage [data-state].phase-capsule .cap-corr{ animation:capMorphOut 1.2s ease both; }
@keyframes capMorphOut{ 0%,55%{ opacity:1; } 100%{ opacity:0; } }
.figure-stage [data-state].phase-capsule .cap-label{ animation:capMorphIn 1.2s ease both; }
@keyframes capMorphIn{ 0%,45%{ opacity:0; } 100%{ opacity:1; } }
.figure-stage [data-state].phase-inside .cap-door{ transform:scaleX(.045); }

/* manifest connectors grow from the same box's edge (transition-driven so they
   reveal in manifest and gracefully retract again when the door opens)            */
.figure-stage [data-state] .cap-nod{ opacity:0; transform-box:fill-box; transform-origin:center; transform:scale(0); transition:opacity .4s ease, transform .45s cubic-bezier(.34,1.5,.5,1); transition-delay:var(--d,0s); }
.figure-stage [data-state] .cap-grow{ stroke-dasharray:46; stroke-dashoffset:46; transition:stroke-dashoffset .55s ease, opacity .4s ease; transition-delay:var(--d,0s); }
.figure-stage [data-state] .cap-lab{ opacity:0; transition:opacity .45s ease; transition-delay:var(--d,0s); }
.figure-stage [data-state].phase-manifest .cap-nod{ opacity:1; transform:scale(1); }
.figure-stage [data-state].phase-manifest .cap-grow{ stroke-dashoffset:0; }
.figure-stage [data-state].phase-manifest .cap-lab{ opacity:1; }

/* interior interface ticks + per-phase captions */
.figure-stage [data-state] .cap-iface,
.figure-stage [data-state] .cap-cap{ opacity:0; transition:opacity .5s ease; }
.figure-stage [data-state].phase-capsule  .cap-cap-capsule{ opacity:1; }
.figure-stage [data-state].phase-manifest .cap-cap-manifest{ opacity:1; }
.figure-stage [data-state].phase-inside   .cap-cap-inside{ opacity:1; }
.figure-stage [data-state].phase-inside   .cap-iface{ opacity:1; }

/* 41 containers: cycle lit configurations */
.figure-stage [data-state] .net-node{ opacity:.3; transition:opacity .8s ease; transform-box:fill-box; transform-origin:center; }
.figure-stage [data-state] .net-node rect{ fill:var(--fig-surface); }
.figure-stage [data-state] .net-node.net-on{ opacity:1; }
.figure-stage [data-state] .net-link{ stroke:var(--web-line); stroke-opacity:1; transition:stroke .7s ease, stroke-opacity .7s ease; }
.figure-stage [data-state] .net-link.net-on{ stroke:var(--signal); stroke-opacity:.75; }

/* network entrance: the box becomes one node, the rest seed from the centre and spread, links fade in */
.figure-stage [data-state].net-intro .net-node{ animation:netSeed .7s cubic-bezier(.3,.7,.25,1) both; animation-delay:calc(var(--nd,0) * 1s); }
.figure-stage [data-state].net-intro.net-seed .net-node{ animation-delay:calc(.5s + var(--nd,0) * 1s); }
@keyframes netSeed{ from{ transform:translate(var(--ix,0),var(--iy,0)) scale(.16); opacity:0; } to{ transform:none; opacity:.3; } }
.figure-stage [data-state].net-intro .net-link{ animation:netLinkIn .6s ease both; animation-delay:.45s; }
.figure-stage [data-state].net-intro.net-seed .net-link{ animation-delay:1s; }
@keyframes netLinkIn{ from{ opacity:0; } to{ opacity:1; } }

/* ============================================================
   SECTION shells
   ============================================================ */
.band{ padding-block:clamp(80px,12vh,160px); }
.band-1{ background:var(--ink-1); }
.section-head{ max-width:54rem; margin-bottom:60px; }
.section-head h2{ font-size:clamp(34px,5.2vw,72px); margin:.18em 0 .35em; }
.section-head .lead{ max-width:62ch; }

/* ============================================================
   HOUSE (capability architecture)
   ============================================================ */
.house{ display:flex; flex-direction:column; gap:14px; }
.house-roof{
  text-align:center; font-family:var(--serif); font-weight:600;
  font-size:clamp(17px,1.8vw,22px); color:var(--paper); letter-spacing:-0.005em;
  padding:18px 24px; border:1px solid var(--line); border-bottom:none;
  background:linear-gradient(var(--signal-dim), transparent);
  position:relative;
}
.house-layer{ border:1px solid var(--line); padding:20px; }
.house-layer .layer-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px; gap:16px; }
.house-layer .layer-head .nm{ font-family:var(--mono); font-size:13px; letter-spacing:.18em; }
.house-layer .layer-head .bl{ color:var(--paper-faint); font-size:14px; font-family:var(--sans); letter-spacing:0; }
.cap-row{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.cap-card{
  border:1px solid var(--line); padding:16px; background:var(--ink-1);
  position:relative; cursor:default; transition:.2s; overflow:hidden;
  display:flex; flex-direction:column;
}
.cap-card:hover{ border-color:var(--cardc, var(--signal)); transform:translateY(-2px); }
.cap-card .ck{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--paper-faint); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.cap-card h4{ font-family:var(--serif); font-weight:600; font-size:20px; line-height:1.15; letter-spacing:-0.005em; margin:8px 0 10px; }
.cap-card p{ font-size:13.5px; color:var(--paper-dim); line-height:1.45; margin:0; }
.cap-card .mat{ display:flex; align-items:center; gap:8px; margin-top:auto; padding-top:14px; font-family:var(--mono); font-size:11px; color:var(--paper-faint); white-space:nowrap; }
.dots{ display:inline-flex; gap:3px; }
.dot{ width:7px; height:7px; border-radius:50%; background:var(--ink-3); }
.dot.on{ background:var(--cardc, var(--signal)); }
.dot.tgt{ box-shadow:0 0 0 1px var(--cardc, var(--signal)) inset; background:transparent; }
.layer-core{ --cardc:var(--L-core); }
.layer-plat{ --cardc:var(--L-plat); }
.layer-strat{ --cardc:var(--L-strat); }
.layer-ent{ --cardc:var(--L-ent); }

/* trapezoid roof — base spans the full width of the layers below */
.house-roof-wrap{ display:block; margin-bottom:2px; }
.house-roof{
  width:100%;
  clip-path:polygon(15% 0, 85% 0, 100% 100%, 0 100%);
  border:none;
  padding:26px 18% 22px;
  background:linear-gradient(var(--signal-dim), color-mix(in srgb,var(--signal) 4%, transparent));
  border-bottom:1px solid var(--line);
}
/* foundation row: P&E + Enterprise side by side */
.house-foundation{ display:grid; grid-template-columns:2fr 1fr; gap:14px; align-items:stretch; }
.house-foundation .house-layer{ display:flex; flex-direction:column; }
.house-foundation .cap-row{ margin-top:auto; }
@media(max-width:760px){ .house-foundation{ grid-template-columns:1fr; } }

/* ============================================================
   CONSTELLATION (graph)
   ============================================================ */
.graph-section{ background:var(--ink); }
.graph-stage{ position:relative; width:100%; height:78vh; min-height:560px; border:1px solid var(--line); background:
   radial-gradient(120% 120% at 50% 30%, var(--ink-1), var(--ink)); overflow:hidden; }
.graph-stage svg{ width:100%; height:100%; display:block; cursor:grab; }
.graph-stage svg:active{ cursor:grabbing; }
.gnode{ cursor:pointer; }
.gnode circle{ transition:fill .2s, stroke .2s, r .2s; }
.gnode circle:first-of-type{ fill:var(--ink); }
.glink{ stroke:var(--line); fill:none; transition:stroke .2s, stroke-opacity .2s; }
.glabel{ font-family:var(--mono); font-size:9px; fill:var(--paper-faint); pointer-events:none; opacity:0; transition:opacity .2s; }

.graph-legend{ display:flex; flex-wrap:wrap; gap:18px; margin-top:18px; font-family:var(--mono); font-size:12px; color:var(--paper-dim); }
.graph-legend .lg{ display:flex; align-items:center; gap:8px; }
.swatch{ width:11px; height:11px; border-radius:50%; }
.graph-controls{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.chip{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  padding:8px 13px; border:1px solid var(--line); border-radius:2px; color:var(--paper-dim);
  cursor:pointer; transition:.18s; background:transparent;
}
.chip:hover{ color:var(--paper); border-color:var(--paper-dim); }
.chip.active{ background:var(--paper); color:var(--ink); border-color:var(--paper); }

/* detail panel */
.gpanel{
  position:absolute; top:0; right:0; width:min(380px,90%); height:100%;
  background:var(--ink-1); border-left:1px solid var(--line);
  padding:28px; overflow-y:auto; transform:translateX(101%); transition:transform .35s cubic-bezier(.4,0,.1,1);
  z-index:5;
}
.gpanel.open{ transform:translateX(0); }
.gpanel .close{ position:absolute; top:18px; right:18px; font-family:var(--mono); font-size:18px; color:var(--paper-faint); cursor:pointer; background:none; border:none; }
.gpanel .gp-eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--paper-faint); text-transform:uppercase; }
.gpanel h3{ font-family:var(--serif); font-weight:700; font-size:27px; line-height:1.12; letter-spacing:-0.01em; margin:10px 0 6px; }
.gpanel .gp-layer{ font-family:var(--mono); font-size:12px; margin-bottom:18px; }
.gpanel p{ font-size:15px; color:var(--paper-dim); line-height:1.5; }
.gp-stat{ display:flex; gap:24px; margin:20px 0; padding:16px 0; border-block:1px solid var(--line); }
.gp-stat .s{ font-family:var(--mono); }
.gp-stat .s .v{ font-size:24px; color:var(--paper); }
.gp-stat .s .l{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--paper-faint); }
.gp-deps h5{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--paper-faint); margin:18px 0 10px; }
.gp-dep{ font-size:13px; padding:8px 0; border-bottom:1px solid var(--line-soft); color:var(--paper-dim); cursor:pointer; display:flex; align-items:center; gap:8px; }
.gp-dep:hover{ color:var(--paper); }
.gp-dep .arr{ color:var(--signal-text); font-family:var(--mono); }

/* ============================================================
   PRODUCTS
   ============================================================ */
.prod-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.prod{ background:var(--ink-1); padding:30px; transition:.25s; position:relative; min-height:230px; display:flex; flex-direction:column; }
.prod:hover{ background:var(--ink-2); }
.prod .pk{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--signal-text); }
.prod h3{ font-family:var(--serif); font-weight:700; font-size:30px; letter-spacing:-0.01em; margin:14px 0 12px; }
.prod p{ font-size:14.5px; color:var(--paper-dim); line-height:1.5; margin:0; }
.prod.platform{ grid-column:1/-1; }
.prod.platform h3{ font-size:40px; }
/* VistaOne — the bold target state, signature cyan */
.prod.prod-one{ background:linear-gradient(135deg, color-mix(in srgb,var(--signal) 30%, transparent), color-mix(in srgb,var(--signal) 5%, transparent)), var(--ink-1); border-color:color-mix(in srgb,var(--signal) 45%, var(--line)); }
.prod.prod-one:hover{ background:linear-gradient(135deg, color-mix(in srgb,var(--signal) 36%, transparent), color-mix(in srgb,var(--signal) 7%, transparent)), var(--ink-1); }
.prod.prod-one .pk{ color:var(--signal-text); }
/* VistAI — the agentic core, subtle */
.prod.prod-ai{ background:linear-gradient(135deg, color-mix(in srgb,var(--paper) 6%, transparent), transparent), var(--ink-1); }
.prod .tag{ margin-top:auto; padding-top:18px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--paper-faint); text-transform:uppercase; }

.streams{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:20px; }
.stream{ border:1px solid var(--line); padding:26px; }
.stream .sk{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--amber); }
.stream h4{ font-family:var(--serif); font-weight:600; font-size:24px; letter-spacing:-0.005em; margin:10px 0 10px; }
.stream p{ font-size:14px; color:var(--paper-dim); margin:0; }
@media(max-width:720px){ .streams{ grid-template-columns:1fr; } }

/* ============================================================
   MATURITY — graphic equaliser
   ============================================================ */
.eq{ border:1px solid var(--line); background:linear-gradient(var(--ink-1), var(--ink)); overflow-x:auto; }
.eq-head{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 24px; border-bottom:1px solid var(--line-soft); font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--paper-faint); }
.eq-key{ display:flex; gap:20px; }
.eq-key i{ font-style:normal; display:inline-flex; align-items:center; gap:7px; text-transform:uppercase; }
.eq-key .s{ width:12px; height:12px; border-radius:2px; }
.eq-key .s.on{ background:var(--signal); box-shadow:0 0 7px -1px var(--signal); }
.eq-key .s.gap{ background:transparent; box-shadow:inset 0 0 0 1.5px var(--signal); }
.eq-group{ display:flex; align-items:center; justify-content:center; gap:10px; font-family:var(--mono); font-size:12px; letter-spacing:.16em; color:var(--gc); padding:20px 24px 10px; }
.eq-group .gd{ width:8px; height:8px; border-radius:50%; background:var(--gc); box-shadow:0 0 8px -1px var(--gc); }
.eq-row{ display:flex; align-items:center; justify-content:center; gap:22px; padding:5px 24px; }
.eq-name{ font-family:var(--sans); font-size:13.5px; color:var(--paper-dim); white-space:nowrap; text-align:right; width:clamp(200px,38vw,400px); flex:none; overflow:hidden; text-overflow:ellipsis; }
.eq-row:hover .eq-name{ color:var(--paper); }
.eq-meter{ display:flex; gap:5px; align-items:center; flex:none; }
.eq-cell{ width:34px; height:24px; border-radius:2px; background:color-mix(in srgb,var(--paper) 5%, var(--ink-2)); }
.eq-cell.on{ background:var(--gc); box-shadow:0 0 6px -2px var(--gc); }
.eq-cell.gap, .eq-cell.peak{ background:transparent; box-shadow:inset 0 0 0 1.5px var(--gc); }
.eq-val{ font-family:var(--mono); font-size:12px; color:var(--paper-dim); white-space:nowrap; letter-spacing:.04em; }
.eq-val .ar{ color:var(--paper-faint); margin:0 2px; }
@media(max-width:720px){
  .eq-row{ gap:12px; padding:4px 14px; }
  .eq-name{ font-size:11.5px; white-space:normal; }
  .eq-cell{ width:24px; height:20px; }
}

/* ============================================================
   QUOTE / interlude
   ============================================================ */
.interlude{ padding-block:clamp(90px,16vh,200px); text-align:center; background:var(--ink-1); }
.interlude blockquote{
  font-family:var(--xpand); font-weight:700; font-size:clamp(28px,4.4vw,54px); line-height:1.16;
  max-width:20ch; margin:0 auto; letter-spacing:-0.012em; text-wrap:balance;
}
.interlude blockquote em{ font-style:normal; color:var(--signal-text); }
.interlude .attrib{ font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--paper-faint); margin-top:34px; }

/* ============================================================
   CLOSE
   ============================================================ */
.close{ padding-block:clamp(90px,16vh,180px); text-align:center; }
.close h2{ font-size:clamp(44px,8vw,120px); margin-bottom:.3em; }
.close .cta-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:40px; }
.footer{ border-top:1px solid var(--line); padding:40px var(--gut); display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; font-family:var(--mono); font-size:12px; color:var(--paper-faint); letter-spacing:.08em; }

/* reveal — content always visible; entrance is transform-only (never hides) */
.reveal{ opacity:1; }
.reveal.in{ animation: riseIn .7s cubic-bezier(.2,.6,.2,1) both; }
@keyframes riseIn{ from{ transform:translateY(18px); } to{ transform:none; } }

@media(prefers-reduced-motion:reduce){
  *{ animation:none !important; scroll-behavior:auto; }
}

/* ============================================================
   ACT III — DUPLO → LEGO
   ============================================================ */
.lego{ display:grid; grid-template-columns:1fr auto 1fr; gap:28px; align-items:stretch; margin-bottom:64px; }
.lego-panel{ border:1px solid var(--line); background:var(--ink-1); padding:26px; display:flex; flex-direction:column; }
.lego-head{ display:flex; flex-direction:column; gap:4px; margin-bottom:22px; }
.lego-head .lh-k{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--amber); }
.lego-head .lh-k.sig{ color:var(--signal-text); }
.lego-head .lh-t{ font-family:var(--serif); font-weight:600; font-size:19px; color:var(--paper); }
.block-stack{ display:flex; flex-direction:column; gap:10px; flex:1; justify-content:center; }
.block{ position:relative; border:1.5px solid var(--bc); background:color-mix(in srgb,var(--bc) 20%, var(--ink-2)); border-radius:5px; padding:18px 16px 14px; display:flex; align-items:flex-end; min-height:56px; box-shadow:inset 0 -4px 0 color-mix(in srgb,var(--bc) 36%, transparent); }
.block .studs{ position:absolute; top:-7px; left:16px; display:flex; gap:8px; }
.block .studs i{ width:14px; height:8px; border-radius:4px 4px 0 0; background:var(--bc); opacity:.6; }
.block .bl{ font-family:var(--serif); font-weight:700; font-size:17px; letter-spacing:-0.01em; color:var(--paper); }
.lego-arrow{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; color:var(--paper-faint); font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; }
.lego-arrow svg{ width:40px; color:var(--signal-text); }
.brick-field{ flex:1; display:grid; grid-template-columns:repeat(10,1fr); gap:4px; align-content:center; }
.brick{ aspect-ratio:1.7/1; border-radius:2px; background:var(--bc); opacity:.85; box-shadow:inset 0 -2px 0 rgba(0,0,0,.28); transition:transform .15s, opacity .15s; }
.brick:hover{ transform:translateY(-2px) scale(1.1); opacity:1; }
.lego-foot{ margin-top:20px; font-size:14px; color:var(--paper-dim); font-family:var(--serif); }
@media(max-width:880px){
  .lego{ grid-template-columns:1fr; gap:18px; }
  .lego-arrow{ flex-direction:row; gap:16px; }
  .lego-arrow svg{ transform:rotate(90deg); }
}

.compose-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.compose-col{ background:var(--ink-1); padding:30px; }
.compose-col .cc-k{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--signal-text); margin-bottom:16px; }
.compose-col h3{ font-family:var(--serif); font-weight:700; font-size:24px; letter-spacing:-0.01em; line-height:1.12; margin:0 0 12px; }
.compose-col p{ font-size:15px; color:var(--paper-dim); line-height:1.5; margin:0; }
.compose-col p strong{ color:var(--paper); font-weight:600; }
@media(max-width:820px){ .compose-grid{ grid-template-columns:1fr; } }

/* ============================================================
   TRACE BAR (graph compositions)
   ============================================================ */
.trace-bar{ display:flex; flex-wrap:wrap; gap:9px; align-items:center; margin-bottom:14px; }
.trace-label{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--paper-faint); margin-right:4px; }
.tracebtn{ font-family:var(--mono); font-size:12px; letter-spacing:.04em; padding:8px 13px; border:1px solid var(--line); border-radius:2px; color:var(--paper-dim); background:transparent; cursor:pointer; transition:.16s; display:inline-flex; align-items:center; gap:8px; }
.tracebtn:hover{ color:var(--paper); border-color:var(--paper-dim); }
.tracebtn .cnt{ font-size:10px; color:var(--paper-faint); border:1px solid var(--line); border-radius:10px; padding:1px 7px; }
.tracebtn.active{ background:var(--signal); color:var(--ink-on-sig); border-color:var(--signal); }
.tracebtn.active .cnt{ color:var(--ink-on-sig); border-color:rgba(21,17,10,.3); }
.tracebtn.svc{ border-style:dashed; color:var(--signal-text); }
.tracebtn.svc:hover{ border-color:var(--signal); }
.tracebtn.svc.active{ background:var(--signal); color:var(--ink-on-sig); }
.tracebtn.clear{ color:var(--paper-faint); }
.trace-caption{ position:absolute; left:20px; bottom:20px; width:min(420px,calc(100% - 40px)); background:var(--panel-bg); backdrop-filter:blur(8px); border:1px solid var(--line); border-left:2px solid var(--signal); padding:16px 18px; opacity:0; transform:translateY(8px); transition:.3s; pointer-events:none; z-index:4; }
.trace-caption.show{ opacity:1; transform:none; }
.trace-caption .tc-name{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--signal-text); margin-bottom:8px; }
.trace-caption .tc-body{ font-size:14px; color:var(--paper-dim); line-height:1.45; }
.trace-caption .tc-body b{ color:var(--paper); }
.trace-caption .tc-flag{ margin-top:10px; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--amber); }

/* ============================================================
   ONE LANGUAGE — hub
   ============================================================ */
.hub{ max-width:620px; margin:56px auto 0; }
.hub-svg{ width:100%; height:auto; overflow:visible; }
.hub-label{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; fill:var(--paper-dim); }
.hub-core-label{ font-family:var(--mono); font-size:9px; letter-spacing:.18em; fill:var(--signal-text); }
.hub-svg .spoke{ stroke:var(--web-line); stroke-dasharray:4 4; animation:flow 3s linear infinite; animation-delay:var(--d); }
@keyframes flow{ to{ stroke-dashoffset:-16; } }
@media(prefers-reduced-motion:reduce){ .hub-svg .spoke{ animation:none; } }

/* ============================================================
   SMALL SCREENS (phones ≤ 540px)
   The layout is fluid by default; these are targeted nudges.
   ============================================================ */
@media(max-width:540px){
  .hero h1{ font-size:clamp(40px,11vw,64px); }
  .hero .meta{ margin-top:30px; }
  .hero .meta .btn{ flex:1 1 auto; text-align:center; }
  .scroll-cue{ display:none; }
  .section-head{ margin-bottom:40px; }
  .graph-stage{ height:70vh; min-height:460px; }
  .trace-caption{ left:12px; bottom:12px; }
  /* equaliser: give the meter priority, keep names readable */
  .eq-head{ padding:14px 14px; font-size:10px; }
  .eq-row{ gap:10px; padding:4px 12px; }
  .eq-name{ width:auto; flex:1 1 auto; min-width:0; font-size:11.5px; }
  .eq-meter{ flex:0 0 auto; }
  .eq-cell{ width:20px; height:18px; }
  .prod.platform h3{ font-size:30px; }
  .interlude blockquote{ font-size:clamp(24px,7vw,34px); }
}