/* ==========================================================================
   CutGravity — shared design system for multi-page site
   Extends the compiled Tailwind (styles.css) with self-contained component
   classes so new pages never depend on which Tailwind utilities were compiled.
   Brand tokens mirror styles.css exactly.
   ========================================================================== */

:root{
  --bg:#05070a;
  --surface:#0f1218;
  --surface-2:#0b0e12;
  --primary:#14ff00;
  --accent:#00f0ff;
  --text:#e2e8f0;
  --muted:#94a3b8;
  --muted-2:#64748b;
  --muted-3:#475569;
  --line:rgba(255,255,255,.08);
  --line-soft:rgba(255,255,255,.05);
  --font-display:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;
  --font-mono:"Space Mono",ui-monospace,monospace;
  --maxw:80rem;
}

/* base / safety (in case styles.css preflight is absent) */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body.cg{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-display);
  -webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden}
body.cg img{display:block;max-width:100%}
body.cg a{color:inherit;text-decoration:none}
::selection{background:var(--primary);color:#000}

/* tokens reused from homepage so subpages don't need styles.css for them */
.cut-diagonal{clip-path:polygon(0 0,100% 0,95% 100%,0% 100%)}
.glow-text{text-shadow:0 0 20px #14ff0073,0 0 60px #14ff0033}
.font-mono-brand{font-family:var(--font-mono)}
.font-display{font-family:var(--font-display)}
@keyframes cg-sweep{0%{background-position:-200% 0}100%{background-position:200% 0}}
.animate-sweep{color:transparent;background:linear-gradient(90deg,#14ff00 0%,#00f0ff 50%,#14ff00 100%) 0 0/200% 100%;
  -webkit-background-clip:text;background-clip:text;animation:6s linear infinite cg-sweep}

/* ---------- layout primitives ---------- */
.cg-container{max-width:var(--maxw);margin:0 auto;padding-inline:1.5rem}
@media(min-width:768px){.cg-container{padding-inline:2rem}}
.cg-section{padding-block:6rem}
@media(min-width:768px){.cg-section{padding-block:8rem}}
.cg-section--tight{padding-block:4rem}
.cg-surface{background:var(--surface)}
.cg-divider-y{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}

.cg-grid-bg{position:absolute;inset:0;pointer-events-none;opacity:.04;
  background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);
  background-size:60px 60px}
.cg-noise{position:absolute;inset:0;pointer-events-none;opacity:.5;mix-blend-mode:overlay;
  background-image:radial-gradient(circle at 50% 50%,rgba(20,255,0,.05),transparent 60%)}

/* ---------- typography ---------- */
.cg-eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-mono);
  font-size:.625rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--primary)}
.cg-eyebrow--muted{color:var(--muted)}
.cg-eyebrow .dot{width:.5rem;height:.5rem;border-radius:999px;background:var(--primary);
  box-shadow:0 0 8px rgba(20,255,0,.8);flex:0 0 auto;animation:cg-pulse 2s infinite}
