/* ============================================================================
   home-v2 / style.css
   按「首页风格确定效果图.png」照搬的一版首页。
   颜色一律从 :root 的 token 取；主色为品牌红，业务区辅以墨绿与蓝。
   ============================================================================ */

/* ---------------------------------------------------------------- 1. token */
:root{
  /* 强调色 */
  --red:      #E11D25;
  --red-d:    #C1121A;
  --red-t:    #FDEEF0;
  --gn:       #004C3C;
  --gn-2:     #0A6151;
  --gn-t:     #E8F1EE;
  --bl:       #1F5EA8;
  --bl-t:     #EEF4FB;
  --am:       #9C570F;   /* STEAM 卡，暖橙，与品牌红同属暖色系 */
  --am-t:     #FDF7EE;

  /* 中性 */
  --ink:      #14161A;
  --ink-2:    #454B54;
  --ink-3:    #5F656C;
  --line:     #E7E9EC;
  --line-2:   #DCE0E5;
  --paper:    #FFFFFF;
  --paper-2:  #F6F7F8;
  --paper-3:  #EFF1F3;

  /* 尺寸 */
  --maxw:     1360px;
  --pad:      40px;
  --r:        14px;
  --r-s:      8px;
  --r-pill:   999px;
  --bch:      clamp(84px,7.2vw,110px);   /* 业务卡底部图片带高度，各断点覆盖 */
  /* 区块标题共用一档（.sec-head / .cl-head / .about-copy / .pj-copy 的 h2）。
     2026-09-30 /polish 收口：此前四处各写各的，1440 实测同一角色渲染出
     34 / 36 / 38 三档字号，行高更是 1.25 / 1.3 / 1.7 三种 —— 其中 1.7 是
     从 body 的 `font:16px/1.7` 一路继承下来的，对展示级标题过松。
     取值 36px 是本组里用得最多的一档（.cl-head 的 4 个区块 + .pj-copy），
     行高 1.3 与 .pj-copy 原有值一致（标题级，不是正文级）。 */
  --h2-sec:   clamp(24px,2.5vw,36px);

  --ff:  "PingFang SC","Microsoft YaHei","Hiragino Sans GB","Source Han Sans SC","Noto Sans SC",
         system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ffn: "Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --sh-1: 0 1px 2px rgba(20,22,26,.06);
  --sh-2: 0 6px 22px rgba(20,22,26,.08);
}

/* ---------------------------------------------------------------- 2. 基础 */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:16px/1.7 var(--ff);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
/* 跳过链接的落点：头部 sticky 高 72px，被聚焦的 #pjMain 要往下让出这段，
   否则滚到位后正文第一行被头部压住（WCAG 2.4.11 Focus Not Obscured）。 */
#pjMain{scroll-margin-top:84px}
#pjMain:focus{outline:none}
.sec-head{margin-bottom:clamp(30px,3.2vw,48px)}
.sec-head.c{text-align:center}
.sec-head h2{
  font-size:var(--h2-sec);line-height:1.3;letter-spacing:-.6px;
  font-weight:800;
}
.sec-head h2 span{color:var(--ink-3);font-weight:700}
.sec-head p{margin-top:10px;color:var(--ink-2);font-size:clamp(14px,1.05vw,16px)}

/* 按钮 */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  height:46px;padding:0 22px;border-radius:var(--r-pill);
  font-size:15px;font-weight:600;white-space:nowrap;
  transition:background .18s,color .18s,border-color .18s,transform .18s;
}
.btn i{font-style:normal;transition:transform .18s}
.btn:hover i{transform:translateX(3px)}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-d)}
.btn-ghost{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.6);backdrop-filter:blur(4px)}
.btn-ghost:hover{background:rgba(255,255,255,.24)}
.btn-line{background:transparent;color:var(--red-d);border:1px solid var(--red-d)}
.btn-line:hover{background:var(--red-d);color:#fff}
.btn-line.lt{color:#fff;border-color:rgba(255,255,255,.55)}
.btn-line.lt:hover{background:#fff;color:var(--gn)}
/* 按下反馈（2026-09-30 /polish 补）。
   .btn 的 transition 里从第一天就写着 transform，但全站没有任何一条规则用过它 ——
   配上实测结果（.btn-red / .btn-ghost / .btn-line 三个变体的 :hover 与 :active
   计算样式完全相同）可以看出：当初想做「按下会动一下」，只是这条规则没写。
   这里按设计意图补上 1px 下沉，与 .hd-cta / .copy-ico / .pg / .ctab 同一套按下语言。
 */
.btn:active{transform:translateY(1px)}
.btn.sm{height:38px;padding:0 16px;font-size:14px}
.btn i.pl{font-size:8px;display:inline-flex;width:18px;height:18px;align-items:center;justify-content:center;
  background:#fff;color:var(--red);border-radius:50%}

/* ---------------------------------------------------------------- 3. 头部 */
.hd{
  position:sticky;top:0;z-index:var(--z-header);background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
.hd-in{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);
  height:72px;display:flex;align-items:center;gap:clamp(16px,1.6vw,26px);
}
.hd-brand{display:flex;align-items:center;gap:clamp(10px,1vw,16px);flex:none}
.hd-logo{height:38px;width:auto}
.hd-tag{
  font-size:12px;font-weight:700;color:var(--ink);line-height:1.35;letter-spacing:.2px;
  padding-left:clamp(10px,1vw,16px);border-left:1px solid var(--line-2);
  display:flex;flex-direction:column;white-space:nowrap;
}
.hd-tag em{font-style:normal;font-family:var(--ffn);font-size:7.5px;letter-spacing:.3px;color:var(--ink-3);font-weight:600}

.hd-nav{flex:1;min-width:0}
.hd-nav > ul{display:flex;align-items:center;justify-content:flex-end;gap:clamp(10px,1.5vw,26px)}
.hd-nav > ul > li{position:relative}
.hd-nav > ul > li > a{
  display:block;padding:24px 0;font-size:15px;font-weight:600;color:var(--ink);
  white-space:nowrap;position:relative;transition:color .16s;
}
.hd-nav > ul > li > a:hover{color:var(--red)}
.hd-nav > ul > li > a.on{color:var(--red)}
.hd-nav > ul > li > a.on::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--red);border-radius:2px;
}
.hd-nav .sub{
  position:absolute;left:-14px;top:100%;min-width:190px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-s);
  box-shadow:var(--sh-2);padding:8px;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .18s,transform .18s,visibility .18s;
}
.hd-nav .has-sub:hover .sub,.hd-nav .has-sub:focus-within .sub{opacity:1;visibility:visible;transform:translateY(0)}
.hd-nav .sub a{display:block;padding:9px 12px;border-radius:6px;font-size:14px;color:var(--ink-2);white-space:nowrap}
.hd-nav .sub a:hover{background:var(--red-t);color:var(--red-d)}

.hd-act{display:flex;align-items:center;gap:clamp(6px,.8vw,14px);flex:none}
.ico-btn{
  width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--ink);transition:background .16s,color .16s;
}
.ico-btn:hover{background:var(--paper-2);color:var(--red-d)}
.ico-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}

.lang-seg{display:flex;align-items:center;gap:0;font-size:14px;font-weight:700}
.lang-seg a{padding:4px 8px;color:var(--ink-3);transition:color .16s}
.lang-seg a:hover{color:var(--ink)}
.lang-seg a.on{color:var(--ink)}
.lang-seg a + a{border-left:1px solid var(--line-2)}

/* 汉堡：仅移动端出现 */
.hd-burger{display:none;width:40px;height:40px;flex-direction:column;align-items:center;
  justify-content:center;gap:5px;border-radius:8px}
.hd-burger span{display:block;width:20px;height:2px;border-radius:2px;background:var(--ink);
  transition:transform .22s,opacity .22s}
body.menu-open .hd-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .hd-burger span:nth-child(2){opacity:0}
body.menu-open .hd-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------------------------------------------------------------- 4. 首屏 */
.hero{
  position:relative;overflow:hidden;background:#220A0E;color:#fff;
  height:clamp(486px,39vw,576px);
}
.hero-bg{position:absolute;inset:0}
/* 天空色相：2026-09-30 由「深蓝夜空 → 青蓝」改为「品牌红夜 → 暖橙晚霞」。
   ⚠️ 改的是**色相**，不是明度阶梯 —— 原来上暗下亮的日落读法、以及底部中央那团
   暖橙地平线光晕（#FBCB86）的强弱关系原样保留，所以右侧课堂照的左缘渐隐、
   左侧压暗纱的遮挡计算都不用重算。
   中间那档原本是青蓝 #5E93A6，直接按色相旋转会滑到玫粉（读起来像紫），
   所以按明度分段改走暖褐 #B35F40，与光晕的暖橙同一族，接得上。
   ⚠️ 光晕中心从 52% 挪到 28%：首屏右侧 58% 被课堂照占满，光晕留在正中
   等于整团被照片压住，露出的一小片天空只剩暗红（看着发闷）。挪到左三分之一
   才落进真正露天的天空区，与尾部 .cta-bg 那颗"太阳"读起来是同一套。
   ⚠️ 光晕收尾的那个 rgba 必须跟着天空底色走（原来是偏蓝的 rgba(12,30,56,0)）。 */
