/* AssetOS Keynote — cinematic stylesheet */

:root{
  --bg:#000;
  --bg-2:#06070b;
  --ink:#ffffff;
  --ink-dim:#9ca3af;
  --ink-faint:#52525b;
  --line:rgba(255,255,255,0.08);
  --line-2:rgba(255,255,255,0.16);

  --aira:#a78bfa;
  --reno:#60a5fa;
  --sal:#fb923c;
  --vera:#facc15;
  --arco:#22d3ee;

  --ease:cubic-bezier(.2,.65,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--ink);font-family:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden;cursor:default}
body.demo{cursor:none}

button{font:inherit;color:inherit;background:transparent;border:0;cursor:pointer}
kbd{font-family:'JetBrains Mono',ui-monospace,monospace;background:rgba(255,255,255,.08);border:1px solid var(--line-2);padding:1px 6px;border-radius:4px;font-size:.7em}

/* === HUD === */
#hud{
  position:fixed;top:0;left:0;right:0;
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 22px;z-index:50;pointer-events:none;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);
  font-family:'JetBrains Mono',monospace;
  mix-blend-mode:difference;
}
.hud-left,.hud-right{display:flex;align-items:center;gap:14px;pointer-events:auto}
.hud-btn{
  color:var(--ink-dim);border:1px solid var(--line-2);border-radius:999px;
  padding:5px 11px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  transition:all .25s var(--ease);
}
.hud-btn:hover{color:#fff;background:rgba(255,255,255,.06)}
.hud-btn.active{color:#000;background:#fff;border-color:#fff}
.dot{width:6px;height:6px;border-radius:50%;background:#fff;animation:pulse 2s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:.3}50%{opacity:1}}

#progress{
  position:fixed;left:0;top:0;height:2px;width:0;background:#fff;z-index:60;
  transition:width .4s var(--ease);
}

/* === Cinema === */
#cinema{position:absolute;inset:0;overflow:hidden;background:var(--bg)}
.scene{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .9s var(--ease);
}
.scene.active{opacity:1;pointer-events:auto}
.scene.exit{transition:opacity .55s var(--ease)}

/* Vignette */
.vignette::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 50%, transparent 50%, rgba(0,0,0,.7) 100%);
}

/* Grain */
.grain::before{
  content:"";position:absolute;inset:-20%;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .035 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay;opacity:.8;animation:grain 1.6s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-1%)}
  60%{transform:translate(-1%,3%)}80%{transform:translate(3%,1%)}100%{transform:translate(0,0)}
}

/* === Typography === */
.kicker{font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--ink-faint);font-weight:500}
.headline{font-size:clamp(48px,9vw,148px);line-height:.96;letter-spacing:-0.04em;font-weight:700}
.h2{font-size:clamp(28px,4.6vw,72px);line-height:1.02;letter-spacing:-0.03em;font-weight:700}
.lede{font-size:clamp(15px,1.4vw,21px);color:var(--ink-dim);line-height:1.5;max-width:60ch}
.mono{font-family:'JetBrains Mono',monospace;letter-spacing:.04em}

