/* Interactive demos inside the lower landing cards.
   Base styles show each demo's FINAL state, so with reduced motion (animations off) nothing is hidden. */
.bc,.feat{--ps:running}.bc:not(.live) *,.feat:not(.live) *{animation-play-state:paused!important} /* off-screen = no CPU */
.viz{height:150px;display:grid;place-items:center;position:relative;margin-bottom:8px}
.feat h3{margin-top:4px}

/* 1. fingerprint scan */
.fp{position:relative;width:104px;height:124px}
.fp svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke-width:2.2;stroke-linecap:round}
.fp .dim{stroke:#cbd5e1}.fp .lit{stroke:var(--brand);filter:drop-shadow(0 0 3px color-mix(in srgb,var(--brand) 55%,transparent));animation:fp-lit 4.5s ease-in-out infinite}
.fp .beam{position:absolute;left:-8px;right:-8px;top:100%;height:2px;border-radius:2px;background:var(--brand);box-shadow:0 0 10px 3px color-mix(in srgb,var(--brand) 55%,transparent);animation:fp-beam 4.5s ease-in-out infinite;opacity:0}
.fp-ok{position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:12px;font-weight:600;color:var(--brand);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:0 10px;animation:fp-ok 4.5s ease-in-out infinite}
@keyframes fp-lit{0%{clip-path:inset(0 0 100% 0);opacity:1}70%{clip-path:inset(0 0 0 0)}92%{clip-path:inset(0 0 0 0);opacity:1}100%{clip-path:inset(0 0 0 0);opacity:0}}
@keyframes fp-beam{0%{top:0;opacity:1}70%{top:100%;opacity:1}72%,100%{top:100%;opacity:0}}
@keyframes fp-ok{0%,70%{opacity:0;transform:translate(-50%,4px)}78%,92%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}

/* 2. shield pulse */
.shield{position:relative;width:110px;height:110px;display:grid;place-items:center;color:var(--brand)}
.shield svg{width:64px;height:64px;position:relative;z-index:1;fill:color-mix(in srgb,var(--brand) 8%,var(--card))}
.shield i{position:absolute;inset:14px;border-radius:50%;border:2px solid var(--brand);opacity:0;animation:pulse 3s ease-out infinite}
.shield i:nth-child(2){animation-delay:1s}.shield i:nth-child(3){animation-delay:2s}
.shield::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px dashed var(--line);animation:spin 18s linear infinite}
@keyframes pulse{0%{transform:scale(.6);opacity:.55}100%{transform:scale(1.25);opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}

/* 3. three-step start */
.steps3{display:flex;align-items:center;gap:0;width:100%;justify-content:center}
.steps3 b{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--brand);border-color:var(--brand);background:var(--card);animation:stepon 6s infinite;flex:none}
.steps3 b svg{width:22px;height:22px}
.steps3 b:nth-of-type(2){animation-delay:2s}.steps3 b:nth-of-type(3){animation-delay:4s}
.steps3 i{flex:0 0 36px;height:2px;background:var(--line);position:relative;overflow:hidden}
.steps3 i::after{content:"";position:absolute;inset:0;background:var(--brand);transform:scaleX(1);transform-origin:right;animation:fill 6s infinite}
.steps3 i:nth-of-type(2)::after{animation-delay:2s}
@keyframes stepon{0%{color:var(--mute);border-color:var(--line);box-shadow:none}6%{color:var(--brand);border-color:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 15%,transparent)}16%,88%{color:var(--brand);border-color:var(--brand);box-shadow:none}100%{color:var(--mute);border-color:var(--line)}}
@keyframes fill{0%{transform:scaleX(0)}16%,88%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:0}}
.steps3-cap{position:absolute;bottom:8px;font-size:12px;color:var(--mute)}

