/* ============================================================
   VEEVRA — Cinematic launch site
   Dark / blue-cyan, glassmorphism, scroll-driven.
   ============================================================ */

:root{
  --bg0:#06101d;
  --bg1:#0a1a2f;
  --cyan:#22d3d0;
  --blue:#4da3ff;
  --ink:#eaf2ff;
  --mut:#8aa2c0;
  --line:rgba(140,180,230,.16);
  --glass:rgba(18,38,66,.45);
  --glass-bd:rgba(120,170,230,.18);
  --maxw:1300px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}            /* Lenis drives the scroll */
body{
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 800px at 70% -10%, rgba(34,211,208,.03), transparent 64%),
    radial-gradient(1000px 900px at 10% 110%, rgba(77,163,255,.035), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1) 60%, var(--bg0));
  background-attachment:fixed;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---- persistent 3D world ---- */
#world{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(115% 115% at 50% 48%, transparent 42%, rgba(2,8,18,.72) 100%)}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---- layout ---- */
main{position:relative;z-index:2}
.scene{position:relative;min-height:100vh;display:flex;align-items:center;padding:14vh 6vw}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto}
.wrap.center{text-align:center;display:flex;flex-direction:column;align-items:center;position:relative}
.wrap.two{display:grid;grid-template-columns:1fr 1fr;gap:4vw;align-items:center}
.col{min-width:0}

/* ---- type ---- */
.eyebrow{font-size:.8rem;letter-spacing:.42em;text-transform:uppercase;color:var(--cyan);
  font-weight:600;margin-bottom:1.4rem}
.eyebrow.big{font-size:1rem;letter-spacing:.6em;margin-top:2rem}
h1,h2{font-weight:700;letter-spacing:-.02em;line-height:1.04}
h2{font-size:clamp(2.2rem,5.2vw,4.4rem);margin-bottom:1.6rem;color:#f5f9ff}
.display{font-size:clamp(2.8rem,8vw,7rem);font-weight:800;letter-spacing:-.03em}
.lede{font-size:clamp(1.05rem,2vw,1.5rem);color:var(--mut);margin-top:1.4rem;font-weight:400}
.body{font-size:clamp(1rem,1.5vw,1.25rem);color:var(--mut);max-width:42ch;line-height:1.6;font-weight:300}
.caption{color:var(--mut);font-size:.95rem;margin-top:2rem;max-width:60ch;line-height:1.6}
.dim{color:var(--mut)}

/* gradient text on accents */
h1,.display{background:linear-gradient(120deg,#fff 20%,var(--cyan) 60%,var(--blue));
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* readability — keep every headline legible over the moving field */
h2,.lede,.eyebrow,.body,.caption{text-shadow:0 2px 22px rgba(2,8,18,.9),0 1px 5px rgba(2,8,18,.72)}
h1,.display{filter:drop-shadow(0 3px 24px rgba(2,8,18,.9))}
.wrap.center>.eyebrow,.wrap.center>h1,.wrap.center>h2,.wrap.center>.lede{position:relative}
/* soft focal scrim behind centred copy so text never fights the particles */
.wrap.center::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:120%;height:128%;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 55% at 50% 50%, rgba(4,10,20,.62), rgba(4,10,20,.3) 55%, transparent 76%)}

/* ---- hero ---- */
.brandmark{width:108px;height:108px;margin:0 auto 1.6rem;display:grid;place-items:center}
.brandmark img{width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 0 26px rgba(34,211,208,.55)) drop-shadow(0 0 8px rgba(77,163,255,.4))}
.scrollcue{margin-top:4rem;color:var(--mut);font-size:.75rem;letter-spacing:.3em;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:.6rem}
.scrollcue span{width:1px;height:42px;background:linear-gradient(var(--cyan),transparent);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1)}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---- challenge tiles ---- */
.chaos{position:absolute;inset:0;z-index:-1;pointer-events:none}
.chaos .tile{position:absolute;padding:.5rem .9rem;border:1px solid rgba(255,90,110,.35);border-radius:10px;
  font-size:.8rem;color:#ffb3bd;background:rgba(60,12,22,.35);backdrop-filter:blur(3px);white-space:nowrap}
.chaos .tile:nth-child(1){top:18%;left:12%}
.chaos .tile:nth-child(2){top:30%;left:74%}
.chaos .tile:nth-child(3){top:62%;left:20%}
.chaos .tile:nth-child(4){top:74%;left:66%}
.chaos .tile:nth-child(5){top:22%;left:48%}
.chaos .tile:nth-child(6){top:54%;left:84%}
.chaos .tile:nth-child(7){top:80%;left:40%}
.chaos .tile:nth-child(8){top:42%;left:8%}

/* ---- pillars ---- */
.pillars{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2.4rem;max-width:46rem}
.pillars span{padding:.55rem 1rem;border:1px solid var(--glass-bd);border-radius:999px;
  background:var(--glass);font-size:.9rem;color:var(--ink);backdrop-filter:blur(8px)}

/* ---- glass cards grid ---- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:3rem}
.glass{border:1px solid var(--glass-bd);border-radius:16px;background:var(--glass);backdrop-filter:blur(14px);
  padding:1.2rem 1.3rem;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.glass header{display:flex;align-items:center;gap:.55rem;font-weight:600;margin-bottom:.9rem;font-size:1rem}
.glass ul{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.glass li{display:flex;justify-content:space-between;font-size:.85rem;color:var(--mut)}
.glass .ok{color:var(--cyan)}.glass .mut{color:#6b86a8}
.dot{width:9px;height:9px;border-radius:50%}
.dot.c{background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
.dot.b{background:var(--blue);box-shadow:0 0 12px var(--blue)}

/* ---- document + ocr ---- */
.docmock{position:relative;border:1px solid var(--glass-bd);border-radius:14px;background:rgba(8,18,34,.6);
  padding:1.4rem;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.4)}
