/* ============================================================
   page-jiage-diy.css — 定制开发价格
   签名布局：四阶段报价明细卡（横向卷轴）+ 费用构成表
   作用域：body.page-jiage-diy
   ============================================================ */

.diy-hero .hero-hotline{margin-top:18px;font-size:14px;color:var(--c-muted)}

/* ---------- 四阶段横卷卡片 ---------- */
.step-card{flex:0 0 300px;background:#fff;border:1px solid var(--c-line);border-radius:var(--radius-lg);padding:28px 26px;box-shadow:var(--shadow-card);display:flex;flex-direction:column}
.step-num{display:inline-block;font-size:12.5px;font-weight:800;letter-spacing:.12em;color:var(--c-pink-400)}
.step-card h3{margin:8px 0 12px;font-size:20px}
.step-price{display:inline-block;align-self:flex-start;background:var(--c-purple-100);color:var(--c-purple-400);font-weight:700;font-size:13px;padding:5px 14px;border-radius:999px;margin-bottom:16px}
.step-card ul{flex:1;margin-bottom:16px}
.step-card ul li{position:relative;padding-left:20px;margin-bottom:9px;font-size:13.5px;color:var(--c-text)}
.step-card ul li::before{content:"";position:absolute;left:2px;top:9px;width:6px;height:6px;border-radius:50%;background:var(--grad-main)}
.step-out{font-size:13px;color:var(--c-ink);font-weight:600;padding-top:14px;border-top:1px dashed var(--c-line)}

/* ---------- 费用构成表 ---------- */
.bd-wrap{overflow-x:auto;border-radius:var(--radius-md);box-shadow:var(--shadow-card)}
.bd-table{width:100%;border-collapse:collapse;background:#fff;min-width:640px}
.bd-table th,.bd-table td{padding:15px 18px;text-align:left;font-size:14px;border-bottom:1px solid var(--c-line)}
.bd-table thead th{background:var(--c-bg-pink);color:var(--c-ink);font-weight:700}
.bd-table tbody tr:last-child td{border-bottom:0}
.bd-table td:last-child{font-weight:700;color:var(--c-purple-400);white-space:nowrap}
.bd-note{margin-top:18px;font-size:14px;color:var(--c-muted)}
.bd-note a{color:var(--c-purple-400);font-weight:600}
.bd-note a:hover{color:var(--c-pink-400)}

/* ---------- 左图右文 ---------- */
.dv-wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center}
.dv-figure{margin:0}
.dv-figure img{border-radius:var(--radius-lg);box-shadow:var(--shadow-soft)}
.dv-figure figcaption{margin-top:12px;font-size:13px;color:var(--c-muted)}
.dv-text p{margin-bottom:14px}
.dv-text a{color:var(--c-purple-400);font-weight:600}
.dv-text a:hover{color:var(--c-pink-400)}

/* ---------- 流程保障 ---------- */
.gv-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.gv-item{background:#fff;border:1px solid var(--c-line);border-left:4px solid var(--grad-main);border-radius:var(--radius-md);padding:24px 22px;box-shadow:var(--shadow-card)}
.gv-item h3{font-size:18px;margin-bottom:8px}
.gv-item p{font-size:13.5px;color:var(--c-text)}

/* ---------- FAQ ---------- */
.faq-list{max-width:860px;margin:0 auto}
.faq-item{background:#fff;border:1px solid var(--c-line);border-radius:var(--radius-md);margin-bottom:14px;overflow:hidden}
.faq-item[open]{box-shadow:var(--shadow-card)}
.faq-item summary{cursor:pointer;list-style:none;padding:18px 22px;font-weight:700;color:var(--c-ink);font-size:15.5px;position:relative;padding-right:44px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:22px;color:var(--c-purple-400);transition:transform .3s}
.faq-item[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq-item p{padding:0 22px 20px;font-size:14px;color:var(--c-text)}

/* ---------- CTA ---------- */
.cta-sec{background:var(--grad-soft)}
.cta-box{text-align:center;max-width:760px;margin:0 auto;padding:56px 30px;border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow-soft)}
.cta-box h2{margin-bottom:14px}
.cta-note{margin-top:18px;font-size:13.5px;color:var(--c-muted)}

/* ---------- 响应式 ---------- */
@media (max-width:1100px){
  .gv-row{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .dv-wrap{grid-template-columns:1fr;gap:28px}
  .gv-row{grid-template-columns:1fr}
  .step-card{flex:0 0 260px}
}
@media (max-width:360px){
  .step-card{padding:22px 18px}
}