/* Bright theme (mirrors kloudy.bot/future paper tone), keeps BotBar cyan→purple accents */
:root{--bg:#f3f2f0;--ink:#1c1d21;--mut:#55566a;--c:#0fb8de;--m:#b23cf0;--v:#7b5cff;--ct:#0a8fb3;--mt:#9a2fd6;--card:#ffffffb3;--line:#dcd9d4}
body{background:linear-gradient(#f6f5f3,#ecebe7 60%,#f2f1ee);color:var(--ink)}
.grad{background:linear-gradient(90deg,var(--ct),var(--v) 55%,var(--mt));-webkit-background-clip:text;background-clip:text;color:transparent}
.nav{background:#f3f2f0cc;border-bottom:1px solid var(--line)}.nav nav a:hover{color:var(--ink)}
.logo{color:var(--ct);text-shadow:none}
.eyebrow,.kick,.plab{color:var(--ct)}.num{color:var(--mt)}.tag{color:var(--ct);background:#fff}
.btn{color:#fff;background:linear-gradient(135deg,#0aa6cf,var(--v) 55%,var(--mt));box-shadow:0 10px 30px -12px #7b5cff99}
.btn:hover{box-shadow:0 16px 40px -10px #7b5cffaa}
.glow{opacity:.18}.g2{background:#7fe3ff}
.hero-art img,.step-art,.feat img,.gi img,.vid{box-shadow:0 30px 70px -30px #3b2a7a66}
.track{color:#7d7f95}
.phone{background:linear-gradient(145deg,#ffffff,#dcdbe4);box-shadow:0 0 0 1px #cfcdd8 inset,0 40px 90px -30px #7b5cff88}
.dots i{background:#cfcdd8}.dots i.on{background:var(--v);box-shadow:0 0 10px #7b5cff88}
.pane,.tile,.tray,.cards>*,.chip,.sc,.vid figcaption{background:#fff;border-color:var(--line);color:var(--ink)}
.chip.active{background:linear-gradient(90deg,var(--ct),var(--mt));color:#fff;border-color:transparent}
.abar{background:#ffffffd9;box-shadow:0 18px 40px -18px #3b2a7a55}.abar button{color:var(--ink)}.abar button:hover,.abar button.active{color:#fff;background:linear-gradient(90deg,#0aa6cf,var(--mt))}
.panel{background:#fffffff5;box-shadow:0 30px 70px -20px #3b2a7a55;color:var(--ink)}.sc a{color:var(--ct)}
.lightbox{background:#f3f2f0f2}.lightbox p{color:var(--ink)}
.vid img{filter:none}.vid .play{color:#fff;background:linear-gradient(135deg,#0aa6cf,var(--mt))}
footer{color:var(--mut)}
/* ---- BotBar bot face (original; behavior modeled on kloudy.bot/future) ---- */
.bbface{position:relative;width:38px;height:34px;border:0;padding:0;cursor:pointer;border-radius:12px 12px 14px 14px;background:linear-gradient(145deg,#26d3f5,#7b5cff 60%,#b23cf0);box-shadow:0 0 0 2px #fff,0 8px 20px -6px #7b5cffaa,inset 0 -4px 8px #0003;transition:transform .25s cubic-bezier(.3,1.6,.5,1);margin-left:6px;flex:none}
.bb-ant{position:absolute;left:50%;top:-9px;width:2px;height:8px;margin-left:-1px;background:#7b5cff}.bb-ant::after{content:"";position:absolute;left:-4px;top:-6px;width:10px;height:7px;border-radius:6px 6px 4px 4px;background:#26d3f5;box-shadow:0 0 8px #26d3f5}
.bb-eyes{position:absolute;inset:0;transform:translate(var(--ex,0px),var(--ey,0px));transition:transform .12s ease-out}
.bb-eyes i{position:absolute;top:12px;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 6px 2px #b8f4ffcc;transition:all .2s}.bb-eyes .l{left:8px}.bb-eyes .r{right:8px}
.bb-mouth{position:absolute;left:50%;bottom:6px;width:10px;height:3px;margin-left:-5px;border-radius:0 0 8px 8px;background:#e9fbff;opacity:.85;transition:all .2s}
.bb-say{position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);font:700 11px/1 Inter,sans-serif;color:var(--v);white-space:nowrap;opacity:0;pointer-events:none}
.bbface.blink .bb-eyes i{height:1px;top:16px}
.bbface[data-mood=happy] .bb-eyes i{height:4px;top:14px;border-radius:8px 8px 2px 2px}.bbface[data-mood=happy] .bb-mouth{width:14px;height:5px;margin-left:-7px}
.bbface[data-mood=curious]{transform:rotate(-10deg)}.bbface[data-mood=curious] .bb-eyes .l{height:5px;top:14px}
.bbface[data-mood=excited]{transform:scale(1.15);animation:bb-hop .45s ease-in-out infinite alternate}.bbface[data-mood=excited] .bb-eyes i{width:10px;height:10px;top:11px}
.bbface.tap{animation:bb-tap .55s cubic-bezier(.3,1.6,.5,1)}.bbface.tap .bb-eyes i{height:3px;top:15px;border-radius:8px 8px 2px 2px}.bbface.tap .bb-mouth{width:14px;height:7px;margin-left:-7px;background:#2a0f4a;border:1.5px solid #e9fbff}
.bbface.tap .bb-say{animation:bb-say .9s ease-out}
.bbface.tap::after{content:"";position:absolute;inset:-4px;border-radius:16px;border:2px solid #26d3f5;animation:bb-ring .55s ease-out forwards}
@keyframes bb-hop{to{transform:scale(1.15) translateY(-3px)}}
@keyframes bb-tap{0%{transform:scale(1)}25%{transform:scale(.82,.72) translateY(3px)}60%{transform:scale(1.12,1.08) translateY(-4px)}100%{transform:scale(1)}}
@keyframes bb-ring{to{inset:-14px;opacity:0;border-radius:24px}}
@keyframes bb-say{0%{opacity:0;transform:translate(0,-20%)}25%{opacity:1}100%{opacity:0;transform:translate(6px,-140%)}}
/* ---- story motion: word rise + type-in (kloudy-style pacing) ---- */
.split .w{display:inline-block;opacity:0;transform:translateY(.5em);transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i)*55ms)}
.split.in .w,.step.on .split .w{opacity:1;transform:none}
.step p .ch{opacity:.12;transition:opacity .15s}.step p .ch.on{opacity:1}
.step-art{opacity:0;transform:translateY(40px) scale(.97);transition:opacity .7s,transform .9s cubic-bezier(.2,.8,.2,1)}.step.on .step-art,.step.seen .step-art{opacity:1;transform:none}
.reveal{transition-duration:.9s}
@media (max-width:820px){.story-phone{display:none!important}.story{display:block}.step{opacity:1;transform:none;padding:56px 0 24px}.step .m-art{display:block}}
.m-art{display:none}
@media (prefers-reduced-motion:reduce){.split .w,.step p .ch,.step-art{opacity:1!important;transform:none!important}}
/* ---- route section (scroll-driven) ---- */
.route{height:520vh;position:relative}
.route-stick{position:sticky;top:0;height:100vh;padding:84px 6vw 90px;display:flex;flex-direction:column;gap:14px;overflow:hidden}
.route-head h2{font-size:clamp(30px,4vw,54px)}.route-head p.route-line{color:var(--mut);font-size:18px;max-width:640px;margin-top:6px;min-height:2.4em}
.route-body{flex:1;min-height:0;display:grid;grid-template-columns:1.35fr 1fr;gap:3vw;align-items:center}
.route-svg{width:100%;height:100%;max-height:56vh}
.route-svg .links path{fill:none;stroke:#d6d3e6;stroke-width:3}
.route-svg .lp{fill:none;stroke:url(#rg);stroke-width:4;stroke-linecap:round;stroke-dasharray:1 1;pathLength:1;opacity:0;transition:opacity .4s}
.route-svg .pk circle{fill:#0aa6cf;opacity:0;transition:opacity .3s;filter:drop-shadow(0 0 4px #0aa6cf)}.route-svg .pk circle[data-n="5"]{fill:#b23cf0;filter:drop-shadow(0 0 4px #b23cf0)}
.route-svg .nd rect{fill:#fff;stroke:#d6d3e6;stroke-width:2;transition:all .4s}.route-svg .nd text{text-anchor:middle;font:600 18px Inter,sans-serif;fill:#9a9bb0;transition:fill .4s}.route-svg .nd text.s{font-size:10.5px;font-weight:600}
.route-svg .nd.on rect{stroke:url(#rg);stroke-width:3;filter:drop-shadow(0 8px 14px #7b5cff55)}.route-svg .nd.on text{fill:#1c1d21}
.route-svg .nd.res.on rect{fill:#f4efff}
.route-side{display:flex;flex-direction:column;gap:12px;min-width:0}
.rv{display:none;flex-direction:column;gap:8px}.rv.on{display:flex}
.rv-img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;max-height:120px}
.rc{display:grid;grid-template-columns:1fr auto;gap:0 10px;align-items:center;padding:9px 12px;border-radius:12px;background:#fff;border:1px solid var(--line);font-size:13px;opacity:.45;transition:.35s}
.rc span{grid-column:1;color:var(--mut);font-size:12px}.rc i{grid-row:1/3;grid-column:2;width:18px;height:18px;border-radius:50%;border:2px solid #cfcde0}
.rc.run{opacity:1}.rc.run i{border-color:#0aa6cf;border-top-color:transparent;animation:spin .8s linear infinite}
.rc.done{opacity:1}.rc.done i{border:0;background:linear-gradient(135deg,#0aa6cf,#b23cf0);position:relative}.rc.done i::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:11px;font-style:normal}
@keyframes spin{to{transform:rotate(360deg)}}
.visual{display:none;grid-template-columns:1fr 1fr;gap:8px}.visual.on{display:grid}.visual .rv-img{grid-column:1/-1}
.rt{padding:10px 12px;border-radius:12px;background:#fff;border:1px solid var(--line);font-size:13px;opacity:.45;transition:.35s}.rt.res{grid-column:1/-1}
.rt em{display:block;height:5px;margin-top:8px;border-radius:4px;background:#ecebf3;overflow:hidden;position:relative}.rt em::after{content:"";position:absolute;inset:0;width:var(--w,0%);background:linear-gradient(90deg,#0aa6cf,#b23cf0);transition:width .4s}
.rt.run,.rt.done{opacity:1}
.result-card{padding:14px 16px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:0 20px 40px -24px #3b2a7a66;opacity:0;transform:translateY(16px) scale(.97);transition:.5s}
.result-card.on{opacity:1;transform:none}.result-card h4{font:700 18px "Space Grotesk";margin:2px 0 6px}.result-card ul{padding-left:18px;font-size:13px;color:var(--mut)}
.result-card li{opacity:0;transform:translateX(-8px);transition:.4s}.result-card li.on{opacity:1;transform:none}.result-card .inj{display:inline-block;margin-top:8px;font-size:12px;font-weight:600;color:var(--mt);opacity:0;transition:.4s}.result-card.done .inj{opacity:1}
.route-steps{display:flex;gap:6px;justify-content:center}.route-steps i{width:28px;height:4px;border-radius:3px;background:#dcd9e6;transition:.3s}.route-steps i.on{background:linear-gradient(90deg,#0aa6cf,#b23cf0)}
section.sec-store,section.sec-gen,section.sec-dl{padding:110px 6vw}
.sgrid.wide{grid-template-columns:repeat(3,1fr);max-width:960px;margin:28px auto 0}.gen2{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:720px;margin:28px auto 0}
.sec-store .sc,.sec-gen .sc{padding:18px 20px}
@media (max-width:820px){.route{height:600vh}.route-stick{padding:76px 18px 84px;gap:8px}.route-body{grid-template-columns:1fr;gap:8px;align-content:start}.route-svg{max-height:30vh}.route-head p.route-line{font-size:15px}.rv-img{display:none!important}.rc{padding:6px 10px}.rc span{display:none}.result-card{padding:10px 12px}.result-card h4{font-size:16px}.result-card ul{font-size:12px}.sgrid.wide,.gen2{grid-template-columns:1fr}}
@media (max-height:760px) and (max-width:820px){.result-card ul{display:none}}
.route-svg{height:auto;aspect-ratio:640/400;max-height:58vh;align-self:center}
.route-body{align-items:start}.route-side{gap:8px}.rv{gap:6px}.rv-img{max-height:84px}
.rc{grid-template-columns:auto 1fr auto;padding:7px 12px}.rc span{grid-column:2;padding-left:8px}.rc i{grid-row:1;grid-column:3;width:16px;height:16px}
.result-card{padding:12px 14px}.result-card ul{columns:2;column-gap:18px}
@media (max-height:820px) and (min-width:821px){.rv-img{display:none!important}}
@media (max-width:820px){.route-svg{width:100%;max-height:none}.result-card ul{columns:1}}
section.sec-vbar,section.sec-names{padding:110px 6vw}
.vbar-wrap{max-width:960px;margin:28px auto 0;display:grid;gap:16px}
.vbar{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;padding:10px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:0 16px 40px -24px #3b2a7a55}
.vb{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:12px;background:#f4f2fb;font:600 14px Inter;white-space:nowrap}.vb.aivid{padding:4px 8px}.vb.aivid img{height:30px;width:30px;border-radius:8px}.vb.mine{border:1.5px dashed #b9b4d6;background:none;color:var(--mut)}
.vcards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.vcards .sc{display:block;padding:16px 18px}.vcards .sc span{display:block;margin-top:4px}
.vbar-art{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:20px;box-shadow:0 30px 70px -30px #3b2a7a66}
.names{max-width:620px;margin:28px auto 0;display:grid;gap:12px}
.nsearch{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 16px;border-radius:99px;background:#fff;border:1px solid var(--line);box-shadow:0 16px 40px -24px #3b2a7a55}
.nsearch input{flex:1;min-width:0;border:0;outline:0;font:500 16px Inter;background:none;color:var(--ink)}.tld{font-weight:700;color:var(--mt)}
.nres{display:grid;gap:8px}.nr{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;background:#fff;border:1px solid var(--line);font-size:15px}
.nr b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.nr em{font-style:normal;font-size:12px;color:var(--mut)}.nr .ok{color:#0a8f6a}.nr .no{color:#b4485a}
.nr a{font-weight:600;font-size:13px;padding:6px 12px;border-radius:99px;color:#fff;background:linear-gradient(90deg,#0aa6cf,var(--mt))}.nr a.off{background:#e3e1ec;color:var(--mut);pointer-events:none}
@media (max-width:820px){.vcards{grid-template-columns:1fr}.nr{flex-wrap:wrap}}
.names{grid-template-columns:minmax(0,1fr)}.nsearch input{width:0}
@media (max-width:820px){.route-body{display:flex;flex-direction:column;gap:8px}.route-svg{flex:none;width:100%;height:auto;aspect-ratio:640/400}.headless.on{display:grid;grid-template-columns:1fr 1fr;gap:6px}.rc.res{grid-column:1/-1}.result-card ul{display:none}.route-head p.route-line{min-height:0}}
/* ---- devices carousel ---- */
.devices{height:500vh;position:relative}.dv-stick{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;padding:90px 0 90px}
.dv-head{padding:0 6vw}.dv-head h2{font-size:clamp(32px,4.4vw,58px)}.dv-head p{color:var(--mut);font-size:18px}
.dv-track{flex:1;display:flex;width:500vw;will-change:transform}.dv{width:100vw;display:grid;place-items:center;transition:transform .5s,opacity .5s}.dv:not(.on){transform:scale(.86);opacity:.35}
.dv-dots{display:flex;gap:6px;justify-content:center}.dv-dots i{width:28px;height:4px;border-radius:3px;background:#dcd9e6}.dv-dots i.on{background:linear-gradient(90deg,#0aa6cf,#b23cf0)}
.scr{background:linear-gradient(160deg,#141633,#2a1a55);border-radius:inherit;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:10px;gap:8px;overflow:hidden}
.mk{background:#ffffff14;border-radius:12px;padding:6px}.mk-bar{display:flex;gap:5px;margin-bottom:5px}.mk-bar i{flex:1;height:10px;border-radius:5px;background:linear-gradient(90deg,#26d3f5,#b23cf0);opacity:.7}
.mk-keys{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.mk-keys b{height:14px;border-radius:4px;background:#ffffff1f}.mk-keys .cl{grid-column:span 2;color:#fff;font-size:10px;display:grid;place-items:center;background:linear-gradient(135deg,#26d3f5,#7b5cff);box-shadow:0 0 12px #26d3f5}
.mc{display:flex;flex-direction:column;gap:5px}.mc span,.w-cards span,.tiles4 span,.hud span{font:600 10px Inter;color:#e9ecff;background:#ffffff1a;border:1px solid #ffffff22;border-radius:8px;padding:5px 8px}
.d-phone{width:min(220px,46vw);aspect-ratio:9/19;border-radius:34px;padding:8px;background:#fff;box-shadow:0 0 0 1px #d6d3e6,0 40px 80px -30px #7b5cff88}
.d-tablet{width:min(520px,80vw);aspect-ratio:4/3;border-radius:30px;padding:12px;background:#fff;box-shadow:0 0 0 1px #d6d3e6,0 40px 80px -30px #7b5cff88}.d-tablet .mk-keys b{height:20px}
.d-laptop{width:min(640px,86vw)}.d-laptop .lid{aspect-ratio:16/10;border-radius:18px 18px 4px 4px;padding:10px;background:#fff;box-shadow:0 0 0 1px #d6d3e6,0 40px 80px -30px #7b5cff88}.d-laptop .base{height:14px;margin:0 -6%;border-radius:0 0 16px 16px;background:linear-gradient(#e9e7f0,#cfccdc)}
.tiles4{display:grid;grid-template-columns:1fr 1fr;gap:6px;flex:1}.tiles4 span{display:grid;place-items:center;font-size:12px}
.d-watch{display:flex;flex-direction:column;align-items:center}.d-watch .band{width:90px;height:70px;background:linear-gradient(#dcd9e6,#c9c5d9)}.band.t{border-radius:20px 20px 0 0}.band.b{border-radius:0 0 20px 20px}
.d-watch .face{width:150px;height:170px;border-radius:40px;padding:8px;background:#fff;box-shadow:0 0 0 1px #d6d3e6,0 30px 60px -24px #7b5cff88}.face .w-cards{height:100%;border-radius:32px;background:linear-gradient(160deg,#141633,#2a1a55);display:flex;flex-direction:column;justify-content:center;gap:6px;padding:12px}.w-cards span:first-child{text-align:center;font-size:18px;background:none;border:0;color:#26d3f5}
.d-glasses{display:flex;align-items:center;width:min(560px,88vw)}.lens{flex:1;aspect-ratio:1.6;border-radius:44% 44% 48% 48%;border:10px solid #2b2d42;background:linear-gradient(160deg,#e9f9ff,#efe6ff);display:grid;place-items:center;box-shadow:0 30px 60px -24px #7b5cff88}.bridge{width:8%;height:10px;border-radius:5px;background:#2b2d42;margin-top:-30%}
.hud{display:flex;flex-direction:column;gap:5px;padding:8px}.hud span{background:#7b5cffcc;color:#fff}
/* playable placeholders */
.vid.playing img{animation:kb 8s linear infinite alternate;filter:none}.vid{overflow:hidden}.vid .bar{position:absolute;left:0;bottom:44px;height:4px;width:0;background:linear-gradient(90deg,#0aa6cf,#b23cf0)}
.vid.playing .bar{animation:vbar 8s linear forwards}.vid.playing .play{opacity:.0}
@keyframes kb{to{transform:scale(1.15) translate(-3%,-2%)}}@keyframes vbar{to{width:100%}}
section.watch{padding-bottom:140px}
.bridge{margin-top:0;transform:translateY(-34px);height:8px;width:6%}.d-glasses{gap:0}
section.sec-patent,section.sec-demo{padding:110px 6vw}
.pat{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:900px;margin:28px auto 0}.pat .sc{display:block;padding:18px 20px}.pat .sc span{display:block;margin-top:4px}
.demo{display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:center;max-width:1000px;margin:28px auto 0}
.demo-phone{width:300px}.demo-phone .scr{justify-content:flex-end}
.dm-out{flex:1;display:flex;flex-direction:column;gap:6px;justify-content:flex-end;overflow:hidden}.dm-hint{color:#aab0e0;font-size:13px;text-align:center;margin:auto 0}
.dm-q{align-self:flex-end;max-width:90%;background:linear-gradient(135deg,#0aa6cf,#7b5cff);color:#fff;font-size:12px;padding:7px 10px;border-radius:12px 12px 2px 12px}
.dm-m{font-size:10px;color:#aab0e0;text-align:right}
.dm-out .rc{background:#ffffff14;border-color:#ffffff22;color:#e9ecff;font-size:11px;padding:6px 10px;grid-template-columns:1fr auto}.dm-out .rc b{font-weight:500}.dm-out .rc i{grid-column:2;grid-row:1}
.dm-r{background:#fff;color:var(--ink);font:600 12px Inter;padding:9px 12px;border-radius:12px;opacity:0;transform:translateY(8px) scale(.96);transition:.45s}.dm-r.on{opacity:1;transform:none}
.dm-in{display:flex;gap:6px;align-items:center;background:#ffffff1a;border-radius:99px;padding:4px 4px 4px 12px}.dm-in input{flex:1;min-width:0;width:0;border:0;outline:0;background:none;color:#fff;font:14px Inter}
.dm-in button{border:0;width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:15px}.dm-mic{background:linear-gradient(135deg,#26d3f5,#b23cf0);color:#fff}.dm-mic.live{animation:pulse 1s infinite}.dm-go{background:#ffffff26;color:#fff}
@keyframes pulse{50%{box-shadow:0 0 0 10px #26d3f544}}
.dm-chips{display:flex;flex-wrap:wrap;gap:8px}.dm-chips .chip{text-align:left;font-size:14px;padding:9px 14px;border-radius:14px;cursor:pointer;border:1px solid var(--line)}
.close-cta{text-align:center;margin-top:60px;display:grid;justify-items:center;gap:14px}.close-cta h3{font-size:clamp(28px,3.4vw,44px)}
@media (max-width:820px){.pat{grid-template-columns:1fr}.demo{grid-template-columns:1fr;justify-items:center;gap:20px}.demo-phone{width:min(280px,80vw)}.dm-chips .chip{font-size:13px}}
.concept-tag{display:inline-block;margin-top:6px;font:600 11px Inter;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);border:1px dashed #b9b4d6;border-radius:99px;padding:3px 10px}
.route-viz{position:relative;min-width:0}
.bubble{position:absolute;left:4%;bottom:-4%;max-width:80%;background:#fff;border:1px solid var(--line);border-radius:18px 18px 18px 4px;padding:12px 16px;font-size:14px;box-shadow:0 20px 40px -20px #7b5cff88;opacity:0;transform:translateY(12px) scale(.95);transition:.45s;z-index:3}
.bubble b{display:block;color:var(--mt);font-size:12px;margin-bottom:2px}.bubble::before{content:"";position:absolute;left:-14px;bottom:-6px;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#ffb3e6,#b23cf0);box-shadow:0 0 0 3px #fff}
.bubble.on{opacity:1;transform:none}
.rc.warn,.rt.warn{border-color:#f0b4c0;background:#fff5f7}.rc.warn i{background:#e5566f!important}.rc.warn i::after{content:"!"!important}
.route.muse .rc.done:not(.warn) i,.route.muse .rt.done em::after{background:linear-gradient(135deg,#ff7fc0,#b23cf0)}
.headless.on{display:grid;grid-template-columns:1fr 1fr;gap:6px}.rv-img{display:none}
.rc{grid-template-columns:1fr auto}.rc span{grid-column:1;padding-left:0}.rc i{grid-column:2;grid-row:1/3}
@media (max-width:820px){.bubble{position:relative;left:0;bottom:0;max-width:none;margin-top:4px;font-size:12px;padding:8px 12px}.bubble:not(.on){display:none}.rc span{display:none}.route-head h2{font-size:28px}}
/* ---- centered header: face center, pill nav above ---- */
.nav{justify-content:center;padding:10px 4vw 8px;flex-direction:column;gap:4px;align-items:center}
.nav .brand{position:absolute;left:4vw;top:50%;transform:translateY(-50%);font-size:16px}
.nav>.btn{position:absolute;right:4vw;top:50%;transform:translateY(-50%)}
.nav nav{order:-1;margin:0;display:flex;gap:4px;padding:4px;border-radius:99px;background:#fff;box-shadow:0 8px 24px -12px #3b2a7a66;border:1px solid var(--line)}
.nav nav a{padding:5px 12px;border-radius:99px;font-size:13px;color:var(--mut)}.nav nav a:hover{background:linear-gradient(90deg,#0aa6cf,var(--mt));color:#fff}
.bbface{margin:0}
@media (max-width:820px){.nav nav{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);flex-direction:column;border-radius:18px;padding:8px;min-width:200px;text-align:center}.nav.open nav{display:flex}.nav nav a{font-size:15px;padding:9px 14px}.nav{padding:12px 4vw}.nav .brand{font-size:15px}}
@media (min-width:821px){.route-stick{padding-top:104px}.dv-stick{padding-top:108px}.hero{padding-top:130px}}
@media (min-width:821px){.nav nav{margin-bottom:12px}.nav{padding-top:8px}}
/* ---- v7: BotBar folder-tab face (inline SVG) + double-B logo ---- */
.logo-mark{display:inline-block;height:23px;width:auto;vertical-align:middle}footer .logo-mark{height:28px;margin-bottom:6px}
.bbface{width:84px;height:48px;background:none;box-shadow:none;border-radius:0;overflow:visible;filter:drop-shadow(0 8px 14px #7b5cff55)}
.bb-svg{width:100%;height:100%;display:block;overflow:visible}
.bbface .bb-eyes{position:static;inset:auto;transform:translate(calc(var(--ex,0px)*2.4),calc(var(--ey,0px)*2.4));transition:transform .12s ease-out}
.bb-pill,.bb-wink{transform-box:fill-box;transform-origin:center;transition:transform .15s}
.bbface .bb-mouth{position:static;width:auto;height:auto;margin:0;background:none;border:0;opacity:1;transform-box:fill-box;transform-origin:center;transition:transform .2s}
.bbface.blink .bb-pill{transform:scaleY(.1)}
.bbface.blink .bb-eyes i,.bbface[data-mood] .bb-eyes i{all:unset}
.bbface[data-mood=happy] .bb-mouth{transform:scale(1.25)}.bbface[data-mood=happy] .bb-pill{transform:scaleY(.75)}
.bbface[data-mood=excited] .bb-pill{transform:scale(1.2)}
.bbface.tap .bb-pill{transform:scaleY(.25)}.bbface.tap .bb-wink{transform:rotate(-18deg) scale(1.15)}.bbface.tap .bb-mouth{transform:scale(1.5,1.7);background:none;border:0;width:auto;height:auto;margin:0}
.bbface.tap::after{border-radius:24px}
@media (max-width:820px){.bbface{width:66px;height:38px}}
/* ---- v8: looping route, real shots, hero keyboard, keyboard-style store, talking phone, videos ---- */
.route.loop{height:auto!important}.route.loop .route-stick{position:relative;height:auto;min-height:100vh}
.rshot{margin:0;display:flex;gap:10px;align-items:center}.rshot img{width:96px;border-radius:12px;border:5px solid #111;box-shadow:0 10px 24px -10px #0006;aspect-ratio:1080/2520;object-fit:cover;object-position:bottom}.rshot figcaption{font-size:12px;color:var(--mut)}
@media (max-width:820px){.route.loop{height:auto!important}.route.loop .route-stick{min-height:0;padding-bottom:40px}.rshot img{width:70px}}
.hero-kb{display:flex;flex-direction:column;align-items:center;gap:12px}
.hk{width:min(440px,92vw);background:#121318;border-radius:22px;padding:10px;color:#e8eaf2;box-shadow:0 30px 70px -30px #3b2a7a99;font:500 13px Inter,sans-serif}
.hk-top,.hk-icons,.hk-tabs,.hk-duo{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.hk-top span{background:#23252e;border-radius:10px;padding:5px 8px}.hk-top .hk-sug{flex:1;font-size:11px;color:#9fa4b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hk-icons{justify-content:space-between}.hk-icons span{width:34px;height:30px;display:grid;place-items:center;background:#23252e;border-radius:9px;font-size:15px}.hk-icons .on{background:linear-gradient(135deg,#26d3f5,#7b5cff)}
.hk-tabs span{padding:4px 12px;border-radius:99px;background:#23252e;font-size:12px}.hk-tabs .on{background:#2b6cff;color:#fff}.hk-tabs .hk-my{margin-left:auto;background:#fff;color:#111}
.hk-rows div{display:flex;gap:4px;margin-bottom:5px;justify-content:center}.hk-rows b{flex:1;max-width:38px;height:36px;display:grid;place-items:center;background:#2c2e38;border-radius:7px;font-weight:500}.hk-rows b.w{max-width:60px;flex:1.5;background:#3a3d4a;font-size:12px}.hk-rows b.sp{max-width:none;flex:5;font-size:12px}.hk-rows b.go{background:#2b9bff}
.hk-duo span{flex:1;background:#1d1f27;border-radius:10px;padding:6px 8px;display:flex;gap:6px;align-items:center;font-size:12px}.hk-duo i{font-style:normal;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;background:#333;color:#fff}.hk-duo i.m{background:#2b6cff}
.hk-real{width:min(440px,92vw);border-radius:12px;border:4px solid #111}
.kstore{display:flex;gap:28px;justify-content:center;align-items:flex-start;flex-wrap:wrap;margin-top:28px}
.kdark{background:#121318;border-radius:20px;padding:14px;max-width:520px;width:100%}.ktabs{display:flex;gap:6px;margin-bottom:10px}.ktabs span{padding:4px 14px;border-radius:99px;background:#23252e;color:#cfd3e0;font:500 12px Inter}.ktabs .on{background:#2b6cff;color:#fff}
.kgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.kt{background:#1d1f27;border-radius:12px;padding:10px 4px;text-align:center;color:#e8eaf2;text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:3px}.kt img{width:40px;height:40px}.kt b{font:600 12px Inter}.kt span{font-size:10px;color:#8e93a8}.kt:hover{background:#2a2d38}
.shotf{margin:0;text-align:center}.shotf img{width:220px;border-radius:18px;border:6px solid #111}.shotf figcaption{font-size:12px;color:var(--mut)}
.panel .kdark .kgrid{grid-template-columns:repeat(3,1fr)}
@media (max-width:820px){.kgrid{grid-template-columns:repeat(3,1fr)}}
.dm-stage{position:relative;height:150px;border-radius:14px;background:#0b0c12;overflow:hidden;margin-bottom:6px;flex:none}
.dm-muse,.dm-grok{position:absolute;top:8px;display:flex;flex-direction:column;align-items:center;font-size:10px;color:#cfd3e0;z-index:2}.dm-muse{left:8px}.dm-grok{right:8px}
.dm-muse svg{width:38px;height:38px}.dm-stage.talk .mm,.dm-stage.muse .mm{animation:mouth .25s infinite alternate}@keyframes mouth{to{ry:7}}
.dm-stage.muse .dm-muse svg{filter:drop-shadow(0 0 8px #2b6cff)}
.gk{width:36px;height:36px;border-radius:50%;background:#000;border:2px solid #fff;display:grid;place-items:center;font:700 16px Inter;color:#fff}.dm-grok em{display:block;width:36px;height:3px;background:linear-gradient(90deg,#26d3f5,#b23cf0);margin-top:3px;transform-origin:left;transform:scaleX(.1)}
.dm-stage.go .dm-grok em,.dm-stage.think .dm-grok em{animation:work 1s ease-in-out infinite alternate}@keyframes work{to{transform:scaleX(1)}}
.dm-stage.think .gk{animation:pulse 1s infinite}
.dm-apps{position:absolute;left:56px;right:56px;top:10px;display:flex;flex-wrap:wrap;gap:4px;justify-content:center;z-index:2}.dm-apps span{font-size:9.5px;background:#ffffff1f;color:#fff;border-radius:8px;padding:3px 6px;opacity:0}
.dm-stage.go .dm-apps span{animation:popin .5s calc(var(--i)*.35s) forwards,bob 1.6s calc(var(--i)*.35s + .5s) ease-in-out infinite alternate}@keyframes popin{from{opacity:0;transform:translateY(10px) scale(.8)}to{opacity:1;transform:none}}@keyframes bob{to{transform:translateY(-3px)}}
.dm-shot{position:absolute;left:0;right:0;bottom:0;height:78px;overflow:hidden;opacity:.85}.dm-shot img{width:100%;object-fit:cover;object-position:bottom}
.dm-stage.go .dm-shot img{animation:pan 6s ease-in-out infinite alternate}@keyframes pan{from{transform:translateY(0)}to{transform:translateY(-30%)}}
.demo-tag{position:absolute;right:6px;bottom:6px;z-index:3;background:#ff5ca8;color:#fff;font:700 9px Inter;letter-spacing:.1em;padding:2px 6px;border-radius:6px;text-transform:uppercase}
.dm-a{background:#ffffff1a;color:#e9ecff;font-size:12px;padding:7px 10px;border-radius:12px 12px 12px 2px;max-width:95%}.dm-a b{color:#7fe3ff;margin-right:4px}.dm-a.thinking{opacity:.7}
.dm-ho{background:#2b6cff33;color:#dfe6ff;font-size:11px;padding:6px 9px;border-radius:10px;opacity:0;transition:.4s}.dm-ho.on{opacity:1}.dm-ho b{color:#9cc0ff;margin-right:4px}
.dm-speak{margin-top:6px;width:100%;border:0;border-radius:99px;padding:10px;font:700 14px Inter;color:#fff;background:linear-gradient(135deg,#26d3f5,#b23cf0);cursor:pointer}.dm-speak.live{animation:pulse 1s infinite}
.demo-phone .scr{overflow:hidden}.dm-out{min-height:150px}
.vrow3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1100px;margin:28px auto 0;padding:0 6vw}
.yv{position:relative;margin:0;border-radius:16px;overflow:hidden;background:#000}.yv video{width:100%;display:block;aspect-ratio:16/9;background:#000}.yv figcaption{background:#fff;color:var(--ink);padding:10px 12px;font:600 14px Inter}
.yplay{position:absolute;left:50%;top:calc(50% - 20px);transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;border:0;font-size:22px;color:#fff;background:linear-gradient(135deg,#0aa6cf,#b23cf0);cursor:pointer;box-shadow:0 10px 30px #0008}.yv.playing .yplay{display:none}
@media (max-width:820px){.vrow3{grid-template-columns:1fr}}
.vph{padding:0!important}.vph-poster{position:relative;flex:1;min-height:520px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:radial-gradient(circle at 50% 35%,#2b2f6b,#0b0c12 70%);color:#cfd3e0;font:600 14px Inter}.vph-poster .yplay{position:static;transform:none}.vph-poster .demo-tag{position:absolute;top:10px;right:10px}
.dm-caps{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}.dm-caps li{background:#fff;border:1px solid var(--line);border-radius:12px;padding:9px 14px;font-size:14px}
@media (max-width:820px){.hero{display:flex;flex-direction:column}.hero-kb{order:-1;margin:8px 0 4px}}
.vph-poster .demo-tag{bottom:auto;left:auto;height:auto;width:auto;align-self:auto}