.docmock .doc-head{font-size:.8rem;color:var(--cyan);margin-bottom:1rem;letter-spacing:.05em}
.doc-lines i{display:block;height:9px;border-radius:4px;margin:.6rem 0;
  background:linear-gradient(90deg,rgba(140,180,230,.35),rgba(140,180,230,.08))}
.doc-lines i:nth-child(2n){width:88%}.doc-lines i:nth-child(3n){width:72%}
.scanline{position:absolute;left:0;right:0;top:0;height:60px;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(34,211,208,.28),transparent);
  box-shadow:0 0 24px rgba(34,211,208,.5)}
.fields{margin-top:1.2rem;display:flex;flex-direction:column;gap:.6rem}
.ocr-field{display:grid;grid-template-columns:1fr 1.4fr auto;gap:.8rem;align-items:center;
  border:1px solid var(--glass-bd);border-radius:10px;background:var(--glass);padding:.6rem .9rem;font-size:.85rem}
.ocr-field span{color:var(--mut)}.ocr-field b{font-weight:600}
.ocr-field em{font-style:normal;color:var(--cyan);font-size:.78rem}
.ocr-field.low{border-color:rgba(255,180,80,.45)}.ocr-field.low em{color:#ffc46b}

/* ---- pipeline chips ---- */
.pipeline{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem}
.pipeline span{position:relative;padding:.45rem .85rem;border:1px solid var(--glass-bd);border-radius:8px;
  font-size:.8rem;background:var(--glass)}
.pipeline span:not(:last-child)::after{content:"→";color:var(--mut);margin-left:.55rem;margin-right:-.2rem}

/* ---- knowledge graph svg ---- */
.kg{width:100%;height:auto}
.kg-edge{stroke:var(--blue);stroke-width:1.4;opacity:.5;fill:none}
.kg-node circle{fill:#0a1a2f;stroke:var(--cyan);stroke-width:1.6}
.kg-node.hub circle{fill:url(#kgGrad);stroke:none;filter:url(#kgGlow)}
.kg-node text{fill:var(--ink);font-size:11px;text-anchor:middle;font-weight:500}

/* ---- agents ---- */
.agentpanel{border:1px solid var(--glass-bd);border-radius:16px;background:var(--glass);backdrop-filter:blur(14px);
  padding:1.4rem;box-shadow:0 30px 70px rgba(0,0,0,.4)}
.agentpanel header{display:flex;align-items:center;gap:.6rem;font-weight:600;margin-bottom:1.2rem}
.pulse{width:10px;height:10px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 0 rgba(34,211,208,.6);
  animation:pulse 1.6s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 12px rgba(34,211,208,0)}100%{box-shadow:0 0 0 0 rgba(34,211,208,0)}}
.steps{list-style:none;display:flex;flex-direction:column;gap:.9rem}
.steps li{display:flex;align-items:center;gap:.8rem;color:var(--mut);opacity:.5;transition:.4s}
.steps li.active{color:var(--ink);opacity:1}
.tick{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--mut);flex:0 0 auto;position:relative}
.steps li.active .tick{border-color:var(--cyan);background:var(--cyan)}
.steps li.active .tick::after{content:"";position:absolute;left:6px;top:3px;width:5px;height:9px;
  border:solid #06101d;border-width:0 2px 2px 0;transform:rotate(45deg)}
.agentbar{height:5px;border-radius:999px;background:rgba(140,180,230,.15);margin-top:1.4rem;overflow:hidden}
.agentbar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--blue))}

