:root {
  --ink: #1a1430;
  --text: #413a5c;
  --mute: #7e7796;
  --line: #e6e1f2;
  --paper: #f8f6fd;
  --white: #ffffff;
  --pri: #7b4dff;
  --pri-deep: #5f36d6;
  --accent: #38c172;
  --soft: #eee8ff;
  --soft-2: #e4f8ec;
}

/* 应用卡：浅紫底卡 + 详情页 + 底部标签栏 */
.hv-card .hero { padding: 46px 0 40px; }
.hv-card .hero-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
.hv-card .hero::before { right: -8%; top: -16%; width: 58%; height: 124%;
  background: radial-gradient(circle at 48% 42%, rgba(123,77,255,.18), rgba(56,193,114,.10) 54%, transparent 74%); }
.hv-card .hero-visual { min-height: 470px; }
.hv-card .hero-visual::before {
  content: ""; position: absolute; inset: 5% 3% 7% 10%; border-radius: 30px;
  background: linear-gradient(152deg, #efe9ff, #ffffff 66%);
  border: 1px solid var(--line); rotate: -3deg;
  box-shadow: 0 24px 54px rgba(26,20,48,.10);
}
.hv-card .hero-visual::after {
  content: "柚子阅读 1.3.7 · 20.2 M"; position: absolute; left: 1%; top: 2%;
  padding: 8px 13px; border-radius: 12px; background: var(--white);
  border: 1px solid var(--line); color: var(--ink);
  font-size: 12px; font-weight: 800; rotate: -2deg;
  box-shadow: 0 12px 26px rgba(26,20,48,.10);
}
.hv-card .hero-glow { width: 72%; opacity: .55; background: radial-gradient(circle at 50% 45%, rgba(123,77,255,.26), rgba(56,193,114,.12) 58%, transparent 74%); }
.hv-card .stage-phone {
  width: min(206px, 50%); justify-self: center; align-self: start; margin-top: 32px;
  padding: 7px; border-radius: 26px; background: #14101f;
  border-color: rgba(20,16,31,.14); rotate: 2deg; animation: none;
  box-shadow: 0 24px 48px rgba(26,20,48,.24);
}
.hv-card .stage-phone img { border-radius: 20px; }
.hv-card .hero-badge {
  left: 2%; right: auto; top: auto; bottom: 16%; width: 86px; height: 86px;
  border-radius: 22px; background: var(--pri); rotate: -4deg;
  box-shadow: 0 14px 30px rgba(123,77,255,.28);
}
.hv-card .hero-badge strong { color: #fff; font-size: 26px; }
.hv-card .hero-badge span { color: rgba(255,255,255,.82); }
.hv-card .hero-strip {
  left: 0; right: 0; bottom: 0; justify-content: space-around; gap: 0;
  padding: 14px 10px; border-radius: 0 0 26px 26px;
  background: rgba(255,255,255,.96); border: 1px solid var(--line); border-bottom: 0;
  box-shadow: none;
}
.hv-card .hero-strip span { background: transparent; color: var(--mute); padding: 4px 10px; }
.hv-card .hero-strip span:first-child { background: var(--soft); color: var(--pri-deep); }
.sv-big .showcase { background: #f4efff; }

@media (max-width: 640px) {
  .hv-card .hero-grid { grid-template-columns: 1fr; gap: 16px; }
  .hv-card .hero-visual { min-height: 428px; }
  .hv-card .hero-visual::before { inset: 3% 0 5% 0; border-radius: 22px; rotate: 0deg; }
  .hv-card .hero-visual::after { left: 10px; top: 10px; font-size: 10px; padding: 6px 10px; }
  .hv-card .stage-phone { width: min(174px, 50%); margin-top: 40px; }
  .hv-card .hero-badge { display: grid; left: 10px; right: auto; top: auto; bottom: 14%; width: 62px; height: 62px; border-radius: 16px; }
  .hv-card .hero-badge strong { font-size: 20px; }
  .hv-card .hero-strip { left: 8px; right: 8px; bottom: 6px; padding: 9px 6px; border-radius: 14px; border-bottom: 1px solid var(--line); }
  .hv-card .hero-strip span { padding: 3px 6px; font-size: 10px; }
}