/* ============================================================
   THENOS AI — voice-first visual agent · liquid glass design system
   Three skins: Aurora (default) / Cyan / Iridescent
   ============================================================ */

:root{
  /* ---- AURORA skin (default): deep violet + electric blue ---- */
  --bg:#07060F;
  --bg-2:#0B0A1A;
  --bg-3:#100E22;
  --ink:#EDEBFF;
  --muted:#9D9ABF;
  --muted-2:#615E84;
  --line:rgba(180,176,255,0.12);
  --line-2:rgba(180,176,255,0.07);

  --accent:#6E8BFF;        /* electric blue */
  --accent-2:#A472FF;      /* violet */
  --accent-3:#3CE0FF;      /* cyan kick */
  --accent-ink:#070416;    /* text on accent */
  --glow:rgba(110,139,255,0.55);
  --glow-2:rgba(164,114,255,0.50);

  /* holographic conic used for borders / shimmer */
  --holo:conic-gradient(from 210deg,#3CE0FF,#6E8BFF,#A472FF,#FF7AD9,#6E8BFF,#3CE0FF);

  /* glass */
  --glass:rgba(255,255,255,0.045);
  --glass-2:rgba(255,255,255,0.07);
  --glass-brd:rgba(255,255,255,0.14);
  --glass-hi:rgba(255,255,255,0.55);

  --r:18px;
  --r-lg:26px;
  --font:'Bricolage Grotesque',sans-serif;
  --mono:'JetBrains Mono',monospace;
  --serif:'Instrument Serif',serif;
  --ease:cubic-bezier(0.16,1,0.3,1);
  --ease-2:cubic-bezier(0.65,0.02,0.12,1);
  --maxw:1240px;
}

/* ---- CYAN skin: keep the teal/cyan, Cursor-like ---- */
[data-skin="cyan"]{
  --bg:#060D10;
  --bg-2:#0A171B;
  --bg-3:#0E2027;
  --ink:#EAF7F6;
  --muted:#8AA6A6;
  --muted-2:#506564;
  --line:rgba(150,230,225,0.12);
  --line-2:rgba(150,230,225,0.07);
  --accent:#2FD3C8;
  --accent-2:#19A7A0;
  --accent-3:#7CF3E9;
  --accent-ink:#022220;
  --glow:rgba(47,211,200,0.5);
  --glow-2:rgba(25,167,160,0.42);
  --holo:conic-gradient(from 210deg,#7CF3E9,#2FD3C8,#19A7A0,#3CE0FF,#2FD3C8,#7CF3E9);
}

/* ---- IRIDESCENT skin: holographic magenta→cyan→violet ---- */
[data-skin="iris"]{
  --bg:#08060C;
  --bg-2:#0E0A16;
  --bg-3:#150F20;
  --ink:#FBEAFF;
  --muted:#B79ABF;
  --muted-2:#6E5878;
  --line:rgba(255,180,240,0.13);
  --line-2:rgba(255,180,240,0.07);
  --accent:#FF6BC4;
  --accent-2:#9D7BFF;
  --accent-3:#5CE1FF;
  --accent-ink:#1a0418;
  --glow:rgba(255,107,196,0.5);
  --glow-2:rgba(92,225,255,0.42);
  --holo:conic-gradient(from 200deg,#5CE1FF,#9D7BFF,#FF6BC4,#FFC36B,#5CE1FF);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  line-height:1.45;
  position:relative;
}
body.loading{overflow:hidden;height:100vh}
::selection{background:var(--accent);color:var(--accent-ink)}
a{color:inherit;text-decoration:none}
img,svg{display:block}
.mono{font-family:var(--mono)}
.ital{font-family:var(--serif);font-style:italic;font-weight:400}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px}
@media(max-width:640px){.wrap{padding:0 22px}}

.eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:0.28em;
  text-transform:uppercase;color:var(--accent-3);font-weight:500;
  display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:linear-gradient(90deg,var(--accent-3),transparent)}

/* ============================================================
   ATMOSPHERE — holographic mesh + grain behind everything
   ============================================================ */
#sky{position:fixed;inset:0;z-index:-2;background:var(--bg);overflow:hidden}
#sky canvas{position:absolute;inset:0;width:100%;height:100%}
.grain{
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0.5;
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNjAnIGhlaWdodD0nMTYwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44NScgbnVtT2N0YXZlcz0nMicgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNuKScgb3BhY2l0eT0nMC4zNScvPjwvc3ZnPg==");
  mix-blend-mode:overlay;
}

/* ============================================================
   GLASS PRIMITIVES
   ============================================================ */
.glass{
  position:relative;
  background:linear-gradient(160deg,var(--glass-2),var(--glass));
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  border:1px solid var(--glass-brd);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    inset 0 0 0 1px rgba(255,255,255,0.03),
    inset 0 -22px 40px -28px rgba(255,255,255,0.18),
    0 30px 80px -40px rgba(0,0,0,0.9);
  border-radius:var(--r);
}
.glass::after{ /* top sheen */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0.10),transparent 36%);
  opacity:0.7;
}

/* holographic hairline border (uses a masked conic ring) */
.holo-ring{position:relative}
.holo-ring::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--holo);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0.7;pointer-events:none;
  animation:holoSpin 9s linear infinite;
}
@keyframes holoSpin{to{filter:hue-rotate(360deg)}}

/* ============================================================
   BUTTONS — heavy frosted glass, refraction + highlight sweep
   ============================================================ */
.btn{
  position:relative;isolation:isolate;overflow:hidden;cursor:pointer;
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--font);font-size:15px;font-weight:600;letter-spacing:-0.01em;
  padding:15px 26px;border-radius:100px;border:1px solid transparent;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
  will-change:transform;
}
.btn .ico{width:16px;height:16px;flex:none}
/* refraction/specular sweep shared */
.btn::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(115deg,transparent 28%,rgba(255,255,255,0.55) 47%,rgba(255,255,255,0.0) 60%);
  transform:translateX(-130%) skewX(-12deg);
  transition:transform .8s var(--ease);
}
.btn:hover::after{transform:translateX(130%) skewX(-12deg)}
.btn:active{transform:scale(0.97)}

/* PRIMARY — accent glass with chromatic edge + glow */
.btn-primary{
  color:var(--accent-ink);
  background:
    linear-gradient(180deg,rgba(255,255,255,0.30),rgba(255,255,255,0) 42%),
    linear-gradient(180deg,var(--accent-3),var(--accent) 55%,var(--accent-2));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    inset 0 -10px 20px -10px rgba(0,0,0,0.35),
    0 10px 30px -8px var(--glow),
    0 2px 10px -2px var(--glow-2);
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 -10px 20px -10px rgba(0,0,0,0.35),
    0 18px 50px -10px var(--glow),
    0 6px 22px -4px var(--glow-2);
}