/* ---- governance ---- */
.gov{display:grid;grid-template-columns:1.4fr 1fr;gap:1.2rem;margin-top:2.4rem}
.redact p{line-height:2;font-size:1.05rem}
.pii{padding:.05em .35em;border-radius:5px;background:rgba(34,211,208,.12);transition:.3s}
.tag{display:inline-block;margin-top:1rem;font-size:.75rem;color:var(--cyan);letter-spacing:.08em}
.audit{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.chain{display:flex;gap:.4rem}
.chain i{width:34px;height:34px;border-radius:8px;border:1px solid var(--glass-bd);background:rgba(34,211,208,.08);
  position:relative}
.chain i:not(:last-child)::after{content:"";position:absolute;right:-.45rem;top:50%;width:.4rem;height:2px;background:var(--mut)}
.badges{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem}
.badges span{padding:.55rem 1rem;border:1px solid var(--glass-bd);border-radius:999px;background:var(--glass);font-size:.85rem}

/* ---- connectors ring ---- */
.ring{position:relative;width:min(60vw,460px);height:min(60vw,460px);margin:3rem auto}
.ring .core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:96px;height:96px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#fff;
  background:linear-gradient(140deg,var(--cyan),var(--blue));box-shadow:0 0 50px rgba(34,211,208,.5);z-index:2}
.ring .node{position:absolute;left:50%;top:50%;padding:.5rem .84rem;border-radius:8px;font-size:.85rem;
  border:1px solid var(--glass-bd);background:var(--glass);backdrop-filter:blur(8px);white-space:nowrap;
  transform:translate(-50%,-50%)}

/* ---- capabilities grid ---- */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:3rem;width:100%;max-width:860px;perspective:1200px}
.grid div{padding:1.6rem 1rem;border:1px solid var(--glass-bd);border-radius:14px;background:var(--glass);
  backdrop-filter:blur(10px);font-weight:600;font-size:.95rem;transform-style:preserve-3d}

/* ---- v-workspace ---- */
.bright{background:radial-gradient(900px 600px at 50% 0%,rgba(77,163,255,.16),transparent 60%)}
.usecases{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;margin-top:3rem}
.uc{border:1px solid var(--glass-bd);border-radius:16px;background:var(--glass);backdrop-filter:blur(12px);padding:1.4rem}
.uc h3{font-size:1.05rem;margin-bottom:.5rem}
.uc p{color:var(--mut);font-size:.85rem;line-height:1.5}

/* ---- provenance ---- */
.provenance{padding:1.5rem 1.6rem}
.provenance header{font-weight:600;margin-bottom:1rem;color:var(--cyan)}
.provenance dl{display:grid;grid-template-columns:1fr;gap:.55rem}
.provenance dl div{display:grid;grid-template-columns:120px 1fr;font-size:.88rem}
.provenance dt{color:var(--mut)}.provenance dd{font-weight:500}
.trace{display:inline-block;margin-top:1.2rem;color:var(--blue);font-size:.85rem;cursor:pointer}

/* ---- government ---- */
.shield{font-size:64px;color:var(--cyan);text-shadow:0 0 40px rgba(34,211,208,.6);margin-bottom:1.4rem}
.modes{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem;margin-top:2.4rem}
.modes span{padding:.6rem 1.2rem;border:1px solid var(--glass-bd);border-radius:999px;background:var(--glass);
  font-size:.95rem;font-weight:500}

/* ---- reveal base (gated behind .js so content is visible if JS fails) ---- */
.js .reveal{opacity:0;transform:translateY(34px)}

/* ---- progress + controls ---- */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:30;background:rgba(255,255,255,.05)}
.progress span{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;
  will-change:transform;background:linear-gradient(90deg,var(--cyan),var(--blue))}
.controls{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:31;display:flex;gap:.5rem;
  align-items:center;padding:.5rem .6rem;border-radius:14px;border:1px solid var(--glass-bd);
  background:rgba(8,18,34,.72);backdrop-filter:blur(14px);font-size:.82rem;transition:opacity .4s}
.controls button{cursor:pointer;color:var(--ink);background:rgba(255,255,255,.06);border:1px solid var(--glass-bd);
  border-radius:9px;padding:.45rem .8rem;font:inherit}
.controls button:hover{background:rgba(34,211,208,.16);border-color:var(--cyan)}
.controls #play{background:linear-gradient(120deg,var(--cyan),var(--blue));color:#06101d;font-weight:600;border:none}
.controls label{color:var(--mut);display:flex;align-items:center;gap:.35rem}
.controls input{width:58px;background:rgba(255,255,255,.06);border:1px solid var(--glass-bd);border-radius:7px;
  color:var(--ink);padding:.3rem .4rem;font:inherit}

