/* ============================================================
   能力网络 · 节点定稿「纯排版」 · 配色：靛蓝 INDIGO
   仅 about.html 引用，必须排在 about-refresh.css 之后。

   定稿说明（2026-09-29）：
   本文件原是「6 套配色选型」用的变体层，页面上曾同时挂 6 幕
   `<section data-scheme="1..6">` 供挑选。现已按用户选定的
   「配色 2 / 6 靛蓝 INDIGO」收起为单幕：
     · 配色变量从 [data-scheme="2"] 提升为 .about-process 的默认值；
     · 全部规则前缀由 [data-scheme] 改为 .about-process；
     · 其余 5 套（青绿 / 石板 / 陶土 / 茄紫 / 铜金）数值保留在
       qa/_review/rebuild-schemes.py 与 docs/配色方案选型-0929.md 备查。
   本文件只作用于「关于巨芯 → 企业概况」这一区，不影响全站配色。

   配色的承载点有六处，改色时只需动下面那一组变量：
     ① 区块底色与网络区光晕  ② 标题强调字
     ③ 路径主线的流动虚线    ④ 三个端点（点 / 编号 / 英文 / 规线）
     ⑤ 选中节点的名称与右下读值  ⑥ 卫星标签的底、框、字、点
   ============================================================ */

/* ============================================================
   一 · 节点：纯排版
   一个实心点落在路径端点上，一条渐隐细线垂下去，编号 / 名称 / 英文吊在下方。
   不做圆盘、不做外环、不做发光——层级全靠字重、字距与透明度。
   ============================================================ */
.about-process .about-node{
  --u:1px;
  position:absolute;z-index:4;padding:0;border:0;border-radius:0;
  width:calc(150 * var(--u));height:calc(150 * var(--u));
  transform:translate(-50%,-50%);
  background:none;box-shadow:none;color:var(--ink);
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:color .45s}
/* 清掉旧节点的全部装饰 */
.about-process .about-node::before,
.about-process .about-node::after,
.about-process .about-node-orbit,
.about-process .nd-ring,
.about-process .nd-cap,
.about-process .about-node-icon{display:none}
.about-process .about-node:hover,
.about-process .about-node:focus-visible,
.about-process .about-node.is-active{
  transform:translate(-50%,-50%);background:none;box-shadow:none}
.about-process .about-node:focus-visible{outline:2px solid rgb(var(--acc));outline-offset:14px}

/* 端点：7px 实心点，选中时浮出一圈柔光环 */
.about-process .about-node::before{
  display:block;content:'';position:absolute;left:50%;top:50%;
  width:calc(7 * var(--u));height:calc(7 * var(--u));
  margin:calc(-3.5 * var(--u)) 0 0 calc(-3.5 * var(--u));
  border-radius:50%;background:rgb(var(--node-rgb));
  box-shadow:0 0 0 0 rgba(var(--node-rgb),0);
  transition:box-shadow .55s cubic-bezier(.22,.61,.36,1)}
.about-process .about-node:hover::before,
.about-process .about-node:focus-visible::before,
.about-process .about-node.is-active::before{
  box-shadow:0 0 0 calc(5 * var(--u)) rgba(var(--node-rgb),.16)}
/* 引线：从点下方垂出，向下渐隐 */
.about-process .about-node::after{
  display:block;content:'';position:absolute;left:50%;top:calc(50% + 5 * var(--u));
  width:1px;height:calc(21 * var(--u));margin-left:-.5px;
  background:linear-gradient(180deg,rgba(var(--node-rgb),.55),rgba(var(--node-rgb),.05));
  transition:height .55s cubic-bezier(.22,.61,.36,1)}
.about-process .about-node:hover::after,
.about-process .about-node:focus-visible::after,
.about-process .about-node.is-active::after{height:calc(28 * var(--u))}

