/* ============================================================
   danyemian-jianzhan.css 单页营销网站
   Hero 变体：H9 折角背景（右上角折角卡片）
   ============================================================ */

/* ---------- H9 Hero ---------- */
.dm-hero{position:relative;overflow:hidden;padding:70px 0 90px;background:var(--cream)}
.dm-h-vline{left:40%;opacity:.3}
.dm-h-card{
  position:relative;max-width:760px;background:#fff;border:2px solid var(--blue);
  border-radius:var(--r-lg);padding:46px 48px;box-shadow:var(--shadow);
}
/* 右上角折角效果 */
.dm-h-card::after{
  content:"";position:absolute;top:0;right:0;width:90px;height:90px;
  background:linear-gradient(225deg,var(--yellow) 0 50%,transparent 50%);
  border-top-right-radius:var(--r-lg);
}
.dm-h-card h1{margin:14px 0 16px;font-size:clamp(30px,4vw,46px)}
.dm-h-card h1 em{font-style:normal;color:var(--blue-ink)}
.dm-h-card>p{color:var(--muted)}
.dm-h-cta{display:flex;gap:14px;margin-top:26px;flex-wrap:wrap}

/* ---------- 斜角卡 ---------- */
.dm-scene-row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.dm-scard{
  background:#fff;border:2px solid var(--line);border-radius:var(--r-lg);padding:30px 26px;
  box-shadow:var(--shadow-sm);transform:rotate(-1deg);
}
.dm-scard-m{transform:rotate(1deg);border-color:var(--green-deep)}
.dm-scard-y{transform:rotate(-1deg);border-color:var(--yellow-deep)}
.dm-scard h3{margin-bottom:10px}
.dm-scard p{color:var(--muted);font-size:14.5px}

/* ---------- 纵向锚点步骤 ---------- */
.dm-struct{background:var(--bg);overflow:hidden}
.dm-s-xline{bottom:30%;opacity:.3}
.dm-struct-list{max-width:760px}
.dm-srow{
  display:flex;gap:20px;align-items:flex-start;padding:16px 20px;border-radius:var(--r-md);
  background:#fff;border:2px solid var(--line);margin-bottom:12px;box-shadow:var(--shadow-sm);
}
.dm-srow b{
  flex:none;background:var(--blue);color:var(--ink);font-size:14px;padding:6px 14px;border-radius:999px;
}
.dm-srow p{color:var(--muted);font-size:14.5px}

/* ---------- 案例图文 ---------- */
.dm-case{background:#fff}
.dm-case-in{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.dm-case-media .photo{aspect-ratio:4/3}

/* ---------- FAQ ---------- */
.dm-faq-wrap{max-width:840px}
.dm-faq-item{
  background:#fff;border:2px solid var(--line);border-radius:var(--r-md);
  padding:0 22px;margin-bottom:14px;
}
.dm-faq-item summary{cursor:pointer;list-style:none;padding:16px 0;font-weight:700;display:flex;justify-content:space-between;gap:12px;align-items:center}
.dm-faq-item summary::-webkit-details-marker{display:none}
.dm-faq-item summary::after{content:"+";font-size:22px;color:var(--blue-deep);flex:none}
.dm-faq-item[open] summary::after{transform:rotate(45deg)}
.dm-faq-item p{padding:0 0 16px;color:var(--muted);font-size:14.5px}

/* ---------- CTA ---------- */
.dm-cta-band{text-align:center;background:var(--blue-ink);color:#fff;border-radius:var(--r-lg);padding:56px 30px}
.dm-cta-band h2{color:#fff;margin-bottom:14px;font-size:clamp(26px,3.4vw,40px)}
.dm-cta-band p{color:#D7ECF6;max-width:600px;margin:0 auto}
.dm-cta-actions{display:flex;justify-content:center;gap:14px;margin:26px 0 14px;flex-wrap:wrap}
.dm-cta-meta{font-size:14px;color:#B6D6E6}

@media (max-width:960px){
  .dm-scene-row,.dm-case-in{grid-template-columns:1fr}
  .dm-h-card{padding:30px 24px}
}