/* clean recording: hide all UI + cursor */
body.playing{cursor:none}
body.playing .controls,body.playing .progress,body.playing .scrollcue,body.ui-hidden .controls,body.ui-hidden .progress{
  opacity:0;pointer-events:none}

/* ---- silent chapter marker (names the morphing concept) ---- */
.chapter{position:fixed;left:50%;bottom:5.5rem;transform:translateX(-50%);z-index:20;pointer-events:none;
  font-size:.74rem;font-weight:600;letter-spacing:.42em;text-transform:uppercase;color:var(--cyan);
  opacity:0;transition:opacity .7s ease;text-align:center;white-space:nowrap;
  text-shadow:0 0 24px rgba(2,8,18,.9)}
.chapter.show{opacity:.8}
body.playing .chapter{bottom:3.2rem}

/* ---- countdown ---- */
.countdown{position:fixed;inset:0;z-index:40;display:none;align-items:center;justify-content:center;
  font-size:18vw;font-weight:800;color:#fff;background:rgba(4,10,20,.6);
  text-shadow:0 0 60px rgba(34,211,208,.6)}
.countdown.show{display:flex}

/* ============================================================
   REAL PRODUCT SCREENSHOTS — animated browser frames + overlays
   ============================================================ */
.frame{position:relative;margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--glass-bd);
  background:#0a1626;box-shadow:0 52px 110px rgba(0,0,0,.62),0 12px 36px rgba(0,0,0,.5),inset 0 0 0 1px rgba(120,170,230,.07)}
.frame .bar{display:flex;align-items:center;gap:.42rem;padding:.55rem .85rem;
  background:rgba(10,22,40,.92);border-bottom:1px solid var(--glass-bd)}
.frame .bar i{width:9px;height:9px;border-radius:50%;background:rgba(140,180,230,.45)}
.frame .bar span{margin-left:.55rem;font-size:.72rem;color:var(--mut);letter-spacing:.04em}
.frame img{display:block;width:100%;height:auto}
.frame.sm{margin-top:1.6rem;max-width:540px}
.frame.wide{margin-top:2.4rem}

/* configuration: real-screen gallery */
.shots{display:grid;gap:1.2rem;margin-top:3rem}
.shots.three{grid-template-columns:repeat(3,1fr)}

/* OCR scan overlays the real document UI */
.shotwrap{position:relative;overflow:hidden;line-height:0}
.shotwrap img{width:100%;display:block}

/* layered overlays float over the screenshot they explain */
.col.stack{position:relative}
.fields.float{position:absolute;right:-5%;bottom:-9%;width:74%;z-index:6}
.kg.float{position:absolute;right:-3%;bottom:-6%;width:54%;height:auto;z-index:6;
  background:rgba(8,18,34,.85);border:1px solid var(--glass-bd);border-radius:14px;padding:.6rem;
  backdrop-filter:blur(8px);box-shadow:0 24px 60px rgba(0,0,0,.5)}
.provenance.float{position:absolute;left:-6%;bottom:-9%;width:82%;z-index:6}

/* v-workspace showcase */
.vwshow{display:grid;grid-template-columns:1.5fr 1fr;gap:1.4rem;margin-top:3rem;align-items:start}
.vwthumbs{display:grid;gap:1.4rem}

/* ============================================================
   PRODUCTION HARDENING — loader, a11y, cross-browser, responsive
   ============================================================ */

/* ---- premium loader (only with JS; without JS the page shows normally) ---- */
.loader{display:none}
.js .loader{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:1.5rem;background:
    radial-gradient(1200px 800px at 70% -10%, rgba(34,211,208,.10), transparent 60%),
    radial-gradient(1000px 900px at 10% 110%, rgba(77,163,255,.12), transparent 55%),
    linear-gradient(180deg,var(--bg0),var(--bg1) 60%,var(--bg0));
  transition:opacity .8s ease;will-change:opacity}
.loader.done{opacity:0;pointer-events:none}
.loader-mark{width:88px;height:88px;object-fit:contain;
  filter:drop-shadow(0 0 30px rgba(34,211,208,.6));animation:loaderPulse 1.8s ease-in-out infinite}
@keyframes loaderPulse{0%,100%{transform:scale(1);opacity:.92}50%{transform:scale(1.06);opacity:1}}
.loader-bar{width:200px;height:3px;border-radius:999px;background:rgba(140,180,230,.18);overflow:hidden}
.loader-bar span{display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--cyan),var(--blue));transition:width .35s ease}

