/* ============================================================
   page-about.css — 关于我们 about.html 独有样式
   签名布局：时间叙事双轨（分屏hero / 数字横卷 / 双时间轴 / 错位文化图 / 资质墙）
   命名空间：body.page-about
   ============================================================ */

/* ---------- 1. 首屏左右分屏 ---------- */
body.page-about .hero-split{
  position:relative;
  background:var(--grad-soft);
  padding:64px 0 80px;
  overflow:hidden;
}
body.page-about .hero-split::before{
  /* 背景装饰细线网格，B端克制质感 */
  content:"";
  position:absolute;inset:0;
  background-image:linear-gradient(var(--c-line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--c-line) 1px,transparent 1px);
  background-size:56px 56px;
  opacity:.35;
  mask-image:radial-gradient(ellipse 90% 80% at 70% 20%,#000 30%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 70% 20%,#000 30%,transparent 75%);
}
body.page-about .hero-split-in{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;
}
body.page-about .hero-media{position:relative}
body.page-about .hero-media img{
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
  width:100%;height:auto;
}
body.page-about .hero-media-badge{
  position:absolute;left:-22px;bottom:-26px;
  background:#fff;border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
  padding:16px 24px;display:flex;flex-direction:column;gap:2px;
  border:1px solid var(--c-line);
}
body.page-about .hero-media-badge strong{
  font-size:26px;font-weight:800;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;
}
body.page-about .hero-media-badge span{font-size:12.5px;color:var(--c-muted)}
body.page-about .hero-eyebrow{
  font-size:13px;font-weight:700;letter-spacing:.18em;color:var(--c-purple-400);margin:16px 0 0;
}
body.page-about .hero-text h1{margin:14px 0 16px;font-size:clamp(26px,3.6vw,40px)}
body.page-about .hero-desc{max-width:560px}
body.page-about .hero-contact-line{
  display:inline-flex;align-items:center;gap:8px;margin-top:22px;
  padding:10px 20px;border-radius:999px;
  background:var(--c-bg-purple);border:1px solid var(--c-purple-200);
  font-weight:700;color:var(--c-ink);font-size:15px;
}
body.page-about .hero-contact-line svg{color:var(--c-purple-400)}
body.page-about .hero-meta{margin-top:24px;display:flex;gap:14px;flex-wrap:wrap}

/* ---------- 2. 数字横卷 ---------- */
body.page-about .stat-card{
  flex:0 0 auto;width:250px;
  background:#fff;border:1px solid var(--c-line);
  border-radius:var(--radius-lg);padding:28px 24px;
  box-shadow:var(--shadow-card);
  transition:transform .35s var(--ease),border-color .35s;
}
body.page-about .stat-card:hover{transform:translateY(-6px);border-color:var(--c-purple-200)}
body.page-about .stat-card strong{
  display:block;font-size:40px;font-weight:800;color:var(--c-ink);line-height:1.1;
}
body.page-about .stat-card strong em{
  font-style:normal;font-size:24px;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;
}
body.page-about .stat-card span{
  display:block;margin:8px 0 10px;font-weight:700;color:var(--c-ink);
  padding-bottom:12px;border-bottom:1px dashed var(--c-line);
}
body.page-about .stat-card p{font-size:13px;color:var(--c-muted);margin:0}

/* ---------- 3. 双时间轴 ---------- */
body.page-about .dual-timeline{
  display:grid;grid-template-columns:1fr 1fr;gap:48px;
}
body.page-about .timeline-col-title{
  display:flex;align-items:center;gap:10px;font-size:18px;margin-bottom:26px;
}
body.page-about .timeline-col-title .dot{width:10px;height:10px;border-radius:50%}
body.page-about .dot-pink{background:var(--c-pink-400)}
body.page-about .dot-purple{background:var(--c-purple-400)}
body.page-about .tl-list{position:relative;padding-left:26px}
body.page-about .tl-list::before{
  content:"";position:absolute;left:5px;top:8px;bottom:8px;width:2px;
  background:linear-gradient(180deg,var(--c-pink-300),var(--c-purple-300));
  border-radius:2px;
}
body.page-about .tl-list li{position:relative;padding-bottom:26px}
body.page-about .tl-list li:last-child{padding-bottom:0}
body.page-about .tl-list li::before{
  content:"";position:absolute;left:-26px;top:6px;width:12px;height:12px;border-radius:50%;
  background:#fff;border:3px solid var(--c-purple-300);
}
body.page-about .tl-list time{
  font-size:13px;font-weight:800;color:var(--c-purple-400);letter-spacing:.08em;
}
body.page-about .tl-list h4{margin:4px 0 6px}
body.page-about .tl-list p{font-size:14px}
body.page-about .tl-list a{color:var(--c-purple-400);font-weight:600;border-bottom:1px dashed var(--c-purple-300)}

/* ---------- 4. 错位团队文化 ---------- */
body.page-about .culture-grid{
  display:grid;grid-template-columns:1fr 1.1fr;gap:44px;align-items:start;
}
body.page-about .culture-img{margin:0}
body.page-about .culture-img img{
  border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);width:100%;height:auto;
}
body.page-about .culture-img figcaption{
  margin-top:10px;font-size:12.5px;color:var(--c-muted);text-align:center;
}
body.page-about .culture-img-b{margin-top:70px} /* 错位效果 */
body.page-about .culture-text h3{margin-bottom:14px}
body.page-about .culture-points{margin-top:22px;display:grid;gap:16px}
body.page-about .culture-points li{
  background:#fff;border:1px solid var(--c-line);border-radius:var(--radius-md);
  padding:16px 20px;box-shadow:var(--shadow-card);
}
body.page-about .culture-points strong{color:var(--c-ink)}
body.page-about .culture-points p{font-size:13.5px;margin-top:4px}