/* GHOST — clear frosted glass */
.btn-glass{
  color:var(--ink);
  background:linear-gradient(160deg,var(--glass-2),var(--glass));
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border-color:var(--glass-brd);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    inset 0 -16px 30px -22px rgba(255,255,255,0.2),
    0 16px 40px -22px rgba(0,0,0,0.8);
}
.btn-glass:hover{transform:translateY(-2px);border-color:rgba(255,255,255,0.28)}
.btn .dot{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor;animation:livePulse 1.6s infinite}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:.35}}

.btn-sm{padding:11px 18px;font-size:13.5px}
.btn-lg{padding:15px 24px;font-size:14.5px}

/* ============================================================
   CURSOR GLOW
   ============================================================ */
.cursor-glow{
  position:fixed;top:0;left:0;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,var(--glow) 0%,transparent 60%);
  opacity:0.18;transform:translate(-50%,-50%);pointer-events:none;z-index:0;
  mix-blend-mode:screen;will-change:transform;filter:blur(10px);
}
@media(hover:none){.cursor-glow{display:none}}

/* ============================================================
   PRELOADER
   ============================================================ */
#loader{
  position:fixed;inset:0;z-index:1000;background:var(--bg);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:26px;
}
#loader .ring{width:74px;height:74px;border-radius:50%;position:relative}
#loader .ring::before{content:"";position:absolute;inset:0;border-radius:50%;padding:2px;background:var(--holo);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 1.1s linear infinite}
#loader .ring .pupil{position:absolute;inset:26px;border-radius:50%;background:radial-gradient(circle at 38% 35%,var(--accent-3),var(--accent-2));box-shadow:0 0 24px var(--glow)}
@keyframes spin{to{transform:rotate(360deg)}}
#loader .l-row{display:flex;align-items:baseline;gap:14px;font-family:var(--mono)}
#loader .l-count{font-size:clamp(40px,9vw,76px);font-weight:500;letter-spacing:-0.04em;line-height:.8}
#loader .l-count .pct{color:var(--accent-3);font-size:0.34em;vertical-align:super}
#loader .l-word{font-size:11px;letter-spacing:0.34em;text-transform:uppercase;color:var(--muted-2)}
.wipe{position:fixed;inset:0;z-index:999;background:var(--accent);transform:translateY(101%)}

/* ============================================================
   NAV
   ============================================================ */
header{
  position:fixed;top:0;left:0;right:0;z-index:80;
  transition:transform .6s var(--ease),padding .4s var(--ease);
  padding:16px 0;
}
header.hidden{transform:translateY(-130%)}
.nav{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:10px 12px 10px 22px;border-radius:100px;
  background:linear-gradient(160deg,var(--glass-2),transparent);
  backdrop-filter:blur(2px);border:1px solid transparent;
  transition:background .4s,border-color .4s,backdrop-filter .4s;
}
header.scrolled .nav{
  background:linear-gradient(160deg,var(--glass-2),var(--glass));
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  border-color:var(--glass-brd);
  box-shadow:inset 0 1px 0 var(--glass-hi),0 18px 50px -30px rgba(0,0,0,0.9);
}
.brand{display:flex;align-items:center;gap:12px}
.brand .mark{width:30px;height:30px}
.brand .word{font-size:19px;font-weight:600;letter-spacing:0.02em;white-space:nowrap}
.brand .word b{font-weight:600}
.brand .tag{font-family:var(--mono);font-size:9.5px;color:var(--accent-3);border:1px solid var(--line);padding:3px 7px;border-radius:6px;letter-spacing:0.14em;text-transform:uppercase}
.nav-links{display:flex;gap:30px;align-items:center}
.nav-links a{font-size:14.5px;color:var(--muted);transition:color .3s;white-space:nowrap}
.nav-links a:hover{color:var(--ink)}
@media(max-width:1180px){.nav-links{gap:22px}}
.nav-burger{display:none;flex:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--glass-brd);background:var(--glass-2);align-items:center;justify-content:center;gap:5px;flex-direction:column;cursor:pointer;padding:0;transition:border-color .3s,background .3s}
.nav-burger span{display:block;width:15px;height:1.5px;background:var(--ink);border-radius:1px;transition:transform .3s var(--ease-2),opacity .3s var(--ease-2)}
.nav-burger:hover{border-color:color-mix(in oklab,var(--accent-3) 40%,transparent)}
.nav-burger.open span:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-4.5px) rotate(-45deg)}
@media(max-width:1100px){
  .nav{position:relative}
  .nav-burger{display:flex;margin-left:auto}
  .nav-links{display:none}
  .nav.menu-open .nav-links{display:flex;position:absolute;top:calc(100% + 12px);left:0;right:0;flex-direction:column;gap:2px;background:linear-gradient(160deg,var(--glass-2),var(--glass));backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);border:1px solid var(--glass-brd);border-radius:var(--r);padding:10px;box-shadow:0 30px 70px -24px rgba(0,0,0,.7);z-index:50}
  .nav.menu-open .nav-links a{padding:12px 14px;border-radius:12px;transition:background .25s,color .25s}
  .nav.menu-open .nav-links a:hover{background:var(--glass-2);color:var(--ink)}
}
.voice-toggle{margin-left:auto;flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--glass-brd);background:var(--glass-2);display:flex;align-items:center;justify-content:center;color:var(--muted);cursor:pointer;padding:0;transition:color .3s,border-color .3s}
.voice-toggle:hover{color:var(--ink);border-color:color-mix(in oklab,var(--accent-3) 40%,transparent)}
.voice-toggle svg{width:15px;height:15px}
.voice-toggle .off-ico{display:none}
.voice-toggle.muted .on-ico{display:none}
.voice-toggle.muted .off-ico{display:block}
.voice-toggle.muted{color:var(--muted-2)}
.nav-cta{white-space:nowrap;flex-shrink:0}
.nav-cta .lbl-short{display:none}
@media(max-width:560px){.brand .tag{display:none}}
@media(max-width:480px){.nav-cta .lbl-full{display:none}.nav-cta .lbl-short{display:inline}}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;padding:150px 0 90px;overflow:hidden}
.hero-inner{position:relative;z-index:3;display:grid;grid-template-columns:1.02fr 1.18fr;gap:54px;align-items:center}
@media(max-width:1040px){.hero-inner{grid-template-columns:1fr;gap:44px}}
.hero-copy{max-width:560px;min-width:0}
.hero h1{
  font-size:clamp(42px,5.6vw,78px);line-height:0.98;font-weight:600;
  letter-spacing:-0.04em;margin:22px 0 0;text-wrap:balance;
}
.hero h1 .ital{color:var(--accent-3);font-size:1.04em;line-height:0.9}
.hero .sub{font-size:clamp(16px,1.5vw,19px);color:var(--muted);max-width:480px;margin:22px 0 0;line-height:1.55;text-wrap:pretty}
.hero-cta{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.hero-cta .btn{gap:9px;white-space:nowrap;flex-shrink:0}
@media(max-width:560px){.hero-cta{flex-direction:column;align-items:stretch}.hero-cta .btn{justify-content:center}}
.hero-meta{display:flex;gap:26px;margin-top:34px;flex-wrap:wrap}
.hero-meta .hm{display:flex;flex-direction:column;gap:3px}
.hero-meta .hm .n{font-family:var(--mono);font-size:22px;font-weight:500;letter-spacing:-0.02em}
.hero-meta .hm .n .u{color:var(--accent-3);font-size:0.7em}
.hero-meta .hm .k{font-size:12px;color:var(--muted-2);letter-spacing:0.02em}

/* ---- The "agent watching the screen" stage ---- */
.stage-wrap{position:relative;perspective:1600px;z-index:3;min-width:0}
.stage-glow{position:absolute;inset:-12% -6%;background:radial-gradient(60% 55% at 60% 40%,var(--glow) 0%,transparent 70%);filter:blur(30px);opacity:0.5;z-index:-1}
.device{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  transform:rotateX(8deg) rotateY(-11deg) rotateZ(0.5deg);
  transform-style:preserve-3d;
  transition:transform .4s var(--ease);
  box-shadow:0 60px 130px -50px rgba(0,0,0,0.95),0 0 0 1px var(--glass-brd);
}
.device .chrome{
  display:flex;align-items:center;gap:12px;padding:13px 16px;
  background:linear-gradient(180deg,rgba(255,255,255,0.08),var(--glass));
  backdrop-filter:blur(20px);border-bottom:1px solid var(--line);
}
.chrome .dots{display:flex;gap:7px}
.chrome .dots i{width:11px;height:11px;border-radius:50%;background:var(--muted-2);opacity:.6}
.chrome .url{flex:1;font-family:var(--mono);font-size:12px;color:var(--muted);background:rgba(0,0,0,0.25);border:1px solid var(--line);border-radius:8px;padding:7px 13px;display:flex;align-items:center;gap:9px}
.chrome .url .lk{color:var(--accent-3)}
.chrome .badge{font-family:var(--mono);font-size:10.5px;color:var(--accent-3);display:flex;align-items:center;gap:7px;white-space:nowrap}
.chrome .badge .rec{width:7px;height:7px;border-radius:50%;background:var(--accent-3);box-shadow:0 0 10px var(--accent-3);animation:livePulse 1.3s infinite}

.screen{position:relative;height:430px;background:linear-gradient(180deg,var(--bg-3),var(--bg-2));overflow:hidden}
@media(max-width:520px){.screen{height:390px}}
.scene-stage{position:absolute;inset:0}
.scene{position:absolute;inset:0;padding:26px 28px;opacity:0;transform:translateY(14px) scale(.99);pointer-events:none;transition:opacity .55s var(--ease),transform .55s var(--ease)}
.scene.live{opacity:1;transform:none}
.s-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.s-head .se{font-family:var(--mono);font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--accent-3)}
.s-head h5{font-size:18px;font-weight:600;letter-spacing:-0.015em;margin-top:5px}
.s-head .meta{font-family:var(--mono);font-size:11.5px;color:var(--muted)}