/* ---- accessibility: focus + reduced UI noise ---- */
:focus{outline:none}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}
.controls button{transition:background .25s ease,border-color .25s ease,transform .12s ease,opacity .25s ease}
.controls button:active{transform:translateY(1px)}
.controls button[disabled],.controls input[disabled]{opacity:.45;cursor:not-allowed}
.trace{transition:color .25s ease,transform .25s ease}
.trace:hover{color:var(--cyan);transform:translateX(3px)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- screenshot stability: reserve space, never stretch/jump/blur ---- */
.frame img,.shotwrap img{aspect-ratio:8/5;object-fit:cover;width:100%;height:auto;filter:contrast(1.05) saturate(1.04)}
.frame{-webkit-backface-visibility:hidden;backface-visibility:hidden}
#caps div{-webkit-backface-visibility:hidden;backface-visibility:hidden}

/* ---- Safari/iOS: backdrop-filter needs the -webkit- prefix ---- */
.chaos .tile{-webkit-backdrop-filter:blur(3px)}
.pillars{-webkit-backdrop-filter:blur(8px)}
.glass{-webkit-backdrop-filter:blur(14px)}
.agentpanel{-webkit-backdrop-filter:blur(14px)}
.ring .node{-webkit-backdrop-filter:blur(8px)}
.grid div{-webkit-backdrop-filter:blur(10px)}
.uc{-webkit-backdrop-filter:blur(12px)}
.controls{-webkit-backdrop-filter:blur(14px)}
.kg.float{-webkit-backdrop-filter:blur(8px)}

/* ---- mobile viewport units (Safari URL-bar safe) ---- */
@supports (height:100dvh){
  #world{height:100dvh}
  .scene{min-height:100dvh}
}

/* ============================================================
   LIVING INTERFACES — animated product UIs (Phase 2)
   ============================================================ */
.live-dot{color:var(--cyan);font-size:.62rem;font-weight:700;letter-spacing:.12em;margin-right:.5rem}
.live-dot::first-letter{color:#2ee6a6}

/* --- live executive dashboard --- */
.live-dash{border:1px solid var(--glass-bd);border-radius:18px;background:var(--glass);backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);box-shadow:0 40px 90px rgba(0,0,0,.5);padding:1.3rem 1.4rem;margin-top:2.6rem;
  position:relative;overflow:hidden}
.ld-head{font-size:.8rem;color:var(--mut);letter-spacing:.04em;margin-bottom:1.1rem;display:flex;align-items:center}
.ld-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.2rem}
.ld-stat{border:1px solid var(--glass-bd);border-radius:12px;background:rgba(8,18,34,.5);padding:.9rem 1rem}
.ld-num{display:block;font-size:clamp(1.4rem,2.6vw,2rem);font-weight:700;color:#fff;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;line-height:1.1}
.ld-stat label{font-size:.72rem;color:var(--mut);letter-spacing:.02em}
.ld-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:1rem;align-items:stretch}
.ld-chart{display:flex;align-items:flex-end;gap:5px;height:108px;border:1px solid var(--glass-bd);
  border-radius:12px;background:rgba(8,18,34,.5);padding:.8rem}
.ld-chart i{flex:1;border-radius:3px 3px 0 0;min-height:4px;
  background:linear-gradient(180deg,var(--cyan),rgba(45,156,219,.35));will-change:height}
.ld-health{display:flex;flex-direction:column;justify-content:center;gap:.6rem;border:1px solid var(--glass-bd);
  border-radius:12px;background:rgba(8,18,34,.5);padding:.9rem 1rem;font-size:.8rem;color:var(--mut)}
