:root {
  --ink: #101a24;
  --text: #384754;
  --mute: #72818e;
  --line: #dfe7ee;
  --paper: #f5f8fa;
  --white: #ffffff;
  --pri: #0f8a7a;
  --pri-deep: #0a6b5f;
  --accent: #ffb347;
  --soft: #e3f4f1;
  --soft-2: #fff3e0;
}

/* 资源架：右侧文案 + 左侧斜置资源卡 + 竖排标签 */
.hv-shelf .hero { padding: 46px 0 38px; }
.hv-shelf .hero-grid { grid-template-columns: 1.02fr 0.98fr; gap: 40px; }
.hv-shelf .hero-copy { order: 2; }
.hv-shelf .hero-visual { order: 1; min-height: 470px; align-content: center; }
.hv-shelf .hero::before { right: auto; left: -8%; top: -14%; width: 58%; height: 122%;
  background: radial-gradient(circle at 52% 42%, rgba(15,138,122,.16), rgba(255,179,71,.10) 52%, transparent 72%); }
.hv-shelf .hero-visual::before {
  content: ""; position: absolute; inset: 4% 1% 6% 3%; border-radius: 28px;
  background: linear-gradient(160deg, #ffffff, #eaf2f4 66%);
  border: 1px solid var(--line); rotate: 1.6deg;
  box-shadow: 0 24px 54px rgba(16,26,36,.10);
}
.hv-shelf .hero-visual::after {
  content: "已导入 42 套 · 缓存 1.2 GB"; position: absolute; left: 7%; top: 8%;
  padding: 7px 13px; border-radius: 999px; background: var(--white);
  border: 1px solid var(--line); color: var(--pri-deep);
  font-size: 11px; font-weight: 800; box-shadow: 0 10px 22px rgba(16,26,36,.08);
}
.hv-shelf .hero-glow { width: 70%; opacity: .55; }
.hv-shelf .stage-phone {
  width: min(392px, 72%); justify-self: start; align-self: center; margin-left: 8%;
  padding: 6px; border-radius: 18px; background: #0e1118;
  border-color: rgba(16,26,36,.16); rotate: -1.2deg; animation: none;
  box-shadow: 0 20px 42px rgba(16,26,36,.22);
}
.hv-shelf .stage-phone img { border-radius: 12px; }
.hv-shelf .hero-badge {
  left: auto; right: 1%; top: 4%; width: 86px; height: 86px; border-radius: 20px;
  background: var(--pri); rotate: 2deg;
  box-shadow: 0 14px 30px rgba(15,138,122,.30);
}
.hv-shelf .hero-badge strong { color: #fff; font-size: 26px; }
.hv-shelf .hero-badge span { color: rgba(255,255,255,.78); font-size: 10px; }
.hv-shelf .hero-strip {
  left: 8%; right: 8%; bottom: 6.5%; justify-content: center; gap: 6px;
  background: var(--white); border-color: var(--line); box-shadow: 0 10px 22px rgba(16,26,36,.07);
}
.sv-big .showcase { background: #f0f5f6; }

@media (max-width: 640px) {
  .hv-shelf .hero-grid { grid-template-columns: 1fr; gap: 16px; }
  .hv-shelf .hero-copy { order: 1; }
  .hv-shelf .hero-visual { order: 2; min-height: 396px; align-content: start; }
  .hv-shelf .hero-visual::before { inset: 3% 0 4% 0; border-radius: 20px; rotate: 0deg; }
  .hv-shelf .hero-visual::after { left: 12px; top: 10px; font-size: 10px; padding: 6px 10px; }
  .hv-shelf .stage-phone { width: 90%; margin: 44px auto 0; }
  .hv-shelf .hero-badge { display: grid; left: auto; right: 10px; top: auto; bottom: 16%; width: 64px; height: 64px; border-radius: 15px; }
  .hv-shelf .hero-badge strong { font-size: 20px; }
  .hv-shelf .hero-strip { left: 12px; right: 12px; bottom: 10px; flex-wrap: nowrap; gap: 4px; padding: 6px 8px; }
  .hv-shelf .hero-strip span { padding: 3px 7px; font-size: 10px; }
}