/* =============================================================
   marketing-promotion.css —— 网络营销推广
   多渠道矩阵首屏 + 三渠道对比 + 左右交错落地页 + 深色漏斗
   ============================================================= */

/* 1. 矩阵首屏 */
.mp-hero{
  padding:calc(var(--header-h) + var(--topbar-h) + 60px) 0 80px;
  background:linear-gradient(180deg, var(--paper) 0%, var(--paper-deep) 100%);
}
.mp-hero-kicker{font-size:12.5px;letter-spacing:.34em;color:var(--earth-deep);margin-bottom:22px}
.mp-hero-title{font-size:clamp(28px,4.4vw,50px);line-height:1.32;margin-bottom:22px;max-width:820px}
.mp-hero-em{
  color:var(--earth-deep);
  border-bottom:3px solid var(--earth);
}
.mp-hero-sub{font-size:15.5px;color:var(--ink-soft);line-height:1.95;margin-bottom:28px;max-width:640px}
.mp-hero-actions{margin-bottom:16px}
.mp-hero-contact{font-size:13px;color:var(--ink-faint)}
.mp-hero-contact a{color:var(--ink);border-bottom:1px dashed var(--line-strong)}
.mp-hero-contact a:hover{color:var(--earth-deep)}

.mp-hero-matrix{
  margin-top:50px;display:grid;grid-template-columns:1fr 40px 1.2fr 40px 1fr;
  gap:0;align-items:stretch;background:var(--paper);
  border:1px solid var(--line-strong);box-shadow:var(--shadow);
}
.mp-matrix-item{
  padding:30px 22px;background:var(--paper);
}
.mp-matrix-item h3{font-size:16.5px;margin-bottom:8px}
.mp-matrix-item p{font-size:13px;color:var(--ink-soft);line-height:1.85}
.mp-matrix-item--target{background:rgba(174,135,73,.1)}
.mp-matrix-item--target h3{color:var(--earth-deep)}
.mp-matrix-arrow{
  display:flex;align-items:center;justify-content:center;
  font-size:22px;color:var(--earth);background:var(--paper);
}

/* 2. 三渠道 */
.mp-channel-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}
.mp-channel{
  background:var(--paper);padding:32px 26px;border:1px solid var(--line);
  border-top:3px solid var(--earth);
}
.mp-channel h3{font-size:20px;margin-bottom:4px}
.mp-channel-sub{font-size:12.5px;color:var(--earth-deep);margin-bottom:14px;letter-spacing:.04em}
.mp-channel p{font-size:13.8px;color:var(--ink-soft);line-height:1.9}

/* 3. 做/不做 */
.mp-what-section{background:var(--paper-deep)}
.mp-what-grid{
  display:grid;grid-template-columns:1.3fr 1fr;gap:20px;
}
.mp-what{
  background:var(--paper);padding:30px 26px;
}
.mp-what--do{border-left:4px solid var(--earth)}
.mp-what--dont{border-left:4px solid var(--brown)}
.mp-what h3{font-size:18px;margin-bottom:14px}
.mp-what ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.mp-what li{
  font-size:13.8px;color:var(--ink-soft);line-height:1.85;padding-left:18px;position:relative;
}
.mp-what li::before{
  content:"";position:absolute;left:0;top:11px;
  width:8px;height:2px;background:var(--earth);
}
.mp-what--dont li::before{background:var(--brown)}

/* 4. 落地页结构 */
.mp-landing-wrap{
  display:grid;grid-template-columns:1fr 1.2fr;gap:50px;align-items:center;
}
.mp-landing-copy h2{margin-bottom:18px}
.mp-landing-copy .lead{margin-bottom:22px}
.mp-landing-copy img{width:100%;border-radius:var(--radius);filter:saturate(.9)}
.mp-landing-list{
  list-style:none;display:flex;flex-direction:column;gap:12px;
}
.mp-landing-list li{
  background:var(--paper);padding:16px 20px;border-left:3px solid var(--earth);
  font-size:13.5px;color:var(--ink-soft);line-height:1.85;
}
.mp-landing-list b{display:block;font-size:14.5px;color:var(--ink);margin-bottom:4px;font-family:var(--font-serif)}

