:root {
  --ink: #121c1a;
  --text: #33443f;
  --mute: #6b7d77;
  --line: #dce8e3;
  --paper: #f5faf8;
  --white: #ffffff;
  --pri: #1f7a5c;
  --pri-deep: #16624a;
  --accent: #ffb648;
  --soft: #e6f4ee;
  --soft-2: #fff4de;
}

/* 画面框：横向街景卡 + 左上移植版胶囊 + 底部场景条 */
.hv-screen .hero { padding: 46px 0 48px; }
.hv-screen .hero-visual { min-height: 470px; }
.hv-screen .hero-visual::before {
  content: ""; position: absolute; inset: 3% 0 5% 2%; border-radius: 36px;
  background:
    radial-gradient(circle at 74% 28%, rgba(31,122,92,.18), transparent 62%),
    linear-gradient(145deg, #eef8f3, #dcefe6);
  border: 1px solid #d5e9df; rotate: -1deg;
}
.hv-screen .hero-visual::after {
  content: "手机移植版 · 1.8"; position: absolute; left: 5%; top: 5%;
  padding: 8px 13px; border-radius: 999px; background: #12241d; color: #d8f3e6;
  font-size: 12px; font-weight: 800; rotate: -2deg; box-shadow: 0 12px 26px rgba(10,40,32,.18);
}
.hv-screen .hero-glow { width: 70%; opacity: .45; }
.hv-screen .stage-phone {
  width: min(430px, 93%); justify-self: center; align-self: center; margin-top: 0;
  padding: 7px; border-radius: 20px; background: #101a16; border-color: rgba(255,255,255,.14);
  rotate: -1.6deg; animation: none; box-shadow: 0 26px 54px rgba(10,32,26,.35);
}
.hv-screen .stage-phone img { display: block; width: 100%; border-radius: 14px; }
.hv-screen .hero-badge {
  left: auto; right: 2%; top: 2%; width: 76px; height: 76px;
  border-radius: 22px; background: #fff; color: var(--pri-deep);
  rotate: 4deg; box-shadow: 0 14px 30px rgba(10,32,26,.18);
}
.hv-screen .hero-badge strong { font-size: 21px; }
.hv-screen .hero-badge span { color: var(--mute); }
.hv-screen .hero-strip {
  left: 6%; right: auto; bottom: 3%; gap: 6px; padding: 7px 10px; border-radius: 999px;
  background: #fff; border: 1px solid #e2eee9; box-shadow: 0 12px 26px rgba(10,32,26,.12);
}
.hv-screen .hero-strip span:first-child { background: var(--pri); color: #fff; }
.fv-lines .feature em { color: var(--pri); }
.sv-dark .shot { border-radius: 14px; }

@media (max-width: 640px) {
  .hv-screen .hero-grid { grid-template-columns: 1fr; gap: 16px; }
  .hv-screen .hero-visual { min-height: 336px; }
  .hv-screen .hero-visual::before { inset: 4% 0 6% 0; rotate: 0deg; border-radius: 26px; }
  .hv-screen .hero-visual::after { left: 8px; top: 6px; font-size: 10px; padding: 6px 10px; }
  .hv-screen .stage-phone { width: 96%; margin-top: 30px; rotate: 0deg; }
  .hv-screen .hero-strip { left: 8px; right: 8px; bottom: 4px; justify-content: center; padding: 6px 8px; gap: 4px; }
  .hv-screen .hero-strip span { padding: 3px 7px; font-size: 10px; }
}