/* =====================================================================
   网站策划方案 · 页面独立样式 fangan.css
   模块原创设计：左栏阶梯式五步法（斜切侧栏）/ 双栏栏目规划表 / 横向转化漏斗 / 深色免费策划块
   ===================================================================== */

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

/* ---------- 为什么先策划 ---------- */
.whyplan-sec{background:var(--c-ice-2);background-image:radial-gradient(circle at 6% 20%,rgba(37,99,235,.08),transparent 34%)}
.whyplan-wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.whyplan-text h2{font-size:clamp(24px,3vw,34px);margin:12px 0 18px}
.whyplan-text p{color:var(--c-text-2);margin-bottom:16px}
.whyplan-media{position:relative}
.whyplan-media img{border-radius:var(--radius-lg);aspect-ratio:3/2;object-fit:cover;box-shadow:var(--shadow-lg)}
.media-chip{
  position:absolute;right:-18px;bottom:-22px;background:#fff;border-radius:14px;box-shadow:var(--shadow-lg);
  padding:16px 26px;display:flex;align-items:center;gap:12px;
}
.media-chip b{font-size:26px;color:var(--c-accent);font-weight:800;line-height:1}
.media-chip span{font-size:13px;color:var(--c-text-2)}

/* ---------- 五步阶梯 ---------- */
.ladder-sec{background:#fff}
.ladder{display:grid;gap:0;max-width:960px;margin:0 auto;position:relative}
.ladder::before{
  content:"";position:absolute;left:118px;top:20px;bottom:20px;width:2px;
  background:linear-gradient(#2563EB,#7FB0FF,#2563EB);opacity:.35;
}
.ladder-item{display:grid;grid-template-columns:118px 1fr;gap:30px;padding:18px 0;position:relative}
.ladder-side{padding-top:6px}
.ladder-no{
  display:inline-block;font-size:12px;font-weight:800;letter-spacing:1.5px;color:#fff;
  background:var(--c-grad);padding:5px 12px;border-radius:6px;
  clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%);
}
.ladder-side h3{font-size:18px;margin-top:12px;color:var(--c-primary)}
.ladder-card{
  background:var(--c-ice-2);border-radius:14px;padding:22px 26px;
  border-left:4px solid var(--c-accent);transition:transform var(--trans),box-shadow var(--trans),background var(--trans);
}
.ladder-card:hover{transform:translateX(8px);background:#fff;box-shadow:var(--shadow)}
.ladder-card p{font-size:14.5px;color:var(--c-text-2);line-height:1.8;margin-bottom:12px}
.ladder-tags{display:flex;gap:8px;flex-wrap:wrap}
.ladder-tags span{font-size:12.5px;color:var(--c-accent);background:#fff;border:1px solid var(--c-line);border-radius:999px;padding:3px 13px}

/* ---------- 栏目规划示例 ---------- */
.sitemap-sec{background:var(--c-ice-2)}
.sitemap-wrap{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.sm-col{background:#fff;border-radius:var(--radius-lg);padding:30px 30px;box-shadow:var(--shadow)}
.sm-col h3{
  font-size:18px;margin-bottom:20px;padding-bottom:14px;border-bottom:2px solid var(--c-ice);
  display:flex;align-items:center;gap:10px;
}
.sm-col h3::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--c-grad);transform:rotate(45deg)}
.sm-col ul{display:grid;gap:14px}
.sm-col ul li{display:flex;gap:12px;font-size:14px;line-height:1.7}
.sm-col ul li b{flex-shrink:0;color:var(--c-accent);font-weight:700;min-width:74px}
.sm-col ul li span{color:var(--c-text-2)}

/* ---------- 转化路径 ---------- */
.funnel-sec{background:#fff}
.funnel{display:flex;align-items:stretch;gap:0;max-width:1080px;margin:0 auto}
.funnel-step{
  flex:1;background:var(--c-ice-2);border-radius:16px;padding:26px 20px;text-align:center;position:relative;
  transition:transform var(--trans),box-shadow var(--trans);
}
.funnel-step:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.funnel-step.hot{background:var(--c-grad);color:#fff}
.funnel-num{
  width:44px;height:44px;margin:0 auto 14px;border-radius:50%;background:#fff;color:var(--c-accent);
  font-weight:800;font-size:18px;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 14px rgba(37,99,235,.2);
}
.funnel-step h3{font-size:17px;margin-bottom:8px}
.funnel-step.hot h3{color:#fff}
.funnel-step p{font-size:13.5px;color:var(--c-text-2);line-height:1.7}
.funnel-step.hot p{color:#D6E2F6}
.funnel-arrow{display:flex;align-items:center;padding:0 8px;color:var(--c-accent)}
.funnel-arrow svg{width:26px;height:26px;fill:var(--c-accent)}
.funnel-note{text-align:center;color:var(--c-muted);font-size:13.5px;margin-top:26px}

/* ---------- 免费策划 ---------- */
.freeplan-sec{background:var(--c-dark);background-image:radial-gradient(circle at 85% 15%,rgba(37,99,235,.3),transparent 45%)}
.freeplan-box{max-width:860px;margin:0 auto;text-align:center}
.freeplan-box h2{color:#fff;font-size:clamp(24px,3vw,34px);margin-bottom:18px}
.freeplan-box>p{color:#C7D6F2;font-size:15.5px;line-height:1.9;max-width:680px;margin:0 auto 26px}
.freeplan-box ul{display:grid;grid-template-columns:1fr 1fr;gap:12px 30px;max-width:640px;margin:0 auto 32px;text-align:left}
.freeplan-box ul li{display:flex;align-items:center;gap:10px;font-size:14.5px;color:#D6E2F6}
.freeplan-box ul li svg{width:20px;height:20px;fill:#34D399;flex-shrink:0}
.freeplan-box ul li a{color:#7FB0FF;text-decoration:underline}

/* ---------- 响应式 ---------- */
@media (max-width:992px){
  .whyplan-wrap{grid-template-columns:1fr;gap:40px}
  .sitemap-wrap{grid-template-columns:1fr}
  .funnel{flex-direction:column;gap:14px}
  .funnel-arrow{justify-content:center;transform:rotate(90deg);padding:2px 0}
  .ladder::before{display:none}
  .ladder-item{grid-template-columns:1fr;gap:10px}
}
@media (max-width:640px){
  .freeplan-box ul{grid-template-columns:1fr}
  .media-chip{right:10px;bottom:-18px;padding:12px 18px}
}