.hero-sky{
  position:absolute;inset:0;
  background:
    radial-gradient(104% 86% at 28% 103%, #FBCB86 0%, rgba(246,180,112,.72) 15%, rgba(226,124,74,.40) 32%, rgba(56,20,12,0) 62%),
    linear-gradient(180deg,#22080C 0%,#48111B 34%,#7A1E20 62%,#9A3E26 84%,#B35F40 100%);
}
/* 球体：把点阵世界地图裁成圆形，视觉上如一颗地球。
   底图 world-map.webp 是 2:1，圆内只显示它的**右半张**（东半球），
   所以地图宽取圆直径的 2 倍、left 取 -100%：地图左缘正好压在圆的左缘，
   圆里看到地图的第 50%~100% 段，四个标注点（地图 x 68%~81%）就落在圆的中左部。
   ⚠️ 直径必须收在右侧课堂照的左缘之内，否则中国 / 东南亚 / 印尼三个点会被照片盖掉。
   34% 是实测值：1440 下圆右缘 720px，照片左缘 605px 且带 30% 宽的渐隐，留有余量。
   上限 560px 是给超宽屏兜底，首屏高封顶 576px，再大圆就被底边裁掉了。 */
.hero-globe{
  position:absolute;left:19%;top:1%;width:min(34%,560px);aspect-ratio:1;border-radius:50%;overflow:hidden;
  /* 圆的硬裁切交给 border-radius；mask 只负责让边缘溶进天空。
     ⚠️ 必须写 closest-side：radial-gradient 的百分比默认按 farthest-corner 解析，
     100% 会落到对角线上（约 1.41R），边缘根本淡不出去，看着是个生硬的圆饼。 */
  -webkit-mask-image:radial-gradient(circle closest-side,#000 64%,rgba(0,0,0,.86) 86%,rgba(0,0,0,.34) 96%,transparent 100%);
  mask-image:radial-gradient(circle closest-side,#000 64%,rgba(0,0,0,.86) 86%,rgba(0,0,0,.34) 96%,transparent 100%);
}
.globe-map{position:absolute;width:200%;height:100%;left:-100%;top:0}
/* 球体是氛围层不是信息层：点阵压到 62% 才读得出「一颗球」。
   满不透明度时整片欧亚大陆把圆填满，只剩一坨白点，反而不像球。 */
.globe-map > img{width:100%;height:100%;opacity:.62}
/* 贴边一圈柔光 = 球的「临边」，没有它整片点阵会和天空糊在一起、看不出是球。
   不用 border 画硬环（会像贴了个圆框），用贴边渐变更像大气层。
   ⚠️ 外发光会被 .hero-globe 的 overflow:hidden 裁掉，只能用 inset 的写法。 */
.hero-globe::after{
  content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle closest-side,
    rgba(255,190,150,0) 74%,rgba(255,196,158,.10) 90%,rgba(255,214,180,.24) 98.5%,rgba(255,214,180,0) 100%);
}
/* 左侧压暗层（2026-09-28 加）：点阵地图的白点正好落在标题后面，白字压白点读不出——
   用户原话「文字踩到了白点上，造成干扰」。
   一层从左到右淡出的暗色纱，**只压天空与球**：它插在 .hero-photo 之前（见 index 的 DOM 顺序），
   照片图层在上、右侧完全不受影响；纱的尾巴（46%~60%）落进照片左缘那条 30% 宽的渐隐带底下，
   等于顺手把照片左缘的过渡再压匀一点，看不出接缝。
   ⚠️ 别用「调暗 .hero-sky」的办法：天空一暗整屏都变，右侧照片反而更跳。
   球上的白点（#C4CAD3 @ .62）原亮度约 0.5，白字压上去只有 1.9:1；
   这层 .55 压下去后约 0.22，白字对比度回到 3.8:1，大号粗体的可读线是 3:1。
   要调深浅只改下面这几个 alpha，改完用 _tools/shot.py 出图看。 */
.hero-scrim{
  position:absolute;left:0;top:0;bottom:0;width:60%;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(24,4,7,.58) 0%,
    rgba(24,4,7,.55) 36%,
    rgba(24,4,7,.50) 46%,
    rgba(24,4,7,0) 100%);
}
.hero-city{
  position:absolute;left:0;right:0;bottom:0;height:27%;
  background:linear-gradient(180deg,#2A0D12 0%,#1A070B 60%,#120406 100%);
  clip-path:polygon(
    0% 100%,0% 72%,2% 72%,2% 62%,3.5% 62%,3.5% 76%,5% 76%,5% 58%,6.5% 58%,6.5% 70%,8% 70%,8% 44%,
    9.5% 44%,9.5% 66%,11% 66%,11% 54%,13% 54%,13% 74%,14.5% 74%,14.5% 40%,16% 40%,16% 62%,17.5% 62%,
    17.5% 50%,19% 50%,19% 78%,21% 78%,21% 56%,22.5% 56%,22.5% 34%,24% 34%,24% 68%,25.5% 68%,25.5% 52%,
    27% 52%,27% 70%,29% 70%,29% 46%,30.5% 46%,30.5% 64%,32% 64%,32% 38%,33.5% 38%,33.5% 72%,35% 72%,
    35% 56%,37% 56%,37% 66%,38.5% 66%,38.5% 42%,40% 42%,40% 74%,41.5% 74%,41.5% 60%,43% 60%,43% 48%,
    44.5% 48%,44.5% 70%,46% 70%,46% 36%,47.5% 36%,47.5% 64%,49% 64%,49% 52%,51% 52%,51% 76%,52.5% 76%,
    52.5% 44%,54% 44%,54% 62%,55.5% 62%,55.5% 50%,57% 50%,57% 72%,59% 72%,59% 40%,60.5% 40%,60.5% 66%,
    62% 66%,62% 54%,63.5% 54%,63.5% 78%,65% 78%,65% 46%,67% 46%,67% 62%,68.5% 62%,68.5% 38%,70% 38%,
    70% 70%,71.5% 70%,71.5% 56%,73% 56%,73% 68%,75% 68%,75% 44%,76.5% 44%,76.5% 74%,78% 74%,78% 58%,
    79.5% 58%,79.5% 42%,81% 42%,81% 66%,83% 66%,83% 52%,84.5% 52%,84.5% 76%,86% 76%,86% 48%,87.5% 48%,
    87.5% 64%,89% 64%,89% 36%,90.5% 36%,90.5% 70%,92% 70%,92% 54%,94% 54%,94% 72%,95.5% 72%,95.5% 46%,
    97% 46%,97% 68%,98.5% 68%,98.5% 60%,100% 60%,100% 100%);
}
.hero-city-2{
  height:20%;background:linear-gradient(180deg,#200A10 0%,#100406 100%);
  clip-path:polygon(
    0% 100%,0% 80%,3% 80%,3% 66%,6% 66%,6% 84%,9% 84%,9% 58%,12% 58%,12% 78%,15% 78%,15% 52%,
    18% 52%,18% 82%,21% 82%,21% 64%,24% 64%,24% 46%,27% 46%,27% 76%,30% 76%,30% 60%,33% 60%,33% 84%,
    36% 84%,36% 54%,39% 54%,39% 74%,42% 74%,42% 62%,45% 62%,45% 86%,48% 86%,48% 50%,51% 50%,51% 72%,
    54% 72%,54% 66%,57% 66%,57% 82%,60% 82%,60% 56%,63% 56%,63% 76%,66% 76%,66% 60%,69% 60%,69% 84%,
    72% 84%,72% 52%,75% 52%,75% 74%,78% 74%,78% 62%,81% 62%,81% 80%,84% 80%,84% 56%,87% 56%,87% 78%,
    90% 78%,90% 64%,93% 64%,93% 84%,96% 84%,96% 68%,100% 68%,100% 100%);
  opacity:.85;
}

.hero-in{
  position:relative;z-index:var(--z-raised);height:100%;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-bottom:64px;
}
.hero-copy{max-width:640px}
.hero-copy h1{
  font-size:clamp(34px,4.5vw,62px);line-height:1.14;font-weight:800;letter-spacing:-1.5px;
  /* 两重：紧贴的一层 1px 暗边负责把字从白点上「抠」出来（大模糊的那层压不住点状干扰） */
  text-shadow:0 1px 3px rgba(24,4,6,.55),0 2px 22px rgba(34,6,10,.55);
}
.hero-copy h1 span{color:var(--red);display:inline-block}
.hero-copy h1 span.t1{color:#fff}
html[lang="en"] .hero-copy h1{font-size:clamp(28px,3.5vw,50px);letter-spacing:-.8px}
/* 英文模式下 tagline 会撑宽整行并与导航相撞，直接收起（logo 已含英文名） */
html[lang="en"] .hd-tag{display:none}
html[lang="en"] .hd-nav > ul{gap:clamp(8px,1.3vw,22px)}
/* 品牌名后的英文副标（配界 PEI JIE）在英文模式下会变成「PEIJIE PEI JIE」，收起 */
html[lang="en"] .bc-brand em{display:none}
.hero-copy p{
  margin-top:clamp(14px,1.6vw,22px);font-size:clamp(14px,1.15vw,17px);line-height:1.85;
  color:rgba(255,255,255,.88);
  text-shadow:0 1px 2px rgba(24,4,6,.5),0 1px 14px rgba(34,6,10,.5);
}
.hero-btns{display:flex;gap:14px;margin-top:clamp(20px,2.4vw,34px);flex-wrap:wrap}

/* 首屏右侧实景照。老板效果图里这里是一整幅课堂现场照，不是摆件：
   照片左缘渐隐溶进天空、下缘被城市剪影盖住，读起来像照片本来就长在画面里。
   所以不做圆角、不加边框、不加投影——一加就又变回「贴上去的图」。 */
.hero-photo{position:absolute;right:0;top:0;bottom:0;width:58%}
/* 后台「首页 Banner」（data/banners.json）可以传多张：多张时几张 .hp-img 叠在一起淡入淡出轮播，
   只有一张就固定显示它。所以这里必须绝对定位 + 用 .on 控制可见，
   .hero-photo 的高度靠 top/bottom 撑，不需要图片来撑（原来 img 是流式的，加第二张就撑高了）。
   滤镜与左缘渐隐挂在 .hp-img 上，两张图共用同一套遮罩，切换时看不出接缝。 */
.hero-photo .hp-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:58% 46%;
  filter:saturate(1.03) brightness(.98) contrast(.99);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.5) 8%,rgba(0,0,0,.9) 18%,#000 30%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.5) 8%,rgba(0,0,0,.9) 18%,#000 30%);
  opacity:0;transition:opacity 900ms ease;
}
.hero-photo .hp-img.on{opacity:1}
@media (prefers-reduced-motion:reduce){ .hero-photo .hp-img{transition:none} }

/* 服务标签条 */
.hero-chips{
  position:absolute;left:0;right:0;bottom:0;z-index:var(--z-top);
  background:linear-gradient(180deg,rgba(26,4,7,.30),rgba(26,4,7,.78));
  backdrop-filter:blur(6px);border-top:1px solid rgba(255,255,255,.10);
}
.hero-chips ul{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  height:66px;
}
.hero-chips li{
  display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;
  color:rgba(255,255,255,.94);white-space:nowrap;
}
.hero-chips svg{width:22px;height:22px;fill:none;stroke:rgba(255,255,255,.9);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* ---------------------------------------------------------------- 5. 集团简介 */
.about{padding:clamp(44px,4.2vw,64px) 0 0}
/* 三栏：宽图 / 宽正文 / 窄数据。
   数据卡用「虚线轴 + 红点 + 四项竖排」的窄条形式，只占 20% 宽，
   省下的横向空间给了左侧图片（30%，比早先的 22% 宽了近一半）。 */
.about-in{
  display:grid;grid-template-columns:26fr 54fr 20fr;
  gap:clamp(20px,2.4vw,40px);align-items:stretch;
}
.about-photo{
  position:relative;height:100%;min-height:clamp(320px,27vw,440px);
  overflow:hidden;border-radius:var(--r);
  background:linear-gradient(180deg,#F7F0EC 0%,#FCF8F6 58%,#FEFEFD 100%);
}
/* 底图 about-building.webp 是局部的楼（只有幕墙 + 一片天空），
   放大裁切会只剩幕墙（房子显得巨大），所以让图片完整显示、底部对齐，
   上方留给容器渐变当天空，读起来是一整幅「楼 + 天空」。 */
.about-photo img{
  position:absolute;left:0;bottom:0;width:100%;height:auto;
}
.about-copy h2{font-size:var(--h2-sec);font-weight:800;letter-spacing:-.6px;line-height:1.3}
.about-copy p{margin-top:16px;color:var(--ink-2);font-size:clamp(14px,1.02vw,15.5px);line-height:1.95}
/* 核心定位：整句纯文本（翻译机制只认叶子元素，段内不能挂 <b>），
   靠左竖线 + 淡红底做强调。
   左竖线同样被检测器报 side-tab —— 同 .highlight-box，是有意为之的设计语言；
   这里左边两角本来就是直角（border-radius 只给了右侧），不是「圆角卡配粗边」。 */
.ab-pos{
  margin-top:16px;padding:11px 16px;border-left:3px solid var(--red);
  background:var(--red-t);border-radius:0 var(--r-s) var(--r-s) 0;
  color:var(--red-d) !important;font-weight:700;
  font-size:clamp(13.5px,1vw,15px) !important;line-height:1.7 !important;
}
.about-stats{
  background:var(--paper-2);border-radius:var(--r);align-self:start;
  padding:clamp(18px,1.7vw,26px) clamp(16px,1.5vw,22px);
}
.st-label{display:block;color:var(--red-d);font-size:clamp(14px,1.05vw,16px);font-weight:800}
.st-sub{display:block;margin-top:2px;color:var(--ink-2);font-size:clamp(12.5px,.92vw,14px)}
/* 竖条形式：左侧一条虚线轴串起四个红点，四项竖排。
   比 2×2 网格窄，正好把宽度让给左图。 */
.about-stats ul{margin-top:clamp(16px,1.8vw,24px);position:relative}
.about-stats ul::before{
  content:"";position:absolute;left:5px;top:13px;bottom:13px;width:0;
  border-left:1px dashed rgba(225,29,37,.35);
}
.about-stats li{position:relative;padding-left:24px;margin-bottom:clamp(11px,1.2vw,18px)}
.about-stats li:last-child{margin-bottom:0}
.about-stats li::before{
  content:"";position:absolute;left:0;top:.5em;width:11px;height:11px;border-radius:50%;
  background:var(--red);box-shadow:0 0 0 3px rgba(225,29,37,.14);
}
.st-num{
  display:block;font-family:var(--ffn);font-weight:800;color:var(--red);
  font-size:clamp(22px,2.2vw,34px);line-height:1.05;letter-spacing:-.8px;
}
.st-num i{font-style:normal;font-size:.46em;margin-left:3px;letter-spacing:0}
.st-cap{display:block;margin-top:3px;color:var(--ink-2);font-size:clamp(11.5px,.88vw,13.5px);line-height:1.5}

/* ---------------------------------------------------------------- 6. 四大业务板块
   教育 / 科技 / 人才 / STEAM 四张平行卡并排。
   4 列后单卡内容宽约 272px（1440），不够再撑「左文 + 右图叠加」的横向分栏，
   所以卡内改成纵向分层：文案占满宽在上，图片通栏贴底、顶部渐隐融入底色。 */
.biz{padding:clamp(44px,4.2vw,64px) 0}
.biz-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.5vw,24px)}
.bcard{
  position:relative;overflow:hidden;border-radius:var(--r);
  padding:clamp(20px,1.8vw,28px) clamp(20px,1.8vw,28px) 0;
  min-height:clamp(330px,25vw,392px);display:flex;flex-direction:column;
}
.bc-head{display:flex;align-items:center;gap:9px;position:relative;z-index:var(--z-raised)}
.bc-ico{width:30px;height:30px;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.bc-k{font-size:clamp(18px,1.5vw,23px);font-weight:800;letter-spacing:.5px}
.bc-en{font-family:var(--ffn);font-size:11px;font-weight:700;letter-spacing:.8px}
.bc-body{
  position:relative;z-index:var(--z-raised);margin-top:clamp(18px,1.8vw,28px);
  flex:1;display:flex;flex-direction:column;
  padding-bottom:var(--bch);   /* 给底部图片带让位 */
}
/* 四张卡内容量不同，让「了解更多」统一贴到图片带上方对齐 */
.bc-body > *:nth-last-child(2){margin-bottom:auto}
.bc-brand{display:block;font-size:clamp(19px,1.6vw,25px);font-weight:800;letter-spacing:-.3px;line-height:1.25}
.bc-brand em{font-style:normal;font-family:var(--ffn);font-size:.52em;letter-spacing:1px;font-weight:700}
.bc-name{margin-top:6px;font-size:clamp(14px,1.1vw,16px);font-weight:700;line-height:1.5}
.bc-tags{margin-top:12px;font-size:clamp(12px,.92vw,13.5px);line-height:1.95;color:var(--ink-3)}
.bc-tags i{font-style:normal;opacity:.5;margin:0 3px}
.bc-body .btn{margin-top:clamp(16px,1.6vw,22px)}
.bc-photo{position:absolute;left:0;right:0;bottom:0;width:100%;height:var(--bch);z-index:var(--z-base)}
/* 四张业务卡底部统一用 SVG 线稿画布（点阵底 + 各自主题的轮廓图形），不再放照片。
   图形内容按主题走：教育=书/对话/地球，科技=芯片/看板，人才=人物/阶梯，STEAM=几何。
   颜色由卡内 --art-* 变量给，跟着各卡主色走。 */
.bc-photo-art{display:flex;align-items:flex-end}
.bc-photo-art svg{width:100%;height:100%;display:block}
.bc-photo-art .art-dot{fill:var(--art-dot)}
.bc-photo-art .art-geo{fill:none;stroke:var(--art-geo);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.bc-photo-art .art-fill{fill:var(--art-geo);stroke:none}

.b-edu{background:linear-gradient(150deg,#FDF2F2 0%,#FBE6E9 52%,#F8DEE3 100%);--art-dot:rgba(225,29,37,.2);--art-geo:rgba(225,29,37,.42)}
.b-edu .bc-ico{stroke:var(--red)}
.b-edu .bc-k{color:var(--red-d)}
.b-edu .bc-en{color:var(--red-d)}
.b-edu .bc-brand{color:var(--red-d)}

.b-tech{background:linear-gradient(150deg,#004C3C 0%,#00513F 46%,#0A6151 100%);color:#fff;--art-dot:rgba(255,255,255,.14);--art-geo:rgba(255,255,255,.46)}
.b-tech .bc-ico{stroke:#fff}
.b-tech .bc-k,.b-tech .bc-brand{color:#fff}
.b-tech .bc-en{color:rgba(255,255,255,.86)}
.b-tech .bc-tags{color:rgba(255,255,255,.76)}

/* 人才卡：2026-09-30 VI 转红（老板：整站看上去太蓝）。原用的是品牌蓝 --bl。
   四张卡去掉蓝之后，它接的是「深酒红底 + 白字」，与隔壁科技卡的墨绿深底
   同一档明度 —— 卡片组仍保持「浅红 / 深绿 / 深红 / 浅橙」的深浅交错，
   不会塌成四张浅色卡。 */
.b-tal{background:linear-gradient(150deg,#7E1216 0%,#6B0E13 46%,#94191E 100%);color:#fff;--art-dot:rgba(255,255,255,.14);--art-geo:rgba(255,255,255,.46)}
.b-tal .bc-ico{stroke:#fff}
.b-tal .bc-k{color:#fff}
.b-tal .bc-en{color:rgba(255,255,255,.86)}
.b-tal .bc-brand{color:#fff}
/* 按钮跟着各卡的主色走，四张卡才不会都挂品牌红 */
.b-tal .btn-line{color:#fff;border-color:rgba(255,255,255,.55)}
.b-tal .btn-line:hover{background:#fff;border-color:#fff;color:var(--red-d)}

/* 第四张 STEAM 卡：老板原图只有红 / 墨绿 / 蓝三色，这张是新增的。
   取暖橙（与品牌红同属暖色系，读作红系的延伸而非新引入的色相），
   且它在最右、与教育红卡之间隔着科技绿与人才蓝，并排也不撞。 */
.b-steam{background:linear-gradient(150deg,#FDF7EE 0%,#FBEEDC 54%,#F8E6CA 100%);--art-dot:rgba(184,106,18,.22);--art-geo:rgba(184,106,18,.5)}
.b-steam .bc-ico{stroke:var(--am)}
.b-steam .bc-k{color:var(--am)}
.b-steam .bc-en{color:var(--am)}
.b-steam .bc-brand{color:var(--ink)}
.b-steam .btn-line{color:var(--am);border-color:var(--am)}
.b-steam .btn-line:hover{background:var(--am);border-color:var(--am);color:#fff}

/* ---------------------------------------------------------------- 7. 配界 */
.pj{padding:clamp(44px,4.2vw,64px) 0;background:var(--paper-2)}
.pj-top{display:grid;grid-template-columns:1fr minmax(0,52%);gap:clamp(20px,3vw,56px);align-items:start}
.pj-copy{padding-top:clamp(8px,2.6vw,44px)}
.pj-copy h2{
  font-size:var(--h2-sec);font-weight:800;letter-spacing:-.6px;line-height:1.3;
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
}
.pj-copy h2 em{font-style:normal;font-family:var(--ffn);font-size:.6em;letter-spacing:1.2px;color:var(--red-d)}
.pj-copy h2 span{font-size:.62em;font-weight:600;color:var(--ink-2)}
.pj-copy p{margin-top:12px;color:var(--ink-2);font-size:clamp(14px,1.1vw,17px)}
/* 设备组：显示器 + 移动端机体并排，底边对齐。
   两者用负 margin 叠住一点，读作「一个平台、两种终端」，而不是两台无关的设备。 */
.pj-dev{display:flex;justify-content:center;align-items:flex-end}
/* 配界产品界面：真实平台截图（素材由用户提供），做成一台完整的显示器。
   截图已按 16/10 裁切、内缩掉原图自带的圆角区，并做锐化补偿。
   显示器整体收窄到右列的 86%，避免体量压过左侧文案。
   加手机后收到 84%：手机占 22%、负 margin 压回 7.8%，
   三者在 666px 的行里刚好排满又留出一点呼吸。 */
.pdev-monitor{width:84%;display:flex;flex-direction:column;align-items:center}
.pdev-screen{
  width:100%;border-radius:10px;overflow:hidden;background:#0F0B0A;
  border:8px solid #1A1512;border-bottom-width:15px;
  box-shadow:0 22px 48px rgba(30,10,4,.42);
}
.pdev-screen img{display:block;width:100%;height:auto}
.pdev-neck{
  width:13%;height:26px;
  background:linear-gradient(180deg,#1A1512 0%,#2E2521 62%,#1E1815 100%);
  border-radius:0 0 3px 3px;
}
.pdev-base{
  width:40%;height:10px;border-radius:999px;
  background:linear-gradient(180deg,#312722,#1C1512);
  box-shadow:0 10px 20px rgba(30,10,4,.28);
}
/* 移动端机体：形状与位置按效果图量取，手机宽约为显示器宽的 26%、
   与显示器重叠约自身宽度的 1/3，高度约为显示器的 3/4。
   宽度用百分比、圆角用百分比、内件用 em，三处都不写死像素，窄屏整体等比缩小时内部不会错位。
   屏内配色取自 pj-screen.jpg 顶栏实色（#A80203），与截图读作同一个产品；
   只放色块骨架 + 四个真数字，没有中文文案，所以不参与中英切换。 */
.pdev-phone{
  flex:none;width:22%;margin-left:-7.8%;margin-bottom:-1.5%;
  position:relative;z-index:var(--z-raised);
  aspect-ratio:9/19.3;
  font-size:clamp(4px,.52vw,7.4px);
  /* 机身黑边必须用 em，不能用百分比 padding：
     百分比 padding 相对的是「包含块的宽度」= 这一行的 666px，**不是机体自身的 146px**，
     写 4.2% 会算出 28px 的黑边，手机直接变成一块砖。
     em 跟着 font-size 走，与机体同步缩放，实测 3.3px ≈ 机身宽的 2.3%（真机约 2%）。 */
  padding:.45em;
  border-radius:13% / 6.4%;
  background:linear-gradient(158deg,#39424E 0%,#0D131A 44%,#1E2731 100%);
  box-shadow:0 24px 42px rgba(4,14,30,.44),inset 0 0 0 1px rgba(255,255,255,.08);
}
.pp-scr{
  height:100%;border-radius:9.5% / 5%;
  background:#fff;overflow:hidden;
  display:flex;flex-direction:column;
}
.pp-hd{
  flex:none;height:9.5%;display:flex;align-items:center;gap:.55em;
  padding:0 .8em;background:#A80203;
}
.pp-hd span:first-child{width:2em;height:.56em;border-radius:999px;background:rgba(255,255,255,.94)}
.pp-hd span:last-child{width:.6em;height:.6em;border-radius:50%;margin-left:auto;background:rgba(255,255,255,.55)}
.pp-body{flex:1;min-height:0;display:flex;flex-direction:column;gap:.8em;padding:.9em .8em;overflow:hidden}
.pp-cap{flex:none;height:.46em;width:44%;border-radius:999px;background:#D6DAE0}
/* 必须写 minmax(0,1fr)：1fr 的 min-width 是 auto（= 内容的 min-content），
   窄屏上「1,658」这种五位数字会把格子撑破，右列被 overflow:hidden 裁掉半个 */
.pp-kpi{flex:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6em}
.pp-kpi span{
  min-width:0;display:flex;flex-direction:column;gap:.4em;
  padding:.5em .55em;border-radius:.6em;background:#F5F6F8;border:1px solid #E7EAEE;
}
.pp-kpi b{font-family:var(--ffn);font-size:1.35em;line-height:1;font-weight:700;color:#2A2F36;white-space:nowrap}
.pp-kpi i{height:.4em;width:72%;border-radius:999px;background:#D3D8DE}
/* 柱图用 flex:1 吃掉剩余高度：固定高度 + 给列表挂 margin-top:auto 的话，
   余量会全堆在柱图和列表之间，屏幕中间裂出一个大洞（第一版就是）。
   底边细线当图表基线，否则柱子浮在空白里，读不出是个图表。 */
.pp-bars{flex:1;min-height:0;display:flex;align-items:flex-end;gap:.5em;border-bottom:1px solid #DCE1E7}
.pp-bars i{flex:1;height:var(--h);border-radius:.32em .32em 0 0;background:#C6CCD4}
.pp-bars i:nth-child(2n){background:#A80203}
/* 柱高原先写死在 6 个 <i> 的 style="--h:NN%" 上。2026-09-29 收成类名规则 ——
   内联样式是唯一压不动的一层，留着这张示意卡就没法整体调。 */
.pp-bars i:nth-child(1){--h:34%}
.pp-bars i:nth-child(2){--h:58%}
.pp-bars i:nth-child(3){--h:44%}
.pp-bars i:nth-child(4){--h:76%}
.pp-bars i:nth-child(5){--h:52%}
.pp-bars i:nth-child(6){--h:68%}
.pp-rows{flex:none;display:flex;flex-direction:column;gap:.6em}
.pp-rows i{height:1.45em;border-radius:.45em;background:#EDF0F3}
.pp-tab{
  flex:none;height:8.8%;display:flex;align-items:center;justify-content:space-around;
  border-top:1px solid #E7EAEE;background:#fff;
}
.pp-tab i{width:.82em;height:.82em;border-radius:50%;background:#C6CCD4}
.pp-tab i.on{background:#A80203}

.pj-feats{
  display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(10px,1.2vw,20px);
  margin-top:clamp(26px,2.8vw,42px);
}
.pj-feats li{text-align:center;padding:0 4px}
.pj-feats svg{
  width:clamp(32px,2.8vw,42px);height:auto;margin:0 auto;
  fill:none;stroke:var(--red);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.pj-feats b{display:block;margin-top:10px;font-size:clamp(13px,1.05vw,16px);font-weight:700}
.pj-feats span{display:block;margin-top:5px;font-size:clamp(11px,.88vw,13px);color:var(--ink-3);line-height:1.6}
.pj-feats span i{font-style:normal;opacity:.5;margin:0 2px}
.pj-cta{margin-top:clamp(22px,2.4vw,36px);text-align:right}

/* ---------------------------------------------------------------- 8. 部分合作单位 */
.cl{padding:clamp(44px,4.2vw,64px) 0}
.cl-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(22px,2.4vw,36px)}
.cl-head h2{font-size:var(--h2-sec);font-weight:800;letter-spacing:-.6px;line-height:1.3}
.cl-head p{margin-top:8px;color:var(--ink-2);font-size:clamp(13px,1vw,15px)}
.cl-more{display:flex;align-items:center;gap:10px;flex:none}
.arrow{
  width:36px;height:36px;border-radius:50%;border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;color:var(--ink-3);transition:all .16s;
}
.arrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.arrow:hover:not([disabled]){border-color:var(--red);color:var(--red)}
/* 按下反馈（2026-09-30 /polish 补）：原来只有 hover 换色，按下没有任何信号。
   transition 是 all .16s，transform 已在覆盖范围内。 */
.arrow:active:not([disabled]){transform:translateY(1px)}
.arrow[disabled]{opacity:.4;cursor:default}

/* 客户与院校 logo 墙：共 10 个（企业 5 + 院校 5），桌面端一行 5 个，正好两排。
   ① 用 flex-wrap 而不是固定列数 grid —— 窄断点下每行放不满时，末行只有一两个，
      grid 只能左对齐，flex 的 justify-content:center 才能让末行居中。
   ② 每个 logo 装进等高的 .lg 再 max-height:100% —— 十个 logo 的宽高比从 2.7 到 7.0 不等，
      直接写 height 的话，一旦受 max-width:100% 限制就被拉变形；
      装进等高的盒子才能等比缩放，且各张的视觉中线自动对齐。
   ③ 盒子高度由 78px 降到 46px：logo 从 5 个变 10 个后每格窄了一半，
      再按原高度算，都市环保（宽高比 6.98）只放得出 30px 高、别的却顶满，参差更明显。
      整体降下来后两者的差距收窄。 */
.cl-logos{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(12px,1.5vw,22px) clamp(10px,1.2vw,20px);
  padding:clamp(16px,1.8vw,26px) clamp(12px,1.6vw,24px);
  border:1px solid var(--line);border-radius:var(--r);background:#fff;
}
/* 一行 5 个：5 × (20% - 18px) + 4 个 gap 正好落在 100% 内。
   放不下的自动换行，第 6 个起落到第二排。 */
.lg{
  display:flex;align-items:center;justify-content:center;
  min-width:0;height:clamp(36px,3.4vw,48px);
  flex:1 1 calc(20% - 18px);
}
.lg img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
/* 十个 logo 按「视觉重量」配平的档位，只对没被格宽卡住的做收放：
   CISDI 与 XCMG 是纯字标，同高度下比「图形 + 文字」的组合标重得多，要收；
   都市环保自带一长串中文（宽高比 6.98），本就被格宽压到最小，不再额外收；
   五矿是窄比例组合标（2.70），同高度下反而显小，放到满高。 */
.lg-minmetals img{max-height:100%}
.lg-newhope img{max-height:94%}
.lg-cisdi img{max-height:62%}
.lg-cecpc img{max-height:88%}
.lg-xcmg img{max-height:78%}
/* 五个院校标一律顶格、不做收放：它们都是「校徽 + 中文 + 英文」三层结构，
   同一盒高下中文字只有企业标的一半大，再按视觉重量收就成了「比企业小一号」。
   顶格后与企业排的观感拉平。 */
.lg-tsinghua img,
.lg-sjtu img,
.lg-swu img,
.lg-bfsu img,
.lg-sisu img{max-height:100%}

.cl-cases{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,22px);margin-top:clamp(12px,1.4vw,22px)}
.ccard{
  border:1px solid var(--line);border-radius:var(--r);background:#fff;
  padding:clamp(18px,1.8vw,26px);
  transition:border-color .18s,box-shadow .18s,transform .18s;
}
.ccard:hover{border-color:var(--line-2);box-shadow:var(--sh-2);transform:translateY(-2px)}
.cc-ico{width:30px;height:30px;fill:none;stroke:var(--red);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ccard b{display:block;margin-top:14px;font-size:clamp(14px,1.1vw,16px);font-weight:800}
.cc-sub{display:block;margin-top:3px;font-size:clamp(12px,.92vw,13.5px);color:var(--ink-3)}
.ccard p{margin-top:12px;font-size:clamp(12px,.92vw,13.5px);color:var(--ink-2);line-height:1.75}
.cc-link{display:inline-block;margin-top:14px;color:var(--red);font-size:clamp(12px,.92vw,13.5px);font-weight:700}
/* 触控高度：13.5px 行高只有 20px，低于 WCAG 2.2 AA 2.5.8 的 24px 下限
   （2026-09-29 实测 64×20）。补内边距抬到 26px。 */
.cc-link{padding:3px 0;min-height:24px}
.cc-link i{font-style:normal;transition:transform .16s;display:inline-block}
.cc-link:hover i{transform:translateX(3px)}
/* 合作单位案例卡：数据来自后台「文章管理 → 合作单位展示」（勾了 showcase 的文章）。
   有封面就出 16:9 封面，没有封面就只出文字；同一行卡片高度由 grid 自动拉平。 */
.ccard-cover{display:block;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:var(--paper-2);margin-bottom:14px}
.ccard-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.ccard:hover .ccard-cover img{transform:scale(1.03)}
.ccard-cover + b{margin-top:0}   /* 有封面时不要再叠 .ccard b 的 margin-top（那条是给旧图标卡留的） */

/* ============ 企业视频弹窗（hero「视频介绍」按钮，2026-09-28） ============ */
.pj-videomask{position:fixed;inset:0;z-index:var(--z-toast);background:rgba(6,10,18,.78);display:none;align-items:center;justify-content:center;padding:24px}
.pj-videomask.show{display:flex}
.pj-videobox{position:relative;width:min(960px,94vw);background:#000;border-radius:12px;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.5)}
.pj-videobox video{display:block;width:100%;height:auto;max-height:78vh;background:#000}
.pj-vclose{position:absolute;top:10px;right:12px;z-index:var(--z-raised);width:38px;height:38px;border:none;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:22px;line-height:1;cursor:pointer}
.pj-vclose:hover{background:rgba(255,255,255,.3)}
@media (max-width:768px){
  .pj-videobox{width:96vw;border-radius:10px}
  .pj-videobox video{max-height:60vh}
}

/* ---------------------------------------------------------------- 9. 立足中国 · 服务全球 */
.gb{padding:clamp(44px,4.2vw,64px) 0;background:var(--paper-2)}
.gb-in{
  display:grid;grid-template-columns:minmax(0,29fr) minmax(0,42fr) minmax(0,29fr);
  gap:clamp(16px,2.2vw,38px);align-items:center;
}
.gb-list li{display:flex;gap:12px;padding:clamp(11px,1.1vw,16px) 0;border-bottom:1px dashed var(--line-2)}
.gb-list li:last-child{border-bottom:0}
.gb-list svg{width:24px;height:24px;flex:none;margin-top:2px;fill:none;stroke:var(--red);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.gb-list b{display:block;font-size:clamp(14px,1.15vw,17px);font-weight:800}
.gb-list span{display:block;margin-top:2px;font-size:clamp(12px,.92vw,13.5px);color:var(--ink-3);line-height:1.7}
.gb-list span i{font-style:normal;opacity:.5;margin:0 2px}

.gb-map{position:relative;aspect-ratio:2/1}
.gb-map > img{width:100%;height:100%}
.gb-photos{display:flex;flex-direction:column;gap:clamp(8px,.9vw,14px)}
.gb-photos figure{position:relative;margin:0;border-radius:var(--r-s);overflow:hidden;aspect-ratio:16/6}
.gb-photos img{width:100%;height:100%;object-fit:cover}
.gb-photos figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:16px 10px 7px;
  font-size:11.5px;font-weight:600;color:#fff;
  background:linear-gradient(180deg,transparent 0,rgba(6,16,30,.60) 38%,rgba(6,16,30,.94) 100%);
}

/* 地图与首屏共用的节点 */
.ndot{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;line-height:1.25;pointer-events:none}
.ndot::before{
  content:"";width:9px;height:9px;border-radius:50%;background:var(--red);
  box-shadow:0 0 0 4px rgba(225,29,37,.22);margin-bottom:6px;
}
.ndot b{font-size:11px;font-weight:700;white-space:nowrap}
.ndot i{font-style:normal;font-family:var(--ffn);font-size:7.5px;letter-spacing:.4px;white-space:nowrap;opacity:.6}
.nlink{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.nlink path{fill:none;stroke:var(--red);stroke-width:1.4;stroke-dasharray:5 5;vector-effect:non-scaling-stroke}
/* 首屏球体上节点改成「白色光点 + 白色细曲线」——老板那张图里的球是淡线框 + 星座式白线，
   跟区块 06 的红色水滴 pin 不是一套画法，别把 .gb-map 那套搬过来。 */
/* 2026-10-10 去掉首屏地名后，原「标签压在白字大标题上要加暗描边」的
   .hero .ndot b / .hero .ndot i 规则一并删除（已无消费者）。 */
.hero .ndot::before{
  width:7px;height:7px;margin-bottom:0;background:#fff;
  box-shadow:0 0 0 3px rgba(255,255,255,.16),0 0 12px 3px rgba(178,214,255,.5);
}
/* ⚠️ 光点落点补偿：.ndot 的 translate(-50%,-50%) 是按「光点 + 两行地名」整块居中算的，
   地名去掉后盒子由 35px 缩到 7px，光点会下坠约 14px。这里钉回原来的视觉位置
   （= 底图坐标点上方约 14px，与 .nlink 连线端点对齐）。
   改光点尺寸 / margin，或以后又加回文字，这个偏移量必须重算。 */
.hero .ndot{transform:translate(-50%,-17.5px)}
.hero .nlink path{stroke:rgba(255,255,255,.42);stroke-width:1;stroke-dasharray:none}
/* 区块 06 的节点做成水滴形 pin（圆头 + 下方尖角），尖角指向坐标点 —— 效果图就是这个样子。
   画法：border-radius 的 `50% 50% 50% 0` 把直角留在右下角，再 rotate(-45deg)，
   那个直角正好转到正下方成尖角。标签仍排在 pin 下面（.ndot 是 flex column）。
   ⚠️ 只作用于 .gb-map：首屏球体上的 .ndot 是直径 7px 的白色光点，别一起改了。 */
/* 让 pin 的「尖角」压在坐标点上（.ndot 默认是整体居中，pin 一多就会整体偏上）：
   尖角在 span 内的 y = margin-top + pin 高度，12px 的是 2+12=14，主 pin 是 4+19=23。 */
.gb-map .ndot{transform:translate(-50%,-14px)}
.gb-map .ndot-main{transform:translate(-50%,-23px)}
.gb-map .ndot::before{
  width:12px;height:12px;border-radius:50% 50% 50% 0;background:var(--red);
  transform:rotate(-45deg);margin:2px 0 9px;
  box-shadow:0 0 0 3px rgba(225,29,37,.16);
}
/* 中国是主场馆，给一个大一号的 pin，内部留一个白点（效果图里 pin 内是有图标的） */
.gb-map .ndot-main::before{
  width:19px;height:19px;margin:4px 0 11px;
  box-shadow:0 0 0 4px rgba(225,29,37,.18);
  background:radial-gradient(circle at 50% 50%,#fff 0 2.6px,rgba(255,255,255,0) 2.9px),var(--red);
}
.gb-map .ndot b{color:var(--ink-2);font-size:11.5px}
.gb-map .ndot-main b{color:var(--ink);font-size:13px}
/* 标签避让（用户 2026-09-29 报：英文模式下长标签压到邻点的红 pin）。
   拥挤点位改成「pin + 文字同行、左右侧排」——pin 尖仍钉在坐标点上，文字让开别的 pin。
   左侧排：缅甸 / 泰国 / 印尼（右邻是别的 pin）；右侧排：越南 / 新加坡（左邻是别的 pin）；
   中亚文字挪到 pin 上方（下方是中国大 pin，上方是空的）。欧洲、中国保持原来的 pin 上、文字下。
   ⚠️ 只作用于 .gb-map：首屏球体的三个点是白色光点 + 文字下排，别一起改。
   translate 的锚点：pin 宽 12px，中心在 6px —— 右排 -6px、左排 calc(-100% + 6px)，
   纵向与竖排公式一致（-14px），保证 pin 尖落点与改造前完全相同。 */
.gb-map .nd-ca{flex-direction:column-reverse;gap:0;transform:translate(-50%,-28px)}
.gb-map .nd-mm,.gb-map .nd-th,.gb-map .nd-id{
  flex-direction:row-reverse;gap:5px;
  transform:translate(calc(-100% + 6px),-14px);
}
.gb-map .nd-vn,.gb-map .nd-sg{
  flex-direction:row;gap:5px;transform:translate(-6px,-14px);
}
.gb-map .nd-ca::before,.gb-map .nd-mm::before,.gb-map .nd-th::before,
.gb-map .nd-id::before,.gb-map .nd-vn::before,.gb-map .nd-sg::before{margin:0}
/* 逐点微调（1440 下逐点量测矩形定的，pin 坐标不动、只挪文字）：
   - 中亚：文字挪到 pin 上方、左偏 20px —— 下方是中国大 pin 的光环，上方是空的；
     纵向 -28px 是 column-reverse 的锚点补偿（文字高 14.4px 顶到上面去，pin 尖落点不变）。
   - 中国：文字上提 8px，让开缅甸 pin 的光环（原位置只差 0.3px 贴上）。
   - 泰国：左排文字下沉 12px（斜下），从缅甸 pin 光环下方通过。
   - 越南：右排文字上提 3px，跟新加坡 pin 光环留出余量。 */
.gb-map .nd-ca b{transform:translateX(-20px)}
.gb-map .nd-cn b{transform:translateY(-8px)}
.gb-map .nd-th b{transform:translateY(12px)}
.gb-map .nd-vn b{transform:translateY(-3px)}
/* 手机端（≤640）：地图缩到 ~1/3 宽，pin 间距按比例变密而文字还是原尺寸，
   桌面那套偏移量不够用 —— 逐点量测（390px）后重排：
   - 标签字号 11.5→10（大 pin 13→11.5），所有英文长标签整体变短；
   - 中国标签从 pin 下方改到右侧（下方缅甸/泰国两颗 pin 挤在一起，哪边都让不开）；
   - 中亚标签再上提 8px（下方就是中国大 pin 的光环）；
   - 越南标签多提 1px（新加坡 pin 光环余量只剩 1px）。 */
@media (max-width:640px){
  .gb-map .ndot b{font-size:10px}
  .gb-map .ndot-main b{font-size:11.5px}
  .gb-map .nd-ca{transform:translate(-50%,-25px)}
  .gb-map .nd-ca b{transform:translateX(-20px) translateY(-8px)}
  .gb-map .ndot-main{flex-direction:row;gap:5px;transform:translate(-9.5px,-19px)}
  .gb-map .ndot-main::before{margin:0}
  .gb-map .nd-vn b{transform:translateY(-4px)}
}
/* 连线：细虚线，从中国向外发散（照搬老板那张图里的画法） */
.gb-map .nlink path{stroke-width:1;stroke-dasharray:3.5 3.5;stroke-opacity:.55}
/* 点位坐标：百分比 = 该点在 world-map.webp 里的相对坐标，照设计图取的，不做地理纠正。
   2026-09-29 收成类名（原先写在各 <span> 的 style 里 —— 内联样式任何样式层都改不动）。
   首屏球体与区块 06 的点阵地图共用同一套值，改坐标只改这里。
   ⚠️ 挪点时必须与上面 .nlink 的 SVG 路径一起改（首屏），否则线会飘在半空。 */
.nd-eu{left:51.55%;top:31.22%}   /* 欧洲 */
.nd-ca{left:68.53%;top:29.81%}   /* 中亚 */
.nd-cn{left:74.58%;top:34.40%}   /* 中国 */
.nd-mm{left:71.40%;top:49.26%}   /* 缅甸 */
.nd-sea{left:76.50%;top:52.00%}  /* 东南亚（仅首屏） */
.nd-th{left:75.56%;top:54.64%}   /* 泰国 */
.nd-vn{left:81.08%;top:60.19%}   /* 越南 */
.nd-id{left:80.36%;top:67.21%}   /* 印尼 */
.nd-sg{left:86.97%;top:68.99%}   /* 新加坡 */

/* ---------------------------------------------------------------- 公益事业（首页 08）
   位置：插在「权威媒体报道」与「专业，源于可验证的实力」之间（用户 2026-09-29 指定）。
   口径沿革：
     · 2026-09-29 二次调整 = **轻量提及，不喧宾夺主**（大展示卡 → 只留「照片 + 标题」的
       横向条目，约 414×104；不另起灰底；标题降级成 20px 小标题）。
     · 2026-09-30 critique 后用户改口径 = **回到与相邻区块同级**：标题带改回与
       「权威媒体报道」「专业，源于可验证的实力」完全同一套 .cl-head（h2 24~36px +
       灰色副标），区块上下留白也回到标准值。卡片形态维持轻量不变，不回到大展示卡。
   注：底色仍跟随上一块白底 —— 用 --paper-2 会和下面同样是 --paper-2 的
   「可验证的实力」连成一整片大灰底（这是当初"喧宾夺主"的主因）。
   卡片跳转由后台决定（外链 / 站内文章 / 不跳转）：可点时渲染成 <a class="wfcard">，
   不可点时是 <article class="wfcard">，两者外观一致。 */
.wf{padding:clamp(44px,4.2vw,64px) 0}
.wf-more{
  font-size:14px;font-weight:700;color:var(--ink-3);text-decoration:none;
  border-bottom:1px solid transparent;transition:color .16s,border-color .16s,transform .16s;white-space:nowrap;
}
.wf-more:hover{color:var(--red-d);border-bottom-color:rgba(193,18,26,.35)}
/* 按下反馈（2026-09-30 /polish 补） */
.wf-more:active{transform:translateY(1px)}
.wf-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.3vw,20px)}
.wfcard{
  display:flex;align-items:center;gap:clamp(12px,1.1vw,16px);
  padding:10px;border:1px solid var(--line);border-radius:var(--r);background:#fff;
  transition:border-color .18s,box-shadow .18s,transform .18s;
}
a.wfcard{color:inherit;text-decoration:none;cursor:pointer}
a.wfcard:hover{border-color:var(--line-2);box-shadow:var(--sh-2)}
/* 按下反馈（2026-09-30 /polish 补） */
a.wfcard:active{transform:translateY(1px)}
.wf-photo{
  width:clamp(96px,7.6vw,120px);aspect-ratio:4/3;object-fit:cover;flex:none;display:block;
  border-radius:calc(var(--r) - 4px);background:var(--paper-3);
}
.wf-body{flex:1;min-width:0;display:flex;align-items:center;gap:10px}
.wfcard b{font-size:clamp(13.5px,1.05vw,15px);font-weight:700;color:var(--ink);line-height:1.55}
.wf-go{margin-left:auto;flex:none;font-size:14px;font-weight:700;color:var(--ink-3);transition:color .16s}
a.wfcard:hover .wf-go{color:var(--red-d)}
@media (max-width:1024px){ .wf-cards{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .wf-cards{grid-template-columns:1fr} }

/* ---------------------------------------------------------------- 10. 权威媒体报道 */
.med{padding:clamp(44px,4.2vw,64px) 0}
/* 横排翻页：做成 overflow-x 的滚动行，一行正好 5 张。
   原来 5 等分的 grid 也正好塞满一行，但 grid 不能滚 —— 标题右侧那对箭头没有可滚距离，
   永远停在 disabled。换成 flex 滚动行后卡片宽度仍按「扣除 4 个间距后 5 等分」算，
   视觉与原来一致；多出来的第 6 张起靠箭头整屏翻。
   ⚠️ 卡宽必须减 0.4px：calc 的除法会四舍五入，5 张加起来可能超出 0.5px，
   于是永远存在 1px 级的 scrollWidth，右箭头一开始就是可点的。 */
.med-cards{
  --med-gap:clamp(10px,1.2vw,20px);
  display:flex;align-items:stretch;gap:var(--med-gap);
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  /* 上下留 16px：卡片 hover 的阴影（0 6px 22px）和 focus 环才不会被 overflow 裁掉；
     左右 6px 给首尾卡片的 focus 环留位。
     ⚠️ 左右留了 padding 就必须配 scroll-padding-inline：
     snap 的「start」是把卡片起点对齐 snapport 起点，而 snapport 从 padding 盒起算，
     不补这 6px 的话浏览器会认为 scrollLeft=6 才是吸附位 —— 初始就偏 6px，
     左箭头一进页面就是可点的（实测踩到过）。 */
  padding:16px 6px;margin:-16px -6px;
  scroll-padding-inline:6px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.med-cards::-webkit-scrollbar{display:none}
.med-cards > .mcard{
  flex:0 0 calc((100% - 4 * var(--med-gap)) / 5 - 0.4px);
  scroll-snap-align:start;
}
.mcard{
  border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden;
  padding:clamp(14px,1.3vw,20px);display:flex;flex-direction:column;
  transition:border-color .18s,box-shadow .18s,transform .18s;
}
.mcard:hover{border-color:var(--line-2);box-shadow:var(--sh-2)}
/* 按下反馈（2026-09-30 /polish 补）。注意 .mcard 的 transition 只声明了
   border-color / box-shadow，transform 不在其中 —— 补进声明里，
   否则 1px 下沉会是瞬时的、跟另外两项不同步。 */
a.mcard:active{transform:translateY(1px)}
/* 有原文链接的媒体卡整张可点（PHP 渲染成 <a class="mcard">，在新窗口打开第三方原文） */
a.mcard{text-decoration:none;color:inherit;cursor:pointer}
.m-logo{display:flex;flex-direction:column;font-size:clamp(13px,1.05vw,16px);font-weight:800;line-height:1.1;min-height:38px}
.m-logo em{font-style:normal;font-family:var(--ffn);font-size:8px;letter-spacing:.3px;font-weight:700;opacity:.6}
/* 媒体标识的配色：按卡片顺序循环五色（各家报刊的惯用色）。
   2026-09-29：原先由 index.php 的 $pjMediaColors 数组 + 内联 style 输出，
   内联样式压不动，且数组在 PHP 里和这里各存一份。改成按序号上色，
   下面 .lg-* 那组显式类仍用于「无数据时的内置示例卡」。两套取值刻意一致。 */
.med-cards > .mcard:nth-child(5n+1) .m-logo{color:#D02A28}
.med-cards > .mcard:nth-child(5n+2) .m-logo{color:#1A1A1A}
.med-cards > .mcard:nth-child(5n+3) .m-logo{color:#B3141B}
.med-cards > .mcard:nth-child(5n+4) .m-logo{color:#0F4C8A}
.med-cards > .mcard:nth-child(5n+5) .m-logo{color:#B01B22}
.lg-rmw{color:#D02A28}
.lg-cq{color:#1A1A1A}
.lg-cns{color:#B3141B}
.lg-sy{color:#0F4C8A}
.lg-cn{color:#B01B22}
.m-thumb{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:6px;margin-top:10px}
.med-cards .m-thumb.m-thumb-bad{background:linear-gradient(135deg,#fdeef0,#eef1f0);color:var(--ink-3);font-size:12px;padding:10px;text-align:center}
.mcard p{margin-top:10px;font-size:clamp(11px,.9vw,13px);line-height:1.7;color:var(--ink-2)}

/* ---------------------------------------------------------------- 11. 专业，源于可验证的实力 */
.cert{padding:clamp(44px,4.2vw,64px) 0;background:var(--paper-2)}

/* 分栏：六个证书分类，点哪个只显示哪一类的卡。
   样式照参考图：纯文字标签 + 选中项下方一条红色短横线，整行底下一条浅灰通线；
   选中态是「深色字 + 红线」，不是红字（参考图里选中的那项字仍是近黑的）。
   ::after 用 scaleX 做展开动画，比改宽度省一次 layout。 */
.cert-tabs{
  display:flex;flex-wrap:wrap;gap:clamp(20px,2.6vw,42px);
  border-bottom:1px solid var(--line);
  margin-bottom:clamp(18px,1.8vw,28px);
}
.ctab{
  appearance:none;-webkit-appearance:none;font-family:inherit;
  border:0;background:none;border-radius:0;position:relative;
  padding:2px 0 14px;
  font-size:clamp(13px,1.05vw,15.5px);font-weight:700;letter-spacing:-.2px;
  color:var(--ink-3);cursor:pointer;transition:color .16s,transform .16s;
}
.ctab::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--red);border-radius:2px;
  transform:scaleX(0);transform-origin:left;opacity:1;
  transition:transform .2s,opacity .2s;
}
.ctab:hover{color:var(--ink)}
/* hover 预告（2026-09-30 /polish）：原来下划线只属于「已选中」那一项，
   按下去之前看不出会切到哪一类。这里让未选中的 tab 在 hover 时先拉出
   一条半透明的下划线 —— 它同时补上了另一个缺口：已选中的 tab 基色本来就是
   --ink，上面那条 `:hover{color:--ink}` 对它等于没写（实测 hover 前后同色）。 */
.ctab:hover::after{transform:scaleX(1);opacity:.35}
.ctab[aria-selected="true"]{color:var(--ink)}
/* ⚠️ 必须排在 .ctab:hover::after 之后：两条特异性同为 (0,2,0)，靠源码顺序取胜；
   顺序反了的话，hover 已选中的 tab 时下划线反而会淡到 0.35。 */
.ctab[aria-selected="true"]::after{transform:scaleX(1);opacity:1}
/* 按下反馈 */
.ctab:active{transform:translateY(1px)}
.ctab:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* 横排翻页：与「权威媒体报道」同一套写法（坑的说明见第 10 节注释）。
   一屏 5 张；切换分栏后卡片重排，箭头状态由 JS 重新同步。 */
.cert-cards{
  --cert-gap:clamp(10px,1.2vw,20px);
  display:flex;align-items:stretch;gap:var(--cert-gap);
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  padding:16px 6px;margin:-16px -6px;
  scroll-padding-inline:6px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.cert-cards::-webkit-scrollbar{display:none}
.cert-cards > .cc2{
  flex:0 0 calc((100% - 4 * var(--cert-gap)) / 5 - 0.4px);
  scroll-snap-align:start;
}
/* 被分栏过滤掉的卡片。hidden 默认就是 display:none，
   显式再写一遍，防止将来给 .cc2 加 display 时把它顶掉 */
.cert-cards > [hidden]{display:none}
.cc2{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(12px,1.1vw,18px);transition:box-shadow .18s,border-color .18s;
}
.cc2:hover{box-shadow:var(--sh-2);border-color:var(--line-2)}
.cc2 .sheet{
  aspect-ratio:4/3;border-radius:6px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;gap:5px;padding:10px;
  border:2px solid #C9A24A;background:linear-gradient(150deg,#FFFDF6,#FBF3DE);
}
.cc2 .sheet b{font-size:clamp(11px,.9vw,13.5px);font-weight:800;color:#8A6B1E;line-height:1.35}
.cc2 .sheet em{font-style:normal;font-family:var(--ffn);font-size:7.5px;letter-spacing:.4px;color:#A98B3F}
.cc2 .cp-name{display:block;margin-top:11px;font-size:clamp(11.5px,.92vw,14px);font-weight:700}
.cc2 .cp-en{display:block;margin-top:3px;font-size:11px;color:var(--ink-3)}
.t-rose .sheet{border-color:#D08A94;background:linear-gradient(150deg,#FFF9FA,#FBE9EC)}
.t-rose .sheet b{color:#9E3B48}.t-rose .sheet em{color:#B9646F}
.t-jade .sheet{border-color:#7FA894;background:linear-gradient(150deg,#F8FCFA,#E4F1EB)}
.t-jade .sheet b{color:#22624A}.t-jade .sheet em{color:#4E8069}
.t-blue .sheet{border-color:#7C9BC4;background:linear-gradient(150deg,#F8FBFF,#E4EEF9)}
.t-blue .sheet b{color:#27527F}.t-blue .sheet em{color:#54749C}

/* ---- 后台「企业资质」上传的真实证书卡（2026-09-28）----
   与占位卡共用 .cc2 外壳；.sheet-photo 把 4:3 描边占位框换成 16:9 照片。
   缩略图由后台 GD 按 16:9 居中裁切，这里 object-fit:cover 只是兜底
   （GD 不可用时 thumb=img，靠 CSS 裁出 16:9）。点击图看原图（灯箱在 main.js）。 */
.cc2.cc2-real{padding:clamp(10px,.9vw,14px)}
.cc2.cc2-real .sheet{aspect-ratio:16/9;border:0;padding:0;background:#eef1f5;overflow:hidden}
.cc2.cc2-real .sheet img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in;transition:transform .25s}
.cc2.cc2-real .sheet:hover img{transform:scale(1.03)}
.cc2.cc2-real .cp-name{margin-top:9px}
/* 第三行显示的是「类别」徽标（占位卡的第三行是副标 cp-en，两者语义不同）。
   四色沿用品牌语言：金=国内 / 蓝=海外 / 绿=校企 / 玫红=知识产权 */
.cc2.cc2-real .cp-cat{display:block;margin-top:4px;font-size:11px;color:var(--ink-3)}
.cc2.cc2-real .cp-cat::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;vertical-align:1px;background:currentColor}
.cp-cat-domestic{color:#8A6B1E}
.cp-cat-overseas{color:#27527F}
.cp-cat-school{color:#22624A}
.cp-cat-ip{color:#9E3B48}
/* 灯箱：点缩略图看原图。z-index 要压过站点头部下拉（--z-dropdown） */
.pj-lightbox{
  position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;
  padding:4vh 4vw;background:rgba(30,6,9,.88);
  opacity:0;pointer-events:none;transition:opacity .2s;
}
.pj-lightbox.show{opacity:1;pointer-events:auto}
.pj-lightbox img{max-width:100%;max-height:92vh;border-radius:8px;box-shadow:0 24px 80px rgba(0,0,0,.5)}
.pj-lightbox .lb-title{
  position:absolute;left:50%;bottom:3.5vh;transform:translateX(-50%);
  color:rgba(255,255,255,.92);font-size:14px;letter-spacing:.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80vw;
}
.pj-lightbox .lb-close{
  position:absolute;top:18px;right:22px;width:44px;height:44px;border:0;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;font-size:26px;line-height:1;cursor:pointer;
}
.pj-lightbox .lb-close:hover{background:rgba(255,255,255,.24)}

/* ---------------------------------------------------------------- 12. 集团品牌矩阵 */
.br{padding:clamp(44px,4.2vw,64px) 0}
.br-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.5vw,24px)}
.bcard2{
  border:1px solid var(--line);border-radius:var(--r);background:#fff;
  padding:0 0 clamp(20px,1.8vw,28px);overflow:hidden;
  display:flex;flex-direction:column;align-items:center;
}
.bcard2::before{content:"";display:block;width:100%;height:6px}
.bar-red::before{background:var(--red)}
.bar-green::before{background:var(--gn)}
/* 三条彩条原为 红 / 墨绿 / 蓝，2026-09-30 去蓝：蓝条改走暖橙 --am，
   三张战略伙伴卡变成 红 / 墨绿 / 暖橙，与业务卡四色的暖色族一致。 */
.bar-blue::before{background:var(--am)}
.b2-logo{margin:clamp(24px,2.4vw,38px) 0 0;display:flex;align-items:center;justify-content:center;min-height:52px}
.b2-logo img{height:46px;width:auto}
.b2-word{font-size:clamp(22px,1.9vw,28px);font-weight:800;letter-spacing:-.5px}
.b2-word em{font-style:normal;font-family:var(--ffn);font-size:.5em;letter-spacing:1.2px;color:var(--gn)}
.b2-word.hey{color:var(--red);font-family:var(--ffn)}
.b2-slogan{
  margin-top:clamp(14px,1.4vw,22px);text-align:center;padding:0 clamp(18px,1.6vw,28px);
  font-size:clamp(12px,.95vw,14px);line-height:1.85;color:var(--ink-2);
}
.b2-slogan i{font-style:normal;opacity:.5;margin:0 2px}

/* ---------------------------------------------------------------- 13. 尾部 CTA */
.cta{position:relative;overflow:hidden;padding:clamp(56px,5.4vw,86px) 0;color:#fff;text-align:center}
/* 尾部 CTA 与首屏共用「深色夜空 + 底部暖橙地平线光晕」这套配方，
   2026-09-30 一并由蓝转红，两片天空的色相族保持一致（改首屏时别忘了这里）。 */
.cta-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(110% 78% at 50% 106%, #F2B673 0%, rgba(238,158,96,.55) 15%, rgba(190,92,66,.26) 32%, rgba(56,22,12,0) 58%),
    linear-gradient(180deg,#190708 0%,#3A1018 40%,#6E1E1D 72%,#A8583A 100%);
}
.cta-bg::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:22%;opacity:.92;
  background:linear-gradient(180deg,#200A10 0%,#100406 100%);
  clip-path:polygon(0% 100%,0% 74%,3% 74%,3% 60%,6% 60%,6% 82%,9% 82%,9% 52%,12% 52%,12% 76%,16% 76%,16% 46%,
    20% 46%,20% 80%,24% 80%,24% 58%,28% 58%,28% 42%,32% 42%,32% 78%,36% 78%,36% 56%,40% 56%,40% 84%,
    44% 84%,44% 48%,48% 48%,48% 74%,52% 74%,52% 60%,56% 60%,56% 82%,60% 82%,60% 50%,64% 50%,64% 76%,
    68% 76%,68% 56%,72% 56%,72% 80%,76% 80%,76% 44%,80% 44%,80% 72%,84% 72%,84% 62%,88% 62%,88% 84%,
    92% 84%,92% 54%,96% 54%,96% 70%,100% 70%,100% 100%);
}
.cta-in{position:relative;z-index:var(--z-raised)}
.cta h2{
  font-size:clamp(24px,2.8vw,40px);font-weight:800;letter-spacing:-.8px;line-height:1.32;
  text-shadow:0 2px 20px rgba(30,6,8,.5);
}
.cta p{
  margin-top:14px;font-size:clamp(13px,1.1vw,17px);color:rgba(255,255,255,.9);
  text-shadow:0 1px 14px rgba(30,6,8,.5);
}
.cta .hero-btns{justify-content:center}

/* ---------------------------------------------------------------- 14. 页脚 */
.foot{padding:clamp(44px,4.6vw,72px) 0 clamp(22px,2.2vw,30px);background:#130F0E;color:rgba(255,255,255,.72)}
.ft-in{display:grid;grid-template-columns:minmax(0,26%) 1fr;gap:clamp(24px,3vw,56px)}
/* 深色页脚 logo：白字镂空版自带透明底，白底贴牌框已拆（2026-09-30）。 */
.ft-brand img{display:block;height:44px;width:auto}
.ft-brand p{margin-top:14px;font-size:13px;color:rgba(255,255,255,.6)}
.ft-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,34px)}
.ft-nav > div{display:flex;flex-direction:column;gap:9px}
.ft-nav b{color:#fff;font-size:14px;font-weight:800;margin-bottom:3px}
.ft-nav a,.ft-nav span{font-size:13px;color:rgba(255,255,255,.66);transition:color .16s;line-height:1.6}
/* 页脚链接的触控高度：13px × 1.6 只有 20.8px，低于 WCAG 2.2 AA 的
   2.5.8 Target Size (Minimum) 下限 24×24（实测 350×21）。补 2px 上下内边距
   抬到 24.8px；行距仍由 gap:9px 控制，视觉几乎无变化。2026-09-29 补。 */
.ft-nav a{display:inline-block;padding:2px 0;min-height:24px}
.ft-nav a:hover{color:#fff}
.ft-bottom{
  margin-top:clamp(28px,3vw,46px);padding-top:20px;border-top:1px solid rgba(255,255,255,.10);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:12px;color:rgba(255,255,255,.5);
}

/* ---------------------------------------------------------------- 15. 滚入渐显 */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.22,.7,.3,1),transform .7s cubic-bezier(.22,.7,.3,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
}

/* ---------------------------------------------------------------- 16. 响应式 */
/* 英文文案比中文长得多，桌面档位把右侧照片收窄，给文字让出位置。
   用 min-width 包一层是为了不覆盖移动端那个 width:100%（属性选择器特异性更高） */
@media (min-width:769px){
  html[lang="en"] .hero-photo{width:48%}
}
@media (max-width:1280px){
  :root{--pad:32px}
  .hd-tag{display:none}
  .hero-chips li{font-size:13px}
  .gb-in{grid-template-columns:minmax(0,32%) minmax(0,36%) minmax(0,28%)}
}
@media (max-width:1120px){
  .hd-nav > ul{gap:clamp(8px,1.2vw,16px)}
  .hd-nav > ul > li > a{font-size:14px}
  .hero-copy h1{letter-spacing:-1px}
  .about-in{grid-template-columns:26fr 54fr 20fr;gap:18px}
  .pj-feats{grid-template-columns:repeat(5,1fr);gap:10px}
  /* 一行 5 张在 1120 下只剩 202px 宽，太挤；降到 3 张，靠箭头翻 */
  .med-cards > .mcard{flex-basis:calc((100% - 2 * var(--med-gap)) / 3 - 0.4px)}
  .cert-cards > .cc2{flex-basis:calc((100% - 2 * var(--cert-gap)) / 3 - 0.4px)}
}
@media (max-width:1024px){
  .hd-nav > ul > li > a{font-size:13.5px;padding:20px 0}
  .hero-in{padding-bottom:84px}
  /* 右侧照片是背景层，文字得完全避开它的实心区；照片左缘还有一段渐隐，可以容忍轻微压边 */
  .hero-copy{max-width:54%}
  .hero-photo{width:56%}
  /* 球体只降透明度：位置与直径仍走基础规则（按宽度成比例），
     这里若再写 width/right 会和基础规则的 left 打架（两者都set时 right 被丢弃） */
  .hero-globe{opacity:.6}
  .hero-chips ul{height:auto;flex-wrap:wrap;justify-content:center;gap:8px 18px;padding:12px 0}
  /* 简介：图与正文并排、数据卡通栏横排。
     原来让图跨整行变 16/7 横图，竖构图的楼体被裁成幕墙特写，认不出是楼 */
  .about-in{grid-template-columns:34fr 66fr}
  /* 这里不能用 aspect-ratio：grid item 的自动最小尺寸会由 aspect-ratio 反推，
     竖比例把 min-content 宽度算成 400+，直接顶破 34fr 的列宽盖住文案。
     靠 align-items:stretch 撑高即可，另加 min-width:0 兜底 */
  .about-photo{grid-column:1/2;height:auto;min-width:0}
  .about-copy{grid-column:2/3;min-width:0}
  /* 数据卡通栏：竖条的虚线轴横过来读不出顺序，换成每格顶部一条短红线 */
  .about-stats{grid-column:1/-1;align-self:stretch}
  .about-stats ul{
    display:grid;grid-template-columns:repeat(4,1fr);
    gap:clamp(12px,1.2vw,18px) clamp(10px,.9vw,14px);
    margin-top:clamp(14px,1.6vw,20px);
  }
  .about-stats ul::before,
  .about-stats li::before{display:none}
  .about-stats li{padding-left:0;padding-top:9px;margin-bottom:0;border-top:2px solid rgba(225,29,37,.16)}
  .biz-cards{grid-template-columns:1fr 1fr}
  /* 2 列后单卡宽约 420~480px。底部画布是 SVG，宽高比越扁纵向裁切越多，
     要让容器比例（单卡宽 / 画布高）保持在 3.2 以内，图形底部才不会被切掉，
     所以这一档的画布带要比 4 列时明显加高。 */
  :root{--bch:clamp(136px,15vw,176px)}
  .pj-top{grid-template-columns:1fr}
  .pj-dev{max-width:640px;margin:26px auto 0}
  .gb-in{grid-template-columns:1fr 1fr}
  .gb-list{grid-column:1/-1}
  .gb-photos{grid-column:1/-1;flex-direction:row}
  .gb-photos figure{flex:1}
  .lg{flex-basis:30%}
  .cl-cases{grid-template-columns:1fr}
  .br-cards{grid-template-columns:1fr}
  .bcard2{align-items:flex-start}
  /* 卡片左对齐后 logo 容器没有水平内边距，会贴死左缘（09-28 用户反馈） */
  .b2-logo{padding:0 var(--pad)}
  .b2-slogan{text-align:left}
  .ft-in{grid-template-columns:1fr}
}
@media (max-width:768px){
  :root{--pad:20px;--r:12px}
  .hd-in{height:60px}
  .hd-logo{height:30px}
  /* 关键：backdrop-filter 会让 .hd 成为 fixed 子元素的包含块，
     抽屉的 top/bottom 就会按头部高度算，整条抽屉塌成 0 高。 */
  .hd{backdrop-filter:none;background:#fff}
  .hd-act .ico-btn{display:none}
  .hd-burger{display:flex}
  /* 抽屉式导航 */
  .hd-nav{
    display:block;position:fixed;left:0;right:0;top:60px;bottom:0;z-index:var(--z-raised);
    background:#fff;border-top:1px solid var(--line);
    padding:6px var(--pad) 48px;overflow-y:auto;
    transform:translateX(-101%);transition:transform .26s cubic-bezier(.22,.7,.3,1);
  }
  body.menu-open .hd-nav{transform:none}
  body.menu-open{overflow:hidden}
  .hd-nav > ul{flex-direction:column;align-items:stretch;gap:0;justify-content:flex-start}
  .hd-nav > ul > li > a{padding:15px 0;border-bottom:1px solid var(--line);font-size:16px}
  .hd-nav > ul > li > a.on::after{display:none}
  .hd-nav .sub{position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;border-radius:0;padding:2px 0 10px 14px;min-width:0;background:transparent}
  .hd-nav .sub a{padding:8px 0;font-size:14px;color:var(--ink-2)}
  .hero{height:auto;padding:0}
  /* 移动端首屏 auto 高，照片还得当背景层，所以改用下内边距给它腾出位置，
     否则容易被底部标签条压得只剩一条 */
  .hero-in{flex-direction:column;align-items:flex-start;padding:36px var(--pad) 168px}
  .hero-copy{max-width:100%}
  /* 渐隐方向从「左缘」换成「上缘」，像从底部升起来接住文字 */
  .hero-photo{width:100%;top:auto;height:56%}
  .hero-photo .hp-img{
    object-position:52% 44%;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.4) 16%,#000 44%);
    mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.4) 16%,#000 44%);
  }
  .hero-globe{display:none}
  .hero-scrim{display:none}   /* 手机上球不显示，白点干扰不存在；留着只会把左边天空压暗、照片左缘压脏 */
  .hero-city,.hero-city-2{height:22%}
  .hero-chips{position:static;background:rgba(6,18,34,.9)}
  .hero-chips ul{justify-content:flex-start;gap:8px 16px;padding:14px 0}
  .hero-chips li{font-size:12.5px}
  .about-in{grid-template-columns:1fr}
  /* 1/1 时容器比图片矮，楼顶被裁掉一截、天空也没了；4/5 让图片完整落进去 */
  .about-photo{grid-column:auto;aspect-ratio:4/5;height:auto;min-height:0;min-width:0}
  .about-copy{grid-column:auto;min-width:0}
  .about-stats{grid-column:auto;align-self:stretch}
  .about-stats ul{grid-template-columns:1fr 1fr}
  .biz-cards{grid-template-columns:1fr}
  .bcard{min-height:0;padding-bottom:clamp(20px,1.8vw,28px)}
  .bc-body{max-width:100%;padding-bottom:0}
  .bc-photo{position:relative;height:auto;width:100%;margin-top:18px}
  .bc-photo-art{height:auto;aspect-ratio:16/7}
  .pj-feats{grid-template-columns:1fr 1fr;gap:22px 12px}
  .pj-cta{text-align:left}
  /* 单列后右列不再是窄栏，显示器可以放宽；但不能撑到 100%，
     右侧得留出手机的位置，否则「显示器 + 负 margin 的手机」会顶破容器 */
  .pdev-monitor{width:84%}
  /* 小屏上手机只剩 70px 上下，字号同步收一档，屏内色块才不糊成一团 */
  .pdev-phone{width:22%;margin-left:-7.8%;font-size:clamp(4.2px,.98vw,6.4px)}
  .cl-head{flex-direction:column;align-items:flex-start}
  /* 移动端一行两个；末行只剩一个时要居中，所以不能改 justify-content
     （早期那条 flex-start 是给「色块 + 名称」左对齐版本留的，早已失效，删掉）。 */
  .lg{flex-basis:40%}
  .gb-in{grid-template-columns:1fr}
  .gb-photos{flex-direction:column}
  .gb-photos figure{aspect-ratio:16/8}
  .med-cards > .mcard{flex-basis:calc((100% - var(--med-gap)) / 2 - 0.4px)}
  .cert-cards > .cc2{flex-basis:calc((100% - var(--cert-gap)) / 2 - 0.4px)}
  /* 六个分栏标签在 390 这类窄屏会折成「5 + 1」，末项孤零零一行很难看。
     改成单行横滑（下划线挂在这个容器上，内容滚动时线不动）；
     别再让它 wrap，否则末行的选中项会脱离底下那条通线。 */
  .cert-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
  .cert-tabs::-webkit-scrollbar{display:none}
  .ctab{flex:0 0 auto}
  .b2-logo img{height:40px}
  .ft-nav{grid-template-columns:1fr;gap:22px}
  .ft-bottom{flex-direction:column;gap:8px}
}