/* ===== 关于我们页专属样式 pages/about.css（浅色科技商务风 · 对齐 site.css 主题） ===== */
/* 本文件只收「关于我们」页面类型的独创区块；地基类（section、wrap、sec-head、eyebrow、btn、card、 */
/*   stat、ledger、svc-row、term、case、faq-list、cta-banner、inquiry-panel、anchor、id-card、 */
/*   oem-list、process-note、about-grid、data-rv 动效体系）由 site.css 提供，此处不重定义。 */
/* 强调色一律走 var(--accent)/color-mix，随后台注入色自动换肤；命名空间 ab- = about。 */

/* ---- Hero：accent 蓝渐变场（区别于首页深藏青星空），单一墨色系统局部作用域 ---- */
.ab-hero{--h-ink:var(--accent-ink,#fff);--h-ink-soft:color-mix(in srgb,var(--accent-ink,#fff) 86%,transparent);--h-ink-mute:color-mix(in srgb,var(--accent-ink,#fff) 68%,transparent);--h-line:color-mix(in srgb,var(--accent-ink,#fff) 26%,transparent);background:radial-gradient(115% 115% at 84% 8%,color-mix(in srgb,#fff 20%,transparent) 0,transparent 44%),radial-gradient(95% 95% at 4% 98%,color-mix(in srgb,var(--accent) 55%,#04101f) 0,transparent 54%),linear-gradient(135deg,color-mix(in srgb,var(--accent) 80%,#04101f) 0%,var(--accent) 55%,color-mix(in srgb,var(--accent) 86%,#fff) 100%);color:var(--h-ink);overflow:hidden;position:relative}
.ab-hero:before{background-image:repeating-linear-gradient(118deg,color-mix(in srgb,var(--accent-ink,#fff) 9%,transparent) 0 1px,transparent 1px 13px);content:"";-webkit-mask-image:radial-gradient(circle at 76% 16%,#000,transparent 78%);mask-image:radial-gradient(circle at 76% 16%,#000,transparent 78%);inset:0;pointer-events:none;position:absolute}
.ab-hero .wrap{position:relative;z-index:1}
.ab-hero h1,.ab-hero h2,.ab-hero h3{color:var(--h-ink)}
.ab-hero-inner{align-items:center;display:grid;gap:3rem;grid-template-columns:1.12fr .88fr;padding:5rem 0 4.6rem}
.ab-hero-copy .eyebrow{color:var(--h-ink);margin-bottom:1rem;opacity:.9}
.ab-hero-title{font-size:clamp(2rem,4vw,3.05rem);font-weight:800;letter-spacing:-.02em;line-height:1.16;margin:0 0 1.1rem}
.ab-hero-title .accent{color:var(--h-ink);text-shadow:0 2px 26px color-mix(in srgb,#fff 40%,transparent)}
.ab-hero-sub{color:var(--h-ink-soft);font-size:1.05rem;line-height:1.78;margin:0 0 1.7rem;max-width:36rem}
.ab-hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-bottom:1.7rem}
.ab-hero .btn{min-height:46px}
.ab-hero .btn-primary{background:var(--accent-ink,#fff);border-color:transparent;box-shadow:0 12px 30px color-mix(in srgb,#04101f 34%,transparent);color:var(--accent)}
.ab-hero .btn-primary:hover{background:#fff;box-shadow:0 16px 36px color-mix(in srgb,#04101f 40%,transparent);color:var(--accent)}
.ab-hero .btn-ghost{background:color-mix(in srgb,var(--accent-ink,#fff) 10%,transparent);border-color:var(--h-line);color:var(--h-ink)}
.ab-hero .btn-ghost:hover{background:color-mix(in srgb,var(--accent-ink,#fff) 18%,transparent);border-color:var(--h-ink);box-shadow:none;color:var(--h-ink)}
.ab-hero-points{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;list-style:none;margin:0;padding:0}
.ab-hero-points li{align-items:center;color:var(--h-ink-mute);display:flex;font-size:.86rem;gap:.55rem}
.ab-hero-points li:before{background:var(--h-ink);content:"";flex-shrink:0;height:8px;transform:rotate(45deg);width:8px}
.ab-hero-card{box-shadow:0 24px 60px color-mix(in srgb,#04101f 30%,transparent)}

/* ---- 服务流程：STEP 3×2（自有命名空间，独立响应式，不与 site.css process-track 抢栅格） ---- */
.ab-steps{display:grid;gap:1.2rem;grid-template-columns:repeat(3,1fr)}
.ab-step{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:1.8rem 1.6rem;position:relative;transition:border-color .3s ease,transform .3s ease}
.ab-step:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));transform:translateY(-4px)}
.ab-step-no{color:var(--accent);display:block;font-family:var(--font-display);font-size:.8rem;font-weight:800;letter-spacing:.12em;margin-bottom:.7rem}
.ab-step h3{font-size:1.06rem;margin:0 0 .55rem}
.ab-step p{color:var(--muted);font-size:.88rem;line-height:1.7;margin:0}

/* ---- 专属小组：5 张紧凑角色卡 ---- */
.ab-team{display:grid;gap:1.2rem;grid-template-columns:repeat(5,1fr)}
.ab-team-card{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:1.7rem 1.15rem;text-align:center;transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease}
.ab-team-card:hover{border-color:color-mix(in srgb,var(--accent) 42%,var(--line));box-shadow:var(--shadow-md);transform:translateY(-4px)}
.ab-team-ic{align-items:center;background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);border-radius:50%;color:var(--accent);display:flex;height:56px;justify-content:center;margin:0 auto 1rem;width:56px}
.ab-team-role{color:var(--paper);font-family:var(--font-display);font-size:1rem;font-weight:700;margin:0 0 .45rem}
.ab-team-desc{color:var(--muted);font-size:.84rem;line-height:1.62;margin:0}

/* ---- 服务承诺：全幅深色压阵带（accent 深阶，呼应 Hero；毛玻璃卡垫品牌色光晕底） ---- */
.ab-promise{--p-ink:var(--accent-ink,#fff);--p-soft:color-mix(in srgb,var(--accent-ink,#fff) 84%,transparent);--p-mute:color-mix(in srgb,var(--accent-ink,#fff) 66%,transparent);--p-line:color-mix(in srgb,var(--accent-ink,#fff) 22%,transparent);--p-glass:color-mix(in srgb,var(--accent-ink,#fff) 11%,transparent);background:radial-gradient(110% 120% at 88% 4%,color-mix(in srgb,#fff 16%,transparent) 0,transparent 42%),radial-gradient(92% 92% at 2% 98%,color-mix(in srgb,var(--accent) 50%,#04101f) 0,transparent 52%),linear-gradient(135deg,color-mix(in srgb,var(--accent) 76%,#04101f) 0%,color-mix(in srgb,var(--accent) 90%,#04101f) 58%,color-mix(in srgb,var(--accent) 68%,#04101f) 100%);color:var(--p-ink);overflow:hidden;padding:88px 0;position:relative}
.ab-promise:before{background-image:repeating-linear-gradient(118deg,color-mix(in srgb,var(--accent-ink,#fff) 7%,transparent) 0 1px,transparent 1px 14px);content:"";-webkit-mask-image:radial-gradient(circle at 20% 12%,#000,transparent 72%);mask-image:radial-gradient(circle at 20% 12%,#000,transparent 72%);inset:0;pointer-events:none;position:absolute}
.ab-promise .wrap{position:relative;z-index:1}
.ab-promise h2,.ab-promise h3{color:var(--p-ink)}
.ab-promise-head{margin:0 auto 2.8rem;max-width:46rem;text-align:center}
.ab-promise-head .eyebrow{color:var(--p-ink);opacity:.9}
.ab-promise-head .section-lead{color:var(--p-soft)}
.ab-promise-grid{display:grid;gap:1.2rem;grid-template-columns:repeat(4,1fr)}
.ab-promise-item{background:var(--p-glass);border:1px solid var(--p-line);border-radius:var(--radius);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:1.8rem 1.5rem;transition:border-color .3s ease,background .3s ease,transform .3s ease}
.ab-promise-item:hover{background:color-mix(in srgb,var(--accent-ink,#fff) 15%,transparent);border-color:var(--p-ink);transform:translateY(-4px)}
.ab-promise-ic{align-items:center;background:color-mix(in srgb,var(--accent-ink,#fff) 16%,transparent);border:1px solid var(--p-line);border-radius:12px;color:var(--p-ink);display:flex;height:44px;justify-content:center;margin-bottom:1.05rem;width:44px}
.ab-promise-item h3{font-size:1.02rem;line-height:1.4;margin:0 0 .55rem}
.ab-promise-item p{color:var(--p-soft);font-size:.88rem;line-height:1.68;margin:0}

/* ---- 案例缩略：真实案例配图（WebP 降级），object-fit 铺满 + hover 轻微放大 ---- */
.ab-case-img{display:block;height:100%;object-fit:cover;transition:transform .5s ease;width:100%}
.case-card:hover .ab-case-img{transform:scale(1.05)}
.case-body .ab-case-desc{color:var(--muted);font-size:.88rem;line-height:1.62;margin:0}

/* ---- CTA 联系方式行 ---- */
.ab-contact{display:grid;gap:.75rem;margin:1.6rem 0}
.ab-contact-row{align-items:center;color:var(--paper-soft);display:flex;font-size:.94rem;gap:.7rem}
.ab-contact-row b{color:var(--accent);flex-shrink:0;font-size:.7rem}

/* ---- 咨询表单两列布局（site.css 未提供，home.css 仅首页加载，故此处补齐） ---- */
.form-2col{display:grid;gap:1.1rem;grid-template-columns:1fr 1fr}

/* ---- 响应式塌缩 ---- */
@media (max-width:1024px){
  .ab-hero-inner{gap:2.4rem;grid-template-columns:1fr;padding:3.6rem 0 3rem}
  .ab-steps{grid-template-columns:1fr 1fr}
  .ab-team{grid-template-columns:repeat(3,1fr)}
  .ab-promise-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .ab-steps{grid-template-columns:1fr}
  .ab-team{grid-template-columns:1fr 1fr}
  .ab-promise{padding:64px 0}
  .ab-promise-grid{grid-template-columns:1fr}
  .ab-hero-actions .btn{width:100%}
  .form-2col{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .ab-step:hover,.ab-team-card:hover,.ab-promise-item:hover{transform:none}
  .case-card:hover .ab-case-img{transform:none}
}