/* Live voice-agent demo (Retell) — matches site tokens: --bg, --surface, --line, --accent, pixel display, mono labels */
.vx{border-bottom:1px solid var(--line);padding-block:clamp(72px,10vw,128px)}
.vx header{display:grid;gap:14px;max-width:760px;margin-bottom:clamp(36px,5vw,56px)}
.vx header h2{font-size:clamp(34px,5.4vw,68px)}
.vx header p{color:var(--muted);max-width:56ch}
.vx-grid{display:grid;gap:16px}
@media (min-width:900px){.vx-grid{grid-template-columns:repeat(3,1fr)}}
.vx-card{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);padding:26px 24px 22px;transition:border-color .3s,transform .3s}
.vx-card:hover{border-color:var(--line-strong)}
.vx-card.live{border-color:var(--o1);box-shadow:0 0 0 1px var(--o1),0 20px 60px -30px var(--o1)}
.vx-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.vx-top .mono{color:var(--muted);font-size:11px}
.vx-dot{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.vx-dot i{width:7px;height:7px;border-radius:50%;background:#3ddc84;box-shadow:0 0 10px #3ddc84}
.vx-card.live .vx-dot i{animation:vxblink 1s steps(2) infinite}
@keyframes vxblink{50%{opacity:.2}}
/* orb */
.vx-orbwrap{position:relative;width:min(190px,58%);aspect-ratio:1;margin:26px auto 22px}
.vx-orbwrap .halo{position:absolute;inset:-22%;border-radius:50%;background:radial-gradient(circle,var(--o1) 0%,transparent 62%);opacity:.16;filter:blur(24px);transition:opacity .5s,transform .5s}
.vx-orb{position:absolute;inset:0;border-radius:50%;overflow:hidden;clip-path:circle(50%);isolation:isolate;transform:scale(.94);transition:transform .6s cubic-bezier(.22,1,.36,1);box-shadow:inset -14px -18px 44px rgba(0,0,0,.5)}
.vx-orb::before{content:"";position:absolute;inset:0;background:var(--o4)}
.vx-orb i{position:absolute;inset:-25%;border-radius:45%;filter:blur(20px);mix-blend-mode:screen;animation:vxspin 14s linear infinite}
.vx-orb i:nth-child(1){background:radial-gradient(circle at 35% 40%,var(--o1),transparent 55%)}
.vx-orb i:nth-child(2){background:radial-gradient(circle at 65% 35%,var(--o2),transparent 50%);animation-duration:18s;animation-direction:reverse}
.vx-orb i:nth-child(3){background:radial-gradient(circle at 50% 75%,var(--o3),transparent 55%);animation-duration:11s}
.vx-orb::after{content:"";position:absolute;left:18%;top:12%;width:38%;height:26%;border-radius:50%;background:radial-gradient(ellipse,rgba(255,255,255,.5),transparent 70%);filter:blur(5px)}
@keyframes vxspin{to{transform:rotate(360deg)}}
.vx-card.st-connecting .vx-orb{animation:vxpulse 1.2s ease-in-out infinite}
@keyframes vxpulse{50%{transform:scale(.88)}}
.vx-card.st-listening .vx-orb{transform:scale(1)}
.vx-card.st-speaking .vx-orb{transform:scale(1.07)}
.vx-card.st-speaking .vx-orb i{animation-duration:4s}
.vx-card.st-speaking .halo{opacity:.42;transform:scale(1.08)}
.vx-card h2,.vx-card h3{margin:0;font-family:var(--font-display);font-weight:500;text-transform:uppercase;font-size:clamp(26px,2.6vw,32px);line-height:1}
.vx-card .co{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--o1);margin-top:8px}
.vx-card .ds{color:var(--muted);font-size:14.5px;margin-top:12px;flex:1}
.vx-card .btn{margin-top:20px;justify-content:center;width:100%}
.vx-card .btn svg{width:15px;height:15px}
.vx-card .btn.end{background:transparent;color:var(--fg);border:1px solid var(--line-strong)}
.vx-card .btn[disabled]{opacity:.6;cursor:wait;transform:none}
.vx-status{min-height:1.4em;margin-top:10px;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--muted);text-align:center}
.vx-status.err{color:#ff8b8b}
.vx-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:22px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.vx-foot a{color:var(--accent);text-decoration:none}
.vx-term{margin-top:28px;background:var(--surface);border:1px solid var(--line);padding:18px 20px;font-family:var(--font-mono);font-size:12.5px;line-height:1.8;color:var(--muted);white-space:pre-wrap}
.vx-term b{color:var(--accent);font-weight:500}
@media (prefers-reduced-motion:reduce){.vx-orb i,.vx-card .vx-orb{animation:none!important}}