/* vision overlay: scan, reticle, boxes, cursor */
.vision{position:absolute;inset:0;z-index:6;pointer-events:none}
.scanline{position:absolute;left:0;right:0;height:120px;top:-120px;
  background:linear-gradient(180deg,transparent,rgba(60,224,255,0.10) 60%,rgba(60,224,255,0.28));
  border-bottom:1px solid var(--accent-3);opacity:0;mix-blend-mode:screen}
.scanline.run{animation:scanSweep 1.5s var(--ease-2) forwards}
@keyframes scanSweep{0%{opacity:0;top:-120px}10%{opacity:1}90%{opacity:1}100%{opacity:0;top:100%}}
.bbox{position:absolute;border:1.5px solid var(--accent-3);border-radius:7px;box-shadow:0 0 0 1px rgba(0,0,0,0.25),0 0 18px -2px var(--glow);opacity:0;transform:scale(.96);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.bbox.show{opacity:1;transform:none}
.bbox .lbl{position:absolute;top:-9px;left:8px;transform:translateY(-100%);font-family:var(--mono);font-size:10px;letter-spacing:0.04em;color:var(--accent-ink);background:var(--accent-3);padding:2px 7px;border-radius:5px;white-space:nowrap;box-shadow:0 4px 12px -4px var(--glow)}
.bbox .conf{position:absolute;bottom:-8px;right:6px;transform:translateY(100%);font-family:var(--mono);font-size:9px;color:var(--accent-3)}
.agent-cursor{position:absolute;top:0;left:0;width:26px;height:26px;z-index:9;transform:translate(-50%,-50%);transition:transform .1s linear;filter:drop-shadow(0 4px 10px rgba(0,0,0,0.6))}
.agent-cursor svg{width:100%;height:100%}
.agent-cursor .ping{position:absolute;inset:-6px;border-radius:50%;border:1.5px solid var(--accent-3);opacity:0;}
.agent-cursor.click .ping{animation:ping .55s var(--ease) forwards}
@keyframes ping{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(2.4)}}

/* HUD status chip */
.hud{position:absolute;left:18px;bottom:16px;right:18px;z-index:8;display:flex;align-items:center;gap:13px;
  background:linear-gradient(160deg,rgba(255,255,255,0.10),var(--glass));
  backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid var(--glass-brd);border-radius:14px;padding:11px 15px;
  box-shadow:inset 0 1px 0 var(--glass-hi),0 20px 50px -24px rgba(0,0,0,0.9)}
