/* =====================================================================
   合作流程 · 页面独立样式 hezuo.css
   模块原创设计：左侧竖线七节点时间轴 / 三模式报价卡（中卡高亮）/ 横向付款节点 / 四宫格保障
   ===================================================================== */

/* ---------- 页面横幅 ---------- */
.banner-value{background-image:url('../images/banner-value.jpg')}

/* ---------- 合作流程竖线时间轴 ---------- */
.flow-sec{background:#fff}
.flow-rail{position:relative;max-width:820px;margin:0 auto;padding-left:46px}
.flow-rail::before{
  content:"";position:absolute;left:15px;top:10px;bottom:10px;width:3px;
  background:linear-gradient(180deg,var(--c-accent),#0EA5E9,#10B981);border-radius:2px;
}
.flow-node{position:relative;padding-bottom:34px}
.flow-node:last-child{padding-bottom:0}
.flow-node::before{
  content:"";position:absolute;left:-46px;top:4px;width:32px;height:32px;border-radius:50%;
  background:#fff;border:4px solid var(--c-accent);box-shadow:0 0 0 5px var(--c-ice);
}
.flow-node:nth-child(even)::before{border-color:#0EA5E9;box-shadow:0 0 0 5px #E3F4FD}
.flow-node h3{font-size:18px;margin-bottom:6px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.flow-node h3 .f-tag{font-size:12px;font-weight:600;color:var(--c-accent);background:var(--c-ice);padding:2px 11px;border-radius:999px}
.flow-node p{color:var(--c-text-2);font-size:14.5px;line-height:1.75;max-width:640px}

/* ---------- 合作模式 ---------- */
.mode-sec{background:var(--c-ice-2)}
.mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:stretch}
.mode-card{
  background:#fff;border-radius:var(--radius-lg);padding:38px 30px 34px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;position:relative;border:1px solid var(--c-line);
}
.mode-card.hot{border:2px solid var(--c-accent);box-shadow:var(--shadow-lg);transform:scale(1.03)}
.mode-badge{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--c-grad);color:#fff;font-size:12.5px;font-weight:600;padding:5px 18px;border-radius:999px;white-space:nowrap;
}
.mode-card h3{font-size:20px;margin-bottom:6px}
.mode-price{font-size:15px;color:var(--c-accent);font-weight:700;margin-bottom:16px}
.mode-price small{display:block;font-size:12px;color:var(--c-muted);font-weight:400;margin-top:4px}
.mode-card ul{display:grid;gap:10px;margin:14px 0 26px}
.mode-card li{display:flex;gap:9px;font-size:14px;color:var(--c-text)}
.mode-card li svg{width:17px;height:17px;fill:#10B981;flex-shrink:0;margin-top:4px}
.mode-card .btn{margin-top:auto;text-align:center}

/* ---------- 付款节点 ---------- */
.pay-sec{background:#fff}
.pay-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-bottom:44px}
.pay-step{position:relative;padding:0 26px;text-align:center}
.pay-step:not(:last-child)::after{
  content:"→";position:absolute;right:-14px;top:50%;transform:translateY(-50%);
  font-size:26px;color:var(--c-accent);font-weight:700;z-index:2;
}
.pay-step b{
  display:inline-flex;width:72px;height:72px;border-radius:50%;background:var(--c-ice);
  align-items:center;justify-content:center;font-size:20px;font-weight:800;color:var(--c-accent);margin-bottom:14px;
}
.pay-step:nth-child(2) b{background:#E3F4FD;color:#0EA5E9}
.pay-step:nth-child(3) b{background:#E5F7F0;color:#10B981}
.pay-step h3{font-size:16.5px;margin-bottom:6px}
.pay-step p{font-size:13.5px;color:var(--c-text-2)}
.pay-notes{
  background:var(--c-ice-2);border-radius:var(--radius-lg);padding:30px 34px;border-left:5px solid var(--c-accent);
}
.pay-notes h3{font-size:17px;margin-bottom:14px}
.pay-notes ul{display:grid;gap:9px}
.pay-notes li{font-size:14px;color:var(--c-text-2);display:flex;gap:9px}
.pay-notes li::before{content:"·";color:var(--c-accent);font-weight:700}

/* ---------- 合作保障 ---------- */
.guard-sec{background:var(--c-dark)}
.guard-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.guard-item{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-lg);padding:28px 24px}
.guard-item svg{width:30px;height:30px;fill:var(--c-accent-2);margin-bottom:14px}
.guard-item h3{color:#fff;font-size:16.5px;margin-bottom:8px}
.guard-item p{color:#B9C9E6;font-size:13.5px;line-height:1.7}

/* ---------- 响应式 ---------- */
@media (max-width:980px){
  .mode-grid{grid-template-columns:1fr;gap:30px}
  .mode-card.hot{transform:none}
  .pay-steps{grid-template-columns:1fr;gap:30px}
  .pay-step:not(:last-child)::after{content:"↓";right:50%;top:auto;bottom:-24px;transform:translateX(50%)}
  .guard-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .guard-grid{grid-template-columns:1fr}
}