:root {
  --ink: #111a26;
  --text: #3b4756;
  --mute: #76828f;
  --line: #e2e8ee;
  --paper: #f6f8fa;
  --white: #ffffff;
  --pri: #0f8f86;
  --pri-deep: #0a6f69;
  --accent: #35c2b0;
  --soft: #e4f4f1;
  --soft-2: #eef2f7;
}

/* 暗色应用台：深色面板 + 竖排标签栏 + 手机 */
.hv-dock .hero-grid { grid-template-columns: 1.04fr 0.96fr; gap: 44px; align-items: center; }
.hv-dock .hero::before { left: 0; right: 0; top: -10%; width: 100%; height: 120%;
  background: radial-gradient(circle at 76% 22%, rgba(53,194,176,.16), rgba(17,26,38,.05) 46%, transparent 68%); }
.hv-dock .hero-visual { min-height: 512px; }
.hv-dock .hero-visual::before {
  content: ""; position: absolute; inset: 10px -6px 4px 14px; border-radius: 32px;
  background: linear-gradient(156deg, #1b2736, #0e1420 66%);
  box-shadow: 0 28px 62px rgba(17,26,38,.24);
}
.hv-dock .hero-visual::after {
  content: ""; position: absolute; right: 15%; top: 11%; width: 190px; height: 190px; border-radius: 50%;
  background: radial-gradient(circle, rgba(53,194,176,.26), transparent 66%);
}
.hv-dock .hero-glow { display: none; }
.hv-dock .stage-phone {
  justify-self: start; align-self: center; width: min(210px, 48%); margin-left: 12%;
  padding: 6px; border-radius: 24px; rotate: -2deg; background: #0b1119;
  border-color: rgba(255,255,255,.14); box-shadow: 0 22px 48px rgba(0,0,0,.42); animation: none;
}
.hv-dock .stage-phone img { border-radius: 19px; }
.hv-dock .hero-badge {
  left: auto; right: 18px; top: auto; bottom: 26px; width: 104px; height: 90px;
  border-radius: 18px; background: var(--white); rotate: 0deg;
  box-shadow: 0 14px 30px rgba(9,15,22,.34);
}
.hv-dock .hero-badge strong { color: var(--pri-deep); font-size: 26px; }
.hv-dock .hero-badge span { color: var(--mute); }
.hv-dock .hero-strip {
  left: auto; right: 16px; top: 50%; bottom: auto; translate: 0 -50%;
  flex-direction: column; align-items: flex-end; gap: 9px;
  background: transparent; border: 0; box-shadow: none; padding: 0;
}
.hv-dock .hero-strip span {
  min-width: 62px; text-align: center; padding: 7px 12px; border-radius: 10px;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16);
  color: #dbe6ef; font-weight: 600; letter-spacing: .04em;
}
.hv-dock .hero-strip span:first-child { background: var(--accent); border-color: transparent; color: #07211e; }

@media (max-width: 640px) {
  .hv-dock .hero-grid { grid-template-columns: 1fr; gap: 18px; }
  .hv-dock .hero-visual { min-height: 432px; }
  .hv-dock .hero-visual::before { inset: 6px 0 0 4px; border-radius: 24px; }
  .hv-dock .hero-visual::after { right: 6%; top: 8%; width: 140px; height: 140px; }
  .hv-dock .stage-phone { width: min(176px, 52%); margin-left: 8%; }
  .hv-dock .hero-badge { display: grid; left: auto; right: 8px; bottom: 18px; width: 84px; height: 72px; border-radius: 14px; }
  .hv-dock .hero-badge strong { font-size: 22px; }
  .hv-dock .hero-strip { display: none; }
}