.hud .eye{width:26px;height:26px;flex:none;border-radius:50%;background:radial-gradient(circle at 38% 34%,var(--accent-3),var(--accent-2));box-shadow:0 0 16px var(--glow);position:relative}
.hud .eye::after{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 4px rgba(0,0,0,0.6)}
.hud .htxt{flex:1;font-family:var(--mono);font-size:12.5px;color:var(--ink);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud .htxt .dim{color:var(--muted)}
.hud .htxt .cur{display:inline-block;width:7px;height:14px;background:var(--accent-3);vertical-align:-2px;margin-left:1px;animation:livePulse .85s steps(1) infinite}
.hud .step-dots{display:flex;gap:5px;flex:none}
.hud .step-dots i{width:6px;height:6px;border-radius:50%;background:var(--muted-2);transition:background .3s,box-shadow .3s}
.hud .step-dots i.on{background:var(--accent-3);box-shadow:0 0 8px var(--accent-3)}

/* mock UI atoms inside scenes */
.ui-row{display:flex;gap:12px}
.ui-card{flex:1;min-width:0;border:1px solid var(--line);border-radius:12px;background:linear-gradient(180deg,var(--glass-2),transparent);padding:14px;position:relative}
.ui-swatch{height:64px;border-radius:9px;background:linear-gradient(135deg,var(--bg-3),var(--bg-2));border:1px dashed var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:9px;color:var(--muted-2);letter-spacing:0.08em;margin-bottom:11px}
.ui-card .t{font-size:13.5px;font-weight:600}
.ui-card .p{font-family:var(--mono);font-size:13px;color:var(--accent-3);margin-top:6px}
.ui-field{border:1px solid var(--line);border-radius:10px;background:rgba(0,0,0,0.22);padding:12px 14px;font-family:var(--mono);font-size:13px;color:var(--muted);display:flex;align-items:center;gap:10px}
.ui-field .typed{color:var(--ink)}
.ui-btn{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--accent-ink);background:linear-gradient(180deg,var(--accent-3),var(--accent));border-radius:9px;padding:11px 16px;transition:transform .25s var(--ease),box-shadow .25s}
.ui-btn.hit{transform:scale(1.05);box-shadow:0 0 0 4px rgba(60,224,255,0.22)}
.ui-list{display:flex;flex-direction:column;gap:9px;margin-top:4px}
.ui-item{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:10px;background:linear-gradient(180deg,var(--glass-2),transparent);padding:12px 14px;opacity:0;transform:translateX(-12px);transition:all .4s var(--ease)}
.ui-item.show{opacity:1;transform:none}
.ui-item.pick{border-color:var(--accent-3);box-shadow:0 0 0 1px var(--accent-3),0 12px 30px -18px var(--glow)}
.ui-item .li-l{display:flex;align-items:center;gap:12px}
.ui-item .li-ic{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--bg-2),var(--accent-2));flex:none}
.ui-item .li-t{font-size:14px;font-weight:600}
.ui-item .li-s{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:2px}
.ui-item .li-r{font-family:var(--mono);font-size:14px;color:var(--accent-3)}
.bars{display:flex;align-items:flex-end;gap:14px;height:150px;margin-top:8px}
.bars .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:9px;height:100%;justify-content:flex-end}
.bars .bar{width:100%;max-width:46px;border-radius:7px 7px 0 0;background:linear-gradient(180deg,var(--accent-3),var(--accent-2));height:0;transition:height .9s var(--ease)}
.bars .col.hot .bar{background:linear-gradient(180deg,var(--accent-3),var(--accent))}
.bars .lab{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.toast{position:absolute;left:50%;top:18px;transform:translate(-50%,-14px);z-index:7;display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12.5px;color:var(--accent-ink);background:linear-gradient(180deg,var(--accent-3),var(--accent));border-radius:100px;padding:9px 16px;opacity:0;transition:all .45s var(--ease);box-shadow:0 14px 40px -16px var(--glow)}
.toast.show{opacity:1;transform:translate(-50%,0)}

.scroll-hint{display:flex;align-items:center;gap:12px;margin-top:40px;font-family:var(--mono);font-size:10.5px;letter-spacing:0.24em;text-transform:uppercase;color:var(--muted-2)}
.scroll-hint .bar{width:34px;height:1px;background:linear-gradient(90deg,var(--accent-3),transparent);position:relative;overflow:hidden}
.scroll-hint .bar::after{content:"";position:absolute;inset:0;width:12px;background:var(--accent-3);animation:slideX 2.2s var(--ease) infinite}
@keyframes slideX{0%{transform:translateX(-12px)}100%{transform:translateX(34px)}}

/* ============================================================
   MARQUEE
   ============================================================ */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:28px 0;overflow:hidden;position:relative;margin-top:20px}
.trust .label{text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:0.24em;text-transform:uppercase;color:var(--muted-2);margin-bottom:20px}
.marq-mask{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee{display:flex;gap:60px;width:max-content;animation:scrollX 34s linear infinite}
.marquee span{font-size:19px;font-weight:600;color:var(--muted);white-space:nowrap;letter-spacing:-0.01em;display:flex;align-items:center;gap:14px}
.marquee span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent-3);opacity:.5}
@keyframes scrollX{to{transform:translateX(-50%)}}

/* ============================================================
   SECTION FRAME + REVEALS
   ============================================================ */
section.block{padding:120px 0;position:relative}
.sec-head{max-width:720px}
.sec-head h2{font-size:clamp(32px,4.6vw,60px);font-weight:600;letter-spacing:-0.035em;line-height:1.0;margin:18px 0 0;text-wrap:balance}
.sec-head h2 .ital{color:var(--accent-3)}
.sec-head p{color:var(--muted);font-size:18px;margin-top:20px;max-width:560px;line-height:1.55;text-wrap:pretty}
.reveal{opacity:0;transform:translateY(36px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.07s}.d2{transition-delay:.14s}.d3{transition-delay:.21s}.d4{transition-delay:.28s}.d5{transition-delay:.35s}

/* ---- How it works: See / Understand / Act ---- */
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:60px}
@media(max-width:880px){.flow{grid-template-columns:1fr}}
.fcard{padding:30px;border-radius:var(--r);min-height:280px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.fcard .fc-top{display:flex;align-items:flex-start;justify-content:space-between}
.fcard .idx{font-family:var(--mono);font-size:12px;color:var(--accent-3);letter-spacing:0.1em}
.fcard .fc-ic{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,var(--glass-2),transparent);border:1px solid var(--line)}
.fcard .fc-ic svg{width:24px;height:24px;stroke:var(--accent-3)}
.fcard h3{font-size:25px;font-weight:600;letter-spacing:-0.02em;margin:18px 0 10px}
.fcard p{color:var(--muted);font-size:15px;line-height:1.55}
.fcard .fc-note{font-family:var(--mono);font-size:11.5px;color:var(--accent-3);margin-top:16px;display:flex;align-items:center;gap:8px}
.fcard .fc-note::before{content:"›"}

/* ---- Capability showcase (mini live actions) ---- */
.showcase{display:grid;grid-template-columns:1.1fr 0.9fr;gap:22px;margin-top:60px}
@media(max-width:980px){.showcase{grid-template-columns:1fr}}
.cap-main{border-radius:var(--r-lg);overflow:hidden}
.cap-side{display:flex;flex-direction:column;gap:22px}
.cap-side .ccard{padding:26px;border-radius:var(--r);flex:1;display:flex;flex-direction:column;justify-content:space-between}
.cap-side .ccard h4{font-size:20px;font-weight:600;letter-spacing:-0.015em}
.cap-side .ccard p{color:var(--muted);font-size:14.5px;margin-top:9px;line-height:1.5}
.cap-side .ccard .ctag{font-family:var(--mono);font-size:11px;color:var(--accent-3);letter-spacing:0.14em;text-transform:uppercase}

