/* ============================================================
   mhpn.cn · 关于我们页私有样式（pages-about.css）
   布局骨架：页首横幅 → 简介图文 → 数字横条 → 发展时间轴 →
             服务模式四卡 → 对比表 → 保障说明 → CTA
   ============================================================ */

/* ---------- 页首横幅（窄幅，非全屏） ---------- */
.about-hero{
  position:relative; padding:108px 0 88px; overflow:hidden;
  background:var(--ink); color:var(--paper-3);
}
.about-hero__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.3; }
.about-hero__inner{ position:relative; z-index:2; }
.about-hero__kicker{
  display:inline-flex; align-items:center; gap:12px;
  color:var(--gold); font-size:13px; letter-spacing:.4em; margin-bottom:20px;
}
.about-hero__kicker::before{ content:""; width:34px; height:1px; background:var(--gold); }
.about-hero h1{ font-size:clamp(30px,4.4vw,50px); max-width:12em; }
.about-hero p{ margin-top:18px; max-width:620px; color:rgba(244,238,226,.74); font-size:15.5px; }

/* ---------- 简介：左文右图 ---------- */
.about-intro{ padding:96px 0; }
.intro-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:64px; align-items:center; }
.intro-copy h2{ font-size:clamp(24px,3vw,34px); margin-bottom:22px; }
.intro-copy h2 em{ color:var(--brown-3); font-style:normal; }
.intro-copy p{ font-size:15.5px; color:var(--ink-2); margin-bottom:16px; line-height:2.05; }
.intro-copy ul{ display:grid; gap:12px; margin-top:22px; }
.intro-copy li{ display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:var(--ink); }
.intro-copy li svg{ flex:none; width:19px; height:19px; margin-top:3px; color:var(--brown-3); }
.intro-fig{ position:relative; }
.intro-fig img{ width:100%; border-radius:var(--radius-lg); box-shadow:var(--shadow); }
.intro-fig__seal{
  position:absolute; right:-18px; bottom:-18px;
  width:110px; height:110px; border-radius:50%;
  background:var(--brown); color:var(--paper-3);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:2px;
  box-shadow:var(--shadow);
}
.intro-fig__seal b{ font-family:var(--font-serif); font-size:22px; color:var(--gold); }
.intro-fig__seal span{ font-size:11px; letter-spacing:.22em; }

/* ---------- 数字横条 ---------- */
.about-stats{ background:var(--paper-2); padding:64px 0; }
.stats-bar{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px; }

/* ---------- 发展时间轴 ---------- */
.about-journey{ padding:96px 0; }
.journey-wrap{ max-width:820px; }

/* ---------- 服务模式四卡 ---------- */
.about-mode{ background:var(--ink); padding:104px 0; color:var(--paper-3); }
.about-mode .sec-head__title{ color:var(--paper-3); }
.about-mode .sec-head__desc{ color:rgba(244,238,226,.7); }
.mode-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.mode-card{
  padding:34px 26px; text-align:center;
  background:rgba(244,238,226,.05); border:1px solid rgba(244,238,226,.12);
  border-radius:var(--radius-lg);
  transition:transform var(--transition), background var(--transition);
}
.mode-card:hover{ transform:translateY(-8px); background:rgba(244,238,226,.09); }
.mode-card:nth-child(even){ transform:translateY(20px); }
.mode-card:nth-child(even):hover{ transform:translateY(12px); }
.mode-card__icon{ width:44px; height:44px; margin:0 auto 18px; color:var(--gold); }
.mode-card h3{ font-size:17px; color:var(--paper-3); margin-bottom:10px; }
.mode-card p{ font-size:13.5px; color:rgba(244,238,226,.6); line-height:1.9; }

/* ---------- 对比表 ---------- */
.about-compare{ padding:96px 0; }
.compare-tbl{ overflow-x:auto; }
.compare-tbl .tbl{ min-width:720px; }
.compare-tbl .tbl th{ text-align:center; }
.compare-tbl .tbl td{ text-align:center; }
.compare-tbl .tbl td:first-child{ text-align:left; font-weight:600; }
.compare-tbl .yes{ color:var(--ok); font-size:15px; }
.compare-tbl .no{ color:var(--line); font-size:15px; }

/* ---------- 保障 ---------- */
.about-guarantee{ background:var(--paper-2); padding:88px 0; }
.guarantee-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.guarantee-item{
  display:flex; gap:16px; align-items:flex-start;
  background:var(--paper-3); border:1px solid var(--line-soft);
  border-radius:var(--radius-lg); padding:26px 28px;
}
.guarantee-item svg{ flex:none; width:26px; height:26px; color:var(--brown-3); margin-top:3px; }
.guarantee-item h3{ font-size:16.5px; margin-bottom:6px; }
.guarantee-item p{ font-size:14px; color:var(--ink-2); }

