:root {
  --ink: #12261f;
  --text: #33453f;
  --mute: #6b8079;
  --line: #dfe8e4;
  --paper: #f5faf8;
  --white: #ffffff;
  --pri: #1f7a5e;
  --pri-deep: #15604a;
  --accent: #f0a63c;
  --soft: #e6f4ee;
  --soft-2: #fdf1dd;
}

/* 卡片式英雄区：文案装进白卡，手机斜放，左侧斜纹底 */
.hv-tile .hero { padding: 46px 0 54px; }
.hv-tile .hero::before {
  right: auto; left: -16%; top: -30%; width: 44%; height: 160%;
  background: repeating-linear-gradient(135deg, rgba(31,122,94,.09) 0 10px, transparent 10px 22px);
}
.hv-tile .hero-grid { grid-template-columns: 1.12fr .88fr; gap: 34px; }
.hv-tile .hero-copy {
  padding: 38px 40px 34px; border-radius: 22px; background: var(--white);
  border: 1px solid var(--line); box-shadow: 0 24px 56px rgba(18,40,34,.10);
}
.hv-tile .hero-points { border-top-style: dashed; padding-top: 18px; margin-top: 26px; }
.hv-tile .hero-visual { min-height: 540px; }
.hv-tile .hero-glow { width: 66%; background: radial-gradient(circle at 50% 50%, rgba(31,122,94,.20), rgba(240,166,60,.10) 58%, transparent 72%); }
.hv-tile .stage-phone { width: min(232px, 54%); padding: 8px; border-radius: 26px; background: #ffffff; border: 1px solid var(--line); box-shadow: 0 22px 46px rgba(18,40,34,.20); rotate: 2.6deg; animation: none; }
.hv-tile .stage-phone img { border-radius: 18px; }
.hv-tile .hero-badge { left: 0; right: auto; top: 8%; width: 92px; height: 92px; border-radius: 16px; rotate: -7deg; }
.hv-tile .hero-strip { left: auto; right: 0; bottom: 4%; }
.hv-tile .hero-visual::after { content: ""; position: absolute; left: 6%; bottom: 10%; width: 32%; aspect-ratio: 1; border-radius: 50%; border: 1px dashed rgba(31,122,94,.30); }

/* 展示区：卡片轻微斜贴 */
.sv-tape .shot { border-radius: 6px; rotate: -1.1deg; box-shadow: 0 16px 30px rgba(18,40,34,.14); }
.sv-tape .shot:nth-child(2) { rotate: .9deg; }
.sv-tape .shot:nth-child(3) { rotate: -.5deg; }

.ev-panel .entry-panel { background: linear-gradient(120deg, #e6f4ee, #ffffff 66%); border-color: #d8eae2; }

@media (max-width: 980px) {
  .hv-tile .hero-grid { grid-template-columns: 1fr; gap: 26px; }
  .hv-tile .hero-visual { min-height: 520px; }
}
@media (max-width: 640px) {
  .hv-tile .hero { padding: 28px 0 30px; }
  .hv-tile .hero-copy { padding: 26px 22px 24px; border-radius: 18px; }
  .hv-tile .hero-visual { min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
  .hv-tile .stage-phone { width: min(216px, 62%); rotate: 0deg; }
  .hv-tile .hero-strip { position: static; margin: 0; flex-wrap: wrap; justify-content: center; }
  .hv-tile .hero-visual::after { display: none; }
  .sv-tape .shot, .sv-tape .shot:nth-child(2), .sv-tape .shot:nth-child(3) { rotate: 0deg; }
}