/* ---------- 5. 资质墙 ---------- */
body.page-about .cert-wrap{
  display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:center;
}
body.page-about .cert-main img{
  border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);width:100%;height:auto;
}
body.page-about .cert-list{display:grid;grid-template-columns:1fr 1fr;gap:18px}
body.page-about .cert-list li{
  background:#fff;border:1px solid var(--c-line);border-radius:var(--radius-md);
  padding:20px;box-shadow:var(--shadow-card);
  transition:transform .3s var(--ease);
}
body.page-about .cert-list li:hover{transform:translateY(-4px)}
body.page-about .cert-no{
  display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.1em;
  color:var(--c-purple-400);background:var(--c-purple-100);
  padding:3px 10px;border-radius:999px;margin-bottom:10px;
}
body.page-about .cert-list h4{font-size:15px;margin-bottom:6px}
body.page-about .cert-list p{font-size:12.5px}

/* ---------- 6. 服务承诺 ---------- */
body.page-about .promise-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
}
body.page-about .promise-card{
  position:relative;background:#fff;border:1px solid var(--c-line);
  border-radius:var(--radius-lg);padding:28px 24px;box-shadow:var(--shadow-card);
  transition:transform .35s var(--ease),border-color .35s;
}
body.page-about .promise-card:hover{transform:translateY(-5px);border-color:var(--c-pink-300)}
body.page-about .promise-no{
  font-size:13px;font-weight:800;letter-spacing:.1em;color:var(--c-pink-400);
}
body.page-about .promise-card h4{margin:10px 0 8px;font-size:17px}
body.page-about .promise-card p{font-size:13.5px}
body.page-about .promise-card a{color:var(--c-purple-400);font-weight:600}

/* ---------- 7. 尾屏 CTA ---------- */
body.page-about .cta-band{
  background:var(--grad-dark);
  padding:72px 0;text-align:center;
}
body.page-about .cta-in h2{color:#fff}
body.page-about .cta-in h2 .grad-text{
  background:linear-gradient(120deg,#F2A6CC,#C5AEEF);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
body.page-about .cta-in p{color:#C9BBD3;max-width:640px;margin:16px auto 0}
body.page-about .cta-buttons{margin-top:28px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
body.page-about .cta-buttons .btn-ghost{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
body.page-about .cta-mail{font-size:13.5px}
body.page-about .cta-mail a{color:#F2A6CC}

/* ---------- 8. 响应式 ---------- */
@media (max-width:1100px){
  body.page-about .hero-split-in{grid-template-columns:1fr;gap:44px}
  body.page-about .hero-media-badge{left:16px;bottom:-20px}
  body.page-about .culture-grid{grid-template-columns:1fr}
  body.page-about .culture-img-b{margin-top:0}
  body.page-about .cert-wrap{grid-template-columns:1fr}
  body.page-about .promise-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  body.page-about .dual-timeline{grid-template-columns:1fr;gap:36px}
  body.page-about .stat-card{width:220px;padding:22px 20px}
  body.page-about .stat-card strong{font-size:32px}
}
@media (max-width:480px){
  body.page-about .promise-grid{grid-template-columns:1fr}
  body.page-about .cert-list{grid-template-columns:1fr}
  body.page-about .hero-split{padding:40px 0 56px}
}