:root {
  --ink: #120c1e;
  --text: #3a3350;
  --mute: #7a7290;
  --line: #e7e2f2;
  --paper: #f8f6fc;
  --white: #ffffff;
  --pri: #7c4dff;
  --pri-deep: #5f35d6;
  --accent: #ff5c8a;
  --soft: #efe9ff;
  --soft-2: #ffe6ee;
}

/* 统计台：深紫渐变面板 + 顶部在线胶囊 + 底部玻璃入口条 */
.hv-stats .hero { padding: 46px 0 44px; }
.hv-stats .hero-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
.hv-stats .hero::before { right: -12%; top: -20%; width: 60%; height: 132%;
  background: radial-gradient(circle at 52% 44%, rgba(124,77,255,.26), rgba(255,92,138,.14) 56%, transparent 76%); }
.hv-stats .hero-visual { min-height: 476px; }
.hv-stats .hero-visual::before {
  content: ""; position: absolute; inset: 4% 3% 6% 5%; border-radius: 32px;
  background: radial-gradient(circle at 82% 12%, rgba(255,92,138,.22), transparent 42%),
              radial-gradient(circle at 12% 88%, rgba(124,77,255,.28), transparent 46%),
              linear-gradient(160deg, #1b1230, #120c1e 64%, #170f27);
  border: 1px solid rgba(124,77,255,.30); rotate: -1.5deg;
  box-shadow: 0 30px 64px rgba(10,6,20,.34);
}
.hv-stats .hero-visual::after {
  content: "在线 2203 · 累计 1059399"; position: absolute; left: 50%; top: 2.6%;
  transform: translateX(-50%); white-space: nowrap;
  padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18); color: #efe8ff; font-size: 12px; font-weight: 800;
  backdrop-filter: blur(8px);
}
.hv-stats .hero-glow { width: 72%; opacity: .55; background: radial-gradient(circle at 50% 46%, rgba(124,77,255,.34), rgba(255,92,138,.14) 60%, transparent 76%); }
.hv-stats .stage-phone {
  width: min(184px, 46%); justify-self: center; align-self: start; margin-top: 56px;
  padding: 7px; border-radius: 26px; background: #0a0614; border-color: rgba(255,255,255,.14);
  rotate: 1.5deg; animation: none; box-shadow: 0 26px 54px rgba(4,2,10,.5);
}
.hv-stats .stage-phone img { border-radius: 20px; }
.hv-stats .hero-badge {
  left: 2%; right: auto; top: auto; bottom: 16%; width: 82px; height: 82px;
  border-radius: 50%; background: linear-gradient(145deg, #8b5cff, #ff5c8a); rotate: -4deg;
  box-shadow: 0 16px 34px rgba(124,77,255,.42);
}
.hv-stats .hero-badge strong { color: #fff; font-size: 23px; }
.hv-stats .hero-badge span { color: rgba(255,255,255,.85); }
.hv-stats .hero-strip {
  left: 4%; right: 4%; bottom: 2.8%; gap: 6px; justify-content: center;
  padding: 8px; border-radius: 14px; background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(8px); box-shadow: none;
}
.hv-stats .hero-strip span { background: rgba(255,255,255,.08); color: #e6ddff; padding: 4px 9px; }
.hv-stats .hero-strip span:first-child { background: var(--pri); color: #fff; }
.fv-bento .feature:nth-child(1) { background: linear-gradient(140deg, #1b1230, #5f35d6); }
.sv-frames .showcase { background: #f2effa; }

@media (max-width: 640px) {
  .hv-stats .hero-grid { grid-template-columns: 1fr; gap: 16px; }
  .hv-stats .hero-visual { min-height: 450px; }
  .hv-stats .hero-visual::before { inset: 3% 0 4% 0; rotate: 0deg; }
  .hv-stats .hero-visual::after { top: 8px; font-size: 10px; padding: 6px 10px; }
  .hv-stats .stage-phone { width: min(158px, 44%); margin-top: 66px; }
  .hv-stats .hero-badge { display: grid; left: 10px; right: auto; top: auto; bottom: 66px; width: 58px; height: 58px; }
  .hv-stats .hero-badge strong { font-size: 18px; }
  .hv-stats .hero-strip { left: 8px; right: 8px; bottom: 6px; padding: 7px 8px; gap: 4px; }
  .hv-stats .hero-strip span { padding: 3px 7px; font-size: 10px; }
}