/* ---- Stats ---- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:60px;border-radius:var(--r);overflow:hidden}
.stat{padding:38px 28px;border-right:1px solid var(--line)}
.stat:last-child{border-right:none}
.stat .n{font-family:var(--mono);font-size:clamp(34px,4.4vw,52px);font-weight:500;letter-spacing:-0.03em}
.stat .n .u{color:var(--accent-3);font-size:0.55em}
.stat .k{color:var(--muted);font-size:14px;margin-top:10px}
@media(max-width:760px){.stats{grid-template-columns:1fr 1fr}.stat:nth-child(2){border-right:none}.stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--line)}}

/* ---- Use cases ---- */
.cases{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;margin-top:60px}
.case{border-radius:var(--r);padding:28px;min-height:236px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;cursor:pointer}
.case.big{grid-column:span 4}
.case.sm{grid-column:span 2}
@media(max-width:980px){.cases{grid-template-columns:1fr 1fr}.case.big,.case.sm{grid-column:span 1}}
@media(max-width:560px){.cases{grid-template-columns:1fr}.case.big,.case.sm{grid-column:span 1}}
.case .tag{font-family:var(--mono);font-size:11px;color:var(--accent-3);letter-spacing:0.16em;text-transform:uppercase}
.case h4{font-size:21px;font-weight:600;letter-spacing:-0.015em;margin-top:14px}
.case p{color:var(--muted);font-size:14.5px;line-height:1.5;margin-top:10px;max-width:420px}
.case .cmd{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin-top:18px;display:flex;align-items:center;gap:9px}
.case .cmd .cmd-bars{display:inline-flex;align-items:flex-end;gap:2px;height:13px}
.case .cmd .cmd-bars i{width:2px;height:3px;background:var(--accent-2);border-radius:1px}
.case.running .cmd .cmd-bars i{background:var(--accent-3)}
.case.running .cmd{color:var(--ink)}
.case .run-cta{position:absolute;top:24px;right:26px;font-family:var(--mono);font-size:11px;color:var(--accent-3);opacity:0;transform:translateY(-4px);transition:all .3s var(--ease)}
.case:hover .run-cta{opacity:1;transform:none}
.case.running .run-cta,.case.done .run-cta{opacity:0}
.case-res{max-height:0;opacity:0;overflow:hidden;font-family:var(--mono);font-size:12.5px;color:var(--accent-3);background:rgba(60,224,255,0.08);border:1px solid transparent;border-radius:10px;transition:all .5s var(--ease)}
.case.done .case-res{max-height:80px;opacity:1;margin-top:14px;padding:11px 13px;border-color:var(--line)}
.case-res .rt::before{content:"✓  ";color:var(--accent-3);font-weight:700}

/* ---- Platforms: floating glass panels ---- */
.platforms{margin-top:60px;position:relative;display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.pl{border-radius:var(--r);padding:24px;display:flex;flex-direction:column;justify-content:space-between;min-height:180px;will-change:transform}
.pl .pl-k{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted-2)}
.pl h4{font-size:19px;font-weight:600;letter-spacing:-0.015em;margin-top:8px}
.pl p{color:var(--muted);font-size:13.5px;line-height:1.5;margin-top:8px}
.pl.a{grid-column:span 5}.pl.b{grid-column:span 4}.pl.c{grid-column:span 3}
.pl.d{grid-column:span 4}.pl.e{grid-column:span 5}.pl.f{grid-column:span 3}
@media(max-width:880px){.pl.a,.pl.b,.pl.c,.pl.d,.pl.e,.pl.f{grid-column:span 6}}
@media(max-width:520px){.pl.a,.pl.b,.pl.c,.pl.d,.pl.e,.pl.f{grid-column:span 12}}
.pl .chip{align-self:flex-start;font-family:var(--mono);font-size:11px;color:var(--accent-3);border:1px solid var(--line);border-radius:8px;padding:5px 9px}

/* ============================================================
   CTA + FORM
   ============================================================ */
.cta{position:relative;text-align:center;padding:150px 0;overflow:hidden}
.cta-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:820px;height:820px;border-radius:50%;background:radial-gradient(circle,var(--glow) 0%,transparent 62%);opacity:0.35;z-index:0;pointer-events:none}
.cta .wrap{position:relative;z-index:2}
.cta h2{font-size:clamp(40px,7vw,98px);font-weight:600;letter-spacing:-0.045em;line-height:0.95;text-wrap:balance}
.cta h2 .ital{color:var(--accent-3);font-size:1.05em}
.cta p{color:var(--muted);font-size:18px;margin-top:22px}
.req-form{max-width:560px;margin:42px auto 0;text-align:left;padding:30px;border-radius:var(--r-lg);display:grid;grid-template-columns:1fr 1fr;gap:18px}
.req-form .field{display:flex;flex-direction:column;gap:8px}
.req-form .field.full{grid-column:span 2}
.req-form label{font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink)}
.req-form input{background:rgba(0,0,0,0.28);border:1px solid var(--line);border-radius:11px;padding:13px 14px;color:var(--ink);font-family:var(--font);font-size:15px;outline:none;transition:border-color .25s,box-shadow .25s}
.req-form input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(110,139,255,0.16)}
.req-form input::placeholder{color:var(--muted-2)}
.req-form .seg{display:flex;gap:8px}
.req-form .seg button{flex:1;background:rgba(0,0,0,0.22);border:1px solid var(--line);border-radius:10px;padding:11px 6px;color:var(--ink);font-family:var(--mono);font-size:12px;cursor:pointer;transition:all .2s}
.req-form .seg button:hover{color:var(--ink)}
.req-form .seg button.sel{background:linear-gradient(180deg,var(--accent-3),var(--accent));color:var(--accent-ink);border-color:transparent}
.req-form .form-submit{grid-column:span 2;justify-content:center;margin-top:4px}
.req-form .form-ok{grid-column:span 2;text-align:center;font-family:var(--mono);font-size:13px;color:var(--accent-3);background:rgba(60,224,255,0.08);border:1px solid var(--line);border-radius:12px;padding:16px;line-height:1.5}
@media(max-width:560px){.req-form{grid-template-columns:1fr}.req-form .field.full,.req-form .form-submit,.req-form .form-ok{grid-column:span 1}}

/* ============================================================
   FOOTER
   ============================================================ */
footer{border-top:1px solid var(--line);padding:64px 0 40px;position:relative}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
.foot-brand .word{font-size:21px;font-weight:600;letter-spacing:0.02em}
.foot-brand p{color:var(--muted);font-size:14px;margin-top:14px;max-width:300px;line-height:1.55}
.foot-col h5{font-family:var(--mono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted-2);margin-bottom:18px}
.foot-col a{display:block;color:var(--muted);font-size:14.5px;margin-bottom:12px;transition:color .3s}
.foot-col a:hover{color:var(--accent-3)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:56px;padding-top:26px;border-top:1px solid var(--line);font-family:var(--mono);font-size:12px;color:var(--muted-2);flex-wrap:wrap;gap:12px}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:span 2}}

/* ============================================================
   TWEAKS PANEL
   ============================================================ */
#tweaks{position:fixed;right:20px;bottom:20px;z-index:300;width:280px;display:none;
  background:linear-gradient(160deg,rgba(255,255,255,0.08),var(--glass));
  backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);
  border:1px solid var(--glass-brd);border-radius:18px;padding:20px;
  box-shadow:inset 0 1px 0 var(--glass-hi),0 40px 90px -40px rgba(0,0,0,0.95);font-family:var(--mono)}
