:root {
  --ink: #0d2418;
  --text: #2f4738;
  --mute: #6b8272;
  --line: #d8e6da;
  --paper: #f5fbf6;
  --white: #ffffff;
  --pri: #136b41;
  --pri-deep: #0b4a2c;
  --accent: #ffca28;
  --soft: #e4f4e9;
  --soft-2: #fff6d8;
}

/* 环形底纹：深绿椭圆底 + 左上黄色胶囊 + 右下圆章 + 底部白条 */
.hv-ring .hero-visual { min-height: 548px; }
.hv-ring .hero-visual::before {
  content: ""; position: absolute; inset: 2% 0 5% 8%;
  border-radius: 48% 44% 46% 52% / 50% 48% 50% 46%;
  background: linear-gradient(150deg, #0b4a2c, #176f45 52%, #2e9a63);
  box-shadow: 0 30px 62px rgba(9, 52, 31, .28); rotate: -3deg;
}
.hv-ring .hero-visual::after {
  content: "局域网 · 秒传"; position: absolute; left: 2%; top: 7%; z-index: 4;
  padding: 9px 14px; border-radius: 999px; background: var(--accent); color: #10261a;
  font-size: 12px; font-weight: 800; rotate: -3deg; box-shadow: 0 14px 30px rgba(9, 52, 31, .24);
}
.hv-ring .hero-glow { width: 64%; opacity: .22; }
.hv-ring .stage-phone {
  width: min(286px, 70%); justify-self: center; align-self: center; margin-top: 4px;
  padding: 7px; border-radius: 24px; background: #fff; border-color: rgba(255,255,255,.5);
  rotate: 2deg; animation: none; box-shadow: 0 24px 52px rgba(6, 40, 24, .38);
}
.hv-ring .stage-phone img { border-radius: 18px; }
.hv-ring .hero-badge {
  left: auto; right: 3%; top: auto; bottom: 10%; width: 88px; height: 88px;
  border-radius: 46% 46% 50% 50%; background: #fff; color: var(--pri-deep);
  border: 1px solid rgba(255,255,255,.6); rotate: 6deg; box-shadow: 0 16px 32px rgba(9, 52, 31, .26);
}
.hv-ring .hero-badge strong { font-size: 21px; }
.hv-ring .hero-badge span { color: var(--mute); }
.hv-ring .hero-strip {
  left: 6%; right: 6%; bottom: 1%; justify-content: center; gap: 6px; padding: 7px 10px;
  border-radius: 999px; background: rgba(255,255,255,.97); border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 12px 26px rgba(9, 52, 31, .18);
}
.hv-ring .hero-strip span:first-child { background: var(--pri); color: #fff; }

@media (max-width: 640px) {
  .hv-ring .hero-grid { grid-template-columns: 1fr; gap: 16px; }
  .hv-ring .hero-visual { min-height: 466px; }
  .hv-ring .hero-visual::before { inset: 2% 0 4% 0; rotate: 0deg; border-radius: 30px; }
  .hv-ring .hero-visual::after { left: 8px; top: 8px; font-size: 10px; padding: 6px 10px; }
  .hv-ring .stage-phone { width: min(192px, 56%); margin-top: 38px; }
  .hv-ring .hero-badge { display: grid; left: auto; right: 8px; bottom: 70px; width: 56px; height: 56px; }
  .hv-ring .hero-badge strong { font-size: 14px; }
  .hv-ring .hero-strip { left: 8px; right: 8px; bottom: 6px; padding: 6px 8px; gap: 4px; }
  .hv-ring .hero-strip span { padding: 3px 7px; font-size: 10px; }
}