/* 文字块：未选中压到 66% 透明度，选中回到全不透明 */
.about-process .about-node-content{
  position:absolute;left:50%;top:calc(50% + 29 * var(--u));transform:translateX(-50%);
  display:block;width:auto;height:auto;gap:0;text-align:center;white-space:nowrap;
  opacity:.66;transition:opacity .45s}
.about-process .about-node:hover .about-node-content,
.about-process .about-node:focus-visible .about-node-content,
.about-process .about-node.is-active .about-node-content{opacity:1}
.about-process .about-node-content small{
  display:inline-flex;align-items:center;justify-content:center;
  gap:calc(8 * var(--u));
  font:max(8px,calc(10 * var(--u)))/1 Mono,monospace;
  letter-spacing:.1em;color:rgba(var(--node-rgb),.95)}
.about-process .about-node-content small b{
  font:italic max(10px,calc(14 * var(--u)))/1 Film,Georgia,serif;font-weight:400;letter-spacing:.01em}
.about-process .about-node-content small i{
  display:block;width:calc(14 * var(--u));height:1px;background:rgba(var(--node-rgb),.45)}
.about-process .about-node-content strong{
  display:block;font-size:max(16px,calc(27 * var(--u)));font-weight:600;
  line-height:1;letter-spacing:.06em;text-indent:.06em;margin-top:calc(10 * var(--u));
  transition:color .45s}
.about-process .about-node-content em{
  display:block;font:max(7px,calc(8 * var(--u)))/1 Mono,monospace;font-style:normal;
  letter-spacing:.24em;text-indent:.24em;color:rgba(var(--node-rgb),.62);
  margin-top:calc(8 * var(--u))}
/* 名下的短规线：选中时向两侧展开 */
.about-process .about-node-content::after{
  content:'';display:block;width:calc(26 * var(--u));height:1px;
  margin:calc(11 * var(--u)) auto 0;background:rgba(var(--node-rgb),.36);
  transition:width .55s cubic-bezier(.22,.61,.36,1),background .55s}
.about-process .about-node:hover .about-node-content::after,
.about-process .about-node:focus-visible .about-node-content::after,
.about-process .about-node.is-active .about-node-content::after{
  width:calc(62 * var(--u));background:rgba(var(--node-rgb),.8)}
/* 选中的那个名字染色——整幕唯一的彩色大字 */
.about-process .about-node.is-active .about-node-content strong{color:rgb(var(--node-rgb))}

/* ============================================================
   二 · 连线 / 卫星 / 配图
   ============================================================ */
