/* ============================================================
   service-mall.css — 商城电商网站页
   布局特征：斜切分栏 hero / B2B-B2C 对比卡 / 3×3 功能网格 / 纵向时间线
   ============================================================ */

/* ---------- 1. Hero：斜切分栏 ---------- */
.ml-hero{position:relative;min-height:92vh;display:flex;align-items:center;overflow:hidden;padding:150px 0 100px}
.ml-hero-bg{position:absolute;inset:-8% 0 0;clip-path:polygon(0 0,100% 0,100% 100%,38% 100%);background-size:cover;background-position:center;z-index:0}
.ml-hero-veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,20,20,.92) 0%,rgba(20,20,20,.75) 55%,rgba(20,20,20,.28) 100%);z-index:1}
.ml-hero-inner{position:relative;z-index:2}
.ml-crumb{font-size:13px;color:#C9BFAE;margin-bottom:32px;letter-spacing:.04em}
.ml-crumb a{color:#DFC69B}
.ml-crumb a:hover{color:#fff}
.ml-crumb span{margin:0 8px;opacity:.6}
.ml-crumb em{font-style:normal;color:#fff}
.ml-hero-title{color:#fff;font-size:clamp(32px,4.6vw,56px);font-weight:900;line-height:1.22;margin-bottom:22px;max-width:640px}
.ml-gold{background:var(--grad-coffee);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ml-hero-sub{color:#D5CDBE;font-size:16px;line-height:1.9;max-width:520px;margin-bottom:34px}
.ml-hero-cta{display:flex;flex-wrap:wrap;gap:16px}

/* ---------- 2. B2B/B2C 对比卡 ---------- */
.ml-types{display:grid;grid-template-columns:1fr 1fr;gap:30px;max-width:960px;margin:0 auto}
.ml-type{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:38px 34px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.ml-type-top{border-radius:14px;padding:22px 24px;margin:-8px -8px 24px}
.ml-type-b{background:linear-gradient(135deg,#2B2824,#141414)}
.ml-type-a{background:var(--grad-coffee)}
.ml-type-tag{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.2em;padding:5px 14px;border-radius:999px;background:rgba(255,255,255,.16);color:var(--coffee-bright);margin-bottom:12px}
.ml-type-a .ml-type-tag{background:rgba(255,255,255,.28);color:#fff}
.ml-type-top h3{color:#fff;font-size:22px}
.ml-type ul{flex:1;margin-bottom:26px}
.ml-type li{padding:11px 0 11px 30px;position:relative;font-size:15px;color:var(--text);border-bottom:1px dashed var(--line)}
.ml-type li::before{content:"";position:absolute;left:4px;top:19px;width:10px;height:10px;border-radius:50%;background:var(--coffee)}
.ml-type .btn{align-self:flex-start}

/* ---------- 3. 功能模块 3×3 ---------- */
.ml-mods{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ml-mod{background:#fff;border-radius:var(--radius-md);padding:30px 28px;border-top:3px solid transparent;transition:transform .35s,border-color .35s,box-shadow .35s}
.ml-mod:hover{transform:translateY(-6px);border-top-color:var(--coffee);box-shadow:var(--shadow-md)}
.ml-mod h3{font-size:17px;margin-bottom:8px;display:flex;align-items:center;gap:10px}
.ml-mod h3::before{content:"";width:8px;height:8px;background:var(--grad-coffee);border-radius:2px;transform:rotate(45deg)}
.ml-mod p{font-size:13px;color:var(--text-2);line-height:1.8}

/* ---------- 4. 数据条 ---------- */
.ml-stats{background:var(--ink);padding:66px 0}
.ml-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;text-align:center}
.ml-stat b{display:block;font-size:clamp(36px,4.2vw,54px);font-weight:900;color:var(--coffee-bright);line-height:1.1}
.ml-stat span{color:#B7AE9E;font-size:13px;letter-spacing:.06em;margin-top:8px;display:block}

/* ---------- 5. 纵向时间线 ---------- */
.ml-proc{max-width:880px}
.ml-timeline{position:relative;padding-left:40px}
.ml-timeline::before{content:"";position:absolute;left:14px;top:8px;bottom:8px;width:2px;background:linear-gradient(var(--coffee),var(--line))}
.ml-t-item{position:relative;margin-bottom:34px}
.ml-t-item:last-child{margin-bottom:0}
.ml-t-item>b{position:absolute;left:-40px;top:0;width:30px;height:30px;border-radius:50%;background:var(--grad-coffee);color:#fff;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 5px var(--white)}
.ml-t-item h3{font-size:17px;margin-bottom:5px}
.ml-t-item p{font-size:14px;color:var(--text-2);line-height:1.8;max-width:560px}

/* ---------- 6. 安全与支付（深色图文） ---------- */
.ml-sec{display:grid;grid-template-columns:1fr 1.1fr;gap:60px;align-items:center}
.ml-sec-media img{border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}
.ml-sec-text ul{margin-top:26px}
.ml-sec-text li{display:flex;gap:18px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.ml-sec-text li b{color:#fff;font-size:15px;white-space:nowrap;padding-top:2px}
.ml-sec-text li span{color:#B7AE9E;font-size:14px;line-height:1.8}
.ml-sec-text a{color:var(--coffee-bright)}

/* ---------- 7. FAQ ---------- */
.ml-faq-wrap{max-width:860px}
.ml-faq{border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-head{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;text-align:left;font-size:16px;font-weight:700;color:var(--ink);padding:22px 4px;cursor:pointer}
.acc-arrow{width:13px;height:13px;border-right:2px solid var(--coffee-deep);border-bottom:2px solid var(--coffee-deep);transform:rotate(45deg);flex-shrink:0;transition:transform .35s;margin-top:-5px}
.acc-item.open .acc-arrow{transform:rotate(225deg)}
.acc-panel{max-height:0;overflow:hidden;transition:max-height .45s ease}
.acc-panel p{padding:0 4px 22px;color:var(--text-2);font-size:14px;line-height:1.9}
.acc-panel a{color:var(--coffee-deep);font-weight:600}

/* ---------- 8. CTA（深色斜块） ---------- */
.ml-cta{position:relative;padding:120px 0;overflow:hidden;background:var(--grad-ink)}
.ml-cta::before{content:"";position:absolute;top:-60px;right:-60px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(201,168,124,.25),transparent 70%)}
.ml-cta-inner{position:relative;z-index:2;text-align:center}
.ml-cta-title{color:#fff;font-size:clamp(28px,4vw,44px);font-weight:900;margin-bottom:16px}
.ml-cta-sub{color:#B7AE9E;font-size:16px;margin-bottom:36px}
.ml-cta-row{display:flex;justify-content:center;flex-wrap:wrap;gap:16px}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .ml-hero-bg{clip-path:none}
  .ml-hero-veil{background:rgba(20,20,20,.78)}
  .ml-types{grid-template-columns:1fr;max-width:560px}
  .ml-mods{grid-template-columns:repeat(2,1fr)}
  .ml-sec{grid-template-columns:1fr;gap:40px}
  .ml-stats-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .ml-mods{grid-template-columns:1fr}
  .ml-stats-grid{grid-template-columns:repeat(2,1fr);gap:20px}
  .ml-sec-text li{flex-direction:column;gap:4px}
}