/* КАРАДЕСК — блок «Послушайте наших ИИ-менеджеров»: карточки с голосовой дорожкой, номера и плашка «Проверьте сами».
   Плеер — assets/voices.js; записи — assets/voices/*.mp3 и *.peaks.json. Палитра и шрифты — из light.css. */
.vx{padding:72px 0 88px}
.vx .nw{white-space:nowrap}
.vx-top{max-width:900px}
.vx-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:44px}

.vx-card{--w:#d9d9d5;--w-hov:#a9a9a4;--w-on:#0b0b0c;--w-head:#12a150;
  display:flex;flex-direction:column;gap:18px;min-width:0;padding:30px;border-radius:var(--r,32px);background:var(--card,#fff);box-shadow:var(--shadow)}
.vx-card.dark{--w:#34343a;--w-hov:#5c5c64;--w-on:#fff;--w-head:#2ecc71;background:var(--ink,#0b0b0c);color:#fff}

.vx-head{display:flex;align-items:center;gap:14px;min-width:0}
.vx-av{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--ink,#0b0b0c);color:#fff;font-weight:700;font-size:21px;letter-spacing:-.02em}
.dark .vx-av{background:#fff;color:var(--ink,#0b0b0c)}
.vx-id{min-width:0}
.vx-id h3{font-size:26px;line-height:1.1;letter-spacing:-.03em;font-weight:680}
.vx-id p{margin-top:3px;font-size:14px;color:var(--muted)}
.dark .vx-id p{color:#a6a6ac}
.vx-live{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:999px;background:rgba(18,161,80,.1);color:#0b7a3a;font-size:13px;font-weight:600;white-space:nowrap}
.dark .vx-live{background:rgba(46,204,113,.14);color:#8ff0b5}
.vx-live i{width:7px;height:7px;border-radius:50%;background:#2ecc71;animation:vx-pulse 2.2s ease-in-out infinite}

.vx-player{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:center}
.vx-play{position:relative;flex:none;width:68px;height:68px;border-radius:50%;display:grid;place-items:center;background:var(--ink,#0b0b0c);color:#fff;transition:transform .2s,opacity .2s}
.dark .vx-play{background:#fff;color:var(--ink,#0b0b0c)}
.vx-play svg{width:24px;height:24px}
.vx-play .i-pause{display:none}
.is-playing .vx-play .i-play{display:none}
.is-playing .vx-play .i-pause{display:block}
.vx-play:hover{transform:scale(1.05)}
.vx-play:focus-visible,.vx-wave:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.is-playing .vx-play::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--w-head);opacity:.55;animation:vx-ring 1.6s ease-out infinite}
.vx-play[aria-disabled="true"]{opacity:.35;cursor:not-allowed;transform:none}
.is-loading .vx-play{opacity:.7}

.vx-wave{position:relative;height:96px;min-width:0;cursor:pointer;touch-action:none;border-radius:10px}
.vx-bars{height:100%;display:flex;align-items:center;gap:2px}
.vx-bars i{flex:1 1 0;min-width:2px;border-radius:3px;background:var(--w);transition:background .12s}
.vx-bars i.h{background:var(--w-hov)}
.vx-bars i.on{background:var(--w-on)}
.vx-bars i.on.c{background:var(--w-head)}
.is-soon .vx-wave{cursor:default}
.is-soon .vx-bars i{opacity:.6}

.vx-meta{display:flex;justify-content:space-between;align-items:baseline;gap:6px 14px;flex-wrap:wrap;font-size:13.5px;color:var(--muted)}
.dark .vx-meta{color:#a6a6ac}
.vx-time{font-family:"JB Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
.vx-state{font-size:14px;font-weight:600;color:var(--ink-2)}
.dark .vx-state{color:#e7e7ea}
.vx-state:empty{display:none}

.vx-call{margin-top:auto;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.dark .vx-call{border-top-color:rgba(255,255,255,.1)}
.vx-call span{font-size:15.5px;color:var(--muted)}
.dark .vx-call span{color:#a6a6ac}
.vx-num{font-size:clamp(26px,2.6vw,34px);font-weight:700;letter-spacing:-.03em;line-height:1.2;border-bottom:2px solid var(--line-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.dark .vx-num{border-bottom-color:rgba(255,255,255,.25)}
.vx-num:hover{border-bottom-color:currentColor}

/* Плашка «Проверьте сами» со стрелкой к голосам и номерам */
.vx-proof{margin-top:18px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;padding:40px 44px;border-radius:var(--r,32px);background:var(--card,#fff);box-shadow:var(--shadow)}
.vx-proof p{font-size:clamp(22px,2.4vw,34px);line-height:1.22;letter-spacing:-.025em;font-weight:620;color:var(--ink-2);max-width:none;text-wrap:pretty}
.vx-proof b{font-weight:700;color:var(--ink);background:linear-gradient(transparent 64%,rgba(46,204,113,.32) 64%)}
.vx-proof em{font-style:normal;color:#12a150;white-space:nowrap}
.vx-up{flex:none;width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:var(--ink,#0b0b0c);color:#fff;transition:transform .2s}
.vx-up:hover{transform:translateY(-4px)}
.vx-up svg{width:28px;height:28px}

@keyframes vx-pulse{0%,100%{box-shadow:0 0 0 0 rgba(46,204,113,.5)}50%{box-shadow:0 0 0 5px rgba(46,204,113,0)}}
@keyframes vx-ring{from{transform:scale(1);opacity:.55}to{transform:scale(1.25);opacity:0}}

@media (max-width:980px){.vx-grid{grid-template-columns:1fr}}
@media (max-width:680px){
  .vx{padding:48px 0 72px}
  .vx-grid{margin-top:30px;gap:14px}
  .vx-card{padding:24px 20px;border-radius:26px;gap:16px}
  .vx-av{width:44px;height:44px;font-size:18px}
  .vx-id h3{font-size:22px}
  .vx-live{height:26px;padding:0 10px;font-size:12px}
  .vx-player{gap:14px}
  .vx-play{width:56px;height:56px}
  .vx-play svg{width:20px;height:20px}
  .vx-wave{height:72px}
  .vx-proof{grid-template-columns:1fr;padding:28px 22px;border-radius:26px;gap:20px}
  .vx-up{width:60px;height:60px;justify-self:end}
}
@media (max-width:400px){.vx-live{display:none}}
@media (prefers-reduced-motion:reduce){
  .vx-live i,.is-playing .vx-play::after{animation:none}
  .vx-play,.vx-up,.vx-bars i{transition:none}
  .vx-play:hover,.vx-up:hover{transform:none}
}