/* ---------- CTA 横条 ---------- */
.about-cta{ background:var(--brown); color:var(--paper-3); }
.about-cta__inner{
  display:flex; align-items:center; justify-content:space-between; gap:30px;
  padding:60px 0; flex-wrap:wrap;
}
.about-cta h2{ color:var(--paper-3); font-size:clamp(22px,2.8vw,32px); margin-bottom:8px; }
.about-cta p{ color:rgba(244,238,226,.8); font-size:15px; }

/* ---------- 响应式 ---------- */
@media (max-width:1100px){
  .intro-grid{ grid-template-columns:1fr; gap:44px; }
  .mode-grid{ grid-template-columns:repeat(2,1fr); }
  .mode-card:nth-child(even){ transform:none; }
  .stats-bar{ grid-template-columns:repeat(2,1fr); }
  .guarantee-grid{ grid-template-columns:1fr; }
}
@media (max-width:720px){
  .mode-grid{ grid-template-columns:1fr; }
  .stats-bar{ grid-template-columns:repeat(2,1fr); gap:22px; }
  .about-hero{ padding:96px 0 64px; }
}

/* ---------- 六步服务流程 ---------- */
.about-flow{ padding:96px 0; background:var(--paper-3); }
.flow-steps{ display:grid; grid-template-columns:repeat(6,1fr); gap:18px; margin-top:52px; position:relative; }
.flow-steps::before{ content:""; position:absolute; top:30px; left:7%; right:7%; height:1px; background:var(--line); }
.flow-step{ position:relative; text-align:center; padding:0 4px; }
.flow-step__num{
  width:60px; height:60px; margin:0 auto 20px; border-radius:50%;
  background:var(--ink); color:var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-serif); font-size:20px; letter-spacing:.06em;
  position:relative; z-index:1; box-shadow:var(--shadow);
}
.flow-step h3{ font-size:15.5px; margin-bottom:8px; }
.flow-step p{ font-size:13px; color:var(--ink-2); line-height:1.85; }
@media (max-width:1100px){
  .flow-steps{ grid-template-columns:repeat(3,1fr); gap:30px 18px; }
  .flow-steps::before{ display:none; }
}
@media (max-width:720px){
  .flow-steps{ grid-template-columns:1fr 1fr; }
}

/* ---------- 服务人群 ---------- */
.about-aud{ padding:96px 0; }
.aud-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:52px; }
.aud-card{
  padding:34px 26px; background:var(--paper-3);
  border:1px solid var(--line-soft); border-radius:var(--radius-lg);
  position:relative; overflow:hidden;
  transition:transform var(--transition), box-shadow var(--transition);
}
.aud-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--brown); opacity:.55; }
.aud-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.aud-card:nth-child(even){ transform:translateY(22px); }
.aud-card:nth-child(even):hover{ transform:translateY(16px); }
.aud-card__tag{ display:inline-block; font-size:12px; letter-spacing:.2em; color:var(--brown-3); margin-bottom:14px; }
.aud-card h3{ font-size:17px; margin-bottom:10px; }
.aud-card p{ font-size:13.5px; color:var(--ink-2); line-height:1.9; }
@media (max-width:1100px){
  .aud-grid{ grid-template-columns:repeat(2,1fr); }
  .aud-card:nth-child(even){ transform:none; }
  .aud-card:nth-child(even):hover{ transform:translateY(-6px); }
}
@media (max-width:720px){ .aud-grid{ grid-template-columns:1fr; } }

/* ---------- 常见问题 ---------- */
.about-faq{ padding:96px 0; background:var(--paper-2); }
.faq-list{ max-width:880px; margin-top:48px; display:grid; gap:14px; }
.faq-item{ background:var(--paper-3); border:1px solid var(--line-soft); border-radius:var(--radius); padding:24px 28px; }
.faq-item h3{ font-size:16px; display:flex; gap:12px; align-items:baseline; }
.faq-item h3::before{
  content:"问"; flex:none; width:26px; height:26px; border-radius:50%;
  background:var(--brown); color:var(--paper-3); font-size:12px;
  display:inline-flex; align-items:center; justify-content:center; transform:translateY(3px);
}
.faq-item p{ margin-top:10px; padding-left:38px; font-size:14.5px; color:var(--ink-2); line-height:1.95; }
.faq-item p::first-letter{ font-weight:700; color:var(--brown-3); }