#tweaks.on{display:block}
#tweaks .th{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
#tweaks .th b{font-size:12px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink);font-weight:500}
#tweaks .th button{background:none;border:none;color:var(--muted);cursor:pointer;font-size:15px;line-height:1}
#tweaks .tlabel{font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin:16px 0 9px}
#tweaks .skins{display:flex;flex-direction:column;gap:8px}
#tweaks .skin{display:flex;align-items:center;gap:11px;padding:10px 11px;border:1px solid var(--line);border-radius:11px;cursor:pointer;transition:border-color .2s,background .2s}
#tweaks .skin:hover{border-color:rgba(255,255,255,0.24)}
#tweaks .skin.sel{border-color:var(--accent-3);background:rgba(60,224,255,0.06)}
#tweaks .skin .sw{width:34px;height:22px;border-radius:6px;flex:none}
#tweaks .skin .sn{font-size:12px;color:var(--ink)}
#tweaks .skin .sd{font-size:10px;color:var(--muted)}
#tweaks .tseg{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
#tweaks .tseg button{flex:1;background:none;border:none;color:var(--muted);font-family:var(--mono);font-size:11px;padding:9px 4px;cursor:pointer;transition:all .2s}
#tweaks .tseg button.sel{background:linear-gradient(180deg,var(--accent-3),var(--accent));color:var(--accent-ink)}

/* ============================================================
   VOICE CONSOLE (hero device)
   ============================================================ */
.voicebar{position:relative;z-index:7;display:flex;align-items:center;gap:13px;padding:11px 16px;
  background:linear-gradient(180deg,rgba(255,255,255,0.05),var(--glass));border-bottom:1px solid var(--line);
  transition:background .4s}
.voicebar.listening{background:linear-gradient(180deg,rgba(60,224,255,0.10),var(--glass))}
.voicebar .vmic{width:30px;height:30px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,var(--glass-2),transparent);border:1px solid var(--glass-brd);position:relative;transition:.3s}
.voicebar .vmic svg{width:15px;height:15px;stroke:var(--muted);fill:none;transition:.3s}
.voicebar.listening .vmic{background:linear-gradient(160deg,var(--accent-3),var(--accent));border-color:transparent;box-shadow:0 0 18px -2px var(--glow)}
.voicebar.listening .vmic svg{stroke:var(--accent-ink)}
.voicebar.listening .vmic::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid var(--accent-3);opacity:0;animation:ping 1.5s var(--ease) infinite}
.voicebar.sent .vmic{background:linear-gradient(160deg,var(--accent-3),var(--accent));border-color:transparent}
.voicebar.sent .vmic svg{stroke:var(--accent-ink)}
.wave{display:flex;align-items:center;gap:2.5px;height:20px;flex:none;width:84px;justify-content:center}
.wave i{width:2.5px;height:3px;border-radius:2px;background:var(--muted-2);transition:background .3s}
.voicebar.listening .wave i{background:var(--accent-3)}
.vtext{flex:1;font-family:var(--mono);font-size:12.5px;color:var(--ink);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vtext .vp{color:var(--muted-2)}
.vtext .vc{display:inline-block;width:7px;height:13px;background:var(--accent-3);vertical-align:-2px;margin-left:1px;opacity:0}
.voicebar.listening .vtext .vc{opacity:1;animation:livePulse .8s steps(1) infinite}
.vmode{font-family:var(--mono);font-size:9.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent-3);border:1px solid var(--line);border-radius:7px;padding:4px 8px;flex:none;white-space:nowrap}
@media(max-width:520px){.wave{width:54px}.vmode{display:none}}

/* ---- Document-upload scene atoms ---- */
.filechip{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;background:rgba(0,0,0,0.24);padding:13px 15px}
.filechip .fi{width:30px;height:38px;border-radius:5px;background:linear-gradient(160deg,var(--accent-2),var(--accent));flex:none;position:relative;box-shadow:0 6px 16px -8px var(--glow)}
.filechip .fi::after{content:"PDF";position:absolute;bottom:3px;left:0;right:0;text-align:center;font-family:var(--mono);font-size:7px;font-weight:600;color:#fff;letter-spacing:0.06em}
.filechip .fn{font-size:13.5px;font-weight:600}
.filechip .fs{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:2px}
.kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.kpi-cell{border:1px solid var(--line);border-radius:11px;background:linear-gradient(180deg,var(--glass-2),transparent);padding:13px;opacity:0;transform:translateY(8px) scale(.97);transition:.45s var(--ease)}
.kpi-cell.show{opacity:1;transform:none}
.kpi-cell .kn{font-family:var(--mono);font-size:21px;font-weight:500;letter-spacing:-0.02em;color:var(--ink)}
.kpi-cell .kn .u{color:var(--accent-3);font-size:.58em}
.kpi-cell .kk{font-size:10.5px;color:var(--muted);margin-top:4px}

/* ============================================================
   MARKET ANALYSIS / WHITE PAPER
   ============================================================ */
.market-sub{font-family:var(--mono);font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted-2);margin:64px 0 22px}
.shift{display:grid;grid-template-columns:1fr auto 1fr;gap:22px;align-items:stretch;margin-top:56px}
@media(max-width:820px){.shift{grid-template-columns:1fr;gap:16px}.shift-arrow{transform:rotate(90deg);margin:0 auto}}
.shift-col{border-radius:var(--r-lg);padding:30px}
.shift-col .shift-k{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px}
.shift-col .shift-k.old{color:var(--muted-2)}
.shift-col .shift-k.old::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--muted-2)}
.shift-col .shift-k.new{color:var(--accent-3)}
.shift-col .shift-k.new::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent-3);box-shadow:0 0 10px var(--accent-3)}
.shift-col ul{list-style:none;margin:20px 0 24px;display:flex;flex-direction:column;gap:12px}
.shift-col li{font-size:15px;color:var(--muted);padding-left:22px;position:relative;line-height:1.4}
.shift-col li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;border-radius:2px;border:1.5px solid var(--muted-2)}
.shift-col.accent li{color:var(--ink)}
.shift-col.accent li::before{border-color:var(--accent-3);background:var(--accent-3)}
.shift-col.accent{border:1px solid rgba(60,224,255,0.22);box-shadow:inset 0 1px 0 var(--glass-hi),0 30px 80px -44px var(--glow)}
.shift-stat{border-top:1px solid var(--line);padding-top:18px;display:flex;flex-direction:column;gap:6px}
.shift-stat .n{font-family:var(--mono);font-size:34px;font-weight:500;letter-spacing:-0.03em}
.shift-col.accent .shift-stat .n{color:var(--accent-3)}
.shift-stat .n .u{font-size:.6em;color:var(--accent-3)}
.shift-stat .k{font-size:12.5px;color:var(--muted)}
.shift-arrow{display:flex;align-items:center;color:var(--accent-3)}
.shift-arrow svg{width:48px;height:24px;filter:drop-shadow(0 0 8px var(--glow))}

.roi{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:880px){.roi{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.roi{grid-template-columns:1fr}}
.roi-card{border-radius:var(--r);padding:24px}
.roi-card .roi-k{font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted)}
.roi-card .roi-row{display:flex;align-items:baseline;gap:10px;margin-top:16px;flex-wrap:wrap}
.roi-card .from{font-family:var(--mono);font-size:14px;color:var(--muted-2);text-decoration:line-through;text-decoration-color:var(--muted-2)}
.roi-card .arr{color:var(--accent-3)}
.roi-card .to{font-family:var(--mono);font-size:23px;font-weight:600;letter-spacing:-0.02em;color:var(--accent-3)}
.roi-card .roi-n{font-size:12.5px;color:var(--muted);margin-top:12px}