@keyframes cg-pulse{0%,100%{opacity:1}50%{opacity:.4}}
.cg-h1{font-size:clamp(2.75rem,7vw,5.5rem);font-weight:700;line-height:.92;letter-spacing:-.03em;color:#fff;margin:0}
.cg-h2{font-size:clamp(2rem,4.5vw,3.25rem);font-weight:700;line-height:1.02;letter-spacing:-.02em;color:#fff;margin:0}
.cg-h3{font-size:clamp(1.25rem,2.5vw,1.6rem);font-weight:700;letter-spacing:-.02em;color:#fff;margin:0}
.cg-lead{font-size:1.125rem;color:var(--muted);max-width:42rem;line-height:1.7}
@media(min-width:768px){.cg-lead{font-size:1.25rem}}
.cg-mono{font-family:var(--font-mono);color:var(--muted-2);font-size:.8rem}
.cg-mono .g{color:var(--primary)}
.cg-kicker{font-family:var(--font-mono);font-size:.625rem;text-transform:uppercase;
  letter-spacing:.25em;color:var(--muted-2)}
.cg-prose p{color:var(--muted);line-height:1.75;margin:0 0 1.1rem}
.cg-prose strong{color:#fff;font-weight:600}

/* ---------- nav ---------- */
.cg-nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);
  background:rgba(5,7,10,.8);border-bottom:1px solid var(--line-soft)}
.cg-nav-inner{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;padding:1.1rem 1.5rem}
@media(min-width:768px){.cg-nav-inner{padding:1.25rem 2rem}}
.cg-brand{display:flex;align-items:center;gap:.75rem}
.cg-logo{width:2rem;height:2rem;background:var(--primary);clip-path:polygon(0 0,100% 0,95% 100%,0% 100%);
  box-shadow:0 0 20px rgba(20,255,0,.4)}
.cg-brand span{font-size:1.25rem;font-weight:700;letter-spacing:-.04em;color:#fff}
.cg-navlinks{display:none;align-items:center;gap:2.25rem;font-family:var(--font-mono);
  font-size:.7rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
@media(min-width:900px){.cg-navlinks{display:flex}}
.cg-navlinks a{transition:color .2s}
.cg-navlinks a:hover,.cg-navlinks a.is-active{color:var(--primary)}
.cg-nav-cta{padding:.55rem 1.25rem;background:rgba(255,255,255,.05);border:1px solid var(--line);
  font-family:var(--font-mono);font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:#fff;transition:all .2s}
.cg-nav-cta:hover{background:rgba(255,255,255,.1)}
.cg-burger{display:inline-flex;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:.4rem}
@media(min-width:900px){.cg-burger{display:none}}
.cg-burger span{width:22px;height:2px;background:#fff;transition:.25s}
.cg-mobile{display:none;border-bottom:1px solid var(--line-soft);background:rgba(5,7,10,.97)}
.cg-mobile.open{display:block}
.cg-mobile a{display:block;padding:.9rem 1.5rem;font-family:var(--font-mono);font-size:.8rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--line-soft)}
.cg-mobile a:hover{color:var(--primary)}

/* ---------- buttons ---------- */
.cg-btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);
  font-size:.8rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:.95rem 2rem;
  transition:all .2s;cursor:pointer;border:1px solid transparent}
.cg-btn--primary{background:var(--primary);color:#000;clip-path:polygon(0 0,100% 0,95% 100%,0% 100%);
  box-shadow:0 0 40px rgba(20,255,0,.3)}
.cg-btn--primary:hover{background:var(--accent);box-shadow:0 0 50px rgba(0,240,255,.4)}
.cg-btn--ghost{border-color:rgba(255,255,255,.2);color:#fff;background:transparent}
.cg-btn--ghost:hover{background:rgba(255,255,255,.05)}
.cg-btn--dark{background:#000;color:#fff}
.cg-btn--dark:hover{background:#18181b}

/* ---------- pills / tags ---------- */
.cg-pill{display:inline-flex;align-items:center;gap:.5rem;padding:.3rem .8rem;border-radius:999px;
  background:rgba(20,255,0,.1);border:1px solid rgba(20,255,0,.3);color:var(--primary);
  font-family:var(--font-mono);font-size:.625rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase}
.cg-pill .ping{position:relative;display:inline-flex;width:.5rem;height:.5rem}
.cg-pill .ping::before{content:"";position:absolute;inset:0;border-radius:999px;background:var(--primary);
  opacity:.75;animation:cg-ping 1.4s cubic-bezier(0,0,.2,1) infinite}
.cg-pill .ping::after{content:"";position:relative;width:.5rem;height:.5rem;border-radius:999px;background:var(--primary)}
@keyframes cg-ping{75%,100%{transform:scale(2.2);opacity:0}}
.cg-tag{font-family:var(--font-mono);font-size:.55rem;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(255,255,255,.4)}

/* ---------- cards ---------- */
.cg-grid{display:grid;gap:1px;background:var(--line-soft)}
.cg-grid-gap{display:grid;gap:1.5rem}
@media(min-width:768px){.cg-cols-2{grid-template-columns:repeat(2,1fr)}.cg-cols-3{grid-template-columns:repeat(3,1fr)}.cg-cols-4{grid-template-columns:repeat(4,1fr)}}
.cg-card{position:relative;background:var(--surface);border:1px solid var(--line-soft);padding:2.5rem;
  transition:border-color .25s,transform .25s}
.cg-card:hover{border-color:rgba(20,255,0,.5)}
.cg-card--accent:hover{border-color:rgba(0,240,255,.5)}
.cg-num{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;
  border:1px solid rgba(20,255,0,.3);background:rgba(20,255,0,.1);color:var(--primary);
  font-family:var(--font-mono);font-weight:700;margin-bottom:1.75rem}
.cg-num--accent{border-color:rgba(0,240,255,.3);background:rgba(0,240,255,.1);color:var(--accent)}
.cg-num--white{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.1);color:#fff}
.cg-card h3{font-size:1.4rem;font-weight:700;letter-spacing:-.02em;text-transform:uppercase;
  font-style:italic;color:#fff;margin:0 0 1rem}
.cg-card p{color:var(--muted);line-height:1.7;margin:0}

/* feature list with green ticks */
.cg-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1rem}
.cg-list li{display:flex;align-items:flex-start;gap:.85rem;color:#cbd5e1;line-height:1.6}
.cg-list li::before{content:"";margin-top:.55rem;width:.4rem;height:.4rem;background:var(--primary);flex:0 0 auto}
.cg-list--check li::before{content:"";margin-top:.3rem;width:1rem;height:1rem;background:none;
  border:1px solid rgba(20,255,0,.4);clip-path:polygon(0 0,100% 0,80% 100%,0 100%)}

/* stat blocks */
.cg-stat .k{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.25em;text-transform:uppercase;color:var(--primary)}
.cg-stat .v{font-size:1.6rem;font-weight:700;color:#fff;letter-spacing:-.02em}
.cg-stat .s{font-size:.8rem;color:var(--muted-2)}

/* dashboard / terminal panel */
.cg-panel{position:relative;background:var(--surface);border:1px solid var(--line);padding:1.5rem}
.cg-panel-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:1rem;
  margin-bottom:1.25rem;border-bottom:1px solid var(--line)}
.cg-panel-head .t{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.12em;color:var(--muted-2)}
.cg-live{font-family:var(--font-mono);font-size:.625rem;font-weight:700;letter-spacing:.18em;
  padding:.15rem .5rem;background:rgba(20,255,0,.1);color:var(--primary)}
.cg-row{display:flex;align-items:center;justify-content:space-between;height:3.25rem;padding:0 1rem;
  background:rgba(0,0,0,.4);border:1px solid var(--line-soft);transition:border-color .2s}
.cg-row:hover{border-color:rgba(20,255,0,.3)}
.cg-row .l{display:flex;align-items:center;gap:.75rem;font-family:var(--font-mono);font-size:.75rem;color:var(--text)}
.cg-row .l .led{width:.4rem;height:.4rem;border-radius:999px;background:var(--primary);box-shadow:0 0 8px rgba(20,255,0,.8)}
.cg-row .r{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.18em;color:var(--muted-2)}

/* terminal block */
.cg-term{background:#070a0e;border:1px solid var(--line);font-family:var(--font-mono);font-size:.8rem;line-height:1.9}
.cg-term-bar{display:flex;align-items:center;gap:.5rem;padding:.7rem 1rem;border-bottom:1px solid var(--line)}
.cg-term-bar i{width:.6rem;height:.6rem;border-radius:999px;background:#2a2f37;display:inline-block}
.cg-term-bar i.g{background:var(--primary)}
.cg-term-body{padding:1.25rem;white-space:pre-wrap;color:var(--muted)}
.cg-term-body .g{color:var(--primary)}.cg-term-body .c{color:var(--accent)}.cg-term-body .w{color:#fff}.cg-term-body .d{color:var(--muted-3)}

/* visual frame (holds SVG art) */
.cg-visual{position:relative;border:1px solid var(--line);background:radial-gradient(120% 120% at 70% 10%,rgba(20,255,0,.08),transparent 55%),var(--surface);overflow:hidden}
.cg-visual--accent{background:radial-gradient(120% 120% at 70% 10%,rgba(0,240,255,.1),transparent 55%),var(--surface)}
.cg-glowblob{position:absolute;border-radius:999px;filter:blur(60px);opacity:.5;pointer-events:none}

/* process timeline */
.cg-steps{display:grid;gap:1px;background:var(--line-soft)}
@media(min-width:768px){.cg-steps{grid-template-columns:repeat(4,1fr)}}
.cg-step{background:var(--surface);padding:2rem;transition:background .25s}
.cg-step:hover{background:var(--bg)}
.cg-step .n{display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem}
.cg-step .n b{font-family:var(--font-mono);color:var(--primary);font-size:.85rem}
.cg-step .n span{font-family:var(--font-mono);color:rgba(255,255,255,.2);font-size:.75rem}
.cg-step h4{margin:0 0 .6rem;font-size:1.15rem;font-weight:700;text-transform:uppercase;letter-spacing:-.02em;color:#fff}
.cg-step p{margin:0;color:var(--muted);font-size:.875rem;line-height:1.65}

/* forms */
.cg-field{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.25rem}
.cg-label{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.cg-label .req{color:var(--primary)}
.cg-input,.cg-textarea,.cg-select{width:100%;background:rgba(0,0,0,.4);border:1px solid var(--line);
  color:#fff;font-family:var(--font-display);font-size:.95rem;padding:.85rem 1rem;transition:border-color .2s,box-shadow .2s}
.cg-textarea{min-height:9rem;resize:vertical;line-height:1.6}
.cg-input::placeholder,.cg-textarea::placeholder{color:var(--muted-3)}
.cg-input:focus,.cg-textarea:focus,.cg-select:focus{outline:none;border-color:var(--primary);
  box-shadow:0 0 0 1px var(--primary),0 0 24px rgba(20,255,0,.15)}
.cg-input.invalid,.cg-textarea.invalid{border-color:#ff3b3b;box-shadow:0 0 0 1px rgba(255,59,59,.4)}
.cg-error{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.05em;color:#ff6b6b;min-height:.9rem}
.cg-note{font-family:var(--font-mono);font-size:.7rem;color:var(--muted-2);line-height:1.6}
.cg-success{display:none;text-align:center;padding:3rem 1.5rem;border:1px solid rgba(20,255,0,.3);background:rgba(20,255,0,.04)}
.cg-success.show{display:block;animation:cg-fade .4s ease}
.cg-success .ico{width:3.5rem;height:3.5rem;margin:0 auto 1.25rem;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(20,255,0,.4);color:var(--primary)}
@keyframes cg-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* footer */
.cg-footer{padding:4rem 0;border-top:1px solid var(--line-soft)}
.cg-footer-inner{max-width:var(--maxw);margin:0 auto;display:flex;flex-direction:column;gap:2rem;
  justify-content:space-between;padding:0 1.5rem}
@media(min-width:768px){.cg-footer-inner{flex-direction:row;align-items:center;padding:0 2rem}}
.cg-footer-links{display:flex;flex-wrap:wrap;gap:2.5rem;font-family:var(--font-mono);font-size:.625rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)}
.cg-footer-links a:hover{color:var(--primary)}
.cg-copy{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:#475569}

/* breadcrumb */
.cg-crumb{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted-2)}
.cg-crumb a:hover{color:var(--primary)}
.cg-crumb .sep{color:var(--muted-3);margin:0 .5rem}

/* scroll reveal */
.cg-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.cg-reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.cg-reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* utilities used across pages */
.cg-hero-grid{display:grid;gap:4rem;align-items:center}
@media(min-width:1024px){.cg-hero-grid{grid-template-columns:1.1fr .9fr}}
.cg-split{display:grid;gap:4rem;align-items:center}
@media(min-width:1024px){.cg-split{grid-template-columns:1fr 1fr}}
.cg-mb-2{margin-bottom:.5rem}.cg-mb-4{margin-bottom:1rem}.cg-mb-6{margin-bottom:1.5rem}
.cg-mb-8{margin-bottom:2rem}.cg-mb-10{margin-bottom:2.5rem}.cg-mb-16{margin-bottom:4rem}
.cg-mt-auto{margin-top:auto}.cg-center{text-align:center}.cg-relative{position:relative}
.cg-flex{display:flex}.cg-wrap{flex-wrap:wrap}.cg-gap-4{gap:1rem}.cg-gap-6{gap:1.5rem}.cg-items-center{align-items:center}
.cg-maxw-2xl{max-width:42rem}.cg-maxw-3xl{max-width:48rem}.cg-mx-auto{margin-inline:auto}

/* ==========================================================================
   Competitor-inspired additions (original implementations, our aesthetic)
   ========================================================================== */

/* ---- trust strip: tech tokens + deploy-anywhere ---- */
.cg-trust{background:var(--surface);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.cg-trust-inner{max-width:var(--maxw);margin:0 auto;padding:1.75rem 1.5rem;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:space-between;gap:1.5rem}
@media(min-width:768px){.cg-trust-inner{padding-inline:2rem}}
.cg-trust-label{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.25em;text-transform:uppercase;
  color:var(--muted-2);white-space:nowrap}
.cg-tokens{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.cg-token{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;color:var(--muted-2);
  padding:.35rem .7rem;border:1px solid var(--line);background:rgba(255,255,255,.015);
  transition:color .2s,border-color .2s,box-shadow .2s;cursor:default;filter:grayscale(1) opacity(.8)}
.cg-token:hover{color:var(--primary);border-color:rgba(20,255,0,.4);box-shadow:0 0 18px rgba(20,255,0,.12);filter:none}
.cg-deploy{display:flex;flex-wrap:wrap;gap:1.25rem;align-items:center}
.cg-deploy .d{display:flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.7rem;
  letter-spacing:.08em;text-transform:uppercase;color:#cbd5e1}
.cg-deploy .d::before{content:"";width:.45rem;height:.45rem;background:var(--primary);
  box-shadow:0 0 8px rgba(20,255,0,.7);flex:0 0 auto}

/* ---- live terminal ticker (agent feed) ---- */
.cg-ticker-wrap{background:var(--surface);border-bottom:1px solid var(--line-soft)}
.cg-ticker{max-width:var(--maxw);margin:0 auto;padding:0 1.5rem}
@media(min-width:768px){.cg-ticker{padding-inline:2rem}}
.cg-feed{background:#070a0e;border:1px solid var(--line);border-top:0;font-family:var(--font-mono);
  font-size:.78rem;line-height:1.85;height:188px;overflow:hidden;position:relative}
.cg-feed-bar{display:flex;align-items:center;gap:.5rem;padding:.6rem 1rem;border-bottom:1px solid var(--line);
  background:var(--surface)}
.cg-feed-bar i{width:.55rem;height:.55rem;border-radius:999px;background:#2a2f37;display:inline-block}
.cg-feed-bar i.g{background:var(--primary);box-shadow:0 0 8px rgba(20,255,0,.7)}
.cg-feed-bar .t{margin-left:.4rem;font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted-2)}
.cg-feed-bar .live{margin-left:auto;font-size:.6rem;letter-spacing:.18em;color:var(--primary)}
.cg-feed-body{padding:.9rem 1.1rem;height:calc(188px - 2.4rem);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
.cg-feed-line{white-space:pre-wrap;color:var(--muted)}
.cg-feed-line .ts{color:var(--muted-3)}
.cg-feed-line .g{color:var(--primary)}.cg-feed-line .c{color:var(--accent)}.cg-feed-line .w{color:#e2e8f0}.cg-feed-line .y{color:#facc15}
.cg-cursor{display:inline-block;width:.55rem;height:1em;background:var(--primary);vertical-align:-2px;
  margin-left:2px;animation:cg-blink 1s steps(1) infinite}
@keyframes cg-blink{50%{opacity:0}}

/* ---- count-up stat band ---- */
.cg-counts{display:grid;gap:1px;background:var(--line-soft)}
@media(min-width:640px){.cg-counts{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.cg-counts{grid-template-columns:repeat(4,1fr)}}
.cg-count{background:var(--surface);padding:2.25rem 2rem;position:relative}
.cg-count .num{font-family:var(--font-mono);font-size:2.4rem;font-weight:700;color:#fff;letter-spacing:-.02em;
  line-height:1;display:flex;align-items:baseline}
.cg-count .num .suf{color:var(--primary);margin-left:.1rem}
.cg-count .num.lit{text-shadow:0 0 22px rgba(20,255,0,.35)}
.cg-count .lbl{margin-top:.6rem;font-family:var(--font-mono);font-size:.625rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted-2)}
.cg-count .sub{margin-top:.25rem;font-size:.8rem;color:var(--muted-3)}

/* ---- architecture diagram ---- */
.cg-arch{position:relative;background:radial-gradient(120% 140% at 50% 0%,rgba(20,255,0,.06),transparent 55%),var(--surface);
  border:1px solid var(--line);padding:1.5rem}
.cg-arch svg{width:100%;height:auto;display:block}
.cg-arch .legend{display:flex;flex-wrap:wrap;gap:1.25rem;margin-top:1.25rem;padding-top:1.25rem;
  border-top:1px solid var(--line)}
.cg-arch .legend span{display:flex;align-items:center;gap:.5rem;font-family:var(--font-mono);
  font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
.cg-arch .legend span i{width:.6rem;height:.6rem;flex:0 0 auto}

/* ---- work tiles (hover-reveal case studies) ---- */
.cg-tiles{display:grid;gap:1px;background:var(--line-soft)}
@media(min-width:768px){.cg-tiles{grid-template-columns:repeat(2,1fr)}}
.cg-tile{position:relative;display:block;background:var(--surface);overflow:hidden;min-height:300px;
  padding:2.5rem;transition:background .3s}
.cg-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(120% 120% at 100% 0,rgba(20,255,0,.1),transparent 45%);
  opacity:0;transition:opacity .35s;pointer-events:none}
.cg-tile:hover{background:var(--surface-2)}
.cg-tile:hover::after{opacity:1}
.cg-tile .meta{display:flex;align-items:center;gap:.75rem;margin-bottom:1.25rem}
.cg-tile h3{font-size:1.5rem;font-weight:700;color:#fff;letter-spacing:-.02em;margin:0 0 1rem;max-width:22ch;
  transition:transform .35s cubic-bezier(.16,1,.3,1)}
.cg-tile:hover h3{transform:translateY(-2px)}
.cg-tile .ex{color:var(--muted);line-height:1.7;margin:0 0 2rem;max-width:46ch}
.cg-tile .tile-metrics{display:flex;gap:2rem;flex-wrap:wrap}
.cg-tile .tile-metrics .m b{display:block;font-family:var(--font-mono);font-size:1.4rem;color:var(--primary);
  font-weight:700;line-height:1;text-shadow:0 0 18px rgba(20,255,0,.3)}
.cg-tile .tile-metrics .m span{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted-3)}
.cg-tile .go{position:absolute;bottom:2.5rem;right:2.5rem;font-family:var(--font-mono);font-size:.7rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);display:flex;align-items:center;gap:.4rem;
  transition:color .3s,gap .3s}
.cg-tile:hover .go{color:var(--primary);gap:.7rem}

/* ---- case-study detail bits ---- */
.cg-csr{display:grid;gap:1px;background:var(--line-soft);margin-top:2rem}
@media(min-width:768px){.cg-csr{grid-template-columns:repeat(3,1fr)}}
.cg-csr .b{background:var(--surface);padding:2rem}
.cg-csr .b .t{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--primary);margin-bottom:.75rem}
.cg-csr .b p{color:var(--muted);line-height:1.7;margin:0;font-size:.95rem}
.cg-quote{border-left:2px solid var(--primary);padding:.5rem 0 .5rem 1.5rem;margin:0}
.cg-quote p{font-size:1.4rem;color:#fff;line-height:1.5;letter-spacing:-.01em;font-weight:500;margin:0 0 1rem}
.cg-quote .who{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;color:var(--muted-2)}

/* ==========================================================================
   Interactive demo (invoice processing) — self-contained, vanilla
   ========================================================================== */
.demo{background:var(--surface);border:1px solid var(--line);position:relative;overflow:hidden}
.demo-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1.25rem;border-bottom:1px solid var(--line)}
.demo-head .t{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
.demo-head .t b{color:var(--primary)}
.demo-dot{display:inline-flex;gap:.4rem}
.demo-dot i{width:.55rem;height:.55rem;border-radius:50%;background:#2a2f37}
.demo-dot i.g{background:var(--primary);box-shadow:0 0 8px rgba(20,255,0,.7)}

/* use-case tabs */
.demo-tabs{display:flex;flex-wrap:wrap;gap:.4rem;padding:1rem 1.25rem 0}
.demo-tab{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;padding:.5rem .85rem;
  border:1px solid var(--line);background:rgba(255,255,255,.015);color:var(--muted-2);cursor:pointer;transition:all .2s}
.demo-tab:hover{color:#cbd5e1;border-color:rgba(20,255,0,.3)}
.demo-tab.active{color:#000;background:var(--primary);border-color:var(--primary);font-weight:700}
.demo-tab.soon{cursor:default;opacity:.55}
.demo-tab.soon:hover{border-color:var(--line);color:var(--muted-2)}
.demo-tab .badge{font-size:.5rem;opacity:.7;margin-left:.3rem}

/* stepper */
.demo-steps{display:flex;flex-wrap:wrap;gap:.45rem;padding:1rem 1.25rem;border-bottom:1px solid var(--line)}
.demo-step{display:flex;align-items:center;gap:.45rem;padding:.45rem .7rem;border:1px solid var(--line);
  background:rgba(255,255,255,.015);cursor:pointer;transition:all .2s;font-family:var(--font-mono);
  font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.demo-step b{color:var(--muted-3);transition:color .2s}
.demo-step:hover{border-color:rgba(20,255,0,.35);color:#cbd5e1}
.demo-step.active{border-color:var(--primary);color:var(--primary);box-shadow:0 0 16px rgba(20,255,0,.12)}
.demo-step.active b{color:var(--primary)}
.demo-step.done{color:#cbd5e1}.demo-step.done b{color:var(--primary)}
.demo-step .tick{opacity:0;color:var(--primary);transition:opacity .2s}.demo-step.done .tick{opacity:1}
.demo-step.review.active{border-color:var(--accent);color:var(--accent)}
.demo-step.review.active b{color:var(--accent)}

/* body grid */
.demo-grid{display:grid;gap:1px;background:var(--line-soft)}
@media(min-width:920px){.demo-grid{grid-template-columns:1fr 1.15fr 1fr}}
.demo-col{background:var(--surface);padding:1.25rem;min-height:360px}
.demo-col .ch{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:1rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.demo-col .ch .st{color:var(--muted-3)}
.demo-col .ch .st.on{color:var(--primary)}
.demo-col .ch .st.warn{color:#facc15}

/* invoice document */
.demo-doc{position:relative;background:#0b0e12;border:1px solid var(--line);padding:1rem;
  font-family:var(--font-mono);font-size:.7rem;color:var(--muted);opacity:.45;transform:translateY(8px);
  transition:opacity .5s,transform .5s;overflow:hidden}
.demo-doc.in{opacity:1;transform:none}
.demo-doc h5{font-family:var(--font-display);color:#fff;font-size:.95rem;margin:0 0 .65rem;letter-spacing:.04em;display:flex;justify-content:space-between}
.demo-doc h5 span{font-family:var(--font-mono);font-size:.55rem;color:var(--muted-3);letter-spacing:.1em}
.demo-doc .r{display:flex;justify-content:space-between;gap:1rem;padding:.2rem .25rem;border-bottom:1px dashed rgba(255,255,255,.05);transition:background .2s,box-shadow .2s}
.demo-doc .r .lab{color:var(--muted-2)}.demo-doc .r .val{color:#cbd5e1;text-align:right}
.demo-doc .r.hl{background:rgba(20,255,0,.14);box-shadow:inset 0 0 0 1px rgba(20,255,0,.35)}
.demo-doc .scan{position:absolute;left:0;right:0;height:44px;top:-44px;
  background:linear-gradient(180deg,transparent,rgba(20,255,0,.2),transparent);border-top:1px solid var(--primary);opacity:0}
.demo-doc.scanning .scan{animation:demo-scan 1.7s ease-in-out forwards}
@keyframes demo-scan{0%{top:-44px;opacity:1}100%{top:102%;opacity:1}}

/* extracted data rows */
.demo-data{display:flex;flex-direction:column;gap:.4rem}
.demo-frow{display:grid;grid-template-columns:1fr auto auto;gap:.7rem;align-items:center;padding:.5rem .65rem;
  background:rgba(0,0,0,.3);border:1px solid var(--line-soft);font-family:var(--font-mono);font-size:.72rem;
  opacity:0;transform:translateX(-6px);transition:opacity .35s,transform .35s,border-color .3s,background .3s}
.demo-frow.show{opacity:1;transform:none}
.demo-frow .k{color:var(--muted-2)}.demo-frow .v{color:#fff;white-space:nowrap}
.demo-frow .cf{font-size:.58rem;color:var(--primary);white-space:nowrap}
.demo-frow.matched{border-color:rgba(20,255,0,.3)}
.demo-frow.flag{border-color:rgba(250,204,21,.55);background:rgba(250,204,21,.07)}
.demo-frow.flag .v{color:#facc15}.demo-frow.flag .cf{color:#facc15}

/* legacy ERP panel */
.demo-erp{background:#0b0e12;border:1px solid var(--line);padding:1rem;font-family:var(--font-mono);font-size:.72rem}
.demo-erp .bar{display:flex;justify-content:space-between;color:var(--muted-3);font-size:.56rem;letter-spacing:.1em;
  border-bottom:1px solid var(--line);padding-bottom:.55rem;margin-bottom:.8rem}
.demo-erp .empty{color:var(--muted-3)}
.demo-erp .erow{display:flex;justify-content:space-between;gap:.5rem;padding:.55rem;border:1px solid var(--line-soft);
  background:rgba(0,0,0,.3);opacity:0;transform:translateY(6px);transition:opacity .45s,transform .45s,border-color .45s;margin-bottom:.5rem}
.demo-erp .erow.show{opacity:1;transform:none;border-color:rgba(20,255,0,.45);box-shadow:0 0 18px rgba(20,255,0,.1)}
.demo-erp .erow .posted{color:var(--primary)}
.demo-erp .meta{margin-top:.6rem;color:var(--muted-3);font-size:.6rem;line-height:1.7}
.demo-erp .meta .g{color:var(--primary)}

/* human review card */
.demo-review{margin-top:.85rem;border:1px solid rgba(0,240,255,.4);background:rgba(0,240,255,.05);padding:.95rem;
  opacity:0;max-height:0;overflow:hidden;transition:opacity .4s,max-height .4s}
.demo-review.show{opacity:1;max-height:420px}
.demo-review.resolved{border-color:rgba(20,255,0,.4);background:rgba(20,255,0,.05)}
.demo-review .rt{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent);margin-bottom:.55rem;display:flex;align-items:center;gap:.4rem}
.demo-review.resolved .rt{color:var(--primary)}
.demo-review p{color:#cbd5e1;font-size:.78rem;line-height:1.55;margin:0 0 .85rem}
.demo-review p b{color:#fff}
.demo-review .btns{display:flex;gap:.5rem;flex-wrap:wrap}
.demo-rbtn{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.6rem 1rem;cursor:pointer;border:1px solid transparent;transition:all .2s}
.demo-rbtn.approve{background:var(--primary);color:#000;font-weight:700}
.demo-rbtn.approve:hover{background:var(--accent);box-shadow:0 0 22px rgba(20,255,0,.3)}
.demo-rbtn.reject{background:transparent;border-color:var(--line);color:var(--muted)}
.demo-rbtn.reject:hover{color:#fff;border-color:rgba(255,255,255,.3)}

/* detail strip + controls */
.demo-detail{padding:.95rem 1.25rem;border-top:1px solid var(--line);font-family:var(--font-mono);
  font-size:.74rem;color:var(--muted);min-height:2.6rem;line-height:1.55;transition:color .2s}
.demo-detail b{color:var(--primary)}.demo-detail .c{color:var(--accent)}.demo-detail .y{color:#facc15}
.demo-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 1.25rem;border-top:1px solid var(--line)}
.demo-ctrls{display:flex;gap:.6rem;flex-wrap:wrap}
.demo-btn{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  padding:.72rem 1.4rem;cursor:pointer;border:1px solid transparent;transition:all .2s}
.demo-btn.run{background:var(--primary);color:#000;clip-path:polygon(0 0,100% 0,94% 100%,0 100%);box-shadow:0 0 30px rgba(20,255,0,.25)}
.demo-btn.run:hover{background:var(--accent)}
.demo-btn.run:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;background:var(--primary)}
.demo-btn.ghost{background:transparent;border-color:var(--line);color:var(--muted)}
.demo-btn.ghost:hover{color:#fff;border-color:rgba(255,255,255,.3)}
.demo-meter{display:flex;gap:1.75rem;align-items:center}
.demo-meter .m{display:flex;flex-direction:column;gap:.25rem;font-family:var(--font-mono)}
.demo-meter .m .lab{font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-3)}
.demo-meter .m .tm{font-size:1.15rem;font-weight:700;line-height:1}
.demo-meter .manual .tm{color:#ff6b6b}.demo-meter .agent .tm{color:var(--primary)}
.demo-meter .arrow{color:var(--muted-3)}

/* ==========================================================================
   Guided step-by-step demo player (one stage at a time)
   ========================================================================== */
.dwrap{background:var(--surface);border:1px solid var(--line);position:relative;overflow:visible}
.dwrap-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1.25rem;border-bottom:1px solid var(--line)}
.dwrap-head .t{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
.dwrap-head .t b{color:var(--primary)}
.dwrap-head .live{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.18em;color:var(--primary)}

/* progress track */
.dtrack{display:flex;gap:.5rem;padding:1rem 1.25rem;border-bottom:1px solid var(--line)}
.dseg{flex:1;display:flex;flex-direction:column;gap:.45rem;cursor:pointer;background:none;border:0;padding:0;text-align:left}
.dseg .lab{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-3);transition:color .25s}
.dseg .lab b{color:inherit;margin-right:.25rem}
.dseg .bar{height:3px;background:var(--line);position:relative;overflow:hidden}
.dseg .bar::after{content:"";position:absolute;inset:0;background:var(--primary);transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.dseg.done .bar::after{transform:scaleX(1);opacity:.55}
.dseg.active .bar::after{transform:scaleX(1)}
.dseg.active .lab{color:var(--primary)}
.dseg.done .lab{color:#cbd5e1}
.dseg.review.active .bar::after{background:var(--accent)}
.dseg.review.active .lab{color:var(--accent)}

/* stage */
/* stage height adapts to the viewport so the whole demo fits on screen (see fit block near EOF) */
.dstage{position:relative;min-height:clamp(300px,calc(100vh - 392px),470px);background:radial-gradient(120% 130% at 50% 0%,rgba(20,255,0,.05),transparent 55%),#0a0d11;overflow:hidden}
.dscene{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:2rem;
  padding:1.5rem;opacity:0;visibility:hidden;transition:opacity .4s;flex-wrap:wrap}
.dscene.active{opacity:1;visibility:visible}

/* poster overlay */
.dposter{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.25rem;
  background:radial-gradient(120% 130% at 50% 30%,rgba(20,255,0,.08),transparent 60%),#0a0d11;text-align:center;padding:1.5rem}
.dposter.hide{display:none}
.dposter h4{font-family:var(--font-display);color:#fff;font-size:1.4rem;margin:0;letter-spacing:-.02em}
.dposter p{color:var(--muted);font-size:.9rem;max-width:30rem;margin:0;line-height:1.6}
.dplay{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-mono);font-size:.8rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;padding:.9rem 2rem;background:var(--primary);color:#000;cursor:pointer;
  border:0;clip-path:polygon(0 0,100% 0,94% 100%,0 100%);box-shadow:0 0 40px rgba(20,255,0,.3);transition:background .2s}
.dplay:hover{background:var(--accent)}

/* generic staggered reveal (longhand so delay isn't reset) */
@keyframes pop-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.dscene .pop{opacity:0}
.dscene.active .pop{animation-name:pop-in;animation-duration:.5s;animation-timing-function:cubic-bezier(.16,1,.3,1);animation-fill-mode:both}
.dl1{animation-delay:.15s}.dl2{animation-delay:.5s}.dl3{animation-delay:.85s}
.dl4{animation-delay:1.2s}.dl5{animation-delay:1.55s}.dl6{animation-delay:1.9s}

/* doc card */
.dcard{width:150px;background:#0b0e12;border:1px solid var(--line);padding:.75rem;position:relative;font-family:var(--font-mono)}
.dcard .ttl{display:flex;justify-content:space-between;align-items:center;color:#fff;font-family:var(--font-display);font-size:.78rem;margin-bottom:.5rem}
.dcard .ttl span{font-size:.5rem;color:var(--muted-3)}
.dcard .ln{height:.42rem;background:rgba(255,255,255,.08);margin:.32rem 0;border-radius:1px}
.dcard .ln.s{width:55%}.dcard .ln.m{width:78%}
.dcard.glow{border-color:rgba(20,255,0,.4);box-shadow:0 0 26px rgba(20,255,0,.12)}

/* scene caption-number badge */
.dscene .sceneno{position:absolute;top:1rem;left:1.25rem;font-family:var(--font-mono);font-size:.6rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)}
.dscene .sceneno b{color:var(--primary)}

/* INGEST */
.ing-docs{position:relative;width:200px;height:200px}
.ing-docs .dcard{position:absolute;left:0;width:150px}
.dscene.active .ing-docs .dcard{animation-name:ing-fly;animation-duration:2.4s;animation-timing-function:ease-in;animation-iteration-count:infinite}
.ing-docs .d1{top:8%;animation-delay:0s}.ing-docs .d2{top:38%;animation-delay:.8s}.ing-docs .d3{top:68%;animation-delay:1.6s}
@keyframes ing-fly{0%{transform:translateX(-30px) scale(.92);opacity:0}15%{opacity:1}55%{transform:translateX(140px) scale(.78);opacity:1}80%{transform:translateX(230px) scale(.35);opacity:.5}100%{transform:translateX(250px) scale(.15);opacity:0}}
.ing-funnel{width:140px;height:140px;border:2px solid var(--primary);border-radius:50%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.25rem;position:relative;color:var(--primary);font-family:var(--font-mono);
  box-shadow:0 0 50px rgba(20,255,0,.15) inset}
.ing-funnel::before{content:"";position:absolute;inset:-8px;border:1px solid rgba(20,255,0,.3);border-radius:50%;animation:cg-pulse 2s infinite}
.ing-funnel .ic{font-size:1.6rem}.ing-funnel .tx{font-size:.6rem;letter-spacing:.2em}

/* EXTRACT */
.ex-doc{width:170px;overflow:hidden}
.ex-doc .scan{position:absolute;left:0;right:0;height:36px;top:-36px;background:linear-gradient(180deg,transparent,rgba(20,255,0,.22),transparent);border-top:1px solid var(--primary);opacity:0}
.dscene.active .ex-doc .scan{animation:ex-scan 1.8s ease-in-out .2s both}
@keyframes ex-scan{0%{top:-36px;opacity:1}100%{top:100%;opacity:1}}
.ex-fields{display:flex;flex-direction:column;gap:.5rem;width:min(280px,80vw)}
.ex-field{display:grid;grid-template-columns:1fr auto auto;gap:.6rem;align-items:center;padding:.5rem .7rem;
  background:rgba(0,0,0,.35);border:1px solid rgba(20,255,0,.25);font-family:var(--font-mono);font-size:.72rem}
.ex-field .k{color:var(--muted-2)}.ex-field .v{color:#fff;white-space:nowrap}.ex-field .ok{color:var(--primary)}
.ex-arrow{color:var(--muted-3);font-size:1.5rem}

/* MATCH */
.cmp{display:flex;flex-direction:column;gap:.7rem;width:min(460px,92%)}
.cmp-head{display:grid;grid-template-columns:1fr auto 1fr;gap:.8rem;font-family:var(--font-mono);font-size:.56rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted-3);text-align:center}
.cmp-head .l{text-align:right}.cmp-head .r{text-align:left}
.cmp-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.8rem;font-family:var(--font-mono);font-size:.74rem}
.cmp-row .l{text-align:right;color:#cbd5e1}.cmp-row .r{color:#cbd5e1;display:flex;align-items:center;gap:.5rem}
.cmp-row .lk{width:1.7rem;height:1.7rem;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--muted-3);flex:0 0 auto}
.cmp-row .ok{color:var(--primary);font-weight:700}

/* VALIDATE */
.val-list{display:flex;flex-direction:column;gap:.6rem;width:min(420px,90%)}
.val-row{display:flex;align-items:center;gap:.7rem;font-family:var(--font-mono);font-size:.76rem;color:#cbd5e1;
  padding:.55rem .7rem;background:rgba(0,0,0,.3);border:1px solid var(--line-soft)}
.val-row .vi{width:1.3rem;height:1.3rem;display:flex;align-items:center;justify-content:center;flex:0 0 auto;color:var(--primary);font-weight:700}
.val-row.flag{border-color:rgba(250,204,21,.55);background:rgba(250,204,21,.07);color:#facc15}
.val-row.flag .vi{color:#facc15}

/* REVIEW */
.review-card{width:min(440px,92%);border:1px solid rgba(0,240,255,.4);background:rgba(0,240,255,.05);padding:1.5rem;text-align:center}
.review-card.approved{border-color:rgba(20,255,0,.45);background:rgba(20,255,0,.06)}
.review-card .rico{width:3rem;height:3rem;margin:0 auto .9rem;border:1px solid rgba(0,240,255,.5);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:1.2rem}
.review-card.approved .rico{border-color:rgba(20,255,0,.5);color:var(--primary)}
.review-card .rt{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:.7rem}
.review-card.approved .rt{color:var(--primary)}
.review-card p{color:#e2e8f0;font-size:.85rem;line-height:1.55;margin:0 0 1.1rem}
.review-card p b{color:#fff}
.review-card .rbtns{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
.rbtn{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;padding:.65rem 1.2rem;cursor:pointer;border:1px solid transparent;transition:all .2s}
.rbtn.ok{background:var(--primary);color:#000;font-weight:700}.rbtn.ok:hover{background:var(--accent);box-shadow:0 0 22px rgba(20,255,0,.3)}
.rbtn.no{background:transparent;border-color:var(--line);color:var(--muted)}.rbtn.no:hover{color:#fff;border-color:rgba(255,255,255,.3)}

/* POST */
.post-flow{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;justify-content:center}
.post-doc{width:150px}
.dscene.active .post-doc{animation:fly-erp 1.6s ease-in-out .2s both}
@keyframes fly-erp{0%{transform:translateX(0) scale(1);opacity:1}65%{transform:translateX(70px) scale(.55);opacity:.6}100%{transform:translateX(110px) scale(.2);opacity:0}}
.post-arrow{color:var(--primary);font-size:1.6rem}
.dscene.active .post-arrow{animation:pop-in .4s 1s both}
.post-erp{width:230px;background:#0b0e12;border:1px solid var(--line);padding:1rem;font-family:var(--font-mono);font-size:.72rem}
.post-erp .bar{display:flex;justify-content:space-between;color:var(--muted-3);font-size:.56rem;letter-spacing:.1em;border-bottom:1px solid var(--line);padding-bottom:.5rem;margin-bottom:.7rem}
.post-erp .erow{display:flex;justify-content:space-between;gap:.5rem;padding:.55rem;border:1px solid rgba(20,255,0,.45);background:rgba(20,255,0,.05);box-shadow:0 0 18px rgba(20,255,0,.1)}
.post-erp .erow .p{color:var(--primary)}
.dscene.active .post-erp{animation:erp-lite .5s 1.1s both}
@keyframes erp-lite{from{border-color:var(--line)}to{border-color:rgba(20,255,0,.35)}}
.dscene.active .post-erp .erow{animation-name:pop-in;animation-duration:.5s;animation-delay:1.3s;animation-fill-mode:both}

/* DONE */
.done-wrap{text-align:center;max-width:34rem}
.done-wrap .big{width:4rem;height:4rem;margin:0 auto 1.25rem;border:1px solid rgba(20,255,0,.5);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:1.8rem;box-shadow:0 0 40px rgba(20,255,0,.2)}
.done-wrap h4{font-family:var(--font-display);color:#fff;font-size:1.5rem;margin:0 0 .75rem;letter-spacing:-.02em}
.done-wrap p{color:var(--muted);font-size:.95rem;line-height:1.6;margin:0}
.done-wrap p .g{color:var(--primary);font-weight:600}
.done-metrics{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin:1.4rem 0}
.done-metrics .dm{font-family:var(--font-mono);font-size:.8rem;color:var(--muted);padding:.7rem 1.05rem;
  border:1px solid var(--line);background:rgba(0,0,0,.3);display:flex;align-items:center;gap:.5rem;white-space:nowrap}
.done-metrics .dm b{color:#fff;font-size:1.05rem;font-weight:700}
.done-metrics .dm.hl{border-color:rgba(20,255,0,.4);box-shadow:0 0 28px rgba(20,255,0,.12)}
.done-metrics .dm.time s{color:var(--muted-3);text-decoration-thickness:1px}
.done-metrics .dm.time .ar{color:var(--muted-3)}
.done-metrics .dm.time b.g{color:var(--primary);font-size:1.2rem}
.dscene.active .done-metrics .dm.time b.g{animation:txt-glow 2s 1.3s infinite}
@keyframes txt-glow{0%,100%{text-shadow:0 0 14px rgba(20,255,0,.45)}50%{text-shadow:0 0 30px rgba(20,255,0,.95)}}

/* caption + footer */
.dcap{padding:1.1rem 1.25rem;border-top:1px solid var(--line);min-height:3.6rem;display:flex;align-items:center}
.dcap-text{font-size:.95rem;color:#cbd5e1;line-height:1.5}
.dcap-text b{color:var(--primary)}.dcap-text .c{color:var(--accent)}.dcap-text .y{color:#facc15}
.dfoot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.25rem;border-top:1px solid var(--line)}
.dfoot .hint{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.05em;color:var(--muted-3)}
.dbtn{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;padding:.7rem 1.5rem;cursor:pointer;border:1px solid transparent;background:var(--primary);color:#000;transition:all .2s;clip-path:polygon(0 0,100% 0,94% 100%,0 100%)}
.dbtn:hover{background:var(--accent)}
.dbtn:disabled{opacity:.4;cursor:default;background:var(--primary)}
.dbtn.ghost{background:transparent;border-color:var(--line);color:var(--muted);clip-path:none}
.dbtn.ghost:hover{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.dbtn.ghost:disabled{background:transparent;opacity:.35}
.dfoot-right{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.dstepn{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
.dcountdown{display:none;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--primary);border:1px solid rgba(20,255,0,.4);background:rgba(20,255,0,.06);padding:.3rem .65rem;white-space:nowrap}
.dcountdown.show{display:inline-block;animation:cg-pulse 1s ease-in-out infinite}

/* ---- Step 6 : posting into the legacy database ---- */
.post2{display:flex;align-items:center;justify-content:center;gap:1.25rem;flex-wrap:wrap}
.post2-doc{width:140px}
.dscene.active .post2-doc{animation:fly-erp 1.5s ease-in-out .3s both}
.post2-bridge{display:flex;flex-direction:column;align-items:center;gap:.5rem}
.post2-bridge .badge{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--primary);border:1px solid rgba(20,255,0,.4);padding:.25rem .5rem;white-space:nowrap;box-shadow:0 0 18px rgba(20,255,0,.12)}
.post2-bridge .badge-sub{font-family:var(--font-mono);font-size:.45rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted-3)}
.post2-bridge .wire{position:relative;width:84px;height:2px;background:rgba(20,255,0,.22)}
.post2-bridge .wire span{position:absolute;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--primary);box-shadow:0 0 8px #14ff00;opacity:0}
.dscene.active .post2-bridge .wire span{animation:wire-go 1.1s linear .3s infinite}
.dscene.active .post2-bridge .wire span:nth-child(2){animation-delay:.85s}
@keyframes wire-go{0%{left:84px;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:-7px;opacity:0}}

.legacy-wrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:.7rem}
.legacy-tag{font-family:var(--font-mono);font-size:.52rem;letter-spacing:.15em;text-transform:uppercase;color:#8b94a3}
.legacy-tag b{color:#f0a020;font-weight:700}
/* old steel database cylinder */
.db{width:118px;height:150px;position:relative;filter:saturate(.85)}
.db .tube{position:absolute;top:14px;left:0;width:118px;height:122px;border-left:2px solid #515b6b;border-right:2px solid #515b6b;
  overflow:hidden;background:linear-gradient(#161a21,#0d1015)}
.db .tube .fill{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(transparent,rgba(20,255,0,.3))}
.dscene.active .db .tube .fill{animation:db-fill 1.3s 1s ease-out forwards}
@keyframes db-fill{to{height:112px}}
.db .cap{position:absolute;left:0;width:118px;height:28px;border:2px solid #515b6b;border-radius:50%}
.db .cap.bot{top:122px;background:#0d1015;z-index:1}
.db .cap.top{top:0;background:#1c222b;z-index:4}
.dscene.active .db .cap.top{animation:db-lite .5s 1s forwards}
@keyframes db-lite{to{border-color:var(--primary);box-shadow:0 0 22px rgba(20,255,0,.45)}}
.db .ridge{position:absolute;left:0;width:118px;height:22px;border:2px solid #515b6b;border-radius:50%;opacity:.5;z-index:3}
.db .ridge.r1{top:46px}.db .ridge.r2{top:84px}
.db .rec{position:absolute;top:33px;right:9px;font-family:var(--font-mono);font-size:.46rem;letter-spacing:.04em;color:#f0a020;z-index:5;
  animation:cg-pulse 1.6s infinite}
.db .name{position:absolute;top:96px;left:0;width:118px;text-align:center;font-family:var(--font-mono);font-size:.56rem;letter-spacing:.1em;color:#8b94a3;z-index:5}
.db-out{display:flex;flex-direction:column;gap:.35rem;align-items:center}
.db-row{display:flex;gap:.6rem;justify-content:space-between;font-family:var(--font-mono);font-size:.62rem;color:#cbd5e1;
  border:1px solid rgba(20,255,0,.4);background:rgba(20,255,0,.05);padding:.4rem .6rem;min-width:165px;opacity:0;box-shadow:0 0 18px rgba(20,255,0,.1)}
.dscene.active .db-row{animation-name:pop-in;animation-duration:.5s;animation-delay:1.7s;animation-fill-mode:both}
.db-row .p{color:var(--primary)}
.db-cnt{font-family:var(--font-mono);font-size:.55rem;color:var(--muted-3);opacity:0}
.db-cnt s{color:#5b6470}.db-cnt b{color:var(--primary)}
.dscene.active .db-cnt{animation-name:pop-in;animation-duration:.5s;animation-delay:2s;animation-fill-mode:both}

/* white "legacy invoice" paper on the right of the DB */
.legacy-invoice{position:relative;width:184px;background:#f5f4ef;color:#1c1c1c;padding:13px 15px;
  box-shadow:0 12px 34px rgba(0,0,0,.55);font-family:var(--font-mono);font-size:.6rem;line-height:1.55;opacity:0}
.dscene.active .legacy-invoice{animation-name:pop-in;animation-duration:.55s;animation-delay:2s;animation-fill-mode:both}
.legacy-invoice .li-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1.5px solid #1c1c1c;padding-bottom:5px;margin-bottom:6px}
.legacy-invoice .li-ttl{font-family:var(--font-display);font-weight:700;font-size:.85rem;letter-spacing:.05em;color:#111}
.legacy-invoice .li-id{font-size:.54rem;color:#666}
.legacy-invoice .li-vendor{font-weight:700;color:#111}
.legacy-invoice .li-meta{color:#777;margin-bottom:7px}
.legacy-invoice .li-row{display:flex;justify-content:space-between;gap:.6rem;padding:1.5px 0;color:#333}
.legacy-invoice .li-sep{border-top:1px dashed #bbb;margin:5px 0}
.legacy-invoice .li-total{display:flex;justify-content:space-between;gap:.6rem;font-weight:700;color:#000;
  border-top:1.5px solid #1c1c1c;padding-top:5px;margin-top:5px}
.legacy-invoice .li-stamp{position:absolute;top:38%;right:-10px;transform:rotate(-12deg);font-family:var(--font-display);
  font-weight:700;font-size:.85rem;letter-spacing:.12em;color:#0a9e00;border:2px solid #0a9e00;border-radius:4px;
  padding:2px 9px;background:rgba(255,255,255,.9);box-shadow:0 0 16px rgba(20,255,0,.3);opacity:0}
.dscene.active .legacy-invoice .li-stamp{animation:stamp-in .4s 2.8s cubic-bezier(.2,1.5,.4,1) both}

/* Step 6 left→right flow: adapter → database → invoice */
.post2-adapter{display:flex;flex-direction:column;align-items:center;gap:.5rem}
.post2-adapter .pa-logo{width:1.7rem;height:1.7rem;background:var(--primary);clip-path:polygon(0 0,100% 0,95% 100%,0% 100%);box-shadow:0 0 18px rgba(20,255,0,.45)}
.post2-adapter .badge{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;color:var(--primary);
  border:1px solid rgba(20,255,0,.4);padding:.25rem .5rem;white-space:nowrap;box-shadow:0 0 18px rgba(20,255,0,.12)}
.post2-adapter .badge-sub{font-family:var(--font-mono);font-size:.45rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-3)}
.post2-wire{position:relative;width:64px;height:2px;background:rgba(20,255,0,.22);flex:0 0 auto;align-self:center}
.post2-wire span{position:absolute;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--primary);box-shadow:0 0 8px #14ff00;opacity:0}
.dscene.active .post2-wire span{animation-name:wire-rt;animation-duration:1.1s;animation-timing-function:linear;animation-iteration-count:infinite}
.dscene.active .post2-wire span:nth-child(2){animation-delay:.55s}
/* DB → invoice wire only starts once the DB has filled */
.dscene.active .post2-wire.w-out span{animation-delay:1.7s}
.dscene.active .post2-wire.w-out span:nth-child(2){animation-delay:2.25s}
@keyframes wire-rt{0%{left:-7px;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:64px;opacity:0}}
@media(max-width:900px){.post2-wire{display:none}}
@keyframes stamp-in{0%{opacity:0;transform:rotate(-12deg) scale(2.4)}100%{opacity:1;transform:rotate(-12deg) scale(1)}}

/* "no AI in the legacy system" reassurance on Step 6 */
.post2-note{flex-basis:100%;max-width:560px;margin:1.6rem auto 0;display:flex;flex-direction:column;align-items:center;gap:.6rem;text-align:center}
.post2-note .pn-badge{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);border:1px solid rgba(0,240,255,.4);background:rgba(0,240,255,.06);padding:.32rem .75rem;white-space:nowrap}
.post2-note .pn-text{font-family:var(--font-mono);font-size:.72rem;line-height:1.6;color:var(--muted);max-width:48ch}
.post2-note .pn-text b{color:#fff}

/* auto-run button active state */
.dbtn.ghost.on{border-color:rgba(20,255,0,.5);color:var(--primary)}

/* ---- Step 5 : full invoice review (no pop-up) ---- */
.review2{display:flex;gap:1.75rem;align-items:center;justify-content:center;flex-wrap:wrap;width:100%;padding:0 .5rem}
.rev-invoice{position:relative;width:350px;max-width:92vw;background:#fff;color:#1a1d22;border-radius:6px;
  box-shadow:0 18px 52px rgba(0,0,0,.55);padding:18px 20px;font-family:var(--font-mono);font-size:.62rem;line-height:1.5}
.rev-invoice .ri-top{display:flex;justify-content:space-between;align-items:flex-start;gap:.75rem;border-bottom:2px solid #1a1d22;padding-bottom:9px;margin-bottom:10px}
.rev-invoice .ri-ttl{font-family:var(--font-display);font-weight:700;font-size:1.05rem;letter-spacing:.06em;color:#0b0d10}
.rev-invoice .ri-sub{font-size:.6rem;color:#777;margin-top:2px}
.rev-invoice .ri-extracted{font-size:.48rem;letter-spacing:.07em;text-transform:uppercase;color:#0a9e00;border:1px solid #0a9e00;border-radius:3px;padding:3px 6px;white-space:nowrap;flex:0 0 auto}
.rev-invoice .ri-parties{display:flex;gap:1.2rem;margin-bottom:9px}
.rev-invoice .ri-party{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.rev-invoice .ri-party .ri-lbl{font-size:.48rem;letter-spacing:.12em;text-transform:uppercase;color:#aaa;margin-bottom:2px}
.rev-invoice .ri-party b{color:#111;font-size:.66rem}
.rev-invoice .ri-party span{color:#666}
.rev-invoice .ri-dates{display:flex;gap:.9rem;flex-wrap:wrap;color:#777;border-top:1px dashed #ddd;border-bottom:1px dashed #ddd;padding:6px 0;margin-bottom:9px}
.rev-invoice .ri-table{width:100%;border-collapse:collapse;margin-bottom:10px}
.rev-invoice .ri-table th{text-align:left;font-size:.48rem;letter-spacing:.07em;text-transform:uppercase;color:#999;padding:0 0 5px;border-bottom:1px solid #e3e3e3}
.rev-invoice .ri-table th + th,.rev-invoice .ri-table td + td{text-align:right}
.rev-invoice .ri-table td{padding:4px 0;color:#333;border-bottom:1px solid #f1f1f1}
.rev-invoice .ri-table td:first-child{color:#111}
.rev-invoice .ri-totals{display:flex;flex-direction:column;gap:3px;align-items:flex-end}
.rev-invoice .ri-totals > div{display:flex;justify-content:space-between;width:64%;color:#666}
.rev-invoice .ri-totals .ri-grand{color:#0b0d10;font-weight:700;border-top:2px solid #1a1d22;padding-top:6px;margin-top:4px;font-size:.74rem}
.rev-invoice .rev-stamp{position:absolute;top:46%;left:50%;transform:translate(-50%,-50%) rotate(-14deg);z-index:3;
  font-family:var(--font-display);font-weight:700;font-size:1.5rem;letter-spacing:.1em;padding:4px 16px;border:3px solid;border-radius:6px;
  opacity:0;pointer-events:none;background:rgba(255,255,255,.75)}
#review-card.approved .rev-stamp{opacity:1;color:#0a9e00;border-color:#0a9e00;animation:rev-stamp-in .4s cubic-bezier(.2,1.5,.4,1) both}
#review-card.approved .rev-stamp::after{content:"APPROVED"}
#review-card.queried .rev-stamp{opacity:1;color:#0067b0;border-color:#0067b0;animation:rev-stamp-in .4s cubic-bezier(.2,1.5,.4,1) both}
#review-card.queried .rev-stamp::after{content:"IN REVIEW"}
@keyframes rev-stamp-in{0%{opacity:0;transform:translate(-50%,-50%) rotate(-14deg) scale(2.3)}100%{opacity:1;transform:translate(-50%,-50%) rotate(-14deg) scale(1)}}

.rev-actions{width:264px;max-width:92vw;display:flex;flex-direction:column;align-items:flex-start;gap:.65rem}
.rev-actions .ra-ico{width:2.6rem;height:2.6rem;border:1px solid rgba(0,240,255,.5);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:1.1rem}
#review-card.approved .rev-actions .ra-ico{border-color:rgba(20,255,0,.5);color:var(--primary)}
#review-card.queried .rev-actions .ra-ico{border-color:rgba(0,153,255,.5);color:#3aa0ff}
.rev-actions .ra-title{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
#review-card.approved .rev-actions .ra-title{color:var(--primary)}
#review-card.queried .rev-actions .ra-title{color:#3aa0ff}
.rev-actions .ra-text{color:#cbd5e1;font-size:.82rem;line-height:1.55;margin:0}
.rev-actions .ra-btns{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.3rem}

/* ---- demo tabs as links + expense-report bits (demo #2) ---- */
a.demo-tab{text-decoration:none;display:inline-block}
.cat-list{display:flex;flex-direction:column;gap:.6rem;width:min(460px,92%)}
.cat-row{display:grid;grid-template-columns:1fr auto auto;gap:.8rem;align-items:center;font-family:var(--font-mono);
  font-size:.75rem;color:#cbd5e1;padding:.55rem .75rem;background:rgba(0,0,0,.3);border:1px solid var(--line-soft)}
.cat-row .exp-amt{color:#fff;white-space:nowrap}
.cat-chip{font-family:var(--font-mono);font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.22rem .55rem;border:1px solid;border-radius:3px;white-space:nowrap}
.cat-chip.travel{color:#00f0ff;border-color:rgba(0,240,255,.5);background:rgba(0,240,255,.08)}
.cat-chip.meals{color:#f0a020;border-color:rgba(240,160,32,.5);background:rgba(240,160,32,.08)}
.cat-chip.software{color:#14ff00;border-color:rgba(20,255,0,.5);background:rgba(20,255,0,.08)}
.cat-chip.stay{color:#c084fc;border-color:rgba(192,132,252,.5);background:rgba(192,132,252,.08)}
/* expense report: category column centred, flagged row tinted */
.rev-invoice.exp .ri-table td:nth-child(2),.rev-invoice.exp .ri-table th:nth-child(2){text-align:center}
.rev-invoice.exp .ri-table tr.ri-flag td{background:#fff6e6}
.rev-invoice.exp .ri-table tr.ri-flag td:first-child{color:#9a6b00;font-weight:700}
.rev-invoice.exp .ri-totals .warn{color:#b06f00}
.rev-invoice .ri-table td.pass{color:#0a9e00;font-weight:700}

/* ---- hero interactive demo launcher (overlay on the monolith) ---- */
.hero-demos{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;gap:.45rem;padding:1.15rem 1.2rem;
  background:linear-gradient(175deg,rgba(5,7,10,.22) 0%,rgba(5,7,10,.55) 48%,rgba(5,7,10,.84) 100%);backdrop-filter:blur(1.5px)}
.hero-demos .hd-head{display:flex;align-items:center;justify-content:space-between}
.hero-demos .hd-tag{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--primary)}
.hero-demos .hd-dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--primary);box-shadow:0 0 10px rgba(20,255,0,.9);animation:cg-pulse 1.6s infinite}
.hero-demos .hd-count{font-family:var(--font-mono);font-size:.55rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted-2);border:1px solid var(--line);padding:.18rem .45rem}
.hero-demos .hd-group{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);margin:.15rem 0 .1rem;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:.45rem}
.hero-demos .hd-row{position:relative;overflow:hidden;display:flex;align-items:center;gap:.7rem;padding:.62rem .78rem;
  border:1px solid rgba(20,255,0,.16);background:rgba(8,11,15,.5);text-decoration:none;
  transition:border-color .25s,background .25s,transform .25s,box-shadow .25s}
.hero-demos .hd-row:hover,.hero-demos .hd-row:focus-visible{border-color:rgba(20,255,0,.6);background:rgba(11,16,20,.74);
  transform:translateX(4px);box-shadow:0 0 24px rgba(20,255,0,.14);outline:none}
.hero-demos .hd-i{font-family:var(--font-mono);font-size:.6rem;color:var(--muted-3);flex:0 0 auto}
.hero-demos .hd-row:hover .hd-i,.hero-demos .hd-row:focus-visible .hd-i{color:var(--primary)}
.hero-demos .hd-name{display:flex;flex-direction:column;line-height:1.18;color:#fff;font-family:var(--font-display);font-weight:700;font-size:.92rem;letter-spacing:-.01em;flex:1;min-width:0}
.hero-demos .hd-name small{font-family:var(--font-mono);font-weight:400;font-size:.55rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);margin-top:.16rem}
.hero-demos .hd-go{font-family:var(--font-mono);color:var(--muted-3);flex:0 0 auto;transition:color .25s,transform .25s}
.hero-demos .hd-row:hover .hd-go,.hero-demos .hd-row:focus-visible .hd-go{color:var(--primary);transform:translateX(3px)}
.hero-demos .hd-foot{margin-top:auto;font-family:var(--font-mono);font-size:.54rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted-3);text-align:center;padding-top:.35rem}
/* green water ripple from the centre on hover */
.hero-demos .hd-row::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;border-radius:50%;
  background:radial-gradient(circle,rgba(20,255,0,.5),rgba(20,255,0,0) 70%);transform:translate(-50%,-50%) scale(0);opacity:0;pointer-events:none}
.hero-demos .hd-row:hover::after{animation:hd-ripple .8s ease-out}
@keyframes hd-ripple{0%{transform:translate(-50%,-50%) scale(0);opacity:.55}100%{transform:translate(-50%,-50%) scale(34);opacity:0}}
@media(max-width:380px){.hero-demos .hd-name small{display:none}.hero-demos{gap:.3rem;padding:.9rem}}
@media(prefers-reduced-motion:reduce){.hero-demos .hd-row:hover::after{animation:none}.hero-demos .hd-dot{animation:none}}

/* ---- Step 7 : processing report (streaming log + clickable detail) ---- */
.rep{width:100%;max-width:780px;margin:0 auto}
.rep-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem;font-family:var(--font-mono);
  font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
.rep-head .live{color:var(--primary)}
.rep-scroll{max-height:298px;overflow-y:auto;border:1px solid var(--line);background:#0b0e12}
.rep-table{width:100%;border-collapse:collapse;font-family:var(--font-mono);font-size:.66rem}
.rep-table thead th{position:sticky;top:0;background:var(--surface);color:var(--muted-2);text-align:left;
  font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;padding:.55rem .65rem;border-bottom:1px solid var(--line);z-index:1}
.rep-row{cursor:pointer;opacity:0}
.rep-row td{padding:.45rem .65rem;border-bottom:1px solid var(--line-soft);color:#cbd5e1;white-space:nowrap}
.rep-row td.ok{color:var(--primary)}
.rep-row:hover td{background:rgba(20,255,0,.07)}
.rep-row:focus-visible{outline:1px solid var(--primary);outline-offset:-1px}
.dscene.active .rep-row{animation-name:rep-in;animation-duration:.45s;animation-timing-function:cubic-bezier(.16,1,.3,1);animation-fill-mode:both;animation-delay:calc(var(--i)*.13s)}
@keyframes rep-in{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
.rep-foot{margin-top:.6rem;font-family:var(--font-mono);font-size:.6rem;color:var(--muted-3);text-align:right}
/* detail */
.rep-detail{width:100%;max-width:640px;margin:0 auto;border:1px solid var(--line);background:var(--surface);padding:1.25rem 1.4rem}
.rep-back{background:none;border:0;color:var(--accent);font-family:var(--font-mono);font-size:.66rem;cursor:pointer;padding:0;margin-bottom:.9rem}
.rep-back:hover{color:#7dd3fc}
.rep-dhead{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--line);padding-bottom:.7rem}
.rep-dhead .t{font-family:var(--font-display);color:#fff;font-size:1.05rem;font-weight:700}
.rep-dhead .ok{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--primary)}
.rep-audit{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;margin:.85rem 0 .4rem;font-family:var(--font-mono);font-size:.64rem;color:var(--muted)}
.rep-audit .ra b{color:var(--primary);font-weight:700;margin-right:.25rem}
.rep-sub{font-family:var(--font-mono);font-size:.54rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted-2);margin:1rem 0 .5rem}
.rep-fields{display:grid;grid-template-columns:repeat(2,1fr);gap:.45rem}
.rep-fields .rf{display:flex;justify-content:space-between;gap:.6rem;padding:.45rem .6rem;background:rgba(0,0,0,.3);border:1px solid var(--line-soft);font-family:var(--font-mono);font-size:.66rem}
.rep-fields .rf b{color:var(--muted-2);font-weight:400}.rep-fields .rf span{color:#fff}
.rep-docs{display:flex;flex-wrap:wrap;gap:.5rem}
.rep-doc{display:flex;align-items:center;gap:.45rem;padding:.45rem .65rem;border:1px solid var(--line);background:rgba(0,0,0,.3);
  font-family:var(--font-mono);font-size:.62rem;color:#cbd5e1}
.rep-doc::before{content:"";width:.7rem;height:.9rem;flex:0 0 auto;border:1px solid var(--primary);
  background:linear-gradient(135deg,transparent 6px,rgba(20,255,0,.15) 0)}

/* ---- a flaring green glow behind the call-to-action so users know where to click ----
   The Next button uses clip-path for its angled shape, which clips any ::after pool — so
   the flare is built from stacked drop-shadows (a filter, applied AFTER clip-path, so it
   escapes the clip). Big soft green halo that breathes brighter/larger to draw the eye.
   Animating filter (not transform) keeps the button perfectly still & clickable. */
@keyframes cta-flare{
  0%,100%{filter:drop-shadow(0 0 8px rgba(20,255,0,.9)) drop-shadow(0 0 22px rgba(20,255,0,.6))
                 drop-shadow(0 0 40px rgba(20,255,0,.32))}
  50%{filter:drop-shadow(0 0 14px rgba(20,255,0,1)) drop-shadow(0 0 34px rgba(20,255,0,.8))
             drop-shadow(0 0 62px rgba(20,255,0,.5))}}
/* Next button: flares whenever it's the actionable step (enabled), but not while auto-running */
#demo-next:not(:disabled){animation:cta-flare 2.1s ease-in-out infinite}
.dwrap.is-auto #demo-next{animation:none;filter:none}
/* Approve button: flares while the human-review step is on screen */
.dscene[data-scene="review"].active .rbtn.ok{animation:cta-flare 2.1s ease-in-out infinite}
/* Start button on the poster: flares to invite the user to begin */
.dposter .dplay{animation:cta-flare 2.3s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){#demo-next,.rbtn.ok,.dposter .dplay{animation:none!important;
  filter:drop-shadow(0 0 10px rgba(20,255,0,.7)) drop-shadow(0 0 26px rgba(20,255,0,.45))!important}}

/* ==========================================================================
   MODERN-SYSTEMS demos (Documentation Q&A · Knowledge synthesis · Process
   automation). Shared scene components — API-native / data-lake aesthetic
   (cyan-led) to contrast the legacy demos. Reuses the same engine + .dscene.
   ========================================================================== */

/* group label inside the flat tab strip */
.demo-tab-grp{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.5rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted-3);padding:.5rem .25rem;align-self:center;white-space:nowrap}
.demo-tab-grp::before{content:"";width:.8rem;height:1px;background:var(--line)}
.demo-tab.modern.active{background:var(--accent);border-color:var(--accent);color:#001014}
.demo-tab.modern:hover{border-color:rgba(0,240,255,.4)}

/* --- query / search bar (Q&A question, client selector) --- */
.m-bar{display:flex;align-items:center;gap:.7rem;width:min(560px,92%);background:#0b0e12;
  border:1px solid rgba(0,240,255,.35);padding:.85rem 1rem;font-family:var(--font-mono);box-shadow:0 0 34px rgba(0,240,255,.08)}
.m-bar .ic{color:var(--accent);font-size:.95rem;flex:0 0 auto}
.m-bar .q{color:#fff;font-size:.86rem;white-space:nowrap;overflow:hidden;max-width:42ch}
.dscene.active .m-bar .q.type{animation:m-typing 1.5s steps(34,end) both}
@keyframes m-typing{from{max-width:0}to{max-width:42ch}}
.m-bar .caret{display:inline-block;width:.5rem;height:1.05rem;background:var(--accent);margin-left:1px;
  vertical-align:-2px;animation:m-caret 1s steps(1) infinite}
@keyframes m-caret{0%,50%{opacity:1}51%,100%{opacity:0}}
.m-bar .tag{margin-left:auto;font-size:.5rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-3);flex:0 0 auto}
.m-sub{font-family:var(--font-mono);font-size:.62rem;color:var(--muted-2);margin-top:1rem;text-align:center;letter-spacing:.04em}
.m-sub b{color:var(--accent)}

/* --- thinking orb + dots (agent processing) --- */
.m-think{display:flex;flex-direction:column;align-items:center;gap:1.15rem}
.m-orb{width:96px;height:96px;border:2px solid rgba(0,240,255,.5);border-radius:50%;display:flex;align-items:center;
  justify-content:center;color:var(--accent);font-family:var(--font-mono);font-size:.56rem;letter-spacing:.16em;
  position:relative;box-shadow:0 0 44px rgba(0,240,255,.14) inset}
.m-orb::before{content:"";position:absolute;inset:-8px;border:1px solid rgba(0,240,255,.3);border-radius:50%;animation:cg-pulse 1.6s infinite}
.m-orb .spin{position:absolute;inset:-2px;border-radius:50%;border:2px solid transparent;border-top-color:var(--accent)}
.dscene.active .m-orb .spin{animation:m-spin 1s linear infinite}
@keyframes m-spin{to{transform:rotate(360deg)}}
.m-dots{display:flex;gap:.42rem}
.m-dots span{width:.5rem;height:.5rem;border-radius:50%;background:var(--accent);opacity:.3}
.dscene.active .m-dots span{animation:m-dot 1.2s infinite}
.dscene.active .m-dots span:nth-child(2){animation-delay:.2s}
.dscene.active .m-dots span:nth-child(3){animation-delay:.4s}
@keyframes m-dot{0%,100%{opacity:.3}50%{opacity:1}}

/* --- source chips (data sources queried) --- */
.m-srcs{display:flex;flex-wrap:wrap;gap:.55rem;justify-content:center;width:min(560px,94%)}
.m-src{display:flex;align-items:center;gap:.55rem;font-family:var(--font-mono);font-size:.68rem;color:#cbd5e1;
  padding:.55rem .8rem;border:1px solid var(--line-soft);background:rgba(0,0,0,.3);min-width:150px}
.m-src .d{width:.5rem;height:.5rem;border-radius:50%;background:var(--muted-3);flex:0 0 auto}
.m-src.on{border-color:rgba(0,240,255,.45);background:rgba(0,240,255,.06);color:#fff}
.m-src.on .d{background:var(--accent);box-shadow:0 0 8px rgba(0,240,255,.8)}
.m-src .n{margin-left:auto;font-size:.52rem;color:var(--accent);white-space:nowrap}

/* --- document panel with highlighted citation --- */
.m-doc{width:min(300px,90%);background:#0b0e12;border:1px solid var(--line);padding:1rem;
  font-family:var(--font-mono);font-size:.62rem;position:relative}
.m-doc .dh{display:flex;justify-content:space-between;align-items:center;color:#fff;font-family:var(--font-display);
  font-size:.78rem;margin-bottom:.6rem;border-bottom:1px solid var(--line);padding-bottom:.5rem}
.m-doc .dh span{font-size:.5rem;color:var(--muted-3);font-family:var(--font-mono)}
.m-doc .ln{height:.42rem;background:rgba(255,255,255,.08);margin:.34rem 0;border-radius:1px}
.m-doc .ln.s{width:58%}.m-doc .ln.m{width:82%}
.m-doc .hl{border-left:2px solid var(--primary);padding:.5rem .6rem;margin:.55rem 0;color:#dffbe0;line-height:1.5;background:rgba(20,255,0,.04)}
.dscene.active .m-doc .hl{animation:m-highlight 1.1s ease .5s both}
@keyframes m-highlight{0%{background:rgba(20,255,0,0)}60%{background:rgba(20,255,0,.22)}100%{background:rgba(20,255,0,.13)}}

/* --- synthesised answer card with citation --- */
.m-answer{width:min(440px,92%);background:rgba(0,0,0,.32);border:1px solid rgba(20,255,0,.3);padding:1.15rem 1.3rem}
.m-answer .qline{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:.6rem}
.m-answer .atext{color:#fff;font-size:.95rem;line-height:1.6}
.m-answer .atext b{color:var(--primary)}
.m-cite{display:inline-flex;align-items:center;gap:.45rem;margin-top:.95rem;font-family:var(--font-mono);font-size:.58rem;
  color:var(--accent);border:1px solid rgba(0,240,255,.4);background:rgba(0,240,255,.06);padding:.34rem .65rem}
.m-cite::before{content:"⌖";font-size:.7rem}

/* --- structured client summary (knowledge synthesis) --- */
.m-summary{width:min(640px,95%);display:grid;gap:.65rem;grid-template-columns:1fr 1fr}
.m-shead{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  background:rgba(0,240,255,.05);border:1px solid rgba(0,240,255,.3);padding:.7rem .95rem}
.m-shead .ttl{font-family:var(--font-display);color:#fff;font-size:1rem;font-weight:700}
.m-shead .ttl small{display:block;font-family:var(--font-mono);font-size:.52rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);font-weight:400;margin-top:2px}
.m-shead .stat{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--primary);border:1px solid rgba(20,255,0,.4);padding:.3rem .6rem;white-space:nowrap}
.m-sec{background:rgba(0,0,0,.3);border:1px solid var(--line-soft);padding:.8rem .9rem;font-family:var(--font-mono)}
.m-sec h5{margin:0 0 .55rem;font-size:.54rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.m-sec .li{display:flex;justify-content:space-between;gap:.6rem;font-size:.66rem;color:#cbd5e1;padding:.22rem 0;line-height:1.35}
.m-sec .li b{color:#fff;font-weight:600}
.m-sec .li .g{color:var(--primary)}
.m-sec.flag{border-color:rgba(240,160,32,.45);background:rgba(240,160,32,.06)}
.m-sec.flag h5{color:#f0a020}
.m-sec.flag .li{color:#f4c77a}

/* --- email inbox / processing queue --- */
.m-inbox{width:min(660px,95%);display:flex;flex-direction:column;gap:.5rem}
.m-mail{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.75rem;align-items:center;font-family:var(--font-mono);
  font-size:.68rem;color:#cbd5e1;padding:.6rem .85rem;background:rgba(0,0,0,.3);border:1px solid var(--line-soft)}
.m-mail .from{color:#fff;white-space:nowrap}
.m-mail .subj{color:var(--muted-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.m-mail.active{border-color:rgba(0,240,255,.5);background:rgba(0,240,255,.05)}
.m-badge{font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;padding:.24rem .52rem;border:1px solid;white-space:nowrap}
.m-badge.urgent{color:#ff6b6b;border-color:rgba(255,107,107,.5);background:rgba(255,107,107,.09)}
.m-badge.action{color:#f0a020;border-color:rgba(240,160,32,.5);background:rgba(240,160,32,.09)}
.m-badge.routine{color:#00f0ff;border-color:rgba(0,240,255,.4);background:rgba(0,240,255,.07)}
.m-badge.done{color:#14ff00;border-color:rgba(20,255,0,.5);background:rgba(20,255,0,.09)}

/* --- node flow (classify / route to owner) --- */
.m-flow{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;justify-content:center}
.m-node{background:#0b0e12;border:1px solid var(--line);padding:.75rem .95rem;font-family:var(--font-mono);
  font-size:.68rem;color:#cbd5e1;text-align:center;min-width:130px}
.m-node .t{font-size:.5rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-3);display:block;margin-bottom:.32rem}
.m-node b{color:#fff;font-size:.74rem}
.m-node.on{border-color:rgba(0,240,255,.45);background:rgba(0,240,255,.05)}
.m-node.owner{border-color:rgba(20,255,0,.45);background:rgba(20,255,0,.05)}
.m-node.owner b{color:var(--primary)}
.m-arrow2{color:var(--accent);font-size:1.3rem;flex:0 0 auto}

/* --- kanban / PM board --- */
.m-board{width:min(700px,96%);display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.m-col{background:rgba(0,0,0,.25);border:1px solid var(--line-soft);padding:.6rem;min-height:130px}
.m-col h5{margin:0 0 .55rem;font-family:var(--font-mono);font-size:.52rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted-2);display:flex;justify-content:space-between}
.m-task{background:#0b0e12;border:1px solid var(--line);padding:.5rem .6rem;margin-bottom:.45rem;
  font-family:var(--font-mono);font-size:.6rem;color:#94a3b8}
.m-task .tt{color:#cbd5e1;display:block;margin-bottom:.28rem;line-height:1.3}
.m-task .pri{font-size:.48rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-3)}
.m-task.new{border-color:rgba(20,255,0,.5);background:rgba(20,255,0,.05);box-shadow:0 0 18px rgba(20,255,0,.1)}
.m-task.new .tt{color:#fff}.m-task.new .pri{color:var(--primary)}

/* --- modern API write target (adapter → API → system) reuses .post2-* --- */
.m-api{display:flex;flex-direction:column;align-items:center;gap:.4rem;font-family:var(--font-mono)}
.m-api .ring{width:54px;height:54px;border-radius:50%;border:2px solid rgba(0,240,255,.5);display:flex;align-items:center;
  justify-content:center;color:var(--accent);font-size:.5rem;letter-spacing:.1em;box-shadow:0 0 26px rgba(0,240,255,.18) inset}
.m-api .lbl{font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.m-api .sub{font-size:.45rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-3)}

/* ==========================================================================
   FIT-ON-SCREEN — keep the whole demo widget within the viewport on shorter
   screens by tightening the chrome and densifying the tallest scenes.
   The stage itself is viewport-adaptive (see .dstage min-height clamp).
   ========================================================================== */
@media (max-height: 900px){
  .dwrap-head{padding:.65rem 1.15rem}
  .dtrack{padding:.7rem 1.15rem}
  .demo-tabs{padding:.7rem 1.15rem 0;gap:.32rem}
  .demo-tab{padding:.4rem .72rem;font-size:.6rem}
  .demo-tab-grp{padding:.4rem .2rem}
  .dcap{padding:.75rem 1.15rem;min-height:3rem}
  .dcap-text{font-size:.86rem}
  .dfoot{padding:.7rem 1.15rem}
  .dscene{gap:1.4rem;padding:1.15rem}
  .dscene .sceneno{top:.7rem;left:1.15rem}
  .rev-invoice{font-size:.6rem;padding:14px 17px}
  .m-board .m-col{min-height:108px}
}
/* Reflow the tall 6-section client brief into 3 columns (2 rows, not 3) so it
   fits the shorter stage without shrinking the text much. */
@media (max-height: 860px){
  .dscene[data-scene="brief"] .m-summary{grid-template-columns:repeat(3,1fr);width:min(900px,97%)}
}
/* The in-stage "system of record" reassurance is restated in the caption below.
   The board scene is the tallest, so drop its note at every height; drop it on
   the (shorter) legacy post scenes only when the screen is short. */
.dscene[data-scene="update"] .post2-note{display:none}
@media (max-height: 880px){ .post2-note{display:none} }
/* A gentle uniform scale is the safety net for the remaining tall scenes. Doing
   it on the whole scene (not per-component) keeps the Approve / Next controls
   on-screen and clickable at every resolution. transform-origin is centre. */
@media (max-height: 840px){ .dscene{transform:scale(.97)} }
@media (max-height: 790px){ .dscene{transform:scale(.93)} }
@media (max-height: 730px){ .dscene{transform:scale(.87)} }
@media (max-height: 690px){
  .dscene{transform:scale(.82)}
  .demo-tab{padding:.34rem .58rem;font-size:.55rem}
  .dcap{min-height:2.4rem;padding:.55rem 1.1rem}
  .dcap-text{font-size:.8rem}
}