.about-process .about-network-base{stroke:var(--line-base);stroke-width:1.4}
.about-process .about-network-branch{stroke:var(--line-branch);stroke-width:1;stroke-dasharray:2 6}
.about-process .about-network-travel{
  stroke:url(#nl-1);
  stroke-width:2.6;stroke-linecap:round;stroke-dasharray:7 20;
  filter:drop-shadow(0 0 3px rgba(var(--n2),.3))}
.about-process .about-network-points circle{
  fill:var(--dot-fill);stroke:var(--dot-stroke);stroke-width:1.5}
.about-process .about-network-lines stop:nth-of-type(1){stop-color:var(--g1)}
.about-process .about-network-lines stop:nth-of-type(2){stop-color:var(--g2)}
.about-process .about-network-lines stop:nth-of-type(3){stop-color:var(--g3)}

.about-process .about-network-status i{width:6px;height:6px;background:rgb(var(--n2))}

/* 卫星标签：一层带方案色的半透底衬（压到配图上也能读），框、字、点同色系 */
.about-process .about-satellite{
  padding:4px 10px;border-radius:100px;box-shadow:none;backdrop-filter:blur(4px);
  background:linear-gradient(rgba(var(--n2),.13),rgba(var(--n2),.13)),rgba(253,253,252,.9);
  border:1px solid rgba(var(--n2),.34);
  color:rgb(var(--n1));font-size:11.5px;letter-spacing:.07em}
.about-process .about-satellite::before{
  width:4px;height:4px;border-radius:50%;background:rgb(var(--n2))}

/* 配图：边框、光环、投影统一走方案色 */
.about-process .about-net-photo{
  border:1px solid rgba(var(--n2),.34);
  box-shadow:inset 0 0 0 1px #ffffffa6,0 0 0 8px rgba(var(--n2),.07),
  0 16px 34px rgba(var(--sh),.12),0 2px 4px rgba(var(--sh),.04)}
.about-process .about-network[data-active="1"] .net-photo-a,
.about-process .about-network[data-active="2"] .net-photo-b,
.about-process .about-network[data-active="3"] .net-photo-c{
  transform:translate(-50%,-50%) scale(1.025);
  border-color:rgba(var(--n2),.66);
  box-shadow:inset 0 0 0 1px #ffffffc9,0 0 0 12px rgba(var(--n2),.1),
  0 22px 46px rgba(var(--sh),.17)}
/* 三张配图分别取配色里的三档色，与三个端点一一对应 */
.about-process .about-net-photo.net-photo-a{--photo-rgb:var(--n1)}
.about-process .about-net-photo.net-photo-b{--photo-rgb:var(--n2)}
.about-process .about-net-photo.net-photo-c{--photo-rgb:var(--n3)}
.about-process .about-node-one{--node-rgb:var(--n1)}
.about-process .about-node-two{--node-rgb:var(--n2)}
.about-process .about-node-three{--node-rgb:var(--n3)}

/* ============================================================
   三 · 区块层：底色 / 光晕 / 网格 / 标题强调 / 读值
   ============================================================ */
.about-process{background:var(--bg-sec);border-color:var(--line-base)}
.about-process .about-process-head h2{color:var(--ink-h)}
.about-process .about-process-head h2 span{color:var(--acc-2)}
.about-process .about-process-head>p{color:var(--sat-ink)}
.about-process .about-num{color:rgb(var(--acc))}
.about-process .about-network{
  border-top:1px solid var(--line-base);border-bottom:1px solid var(--line-base);
  background:var(--bg-net)}
/* 首屏后的能力网络不使用框线，保留更轻盈的画布感。 */
.about-network-section{border-bottom:0}
.about-network-section .about-network{border:0}
.about-process .about-network::before{
  background-image:linear-gradient(var(--grid-a) 1px,transparent 1px),
  linear-gradient(90deg,var(--grid-a) 1px,transparent 1px)}
.about-process .about-network-top,
.about-process .about-network-bottom{color:var(--sat-ink)}
.about-process .about-network-bottom>span:last-child{color:rgba(var(--n2),.75)}
.about-process .about-process-readout{border-bottom-color:var(--line-base);color:var(--ink-h)}
.about-process .about-process-readout strong{color:rgb(var(--n1))}
.about-process .about-readout-label{color:rgb(var(--acc))}
.about-process .about-process-readout p{color:var(--sat-ink)}
.about-process .about-readout-index{color:rgb(var(--n3))}

/* ============================================================
   四 · 配色：靛蓝 INDIGO（定稿选用，原「配色 2 / 6」）
   同一色相的三档（深 / 中 / 浅）+ 一套同调中性色。
   改色只需动这一组数值，不用碰上面的结构。
   其余 5 套备选值见 docs/配色方案选型-0929.md 第二节。
   ============================================================ */
.about-process{
  --n1:40,62,126;--n2:58,88,164;--n3:102,132,196;
  --acc:38,62,132;--acc-2:#4c6ba4;--ink-h:#162240;--ink:#1c2a4a;--sh:30,42,72;
  --sat-ink:#556588;
  --line-base:#c6cddc;--line-branch:#d0d7e4;--dot-fill:#fcfdff;--dot-stroke:#9dabc9;
  --g1:#283e7e;--g2:#3a58a4;--g3:#607ec0;
  --grid-a:#ccd3e242;
  --bg-sec:linear-gradient(180deg,#f7f9fd,#f0f4fb 58%,#f8fafd);
  --bg-net:radial-gradient(ellipse 50% 48% at 50% 45%,#e3eaf8 0%,transparent 76%)}

/* ============================================================
   五 · 断点：只改 --u，节点内所有几何等比跟随
   ============================================================ */
/* 卫星标签的尺寸也要跟着断点一起收：窄屏上容器变窄而药丸不变宽，
   会挤到旁边的配图——这是窄屏压叠的根因。 */
@media(max-width:1240px){.about-process .about-satellite{font-size:11px;padding:3px 10px;gap:8px}}
@media(max-width:1100px){.about-process .about-satellite{font-size:10.5px;padding:3px 9px;gap:8px}}
@media(max-width:940px){.about-process .about-satellite{font-size:9.5px;padding:3px 7px;gap:7px}}

@media(max-width:1240px){.about-process .about-node{--u:.9px}}
@media(max-width:1100px){.about-process .about-node{--u:.82px}}
@media(max-width:900px){.about-process .about-node{--u:.75px}}
@media(max-width:800px){.about-process .about-node{--u:.68px}}
@media(max-width:640px){.about-process .about-node{--u:.6px}}
@media(max-width:540px){.about-process .about-node{--u:.56px}}

@media(prefers-reduced-motion:reduce){
  .about-process .about-node,
  .about-process .about-node::before,
  .about-process .about-node::after,
  .about-process .about-node-content,
  .about-process .about-node-content::after{transition:none}
}

/* 能力网络：以树的生长替代旧的圆形节点，节点保留为轻量阶段标记。 */
.about-network-section .about-node{width:auto;height:auto;padding:0 0 0 18px;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;color:rgb(var(--node-rgb));cursor:pointer;transform:translate(0,-50%)}
.about-network-section .about-node::before,.about-network-section .about-node::after,.about-network-section .about-node-orbit,.about-network-section .nd-ring{display:none}
.about-network-section .about-node::before{display:block;content:'';position:absolute;left:0;top:8px;width:8px;height:8px;margin:0;border:1px solid currentColor;border-radius:50%;background:#f7f9fd;box-shadow:0 0 0 5px rgba(113,145,202,.08)}
.about-network-section .about-node:hover,.about-network-section .about-node:focus-visible,.about-network-section .about-node.is-active{background:none;box-shadow:none;transform:translate(0,-50%) translateY(-3px)}
.about-network-section .about-node:focus-visible{outline:1px solid currentColor;outline-offset:9px}
.about-network-section .about-node-content{position:relative;left:auto;top:auto;transform:none;width:auto;height:auto;display:flex;align-items:flex-start;gap:4px;text-align:left;white-space:nowrap;opacity:1}
.about-network-section .about-node-content::after{display:none}
.about-network-section .about-node-content small{font-size:10px;line-height:1;letter-spacing:.14em;color:rgba(var(--node-rgb),.72)}
.about-network-section .about-node-content strong{font-size:28px;line-height:1.05;letter-spacing:-.06em;font-weight:600;text-shadow:0 2px 10px rgba(248,251,255,.92)}
.about-network-section .about-node-content strong::after{content:'';display:block;width:26px;height:1px;margin-top:10px;background:currentColor;opacity:.5;transition:width .35s ease}
.about-network-section .about-node:hover .about-node-content strong::after,.about-network-section .about-node.is-active .about-node-content strong::after{width:44px}
.about-network-section .about-node-one{left:27.5%;top:37%}
.about-network-section .about-node-two{left:50%;top:21%}
.about-network-section .about-node-three{left:72.5%;top:37%}
@media(max-width:800px){.about-network-section .about-node-content strong{font-size:24px}.about-network-section .about-node-content small{font-size:8px}}
@media(max-width:540px){.about-network-section .about-node-one{left:25%;top:27%}.about-network-section .about-node-two{left:75%;top:50%}.about-network-section .about-node-three{left:25%;top:75%}}