.econ{border-radius:var(--r-lg);padding:32px;margin-top:24px}
.econ-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.econ-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
@media(max-width:900px){.econ-grid{grid-template-columns:repeat(3,1fr);gap:18px 8px}}
@media(max-width:520px){.econ-grid{grid-template-columns:1fr 1fr}}
.econ-cell{padding:6px 12px 6px 0}
.econ-cell .n{font-family:var(--mono);font-size:clamp(26px,3vw,34px);font-weight:500;letter-spacing:-0.03em}
.econ-cell .n .u{color:var(--accent-3);font-size:.5em}
.econ-cell .k{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.35}
.econ-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.eco-chips{display:flex;gap:10px;flex-wrap:wrap}
.eco-chips span{font-family:var(--mono);font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:8px;padding:7px 12px;transition:.3s}
.eco-chips span:hover{color:var(--accent-3);border-color:rgba(60,224,255,0.3)}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1!important;transform:none!important}
}



/* ---- Spoken-command tiles: hover expands the scene into the panel ---- */
.cap-main{position:relative;isolation:isolate}
.cmd-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;transition:opacity .45s var(--ease-2),filter .45s var(--ease-2)}
@media(max-width:620px){.cmd-grid{grid-template-columns:1fr}}
@media(hover:none){.cmd-tile.tap-live .tile-stage{border-style:solid;border-color:color-mix(in oklab,var(--accent-3) 30%,transparent)}}
.cap-main.live .cmd-grid{opacity:.45;filter:blur(1.5px)}
.cmd-tile{border:1px solid var(--line);border-radius:13px;background:linear-gradient(180deg,var(--glass-2),transparent);padding:12px;position:relative;transition:border-color .4s var(--ease-2),transform .4s var(--ease-2),box-shadow .4s var(--ease-2);outline:none}
.cmd-tile:hover,.cmd-tile:focus-visible{border-color:color-mix(in oklab,var(--accent-3) 45%,transparent);transform:translateY(-2px);box-shadow:0 20px 44px -26px var(--glow)}
.cmd-tile .t{font-size:13.5px;font-weight:600;margin-top:12px}
.cmd-tile .p{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin-top:6px}
.tile-stage{position:relative;height:104px;border-radius:9px;overflow:hidden;background:linear-gradient(135deg,var(--bg-3),var(--bg-2));border:1px dashed var(--line);transition:border-color .4s var(--ease-2)}
.cmd-tile:hover .tile-stage{border-style:solid;border-color:color-mix(in oklab,var(--accent-3) 30%,transparent)}
.tile-idle{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)}

