:root {
  --ink: #0f1c2e;
  --text: #33445c;
  --mute: #74849a;
  --line: #dfe9f5;
  --paper: #f6faff;
  --white: #ffffff;
  --pri: #2f8ff5;
  --pri-deep: #1668c4;
  --accent: #ffb02e;
  --soft: #e7f2ff;
  --soft-2: #fff3dc;
}

/* 客户端窗口式英雄区 */
.hv-browser .hero { padding: 40px 0 46px; }
.hv-browser .hero::before { right: -8%; width: 50%; }
.hv-browser .hero-grid { grid-template-columns: .94fr 1.06fr; gap: 46px; }
.hv-browser .hero-visual { min-height: 540px; align-content: start; padding-top: 96px; }
.hv-browser .hero-glow { width: 88%; opacity: .72; }
.hv-browser .stage-phone {
  width: min(560px, 100%); padding: 0; animation: none; overflow: hidden;
  background: var(--white); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 26px 60px rgba(20,30,60,.16);
}
.hv-browser .stage-phone::before {
  content: "小熊猫辅助器 · 客户端"; display: block; padding: 10px 14px;
  border-bottom: 1px solid var(--line); background: var(--soft);
  color: var(--mute); font-size: 11px; letter-spacing: .06em; text-align: center;
}
.hv-browser .stage-phone img { border-radius: 0; }
.hv-browser .hero-badge { left: 0; right: auto; top: 0; width: 90px; height: 90px; border-radius: 18px; rotate: -6deg; }
.hv-browser .hero-badge strong { font-size: 27px; }
.hv-browser .hero-strip { left: 0; right: auto; bottom: 0; }

/* 特色区细线双列 */
.fv-lines .feature:nth-child(1) { border-top: 2px solid var(--pri); }
.fv-lines .feature em { color: var(--pri); }

/* 界面展示：三张平铺 */
.sv-strip .shot-rail { grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.sv-strip .shot { border: 1px solid var(--line); border-radius: 12px; background: var(--white); box-shadow: none; transform: none; }
.sv-strip .shot figcaption { border-top: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--pri-deep); font-size: 12px; text-align: center; }
.sv-strip .shot img { background: var(--soft); }

@media (max-width: 980px) {
  .hv-browser .hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .hv-browser .hero-visual { padding-top: 84px; min-height: 470px; }
  .hv-browser .hero-badge { top: 0; }
  .sv-strip .shot-rail { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hv-browser .hero-visual { display: block; padding-top: 22px; min-height: 0; padding-bottom: 0; }
  .hv-browser .stage-phone { margin-inline: auto; }
  .hv-browser .stage-phone::before { padding: 8px 12px; font-size: 10px; }
  .hv-browser .hero-strip { position: static; margin: 14px 0 0; flex-wrap: wrap; }
}