:root {
  --ink: #0a2233;
  --text: #2c4657;
  --mute: #6b8494;
  --line: #dbe9f1;
  --paper: #f5fafc;
  --white: #ffffff;
  --pri: #16b8e8;
  --pri-deep: #0d8db4;
  --accent: #13c296;
  --soft: #e2f6fc;
  --soft-2: #e2f8f1;
}

/* 信号台：深色网格面板 + 顶部参数浮签 + 底部玻璃入口条 */
.hv-signal .hero { padding: 44px 0 46px; }
.hv-signal .hero-grid { grid-template-columns: 1fr 1fr; gap: 42px; }
.hv-signal .hero::before { right: -8%; top: -18%; width: 56%; height: 128%;
  background: radial-gradient(circle at 50% 44%, rgba(22,184,232,.22), transparent 68%); }
.hv-signal .hero-visual { min-height: 474px; }
.hv-signal .hero-visual::before {
  content: ""; position: absolute; inset: 4% 3% 6% 6%; border-radius: 30px;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 34px),
    linear-gradient(158deg, #0d2f45, #0a2233 62%, #073a34);
  border: 1px solid rgba(22,184,232,.28); rotate: -2deg;
  box-shadow: 0 28px 60px rgba(10,34,51,.28);
}
.hv-signal .hero-visual::after {
  content: "丢包 100% · 延时 500ms"; position: absolute; left: 1%; top: 3%;
  padding: 8px 13px; border-radius: 12px; background: rgba(255,255,255,.96);
  color: var(--pri-deep); font-size: 12px; font-weight: 800; rotate: -2deg;
  box-shadow: 0 12px 26px rgba(10,34,51,.18);
}
.hv-signal .hero-glow { width: 70%; opacity: .6; background: radial-gradient(circle at 50% 46%, rgba(22,184,232,.30), rgba(19,194,150,.14) 58%, transparent 76%); }
.hv-signal .stage-phone {
  width: min(196px, 48%); justify-self: center; align-self: start; margin-top: 52px;
  padding: 7px; border-radius: 26px; background: #061826;
  border-color: rgba(255,255,255,.12); rotate: 1.5deg; animation: none;
  box-shadow: 0 26px 52px rgba(3,15,24,.4);
}
.hv-signal .stage-phone img { border-radius: 20px; }
.hv-signal .hero-badge {
  left: 1%; right: auto; top: auto; bottom: 15%; width: 84px; height: 84px;
  border-radius: 50%; background: var(--accent); rotate: -4deg;
  box-shadow: 0 14px 30px rgba(19,194,150,.34);
}
.hv-signal .hero-badge strong { color: #043027; font-size: 24px; }
.hv-signal .hero-badge span { color: rgba(4,48,39,.72); }
.hv-signal .hero-strip {
  left: 5%; right: 4%; bottom: 2.5%; gap: 6px; justify-content: center;
  padding: 8px 10px; border-radius: 14px;
  background: rgba(6,24,38,.72); border: 1px solid rgba(22,184,232,.28);
  backdrop-filter: blur(8px); box-shadow: none;
}
.hv-signal .hero-strip span { background: rgba(255,255,255,.08); color: #d8f3fb; padding: 4px 9px; }
.hv-signal .hero-strip span:first-child { background: var(--pri); color: #04303e; }
.fv-rows .feature { border-left: 3px solid var(--soft); padding-left: 16px; }
.sv-frames .showcase { background: #e9f6fb; }

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