/* ============================================================
   dianshang-jianzhan.css 电商网站建设
   Hero 变体：H5 卡片飘浮（中心文案 + 四周悬浮小卡）
   ============================================================ */

/* ---------- H5 飘浮 Hero ---------- */
.ds-hero{position:relative;overflow:hidden;padding:80px 0 100px;background:var(--cream)}
.ds-h-xline{top:50%;opacity:.3}
.ds-h-vline{left:50%;top:10%;bottom:14%;opacity:.3}
.ds-h-in{position:relative;max-width:860px;text-align:center}
.ds-h-center h1{margin:18px 0 16px;font-size:clamp(32px,4.4vw,52px)}
.ds-h-center h1 em{font-style:normal;color:var(--blue-ink)}
.ds-h-center>p{color:var(--muted);max-width:640px;margin:0 auto}
.ds-h-cta{display:flex;justify-content:center;gap:14px;margin-top:28px;flex-wrap:wrap}
.ds-float-card{
  position:absolute;background:#fff;border:2px solid var(--blue);border-radius:var(--r-md);
  padding:14px 18px;box-shadow:var(--shadow-sm);text-align:left;
}
.ds-float-card b{display:block;font-size:15px}
.ds-float-card span{font-size:12.5px;color:var(--muted)}
.ds-float-1{left:-4%;top:22%;transform:rotate(-3deg)}
.ds-float-2{right:-6%;top:30%;transform:rotate(2deg);border-color:var(--green-deep)}
.ds-float-3{left:12%;bottom:6%;transform:rotate(-2deg);border-color:var(--yellow-deep)}
@media (max-width:960px){.ds-float-card{position:static;margin:10px auto;max-width:320px}}

/* ---------- 高低错落悬浮卡 ---------- */
.ds-value-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.ds-vcard{
  background:#fff;border:2px solid var(--line);border-radius:var(--r-lg);
  padding:30px;box-shadow:var(--shadow-sm);transition:transform .3s ease;
}
.ds-vcard-up{transform:translateY(28px)}
.ds-vcard:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.ds-vcard-up:hover{transform:translateY(22px)}
.ds-vcard h3{margin-bottom:10px;padding-left:16px;border-left:4px solid var(--blue)}
.ds-vcard:nth-child(even) h3{border-left-color:var(--green-deep)}
.ds-vcard p{color:var(--muted);font-size:15px}

/* ---------- 大编号横排卡 ---------- */
.ds-fit{background:var(--bg);overflow:hidden}
.ds-f-xline{bottom:20%;opacity:.3}
.ds-fit-row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ds-fit-item{
  background:#fff;border:2px solid var(--line);border-radius:var(--r-lg);padding:28px;
  box-shadow:var(--shadow-sm);
}
.ds-fit-item b{
  display:block;font-size:40px;font-weight:800;color:transparent;
  -webkit-text-stroke:2px var(--blue-deep);line-height:1;margin-bottom:12px;
}
.ds-fit-item h3{margin-bottom:8px}
.ds-fit-item p{color:var(--muted);font-size:14.5px}

/* ---------- 案例 2x3 网格 ---------- */
.ds-case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ds-ccard{
  display:block;background:#fff;border:2px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .3s ease;
}
.ds-ccard:hover{transform:translateY(-5px)}
.ds-ccard img{aspect-ratio:16/10;width:100%;object-fit:cover}
.ds-ccard b{display:block;padding:14px 16px;font-size:15px}
.ds-case-more{text-align:center;margin-top:24px;color:var(--muted)}
.ds-case-more a{font-weight:700;margin:0 8px}

/* ---------- 与淘宝对照 ---------- */
.ds-vs{background:#fff}
.ds-vs-in{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}
.ds-vs-text .sec-title{margin-bottom:14px}
.ds-vs-text p{color:var(--muted);margin-bottom:20px}

/* ---------- FAQ ---------- */
.ds-faq-wrap{max-width:840px}
.ds-faq-item{
  background:#fff;border:2px solid var(--line);border-radius:var(--r-md);
  padding:0 22px;margin-bottom:14px;border-left:6px solid var(--blue);
}
.ds-faq-item:nth-child(even){border-left-color:var(--green-deep)}
.ds-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}
.ds-faq-item summary::-webkit-details-marker{display:none}
.ds-faq-item summary::after{content:"+";font-size:22px;color:var(--blue-deep);flex:none}
.ds-faq-item[open] summary::after{transform:rotate(45deg)}
.ds-faq-item p{padding:0 0 16px;color:var(--muted);font-size:14.5px}

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

@media (max-width:960px){
  .ds-value-grid,.ds-fit-row,.ds-case-grid,.ds-vs-in{grid-template-columns:1fr}
  .ds-vcard-up{transform:none}
}