/* ─────────────────────────────────────────────────────────────
   About 页新版（2026-10-09）—— 1:1 对齐线上 zotourcar.com/zh/about
   色值取自线上编译后 CSS：
   brand-700 #08172C · 渐变基色 #030912 · accent #E85D04/#F07A2A
   surface 50/100/200/500/600/900 = #F4F6F8/#EAEFF3/#D8DEE6/#5C6B7D/#3F4D5E/#0F1620
   标题深蓝 #0B1F3A · shadow-card 0 1px 2px + 0 4px 12px rgba(11,31,58,.04)
   所有规则作用域在 .ab-page 下，避免与全局 main.css/components.css 冲突
   （.sec-title 全局已有定义，此处靠 .ab-page 前缀提权覆盖）
   ───────────────────────────────────────────────────────────── */

.ab-page { background: #fff; }
.ab-page .ab-container {
  max-width: 1280px; margin: 0 auto;
  padding-left: 16px; padding-right: 16px;
}
.ab-page .ab-eyebrow {
  margin: 0 0 12px; color: #e85d04; font-size: 12px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
}
.ab-page .ab-eyebrow--hero { color: #f07a2a; letter-spacing: .22em; }
.ab-page .ab-sec-title {
  margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.025em;
  line-height: 1.33; color: #0b1f3a;
}
.ab-page .ab-sec { padding: 56px 0; }

/* ---------- Hero 横幅 ---------- */
.ab-page .ab-hero {
  position: relative; height: 36vh; min-height: 280px;
  display: flex; align-items: flex-end; overflow: hidden;
}
.ab-page .ab-hero-bg { position: absolute; inset: 0; }
.ab-page .ab-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.ab-page .ab-hero-bg .ov { position: absolute; inset: 0; }
.ab-page .ab-hero-bg .ov-x { background: linear-gradient(to right, rgba(3,9,18,.85), rgba(3,9,18,.5) 50%, rgba(3,9,18,.25)); }
.ab-page .ab-hero-bg .ov-y { background: linear-gradient(to top, rgba(3,9,18,.7), transparent 50%, rgba(3,9,18,.3)); }
.ab-page .ab-hero-inner { position: relative; z-index: 10; width: 100%; padding-bottom: 40px; }
.ab-page .ab-hero-inner h1 {
  margin: 0; color: #fff; font-weight: 700; letter-spacing: -.025em;
  font-size: 30px; line-height: 1.15;
}

/* ---------- 公司简介（移动端图文纵排：文前图后；桌面端图左文右） ---------- */
.ab-page .ab-lead-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
.ab-page .ab-lead-img { order: 2; }
.ab-page .ab-lead-txt { order: 1; }
.ab-page .ab-img-frame {
  aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden;
  background: #eaeff3; border: 1px solid rgba(216,222,230,.8);
  box-shadow: 0 1px 2px rgba(11,31,58,.04), 0 4px 12px rgba(11,31,58,.04);
}
.ab-page .ab-img-frame img { width: 100%; height: 100%; object-fit: cover; }
.ab-page .ab-lead-txt h2 {
  margin: 0 0 24px; font-size: 24px; font-weight: 700; letter-spacing: -.025em;
  line-height: 1.25; color: #0f1620;
}
.ab-page .ab-lead-txt .ab-eyebrow { margin-bottom: 16px; }
.ab-page .ab-lead-ps { display: grid; gap: 16px; }
.ab-page .ab-lead-ps p { margin: 0; color: #3f4d5e; font-size: 14px; line-height: 1.625; }

/* ---------- 数据带 ---------- */
.ab-page .ab-stats { background: #08172c; color: #fff; }
.ab-page .ab-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); padding: 48px 0; }
.ab-page .ab-stat-cell { padding: 8px 16px; text-align: center; }
.ab-page .ab-stat-cell + .ab-stat-cell { border-left: 1px solid rgba(255,255,255,.1); }
.ab-page .ab-stat-v {
  margin: 0 0 4px; font-size: 30px; font-weight: 700;
  letter-spacing: -.025em; font-variant-numeric: tabular-nums;
}
.ab-page .ab-stat-l { margin: 0; color: rgba(255,255,255,.6); font-size: 14px; }

/* ---------- 基地图库 ---------- */
.ab-page .ab-gallery { background: #f4f6f8; border-top: 1px solid #eaeff3; border-bottom: 1px solid #eaeff3; }
.ab-page .ab-sec-head-left { margin-bottom: 40px; }
.ab-page .ab-gallery-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.ab-page .ab-g-big { aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; background: #d8dee6; }
.ab-page .ab-g-side { display: grid; grid-template-columns: 1fr; gap: 16px; }
.ab-page .ab-g-item { aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; background: #d8dee6; }
.ab-page .ab-g-big img, .ab-page .ab-g-item img {
  width: 100%; height: 100%; object-fit: cover; transition: transform .5s;
}
.ab-page .ab-g-big:hover img, .ab-page .ab-g-item:hover img { transform: scale(1.02); }

/* ---------- 价值观 ---------- */
.ab-page .ab-sec-head-center { max-width: 672px; margin: 0 auto 40px; text-align: center; }
.ab-page .ab-sec-head-center--sm { margin-bottom: 40px; }
.ab-page .ab-values-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.ab-page .ab-value-card {
  background: #fff; border-radius: 16px; border: 1px solid rgba(216,222,230,.8);
  padding: 24px; transition: all .3s;
}
.ab-page .ab-value-card:hover {
  border-color: #a8b9cd;
  box-shadow: 0 1px 2px rgba(11,31,58,.04), 0 4px 12px rgba(11,31,58,.04);
}
.ab-page .ab-v-bar { width: 40px; height: 2px; background: #e85d04; margin-bottom: 20px; }
.ab-page .ab-v-num { margin: 0 0 12px; font-size: 12px; font-weight: 700; color: #0b1f3a; letter-spacing: .1em; }
.ab-page .ab-value-card h3 { margin: 0 0 12px; font-size: 18px; font-weight: 700; color: #0f1620; }
.ab-page .ab-v-d { margin: 0; color: #5c6b7d; font-size: 14px; line-height: 1.625; }

/* ---------- 合作与交付瞬间 ---------- */
.ab-page .ab-partners { background: #f4f6f8; border-top: 1px solid #eaeff3; }
.ab-page .ab-partners-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.ab-page .ab-p-cell {
  aspect-ratio: 5 / 3; border-radius: 12px; overflow: hidden; background: #fff;
  border: 1px solid #d8dee6; display: flex; align-items: center; justify-content: center;
  padding: 16px; transition: box-shadow .3s;
}
.ab-page .ab-p-cell:hover { box-shadow: 0 1px 2px rgba(11,31,58,.04), 0 4px 12px rgba(11,31,58,.04); }
.ab-page .ab-p-cell img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ---------- CTA ---------- */
.ab-page .ab-cta { background: #08172c; padding: 56px 0; }
.ab-page .ab-cta-inner { max-width: 768px; margin: 0 auto; padding: 0 16px; text-align: center; }
.ab-page .ab-cta-inner h2 { margin: 0 0 16px; color: #fff; font-size: 20px; font-weight: 700; }
.ab-page .ab-cta-inner p { margin: 0 0 24px; color: rgba(255,255,255,.65); font-size: 14px; line-height: 1.625; }
.ab-page .ab-cta-btn {
  display: inline-block; background: #e85d04; color: #fff; font-weight: 600;
  font-size: 14px; padding: 12px 32px; border-radius: 8px; text-decoration: none;
  transition: background .2s;
}
.ab-page .ab-cta-btn:hover { background: #c44d03; color: #fff; }

/* ---------- 响应式（与线上断点一致 sm640 / md768 / lg1024） ---------- */
@media (min-width: 640px) {
  .ab-page .ab-container { padding-left: 24px; padding-right: 24px; }
  .ab-page .ab-sec { padding: 80px 0; }
  .ab-page .ab-hero { height: 42vh; }
  .ab-page .ab-hero-inner { padding-bottom: 48px; }
  .ab-page .ab-hero-inner h1 { font-size: 36px; }
  .ab-page .ab-lead-txt h2 { font-size: 30px; }
  .ab-page .ab-lead-ps p { font-size: 16px; }
  .ab-page .ab-stats-grid { grid-template-columns: repeat(4, 1fr); padding: 56px 0; }
  .ab-page .ab-stat-cell { padding: 8px 32px; text-align: left; }
  .ab-page .ab-stat-v { font-size: 36px; }
  .ab-page .ab-sec-title { font-size: 30px; line-height: 2rem; }
  .ab-page .ab-sec-head-left { margin-bottom: 48px; }
  .ab-page .ab-gallery-grid, .ab-page .ab-g-side { gap: 20px; }
  .ab-page .ab-sec-head-center { margin-bottom: 56px; }
  .ab-page .ab-sec-head-center--sm { margin-bottom: 48px; }
  .ab-page .ab-values-grid { gap: 24px; }
  .ab-page .ab-value-card { padding: 32px; }
  .ab-page .ab-partners-grid { gap: 20px; }
  .ab-page .ab-cta { padding: 64px 0; }
  .ab-page .ab-cta-inner { padding: 0 24px; }
  .ab-page .ab-cta-inner h2 { font-size: 24px; }
  .ab-page .ab-cta-inner p { font-size: 16px; }
}
@media (min-width: 768px) {
  .ab-page .ab-gallery-grid { grid-template-columns: repeat(12, 1fr); }
  .ab-page .ab-g-big { grid-column: span 7 / span 7; aspect-ratio: auto; min-height: 320px; }
  .ab-page .ab-g-side { grid-column: span 5 / span 5; }
  .ab-page .ab-values-grid { grid-template-columns: repeat(3, 1fr); }
  .ab-page .ab-partners-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .ab-page .ab-container { padding-left: 32px; padding-right: 32px; }
  .ab-page .ab-hero-inner h1 { font-size: 48px; }
  .ab-page .ab-lead-grid { grid-template-columns: repeat(12, 1fr); gap: 56px; }
  .ab-page .ab-lead-img { grid-column: span 5 / span 5; order: 1; }
  .ab-page .ab-lead-txt { grid-column: span 7 / span 7; order: 2; }
  .ab-page .ab-lead-txt h2 { font-size: 36px; }
  .ab-page .ab-stat-v { font-size: 48px; }
  .ab-page .ab-partners-grid { grid-template-columns: repeat(4, 1fr); }
}