/* the expanding panel-wide stage */
.cap-stage{--ts:2.05;position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;gap:calc(var(--ts)*7px);padding:20px 22px 38px;opacity:0;pointer-events:none;transform:scale(.9);transform-origin:var(--ox,50%) var(--oy,50%);transition:opacity .38s var(--ease-2),transform .5s var(--ease-2);background:linear-gradient(180deg,color-mix(in oklab,var(--bg-2) 93%,transparent),color-mix(in oklab,var(--bg-3) 97%,transparent));backdrop-filter:blur(16px) saturate(130%);-webkit-backdrop-filter:blur(16px) saturate(130%);overflow:hidden}
.cap-main.live .cap-stage{opacity:1;transform:none}
.cap-voice{flex:none;display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:999px;background:rgba(0,0,0,.28);padding:8px 15px;transition:border-color .4s var(--ease-2),box-shadow .4s var(--ease-2)}
.cap-voice.listening{border-color:color-mix(in oklab,var(--accent-3) 55%,transparent);box-shadow:0 0 26px -10px var(--glow)}
.cap-voice .vw{display:flex;align-items:center;gap:2px;height:16px;flex:none}
.cap-voice .vw i{width:2px;height:3px;border-radius:1px;background:var(--accent-3);transition:height .08s linear}
.cap-voice .vt{font-family:var(--mono);font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cap-voice .vt .vp{color:var(--muted-2)}
.cap-voice .vc{display:inline-block;width:7px;height:13px;background:var(--accent-3);margin-left:2px;vertical-align:-2px;animation:capBlink 1s steps(1) infinite}
@keyframes capBlink{50%{opacity:0}}
.cap-stage .tile-scene{position:relative;flex:none;width:100%;height:min(100%,calc(var(--ts)*148px));margin:auto 0}
.tile-vision{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden}
.tile-cur{position:absolute;top:0;left:0;width:24px;height:24px;z-index:9;opacity:0;transition:opacity .3s var(--ease-2);filter:drop-shadow(0 4px 10px rgba(0,0,0,.6));pointer-events:none}
.tile-cur svg{width:100%;height:100%;display:block}
.cap-main.live .tile-cur{opacity:1}
.tile-cur .pulse{position:absolute;left:3px;top:3px;width:11px;height:11px;border-radius:50%;border:1.5px solid var(--accent-3);opacity:0}
.tile-cur.click .pulse{animation:tPulse .55s var(--ease-2)}
@keyframes tPulse{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(3.8)}}
.t-scan{position:absolute;left:0;right:0;height:110px;top:-110px;background:linear-gradient(180deg,transparent,color-mix(in oklab,var(--accent-3) 10%,transparent) 60%,color-mix(in oklab,var(--accent-3) 26%,transparent));border-bottom:1px solid var(--accent-3);opacity:0;mix-blend-mode:screen}
.t-scan.run{animation:tScan 1.15s var(--ease-2) forwards}
@keyframes tScan{0%{opacity:0;top:-110px}12%{opacity:1}88%{opacity:1}100%{opacity:0;top:100%}}
.t-box{position:absolute;border:1.5px solid var(--accent-3);border-radius:7px;opacity:0;transform:scale(.96);transition:opacity .3s var(--ease-2),transform .3s var(--ease-2);box-shadow:0 0 18px -3px var(--glow)}
.t-box.show{opacity:1;transform:none}
.t-box .lbl{position:absolute;top:-7px;left:7px;transform:translateY(-100%);font-family:var(--mono);font-size:10px;letter-spacing:.03em;color:var(--accent-ink);background:var(--accent-3);padding:2px 7px;border-radius:4px;white-space:nowrap}
.tile-toast{position:absolute;left:50%;top:64px;transform:translate(-50%,-10px);z-index:8;font-family:var(--mono);font-size:12.5px;color:var(--accent-ink);background:var(--accent-3);padding:6px 13px;border-radius:999px;opacity:0;transition:opacity .3s var(--ease-2),transform .3s var(--ease-2);white-space:nowrap;pointer-events:none}
.tile-toast.show{opacity:1;transform:translate(-50%,0)}
.tile-hud{position:absolute;left:0;right:0;bottom:0;z-index:8;display:flex;align-items:center;gap:6px;padding:9px 22px;font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--accent-3);background:linear-gradient(180deg,transparent,rgba(0,0,0,.45))}
.tile-hud i{width:5px;height:5px;border-radius:50%;background:var(--line);flex:none;transition:background .3s,box-shadow .3s}
.tile-hud i.on{background:var(--accent-3);box-shadow:0 0 7px var(--glow)}
.tile-hud b{font-weight:400;margin-left:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* mock atoms, scaled by --ts */
.t-stack{display:flex;flex-direction:column;gap:calc(var(--ts)*6px);height:100%}
.t-row{display:flex;gap:calc(var(--ts)*6px);flex:1;min-height:0}
.t-chip{flex:1;border:1px solid var(--line);border-radius:calc(var(--ts)*7px);background:rgba(0,0,0,.24);padding:calc(var(--ts)*6px);display:flex;flex-direction:column;min-width:0;transition:border-color .3s,background .3s}
.t-chip .th{flex:1;min-height:0;border-radius:calc(var(--ts)*5px);background:linear-gradient(135deg,var(--glass-2),transparent);border:1px solid var(--line)}
.t-chip .tt{font-size:calc(var(--ts)*9.5px);font-weight:600;margin-top:calc(var(--ts)*6px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-chip .tp{font-family:var(--mono);font-size:calc(var(--ts)*9.5px);color:var(--muted);margin-top:calc(var(--ts)*2px)}
.t-chip.pick{border-color:var(--accent-3);background:color-mix(in oklab,var(--accent-3) 12%,transparent)}
.t-chip.pick .tp{color:var(--accent-3)}
.t-btn{flex:none;align-self:flex-end;border:1px solid color-mix(in oklab,var(--accent-3) 50%,transparent);border-radius:calc(var(--ts)*7px);background:color-mix(in oklab,var(--accent-3) 14%,transparent);color:var(--ink);font-family:var(--mono);font-size:calc(var(--ts)*10px);padding:calc(var(--ts)*6px) calc(var(--ts)*12px);text-align:center;transition:background .3s,color .3s}
.t-btn.hit{background:var(--accent-3);color:var(--accent-ink)}
.t-field{flex:none;border:1px solid var(--line);border-radius:calc(var(--ts)*7px);background:rgba(0,0,0,.24);padding:calc(var(--ts)*6px) calc(var(--ts)*9px);font-family:var(--mono);font-size:calc(var(--ts)*10px);color:var(--muted);display:flex;align-items:center;gap:calc(var(--ts)*7px);transition:border-color .3s}
.t-field .typed{color:var(--ink)}
.t-field.hit{border-color:var(--accent-3)}
.t-bars{display:flex;align-items:flex-end;gap:calc(var(--ts)*6px);flex:1;min-height:0}
.t-bars .c{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:calc(var(--ts)*4px);height:100%}
.t-bars .b{width:100%;height:0;border-radius:calc(var(--ts)*4px) calc(var(--ts)*4px) 2px 2px;background:linear-gradient(180deg,color-mix(in oklab,var(--accent) 75%,transparent),color-mix(in oklab,var(--accent) 22%,transparent));transition:height .7s var(--ease-2)}
.t-bars .c.hot .b{background:linear-gradient(180deg,var(--accent-3),var(--accent))}
.t-bars .l{font-family:var(--mono);font-size:calc(var(--ts)*8.5px);color:var(--muted-2);flex:none}
.t-file{flex:none;display:flex;align-items:center;gap:calc(var(--ts)*7px);border:1px solid var(--line);border-radius:calc(var(--ts)*7px);background:rgba(0,0,0,.24);padding:calc(var(--ts)*6px) calc(var(--ts)*8px)}
.t-file .fi{width:calc(var(--ts)*13px);height:calc(var(--ts)*17px);border-radius:2px;border:1px solid var(--accent-3);background:color-mix(in oklab,var(--accent-3) 18%,transparent);flex:none}
.t-file .fn{font-size:calc(var(--ts)*9.5px);font-weight:600;line-height:1.3}
.t-file .fs{font-family:var(--mono);font-size:calc(var(--ts)*8.5px);color:var(--muted-2);line-height:1.3}
.t-kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--ts)*5px);flex:1;min-height:0}
.t-kpi .k{border:1px solid var(--line);border-radius:calc(var(--ts)*6px);background:rgba(0,0,0,.24);padding:calc(var(--ts)*5px) calc(var(--ts)*7px);display:flex;flex-direction:column;justify-content:center;overflow:hidden;opacity:0;transform:translateY(6px);transition:opacity .35s var(--ease-2),transform .35s var(--ease-2)}
.t-kpi .k.show{opacity:1;transform:none}
.t-kpi .kn{font-family:var(--mono);font-size:calc(var(--ts)*11px);color:var(--accent-3);line-height:1.1}
.t-kpi .kk{font-size:calc(var(--ts)*7.5px);color:var(--muted-2);line-height:1.2;margin-top:calc(var(--ts)*2px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-list{display:flex;flex-direction:column;gap:calc(var(--ts)*5px);height:100%;justify-content:center}
.t-item{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--ts)*8px);border:1px solid var(--line);border-radius:calc(var(--ts)*6px);background:rgba(0,0,0,.24);padding:calc(var(--ts)*6px) calc(var(--ts)*9px);opacity:0;transform:translateX(-8px);transition:opacity .3s var(--ease-2),transform .3s var(--ease-2),border-color .3s,background .3s}
.t-item.show{opacity:1;transform:none}
.t-item .n{font-size:calc(var(--ts)*9.5px);font-weight:600;line-height:1.35}
.t-item .s{font-family:var(--mono);font-size:calc(var(--ts)*8.5px);color:var(--muted-2);line-height:1.35}
.t-item .r{font-family:var(--mono);font-size:calc(var(--ts)*10px);color:var(--muted);flex:none;transition:color .3s}
.t-item.pick{border-color:var(--accent-3);background:color-mix(in oklab,var(--accent-3) 12%,transparent)}
.t-item.pick .r{color:var(--accent-3)}
@media(max-width:620px){
  .cap-stage{--ts:1.5;padding:16px 14px 34px;top:clamp(15%,var(--oy,50%),85%);bottom:auto;height:440px;transform:translateY(-50%) scale(.9)}
  .cap-main.live .cap-stage{transform:translateY(-50%)}
  .cap-voice .vt{font-size:11.5px}
}

/* ---- Depth pass: cursor glare + tilt for card grids ---- */
.glare-card{position:relative}
.glare-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .5s var(--ease-2);background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),color-mix(in oklab,var(--accent-3) 20%,transparent),transparent 62%);mix-blend-mode:screen}
.glare-card:hover::before{opacity:1}
.tilt-card{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease-2),box-shadow .5s var(--ease-2)}
.tilt-card:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px);box-shadow:inset 0 1px 0 var(--glass-hi),inset 0 0 0 1px rgba(255,255,255,0.03),inset 0 -22px 40px -28px rgba(255,255,255,0.18),0 40px 90px -36px rgba(0,0,0,0.85),0 14px 30px -14px var(--glow)}