/* =========================================================
   dianpu.css · 电商商城网站建设
   布局特征：编号九宫格 + 横向箭头步骤 + 双列事项卡 + 左图右文数据
   ========================================================= */

.banner-service{background-image:url('../images/banner-service.jpg')}
.dp-ice{background:var(--c-ice-2)}

/* ---------- 九宫格 ---------- */
.dp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.dp-item{
  background:#fff;border:1px solid var(--c-line);border-radius:14px;padding:28px 24px;position:relative;
  transition:all var(--trans);
}
.dp-item:hover{border-color:var(--c-accent);box-shadow:var(--shadow);transform:translateY(-4px)}
.dp-no{
  position:absolute;top:18px;right:20px;font-size:30px;font-weight:800;color:var(--c-ice);
  transition:color var(--trans);
}
.dp-item:hover .dp-no{color:var(--c-accent)}
.dp-item h3{font-size:17.5px;margin-bottom:8px}
.dp-item p{font-size:14px;color:var(--c-text-2)}

/* ---------- 横向箭头步骤 ---------- */
.dp-steps{display:flex;align-items:stretch;justify-content:center;gap:14px;flex-wrap:wrap}
.dp-step{
  background:#fff;border-radius:14px;padding:26px 22px;text-align:center;width:200px;box-shadow:var(--shadow);
}
.dp-step-ico{
  width:56px;height:56px;margin:0 auto 14px;border-radius:50%;background:var(--c-grad);
  display:flex;align-items:center;justify-content:center;
}
.dp-step-ico svg{width:26px;height:26px;fill:#fff}
.dp-step h3{font-size:16.5px;margin-bottom:6px}
.dp-step p{font-size:13px;color:var(--c-muted)}
.dp-step-arrow{align-self:center;color:var(--c-accent);font-size:24px;font-weight:700}

/* ---------- 双列事项卡 ---------- */
.dp-pay-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.dp-pay-card{
  background:#fff;border-radius:14px;padding:30px 30px;border-top:4px solid var(--c-accent-2);
  box-shadow:var(--shadow);transition:all var(--trans);
}
.dp-pay-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.dp-pay-card h3{font-size:18px;margin-bottom:10px}
.dp-pay-card p{font-size:14.5px;color:var(--c-text-2);line-height:1.9}

/* ---------- 左图右文 ---------- */
.dp-case-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.dp-case-media img{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
.dp-case-text h2{font-size:clamp(24px,3vw,32px);margin-bottom:18px}
.dp-case-text p{color:var(--c-text-2);margin-bottom:16px}
.dp-case-nums{display:flex;gap:44px;margin:24px 0 28px}
.dp-case-nums .stat-num{color:var(--c-accent)}
.dp-case-nums span{display:block;font-size:13px;color:var(--c-muted);margin-top:6px}

/* ---------- 费用标签卡 ---------- */
.dp-price-tags{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.dp-price-tag{
  background:#fff;border-radius:var(--radius-lg);padding:30px 26px;text-align:center;
  box-shadow:var(--shadow);border:1.5px solid transparent;transition:all var(--trans);
}
.dp-price-tag.hot{border-color:var(--c-accent);box-shadow:var(--shadow-lg);transform:scale(1.03)}
.dp-price-tag b{display:block;font-size:18px;margin-bottom:8px}
.dp-price-tag span{display:block;font-size:24px;font-weight:800;color:var(--c-accent);margin-bottom:10px}
.dp-price-tag p{font-size:13.5px;color:var(--c-muted)}

/* ---------- 互链 ---------- */
.dp-relate-row{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.dp-relate-card{
  background:var(--c-primary);border-radius:14px;padding:26px 28px;display:block;transition:all var(--trans);
}
.dp-relate-card:hover{background:var(--c-accent);transform:translateY(-5px)}
.dp-relate-card h3{color:#fff;font-size:17.5px;margin-bottom:8px}
.dp-relate-card p{font-size:14px;color:#C9DAF5}

.contact-sec{padding-top:0}

/* ---------- 响应式 ---------- */
@media (max-width:1080px){
  .dp-grid{grid-template-columns:1fr 1fr}
  .dp-case-grid{grid-template-columns:1fr;gap:36px}
  .dp-price-tags{grid-template-columns:1fr;max-width:480px;margin:0 auto}
  .dp-price-tag.hot{transform:none}
}
@media (max-width:768px){
  .dp-grid{grid-template-columns:1fr}
  .dp-pay-grid{grid-template-columns:1fr}
  .dp-relate-row{grid-template-columns:1fr}
  .dp-step-arrow{transform:rotate(90deg)}
}