/* ============================================================
   about.css · test3 · 仅关于页 about.html
   愿景双卡 / 合作伙伴跑马灯
   ============================================================ */

/* 区块标题居中。about.css 只在关于页加载，所以这条不会影响相机 / 机器人 /
   支持中心——那三页的 .sec-head 仍是左对齐。 */
.sec-head{text-align:center}

/* ---------- 公司介绍：左图右文 ----------
   图片与居中标题的左边缘对齐，文字列略宽于图片列：正文一行约 35 字，
   在舒适行长内。窄屏下自动堆叠为图片在上、文字在下。 */
.about-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:56px;align-items:start}
.intro p{color:var(--ink-2);font-size:15.5px;line-height:1.9;letter-spacing:-.01em;margin:0 0 16px}
.intro p:last-of-type{margin-bottom:0}
/* 核心技术四板块：轻量列表，不抢「技术愿景」四栏的视觉层级 */
.intro .caps{margin:0 0 16px;padding:0;list-style:none;display:grid;gap:8px}
.intro .caps li{position:relative;padding-left:16px;color:var(--ink-2);font-size:15.5px;
 line-height:1.8;letter-spacing:-.01em}
.intro .caps li::before{content:"";position:absolute;left:0;top:.78em;width:6px;height:6px;
 border-radius:50%;background:var(--accent)}
.intro .caps strong{color:var(--ink);font-weight:600}
/* 公司介绍新排版：标题、分节小标题、重点数据和团队名用黑体强调 */
.intro-title{font-size:clamp(21px,2.1vw,28px);font-weight:600;letter-spacing:-.02em;
 line-height:1.35;color:var(--ink);margin:0 0 16px}
.intro-subhead{font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--ink);
 margin:26px 0 12px;line-height:1.5}
.intro p strong{font-weight:600;color:var(--ink)}
.intro-team{margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
.intro-team p{margin-bottom:0}
.intro-quote{margin-top:10px;font-style:italic;color:var(--ink-2)}

/* 图片框。新图源为 3:2，容器保持相同比例，避免裁掉人物和桌面。
   图片用 cover 填满；桌面端粘性跟随右侧长文，窄屏取消吸顶。 */
.about-media{aspect-ratio:3/2;border:1px solid var(--line);border-radius:var(--r);
 overflow:hidden;background:var(--bg-soft);position:sticky;top:calc(var(--nav-h) + 24px)}
.about-media img{display:block;width:100%;height:100%;object-fit:cover}

/* ---------- 技术愿景：通栏四列带序号 ----------
   与公司介绍同处一个白底区块，靠一条细线分隔；单独起 section 会打乱全页
   「白 / 浅蓝」交替的节奏。
   原先两列的左对齐文本块和上面的段落形态太像，读下来是「一段文字又一段
   文字」。改成四列加序号，形态就和段落拉开了，也正好用上通栏宽度。 */
.vision-block{margin-top:88px;padding-top:72px;border-top:1px solid var(--line)}
.vision{counter-reset:v;display:grid;grid-template-columns:repeat(4,1fr);gap:40px;
 margin:0;padding:0;list-style:none}
/* 顶部一条粗线代替卡片外框：有分组感，但不会变成第四种盒子 */
.vision li{counter-increment:v;padding-top:24px;border-top:2px solid var(--accent-soft);
 transition:border-color .28s var(--ease)}
.vision li:hover{border-top-color:var(--accent)}
.vision li::before{content:counter(v,decimal-leading-zero);display:block;
 font-size:26px;line-height:1;letter-spacing:-.02em;color:var(--accent);margin-bottom:16px}
.vision strong{display:block;font-size:16px;letter-spacing:-.02em;line-height:1.5;
 margin-bottom:8px;font-weight:500;color:var(--ink)}
.vision span{display:block;color:var(--ink-2);font-size:13.5px;line-height:1.8}
.cta{margin-top:32px;display:flex;gap:12px;flex-wrap:wrap}

/* ---------- 团队：数字指标带 ----------
   不做成卡片。上下两条细线界定整条，列间用更浅的竖线分隔。 */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);margin:0 0 32px;padding:0;list-style:none;
 border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat-row li{padding:34px 16px;text-align:center}