.ld-health span{display:flex;align-items:center;gap:.55rem}
.ld-health i{width:8px;height:8px;border-radius:50%}
.ld-health i.ok{background:#2ee6a6;box-shadow:0 0 8px #2ee6a6}
.ld-health i.warn{background:#ffc46b;box-shadow:0 0 8px #ffc46b}
.ld-alert{margin-top:1.1rem;display:flex;align-items:center;gap:.6rem;font-size:.82rem;color:#ffd9a0;
  border:1px solid rgba(255,180,80,.4);background:rgba(70,45,12,.35);border-radius:10px;padding:.6rem .9rem;
  opacity:0;transform:translateX(120%);will-change:transform,opacity}
.ld-alert i{width:8px;height:8px;border-radius:50%;background:#ffc46b;box-shadow:0 0 8px #ffc46b;flex:0 0 auto}

/* config: supporting screenshot strip (smaller, secondary) */
.shots.strip{grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.4rem;opacity:.92}
.shots.strip .frame{box-shadow:0 22px 50px rgba(0,0,0,.45)}

/* --- live AI Service Bus --- */
.live-bus{border:1px solid var(--glass-bd);border-radius:18px;background:var(--glass);backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);box-shadow:0 40px 90px rgba(0,0,0,.5);padding:1.3rem 1.5rem}
.lb-head{font-size:.82rem;color:var(--mut);letter-spacing:.04em;margin-bottom:1rem;display:flex;align-items:center}
.lb-body{position:relative;padding-left:1.4rem}
.lb-rail{position:absolute;left:6px;top:8px;bottom:8px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,rgba(120,170,230,.3),rgba(120,170,230,.08))}
.lb-glow{position:absolute;left:1px;top:0;width:12px;height:12px;border-radius:50%;margin-top:-6px;
  background:var(--cyan);box-shadow:0 0 16px 4px rgba(34,211,208,.8);opacity:0;will-change:top,opacity}
.lb-stages{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.lb-stages li{position:relative;display:flex;flex-direction:column;padding:.5rem .8rem;border-radius:10px;
  border:1px solid transparent;transition:border-color .35s ease,background .35s ease,box-shadow .35s ease}
.lb-stages li::before{content:"";position:absolute;left:-1.18rem;top:50%;transform:translateY(-50%);
  width:9px;height:9px;border-radius:50%;background:#1b3253;border:1.5px solid #34507a;transition:.35s}
.lb-stages li b{font-size:.86rem;font-weight:600;color:var(--mut);transition:color .35s ease}
.lb-stages li em{font-style:normal;font-size:.72rem;color:#6b86a8;opacity:0;max-height:0;transition:.35s}
.lb-stages li.active b{color:var(--ink)}
.lb-stages li.active::before{background:var(--cyan);border-color:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.lb-stages li.hot{border-color:var(--glass-bd);background:rgba(34,211,208,.08);box-shadow:0 0 24px rgba(34,211,208,.12)}
.lb-stages li.hot em{opacity:1;max-height:2rem}

/* --- live OCR confidence + redaction --- */
.cf{font-variant-numeric:tabular-nums}
.redact-target{transition:color .3s ease,background .3s ease;border-radius:4px}
.redact-target.redacted{color:transparent;background:#0b2740}

/* --- live agent run --- */
.ag-state{color:var(--cyan);font-weight:500}
.steps li{position:relative}
.steps li .tool{margin-left:auto;font-size:.68rem;color:var(--cyan);border:1px solid var(--glass-bd);
  border-radius:6px;padding:.1rem .45rem;opacity:0;transform:translateX(6px);transition:.3s;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.steps li.calling .tool{opacity:1;transform:none}
.steps li.calling{color:var(--ink);opacity:1}
.steps li.calling .tick{border-color:var(--cyan);animation:tickspin .8s linear infinite}
@keyframes tickspin{to{transform:rotate(360deg)}}
.ag-reason{margin-top:1rem;font-size:.8rem;color:var(--mut);min-height:1.2em;
  border-left:2px solid var(--cyan);padding-left:.7rem}

/* --- AI brain (signature scene) --- */
.brain-stage{position:relative;width:min(80vmin,640px);aspect-ratio:1;margin:2.4rem auto;pointer-events:none}
.brain-glow{position:absolute;inset:16%;border-radius:50%;
  background:radial-gradient(circle, rgba(34,211,208,.28), rgba(45,156,219,.10) 55%, transparent 72%);filter:blur(6px)}
.brain-shield{position:absolute;inset:23%;border-radius:50%;border:1px solid rgba(34,211,208,.4);
  box-shadow:inset 0 0 40px rgba(34,211,208,.18),0 0 36px rgba(34,211,208,.12)}
.brain-stage.running .brain-shield{animation:shieldPulse 4s ease-in-out infinite}
@keyframes shieldPulse{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.06);opacity:1}}
.brain-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;z-index:4}
.brain-core b{display:block;font-size:clamp(1.1rem,2vw,1.5rem);font-weight:800;color:#fff;letter-spacing:.04em;
  text-shadow:0 0 22px rgba(34,211,208,.7)}
.brain-core span{font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--cyan)}
/* knowledge streams flowing inward */
.streams{position:absolute;inset:0}
.streams i{position:absolute;left:50%;top:50%;width:46%;height:2px;transform-origin:left center;opacity:.45;
  background:linear-gradient(90deg,rgba(77,163,255,0) 0%,rgba(34,211,208,.9) 50%,rgba(77,163,255,0) 60%);
  background-size:200% 100%}
.brain-stage.running .streams i{animation:streamFlow 2.6s linear infinite}
@keyframes streamFlow{from{background-position:200% 0}to{background-position:0% 0}}
/* orbiting model / agent labels (counter-rotated to stay upright) */
.orbit{position:absolute;inset:0;border-radius:50%}
.brain-stage.running .orbit.models{animation:orbspin 28s linear infinite}
.brain-stage.running .orbit.agents{animation:orbspin 46s linear infinite}
.seat{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a)) translateX(var(--r))}
.spin{position:absolute;left:0;top:0}
.brain-stage.running .orbit.models .spin{animation:orbspin 28s linear infinite reverse}
.brain-stage.running .orbit.agents .spin{animation:orbspin 46s linear infinite reverse}
@keyframes orbspin{to{transform:rotate(360deg)}}
.chip{position:absolute;transform:translate(-50%,-50%) rotate(calc(-1 * var(--a)));white-space:nowrap;
  border-radius:999px;border:1px solid var(--glass-bd);background:rgba(8,18,34,.82);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:.5rem .85rem;
  font-size:.88rem;font-weight:600;color:var(--ink);box-shadow:0 0 18px rgba(34,211,208,.12)}
.chip.m{border-color:rgba(34,211,208,.45)}
.chip.a{font-size:.78rem;color:var(--mut);padding:.38rem .7rem}

/* --- ecosystems: everything feeding AICP (government & enterprise) --- */
.eco{position:relative;width:min(82vmin,640px);aspect-ratio:1;margin:2.4rem auto;pointer-events:none}
.eco-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.eco-link{stroke:var(--blue);stroke-width:.4;opacity:.22;stroke-dasharray:2 3;fill:none}
.eco.running .eco-link{opacity:.5;animation:ecoFlow 1.6s linear infinite}
@keyframes ecoFlow{to{stroke-dashoffset:-10}}
.eco-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  width:clamp(72px,11vmin,92px);height:clamp(72px,11vmin,92px);border-radius:50%;display:grid;place-items:center;
  font-weight:800;color:#fff;letter-spacing:.03em;background:linear-gradient(140deg,var(--cyan),var(--blue));
  box-shadow:0 0 50px rgba(34,211,208,.5),inset 0 0 26px rgba(255,255,255,.18)}
