/* ============================================================
   企业概况 · 多幕叙事  (2026-09-29)
   仅 about.html 引用，必须排在 about-refresh.css / about-node-variants.css 之后。

   位置：插在 about-hero 与「能力网络」图之间（用户 0929-1116 指认）。
   （0929-1205：原「01 / 企业概况」标题块与五幕编号行已按反馈删除，故事直接起幕。）
   内容：企业概况正文拆成 5 幕 —— 赛道与坐标 / 技术闭环 / 营销服务 /
        服务行业（六张行业生图拼贴）/ 未来。

   硬规矩（沿用 0929 定稿）：配色只作用于 .about-process，所有规则一律以
   .about-process 打头，不向全站溢出。颜色全部取 about-node-variants.css
   在 .about-process 上定义的那组靛蓝变量（--n1/--n2/--n3/--ink-h/--acc-2…），
   要换色只改那一组，本文件不动。
   ============================================================ */

.about-process .cp-story{margin:0 0 122px}
/* 章节标题块（「01 / 企业概况」+ 公司名 + 简介）与各幕编号行已按 0929-1205 反馈撤掉，
   首幕不再叠加自身 92px 上内边距，避免区块顶部出现双倍空白。 */
.about-process .cp-story > .cp-scene:first-child{padding-top:0}

/* ---------- 幕的骨架：全宽带 + 内部限宽 ---------- */
.about-process .cp-scene{position:relative;padding:92px 0}
.about-process .cp-scene.is-band{background:#fff;border-top:1px solid rgba(var(--n2),.16);border-bottom:1px solid rgba(var(--n2),.16)}
.about-process .cp-scene.is-tint{background:linear-gradient(180deg,#e9eef9,#f4f7fc 68%,#fbfcfe);border-top:1px solid rgba(var(--n2),.16);border-bottom:1px solid rgba(var(--n2),.16)}
.about-process .cp-scene.is-band + .cp-scene,
.about-process .cp-scene.is-tint + .cp-scene{padding-top:96px}

/* ---------- 两栏骨架 ---------- */
.about-process .cp-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(38px,5.6vw,92px);align-items:center}
.about-process .cp-split.is-media-first .cp-figure{grid-column:1;grid-row:1}
.about-process .cp-split.is-media-first .cp-copy{grid-column:2;grid-row:1}
.about-process .cp-split.is-top{align-items:start}

/* ---------- 正文 ---------- */
.about-process .cp-pills,
.about-process .cp-mosaic{list-style:none;margin:0;padding:0}
.about-process .cp-copy h3,
.about-process .cp-industries-head h3,
.about-process .cp-settle h3{font-size:clamp(30px,2.55vw,42px);line-height:1.36;letter-spacing:-.052em;font-weight:600;color:var(--ink-h);margin:0}
.about-process .cp-copy h3 span,
.about-process .cp-industries-head h3 span,
.about-process .cp-settle h3 span{color:var(--acc-2)}
.about-process .cp-lead{font-size:17px;line-height:1.98;color:var(--sat-ink);margin-top:24px;max-width:560px;letter-spacing:.005em}
.about-process .cp-lead strong{font-weight:600;color:var(--ink)}
.about-process .cp-note{font:11px/1.8 Mono,monospace;letter-spacing:.1em;color:rgba(var(--n2),.66);margin-top:34px}

/* ---------- 图 ---------- */
.about-process .cp-figure{position:relative;margin:0;overflow:hidden;background:#eef2f8;border:1px solid rgba(var(--n2),.2);box-shadow:0 0 0 8px rgba(var(--n2),.05),0 20px 44px rgba(var(--sh),.1)}
.about-process .cp-figure img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.98)}
.about-process .cp-r32{aspect-ratio:3/2}
.about-process .cp-r43{aspect-ratio:4/3}

/* ---------- 幕 02：团队来源 ---------- */
/* 三段链路（算力调度 / 模型推理 / 内容产出）已按 0929-1230 反馈删除，
   该幕文案列只剩 h3 + 团队一行。 */
.about-process .cp-team{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px;margin-top:38px;padding-top:22px;border-top:1px solid var(--line-base)}
.about-process .cp-team>span{font-size:13px;color:var(--sat-ink);letter-spacing:.02em}
.about-process .cp-pills{display:flex;flex-wrap:wrap;gap:9px}
/* 团队来源一律不加药丸样式，直接跟着正文读（用户 0929-1230 要求）；
   药丸皮肤只留给幕 05 收束行的两个标签。 */
.about-process .cp-team .cp-pills span{font-size:13px;letter-spacing:.02em;color:var(--sat-ink)}
.about-process .cp-settle-foot .cp-pills span{padding:5px 13px;border:1px solid rgba(var(--n2),.32);border-radius:100px;color:rgb(var(--n1));font-size:12.5px;letter-spacing:.02em;background:transparent}

/* ---------- 幕 04：六行业拼贴（12 栏镜像配比，避免等分卡片感） ---------- */
/* 同一行必须等高：宽度按 5/4/3 栏变，高度用统一值量出来，
   否则三块的底边参差、下面的行业名会高低不齐（首轮截图就是这个毛病）。 */
.about-process .cp-industries-head{display:flex;justify-content:space-between;align-items:flex-end;gap:60px}
.about-process .cp-industries-head p{max-width:400px;font-size:14px;line-height:1.9;color:var(--sat-ink);padding-bottom:6px}
.about-process .cp-mosaic{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(14px,1.6vw,24px);margin-top:62px}
.about-process .cp-tile{position:relative;grid-column:span 4}
.about-process .cp-tile:nth-child(1),.about-process .cp-tile:nth-child(6){grid-column:span 5}
.about-process .cp-tile:nth-child(2),.about-process .cp-tile:nth-child(5){grid-column:span 4}
.about-process .cp-tile:nth-child(3),.about-process .cp-tile:nth-child(4){grid-column:span 3}
.about-process .cp-tile-media{position:relative;overflow:hidden;background:#eef2f8;border:1px solid rgba(var(--n2),.18);height:clamp(212px,17.4vw,332px);transition:border-color .5s,box-shadow .5s}
.about-process .cp-tile-media img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.97);transition:transform 1.2s cubic-bezier(.22,.61,.36,1)}
.about-process .cp-tile:hover .cp-tile-media{border-color:rgba(var(--n2),.5);box-shadow:0 0 0 7px rgba(var(--n2),.07),0 18px 38px rgba(var(--sh),.12)}
.about-process .cp-tile:hover .cp-tile-media img{transform:scale(1.035)}
.about-process .cp-tile-cap{display:flex;align-items:baseline;gap:12px;margin-top:15px;padding-top:13px;border-top:1px solid var(--line-base)}
.about-process .cp-tile-cap em{font:italic 14px/1 Film,Georgia,serif;font-style:italic;color:rgba(var(--n3),.95)}
.about-process .cp-tile-cap b{font-size:15.5px;font-weight:600;color:var(--ink-h);letter-spacing:-.015em}
.about-process .cp-tile-cap span{font:10px/1 Mono,monospace;letter-spacing:.15em;color:rgba(var(--n2),.6);margin-left:auto}