/* 用 --line 而不是 --line-2：这一块是 soft 蓝底，--line-2(#edf3fc) 压在
   #f1f6fe 上几乎看不见。 */
.stat-row li+li{border-left:1px solid var(--line)}
.stat-n{display:block;font-size:clamp(28px,3.2vw,42px);line-height:1.1;font-weight:400;
 letter-spacing:-.03em;color:var(--ink)}
.stat-l{display:block;margin-top:10px;font-size:13px;letter-spacing:-.01em;color:var(--ink-3)}

/* ---------- 发展历程：竖向时间轴 ----------
   三列栅格：年份 88px / 标记 24px / 正文。标记列宽 24px，圆点与竖线都以
   该列中心 100px 对齐——圆点 10px 置于 95px，竖线 2px 置于 99px。 */
.timeline{margin:0 auto;padding:0;list-style:none;max-width:880px}
.timeline li{position:relative;display:grid;grid-template-columns:88px 24px 1fr;padding-bottom:34px}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:99px;top:14px;bottom:0;width:2px;
 background:var(--line)}
.timeline li:last-child::before{display:none}
.timeline li::after{content:"";position:absolute;left:95px;top:5px;width:10px;height:10px;
 border-radius:50%;background:#fff;border:2px solid var(--accent)}
.tl-year{grid-column:1;text-align:right;padding-right:4px;font-size:14.5px;color:var(--ink-3);
 letter-spacing:-.01em;line-height:1.6}
.tl-body{grid-column:3;padding-left:20px}
.tl-body strong{display:block;font-size:16px;font-weight:500;letter-spacing:-.02em;
 line-height:1.5;color:var(--ink);margin-bottom:5px}
.tl-body span{color:var(--ink-2);font-size:13.5px;line-height:1.8}

/* ---------- 合作伙伴 & 行业客户 跑马灯 ---------- */
.partners{padding:88px 0;background:var(--bg-soft)}
.marquee{overflow:hidden;
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
 mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mtrack{display:flex;width:max-content;animation:mscroll 34s linear infinite}
.mtrack:hover{animation-play-state:paused}
.mgroup{display:flex;gap:16px;padding-right:16px}
@keyframes mscroll{to{transform:translateX(-50%)}}
/* 2 倍图 420×192，宽高比 2.1875。卡片按该比例等比缩小到 166×76：
   原先 96px 高在这一页显得过重，但再往下压（如 64px）logo 里的公司全称
   会看不清——这批图全是白底不透明，白卡也不能去掉，去掉会在浅蓝底上
   留一片白矩形。 */
.plogo{width:166px;height:76px;flex:none;display:flex;align-items:center;justify-content:center;
 background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.plogo img{width:100%;height:100%;object-fit:contain;display:block}

/* ---------- 响应式 ---------- */
@media(max-width:1100px){
  .about-grid{grid-template-columns:1fr;gap:36px}
  .about-media{aspect-ratio:3/2;position:static}
  .vision{grid-template-columns:repeat(2,1fr);gap:36px 40px}
  .partners{padding:80px 0}
}
@media(max-width:768px){
  .vision{grid-template-columns:1fr;gap:28px}
  .vision-block{margin-top:56px;padding-top:48px}
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .stat-row li:nth-child(3){border-left:none}
  .stat-row li:nth-child(n+3){border-top:1px solid var(--line)}
  .timeline li{grid-template-columns:64px 20px 1fr}
  .timeline li::before{left:73px}
  .timeline li::after{left:69px}
  .tl-body{padding-left:14px}
  .partners{padding:60px 0}
}
@media(max-width:760px){
  .plogo{width:131px;height:60px}
}