:root {
  --ink: #1b1710;
  --text: #4a4030;
  --mute: #8a7c62;
  --line: #ece3cd;
  --paper: #fdf8ea;
  --white: #ffffff;
  --pri: #241d12;
  --pri-deep: #12100a;
  --accent: #ffca28;
  --soft: #fbf0cf;
  --soft-2: #fff3c8;
}

/* 黄块底纹：大面积黄色圆角块 + 右下深色标签 + 左上深色方章 + 底部白条 */
.hv-pane .hero-visual { min-height: 548px; }
.hv-pane .hero-visual::before {
  content: ""; position: absolute; inset: 6% 4% 9% 5%;
  border-radius: 26px 26px 96px 26px;
  background: linear-gradient(150deg, #ffe9a3, #ffca28 56%, #f0a500);
  box-shadow: 0 28px 56px rgba(120, 82, 0, .26);
}
.hv-pane .hero-visual::after {
  content: "推荐 · 筛选 · 收藏"; position: absolute; right: 1%; bottom: 13%; z-index: 4;
  padding: 8px 13px; border-radius: 10px; background: #1b1710; color: var(--accent);
  font-size: 12px; font-weight: 800; rotate: -2deg; box-shadow: 0 14px 30px rgba(30, 20, 0, .32);
}
.hv-pane .hero-glow { width: 66%; opacity: .2; }
.hv-pane .stage-phone {
  width: min(282px, 70%); justify-self: center; align-self: center; margin-top: 8px;
  padding: 6px; border-radius: 24px; background: #fff; border-color: #e3d9bf;
  rotate: -2deg; animation: none; box-shadow: 0 24px 50px rgba(90, 62, 0, .3);
}
.hv-pane .stage-phone img { border-radius: 19px; }
.hv-pane .hero-badge {
  left: 2%; right: auto; top: 2%; width: 86px; height: 86px;
  border-radius: 16px; background: #1b1710; color: var(--accent); border: 1px solid #3a2f18;
  rotate: -6deg; box-shadow: 0 16px 32px rgba(30, 20, 0, .3);
}
.hv-pane .hero-badge strong { font-size: 21px; }
.hv-pane .hero-badge span { color: #cbb884; }
.hv-pane .hero-strip {
  left: 8%; right: 8%; bottom: 1%; justify-content: center; gap: 6px; padding: 7px 10px;
  border-radius: 999px; background: rgba(255,255,255,.98); border: 1px solid #e3d9bf;
  box-shadow: 0 12px 26px rgba(90, 62, 0, .2);
}
.hv-pane .hero-strip span:first-child { background: #1b1710; color: var(--accent); }

@media (max-width: 640px) {
  .hv-pane .hero-grid { grid-template-columns: 1fr; gap: 16px; }
  .hv-pane .hero-visual { min-height: 466px; }
  .hv-pane .hero-visual::before { inset: 4% 0 5% 0; border-radius: 22px 22px 64px 22px; }
  .hv-pane .hero-visual::after { right: 0; bottom: 66px; font-size: 10px; padding: 6px 10px; }
  .hv-pane .stage-phone { width: min(190px, 56%); margin-top: 32px; }
  .hv-pane .hero-badge { display: grid; left: 8px; right: auto; top: 10px; width: 56px; height: 56px; border-radius: 12px; }
  .hv-pane .hero-badge strong { font-size: 14px; }
  .hv-pane .hero-strip { left: 8px; right: 8px; bottom: 6px; padding: 6px 8px; gap: 4px; }
  .hv-pane .hero-strip span { padding: 3px 7px; font-size: 10px; }
}