/* ---------- 幕 05：收束 ---------- */
.about-process .cp-settle h3{font-size:clamp(28px,2.4vw,40px);line-height:1.5;letter-spacing:-.05em;font-weight:600;color:var(--ink-h);max-width:960px;margin:0}
.about-process .cp-settle h3 span{color:var(--acc-2)}
.about-process .cp-settle-foot{display:flex;align-items:center;justify-content:space-between;gap:40px;margin-top:52px;padding-top:24px;border-top:1px solid var(--line-base);color:var(--sat-ink);font-size:13px;letter-spacing:.06em}

/* ---------- 入场：默认可见，脚本生效后才隐藏再显现 ---------- */
.about-process .cp-story.is-armed .cp-reveal{opacity:0;transform:translateY(22px)}
.about-process .cp-story.is-armed .cp-reveal{transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1)}
.about-process .cp-story.is-armed .cp-reveal.is-in{opacity:1;transform:none}
.about-process .cp-story.is-armed .cp-reveal:nth-child(2){transition-delay:.09s}

/* ============================================================
   断点
   ============================================================ */
@media(max-width:1240px){
  .about-process .cp-scene{padding:80px 0}
  .about-process .cp-copy h3{font-size:clamp(28px,2.7vw,38px)}
}
@media(max-width:1100px){
  .about-process .cp-split{gap:clamp(30px,4vw,54px)}
  .about-process .cp-mosaic{gap:14px}
  .about-process .cp-tile-cap em{display:none}
  .about-process .cp-tile-cap span{letter-spacing:.1em}
}
@media(max-width:940px){
  .about-process .cp-split{grid-template-columns:1fr;gap:38px}
  .about-process .cp-split.is-media-first .cp-figure{grid-column:1;grid-row:auto}
  .about-process .cp-split.is-media-first .cp-copy{grid-column:1;grid-row:auto}
  .about-process .cp-copy h3{font-size:30px}
  .about-process .cp-lead{font-size:16px}
  .about-process .cp-industries-head{display:block}
  .about-process .cp-industries-head p{max-width:none;margin-top:18px}
  .about-process .cp-mosaic{margin-top:46px}
  .about-process .cp-tile:nth-child(n){grid-column:span 6}
  .about-process .cp-tile:nth-child(n) .cp-tile-media{height:clamp(206px,30vw,300px)}
  .about-process .cp-settle-foot{display:block}
  .about-process .cp-settle-foot .cp-pills{margin-top:16px}
}
@media(max-width:640px){
  .about-process .cp-scene{padding:64px 0}
  .about-process .cp-story{margin-bottom:78px}
  .about-process .cp-copy h3{font-size:27px}
  .about-process .cp-lead{font-size:15px;line-height:1.95}
  .about-process .cp-team{display:block}
  .about-process .cp-team>span{display:block}
  .about-process .cp-pills{margin-top:14px}
  .about-process .cp-tile:nth-child(n){grid-column:span 12}
  .about-process .cp-tile:nth-child(n) .cp-tile-media{height:clamp(210px,54vw,320px)}
  .about-process .cp-mosaic{gap:26px}
  .about-process .cp-settle h3{font-size:24px}
}
@media(prefers-reduced-motion:reduce){
  .about-process .cp-story.is-armed .cp-reveal{opacity:1;transform:none}
  .about-process .cp-figure img,.about-process .cp-tile-media img{transition:none}
}