.gradient-text{
  background:linear-gradient(90deg,#fff 0%, #c4b5fd 35%, #93c5fd 65%, #67e8f9 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* Reveal-up letters / lines */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.scene.active .reveal{opacity:1;transform:translateY(0)}
.scene.active .reveal.d1{transition-delay:.05s}
.scene.active .reveal.d2{transition-delay:.25s}
.scene.active .reveal.d3{transition-delay:.45s}
.scene.active .reveal.d4{transition-delay:.65s}
.scene.active .reveal.d5{transition-delay:.85s}
.scene.active .reveal.d6{transition-delay:1.05s}
.scene.active .reveal.d7{transition-delay:1.25s}
.scene.active .reveal.d8{transition-delay:1.45s}

/* Slow drift */
.drift{animation:drift 18s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate(-1%, -1%) scale(1.02)}to{transform:translate(1%, 1%) scale(1.06)}}

/* === SCENE: boot === */
.boot{background:#000}
.boot .pcd-bg{position:absolute;inset:0;z-index:0}
.boot .pcd-bg canvas{display:block;width:100%;height:100%}
.boot .center{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:24px;pointer-events:none;text-shadow:0 2px 24px rgba(0,0,0,.6)}
.boot .pulse-dot{width:8px;height:8px;background:#fff;border-radius:50%;animation:dotPulse 2s var(--ease) infinite}
@keyframes dotPulse{
  0%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,255,255,.45)}
  70%{transform:scale(1.4);box-shadow:0 0 0 36px rgba(255,255,255,0)}
  100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,255,255,0)}
}
.wordmark{
  font-family:'Inter',sans-serif;font-weight:700;font-size:clamp(56px,11vw,170px);
  letter-spacing:-0.05em;line-height:1;
  background:linear-gradient(180deg,#fff,#cbd5e1);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  transform:translateY(10px);
}
.wordmark .os{color:#a78bfa;-webkit-text-fill-color:#a78bfa}

/* === SCENE: manifesto === */
.manifesto{background:#000;display:block}
.manifesto .stack{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:30px;text-align:center;padding:0 6vw;
}
.manifesto h1{font-size:clamp(40px,7vw,108px);letter-spacing:-0.04em;line-height:1.04;font-weight:600}
.manifesto h1 em{font-style:normal;color:var(--ink-faint)}
.manifesto .closer{color:#fff;font-weight:800}

/* === SCENE: problem === */
.problem{background:#000;color:#fff}
.problem .problem-center{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:48px;padding:0 6vw;text-align:center;
}
.problem .problem-title{
  font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.5em;
  text-transform:uppercase;color:var(--ink-faint);
}

/* Stage — three phases (stat / why / headline) live here and crossfade */
.problem .problem-stage{
  position:relative;width:100%;
  min-height:clamp(220px,30vh,380px);
  display:flex;align-items:center;justify-content:center;
}
.problem .problem-stat,
.problem .problem-why,
.problem .problem-headline{
  position:absolute;inset:0;margin:0;
  display:flex;align-items:center;justify-content:center;
  padding:0 8vw;
  opacity:0;transform:translateY(14px);
  transition:opacity .55s var(--ease), transform .65s var(--ease);
  will-change:opacity,transform;
}
.problem .problem-stat.show,
.problem .problem-why.show,
.problem .problem-headline.show{opacity:1;transform:translateY(0)}

.problem .problem-stat{
  font-size:clamp(24px,3.4vw,52px);
  font-weight:600;letter-spacing:-0.02em;line-height:1.2;
  color:#e5e7eb;text-align:center;
}
.problem .problem-stat-inner{
  display:inline-block;
  max-width:22ch;
  text-wrap:balance;
}
.problem .problem-stat-hi{
  color:#a78bfa;font-weight:800;
  background:linear-gradient(180deg,#c4b5fd,#a78bfa 70%, #8b5cf6);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  white-space:nowrap;
}

.problem .problem-why{
  font-size:clamp(72px,12vw,180px);
  font-weight:800;letter-spacing:-0.05em;line-height:1;
  background:linear-gradient(180deg,#fff 0%,#cbd5e1 60%,#a78bfa);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

.problem .problem-headline{
  font-size:clamp(48px,9vw,140px);letter-spacing:-0.04em;font-weight:700;
  line-height:1.15;gap:.2em;white-space:nowrap;
}
.problem .problem-fixed{color:#fff;line-height:1.15}
.problem .problem-slot{
  display:inline-block;height:1.15em;line-height:1.15em;overflow:hidden;
  color:#a78bfa;
  min-width:8ch;text-align:left;
  vertical-align:middle;
}
.problem .problem-slot-inner{
  display:block;line-height:1.15em;will-change:transform;transform:translateY(0);
}
.problem .slot-word{height:1.15em;line-height:1.15em;display:block;white-space:nowrap}
.problem .problem-flash{
  position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:9;
  transition:opacity .18s ease-out;
}
.problem .problem-flash.on{opacity:1}

/* === SCENE: reveal === */
.reveal-scene{background:#000}

/* Editorial split — copy on left, hero image on right, balanced & centered */
.reveal-scene .reveal-grid{
  position:relative;z-index:2;
  width:min(96vw,1640px);
  display:grid;grid-template-columns:0.85fr 1.45fr;
  gap:clamp(40px,5vw,80px);
  align-items:center;
  padding:60px 24px 90px;
}
.reveal-scene .reveal-copy{display:flex;flex-direction:column;gap:18px;min-width:0}
.reveal-scene .reveal-copy .h2{
  font-weight:800;font-size:clamp(32px,4.4vw,68px);line-height:1.04;letter-spacing:-0.03em;
}
.reveal-scene .reveal-copy .sub{
  font-size:clamp(18px,1.7vw,26px);font-weight:600;letter-spacing:-0.01em;color:#fff;
  margin-top:6px;
}
.reveal-scene .reveal-copy .sub .sub-faint{color:var(--ink-faint);font-weight:500}
.reveal-scene .reveal-copy .lede{
  font-size:clamp(14px,1.15vw,18px);max-width:46ch;margin-top:6px;
}

.reveal-scene .reveal-hero{
  position:relative;display:flex;align-items:center;justify-content:center;min-width:0;
}
.reveal-scene .reveal-hero::before{
  content:"";position:absolute;inset:-8% -4%;
  background:radial-gradient(60% 60% at 50% 45%, rgba(139,92,246,.22), rgba(59,130,246,.10) 45%, transparent 70%);
  filter:blur(20px);pointer-events:none;z-index:0;
}
.reveal-scene .brain-img{
  position:relative;z-index:1;
  width:100%;max-width:560px;height:auto;display:block;
  animation:breatheSoft 8s ease-in-out infinite;
}
@keyframes breatheSoft{0%,100%{transform:scale(1)}50%{transform:scale(1.018)}}

/* Dashboard hero variant — wide image, no glow */
.reveal-scene .reveal-hero-dash::before{display:none}
.reveal-scene .dashboar-img{
  position:relative;z-index:1;
  width:100%;max-width:1040px;height:auto;display:block;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.55));
}

/* assetOS — animated gradient cycling every 4s */
.reveal-scene .grad-cycle{
  background:linear-gradient(90deg,
    #8b5cf6 0%, #3b82f6 25%, #22d3ee 50%, #a78bfa 75%, #8b5cf6 100%);
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:gradCycle 4s linear infinite;
  font-weight:800;
}
@keyframes gradCycle{
  0%{background-position:0% 50%}
  100%{background-position:300% 50%}
}

@media (max-width:900px){
  .reveal-scene .reveal-grid{grid-template-columns:1fr;gap:32px;text-align:center}
  .reveal-scene .reveal-copy{align-items:center}
  .reveal-scene .brain-img{max-width:380px}
}

/* === SCENE: agents === */
.agents-scene{background:#000}
.agents-grid{
  position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;
  width:min(94vw,1380px);
}
.agent-card{
  position:relative;border:1px solid var(--line);border-radius:18px;padding:34px 22px 26px;
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0));
  aspect-ratio:.78;display:flex;flex-direction:column;justify-content:space-between;
  transition:transform .8s var(--ease-out),border-color .8s var(--ease);
  overflow:hidden;
}
.agent-card::before{
  content:"";position:absolute;inset:auto 0 0 0;height:1px;
  background:linear-gradient(90deg,transparent,var(--c),transparent);
  opacity:.7;
}
.agent-card .ring{
  position:absolute;inset:auto auto -40% -20%;width:140%;height:140%;border-radius:50%;
  background:radial-gradient(circle at center, color-mix(in srgb,var(--c) 40%, transparent), transparent 60%);
  opacity:.55;filter:blur(40px);
}
.agent-card img{width:60px;height:60px;object-fit:contain;z-index:1}
.agent-card .agent-name{font-size:30px;font-weight:700;letter-spacing:-.02em;z-index:1}
.agent-card .agent-role{font-size:13px;color:var(--ink-dim);font-weight:400;letter-spacing:.02em;z-index:1}
.agent-card .agent-tag{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--c);z-index:1}

.scene.active .agent-card{animation:cardIn .8s var(--ease-out) backwards}
.scene.active .agent-card:nth-child(1){animation-delay:.1s}
.scene.active .agent-card:nth-child(2){animation-delay:.22s}
.scene.active .agent-card:nth-child(3){animation-delay:.34s}
.scene.active .agent-card:nth-child(4){animation-delay:.46s}
.scene.active .agent-card:nth-child(5){animation-delay:.58s}
@keyframes cardIn{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}

.agents-scene .header{position:absolute;top:8vh;left:0;right:0;text-align:center}
.agents-scene .footer{position:absolute;bottom:7vh;left:0;right:0;text-align:center;color:var(--ink-faint);font-size:13px;letter-spacing:.15em;text-transform:uppercase;font-family:'JetBrains Mono',monospace}

/* === SCENE: agents-dash (all-black dashboard) === */
.agents-dash{
  background:radial-gradient(ellipse at 50% 0%, #1a1230 0%, #050510 55%, #000 100%);
  align-items:center;justify-content:center;
}
.agents-dash-wrap{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:36px;
  padding:5vh 3vw 4vh;
}
.agents-dash-header{
  display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;max-width:820px;
}
.agents-dash-eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.45em;
  text-transform:uppercase;
  background:linear-gradient(90deg,#a78bfa,#22d3ee);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-weight:600;
}
.agents-dash-title{
  font-size:clamp(38px,4.5vw,64px);font-weight:800;letter-spacing:-0.03em;line-height:1;
  background:linear-gradient(180deg,#fff 0%,#cbd5e1 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.agents-dash-sub{font-size:17px;color:#d4d4d8;font-weight:400;line-height:1.5}

.agents-dash-grid{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;
  width:min(94vw,1440px);
}
.agents-dash-card{
  position:relative;display:flex;flex-direction:column;gap:12px;
  background:linear-gradient(180deg,
    #050505 0%,
    #050505 40%,
    color-mix(in srgb,var(--c) 18%,#0a0a0a) 75%,
    color-mix(in srgb,var(--c) 38%,#0a0a0a) 100%);
  border:1px solid color-mix(in srgb,var(--c) 28%,rgba(255,255,255,.06));
  border-radius:18px;padding:14px 14px 16px;overflow:hidden;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.agents-dash-card::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:45%;border-radius:0 0 18px 18px;pointer-events:none;
  background:radial-gradient(110% 100% at 50% 110%, color-mix(in srgb,var(--c) 35%,transparent) 0%, transparent 70%);
  opacity:.8;transition:opacity .3s var(--ease);
}
.agents-dash-card > *{position:relative;z-index:1}
.agents-dash-card:hover{
  border-color:color-mix(in srgb,var(--c) 70%,transparent);
  background:linear-gradient(180deg,
    #050505 0%,
    color-mix(in srgb,var(--c) 8%,#0a0a0a) 40%,
    color-mix(in srgb,var(--c) 35%,#0a0a0a) 75%,
    color-mix(in srgb,var(--c) 70%,#0a0a0a) 100%);
}
.agents-dash-card:hover::before{opacity:1}

.agents-dash-media{
  position:relative;border-radius:14px;overflow:hidden;aspect-ratio:1/1;
  background:radial-gradient(circle at center,color-mix(in srgb,var(--c) 18%,#0a0a12) 0%,#050508 100%);
  border:1px solid color-mix(in srgb,var(--c) 18%,rgba(255,255,255,.05));
  transition:border-color .4s var(--ease),box-shadow .4s var(--ease);
}
.agents-dash-media video{
  width:100%;height:100%;object-fit:cover;display:block;
}
.agents-dash-card:hover .agents-dash-media{
  border-color:var(--c);
  box-shadow:0 0 24px -4px color-mix(in srgb,var(--c) 55%,transparent);
}

.agents-dash-name{
  font-size:clamp(22px,1.85vw,30px);font-weight:800;letter-spacing:-0.02em;
  color:var(--c);margin-top:2px;
}
.agents-dash-role{
  font-size:13px;color:#e4e4e7;margin-top:-6px;font-weight:600;letter-spacing:.01em;
}
.agents-dash-how{
  font-size:13px;line-height:1.5;color:#d4d4d8;
  padding:10px 12px;
  border-left:2px solid var(--c);
  background:linear-gradient(90deg,color-mix(in srgb,var(--c) 10%,transparent),transparent 80%);
  border-radius:0 10px 10px 0;margin-top:2px;
}
.agents-dash-bullet-label{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--c);opacity:.85;margin-top:4px;font-weight:600;
}
.agents-dash-bullets{
  list-style:none;display:flex;flex-direction:column;gap:6px;font-size:13px;color:#e4e4e7;
}
.agents-dash-bullets li{display:flex;gap:8px;align-items:flex-start;line-height:1.35}
.agents-dash-bullet-arrow{color:var(--c);font-weight:700;flex-shrink:0;font-size:14px}

.agents-dash-cta{
  margin-top:auto;display:flex;align-items:center;justify-content:center;gap:5px;
  background:transparent;
  color:var(--c);font-weight:700;font-size:13px;
  padding:10px 12px;border-radius:10px;letter-spacing:.01em;
  border:1px solid color-mix(in srgb,var(--c) 45%,rgba(255,255,255,.08));
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.agents-dash-card:hover .agents-dash-cta{
  background:var(--c);
  color:#0a0a0a;
  border-color:var(--c);
}
.agents-dash-cta-arrow{font-size:14px}

/* === SCENE: vera-standalone (CV Feed Live) === */
.vera-standalone{background:#04060c;align-items:stretch;justify-content:stretch}

.vera-split-scene{
  position:absolute;inset:5vh 4vw;display:grid;
  grid-template-columns:minmax(320px,38%) 1fr;gap:36px;align-items:center;
}

.vera-pitch{display:flex;flex-direction:column;gap:18px;max-width:480px}
.vera-pitch-eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.4em;
  color:#facc15;font-weight:600;
}
.vera-pitch-title{
  margin:0;font-size:clamp(34px,3.6vw,52px);line-height:1.05;letter-spacing:-0.03em;
  font-weight:800;color:#fff;
}
.vera-pitch-lede{font-size:15px;line-height:1.55;color:#a1a1aa}
.vera-pitch-bullets{display:flex;flex-direction:column;gap:14px;margin-top:4px}
.vera-pitch-bullet{display:flex;gap:12px;align-items:flex-start}
.vera-pitch-bullet-i{color:#facc15;font-size:14px;line-height:1.4;flex-shrink:0}
.vera-pitch-bullet-t{font-size:14px;font-weight:700;color:#fff;letter-spacing:-0.01em;line-height:1.3}
.vera-pitch-bullet-d{font-size:13px;color:#94a3b8;line-height:1.45;margin-top:2px}
.vera-pitch-tag{
  margin-top:8px;display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  padding:7px 12px;border:1px solid rgba(234,179,8,.3);background:rgba(234,179,8,.08);
  border-radius:999px;font-size:11px;color:#facc15;font-weight:600;
}
.vera-pitch-tag-dot{width:6px;height:6px;border-radius:50%;background:#facc15;box-shadow:0 0 8px #facc15;animation:pulse 2s var(--ease) infinite}

.vera-frame{
  position:relative;width:100%;height:min(78vh,720px);
  display:grid;grid-template-columns:180px 1fr;
  background:#070a13;border:1px solid rgba(255,255,255,.06);border-radius:14px;overflow:hidden;
  box-shadow:0 24px 80px rgba(0,0,0,.55);
}

/* Sidebar */
.vera-side{
  background:#05080f;border-right:1px solid rgba(255,255,255,.05);
  display:flex;flex-direction:column;padding:18px 12px;gap:8px;
  font-size:12px;color:#cbd5e1;
}
.vera-side-brand{display:flex;align-items:center;gap:10px;padding:0 4px 14px;border-bottom:1px solid rgba(255,255,255,.05);margin-bottom:6px}
.vera-side-logo{
  width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#facc15,#a16207);color:#0a0a0a;font-weight:800;font-size:16px;
}
.vera-side-name{font-weight:800;font-size:15px;color:#fff;letter-spacing:-0.01em}
.vera-side-tag{font-size:9.5px;color:#71717a;letter-spacing:.05em;margin-top:2px}
.vera-side-section{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.25em;color:#52525b;padding:14px 6px 4px}
.vera-side-nav{display:flex;flex-direction:column;gap:1px}
.vera-nav-item{
  display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:7px;cursor:default;
  font-size:11.5px;color:#a1a1aa;
}
.vera-nav-item.active{background:rgba(234,179,8,.12);color:#facc15;font-weight:600}
.vera-nav-icon{font-family:'JetBrains Mono',monospace;font-size:10px;opacity:.8;width:14px;text-align:center}
.vera-side-pill{
  margin-top:auto;display:flex;align-items:center;gap:7px;padding:9px 11px;
  background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.22);border-radius:999px;
  font-size:10px;color:#86efac;
}
.vera-pulse{width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 8px #22c55e;animation:pulse 2s var(--ease) infinite}

/* Main */
.vera-main{display:flex;flex-direction:column;padding:18px 20px;gap:14px;min-width:0;min-height:0}
.vera-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.vera-title{font-size:18px;font-weight:800;color:#fff;letter-spacing:-0.01em;display:flex;align-items:center;gap:8px}
.vera-title::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#facc15;box-shadow:0 0 10px #facc15}
.vera-sub{font-size:11.5px;color:#71717a;margin-top:3px}
.vera-header-meta{display:flex;align-items:center;gap:8px;font-size:10.5px;color:#94a3b8;font-family:'JetBrains Mono',monospace}
.vera-meta-dot{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 6px #22c55e;animation:pulse 1.6s var(--ease) infinite}
.vera-meta-badge{padding:2px 7px;border:1px solid #ef4444;color:#ef4444;border-radius:4px;font-size:9.5px;font-weight:700;letter-spacing:.1em}

.vera-split{display:grid;grid-template-columns:1fr 270px;gap:14px;flex:1;min-height:0}
.vera-left{display:flex;flex-direction:column;gap:10px;min-width:0;min-height:0}

.vera-big-cam{
  position:relative;background:#04070f;border:1px solid rgba(255,255,255,.07);border-radius:12px;overflow:hidden;
  flex:1;min-height:0;
}
.vera-big-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vera-big-overlay-top{
  position:absolute;top:10px;left:10px;display:flex;align-items:center;gap:7px;
  background:rgba(0,0,0,.6);padding:4px 9px;border-radius:6px;
  font-family:'JetBrains Mono',monospace;font-size:10px;color:#fff;letter-spacing:.06em;
}
.vera-rec-dot{width:7px;height:7px;border-radius:50%;background:#ef4444;animation:pulse 1.2s ease-in-out infinite}
.vera-big-overlay-zone{
  position:absolute;top:10px;right:10px;
  background:rgba(0,0,0,.6);padding:4px 9px;border-radius:6px;
  font-size:11px;color:#fff;
}
.vera-big-overlay-bottom{
  position:absolute;bottom:10px;right:10px;
  background:rgba(0,0,0,.55);padding:3px 8px;border-radius:5px;
  font-family:'JetBrains Mono',monospace;font-size:9.5px;color:rgba(255,255,255,.55);
}
.vera-detect-layer{position:absolute;pointer-events:none;left:0;top:0;width:100%;height:100%}
.vera-detect-box{
  position:absolute;border-radius:3px;
  transition:all .35s var(--ease);
}
.vera-detect-box.ok{border:1.5px solid #22c55e;box-shadow:0 0 0 1px rgba(34,197,94,.25),inset 0 0 24px rgba(34,197,94,.12)}
.vera-detect-box.bad{border:1.5px solid #ef4444;box-shadow:0 0 0 1px rgba(239,68,68,.3),inset 0 0 28px rgba(239,68,68,.18);animation:detectPulse 1.4s ease-in-out infinite}
@keyframes detectPulse{0%,100%{box-shadow:0 0 0 1px rgba(239,68,68,.3),inset 0 0 28px rgba(239,68,68,.18)}50%{box-shadow:0 0 0 2px rgba(239,68,68,.55),inset 0 0 32px rgba(239,68,68,.28)}}
.vera-detect-label{
  position:absolute;top:-19px;left:-1px;
  font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;letter-spacing:.04em;
  padding:2px 6px;border-radius:3px;color:#fff;white-space:nowrap;
}
.vera-detect-box.ok .vera-detect-label{background:#22c55e}
.vera-detect-box.bad .vera-detect-label{background:#ef4444}

.vera-thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.vera-thumb{
  position:relative;background:#04070f;border:1.5px solid rgba(255,255,255,.06);
  border-radius:8px;overflow:hidden;aspect-ratio:16/9;
  transition:border-color .3s var(--ease),transform .3s var(--ease);
}
.vera-thumb.active{border-color:#facc15;transform:translateY(-1px);box-shadow:0 0 14px -4px rgba(234,179,8,.4)}
.vera-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vera-thumb-top{
  position:absolute;top:3px;left:3px;display:flex;align-items:center;gap:3px;
  background:rgba(0,0,0,.65);padding:1.5px 4px;border-radius:3px;
}
.vera-thumb-dot{width:5px;height:5px;border-radius:50%;animation:pulse 1.8s var(--ease) infinite}
.vera-thumb-id{font-family:'JetBrains Mono',monospace;font-size:7.5px;color:rgba(255,255,255,.8)}
.vera-thumb-fps{position:absolute;top:3px;right:3px;font-family:'JetBrains Mono',monospace;font-size:7.5px;color:rgba(255,255,255,.45);background:rgba(0,0,0,.4);padding:1px 4px;border-radius:3px}
.vera-thumb-evt{
  position:absolute;bottom:18px;right:3px;
  background:rgba(239,68,68,.85);color:#fff;font-size:8px;font-weight:700;
  padding:1.5px 5px;border-radius:3px;
}
.vera-thumb-info{position:absolute;left:0;right:0;bottom:0;padding:2px 5px 3px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.85))}
.vera-thumb-label{font-size:8.5px;font-weight:700;color:#fff;line-height:1.1}
.vera-thumb-zone{font-size:7.5px;color:rgba(255,255,255,.55);line-height:1.1;margin-top:1px}

/* Events sidebar */
.vera-events{
  background:#05080f;border:1px solid rgba(255,255,255,.06);border-radius:12px;
  padding:14px 12px;display:flex;flex-direction:column;gap:7px;min-height:0;overflow:hidden;
}
.vera-events-title{
  font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.22em;
  color:#71717a;font-weight:600;padding:0 2px 8px;border-bottom:1px solid rgba(255,255,255,.05);
}
.vera-event{
  background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.05);
  padding:8px 10px;border-radius:8px;
}
.vera-event-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.vera-event-sev{font-size:8.5px;font-weight:700;letter-spacing:.06em;padding:2px 6px;border-radius:3px}
.vera-event-time{font-family:'JetBrains Mono',monospace;font-size:9px;color:#52525b}
.vera-event-type{font-size:11px;font-weight:600;color:#fff;line-height:1.3;margin-bottom:2px}
.vera-event-zone{font-size:9.5px;color:#71717a}

/* === SCENE: app frame (demo scenes) === */
.app-frame{
  position:relative;width:min(96vw,1480px);height:min(86vh,840px);
  background:#0a0b10;border:1px solid var(--line-2);border-radius:14px;overflow:hidden;
  box-shadow:0 30px 120px rgba(0,0,0,.6),0 0 1px 1px rgba(255,255,255,.04) inset;
}
.app-frame .titlebar{
  display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
}
.app-frame .titlebar .traffic{display:flex;gap:6px}
.app-frame .titlebar .traffic span{width:11px;height:11px;border-radius:50%}
.app-frame .titlebar .traffic span:nth-child(1){background:#ff5f56}
.app-frame .titlebar .traffic span:nth-child(2){background:#ffbd2e}
.app-frame .titlebar .traffic span:nth-child(3){background:#27c93f}
.app-frame .titlebar .url{
  margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:11px;color:#9ca3af;
  background:rgba(255,255,255,.04);border:1px solid var(--line);padding:4px 12px;border-radius:6px;
  min-width:220px;text-align:center;
}
.app-body{display:flex;height:calc(100% - 40px)}
.app-sidebar{
  width:220px;background:#0a0b10;border-right:1px solid var(--line);padding:18px 12px;
  display:flex;flex-direction:column;gap:4px;
}
.app-sidebar .brand{display:flex;gap:9px;align-items:center;padding:6px 8px 18px}
.app-sidebar .brand .logo{width:22px;height:22px;border-radius:6px;background:linear-gradient(135deg,#8b5cf6,#3b82f6);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:11px}
.app-sidebar .brand .name{font-weight:700;letter-spacing:-0.01em}
.nav-item{
  display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:7px;color:var(--ink-dim);
  font-size:13px;cursor:pointer;transition:background .2s,color .2s;
}
.nav-item .ic{width:14px;height:14px;display:inline-flex;color:#64748b}
.nav-item:hover{background:rgba(255,255,255,.04);color:#fff}
.nav-item.active{background:rgba(139,92,246,.12);color:#fff;border:1px solid rgba(139,92,246,.25)}
.nav-section{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:#3f3f46;margin:14px 8px 6px;cursor:default}

.app-main{flex:1;padding:18px;overflow:hidden;position:relative}
.app-main h3.page-title{font-size:18px;font-weight:700;letter-spacing:-0.01em}
.app-main .page-sub{font-size:11px;color:var(--ink-faint);margin-bottom:14px}

/* Glass card */
.card{
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
  border:1px solid var(--line);border-radius:12px;padding:14px;
  backdrop-filter:blur(20px);
}
.card .ttl{font-size:11px;letter-spacing:.04em;color:var(--ink-dim);margin-bottom:8px;display:flex;align-items:center;justify-content:space-between}

/* KPI strip */
.kpi-row{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:12px}
.kpi{padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.02)}
.kpi .lbl{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#52525b}
.kpi .val{font-size:18px;font-weight:700;margin-top:2px}
.kpi .delta{font-size:10px;color:#22c55e;margin-top:2px}

/* Generic charts */
.chart{position:relative;height:140px}
.chart svg{width:100%;height:100%;display:block}

/* === Cursor === */
#cursor{
  position:fixed;left:0;top:0;width:22px;height:22px;z-index:80;pointer-events:none;
  opacity:0;transition:opacity .3s var(--ease);
  transform:translate(-9999px,-9999px);
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.5));
}
#cursor.visible{opacity:1}
#cursor.click::after{
  content:"";position:absolute;left:-8px;top:-8px;width:38px;height:38px;border-radius:50%;
  border:2px solid #fff;animation:cursorClick .6s var(--ease-out) forwards;
}
@keyframes cursorClick{0%{transform:scale(.3);opacity:1}100%{transform:scale(1.6);opacity:0}}

/* === Demo: Home === */
.home-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.hero-card{
  grid-column:1/-1;
  background:radial-gradient(80% 100% at 80% 0%, rgba(139,92,246,.18), transparent 60%),
             linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
  border:1px solid var(--line);border-radius:14px;padding:22px;display:flex;justify-content:space-between;align-items:center;
  position:relative;overflow:hidden;
}
.hero-card h2{font-size:34px;font-weight:800;letter-spacing:-0.02em;line-height:1.05}
.hero-card h2 .sub{display:block;background:linear-gradient(90deg,#a78bfa,#60a5fa);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-card .blob{position:absolute;right:60px;top:50%;transform:translateY(-50%);width:140px;height:140px}
.hero-card .blob img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 30px rgba(139,92,246,.45))}
.agent-pills{display:flex;gap:6px;margin-top:14px;flex-wrap:wrap}
.agent-pill{
  display:inline-flex;gap:6px;align-items:center;padding:5px 10px;border-radius:999px;
  font-size:11px;font-weight:600;border:1px solid;
}
.agent-pill .led{width:6px;height:6px;border-radius:50%}

/* === Demo: AIRA scene === */
.split{display:grid;grid-template-columns:1.1fr 1fr;gap:14px;height:100%}
.chat-window{
  display:flex;flex-direction:column;gap:8px;height:100%;
}
.chat-msg{padding:10px 14px;border-radius:12px;font-size:13px;line-height:1.45;max-width:88%;animation:msgIn .5s var(--ease-out) backwards}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.chat-msg.user{align-self:flex-end;background:rgba(255,255,255,.06);border:1px solid var(--line-2)}
.chat-msg.agent{align-self:flex-start;background:linear-gradient(135deg,rgba(167,139,250,.16),rgba(96,165,250,.12));border:1px solid rgba(167,139,250,.3)}
.chat-msg .who{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:4px;font-family:'JetBrains Mono',monospace}
.chat-msg.agent .who{color:var(--aira)}
.chat-msg.system{
  align-self:center;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:#22c55e;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.25);padding:6px 12px;border-radius:999px;
}
.chat-input{margin-top:auto;display:flex;gap:8px;padding:10px;border-top:1px solid var(--line)}
.chat-input input{flex:1;background:transparent;border:1px solid var(--line);border-radius:8px;padding:9px 12px;color:#fff;font-family:inherit;font-size:13px;outline:none}
.chat-input button{padding:8px 14px;border-radius:8px;background:#fff;color:#000;font-size:12px;font-weight:600}

/* === Demo: SAL — 4D slider === */
.bim-stage{
  position:relative;height:100%;border-radius:12px;overflow:hidden;
  background:linear-gradient(180deg,#0c0f17,#040509);border:1px solid var(--line);
}
.bim-grid-bg{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:36px 36px;
  mask-image:radial-gradient(circle at 50% 60%, #000 30%, transparent 70%);
}
.bim-building{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);width:380px;height:380px;transform-style:preserve-3d;perspective:1000px}
.bim-floor{
  position:absolute;left:0;right:0;height:36px;border:1px solid rgba(251,146,60,.5);
  background:linear-gradient(180deg,rgba(251,146,60,.05),rgba(251,146,60,.15));
  transform-origin:center;
}
.bim-progress{position:absolute;left:0;bottom:14px;right:0;display:flex;align-items:center;gap:10px;padding:0 20px}
.bim-progress .track{flex:1;height:3px;background:rgba(255,255,255,.08);border-radius:2px;position:relative;overflow:hidden}
.bim-progress .fill{position:absolute;left:0;top:0;bottom:0;width:38%;background:linear-gradient(90deg,#fb923c,#fbbf24)}
.bim-progress .label{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-dim)}

/* === Demo: VERA — camera feed === */
.cam-stage{position:relative;height:100%;background:#000;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.cam-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 30% 80%, rgba(70,90,110,.6), transparent 60%),
    radial-gradient(ellipse at 70% 30%, rgba(100,120,140,.5), transparent 50%),
    linear-gradient(180deg,#1a1d22 0%, #0a0c0f 100%);
  filter:contrast(1.05) saturate(.6);
}
.cam-scanline{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px);pointer-events:none}
.cam-corners span{position:absolute;width:18px;height:18px;border:2px solid #facc15}
.cam-corners span.tl{left:14px;top:14px;border-right:0;border-bottom:0}
.cam-corners span.tr{right:14px;top:14px;border-left:0;border-bottom:0}
.cam-corners span.bl{left:14px;bottom:14px;border-right:0;border-top:0}
.cam-corners span.br{right:14px;bottom:14px;border-left:0;border-top:0}
.cam-meta{
  position:absolute;left:18px;top:18px;font-family:'JetBrains Mono',monospace;font-size:11px;color:#facc15;letter-spacing:.1em;
}
.cam-meta .rec{display:inline-block;width:8px;height:8px;border-radius:50%;background:#ef4444;margin-right:6px;animation:pulse 1.4s infinite}
.cam-time{
  position:absolute;right:18px;top:18px;font-family:'JetBrains Mono',monospace;font-size:11px;color:#fff;
}
.detect{
  position:absolute;border:1.5px solid #22c55e;border-radius:3px;
  animation:detectIn .4s var(--ease-out) forwards;opacity:0;
}
.detect .lbl{
  position:absolute;left:-1px;top:-22px;background:#22c55e;color:#000;font-size:10px;font-weight:700;
  padding:1px 6px;border-radius:3px;font-family:'JetBrains Mono',monospace;letter-spacing:.04em;
}
.detect.warn{border-color:#ef4444}
.detect.warn .lbl{background:#ef4444;color:#fff}
@keyframes detectIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}

.worker{position:absolute;display:flex;flex-direction:column;align-items:center}
.worker .head{width:28px;height:28px;border-radius:50%;background:#facc15;position:relative}
.worker.no-hat .head{background:#a16207}
.worker .body{width:36px;height:60px;background:#fbbf24;margin-top:-4px;clip-path:polygon(20% 0,80% 0,100% 100%,0 100%)}

/* === Demo: ARCO === */
.bridge-stage{position:relative;height:100%;background:linear-gradient(180deg,#0a1014,#000);border-radius:12px;border:1px solid var(--line);overflow:hidden}
.bridge-svg{width:100%;height:100%}
.sensor{
  position:absolute;width:14px;height:14px;border-radius:50%;
  border:2px solid var(--arco);background:rgba(34,211,238,.2);
  transform:translate(-50%,-50%);
}
.sensor::after{
  content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--arco);opacity:.6;
  animation:sensorPing 2s var(--ease) infinite;
}
@keyframes sensorPing{0%{transform:scale(1);opacity:.6}100%{transform:scale(2.4);opacity:0}}
.sensor.alert{border-color:#ef4444;background:rgba(239,68,68,.25)}
.sensor.alert::after{border-color:#ef4444}

/* === Integrations === */
.integrations-scene{background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6vh 4vw}
.int-head{text-align:center;margin-bottom:48px}
.int-grid{
  display:grid;
  grid-template-columns:repeat(6, minmax(110px, 1fr));
  gap:18px;
  width:min(92vw, 1280px);
  max-width:100%;
}
.int-tile{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:18px 12px 14px;
  border:1px solid var(--line-2);border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  backdrop-filter:blur(12px);
  opacity:0;transform:translateY(18px) scale(.92);
  transition:opacity .55s var(--ease), transform .55s var(--ease);
  min-height:108px;
}
.scene.active .int-tile{opacity:1;transform:translateY(0) scale(1)}
.int-tile-inner{
  width:56px;height:56px;
  display:flex;align-items:center;justify-content:center;
}
.int-logo-img{
  max-width:100%;max-height:100%;
  object-fit:contain;
  filter:drop-shadow(0 0 12px rgba(255,255,255,.08));
}
.int-text-logo{
  font-family:'JetBrains Mono',monospace;font-weight:700;font-size:16px;
  letter-spacing:.06em;color:#fff;
  padding:6px 10px;border:1px solid rgba(255,255,255,.25);border-radius:8px;
  background:rgba(255,255,255,.04);
  white-space:nowrap;
}
.int-label{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-dim);
}
.int-note{
  margin-top:42px;
  display:inline-flex;align-items:center;gap:10px;
  font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.08em;
  color:var(--ink-dim);
  opacity:0;transition:opacity .8s var(--ease);
  transition-delay:4.4s;
}
.scene.active .int-note{opacity:1}
.int-note-dot{
  width:8px;height:8px;border-radius:50%;
  background:#22c55e;box-shadow:0 0 12px rgba(34,197,94,.7);
  animation:int-pulse 1.6s ease-in-out infinite;
}
@keyframes int-pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.5;transform:scale(.85)}
}
@media (max-width:980px){
  .int-grid{grid-template-columns:repeat(4, 1fr)}
}
@media (max-width:640px){
  .int-grid{grid-template-columns:repeat(3, 1fr)}
}

/* === Clients === */
.clients-scene{background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6vh 0;overflow:hidden}
.cli-head{text-align:center;margin-bottom:56px;padding:0 4vw}
.cli-marquee{
  position:relative;
  width:100vw;
  overflow:hidden;
  padding:24px 0;
  mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.cli-marquee::before,.cli-marquee::after{
  content:'';position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none;
}
.cli-marquee::before{left:0;background:linear-gradient(90deg, #000, transparent)}
.cli-marquee::after{right:0;background:linear-gradient(270deg, #000, transparent)}
.cli-track{
  display:flex;align-items:center;gap:64px;
  width:max-content;
  animation:cli-roll 38s linear infinite;
}
.scene.active .cli-track{animation-play-state:running}
.cli-tile{
  flex:0 0 auto;
  height:96px;
  display:flex;align-items:center;justify-content:center;
  padding:0 24px;
  border:1px solid var(--line-2);border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  backdrop-filter:blur(12px);
  min-width:200px;
}
.cli-logo{
  max-height:56px;max-width:180px;
  object-fit:contain;
  filter:brightness(0) invert(1) drop-shadow(0 0 14px rgba(255,255,255,.15));
  opacity:.94;
}
.cli-logo--natural{
  filter:none;
  opacity:1;
  max-height:64px;
}
.cli-note{
  margin-top:48px;
  display:inline-flex;align-items:center;gap:10px;
  font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.08em;
  color:var(--ink-dim);
}
.cli-note-dot{
  width:8px;height:8px;border-radius:50%;
  background:#22c55e;box-shadow:0 0 12px rgba(34,197,94,.7);
  animation:int-pulse 1.6s ease-in-out infinite;
}
@keyframes cli-roll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media (max-width:980px){
  .cli-tile{height:80px;min-width:160px;padding:0 16px}
  .cli-logo{max-height:46px;max-width:140px}
  .cli-track{gap:44px;animation-duration:32s}
}

/* === Monitor (Dashboard) — mirrors app/src/pages/Dashboard.tsx === */
.monitor-scene{}
/* Each card sizes to its own content — prevents the tall heatmap from
   stretching Priority Alerts / Predictive Maintenance into dead space. */
.monitor-scene .r-grid-3{align-items:start}
.r-mon-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:6px}
.r-mon-h2{font-size:18px;font-weight:700;color:#fff;letter-spacing:-.01em;margin:0}
.r-mon-sub{font-size:11.5px;color:#64748b;margin-top:3px;line-height:1.4}
.r-mon-sub-it{color:#475569}
.r-mon-head-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.r-mon-from{
  display:inline-flex;align-items:center;gap:8px;
  font-size:10.5px;color:#94a3b8;letter-spacing:.04em;
  border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02);
  padding:5px 10px;border-radius:999px;
}
.r-mon-from-dot{
  width:6px;height:6px;border-radius:50%;background:#22c55e;
  box-shadow:0 0 8px rgba(34,197,94,.6);
  animation:pulse 1.8s var(--ease) infinite;
}
.r-mon-from-link{color:#a5b4fc;font-family:'JetBrains Mono',monospace}
.r-mon-btn{
  font-size:10.5px;color:#94a3b8;border:1px solid rgba(255,255,255,.08);
  padding:6px 11px;border-radius:8px;background:transparent;cursor:default;
  transition:all .2s var(--ease);
}
.r-mon-btn:hover{color:#fff;background:rgba(255,255,255,.04)}

.r-mon-card{padding:14px 16px}
.r-mon-badge{
  margin-left:auto;font-size:9.5px;font-weight:700;letter-spacing:.14em;
  border:1px solid;border-radius:6px;padding:2px 7px;
}
.r-mon-sub-line{font-size:10.5px;color:#64748b;margin:-4px 0 4px}
.r-mon-pill{
  font-size:10px;color:#a5b4fc;border:1px solid rgba(99,102,241,.3);
  background:rgba(99,102,241,.1);border-radius:999px;padding:2px 8px;
}
.r-mon-mono{font-family:'JetBrains Mono',monospace;font-size:11px;color:#cbd5e1}
.r-mon-link{
  margin-top:4px;align-self:flex-start;background:transparent;border:0;
  font-size:10.5px;color:#a5b4fc;cursor:default;padding:0;
}
.r-mon-link:hover{color:#c7d2fe}

/* Priority Alerts table */
.r-mon-tbl{display:flex;flex-direction:column;gap:1px}
.r-mon-tbl-head,.r-mon-tbl-row{
  display:grid;grid-template-columns:36px 1fr 1fr 1fr;gap:8px;
  align-items:center;font-size:11px;padding:5px 0;
}
.r-mon-tbl-head{
  font-size:9.5px;font-weight:700;color:#475569;letter-spacing:.16em;text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.06);padding-bottom:6px;margin-bottom:2px;
}
.r-mon-tbl-row{border-radius:6px;transition:background .2s var(--ease)}
.r-mon-tbl-row:hover{background:rgba(255,255,255,.03)}
.r-mon-tbl-rank{color:#52525b;font-family:'JetBrains Mono',monospace;font-size:10px}
.r-mon-tbl-urg{color:#64748b;font-family:'JetBrains Mono',monospace;font-size:10.5px}

/* Mini-stack helpers */
.r-mon-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:-2px}
.r-mon-mini-stack{display:flex;flex-direction:column;gap:1px}
.r-mon-mini-lbl{font-size:9.5px;color:#52525b;letter-spacing:.04em}
.r-mon-mini-val{font-size:15px;font-weight:700;color:#fff;line-height:1.1}
.r-mon-mini-sub{font-size:9.5px;color:#475569}
.r-mon-legend{font-size:9.5px;color:#64748b;display:inline-flex;align-items:center;gap:4px}
.r-mon-leg-dot{display:inline-block;width:8px;height:2px;border-radius:1px}

.r-mon-chip{
  display:flex;flex-direction:column;gap:1px;
  border:1px solid;border-radius:8px;padding:6px 10px;
}
.r-mon-chip-lbl{font-size:9.5px;color:#94a3b8}
.r-mon-chip-val{font-size:16px;font-weight:700;line-height:1.1}

/* SVG charts */
.r-mon-chart{width:100%;height:auto;margin-top:2px}
.r-mon-svg{width:100%;height:auto;display:block}

/* Safety heatmap */
.r-mon-heat-legend{display:flex;align-items:center;gap:12px;font-size:9.5px;color:#64748b}
.r-mon-heat-leg{display:inline-flex;align-items:center;gap:5px}
.r-mon-heat-sw{width:10px;height:10px;border-radius:3px;display:inline-block}
.r-mon-heat{
  display:grid;grid-template-columns:repeat(6,1fr);gap:3px;
}
.r-mon-heat-cell{
  aspect-ratio:1.5;border-radius:4px;display:flex;align-items:center;justify-content:center;
  font-size:9.5px;font-weight:700;
}

/* Recommendation rows */
.r-mon-rec{
  display:flex;gap:10px;padding:9px 11px;border-radius:8px;
  background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.05);
}
.r-mon-rec-bar{width:3px;border-radius:2px;flex-shrink:0}
.r-mon-rec-lbl{font-size:11px;font-weight:600}
.r-mon-rec-desc{font-size:10.5px;color:#94a3b8;line-height:1.4;margin-top:1px}

/* Executive summary grid */
.r-mon-exec-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.r-mon-exec-cell{
  background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.05);
  border-radius:8px;padding:9px 11px;
}
.r-mon-exec-lbl{font-size:9.5px;color:#52525b;letter-spacing:.04em}
.r-mon-exec-val{font-size:14px;font-weight:700;color:#fff;line-height:1.1;margin-top:2px}
.r-mon-exec-d{font-size:9.5px;color:#22c55e;margin-top:1px}

/* Comparative timeline bars */
.r-mon-tl{display:flex;flex-direction:column;gap:9px}
.r-mon-tl-head{display:flex;justify-content:space-between;font-size:9.5px;color:#64748b;margin-bottom:3px}
.r-mon-tl-bars{display:flex;gap:5px;height:14px}
.r-mon-tl-trk{flex:1;background:rgba(255,255,255,.04);border-radius:3px;overflow:hidden}
.r-mon-tl-fill{height:100%;border-radius:3px}

/* === Collect (Devices / live ingest) === */
.collect-scene{}
.r-coll-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:6px}
.r-coll-h2{font-size:18px;font-weight:700;color:#fff;letter-spacing:-.01em;margin:0}
.r-coll-sub{font-size:11.5px;color:#64748b;margin-top:3px;line-height:1.4}
.r-coll-sub-it{color:#475569}
.r-coll-cta{
  display:inline-flex;align-items:center;gap:6px;
  background:#6366f1;color:#fff;font-size:11.5px;font-weight:600;
  padding:7px 11px;border-radius:8px;border:0;cursor:pointer;
  transition:background .2s var(--ease),transform .2s var(--ease);
}
.r-coll-cta:hover{background:#818cf8;transform:translateY(-1px)}

.r-coll-live{
  display:flex;align-items:center;gap:10px;
  padding:8px 14px;margin:2px 0 6px;
  border:1px solid rgba(34,211,238,.18);background:rgba(34,211,238,.05);
  border-radius:10px;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;
}
.r-coll-live-dot{
  width:7px;height:7px;border-radius:50%;background:#22d3ee;
  box-shadow:0 0 0 0 rgba(34,211,238,.6);
  animation:collPulse 1.6s var(--ease) infinite;
}
@keyframes collPulse{
  0%{box-shadow:0 0 0 0 rgba(34,211,238,.6)}
  70%{box-shadow:0 0 0 10px rgba(34,211,238,0)}
  100%{box-shadow:0 0 0 0 rgba(34,211,238,0)}
}
.r-coll-live-lbl{color:#22d3ee;font-weight:600;text-transform:uppercase}
.r-coll-live-rate{color:#fff;font-variant-numeric:tabular-nums}
.r-coll-live-rate span{font-weight:700;color:#22d3ee;margin-right:3px}
.r-coll-live-sep{color:#475569}
.r-coll-live-pipe{color:#64748b}
.r-coll-live-pct{color:#22c55e;font-weight:700;font-variant-numeric:tabular-nums}

.r-coll-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:4px 0 4px}
.r-coll-kpi{padding:14px 16px}
.r-coll-kpi-val{font-size:22px;font-weight:800;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.r-coll-kpi-lbl{font-size:11px;color:#cbd5e1;font-weight:500;margin-top:4px}
.r-coll-kpi-sub{font-size:10px;color:#64748b;margin-top:1px}

.r-coll-two{display:grid;grid-template-columns:1.4fr 1fr;gap:12px;margin-top:4px}
.r-coll-stream{display:flex;flex-direction:column;gap:8px;min-height:230px}
.r-coll-stream-list{
  display:flex;flex-direction:column;gap:2px;
  font-family:'JetBrains Mono',monospace;font-size:11px;
  max-height:220px;overflow:hidden;mask-image:linear-gradient(180deg,#000 80%,transparent 100%);
}
.r-coll-ev{
  display:grid;grid-template-columns:78px 56px 76px 14px 1fr;gap:8px;align-items:center;
  padding:4px 6px;border-radius:6px;
  background:rgba(255,255,255,.02);
  animation:collEvIn .35s var(--ease-out) backwards;
  white-space:nowrap;overflow:hidden;
}
.r-coll-ev.seeded{animation:none}
.r-coll-ev.out{animation:collEvOut .35s var(--ease) forwards}
@keyframes collEvIn{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes collEvOut{
  to{opacity:0;transform:translateY(6px)}
}
.r-coll-ev-time{color:#475569;font-size:10px}
.r-coll-ev-proto{
  padding:1px 5px;border:1px solid;border-radius:4px;
  font-size:9px;font-weight:600;letter-spacing:.04em;text-align:center;
}
.r-coll-ev-dev{color:#cbd5e1;font-weight:600}
.r-coll-ev-arr{color:#475569}
.r-coll-ev-val{color:#fff;overflow:hidden;text-overflow:ellipsis}

.r-coll-proto{display:flex;flex-direction:column;gap:8px;min-height:230px}
.r-coll-proto-list{display:flex;flex-direction:column;gap:8px}
.r-coll-proto-row{
  display:grid;grid-template-columns:12px 1fr 90px;gap:10px;align-items:center;
  padding:7px 4px;border-radius:8px;
  transition:background .2s var(--ease);
}
.r-coll-proto-row:hover{background:rgba(255,255,255,.03)}
.r-coll-proto-dot{
  width:8px;height:8px;border-radius:50%;background:var(--c);
  box-shadow:0 0 8px var(--c);
  animation:collDotBlink 1.4s var(--ease) infinite;
}
.r-coll-proto-row:nth-child(2) .r-coll-proto-dot{animation-delay:.15s}
.r-coll-proto-row:nth-child(3) .r-coll-proto-dot{animation-delay:.30s}
.r-coll-proto-row:nth-child(4) .r-coll-proto-dot{animation-delay:.45s}
.r-coll-proto-row:nth-child(5) .r-coll-proto-dot{animation-delay:.60s}
.r-coll-proto-row:nth-child(6) .r-coll-proto-dot{animation-delay:.75s}
.r-coll-proto-row:nth-child(7) .r-coll-proto-dot{animation-delay:.90s}
@keyframes collDotBlink{
  0%,100%{opacity:.45;transform:scale(.85)}
  50%{opacity:1;transform:scale(1.1)}
}
.r-coll-proto-id{font-size:12px;font-weight:700;letter-spacing:.02em}
.r-coll-proto-desc{font-size:10px;color:#64748b;margin-top:1px}
.r-coll-proto-rate{display:flex;flex-direction:column;gap:4px;align-items:flex-end}
.r-coll-proto-rate-val{
  font-family:'JetBrains Mono',monospace;font-size:11px;color:#fff;font-weight:600;
  font-variant-numeric:tabular-nums;
}
.r-coll-proto-rate-bar{width:80px;height:3px;border-radius:2px;background:rgba(255,255,255,.06);overflow:hidden}
.r-coll-proto-rate-fill{height:100%;border-radius:2px;opacity:.85;transition:width .6s var(--ease)}

.r-coll-devgrid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px;
}
.r-coll-dev{padding:12px 14px;display:flex;flex-direction:column;gap:6px;transition:transform .25s var(--ease),border-color .25s var(--ease)}
.r-coll-dev:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.14)}
.r-coll-dev-top{display:flex;align-items:center;gap:8px}
.r-coll-dev-status{width:7px;height:7px;border-radius:50%;flex-shrink:0;box-shadow:0 0 6px currentColor}
.r-coll-dev[data-status="online"] .r-coll-dev-status{box-shadow:0 0 6px #22c55e}
.r-coll-dev[data-status="warning"] .r-coll-dev-status{box-shadow:0 0 6px #eab308}
.r-coll-dev[data-status="offline"] .r-coll-dev-status{box-shadow:none;opacity:.55}
.r-coll-dev-name{flex:1;font-size:11.5px;font-weight:600;color:#e5e7eb;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r-coll-dev-agent{
  font-family:'JetBrains Mono',monospace;font-size:9px;
  padding:1px 5px;border:1px solid;border-radius:4px;letter-spacing:.06em;
}
.r-coll-dev-meta{display:flex;align-items:center;gap:8px}
.r-coll-dev-proto{
  font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:600;
  padding:1px 5px;border:1px solid;border-radius:4px;letter-spacing:.04em;
}
.r-coll-dev-space{font-size:10px;color:#64748b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r-coll-dev-bot{display:flex;align-items:center;justify-content:space-between;margin-top:2px}
.r-coll-dev-val{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.r-coll-dev-ping{font-size:10px;color:#475569;font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums}
.r-coll-dev[data-status="offline"] .r-coll-dev-ping{color:#ef4444}

@media (max-width:1200px){
  .r-coll-devgrid{grid-template-columns:repeat(2,1fr)}
  .r-coll-two{grid-template-columns:1fr}
}

/* === Predict (AIRA Predictive + chat) === */
.predict-scene{}
.r-agent-hdr{
  border-bottom:1px solid var(--line);flex-shrink:0;
  background:linear-gradient(135deg, rgba(139,92,246,.08) 0%, transparent 60%);
}
.r-agent-row{display:flex;align-items:center;gap:14px;padding:14px 22px}
.r-agent-back{
  width:30px;height:30px;border-radius:8px;border:0;background:transparent;
  color:#64748b;font-size:14px;cursor:pointer;
  transition:color .2s var(--ease),background .2s var(--ease);
}
.r-agent-back:hover{color:#fff;background:rgba(255,255,255,.05)}
.r-agent-avatar{
  width:48px;height:48px;border-radius:14px;overflow:hidden;
  border:1px solid;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.r-agent-avatar-img{width:100%;height:100%;object-fit:cover;transform:scale(1.1)}
.r-agent-info{flex:1;min-width:0}
.r-agent-line{display:flex;align-items:center;gap:10px;margin-bottom:2px}
.r-agent-name{font-size:18px;font-weight:700;margin:0;letter-spacing:-.02em}
.r-agent-chip{
  font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:999px;border:1px solid;
}
.r-agent-active{display:flex;align-items:center;gap:5px;font-size:10.5px;color:#4ade80;font-weight:500}
.r-agent-active-dot{
  width:6px;height:6px;border-radius:50%;background:#4ade80;
  animation:pulse 2s var(--ease) infinite;
}
.r-agent-desc{font-size:10.5px;color:#475569;line-height:1.4;margin-top:1px}
.r-agent-controls{display:flex;align-items:center;gap:14px;flex-shrink:0}
.r-agent-mode{
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);
  border-radius:10px;padding:6px 11px;
}
.r-agent-mode-ic{font-size:11px}
.r-agent-mode-lbl{font-size:10.5px;color:#94a3b8}
.r-agent-mode-val{font-size:10.5px;font-weight:600}
.r-agent-toggle{
  width:36px;height:20px;border-radius:999px;background:rgba(255,255,255,.06);
  position:relative;transition:background .2s var(--ease);flex-shrink:0;
}
.r-agent-toggle.on{background:#8b5cf6}
.r-agent-toggle-knob{
  position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:#fff;transition:left .2s var(--ease);
}
.r-agent-toggle.on .r-agent-toggle-knob{left:18px}

.r-agent-tabs{
  display:flex;align-items:center;gap:0;padding:0 22px;overflow-x:auto;
  scrollbar-width:none;
}
.r-agent-tabs::-webkit-scrollbar{display:none}
.r-agent-tab{
  position:relative;display:inline-flex;align-items:center;gap:6px;
  padding:8px 12px;font-size:11.5px;font-weight:500;
  color:#64748b;background:transparent;border:0;cursor:pointer;white-space:nowrap;
  transition:color .2s var(--ease);
}
.r-agent-tab:hover{color:#cbd5e1}
.r-agent-tab.active{color:#8b5cf6}
.r-agent-tab-ic{font-size:11px}
.r-agent-tab-ind{
  position:absolute;left:8px;right:8px;bottom:0;height:2px;border-radius:2px 2px 0 0;
}

.r-pred-body{
  flex:1;display:grid;grid-template-columns:1.5fr 1fr;gap:0;min-height:0;overflow:hidden;
}
.r-pred-left{
  padding:18px 22px;display:flex;flex-direction:column;gap:16px;
  overflow-y:auto;min-width:0;border-right:1px solid var(--line);
}
.r-pred-left::-webkit-scrollbar{width:6px}
.r-pred-left::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:3px}
.r-pred-head{margin-bottom:0}
.r-pred-h3{font-size:16px;font-weight:700;color:#fff;letter-spacing:-.01em;margin:0}
.r-pred-sub{font-size:10.5px;color:#64748b;margin-top:2px;line-height:1.4}
.r-pred-sub-it{color:#475569;font-style:italic}

.r-pred-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.r-pred-kpi{padding:12px 14px;position:relative;overflow:hidden}
.r-pred-kpi::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at top right, rgba(139,92,246,.18), transparent 60%);
  opacity:.5;
}
.r-pred-kpi > *{position:relative}
.r-pred-kpi-lbl{font-size:10px;color:#64748b;line-height:1.2}
.r-pred-kpi-it{font-size:10px;color:#475569;font-style:italic;margin-top:1px;margin-bottom:6px;line-height:1.2}
.r-pred-kpi-val{font-size:18px;font-weight:700;color:#fff;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.r-pred-kpi-delta{font-size:10px;margin-top:3px;line-height:1.2}

.r-pred-chartcard{padding:14px 16px}
.r-pred-chart-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:8px}
.r-pred-cardttl{font-size:12.5px;font-weight:600;color:#fff;display:flex;align-items:center;gap:7px;margin:0}
.r-pred-cardsub{font-size:10px;color:#64748b;margin-top:2px}
.r-pred-chart-legend{display:flex;gap:11px;font-size:10px;color:#94a3b8;flex-wrap:wrap}
.r-pred-leg-item{display:inline-flex;align-items:center;gap:5px}
.r-pred-leg-line{display:inline-block;width:14px;height:2px;border-radius:1px}
.r-pred-leg-line.dashed{
  background:transparent !important;
  background-image:linear-gradient(to right, currentColor 50%, transparent 50%) !important;
  background-size:5px 2px !important;
}
.r-pred-leg-band{display:inline-block;width:12px;height:12px;border-radius:3px;opacity:.25}
.r-pred-chartwrap{height:220px}

.r-pred-row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.r-pred-cost,.r-pred-events{padding:14px 16px}
.r-pred-scen-list{display:flex;flex-direction:column;gap:11px;margin-top:8px}
.r-pred-scen-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px}
.r-pred-scen-lbl{font-size:11px;color:#cbd5e1;font-weight:500}
.r-pred-scen-val{font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums}
.r-pred-scen-row{display:flex;align-items:center;gap:10px}
.r-pred-scen-bar{flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.05);overflow:hidden}
.r-pred-scen-fill{height:100%;border-radius:3px;transition:width .8s var(--ease)}
.r-pred-scen-yr{font-size:10px;color:#64748b;min-width:88px;text-align:right;font-variant-numeric:tabular-nums;font-family:'JetBrains Mono',monospace}
.r-pred-saving{
  display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#94a3b8;
  margin-top:10px;padding-top:10px;border-top:1px solid var(--line);
}
.r-pred-saving-val{color:#4ade80;font-weight:700}

.r-pred-evlist{display:flex;flex-direction:column;gap:7px;margin-top:8px}
.r-pred-ev{
  display:flex;gap:10px;align-items:flex-start;
  padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.025);border:1px solid var(--line);
  transition:background .2s var(--ease);
}
.r-pred-ev:hover{background:rgba(255,255,255,.05)}
.r-pred-ev-date{text-align:center;width:32px;flex-shrink:0;font-family:'JetBrains Mono',monospace}
.r-pred-ev-mo{font-size:8px;color:#475569;text-transform:uppercase;letter-spacing:.06em}
.r-pred-ev-day{font-size:12px;font-weight:700;color:#fff;line-height:1.1}
.r-pred-ev-txt{flex:1;font-size:10.5px;color:#cbd5e1;line-height:1.4}
.r-pred-ev-risk{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  padding:1px 6px;border-radius:4px;flex-shrink:0;
}

/* Chat panel */
.r-pred-chat{
  display:flex;flex-direction:column;overflow:hidden;min-width:0;
  background:rgba(0,0,0,.18);
}
.r-pred-chat-head{
  display:flex;align-items:center;gap:10px;padding:12px 16px;
  border-bottom:1px solid var(--line);
}
.r-pred-chat-avatar{
  width:32px;height:32px;border-radius:10px;overflow:hidden;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.r-pred-chat-avatar-img{width:100%;height:100%;object-fit:cover;transform:scale(1.1)}
.r-pred-chat-htxt{flex:1;min-width:0}
.r-pred-chat-title{font-size:13px;font-weight:600;color:#fff;line-height:1.2}
.r-pred-chat-status{font-size:10px;color:#64748b;margin-top:1px;display:flex;align-items:center;gap:5px}
.r-pred-chat-status-dot{width:5px;height:5px;border-radius:50%;background:#4ade80;animation:pulse 2s var(--ease) infinite}
.r-pred-chat-tag{
  font-size:10px;padding:3px 8px;border-radius:999px;border:1px solid;font-weight:600;
}

.r-pred-chat-msgs{
  flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:14px;
  scroll-behavior:smooth;
}
.r-pred-chat-msgs::-webkit-scrollbar{width:5px}
.r-pred-chat-msgs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.06);border-radius:3px}

.r-pred-msg{display:flex;gap:8px;animation:predMsgIn .35s var(--ease-out) backwards}
.r-pred-msg-user{justify-content:flex-end}
.r-pred-msg-assistant{justify-content:flex-start}
.r-pred-msg-avatar{
  width:28px;height:28px;border-radius:8px;overflow:hidden;flex-shrink:0;margin-top:1px;
}
.r-pred-msg-avatar-img{width:100%;height:100%;object-fit:cover;transform:scale(1.1)}
.r-pred-msg-stack{display:flex;flex-direction:column;gap:5px;max-width:84%}
.r-pred-msg-user .r-pred-msg-stack{align-items:flex-end}
.r-pred-msg-assistant .r-pred-msg-stack{align-items:flex-start}
.r-pred-msg-bub{
  border-radius:14px;padding:9px 13px;font-size:11.5px;line-height:1.5;
  color:#e5e7eb;background:rgba(255,255,255,.05);border:1px solid var(--line);
}
.r-pred-msg-bub strong{color:#fff;font-weight:700}
.r-pred-msg-bub em{color:#94a3b8;font-style:italic}
.r-pred-msg-user .r-pred-msg-bub{
  color:#fff;border:0;border-bottom-right-radius:4px;
}
.r-pred-msg-assistant .r-pred-msg-bub{border-bottom-left-radius:4px}
.r-pred-msg-srcs{display:flex;flex-wrap:wrap;gap:5px}
.r-pred-msg-src{
  display:inline-flex;align-items:center;gap:4px;
  font-size:9.5px;padding:2px 7px;border-radius:6px;border:1px solid;
  cursor:pointer;transition:opacity .2s var(--ease);
}
.r-pred-msg-src:hover{opacity:.8}
.r-pred-msg-src-ic{font-size:9px}
.r-pred-msg-time{font-size:9px;color:#475569}

.r-pred-thinking{
  display:flex;align-items:center;gap:8px;padding:9px 13px;
  border-radius:14px;border-bottom-left-radius:4px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);
  font-size:11.5px;color:#94a3b8;
}
.r-pred-thinking-dots{display:inline-flex;gap:4px}
.r-pred-thinking-dots span{
  width:5px;height:5px;border-radius:50%;
  animation:predBounce 1s var(--ease) infinite;
}
.r-pred-thinking-dots span:nth-child(2){animation-delay:.15s}
.r-pred-thinking-dots span:nth-child(3){animation-delay:.3s}
@keyframes predBounce{
  0%,80%,100%{transform:translateY(0);opacity:.5}
  40%{transform:translateY(-4px);opacity:1}
}

.r-pred-chat-prompts{
  display:flex;gap:6px;flex-wrap:wrap;padding:8px 16px;
  border-top:1px solid var(--line);
}
.r-pred-chat-prompt{
  font-size:10px;padding:4px 9px;border-radius:999px;border:1px solid;
  cursor:pointer;transition:opacity .2s var(--ease);
}
.r-pred-chat-prompt:hover{opacity:.75}

.r-pred-chat-input{
  display:flex;align-items:center;gap:8px;
  padding:10px 14px;border-top:1px solid var(--line);
}
.r-pred-chat-iconbtn{
  width:28px;height:28px;border-radius:8px;background:transparent;color:#64748b;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:color .2s var(--ease),background .2s var(--ease);font-size:12px;
}
.r-pred-chat-iconbtn:hover{color:#fff;background:rgba(255,255,255,.05)}
.r-pred-chat-field{
  flex:1;background:rgba(255,255,255,.05);border:1px solid var(--line);
  color:#cbd5e1;font-size:11.5px;padding:8px 12px;border-radius:10px;outline:none;
  font-family:'Inter',sans-serif;
}
.r-pred-chat-field:focus{border-color:rgba(139,92,246,.5)}
.r-pred-chat-field::placeholder{color:#475569}
.r-pred-chat-send{
  width:32px;height:32px;border-radius:10px;color:#fff;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:transform .15s var(--ease);font-size:12px;
}
.r-pred-chat-send:hover{transform:translateY(-1px)}

@keyframes predMsgIn{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}

@media (max-width:1200px){
  .r-pred-body{grid-template-columns:1fr}
  .r-pred-left{border-right:0;border-bottom:1px solid var(--line)}
  .r-pred-row2{grid-template-columns:1fr}
  .r-pred-kpis{grid-template-columns:repeat(2,1fr)}
}

/* === Outcomes === */
.outcomes-scene{align-items:flex-start;justify-content:flex-start;padding:4vh 3vw 8vh;flex-direction:column;gap:0;overflow-y:auto;overflow-x:hidden;box-sizing:border-box}
.outcomes-scene::-webkit-scrollbar{width:6px;height:0}
.outcomes-scene::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px}
.outcomes-scene *{box-sizing:border-box}
.outcomes-head{text-align:center;width:100%;margin-bottom:22px}
.outcomes-head .h2{font-size:clamp(26px,3.4vw,52px)}

.outcomes-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
  width:100%;max-width:1480px;margin:0 auto 22px;
}
.metric-card{
  position:relative;display:flex;flex-direction:column;gap:6px;
  padding:22px 20px 18px;border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.005));
  overflow:hidden;cursor:default;
  transition:transform .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease);
}
.metric-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:14px;
  background:radial-gradient(120% 80% at 100% 0%, var(--glow,transparent) 0%, transparent 55%);
  opacity:0;transition:opacity .4s var(--ease);
}
.metric-card:hover{
  transform:translateY(-3px);border-color:var(--line-2);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.01));
}
.metric-card:hover::after{opacity:.35}
.metric-bar{
  position:absolute;left:0;top:0;bottom:0;width:3px;opacity:.55;
  transition:opacity .35s var(--ease),width .35s var(--ease);
}
.metric-card:hover .metric-bar{opacity:1;width:4px}

.metric-num{
  font-size:clamp(32px,3.4vw,52px);font-weight:800;letter-spacing:-0.035em;line-height:1;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum";
}
.metric-spark{height:40px;margin:6px -4px 4px;opacity:.95;transition:opacity .35s var(--ease)}
.metric-card:hover .metric-spark{opacity:1}
.metric-spark svg{display:block;width:100%;height:100%;overflow:visible}
.spark-dot{filter:drop-shadow(0 0 6px currentColor)}

.metric-lbl{font-size:13px;color:#e5e7eb;font-weight:500;line-height:1.3;letter-spacing:-.005em}
.metric-sub{font-size:11px;color:var(--ink-dim);font-weight:400;line-height:1.3}
.metric-hover{
  display:flex;flex-direction:column;gap:2px;margin-top:6px;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .4s var(--ease),opacity .35s var(--ease),margin-top .4s var(--ease);
}
.metric-hover span{font-size:11px;color:var(--ink-dim)}
.metric-hover .metric-peak{color:#e5e7eb;font-weight:500}
.metric-card:hover .metric-hover{max-height:60px;opacity:1;margin-top:8px}

.metric-src{
  font-family:'JetBrains Mono',monospace;font-size:9.5px;
  letter-spacing:.18em;text-transform:uppercase;margin-top:auto;padding-top:10px;
  display:flex;align-items:baseline;gap:5px;
}
.metric-src-verb{color:var(--ink-faint)}
.metric-src-agent{font-weight:700;letter-spacing:.22em;text-shadow:0 0 12px currentColor}

.metric-card:nth-child(1){--glow:rgba(34,197,94,.18)}
.metric-card:nth-child(2){--glow:rgba(34,211,238,.18)}
.metric-card:nth-child(3){--glow:rgba(251,146,60,.18)}
.metric-card:nth-child(4){--glow:rgba(250,204,21,.18)}
.metric-card:nth-child(5){--glow:rgba(167,139,250,.18)}
.metric-card:nth-child(6){--glow:rgba(52,211,153,.18)}
.metric-card:nth-child(7){--glow:rgba(96,165,250,.18)}
.metric-card:nth-child(8){--glow:rgba(244,114,182,.18)}

/* === Savings calculator === */
.calc{
  width:100%;max-width:1480px;margin:0 auto;
  border:1px solid var(--line);border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0));
  overflow:hidden;
}
.calc-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:14px 22px;border-bottom:1px solid var(--line);
}
.calc-kicker{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-faint);
}
.calc-title{font-size:15px;font-weight:600;color:#e5e7eb;letter-spacing:-.005em}
.calc-body{display:grid;grid-template-columns:1.4fr 1fr;gap:0}
.calc-controls{
  padding:22px 22px 32px;
  display:grid;gap:16px;
  grid-auto-rows:min-content;align-content:start;
  border-right:1px solid var(--line);
}

.calc-row{display:flex;flex-direction:column;gap:8px}
.calc-row-top{display:flex;justify-content:space-between;align-items:baseline}
.calc-row-lbl{font-size:11.5px;color:var(--ink-dim);letter-spacing:.01em}
.calc-row-val{
  font-family:'JetBrains Mono',monospace;font-size:13px;color:#fff;font-weight:600;
  font-variant-numeric:tabular-nums;
}
.calc-slider{
  -webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;
  background:linear-gradient(to right,#22c55e var(--pct,40%),rgba(255,255,255,.08) var(--pct,40%));
  outline:none;cursor:pointer;
}
.calc-slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;
  background:#fff;border:2px solid #22c55e;cursor:grab;
  box-shadow:0 0 0 4px rgba(34,197,94,.12);transition:transform .15s var(--ease);
}
.calc-slider::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.15)}
.calc-slider::-moz-range-thumb{
  width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid #22c55e;
  cursor:grab;box-shadow:0 0 0 4px rgba(34,197,94,.12);
}

.calc-out{padding:20px 22px 28px;display:flex;flex-direction:column;gap:6px}
.calc-out-row{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:5px 0;border-bottom:1px dashed var(--line);
}
.calc-out-lbl{font-size:11.5px;color:var(--ink-dim);letter-spacing:.01em}
.calc-out-val{
  font-family:'JetBrains Mono',monospace;font-size:14px;color:#e5e7eb;font-weight:600;
  font-variant-numeric:tabular-nums;
}
.calc-total{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:6px;padding:12px 0 4px;border-top:1px solid var(--line-2);
}
.calc-total-lbl{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);
  font-family:'JetBrains Mono',monospace;
}
.calc-total-val{
  font-size:clamp(26px,2.4vw,36px);font-weight:800;color:#22c55e;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;line-height:1;
}
.calc-payback{margin-top:4px;display:flex;flex-direction:column;gap:6px}
.calc-payback-row{
  display:flex;justify-content:space-between;
  font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-dim);
  letter-spacing:.06em;
}
.calc-payback-row span:last-child{color:#e5e7eb}
.calc-payback-bar{
  height:4px;border-radius:2px;background:rgba(255,255,255,.06);overflow:hidden;
}
.calc-payback-fill{
  height:100%;width:0%;background:linear-gradient(90deg,#22c55e,#22d3ee);
  transition:width .5s var(--ease);
}

/* === Closer === */
.closer-scene{background:#000;text-align:center}
.closer-scene .stack{display:flex;flex-direction:column;gap:24px;align-items:center;padding:0 6vw}
.closer-scene .headline{font-size:clamp(40px,7.5vw,124px)}
.closer-scene .av{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink-faint);letter-spacing:.3em;text-transform:uppercase}

/* === Misc === */
#hint{
  position:fixed;bottom:64px;left:50%;transform:translateX(-50%);
  font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-faint);letter-spacing:.14em;text-transform:uppercase;
  z-index:40;transition:opacity 1s var(--ease);pointer-events:none;
}
#hint.hidden{opacity:0}

/* === Slide nav (bottom scroller) === */
#slideNav{
  position:fixed;left:50%;bottom:14px;transform:translateX(-50%);
  display:flex;gap:6px;align-items:center;
  max-width:min(94vw,1100px);overflow-x:auto;overflow-y:hidden;
  padding:6px 10px;border:1px solid var(--line-2);border-radius:999px;
  background:rgba(0,0,0,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  z-index:45;
  scrollbar-width:none;
}
#slideNav::-webkit-scrollbar{display:none}
.slide-nav-item{
  display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);
  padding:6px 12px;border-radius:999px;border:1px solid transparent;
  cursor:pointer;transition:color .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease);
  white-space:nowrap;
}
.slide-nav-item .sn-num{color:rgba(255,255,255,.45);font-weight:600}
.slide-nav-item:hover{color:#fff;background:rgba(255,255,255,.05);border-color:var(--line-2)}
.slide-nav-item.active{color:#000;background:#fff;border-color:#fff}
.slide-nav-item.active .sn-num{color:#000}

/* small screens fallback */
@media (max-width:720px){
  .agents-grid{grid-template-columns:1fr 1fr;gap:14px}
  .agents-grid .agent-card:nth-child(5){grid-column:1/-1}
  .kpi-row{grid-template-columns:repeat(3,1fr)}
  .home-grid{grid-template-columns:1fr 1fr}
  .outcomes-grid{grid-template-columns:1fr 1fr;gap:10px}
  .calc-body{grid-template-columns:1fr}
  .calc-controls{border-right:none;border-bottom:1px solid var(--line)}
}
@media (max-width:1100px){
  .outcomes-grid{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:900px){
  .outcomes-grid{grid-template-columns:repeat(2,1fr)}
}

/* =========================================================
   SCENE 5 — Actual platform frame (AssetOS Home)
   Self-contained "r-*" namespace.
========================================================= */
.real-app{align-items:center;justify-content:center}
.r-frame{
  position:relative;width:min(96vw,1480px);height:min(88vh,900px);
  background:#06070b;border:1px solid var(--line-2);border-radius:14px;overflow:hidden;
  box-shadow:0 30px 120px rgba(0,0,0,.6),0 0 1px 1px rgba(255,255,255,.04) inset;
  color:#e5e7eb;font-family:'Inter',ui-sans-serif,system-ui,sans-serif;
}
.r-titlebar{
  display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
}
.r-traffic{display:flex;gap:6px}
.r-traffic span{width:11px;height:11px;border-radius:50%}
.r-traffic span:nth-child(1){background:#ff5f56}
.r-traffic span:nth-child(2){background:#ffbd2e}
.r-traffic span:nth-child(3){background:#27c93f}
.r-url{
  margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:11px;color:#9ca3af;
  background:rgba(255,255,255,.04);border:1px solid var(--line);padding:3px 12px;border-radius:6px;
  min-width:220px;text-align:center;
}
.r-body{display:flex;height:calc(100% - 36px)}

/* Sidebar */
.r-sidebar{
  width:220px;flex-shrink:0;background:#0a0b10;border-right:1px solid rgba(255,255,255,.06);
  display:flex;flex-direction:column;cursor:default;
}
.r-brand{display:flex;align-items:center;gap:10px;height:48px;padding:0 16px;border-bottom:1px solid rgba(255,255,255,.06)}
.r-brand-logo{
  width:22px;height:22px;border-radius:6px;
  background:linear-gradient(135deg,#8b5cf6,#3b82f6);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:11px;color:#fff;
}
.r-brand-name{font-weight:700;letter-spacing:-0.01em;font-size:14px;color:#fff}
.r-nav{flex:1;overflow:auto;padding:8px 0}
.r-nav::-webkit-scrollbar{width:4px}
.r-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.06);border-radius:2px}
.r-nav-subs{margin:2px 8px 4px 30px;border-left:1px solid rgba(255,255,255,.06);padding-left:8px;display:flex;flex-direction:column;gap:1px}
.r-nav-sub{
  display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:6px;
  font-size:11.5px;font-weight:500;cursor:default;
}
.r-nav-sub:hover{background:rgba(255,255,255,.04)}
.r-nav-sub-bolt{font-size:10px}
.r-nav-group{
  padding:10px 16px 4px;font-size:10px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:#64748b;
}
.r-nav-item{
  display:flex;align-items:center;gap:10px;margin:1px 8px;padding:7px 10px;border-radius:8px;
  font-size:13px;font-weight:500;color:#94a3b8;cursor:default;
}
.r-nav-item .r-nav-ic{width:14px;text-align:center;color:#64748b;font-size:12px}
.r-nav-item.active{background:rgba(255,255,255,.08);color:#fff}
.r-nav-item.active .r-nav-ic{color:#fff}

.r-live-agents{padding:4px 16px 8px;display:flex;flex-direction:column;gap:6px}
.r-live-row{display:flex;align-items:center;gap:8px}
.r-live-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.r-live-name{font-size:11px;font-weight:600}
.r-live-status{margin-left:auto;font-size:10px;color:#64748b;text-transform:capitalize}

.r-user{
  border-top:1px solid rgba(255,255,255,.06);padding:10px 12px;
  display:flex;align-items:center;gap:10px;
}
.r-user-avatar{
  width:30px;height:30px;border-radius:50%;
  background:linear-gradient(135deg,#6366f1,#9333ea);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;color:#fff;
  flex-shrink:0;
}
.r-user-info{min-width:0}
.r-user-name{font-size:12px;font-weight:600;color:#fff}
.r-user-mail{font-size:10px;color:#64748b}

/* Right column: TopBar + main */
.r-col{flex:1;display:flex;flex-direction:column;min-width:0}

.r-topbar{
  height:48px;display:flex;align-items:center;gap:14px;padding:0 18px;
  border-bottom:1px solid rgba(255,255,255,.06);background:rgba(6,7,11,.8);
  backdrop-filter:blur(10px);flex-shrink:0;
}
.r-crumbs{display:flex;align-items:center;gap:8px;font-size:12px}
.r-crumb-root{color:#64748b}
.r-crumb-sep{color:#475569}
.r-crumb-cur{color:#fff;font-weight:500}
.r-search{
  flex:1;max-width:340px;margin:0 auto;display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
  border-radius:8px;padding:5px 12px;
}
.r-search-ic{color:#64748b;font-size:12px}
.r-search-ph{font-size:12px;color:#475569}
.r-top-right{display:flex;align-items:center;gap:10px;margin-left:auto}
.r-top-date{font-size:11px;color:#64748b}
.r-top-btn{
  font-size:11px;color:#cbd5e1;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);border-radius:8px;padding:5px 10px;cursor:default;
}
.r-top-icon{
  width:28px;height:28px;border-radius:8px;color:#94a3b8;font-size:13px;
  display:inline-flex;align-items:center;justify-content:center;cursor:default;
}
.r-top-icon:hover{background:rgba(255,255,255,.04);color:#fff}
.r-top-cta{
  font-size:11px;font-weight:600;color:#fff;background:#6366f1;
  border-radius:8px;padding:6px 12px;cursor:default;
}

/* Main scrollable area */
.r-main{
  flex:1;overflow:auto;padding:18px;display:flex;flex-direction:column;gap:14px;
  background:radial-gradient(80% 50% at 50% 0%,rgba(99,102,241,.04),transparent 60%) #06070b;
}
.r-main::-webkit-scrollbar{width:6px}
.r-main::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:3px}

.r-glass{
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
  border-radius:14px;backdrop-filter:blur(20px);
}

/* Hero = Brain AI chat module */
.r-chat{
  display:flex;flex-direction:column;overflow:hidden;
  min-height:360px;max-height:420px;
}
.r-chat-header{
  display:flex;align-items:center;gap:12px;padding:14px 18px;
  border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0;
}
.r-chat-avatar{
  border-radius:50%;background:linear-gradient(135deg,#6366f1,#9333ea);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 0 16px rgba(99,102,241,.35);
}
.r-chat-avatar-img{width:65%;height:65%;object-fit:contain;filter:brightness(1.4) drop-shadow(0 0 4px rgba(255,255,255,.4))}
.r-chat-header-text{flex:1;min-width:0}
.r-chat-title{font-size:13px;font-weight:600;color:#fff}
.r-chat-status{font-size:10px;color:#22c55e;display:flex;align-items:center;gap:6px;margin-top:2px}
.r-chat-status-dot{width:6px;height:6px;border-radius:50%;background:#22c55e;animation:pulse 1.8s var(--ease) infinite}
.r-chat-tag{
  font-size:10px;color:#94a3b8;border:1px solid rgba(255,255,255,.08);
  border-radius:8px;padding:3px 9px;flex-shrink:0;
}

.r-chat-msgs{
  flex:1;overflow:auto;padding:14px 18px;display:flex;flex-direction:column;gap:14px;
  scroll-behavior:smooth;
}
.r-chat-msgs::-webkit-scrollbar{width:5px}
.r-chat-msgs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:3px}
.r-chat-msg{display:flex;gap:10px}
.r-chat-msg-assistant{justify-content:flex-start}
.r-chat-msg-user{justify-content:flex-end}
.r-chat-msg-wrap{display:flex;flex-direction:column;gap:6px;max-width:78%}
.r-chat-msg-user .r-chat-msg-wrap{align-items:flex-end}
.r-chat-bubble{
  font-size:12.5px;line-height:1.55;padding:10px 14px;border-radius:14px;
}
.r-chat-bubble strong{color:#fff;font-weight:600}
.r-chat-bubble em{color:#94a3b8;font-style:italic}
.r-chat-bubble-user{
  background:#6366f1;color:#fff;border-bottom-right-radius:4px;
}
.r-chat-bubble-assistant{
  background:rgba(255,255,255,.05);color:#cbd5e1;
  border:1px solid rgba(255,255,255,.06);border-bottom-left-radius:4px;
}
.r-chat-link{color:#a5b4fc}
.r-chat-sources{display:flex;flex-wrap:wrap;gap:6px}
.r-chat-source{
  font-size:10px;color:#a5b4fc;background:rgba(99,102,241,.1);
  border:1px solid rgba(99,102,241,.25);border-radius:6px;padding:2px 7px;
  display:inline-flex;align-items:center;gap:5px;
}
.r-chat-source-ic{font-size:9px}

.r-chat-prompts{
  display:flex;flex-wrap:wrap;gap:6px;padding:6px 18px 4px;flex-shrink:0;
}
.r-chat-prompt{
  font-size:10px;color:#94a3b8;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);border-radius:999px;padding:4px 10px;cursor:default;
  transition:all .2s var(--ease);
}
.r-chat-prompt:hover{color:#fff;border-color:rgba(255,255,255,.16)}

.r-chat-input{
  display:flex;align-items:center;gap:10px;padding:12px 16px;
  border-top:1px solid rgba(255,255,255,.06);flex-shrink:0;
}
.r-chat-icon-btn{
  width:32px;height:32px;border-radius:10px;color:#64748b;font-size:14px;
  display:inline-flex;align-items:center;justify-content:center;cursor:default;
}
.r-chat-icon-btn:hover{color:#fff;background:rgba(255,255,255,.04)}
.r-chat-field{
  flex:1;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
  border-radius:10px;padding:9px 14px;font-size:12.5px;color:#64748b;
}
.r-chat-send{
  width:36px;height:36px;border-radius:10px;background:#6366f1;color:#fff;
  font-size:13px;display:inline-flex;align-items:center;justify-content:center;cursor:default;
  transition:background .2s var(--ease);
}
.r-chat-send:hover{background:#818cf8}

/* KPI row */
.r-kpi-row{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.r-kpi{padding:12px 14px}
.r-kpi-lbl{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#64748b;margin-bottom:4px}
.r-kpi-val{font-size:18px;font-weight:700;color:#fff;line-height:1.1}
.r-kpi-delta{font-size:10px;color:#22c55e;margin-top:2px}

/* 3-col + 2-col grids */
.r-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.r-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.r-card{padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.r-card-title{
  font-size:13px;font-weight:600;color:#fff;display:flex;align-items:center;gap:8px;
}
.r-card-icon{font-size:14px}
.r-card-aside{margin-left:auto;font-size:10px;color:#64748b;font-weight:400}

.r-stack{display:flex;flex-direction:column;gap:10px}
.r-stack-sm{gap:6px}

/* === Monitor / Dashboard scene === */
.r-mon-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.r-mon-h2{font-size:18px;font-weight:700;color:#fff;letter-spacing:-.01em;margin:0}
.r-mon-sub{font-size:11px;color:#64748b;margin-top:2px}
.r-mon-sub-it{color:#475569;font-style:italic}
.r-mon-head-actions{display:flex;gap:10px}
.r-mon-btn{
  font-size:11px;color:#94a3b8;border:1px solid rgba(255,255,255,.06);
  background:transparent;border-radius:8px;padding:6px 12px;cursor:default;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.r-mon-btn:hover{background:rgba(255,255,255,.04);color:#fff}

.r-mon-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:stretch}
.r-mon-row > .r-mon-card{height:100%}
.r-mon-card{min-height:230px;display:flex;flex-direction:column;gap:10px}
.r-mon-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.r-mon-card-sub{font-size:10px;color:#64748b;margin:-4px 0 4px}

.r-mon-badge{
  display:inline-flex;align-items:center;gap:5px;
  font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:600;
  letter-spacing:.14em;padding:3px 8px;border-radius:999px;border:1px solid;
}
.r-mon-bolt{font-size:9px}
.r-mon-tag-indigo{
  font-size:10px;color:#a5b4fc;background:rgba(99,102,241,.15);
  border:1px solid rgba(99,102,241,.3);padding:2px 8px;border-radius:999px;
}
.r-mon-tag-mute{font-size:10px;color:#64748b}

/* Priority alerts list */
.r-mon-alerts-head{
  display:grid;grid-template-columns:36px 1fr 1fr 60px;gap:8px;
  font-size:9.5px;font-weight:600;color:#475569;text-transform:uppercase;letter-spacing:.12em;
  padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.05);
}
.r-mon-alerts{display:flex;flex-direction:column;gap:2px}
.r-mon-alert-row{
  display:grid;grid-template-columns:36px 1fr 1fr 60px;gap:8px;
  padding:5px 0;font-size:11.5px;align-items:center;
}
.r-mon-alert-rank{color:#64748b;font-variant-numeric:tabular-nums}
.r-mon-alert-p{font-weight:600}
.r-mon-alert-imp{color:#cbd5e1;font-family:'JetBrains Mono',monospace;font-size:10.5px}
.r-mon-alert-urg{color:#64748b;font-size:10.5px}
.r-mon-link{font-size:10px;color:#818cf8;margin-top:auto;padding-top:6px;cursor:default}

/* Chart wrappers */
.r-mon-chart{height:110px;width:100%;overflow:hidden;flex-shrink:0}
.r-mon-chart-tall{flex:1;min-height:140px;height:auto}
.r-mon-chart svg{display:block;width:100%;height:100%}
.r-mon-legend{display:flex;gap:14px;font-size:10px;color:#64748b;flex-wrap:wrap}
.r-mon-legend span{display:inline-flex;align-items:center;gap:5px}
.r-mon-dot{width:8px;height:8px;border-radius:2px;display:inline-block}
.r-mon-legend-meta{color:#22c55e;margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:10px}

/* Safety heatmap */
.r-mon-heat-legend{display:flex;gap:10px;font-size:9.5px;color:#64748b}
.r-mon-heat-legend span{display:inline-flex;align-items:center;gap:4px}
.r-mon-heat-grid{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:1fr;gap:3px;flex:1;min-height:120px}
.r-mon-heat{
  border-radius:3px;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;
}
.r-mon-heat-axis{display:flex;justify-content:space-between;font-size:9px;color:#475569;margin-top:2px}

/* FEM stats */
.r-mon-fem-stats{display:flex;gap:18px}
.r-mon-fem-stats > div{flex:1}

/* Stat strip / pill */
.r-mon-stat-strip{display:flex;align-items:center;gap:12px}
.r-mon-stat-pill{padding:8px 12px;border-radius:10px;border:1px solid}
.r-mon-stat-lbl{font-size:9.5px;letter-spacing:.08em}
.r-mon-stat-val{font-size:18px;font-weight:700;margin-top:2px}
.r-mon-stat-side{font-size:10px;color:#64748b;line-height:1.5}
.r-mon-stat-side p{margin:0}

.r-mon-twin-stat{display:flex;gap:18px}
.r-mon-stat-big{font-size:20px;font-weight:700;margin:2px 0}
.r-mon-stat-sub{font-size:9.5px}

/* Recommendation list */
.r-mon-reco-list{display:flex;flex-direction:column;gap:6px}
.r-mon-reco{
  display:flex;gap:10px;padding:9px 11px;border-radius:10px;
  background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);
}
.r-mon-reco-bar{width:3px;border-radius:99px;flex-shrink:0}
.r-mon-reco-lbl{font-size:11.5px;font-weight:600;margin:0}
.r-mon-reco-desc{font-size:10.5px;color:#94a3b8;margin:2px 0 0;line-height:1.4}

/* Executive KPI cells */
.r-mon-exec-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.r-mon-exec-cell{
  background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);
  border-radius:10px;padding:10px 12px;
}
.r-mon-exec-lbl{font-size:9.5px;color:#64748b;margin:0}
.r-mon-exec-val{font-size:16px;font-weight:700;color:#fff;margin:2px 0 0}
.r-mon-exec-delta{font-size:9.5px;color:#22c55e;margin:1px 0 0}

/* Timeline bars */
.r-mon-time-tags{display:flex;gap:6px}
.r-mon-time-rows{display:flex;flex-direction:column;gap:10px}
.r-mon-time-lbl-row{display:flex;justify-content:space-between;font-size:10px;color:#64748b;margin-bottom:4px}
.r-mon-time-bars{display:flex;gap:6px;height:14px}
.r-mon-time-track{flex:1;background:rgba(255,255,255,.04);border-radius:3px;overflow:hidden}
.r-mon-time-fill{height:100%;border-radius:3px;transition:width .8s var(--ease)}
.r-mon-time-fill-slate{background:#475569}
.r-mon-time-fill-indigo{background:linear-gradient(90deg, rgba(99,102,241,.7), rgba(129,140,248,.5))}
.r-mon-time-fill-green{background:linear-gradient(90deg, rgba(34,197,94,.7), rgba(74,222,128,.5))}

/* System Map rows */
.r-row{display:flex;align-items:center;gap:10px}
.r-row-ic{
  width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-size:13px;flex-shrink:0;
}
.r-row-lbl{flex:1;font-size:12px;color:#cbd5e1}
.r-row-val{font-size:13px;font-weight:700;color:#fff}

/* Alerts */
.r-alert{display:flex;gap:10px;align-items:flex-start}
.r-sev{width:6px;height:6px;border-radius:50%;margin-top:6px;flex-shrink:0}
.r-alert-body{flex:1;min-width:0}
.r-alert-txt{font-size:11.5px;color:#cbd5e1;line-height:1.5}
.r-alert-meta{display:flex;align-items:center;gap:8px;margin-top:3px}
.r-alert-time{font-size:10px;color:#475569}
.r-agent-tag{
  font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.12em;
  border:1px solid;padding:1px 6px;border-radius:4px;font-weight:600;
}

/* Feed */
.r-feed{display:flex;gap:10px;align-items:flex-start}
.r-feed-body{flex:1;min-width:0}
.r-feed-txt{font-size:11px;color:#94a3b8;line-height:1.5}
.r-feed-time{font-size:9.5px;color:#475569;margin-top:2px}

/* Top Opportunities */
.r-opp{display:flex;gap:10px;align-items:flex-start;padding:9px 11px;border-radius:9px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.04)}
.r-opp-n{color:#818cf8;font-weight:700;font-size:11px;flex-shrink:0;margin-top:1px}
.r-opp-txt{font-size:11.5px;color:#cbd5e1;line-height:1.45}

/* Memory rows */
.r-mem{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.04)}
.r-mem-ic{font-size:18px}
.r-mem-body{flex:1;min-width:0}
.r-mem-l{font-size:12px;font-weight:600;color:#fff}
.r-mem-s{font-size:10px;color:#64748b;margin-top:1px}
.r-mem-btn{
  font-size:10px;color:#a5b4fc;border:1px solid rgba(99,102,241,.3);
  padding:4px 10px;border-radius:7px;cursor:default;
}

@media (max-width:1100px){
  .r-kpi-row{grid-template-columns:repeat(3,1fr)}
  .r-grid-3{grid-template-columns:1fr}
  .r-grid-2{grid-template-columns:1fr}
}

/* =========================================================
   SCENE 8 — Digital Twin viewer
========================================================= */
.real-app-twin .r-main{padding:0;background:#06070b;overflow:hidden}
.r-twin{display:flex;height:100%;min-height:0}

/* Side panels */
.r-twin-side{
  width:248px;flex-shrink:0;background:#0a0b10;
  border-right:1px solid rgba(255,255,255,.06);
  display:flex;flex-direction:column;overflow:auto;
}
.r-twin-right{border-right:0;border-left:1px solid rgba(255,255,255,.06)}
.r-twin-side::-webkit-scrollbar{width:5px}
.r-twin-side::-webkit-scrollbar-thumb{background:rgba(255,255,255,.06);border-radius:3px}
.r-twin-block{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.05)}
.r-twin-block:last-child{border-bottom:0}
.r-twin-label{
  font-size:10px;font-weight:600;color:#94a3b8;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:9px;
  display:flex;align-items:center;gap:6px;
}
.r-twin-i{font-size:11px}
.r-twin-stack{display:flex;flex-direction:column;gap:7px}
.r-twin-stack-tight{display:flex;flex-direction:column;gap:2px}

/* BIM models list */
.r-twin-bim{display:flex;align-items:center;gap:8px;padding:2px 0;font-size:11px;color:#cbd5e1}
.r-twin-bim-sw{width:9px;height:9px;border-radius:2px;flex-shrink:0}
.r-twin-meta{font-size:9.5px;color:#475569;margin-top:10px;line-height:1.5}

/* Analytics layer toggle */
.r-twin-layer{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:5px 6px;border-radius:6px;cursor:default;
  color:#475569;font-size:11px;text-align:left;
  transition:background .2s var(--ease);
}
.r-twin-layer:hover{background:rgba(255,255,255,.03)}
.r-twin-layer.on .r-twin-layer-lbl{color:#cbd5e1}
.r-twin-eye{width:14px;text-align:center;font-size:11px;color:#475569}
.r-twin-layer-lbl{flex:1}
.r-twin-layer-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;opacity:.25}
.r-twin-layer.on .r-twin-layer-dot{opacity:1;box-shadow:0 0 6px currentColor}

/* Agent tabs */
.r-twin-tabs{display:flex;flex-wrap:wrap;gap:5px}
.r-twin-tab{
  font-size:10.5px;font-weight:600;padding:4px 9px;border-radius:6px;
  background:rgba(255,255,255,.04);color:#94a3b8;
  border:1px solid rgba(255,255,255,.06);cursor:default;
  transition:all .2s var(--ease);
}

/* AI Issue Detection */
.r-twin-anom{border-radius:7px;overflow:hidden;border:1px solid rgba(255,255,255,.04)}
.r-twin-anom-h{padding:6px 9px;font-size:10.5px;font-weight:600}
.r-twin-anom-d{padding:6px 9px;font-size:10px;color:#64748b;background:rgba(255,255,255,.02)}

/* Viewer (center) */
.r-twin-viewer{
  flex:1;display:flex;flex-direction:column;min-width:0;position:relative;
  background:
    radial-gradient(60% 50% at 50% 40%,rgba(99,102,241,.06),transparent 70%),
    linear-gradient(180deg,#06070b,#03040a);
}
.r-twin-viewer-hdr{
  display:flex;align-items:center;gap:14px;padding:10px 16px;
  border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0;
  background:rgba(0,0,0,.25);
}
.r-twin-vh-left{flex:1;min-width:0}
.r-twin-vh-title{font-size:12.5px;font-weight:600;color:#fff}
.r-twin-vh-sub{font-size:10px;color:#64748b;margin-top:2px}
.r-twin-live{color:#22c55e;margin-left:6px}
.r-twin-vh-mid{display:flex;gap:6px}
.r-twin-vh-tab{
  font-size:10.5px;color:#64748b;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);padding:4px 9px;border-radius:7px;
}
.r-twin-vh-tab.on{color:#a5b4fc;background:rgba(99,102,241,.12);border-color:rgba(99,102,241,.35)}
.r-twin-vh-connected{
  font-size:10.5px;color:#22c55e;background:rgba(34,197,94,.08);
  border:1px solid rgba(34,197,94,.25);padding:4px 10px;border-radius:7px;
  flex-shrink:0;
}

.r-twin-stage{
  flex:1;position:relative;min-height:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(60% 50% at 50% 45%,rgba(99,102,241,.08),transparent 70%),
    linear-gradient(180deg,#04050a,#02030a);
}
/* Wrapper has the image's intrinsic aspect ratio so sensor pulses can be
   positioned at % of the image, not the (wider) stage. */
.r-twin-bim-wrap{
  position:relative;
  aspect-ratio: 2304 / 1856;
  max-width:96%;
  max-height:96%;
  /* Without an explicit basis dimension some browsers won't size from aspect-ratio
     alone, so seed height; max-height will clamp it back when too tall. */
  height:96%;
  width:auto;
}
.r-twin-bim-img{
  width:100%;height:100%;object-fit:contain;display:block;
  filter:drop-shadow(0 24px 60px rgba(0,0,0,.55)) drop-shadow(0 0 32px rgba(99,102,241,.12));
}

.r-twin-sensors{position:absolute;inset:0;pointer-events:none}
.r-twin-pulse{
  position:absolute;width:10px;height:10px;border-radius:50%;
  background:rgba(34,211,238,.85);box-shadow:0 0 12px rgba(34,211,238,.9);
  transform:translate(-50%,-50%);
}
.r-twin-pulse::after{
  content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1.5px solid #22d3ee;opacity:.7;
  animation:twinPing 2s var(--ease) infinite;
}
.r-twin-pulse.alert{background:rgba(239,68,68,.9);box-shadow:0 0 14px rgba(239,68,68,.95)}
.r-twin-pulse.alert::after{border-color:#ef4444}
@keyframes twinPing{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.8);opacity:0}}

.r-twin-toolbar{
  display:flex;align-items:center;gap:4px;padding:8px 14px;
  border-top:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.3);
  flex-shrink:0;justify-content:center;
}
.r-twin-tool{
  width:30px;height:28px;border-radius:7px;color:#94a3b8;font-size:13px;
  display:inline-flex;align-items:center;justify-content:center;cursor:default;
  background:transparent;transition:all .2s var(--ease);
}
.r-twin-tool:hover{background:rgba(255,255,255,.06);color:#fff}
.r-twin-tool.active{background:rgba(99,102,241,.18);color:#a5b4fc;border:1px solid rgba(99,102,241,.4)}
.r-twin-tool-sep{width:1px;height:18px;background:rgba(255,255,255,.08);margin:0 4px}

/* Right panel: asset health bars */
.r-twin-bars{display:flex;flex-direction:column;gap:10px}
.r-twin-bar-row{display:flex;flex-direction:column;gap:5px}
.r-twin-bar-head{display:flex;justify-content:space-between;font-size:10.5px;color:#94a3b8}
.r-twin-bar-val{color:#fff;font-weight:700}
.r-twin-bar-track{height:5px;background:rgba(255,255,255,.05);border-radius:3px;overflow:hidden}
.r-twin-bar-fill{height:100%;border-radius:3px;transition:width .8s var(--ease)}

/* Live sensors */
.r-twin-sens-row{display:flex;justify-content:space-between;align-items:center;padding:3px 0}
.r-twin-sens-lbl{font-size:11px;color:#94a3b8}
.r-twin-sens-val{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700}

/* Recommendations */
.r-twin-rec{
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);
  border-radius:9px;padding:9px 11px;
}
.r-twin-rec-h{display:flex;align-items:center;gap:7px;margin-bottom:5px}
.r-twin-rec-tag{
  font-size:9.5px;font-weight:600;letter-spacing:.04em;
  border:1px solid;border-radius:999px;padding:1px 7px;
}
.r-twin-rec-meta{font-size:9.5px;color:#64748b}
.r-twin-rec-txt{font-size:10.5px;color:#cbd5e1;line-height:1.5}
.r-twin-rec-more{
  margin-top:6px;font-size:10px;color:#a5b4fc;cursor:default;
}
.r-twin-rec-more:hover{color:#fff}

/* Construction timeline slider */
.r-twin-timeline{display:flex;align-items:center;gap:8px}
.r-twin-tl-lbl{font-size:9px;color:#475569}
.r-twin-tl-track{
  flex:1;height:3px;background:rgba(255,255,255,.08);border-radius:2px;
  position:relative;
}
.r-twin-tl-fill{
  position:absolute;left:0;top:0;bottom:0;background:#6366f1;border-radius:2px;
}
.r-twin-tl-thumb{
  position:absolute;top:50%;width:12px;height:12px;border-radius:50%;
  background:#fff;transform:translate(-50%,-50%);
  box-shadow:0 0 0 3px rgba(99,102,241,.4);cursor:default;
}
.r-twin-tl-pct{font-size:10.5px;color:#a5b4fc;font-weight:700;margin-top:6px}

/* ============================================================
   PRICING SCENE — 3 plans, monthly/annual, graphic dark
============================================================ */
.pricing-scene{
  background:
    radial-gradient(50% 40% at 100% 0%, rgba(99,102,241,.10), transparent 70%),
    radial-gradient(45% 40% at 0% 100%, rgba(6,182,212,.08), transparent 70%),
    linear-gradient(180deg,#05060f 0%,#070818 100%);
  display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
  overflow-y:auto;overflow-x:hidden;
}
.pr-wrap{
  position:relative;z-index:1;
  max-width:1180px;margin:0 auto;width:100%;
  padding:54px 5vw 70px;display:flex;flex-direction:column;gap:0;
}

/* Decorative bg */
.pr-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.pr-bg-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(99,102,241,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(99,102,241,.07) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 80%);
}
.pr-blob{
  position:absolute;border-radius:50%;filter:blur(90px);opacity:.28;
  will-change:transform;
}
.pr-blob--a{
  width:520px;height:520px;left:-14%;top:4%;
  background:radial-gradient(circle,#6366f1 0%,transparent 70%);
  animation:pr-blob-a 22s ease-in-out infinite alternate;
}
.pr-blob--b{
  width:460px;height:460px;right:-12%;top:32%;
  background:radial-gradient(circle,#06b6d4 0%,transparent 70%);
  opacity:.22;
  animation:pr-blob-b 26s ease-in-out infinite alternate;
}
.pr-blob--c{
  width:420px;height:420px;left:42%;bottom:-12%;opacity:.18;
  background:radial-gradient(circle,#a78bfa 0%,transparent 70%);
  animation:pr-blob-c 24s ease-in-out infinite alternate;
}
.pr-blob--d{display:none}
@keyframes pr-blob-a{0%{transform:translate(0,0) scale(1)}100%{transform:translate(40px,60px) scale(1.1)}}
@keyframes pr-blob-b{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-50px,40px) scale(1.05)}}
@keyframes pr-blob-c{0%{transform:translate(0,0) scale(1)}100%{transform:translate(60px,-30px) scale(1.08)}}
@keyframes pr-blob-d{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-30px,-40px) scale(1.06)}}

/* Header */
.pr-hdr{text-align:center;margin-bottom:30px}
.pr-eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.32em;
  text-transform:uppercase;color:#a5b4fc;font-weight:600;margin-bottom:18px;
  padding:7px 14px;border-radius:999px;
  background:rgba(99,102,241,.08);backdrop-filter:blur(10px);
  border:1px solid rgba(99,102,241,.25);
}
.pr-eyebrow-dot{
  width:7px;height:7px;border-radius:50%;
  background:#10b981;box-shadow:0 0 10px #10b981;
  animation:pr-pulse 1.8s ease-in-out infinite;
}
@keyframes pr-pulse{0%,100%{transform:scale(.6);opacity:.4}50%{transform:scale(1.2);opacity:1}}
.pr-title{
  font-size:clamp(32px,4.8vw,62px);font-weight:800;letter-spacing:-0.03em;line-height:1.02;
  color:#fff;margin-bottom:14px;
}
.pr-title-grad{
  background:linear-gradient(110deg,#a78bfa 0%,#6366f1 35%,#06b6d4 70%,#fb923c 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.pr-sub{
  font-size:clamp(13px,1.2vw,15px);color:#9ca3af;line-height:1.55;
  max-width:520px;margin:0 auto;
}

/* Billing toggle */
.pr-sw{
  display:flex;align-items:center;justify-content:center;gap:14px;
  margin-bottom:36px;
}
.pr-sw-lbl{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14px;color:#71717a;font-weight:600;cursor:pointer;transition:color .2s;
}
.pr-sw-lbl.active{color:#fff}
.pr-switch{
  width:48px;height:26px;background:rgba(255,255,255,.1);border-radius:13px;
  position:relative;cursor:pointer;border:1px solid rgba(255,255,255,.12);
  transition:background .25s,border-color .25s;
}
.pr-switch.annual{
  background:linear-gradient(90deg,#6366f1,#a78bfa);border-color:transparent;
  box-shadow:0 4px 18px rgba(99,102,241,.4);
}
.pr-knob{
  width:20px;height:20px;background:#fff;border-radius:50%;
  position:absolute;top:2px;left:3px;
  transition:transform .25s var(--ease);box-shadow:0 2px 6px rgba(0,0,0,.45);
}
.pr-switch.annual .pr-knob{transform:translateX(22px)}
.pr-badge{
  display:inline-block;padding:3px 9px;border-radius:999px;
  background:linear-gradient(90deg,#10b981,#06b6d4);
  color:#fff;font-size:10px;font-family:'JetBrains Mono',monospace;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  box-shadow:0 4px 12px rgba(16,185,129,.32);
}

/* ---- Cards ---- */
.pr-cards{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
  max-width:1100px;margin:0 auto;align-items:stretch;
}
.pr-card{
  position:relative;display:flex;flex-direction:column;gap:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;padding:26px 22px 22px;
  box-shadow:
    0 24px 50px -28px rgba(0,0,0,.6),
    0 1px 0 rgba(255,255,255,.04) inset;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s;
  overflow:hidden;
}
.pr-card:hover{
  transform:translateY(-5px);
  border-color:rgba(99,102,241,.45);
  box-shadow:
    0 32px 60px -24px rgba(99,102,241,.32),
    0 1px 0 rgba(255,255,255,.06) inset;
}
.pr-card-shine{
  position:absolute;top:0;left:-100%;width:50%;height:100%;
  background:linear-gradient(110deg,transparent,rgba(255,255,255,.08),transparent);
  transform:skewX(-18deg);pointer-events:none;transition:left .9s var(--ease);
}
.pr-card:hover .pr-card-shine{left:140%}

.pr-card--featured{
  background:
    linear-gradient(180deg,rgba(16,18,40,.92) 0%,rgba(12,18,32,.94) 100%);
  border:1.5px solid transparent;background-clip:padding-box;
  transform:translateY(-6px);
  box-shadow:
    0 32px 70px -22px rgba(99,102,241,.45),
    0 8px 22px rgba(6,182,212,.14),
    0 1px 0 rgba(255,255,255,.07) inset;
  z-index:2;
}
.pr-card--featured::before{
  content:'';position:absolute;inset:-1.5px;border-radius:22px;z-index:-1;
  background:linear-gradient(135deg,rgba(99,102,241,.55) 0%,rgba(167,139,250,.4) 50%,rgba(99,102,241,.55) 100%);
  background-size:200% 200%;
  animation:pr-featured-border 12s ease-in-out infinite;
}
@keyframes pr-featured-border{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.pr-card--featured:hover{
  transform:translateY(-10px);
  box-shadow:
    0 44px 90px -22px rgba(99,102,241,.7),
    0 12px 28px rgba(6,182,212,.24),
    0 1px 0 rgba(255,255,255,.08) inset;
}
.pr-card-glow{
  position:absolute;width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle,rgba(99,102,241,.18),transparent 70%);
  top:-80px;right:-60px;filter:blur(24px);pointer-events:none;
}
.pr-card-ribbon{
  position:absolute;top:14px;right:-44px;transform:rotate(38deg);
  background:linear-gradient(90deg,#fb923c,#ec4899);
  color:#fff;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;
  padding:6px 56px;
  box-shadow:0 6px 18px rgba(236,72,153,.45);z-index:3;
}

/* Card head */
.pr-card-head{display:flex;flex-direction:column;gap:9px}
.pr-card-eyebrow{
  display:inline-flex;align-items:center;width:fit-content;
  padding:4px 10px;border-radius:999px;
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:700;
  background:rgba(99,102,241,.14);color:#a5b4fc;
  border:1px solid rgba(99,102,241,.3);
}
.pr-card-eyebrow--bright{
  background:linear-gradient(90deg,rgba(99,102,241,.25),rgba(6,182,212,.25));
  border-color:rgba(165,180,252,.45);color:#fff;
}
.pr-card-headline{
  font-size:20px;font-weight:800;letter-spacing:-0.02em;line-height:1.18;
  color:#fff;margin:0;
}
.pr-card-head-dim{color:#9ca3af;font-weight:600}
.pr-card--featured .pr-card-head-dim{
  background:linear-gradient(110deg,#a5b4fc 0%,#67e8f9 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-weight:800;
}

/* Price */
.pr-card-price{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;padding:4px 0 0}
.pr-card-currency{
  font-size:20px;font-weight:700;color:#71717a;align-self:flex-start;margin-top:7px;
}
.pr-card-amt{
  font-size:48px;font-weight:800;letter-spacing:-0.045em;color:#fff;line-height:1;
  font-variant-numeric:tabular-nums;
}
.pr-card--featured .pr-card-amt{
  color:#fff;
  text-shadow:0 2px 18px rgba(99,102,241,.35);
}
.pr-card-orig{
  font-size:16px;color:#52525b;text-decoration:line-through;
  font-weight:600;line-height:1;align-self:flex-end;margin-bottom:5px;
}
.pr-card-period{font-size:12px;color:#71717a;font-weight:500;margin-bottom:6px}
.pr-card-note{
  font-size:11.5px;color:#a5b4fc;
  font-family:'JetBrains Mono',monospace;letter-spacing:.02em;
}
.pr-card-save{
  display:inline-flex;align-items:center;width:fit-content;gap:6px;
  font-size:10.5px;font-weight:700;font-family:'JetBrains Mono',monospace;
  letter-spacing:.06em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;
  background:linear-gradient(90deg,#10b981,#06b6d4);color:#fff;
  box-shadow:0 4px 14px rgba(16,185,129,.32);
}

/* Features */
.pr-card-feats{
  list-style:none;padding:14px 0 4px;margin:0;
  display:flex;flex-direction:column;gap:8px;flex:1;
  border-top:1px dashed rgba(255,255,255,.08);
}
.pr-card-feats li{
  font-size:12.5px;color:#e2e8f0;line-height:1.45;
  display:flex;align-items:flex-start;gap:8px;
}
.pr-card-feats li::before{
  content:'';flex-shrink:0;width:16px;height:16px;border-radius:50%;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 6.5l2 2 4-5' stroke='white' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>"),
    linear-gradient(135deg,#6366f1,#a78bfa);
  background-size:62%,100%;background-position:center,center;background-repeat:no-repeat;
  margin-top:1px;box-shadow:0 2px 6px rgba(99,102,241,.35);
}
.pr-card-feats li strong{color:#fff;font-weight:700}
/* Keep the agent name list on a single row in the Single Agent card */
.pr-card--single .pr-card-feats li:nth-child(3){
  white-space:nowrap;
  letter-spacing:-0.01em;
  font-size:13.5px;
}
.pr-card-feats--bright li::before{
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 6.5l2 2 4-5' stroke='white' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>"),
    linear-gradient(135deg,#6366f1,#06b6d4);
  box-shadow:0 2px 8px rgba(6,182,212,.38);
}

/* CTA */
.pr-card-cta{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:13px 18px;border-radius:13px;
  font-size:13.5px;font-weight:700;letter-spacing:-0.005em;text-decoration:none;
  background:rgba(255,255,255,.06);color:#fff;
  border:1.5px solid rgba(255,255,255,.16);
  transition:transform .15s,background .2s,border-color .2s,box-shadow .2s,color .2s;
  margin-top:4px;
}
.pr-card-cta:hover{
  border-color:#818cf8;background:rgba(99,102,241,.18);
  box-shadow:0 8px 22px rgba(99,102,241,.32);transform:translateY(-1px);
}
.pr-card-cta-arrow{transition:transform .2s}
.pr-card-cta:hover .pr-card-cta-arrow{transform:translateX(3px)}
.pr-card-cta--primary{
  background:linear-gradient(110deg,#6366f1 0%,#7c3aed 50%,#06b6d4 100%);
  background-size:200% 100%;background-position:0% 50%;
  color:#fff;border-color:transparent;
  box-shadow:0 10px 28px rgba(99,102,241,.5),0 4px 12px rgba(6,182,212,.28);
}
.pr-card-cta--primary:hover{
  background-position:100% 50%;color:#fff;
  box-shadow:0 14px 36px rgba(99,102,241,.62),0 6px 16px rgba(6,182,212,.34);
}

.pr-card-foot{font-size:11px;color:#71717a;text-align:center;line-height:1.45;margin-top:1px}
.pr-card-foot--bright{color:#cbd5e1}
.pr-card--featured .pr-card-orig{color:#71717a}
.pr-card--featured .pr-card-period{color:#9ca3af}

/* Single Agent — video peek on hover */
.pr-agent-stage{
  position:absolute;inset:0;border-radius:inherit;overflow:hidden;
  pointer-events:none;z-index:0;
  opacity:0;transition:opacity .45s var(--ease);
}
.pr-card--single:hover .pr-agent-stage{opacity:1}
.pr-agent-vid{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  opacity:.42;
  mix-blend-mode:screen;
  filter:saturate(1.1) contrast(1.05);
  transform:scale(1.04);
  transition:transform .9s var(--ease);
}
.pr-card--single:hover .pr-agent-vid{transform:scale(1)}
.pr-agent-stage-glow{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(80% 50% at 50% 100%, rgba(99,102,241,.35), transparent 70%),
    linear-gradient(180deg, rgba(8,10,22,.5) 0%, transparent 30%, transparent 60%, rgba(8,10,22,.78) 100%);
}
/* keep card content above the video */
.pr-card--single > *:not(.pr-agent-stage):not(.pr-card-shine){position:relative;z-index:2}

/* Full Suite — 5 agent video bubbles emerge from behind the card in a fan on hover */
.pr-cards{position:relative}
.pr-card{position:relative;z-index:2} /* cards above the peek-stack */
.pr-peek-stack{
  position:absolute;top:0;bottom:0;right:0;width:160px;
  pointer-events:none;z-index:1;
}
.pr-peek{
  position:absolute;width:80px;height:80px;
  border-radius:50%;overflow:hidden;
  background:linear-gradient(135deg,#1a1d36,#0b0d1c);
  border:2px solid rgba(255,255,255,.18);
  box-shadow:
    0 10px 26px rgba(0,0,0,.6),
    0 0 0 1px rgba(99,102,241,.28);
  /* default: all hidden behind the card right edge, collapsed at center */
  top:50%;margin-top:-40px;
  right:24px;
  opacity:0;
  transform:scale(.5) rotate(0deg);
  transform-origin:center center;
  transition:
    transform .55s cubic-bezier(.45,.05,.2,1.25),
    right .55s var(--ease),
    top .55s var(--ease),
    margin-top .55s var(--ease),
    opacity .35s var(--ease),
    box-shadow .3s;
}
.pr-peek-vid{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 45%;
  transform:scale(2.4) translateY(14%);
  transform-origin:center 35%;
  filter:saturate(1.1) contrast(1.06);
  pointer-events:none;display:block;
}

/* vertical column emerging out to the right on suite hover */
.pr-peek-stack.is-on .pr-peek{
  opacity:1;
  margin-top:0;
  right:-110px;          /* slide well outside the card */
  transform:scale(1) rotate(0deg);
  box-shadow:
    0 14px 34px rgba(0,0,0,.7),
    0 0 0 1px rgba(165,180,252,.65),
    0 0 26px rgba(99,102,241,.55);
  transition-delay:var(--peek-delay, 0s); /* JS-randomized */
}
.pr-peek-stack.is-on .pr-peek--arco{top:4%}
.pr-peek-stack.is-on .pr-peek--vera{top:24%}
.pr-peek-stack.is-on .pr-peek--aira{top:44%}
.pr-peek-stack.is-on .pr-peek--sal{ top:64%}
.pr-peek-stack.is-on .pr-peek--reno{top:84%}

@media (max-width:1100px){
  .pr-peek-stack{width:130px}
  .pr-peek{width:66px;height:66px;margin-top:-33px}
  .pr-peek-stack.is-on .pr-peek{right:-86px}
}
@media (max-width:780px){
  .pr-peek-stack{display:none}
}

/* Trust row */
.pr-trust{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:12px 28px;margin:36px auto 0;
  padding:16px 22px;border-radius:16px;
  background:rgba(255,255,255,.03);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.07);
  max-width:940px;
}
.pr-trust-item{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;color:#cbd5e1;font-weight:600;
}
.pr-trust-ck{
  display:inline-flex;align-items:center;justify-content:center;
  width:17px;height:17px;border-radius:50%;
  background:linear-gradient(135deg,#10b981,#06b6d4);
  color:#fff;font-size:10px;font-weight:800;
  box-shadow:0 2px 6px rgba(16,185,129,.35);
}

@media (max-width:1000px){
  .pr-cards{grid-template-columns:repeat(3,1fr);gap:16px}
  .pr-card{padding:22px 18px 18px}
  .pr-card-amt{font-size:40px}
  .pr-card-headline{font-size:18px}
}
@media (max-width:780px){
  .pr-cards{grid-template-columns:1fr;max-width:420px;gap:18px}
  .pr-card--featured{transform:none}
  .pr-card--featured:hover{transform:translateY(-6px)}
}