/* ============================================================
   fangzhi.css · 纺织服装行业网站建设
   视觉语言：Bento 不对称栅格 + 大圆角 + 杂志图文
   点缀色：玫红 #DB2777
   ============================================================ */

.banner-fangzhi{background-image:url('../images/banner-service.jpg')}

/* ---------- Bento 不对称栅格 ---------- */
.fz-bento{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.fz-bento-main{
  grid-column:1 / 2;border-radius:24px;overflow:hidden;position:relative;min-height:440px;
  box-shadow:var(--shadow);
}
.fz-bento-main img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.fz-bento-ov{
  position:absolute;left:0;right:0;bottom:0;padding:28px;z-index:2;
  background:linear-gradient(to top,rgba(15,31,61,.9),rgba(15,31,61,.25) 75%,transparent);
}
.fz-bento-ov h3{color:#fff;font-size:21px;margin-bottom:8px}
.fz-bento-ov p{color:#D6E2F6;font-size:14.5px}
.fz-bento-cell{
  background:#FDF2F8;border:1px solid #FBCFE8;border-radius:24px;padding:34px 30px;
  display:flex;flex-direction:column;justify-content:center;gap:8px;transition:all var(--trans);
}
.fz-bento-cell:hover{transform:translateY(-5px);box-shadow:0 14px 34px rgba(219,39,119,.14)}
.fz-bento-num{font-size:clamp(30px,3vw,40px);font-weight:800;color:#DB2777;line-height:1.1}
.fz-bento-cell span{color:var(--c-text-2);font-size:14.5px}
.fz-bento-wide{
  grid-column:2 / 3;border-radius:24px;padding:34px 30px;
  background:var(--c-primary);color:#fff;
}
.fz-bento-wide h3{color:#fff;font-size:20px;margin-bottom:10px}
.fz-bento-wide p{color:#C9DAF5;font-size:14.5px;line-height:1.8}

/* ---------- 横向步骤 ---------- */
.fz-stepsec{background:var(--c-ice-2)}
.fz-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:fz}
.fz-step{
  background:#fff;border-radius:18px;padding:30px 26px;position:relative;
  border:1px solid var(--c-line);transition:all var(--trans);
}
.fz-step::after{
  content:"";position:absolute;left:26px;right:26px;bottom:0;height:3px;border-radius:3px;
  background:linear-gradient(90deg,#DB2777,#F472B6);transform:scaleX(0);transform-origin:left;
  transition:transform var(--trans);
}
.fz-step:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.fz-step:hover::after{transform:scaleX(1)}
.fz-step-no{
  display:inline-flex;width:44px;height:44px;border-radius:50%;align-items:center;justify-content:center;
  background:#FDF2F8;color:#DB2777;font-weight:800;font-size:17px;margin-bottom:16px;
}
.fz-step h3{font-size:18px;margin-bottom:10px}
.fz-step p{color:var(--c-text-2);font-size:14px;line-height:1.7}

/* ---------- 视觉建议 ---------- */
.fz-visual-wrap{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center}
.fz-visual-media{position:relative}
.fz-visual-media img{border-radius:24px;box-shadow:var(--shadow)}
.fz-visual-badge{
  position:absolute;right:-18px;bottom:-26px;background:#fff;border-radius:16px;
  box-shadow:var(--shadow-lg);padding:20px 24px;max-width:280px;
  border-left:4px solid #DB2777;
}
.fz-visual-badge b{display:block;color:var(--c-primary);font-size:17px;margin-bottom:6px}
.fz-visual-badge span{color:var(--c-text-2);font-size:13.5px;line-height:1.6}
.fz-visual-text h2{font-size:clamp(24px,2.8vw,34px);margin-bottom:18px;line-height:1.35}
.fz-visual-text p{color:var(--c-text-2);margin-bottom:14px;font-size:15.5px}
.fz-points{margin:18px 0 26px;display:grid;gap:10px}
.fz-points li{display:flex;align-items:flex-start;gap:10px;font-size:15px;color:var(--c-text)}
.fz-points svg{width:20px;height:20px;fill:#DB2777;flex-shrink:0;margin-top:3px}

/* ---------- 案例 ---------- */
.fz-casesec{background:var(--c-ice-2)}
.fz-cases{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.fz-case{
  background:#fff;border-radius:24px;overflow:hidden;box-shadow:var(--shadow);
  transition:all var(--trans);display:block;
}
.fz-case:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.fz-case img{width:100%}
.fz-case-body{padding:24px 26px 28px}
.fz-case-tag{
  display:inline-block;font-size:12.5px;color:#DB2777;background:#FDF2F8;
  padding:3px 12px;border-radius:999px;margin-bottom:10px;
}
.fz-case-body h3{font-size:19px;margin-bottom:8px}
.fz-case-body p{color:var(--c-text-2);font-size:14px;line-height:1.7}

/* ---------- 外贸 CTA ---------- */
.fz-trade{
  background:linear-gradient(120deg,#9D174D 0%,#DB2777 100%);border-radius:24px;
  padding:48px 52px;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;
}
.fz-trade h3{color:#fff;font-size:clamp(21px,2.6vw,29px);margin-bottom:10px}
.fz-trade p{color:#FBCFE8;max-width:620px;font-size:15px}
.fz-trade-actions{display:flex;gap:14px;flex-wrap:wrap}
.fz-trade .btn-line{border-color:#fff;color:#fff}
.fz-trade .btn-line:hover{background:#fff;color:#DB2777}

/* ---------- FAQ 微调 ---------- */
.fz-faq-item summary i{border-color:#DB2777}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .fz-bento{grid-template-columns:1fr}
  .fz-bento-main{min-height:320px}
  .fz-bento-wide{grid-column:auto}
  .fz-steps{grid-template-columns:1fr 1fr}
  .fz-visual-wrap{grid-template-columns:1fr;gap:44px}
  .fz-visual-badge{right:12px;bottom:12px;position:relative;margin-top:-40px}
}
@media (max-width:640px){
  .fz-steps{grid-template-columns:1fr}
  .fz-cases{grid-template-columns:1fr}
  .fz-trade{padding:34px 26px}
}