:root {
  --ink: #2b1c33;
  --text: #4d3c57;
  --mute: #8b7a96;
  --line: #ece2f1;
  --paper: #fbf7fd;
  --white: #ffffff;
  --pri: #d24b8c;
  --pri-deep: #b03a74;
  --accent: #7a5cf0;
  --soft: #fbe7f1;
  --soft-2: #ece7fe;
}

/* 拼贴式英雄区：左侧双卡叠放 + 右侧主手机 */
.hv-mosaic .hero { padding: 38px 0 46px; background: linear-gradient(180deg, #fdf3f8 0%, #fbf7fd 62%, rgba(251,247,253,0) 100%); }
.hv-mosaic .hero::before { right: -10%; top: -22%; width: 52%; height: 132%; background: radial-gradient(circle at 44% 42%, rgba(210,75,140,.20), rgba(122,92,240,.10) 58%, transparent 74%); }
.hv-mosaic .hero-grid { grid-template-columns: 1.04fr .96fr; gap: 46px; }
.hv-mosaic .hero-visual { min-height: 596px; }
.hv-mosaic .hero-glow { width: 80%; background: radial-gradient(circle at 52% 46%, rgba(210,75,140,.26), rgba(122,92,240,.12) 56%, transparent 74%); }
.hv-mosaic .stage-phone { width: min(232px, 45%); margin-left: auto; margin-right: 2%; rotate: 2.5deg; animation: none; padding: 8px; border-radius: 26px; background: #2b1b30; box-shadow: 0 26px 56px rgba(70,30,70,.30); }
.hv-mosaic .stage-phone img { border-radius: 19px; }
.hv-mosaic .hero-visual::before {
  content: ""; position: absolute; left: 0; top: 13%; z-index: 1; width: 42%; aspect-ratio: 9 / 15;
  border: 6px solid #fff; border-radius: 20px; rotate: -5deg;
  background: url(../images/shot-2.jpg) center / cover no-repeat;
  box-shadow: 0 18px 38px rgba(70,30,70,.18);
}
.hv-mosaic .hero-visual::after {
  content: ""; position: absolute; left: 31%; bottom: 10%; z-index: 1; width: 36%; aspect-ratio: 9 / 15;
  border: 6px solid #fff; border-radius: 20px; rotate: 4deg;
  background: url(../images/shot-3.jpg) center / cover no-repeat;
  box-shadow: 0 18px 38px rgba(70,30,70,.20);
}
.hv-mosaic .hero-badge { left: 0; right: auto; top: 0; width: 92px; height: 92px; border-radius: 24px; rotate: -6deg; background: var(--accent); box-shadow: 0 16px 32px rgba(122,92,240,.30); }
.hv-mosaic .hero-badge strong { font-size: 27px; }
.hv-mosaic .hero-strip { left: 0; bottom: 0; background: rgba(255,255,255,.96); border-color: #f1e3ee; }
.hv-mosaic .hero-strip span:first-child { background: var(--pri); color: #fff; }

/* 特色区索引网格 */
.fv-index .feature em { color: var(--pri); }

/* 界面展示与问答 */
.sv-frames .shot figcaption { background: var(--soft); color: var(--pri-deep); }
.qv-rail .faq-list summary h3 b { background: var(--soft); color: var(--pri-deep); }
.rv-three .review::before { color: var(--soft-2); }

@media (max-width: 980px) {
  .hv-mosaic .hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .hv-mosaic .hero-visual { min-height: 560px; }
  .hv-mosaic .stage-phone { width: min(228px, 52%); }
}
@media (max-width: 640px) {
  .hv-mosaic .hero { padding: 26px 0 28px; }
  .hv-mosaic .hero-visual { min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 6px; }
  .hv-mosaic .hero-glow { width: 68%; }
  .hv-mosaic .stage-phone { width: min(214px, 62%); margin: 0; rotate: 0deg; }
  .hv-mosaic .hero-visual::before { display: none; }
  .hv-mosaic .hero-visual::after { display: none; }
  .hv-mosaic .hero-badge { left: 0; right: auto; top: 0; width: 78px; height: 78px; }
  .hv-mosaic .hero-badge strong { font-size: 23px; }
  .hv-mosaic .hero-strip { position: static; margin: 0; flex-wrap: wrap; justify-content: center; }
}