/* 4. support chat */
.chat{width:100%;max-width:240px;display:flex;flex-direction:column;gap:8px;font-size:13px}
.chat span{padding:4px 12px;border-radius:14px;width:fit-content;max-width:90%}
.chat .me{background:var(--accent);color:var(--brand);align-self:flex-start;animation:chat1 8s infinite}
.chat .bot{background:var(--brand);color:#fff;align-self:flex-end;animation:chat2 8s infinite}
.chat .typing{opacity:0;align-self:flex-end;display:flex;gap:3px;background:var(--line);animation:chat-t 8s infinite}
.chat .typing i{width:5px;height:5px;border-radius:50%;background:var(--mute);animation:dot 1s infinite}.chat .typing i:nth-child(2){animation-delay:.15s}.chat .typing i:nth-child(3){animation-delay:.3s}
@keyframes chat1{0%{opacity:0;transform:translateY(6px)}8%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes chat-t{0%,22%{opacity:0}26%,44%{opacity:1}48%,100%{opacity:0}}
@keyframes chat2{0%,48%{opacity:0;transform:translateY(6px)}56%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes dot{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* 5. video call tiles */
.call{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;max-width:220px}
.call b{position:relative;height:56px;border-radius:12px;background:var(--accent);display:grid;place-items:end center;overflow:hidden;box-shadow:inset 0 0 0 2px transparent;animation:speak 8s infinite}
.call b::before{content:"";position:absolute;top:10px;width:18px;height:18px;border-radius:50%;background:var(--brand);opacity:.85}
.call b::after{content:"";width:34px;height:20px;border-radius:17px 17px 0 0;background:var(--brand);opacity:.85}
.call b:nth-child(2){animation-delay:2s}.call b:nth-child(3){animation-delay:4s}.call b:nth-child(4){animation-delay:6s}
@keyframes speak{0%,22%{box-shadow:inset 0 0 0 2px var(--brand),0 0 12px color-mix(in srgb,var(--brand) 35%,transparent)}28%,100%{box-shadow:inset 0 0 0 2px transparent}}

/* 6. terminal */
.term{direction:ltr;text-align:left;width:100%;background:#0f172a;color:#e2e8f0;border-radius:12px;padding:12px 14px;font:12.5px/1.8 ui-monospace,Menlo,monospace}
.term .p{color:#60a5fa}.term .t1{display:block;overflow:hidden;white-space:nowrap;width:17ch;animation:type 6s steps(17) infinite}
.term .t2{display:block;animation:show 6s infinite}.term .ok{color:#4ade80}
.term u{display:inline-block;width:7px;height:14px;background:#e2e8f0;vertical-align:-2px;animation:blink 1s steps(1) infinite;text-decoration:none}
@keyframes type{0%{width:0}25%,92%{width:17ch}100%{width:0}}
@keyframes show{0%,30%{opacity:0}38%,92%{opacity:1}100%{opacity:0}}
@keyframes blink{50%{opacity:0}}

/* 7. trading chart */
.chart{position:relative;direction:ltr;margin:-24px -24px 12px;background:linear-gradient(var(--bg),color-mix(in srgb,var(--accent) 35%,var(--bg)));border-bottom:1px solid var(--line);user-select:none}
.chart header{display:flex;justify-content:space-between;align-items:center;padding:8px 14px 0;font-size:12px;font-weight:700}
.chart header span{font-weight:400;color:var(--mute)}.chart header em{font-style:normal;color:var(--brand)}
.chart header i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--brand);margin-right:5px;animation:livedot 1.6s infinite}
.chart svg{display:block;width:100%;height:auto;touch-action:pan-y;cursor:crosshair}
.chart text{font:7px/1 ui-monospace,monospace;fill:#94a3b8}
.chart .up{fill:var(--brand);stroke:var(--brand)}.chart .dn{fill:#94a3b8;stroke:#94a3b8}.chart .gl{stroke:#e2e8f0;stroke-dasharray:2 3}
.chart .xh{stroke:var(--brand);stroke-width:.6;stroke-dasharray:2 2;opacity:0;transition:opacity .12s}.chart.on .xh{opacity:.8}
.chart .tip{position:absolute;top:30px;pointer-events:none;background:#0f172a;color:#fff;border-radius:8px;padding:2px 8px;font:11px/1.5 ui-monospace,monospace;white-space:nowrap;opacity:0;transition:opacity .12s}
.chart.on .tip{opacity:1}.chart .tip span{color:#94a3b8;margin-left:6px}
.chart .last{animation:livedot 1.6s infinite}
@keyframes livedot{50%{opacity:.35}}

/* 8. team dashboard */
.win .trow b{transform-origin:left;animation:grow 4.5s ease-in-out infinite alternate}
.win .trow:nth-of-type(2) b{animation-duration:3.6s}.win .trow:nth-of-type(3) b{animation-duration:5.2s}.win .trow:nth-of-type(4) b{animation-duration:4s}
.win .trow i{position:relative}.win .trow i::after{content:"";position:absolute;right:-1px;bottom:-1px;width:8px;height:8px;border-radius:50%;background:var(--brand);border:2px solid var(--bg);animation:livedot 2s infinite}
.win .trow:nth-of-type(3) i::after{animation-delay:.7s}.win .trow:nth-of-type(4) i::after{animation-delay:1.3s}
@keyframes grow{from{transform:scaleX(.4);background:var(--line)}to{transform:scaleX(1);background:color-mix(in srgb,var(--brand) 55%,var(--line))}}

/* 9. mini globe with orbits */
.mg{position:relative;width:170px;height:170px;margin:auto}
.mg svg{position:absolute;inset:34px;width:calc(100% - 68px);height:calc(100% - 68px);color:var(--brand)}
.mg .o{position:absolute;border-radius:50%;border:1px solid var(--line);left:50%;top:50%;translate:-50% -50%;animation:spin 14s linear infinite}
.mg .o:nth-of-type(1){width:112px;height:112px}.mg .o:nth-of-type(2){width:168px;height:168px;animation-duration:22s;animation-direction:reverse}
.mg .o img{position:absolute;top:-10px;left:calc(50% - 10px);width:20px;height:20px;border-radius:50%;box-shadow:0 0 0 2px var(--card);animation:spin 14s linear infinite reverse}
.mg .o:nth-of-type(2) img{animation-duration:22s;animation-direction:normal}
.mg .o img:nth-child(2){top:auto;bottom:-10px}

@media(prefers-reduced-motion:reduce){.bc *,.feat *{animation:none!important}}