/* 5. 漏斗深色 */
.mp-funnel-section{background:var(--dark)}
.mp-funnel-section .section-title{color:#EFE9DC}
.mp-funnel-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:14px;
}
.mp-funnel{
  background:var(--dark-soft);padding:26px 18px;text-align:center;
  border-top:3px solid var(--earth);
}
.mp-funnel b{
  display:block;font-family:var(--font-serif);font-size:22px;
  color:#EFE9DC;margin-bottom:6px;
}
.mp-funnel p{font-size:13.5px;color:#EFE9DC;margin-bottom:8px}
.mp-funnel small{font-size:11.5px;color:#A49C8C;line-height:1.7}

/* 6. 埋点 */
.mp-track-wrap{
  display:grid;grid-template-columns:1.4fr 1fr;gap:50px;align-items:center;
}
.mp-track-wrap .lead{font-size:15px;color:var(--ink-soft);line-height:1.95}
.mp-track-wrap a{color:var(--earth-deep);border-bottom:1px solid var(--line)}
.mp-track-stats{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
}
.mp-track-stats div{
  background:var(--paper);border:1px solid var(--line);
  padding:22px 18px;text-align:center;
}
.mp-track-stats b{
  font-family:var(--font-serif);font-size:22px;color:var(--earth-deep);
  display:block;margin-bottom:4px;
}
.mp-track-stats span{font-size:12.5px;color:var(--ink-faint)}

/* 7. 套餐 */
.mp-plan-section{background:var(--paper-deep)}
.mp-plan-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch;
}
.mp-plan{
  background:var(--paper);padding:32px 26px;border:1px solid var(--line);
}
.mp-plan--recommend{
  border:2px solid var(--earth);box-shadow:var(--shadow);transform:translateY(-6px);
}
.mp-plan h3{font-size:20px;margin-bottom:4px}
.mp-plan-sub{font-size:12.5px;color:var(--ink-faint);margin-bottom:14px}
.mp-plan-price{
  font-family:var(--font-serif);font-size:26px;color:var(--earth-deep);
  padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:18px;
}
.mp-plan ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.mp-plan li{font-size:13.5px;color:var(--ink-soft);line-height:1.8}
.mp-plan li::before{content:"✓";color:var(--earth);margin-right:6px;font-weight:700}

/* 8. CTA */
.mp-cta-section{
  background:
    linear-gradient(135deg, rgba(42,38,32,.93), rgba(58,53,44,.93)),
    url("../images/banner-contact.jpg") center/cover no-repeat;
  color:#EDE7DA;
}
.mp-cta-wrap{
  display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center;
}
.mp-cta-title{font-size:clamp(24px,3.2vw,36px);color:#EFE9DC;line-height:1.45;margin-bottom:14px}
.mp-cta-sub{font-size:14.5px;color:#C9C1B2;margin-bottom:24px}
.mp-cta-contacts{display:flex;gap:12px;flex-wrap:wrap}
.mp-cta-contact{
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.08);border:1px solid rgba(201,193,178,.25);
  padding:11px 16px;border-radius:var(--radius);
}
.mp-cta-contact:hover{background:var(--earth);border-color:var(--earth)}
.mp-cta-contact svg{width:16px;height:16px;fill:var(--earth-light)}
.mp-cta-contact:hover svg{fill:#fff}
.mp-cta-contact span{display:flex;flex-direction:column;font-size:13.5px;color:#EDE7DA}
.mp-cta-contact small{font-size:10.5px;color:#A49C8C;letter-spacing:.18em}
.mp-cta-btn{justify-self:end}

.inline-link{color:var(--earth-deep);border-bottom:1px solid var(--line)}
.inline-link:hover{color:var(--earth)}

@media (max-width:991px){
  .mp-hero-matrix{grid-template-columns:1fr;gap:0}
  .mp-matrix-arrow{padding:8px;transform:rotate(90deg)}
  .mp-channel-grid,.mp-what-grid,.mp-landing-wrap,.mp-track-wrap,.mp-cta-wrap{grid-template-columns:1fr}
  .mp-funnel-grid{grid-template-columns:1fr 1fr}
  .mp-plan-grid{grid-template-columns:1fr}
  .mp-plan--recommend{transform:none}
  .mp-cta-btn{justify-self:stretch;text-align:center}
}
@media (max-width:640px){
  .mp-funnel-grid{grid-template-columns:1fr}
}