.eco-node{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;z-index:2;
  border:1px solid var(--glass-bd);background:rgba(8,18,34,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-radius:10px;padding:.5rem .86rem;font-size:.88rem;font-weight:600;color:var(--ink);
  box-shadow:0 0 18px rgba(34,211,208,.1)}
.eco.running .eco-node{animation:ecoPulse 2.4s ease-in-out infinite}
@keyframes ecoPulse{0%,100%{box-shadow:0 0 18px rgba(34,211,208,.1);border-color:var(--glass-bd)}
  50%{box-shadow:0 0 26px rgba(34,211,208,.35);border-color:var(--cyan)}}

/* --- governance: live policy evaluation + streaming audit log --- */
.live-gov{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:2.4rem}
.lg-panel{border:1px solid var(--glass-bd);border-radius:14px;background:var(--glass);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:1.1rem 1.2rem;
  box-shadow:0 24px 60px rgba(0,0,0,.4)}
.lg-panel header{display:flex;align-items:center;font-size:.82rem;color:var(--mut);letter-spacing:.04em;margin-bottom:.9rem}
.lg-policies ul{list-style:none;display:flex;flex-direction:column;gap:.55rem}
.lg-policies li{display:flex;align-items:center;gap:.6rem;font-size:.82rem;color:var(--mut);opacity:.45;transition:.4s}
.lg-policies li::before{content:"";width:16px;height:16px;border-radius:50%;border:1.5px solid var(--mut);
  flex:0 0 auto;position:relative;transition:.3s}
.lg-policies li.ok{opacity:1;color:var(--ink)}
.lg-policies li.ok::before{border-color:var(--cyan);background:var(--cyan)}
.lg-policies li.ok::after{content:"";position:absolute;left:.32rem;top:.12rem;width:4px;height:8px;
  border:solid #06101d;border-width:0 2px 2px 0;transform:rotate(45deg)}
.lg-policies li b{margin-left:auto;font-weight:600;font-size:.74rem;color:var(--cyan);opacity:0;transition:.3s}
.lg-policies li.ok b{opacity:1}
.lg-stream{height:11.5rem;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:.4rem;
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;font-size:.72rem}
.lg-line{display:flex;gap:.5rem;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lg-line i{color:var(--cyan);font-style:normal}

/* --- knowledge: live search results expanding --- */
.live-search{margin-top:1.8rem;max-width:30rem;border:1px solid var(--glass-bd);border-radius:14px;
  background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:1rem;
  box-shadow:0 24px 60px rgba(0,0,0,.4)}
.ls-bar{display:flex;align-items:center;gap:.55rem;border:1px solid var(--glass-bd);border-radius:9px;
  background:rgba(8,18,34,.6);padding:.55rem .8rem;font-size:.85rem;min-height:2.4em}
.ls-icon{width:15px;height:15px;flex:0 0 auto;fill:none;stroke:var(--mut);stroke-width:2;stroke-linecap:round}
.ls-q{color:var(--ink)}
.ls-caret{width:2px;height:1.1em;background:var(--cyan);opacity:0;flex:0 0 auto}
.live-search.running .ls-caret{animation:caretBlink 1s steps(1) infinite}
@keyframes caretBlink{50%{opacity:1}}
.ls-results{margin-top:.7rem;display:flex;flex-direction:column;gap:.5rem}
.ls-res{border:1px solid var(--glass-bd);border-radius:9px;background:rgba(8,18,34,.45);
  padding:.55rem .75rem;transform-origin:top}
.ls-meta{display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin-bottom:.2rem}
.ls-meta b{font-size:.78rem;font-weight:600;color:var(--ink)}
.ls-score{font-style:normal;font-size:.72rem;color:var(--cyan);font-variant-numeric:tabular-nums}
.ls-res>span{font-size:.76rem;color:var(--mut);line-height:1.4}

/* --- finale: richer, longer collapse-to-logo --- */
.finale{min-height:138vh}
/* SVG gradient text — same white→cyan→blue diagonal as the hero, but painted (not
   background-clip:text), so it renders bright and crisp over the live 3D canvas */
.fin-line{width:min(92vw,1180px);height:auto;display:block;margin:0 auto 3.4rem;
  filter:drop-shadow(0 3px 22px rgba(2,8,18,.85))}
.fin-line text{font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:800;font-size:96px;letter-spacing:-2.5px;text-anchor:middle;fill:url(#finGrad)}
.fin-logo{display:flex;flex-direction:column;align-items:center;gap:1.7rem}
.fin-mark{width:clamp(84px,11vw,128px);height:auto;
  filter:drop-shadow(0 0 30px rgba(34,211,208,.55)) drop-shadow(0 0 10px rgba(77,163,255,.4))}
.fin-lockup{width:min(72vw,520px);height:auto;filter:drop-shadow(0 0 22px rgba(34,211,208,.28))}
/* glow swell once the logo has assembled (align a music swell here) */
.finale .swelled .fin-mark{animation:finGlow 3.4s ease-in-out infinite}
@keyframes finGlow{
  0%,100%{filter:drop-shadow(0 0 30px rgba(34,211,208,.55)) drop-shadow(0 0 10px rgba(77,163,255,.4))}
  50%{filter:drop-shadow(0 0 62px rgba(34,211,208,.95)) drop-shadow(0 0 22px rgba(77,163,255,.65))}
}

@supports (height:100dvh){ .finale{min-height:138dvh} }

/* ---- responsive: scale up on large/4K, reflow down on small ---- */
@media(min-width:1920px){:root{--maxw:1320px}}
@media(min-width:2560px){:root{--maxw:1640px}body{font-size:18px}}
@media(min-width:3400px){:root{--maxw:2040px}body{font-size:20px}}

@media(max-width:880px){
  .wrap.two{grid-template-columns:1fr}
  .cards,.grid,.usecases{grid-template-columns:repeat(2,1fr)}
  .shots.three,.shots.strip,.vwshow{grid-template-columns:1fr}
  .gov,.live-gov{grid-template-columns:1fr}
  .ld-grid{grid-template-columns:1fr}
  .scene{padding:12vh 6vw}
  .fields.float,.kg.float,.provenance.float{position:static;width:100%;left:auto;right:auto;bottom:auto;margin-top:1.2rem}
}
@media(max-width:640px){
  .scene{padding:10vh 5vw}
  .cards,.usecases{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
  .ld-stats{grid-template-columns:repeat(2,1fr)}
  .eco-node,.chip{font-size:.64rem;padding:.32rem .5rem}
  .controls{flex-wrap:wrap;justify-content:center;max-width:94vw;bottom:14px}
  .pillars{justify-content:flex-start}
}

/* ---- reduced motion: kill ambient looping animation ---- */
@media(prefers-reduced-motion:reduce){
  .scanline,.pulse,.scrollcue span,.loader-mark{animation:none}
  *{scroll-behavior:auto !important}
}

/* Public experience: hide the OBS/director recording toolbar (kept for the
   team in the original launch-site, not shown to end users here). */
#controls { display: none !important; }