/* ==========================================================================
   page-waimao.css — 外贸网站建设（指纹 F9 印章矩阵）
   9 宫格印章方块 / 横排胶囊流程 / 深竹 CTA
   ========================================================================== */

/* ===== ① hero ===== */
.wm-hero{position:relative;min-height:520px;display:flex;align-items:center;overflow:hidden;}
.wm-hero-bg{position:absolute;inset:0;}
.wm-hero-bg img{width:100%;height:100%;object-fit:cover;}
.wm-hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(29,52,38,.92) 20%,rgba(29,52,38,.55) 60%,rgba(29,52,38,.25));}
.wm-hero-inner{position:relative;z-index:2;color:var(--moon-100);}
.wm-hero-inner .kicker{color:var(--cinnabar-400);}
.wm-hero-inner .kicker::before{background:var(--cinnabar-400);}
.wm-hero-inner h1{color:var(--moon-100);font-size:clamp(34px,4.6vw,58px);margin-top:16px;}
.wm-hero-inner .lead{color:rgba(247,245,238,.85);max-width:520px;margin-top:16px;}
.wm-hero-cta{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap;}

/* ===== ② 定义与印章矩阵 ===== */
.wm-define{max-width:780px;}
.wm-define .section-desc{margin-top:14px;}
.wm-grid{
  margin-top:48px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}
.wm-seal{
  background:var(--moon-50);border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:30px 24px;text-align:center;position:relative;box-shadow:var(--shadow-soft);
  transition:transform .28s ease,box-shadow .28s ease;
}
.wm-seal::before{
  content:"";position:absolute;inset:8px;border:1.5px solid rgba(192,47,43,.35);
  border-radius:6px;pointer-events:none;
}
.wm-seal:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);}
.wm-seal h3{font-size:17.5px;color:var(--cinnabar-600);}
.wm-seal p{font-size:13.5px;color:var(--ink-500);margin-top:10px;line-height:1.85;}

/* ===== ③ 适合谁 ===== */
.wm-who-bg{background:var(--moon-50);border-block:1px solid var(--line-soft);}
.wm-who-row{margin-top:32px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.wm-who-row > div{padding:20px;border-left:3px solid var(--bamboo-500);}
.wm-who-row strong{font-family:var(--serif);font-size:16px;color:var(--bamboo-700);display:block;}
.wm-who-row p{font-size:13.5px;color:var(--ink-500);margin-top:6px;line-height:1.8;}

/* ===== ④ 胶囊流程（网格对齐，避免 4+1 孤儿） ===== */
.wm-flow{margin-top:40px;display:grid;grid-template-columns:repeat(5,1fr);gap:14px;}
.wm-flow li{
  display:flex;align-items:center;gap:10px;background:var(--moon-50);
  border:1px solid var(--line-soft);border-radius:999px;padding:12px 18px;
  font-size:14px;box-shadow:var(--shadow-soft);white-space:normal;line-height:1.5;
}
.wm-flow li span{
  background:var(--cinnabar-500);color:#fff;font-size:12.5px;padding:3px 12px;
  border-radius:999px;font-family:var(--serif);letter-spacing:.08em;flex-shrink:0;
}

/* ===== ⑤ 交付 ===== */
.wm-deliver-bg{background:var(--bamboo-900);}
.wm-deliver-bg .kicker{color:var(--cinnabar-400);}
.wm-deliver-bg .kicker::before{background:var(--cinnabar-400);}
.wm-deliver-bg .section-title{color:var(--moon-100);}
.wm-deliver{display:grid;grid-template-columns:1fr 1.3fr;gap:36px;align-items:start;}
.wm-deliver li{
  padding:14px 0;border-bottom:1px dashed rgba(247,245,238,.18);
  color:rgba(247,245,238,.85);font-size:15px;
}
.wm-deliver strong{color:var(--moon-100);display:inline-block;min-width:88px;font-family:var(--serif);}

/* ===== ⑥ 案例 ===== */
.wm-cases{margin-top:36px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.wm-case{
  display:block;border-radius:var(--radius);overflow:hidden;background:#fff;
  box-shadow:var(--shadow-soft);transition:transform .28s ease;
}
.wm-case:hover{transform:translateY(-4px);}
.wm-case img{aspect-ratio:16/10;object-fit:cover;width:100%;}
.wm-case h3{font-size:16.5px;padding:16px 18px 0;}
.wm-case p{font-size:13.5px;color:var(--ink-500);padding:6px 18px 18px;}

/* ===== ⑦ 相关服务 ===== */
.wm-relate-bg{background:var(--moon-50);border-top:1px solid var(--line-soft);}
.wm-relate{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center;}
.wm-relate a{
  padding:10px 26px;border:1px solid var(--bamboo-500);border-radius:4px;
  color:var(--bamboo-700);font-size:14.5px;font-family:var(--serif);letter-spacing:.06em;
}
.wm-relate a:hover{background:var(--bamboo-500);color:#fff;}

/* ===== ⑧ FAQ 内联 ===== */
.wm-faq{margin-top:32px;max-width:820px;}
.wm-faq details{
  border:1px solid var(--line-soft);border-radius:var(--radius);background:#fff;
  margin-bottom:12px;overflow:hidden;
}
.wm-faq summary{
  cursor:pointer;list-style:none;padding:18px 24px;
  font-family:var(--serif);font-weight:700;font-size:16.5px;color:var(--ink-900);
  display:flex;justify-content:space-between;align-items:center;
}
.wm-faq summary::-webkit-details-marker{display:none;}
.wm-faq summary::after{content:"展开";font-size:12.5px;color:var(--cinnabar-600);font-family:var(--sans);font-weight:400;letter-spacing:.1em;}
.wm-faq details[open] summary::after{content:"收起";}
.wm-faq details p{padding:0 24px 20px;color:var(--ink-700);font-size:14.5px;line-height:1.9;}

/* ===== ⑨ CTA 深竹 ===== */
.wm-cta{background:linear-gradient(120deg,var(--bamboo-900),var(--bamboo-700));color:var(--moon-100);position:relative;overflow:hidden;}
.wm-cta::before{
  content:"";position:absolute;right:-80px;top:-80px;width:280px;height:280px;
  border:1.5px solid rgba(192,47,43,.35);border-radius:50%;
}
.wm-cta::after{
  content:"";position:absolute;right:-40px;top:-40px;width:200px;height:200px;
  border:1.5px solid rgba(247,245,238,.18);border-radius:50%;
}
.wm-cta-inner{
  position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;
  gap:28px;padding-block:clamp(44px,6vw,72px);
}
.wm-cta .kicker{color:var(--cinnabar-400);}
.wm-cta h2{color:var(--moon-100);font-size:clamp(22px,2.8vw,32px);margin-top:10px;}
.wm-cta p{color:rgba(247,245,238,.7);margin-top:8px;}
.wm-cta-btns{display:flex;gap:14px;flex-shrink:0;flex-wrap:wrap;}

/* ===== 响应式 ===== */
@media (max-width:1080px){
  .wm-grid{grid-template-columns:1fr 1fr;}
  .wm-who-row{grid-template-columns:1fr 1fr;}
  .wm-deliver{grid-template-columns:1fr;}
  .wm-cases{grid-template-columns:1fr 1fr;}
  .wm-cta-inner{flex-direction:column;align-items:flex-start;}
  .wm-flow{grid-template-columns:1fr 1fr;}
}
@media (max-width:680px){
  .wm-grid,.wm-who-row,.wm-cases,.wm-flow{grid-template-columns:1fr;}
}