:root{--accent:#ffd84d;--accent-ink:#2a2100;--accent2:#ff7ab8}
.hero-glow{position:absolute;inset:0;background:radial-gradient(60% 50% at 80% 0%,#ff7ab833,transparent 70%),radial-gradient(50% 50% at 0% 30%,#ffd84d1f,transparent 70%);pointer-events:none}
.hero{position:relative;overflow:hidden}
.demo{display:flex;flex-direction:column;align-items:center;gap:14px}
.phone{width:min(260px,70vw);aspect-ratio:9/16;border-radius:30px;border:6px solid #22283a;background:#000;position:relative;overflow:hidden;box-shadow:0 30px 80px #0009}
.scene{position:absolute;inset:0;background:linear-gradient(160deg,#3b2a6b,#d1457f 55%,#ff9a62);}
.orb{position:absolute;border-radius:50%;filter:blur(2px);opacity:.55;animation:float 7s ease-in-out infinite}
.orb.o1{width:120px;height:120px;left:-20px;top:30px;background:#7aa2ff}
.orb.o2{width:90px;height:90px;right:-10px;top:120px;background:#ffd84d;animation-delay:-2s}
.orb.o3{width:150px;height:150px;left:40px;bottom:60px;background:#6ee7b7;animation-delay:-4s}
@keyframes float{50%{transform:translate(14px,-18px) scale(1.08)}}
.person{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:62%;height:48%}
.person .head{position:absolute;left:50%;top:0;transform:translateX(-50%);width:44%;aspect-ratio:1;border-radius:50%;background:#f3c9a5}
.person .body{position:absolute;left:0;right:0;bottom:0;height:62%;border-radius:50% 50% 0 0/40% 40% 0 0;background:#1d2440}
.person .mouth{position:absolute;left:50%;top:62%;transform:translateX(-50%);width:14%;height:6%;border-radius:0 0 20px 20px;background:#7a2e3a;animation:talk .38s ease-in-out infinite}
@keyframes talk{50%{height:2%}}
.caps{position:absolute;left:8%;right:8%;top:56%;text-align:center;font-weight:900;font-size:21px;line-height:1.2;text-transform:uppercase;letter-spacing:.01em;color:#fff;text-shadow:0 2px 0 #000,0 0 8px #0008}
.caps span{display:inline-block;margin:0 3px;padding:1px 5px;border-radius:6px;transition:transform .12s,background .12s,color .12s}
.caps.hl span.on{background:#ffd84d;color:#2a2100;text-shadow:none}
.caps.pop span.on{color:#ffd84d;transform:scale(1.3) rotate(-3deg)}
.caps.kar span.past,.caps.kar span.on{color:#6ee7b7}
.chips{display:flex;gap:8px}
.chip{font-size:12px;border:1px solid var(--line);border-radius:999px;padding:4px 11px;color:var(--muted);transition:.2s}
.chip.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:700}
.local{width:min(300px,86vw);font-size:12px;color:var(--muted);background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:9px 12px}
.local .bar{height:5px;border-radius:3px;background:var(--panel2);margin:6px 0;overflow:hidden}
.local .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent2),var(--accent));animation:fill 5.4s linear infinite}
@keyframes fill{0%{width:0}90%,100%{width:100%}}
.local b{color:var(--text)}
.caption-note{font-size:12px;color:var(--muted)}