:root {
  --ink: #1a1b2e;
  --text: #3f4257;
  --mute: #7b7f96;
  --line: #e3e5f2;
  --paper: #f7f7fd;
  --white: #ffffff;
  --pri: #5a6cf5;
  --pri-deep: #3f4fd6;
  --accent: #9b8cff;
  --soft: #eef0ff;
  --soft-2: #f1ecff;
}

/* 浅紫面板式英雄区 + 详情卡竖图 */
.hv-panel .hero { padding: 30px 0 46px; }
.hv-panel .hero::before { display: none; }
.hv-panel .hero-grid {
  grid-template-columns: 1fr .92fr; gap: 40px; align-items: center; padding: 54px 56px;
  background:
    linear-gradient(135deg, rgba(90,108,245,.06), rgba(155,140,255,.02) 60%, rgba(90,108,245,.05)),
    linear-gradient(0deg, #f4f5ff, #f9f8ff);
  border: 1px solid #e2e5fb; border-radius: 30px;
}
.hv-panel .hero-visual { min-height: 560px; }
.hv-panel .hero-glow { width: 88%; background: radial-gradient(circle at 50% 45%, rgba(90,108,245,.26), rgba(155,140,255,.12) 55%, transparent 73%); }
.hv-panel .stage-phone { width: min(240px, 58%); padding: 0; background: transparent; border: 0; border-radius: 18px; overflow: hidden; rotate: 2deg; animation: none; box-shadow: 0 26px 54px rgba(50,50,110,.24); }
.hv-panel .stage-phone img { height: 462px; border-radius: 18px; object-fit: cover; object-position: top center; }
.hv-panel .hero-badge { left: auto; right: 0; top: 2%; width: 100px; height: 100px; border-radius: 20px; rotate: 0deg; background: #5a6cf5; box-shadow: 0 18px 34px rgba(90,108,245,.32); }
.hv-panel .hero-badge strong { font-size: 28px; }
.hv-panel .hero-strip { left: 0; right: auto; bottom: 0; background: rgba(255,255,255,.94); }

/* 特色区便当格 */
.fv-bento .feature:nth-child(1) { background: linear-gradient(150deg, #2b2f66, #1a1b2e); }
.fv-bento .feature:nth-child(1) em { color: #b9adff; }

/* 展示区截图说明条 */
.sv-frames .shot figcaption { color: var(--pri-deep); background: var(--soft); }

@media (max-width: 980px) {
  .hv-panel .hero-grid { grid-template-columns: 1fr; padding: 34px 28px; gap: 26px; }
  .hv-panel .hero-visual { min-height: 540px; }
  .hv-panel .hero-badge { right: 2%; }
}
@media (max-width: 640px) {
  .hv-panel .hero { padding: 18px 0 30px; }
  .hv-panel .hero-grid { padding: 24px 18px; border-radius: 22px; }
  .hv-panel .hero-visual { min-height: 0; padding-bottom: 12px; }
  .hv-panel .stage-phone { width: min(236px, 74%); rotate: 0deg; }
  .hv-panel .stage-phone img { height: 400px; }
  .hv-panel .hero-strip { position: static; margin-top: 14px; }
}