/* Voice: dark studio, violet signal, live waveform */
:root {
  color-scheme: dark;
  --bg: #0b0a12;
  --ink: #f2f0ff;
  --muted: #a29dbb;
  --line: #25223a;
  --card: #14121f;
  --soft: #1c1a2c;
  --accent: #8b7bff;
  --on-accent: #0b0a12;
  --font-head: "Space Grotesk", sans-serif;
  --font-body: Inter, sans-serif;
  --head-weight: 600;
  --head-tracking: -0.035em;
  --h1-size: clamp(42px, 6.2vw, 74px);
  --card-radius: 20px;
}
.hero-band {
  background:
    radial-gradient(55% 70% at 85% 35%, rgba(139, 123, 255, .26), transparent 70%),
    radial-gradient(40% 50% at 5% 95%, rgba(255, 107, 154, .12), transparent 70%);
}
h1 { background: linear-gradient(180deg, #ffffff 30%, #b9afff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.btn { box-shadow: 0 12px 40px -12px rgba(139, 123, 255, .8); }
.report { box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9); }
.final { background: radial-gradient(60% 120% at 50% 0%, rgba(139, 123, 255, .18), transparent 70%), var(--bg); }

.vx-card {
  background: linear-gradient(180deg, #1a1729, #100e1a); border: 1px solid #2d2947; border-radius: 26px; padding: 22px;
  box-shadow: 0 60px 120px -50px rgba(139, 123, 255, .55);
}
.vx-top { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--muted); }
.vx-rec { display: flex; align-items: center; gap: 8px; color: #ff7aa5; font-weight: 600; }
.vx-rec i { width: 8px; height: 8px; border-radius: 50%; background: #ff4f87; animation: vx-blink 1.2s infinite; }
.vx-wave { display: flex; align-items: center; gap: 4px; height: 150px; margin: 22px 0; }
.vx-wave span {
  flex: 1; height: calc(var(--h) * 1%); border-radius: 4px;
  background: linear-gradient(180deg, #c3baff, #6c5af5);
  animation: vx-wave 1.8s ease-in-out infinite; animation-delay: calc(var(--d) * -90ms);
}
.vx-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.vx-stat { background: #1c1930; border: 1px solid #2d2947; border-radius: 14px; padding: 12px 14px; }
.vx-stat small { display: block; color: var(--muted); font-size: 12px; }
.vx-stat b { font-family: var(--font-head); font-size: 19px; font-weight: 600; }
.vx-float {
  position: absolute; top: -18px; right: 18px; background: var(--accent); color: var(--on-accent);
  font: 600 13px var(--font-body); padding: 8px 14px; border-radius: 999px; box-shadow: 0 10px 30px -8px rgba(139, 123, 255, .9);
}
@keyframes vx-wave { 0%, 100% { transform: scaleY(.5); } 50% { transform: scaleY(1); } }
@keyframes vx-blink { 50% { opacity: .25; } }
@media (max-width: 860px) { .vx-wave { height: 110px; gap: 3px; } .vx-stat b { font-size: 16px; } }