/* ==========================================================================
   Sections · P1 CONNECT / P2 GLOBAL RESOURCES / P3 WHY / P4 COOPERATION
   ========================================================================== */
.section{ position:relative; padding:var(--sec-y) 0; }

.shead{ margin-bottom:clamp(36px,4vw,64px); max-width:820px; }
.shead--center{ margin-left:auto; margin-right:auto; text-align:center; }
.shead__sub{ color:var(--muted); font-size:15px; margin-top:14px; }
.section--connect .h2,
.section--resources .h2{
  color:#f7faff;
  text-shadow:0 3px 18px rgba(0,0,0,.72), 0 0 34px rgba(20,91,185,.22);
}

/* ==========================================================================
   P1 · CONNECT
   ========================================================================== */
.section--connect{ padding-top:calc(var(--mq-h) + 152px); }

.c-hero{ max-width:940px; }
@media (min-width:1700px){
  .c-hero{ max-width:1120px; }
  .c-hero__lead{ max-width:760px; font-size:17px; }
}
.c-hero__title{
  font-size:var(--h1);
  font-weight:900; line-height:1.06; letter-spacing:-.02em;
  margin:16px 0 0;
}
.c-hero__title .line:not(.grad){
  color:#fff;
  text-shadow:0 4px 24px rgba(0,0,0,.76);
}
.c-hero__title .grad{
  filter:drop-shadow(0 4px 15px rgba(0,0,0,.58));
}
.c-hero__lead{ color:var(--muted); font-size:16px; max-width:660px; margin-top:22px; }

.c-hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }

/* 需求入口：放在 CTA 下方的方块 */
.c-hero__needs{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px; margin-top:26px; max-width:720px;
}
.c-hero__needs a{
  position:relative;
  display:flex; flex-direction:column; justify-content:flex-end;
  min-height:132px; padding:18px 20px;
  border:1px solid var(--line-2); border-radius:14px;
  background:rgba(10,14,26,.55);
  backdrop-filter:blur(8px);
  overflow:hidden;
  transition:border-color .3s, background-color .3s, transform .35s var(--e-out);
}
.c-hero__needs a::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(70% 80% at 100% 0%, rgba(22,119,255,.22), transparent 60%);
  opacity:0; transition:opacity .35s;
}
.c-hero__needs a:hover{ border-color:var(--hi); transform:translateY(-4px); background:rgba(10,14,26,.8); }
.c-hero__needs a:hover::after{ opacity:1; }
.need__idx{
  position:absolute; left:20px; top:18px;
  font-family:var(--f-en); font-size:12px; letter-spacing:.16em; color:var(--hi); opacity:.75;
}
.c-hero__needs b{ position:relative; z-index:1; font-size:20px; font-weight:800; letter-spacing:.01em; }
.c-hero__needs i{
  position:relative; z-index:1;
  font-family:var(--f-en); font-style:normal; font-size:10px;
  letter-spacing:.16em; color:var(--muted); margin-top:4px;
}
.c-hero__needs em{
  position:absolute; right:14px; bottom:12px; z-index:1;
  font-style:normal; font-size:15px; color:var(--hi);
  opacity:0; transform:translateX(-6px);
  transition:opacity .25s, transform .25s var(--e-out);
}
.c-hero__needs a:hover em{ opacity:1; transform:none; }

/* 0.2s 快速进入（首屏标题不等） */
.is-fast{ transition-duration:.2s !important; transition-delay:0ms !important; }
[data-split].is-fast .line > span{ transition-duration:.24s !important; transition-delay:0ms !important; }
.bigword--fast .w > i{ transition-duration:.2s !important; transition-delay:0ms !important; }

.svc-head{ margin:clamp(64px,7vw,110px) 0 clamp(24px,3vw,40px); scroll-margin-top:110px; }
/* 矩阵已经是这一屏的开头，标题再顶一段 margin 就比别的版块多出一截 */
.matrix-wrap > .svc-head:first-child{ margin-top:0; }
.svc-head__hint{ font-size:12.5px; color:var(--muted); opacity:.7; margin-top:10px; }

/* ---------- Spiral 循环展示（K95 式无限环形轮播） ---------- */
.spiral{
  position:relative;
  margin-top:clamp(64px,7vw,110px);
  height:clamp(640px,53vw,760px);
  /* 跟内容列同宽同中线；用真透视做盘旋，所以不能加 mask/overflow（会把 3D 压平） */
  perspective:1500px;
  perspective-origin:50% 46%;
  /* 命中层交给卡片：容器本身不吃点击，避免 z<0 的卡被 z=0 的命中平面拦截 */
  pointer-events:none;
}
/* 空标记：JS 的 scrollTo 直接对齐元素顶边，靠它把转盘顶到固定 Logo 下方 */
.anchor{ position:absolute; left:0; top:-104px; width:1px; height:1px; pointer-events:none; }
.spiral__track{ position:absolute; inset:0; transform-style:preserve-3d; pointer-events:none; }
.spiral__item{ backface-visibility:hidden; cursor:grab; }
.spiral__item:active{ cursor:grabbing; }
.spiral__item{
  position:absolute; left:50%; top:50%;
  width:clamp(286px,22.5vw,340px);
  aspect-ratio:1536 / 2752;      /* 跟卡面配图同比例 */
  will-change:transform,opacity;
  transform-origin:center center;
}

/* 客服卡：整张牌面就是配图，文字压在底部渐隐带上 */
.svc__card{
  position:relative; display:block;
  height:100%;
  border:1px solid var(--line);
  border-radius:18px;
  /* 注意：转盘每帧写 transform，这里绝对不能挂 backdrop-filter，
     否则 Chrome 每帧重算背板 → 卡顿 + 卡片闪没 */
  background:#0B1020;
  overflow:hidden;
}
.svc__art{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  /* 配图本身是暖金边框的深空图，压一点亮度让白字站得住 */
  filter:saturate(1.05) brightness(.94);
}
.svc__card::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(5,7,13,0) 38%, rgba(5,7,13,.55) 58%, rgba(5,7,13,.88) 76%, rgba(5,7,13,.97) 100%);
}
.svc__body{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:0 20px 20px;
}
.spotlight::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(320px circle at var(--x,50%) var(--y,50%), rgba(61,156,255,.12), transparent 65%);
  opacity:0; transition:opacity .6s linear; pointer-events:none;
}
.spotlight.is-lit::before{ opacity:1; transition-duration:.25s; }

.svc__card h4{
  font-size:26px; font-weight:800; margin:0 0 6px;
  text-shadow:0 2px 14px rgba(0,0,0,.7);
}
.svc__body p{
  font-size:14px; color:#C6D4EE; margin:0 0 18px;
  text-shadow:0 2px 12px rgba(0,0,0,.65);
}
.svc__card .btn{ pointer-events:none; }
/* 「立即联系」右侧：Telegram 纸飞机，纯白 */
.svc__card .btn svg{
  width:17px; height:17px; flex:none; fill:#fff;
  transition:transform .25s var(--e-out);
}
.svc__card:hover .btn svg{ transform:translateX(3px); }

/* ---------- 官方矩阵：上横条 / 中小框 / 下长方形 ---------- */
/* 矩阵现在是「官方矩阵」屏的第一块，段落间距全由 section 的上下留白给，
   这里再加 margin-top 就会比别处宽出一截。 */
.matrix-wrap{ margin-top:0; scroll-margin-top:90px; }
.omx{ display:flex; flex-direction:column; gap:var(--gap); }

.mcard__kicker{ font-family:var(--f-en); font-size:11px; letter-spacing:.16em; color:var(--hi); opacity:.8; display:block; }
.mcard__desc{ font-size:13.5px; color:var(--muted); display:block; }
.mcard__go{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--hi); min-height:32px; }
.mcard__go i{ font-style:normal; transition:transform .25s var(--e-out); }
.omx a:hover .mcard__go i{ transform:translateX(4px); }

/* 上：官方频道横条（全站唯一流光描边） */
.omx__wide{
  position:relative;
  display:flex; align-items:center; justify-content:space-between; gap:32px;
  min-height:150px; padding:26px 32px;
  border-radius:18px;
  background:transparent;
  overflow:hidden;
}
.omx__wide::before{
  content:''; position:absolute; z-index:0;
  left:50%; top:50%; width:130%; aspect-ratio:1; translate:-50% -50%;
  background:conic-gradient(transparent 0deg 248deg, var(--blue) 302deg, var(--hi) 332deg, transparent 360deg);
  animation:sheen 8s linear infinite; pointer-events:none;
}
.omx__wide::after{
  content:''; position:absolute; z-index:1; inset:1px;
  border-radius:17px;
  background:
    radial-gradient(70% 160% at 88% 0%, rgba(22,119,255,.20), transparent 62%),
    rgba(9,13,24,.95);
  pointer-events:none;
}
.omx__wide > *{ position:relative; z-index:2; }
@keyframes sheen{ to{ transform:rotate(360deg); } }
.omx__wideTxt{ display:block; max-width:760px; }
.omx__wideTxt h4{ font-size:clamp(22px,2.4vw,30px); font-weight:800; margin:10px 0 10px; }
.omx__wide .mcard__go{ font-size:14px; white-space:nowrap; }

/* 中：全渠道小框。图标统一 Telegram，底色和上面那排同一条蓝色梯度。 */
.omx__row{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.rcard{
  display:flex; align-items:center; gap:10px;
  min-height:64px; padding:12px 14px;
  border:1px solid rgba(255,255,255,.16); border-radius:12px;
  transition:transform .3s var(--e-out), box-shadow .3s, border-color .3s;
}
.rcard:hover{ transform:translateY(-3px); box-shadow:0 16px 34px -20px rgba(0,0,0,.85); }
.rcard svg{ width:19px; height:19px; flex:none; }
.rcard b{ font-size:13.5px; font-weight:700; display:block; }
.rcard span{ font-size:11px; display:block; }

.rcard--1{ background:linear-gradient(150deg,#04060C 0%,#0A1E43 55%,#103371 100%); }
.rcard--1 svg{ fill:#5AA6FF; }
.rcard--1 b{ color:#EAF3FF; }  .rcard--1 span{ color:rgba(226,238,255,.72); }

.rcard--2{ background:linear-gradient(150deg,#0B55C7 0%,#1677FF 60%,#2B8BFF 100%); }
.rcard--2 svg{ fill:#DCEBFF; }
.rcard--2 b{ color:#FFFFFF; }  .rcard--2 span{ color:rgba(255,255,255,.86); }

.rcard--3{ background:linear-gradient(150deg,#2B8BFF 0%,#69A9F0 55%,#9CC6F4 100%); border-color:rgba(255,255,255,.34); }
.rcard--3 svg{ fill:#0B3A86; }
.rcard--3 b{ color:#06192F; }  .rcard--3 span{ color:rgba(9,32,62,.80); }

.rcard--4{ background:linear-gradient(150deg,#FFFFFF 0%,#EEF6FF 40%,#C2DBF9 100%); border-color:rgba(10,14,23,.14); }
.rcard--4 svg{ fill:#0B4FB8; }
.rcard--4 b{ color:#0A0E17; }  .rcard--4 span{ color:#46556F; }

/* 下：四个长方形群组 */
.omx__cols{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--gap); }
.omx__col{
  position:relative;
  display:flex; flex-direction:column;
  min-height:392px; padding:28px 24px 22px;
  border:1px solid var(--line); border-radius:16px;
  background:var(--panel);
  backdrop-filter:blur(10px);
  overflow:hidden;
  transition:transform .4s var(--e-out), border-color .3s, background-color .3s;
}
.omx__col::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--grad); transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--e-out);
}
.omx__col:hover{ transform:translateY(-6px); }

/* 原「上压公群」那一列：换成五个小板块，纵向铺满同一格。
   配色沿用站内那条「由深到浅的蓝」，和优势卡、地球、上面那排小框同一套。 */
.omx__stack{ display:grid; grid-template-rows:repeat(5,minmax(0,1fr)); gap:8px; min-height:392px; }
.gcard{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.16); border-radius:12px;
  overflow:hidden;
  transition:transform .3s var(--e-out), box-shadow .3s, border-color .3s;
}
.gcard:hover{ transform:translateX(4px); box-shadow:0 16px 34px -20px rgba(0,0,0,.85); }
.gcard svg{ width:18px; height:18px; flex:none; }
.gcard b{ font-size:14px; font-weight:800; display:block; letter-spacing:.01em; }
.gcard span{ font-family:var(--f-en); font-size:17px; font-weight:700; display:block; margin-top:1px; }

.gcard--1{ background:linear-gradient(135deg,#04060C 0%,#0A1E43 100%); }
.gcard--1 svg{ fill:#4E9BFF; }
.gcard--1 b{ color:#E4EFFF; }  .gcard--1 span{ color:#6FB6FF; }

.gcard--2{ background:linear-gradient(135deg,#0B2C63 0%,#12417F 100%); }
.gcard--2 svg{ fill:#6FB6FF; }
.gcard--2 b{ color:#EAF3FF; }  .gcard--2 span{ color:#8CC8FF; }

.gcard--3{ background:linear-gradient(135deg,#0B55C7 0%,#1677FF 100%); }
.gcard--3 svg{ fill:#DCEBFF; }
.gcard--3 b{ color:#FFFFFF; }  .gcard--3 span{ color:#CFE6FF; }

.gcard--4{ background:linear-gradient(135deg,#2B8BFF 0%,#7FB2EC 100%); border-color:rgba(255,255,255,.32); }
.gcard--4 svg{ fill:#0B3A86; }
.gcard--4 b{ color:#06192F; }  .gcard--4 span{ color:#0F4CA8; }

.gcard--5{ background:linear-gradient(135deg,#DCEBFF 0%,#FFFFFF 100%); border-color:rgba(10,14,23,.14); }
.gcard--5 svg{ fill:#0B4FB8; }
.gcard--5 b{ color:#0A0E17; }  .gcard--5 span{ color:#1B4E96; }

.omx__col:hover::after{ transform:scaleX(1); }
.omx__col h4{ font-size:19px; font-weight:800; margin:10px 0 12px; }
.omx__col .mcard__desc{ flex:1; }
.omx__col .mcard__go{ margin-top:16px; }

/* 四张群组卡走一遍色板：白蓝 → 浅灰紫 → 黑蓝 → 纯黑 */
.omx__col:nth-child(1){ background:var(--card-wb);    border-color:var(--edge-light); }
.omx__col:nth-child(2){ background:var(--card-blue);  border-color:rgba(255,255,255,.24); }
.omx__col:nth-child(3){ background:var(--card-kb);    border-color:var(--edge-deep); }
.omx__col:nth-child(4){ background:var(--card-ink);   border-color:rgba(61,156,255,.22); }

.omx__col:nth-child(1) .mcard__kicker{ color:var(--on-light-4); opacity:1; }
.omx__col:nth-child(1) h4{ color:var(--on-light-1); }
.omx__col:nth-child(1) .mcard__desc{ color:var(--on-light-2); }
.omx__col:nth-child(1) .mcard__go{ color:var(--on-light-4); }

.omx__col:nth-child(2) .mcard__kicker{ color:#FFFFFF; opacity:.88; }
.omx__col:nth-child(2) h4{ color:#FFFFFF; }
.omx__col:nth-child(2) .mcard__desc{ color:#FFFFFF; opacity:.84; }
.omx__col:nth-child(2) .mcard__go{ color:#FFFFFF; }

.omx__col:nth-child(3) .mcard__kicker, .omx__col:nth-child(4) .mcard__kicker{ color:var(--on-dark-3); opacity:1; }
.omx__col:nth-child(3) h4, .omx__col:nth-child(4) h4{ color:var(--on-dark-1); }
.omx__col:nth-child(3) .mcard__desc, .omx__col:nth-child(4) .mcard__desc{ color:var(--on-dark-2); }

/* ---------- SCROLL 提示 ---------- */

/* ==========================================================================
   P2 · GLOBAL RESOURCES
   ========================================================================== */
.layers{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--gap);
  margin-bottom:clamp(56px,6vw,96px);
}
.layers__item{
  position:relative;
  padding:26px 24px 24px 26px;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
}
.layers__idx{
  font-family:var(--f-en); font-size:12px; letter-spacing:.16em;
  position:absolute; right:20px; top:22px;
}
.layers__item h4{ font-size:clamp(26px,2.2vw,30px); font-weight:800; margin:8px 0 10px; line-height:1.32; }
.layers__item > p:last-child{ font-size:13.5px; }

/* 三块沿用卡片色板：白蓝 → 实蓝 → 黑蓝 */
.layers__item:nth-child(1){ background:var(--card-wb);   border-color:var(--edge-light); }
.layers__item:nth-child(2){ background:var(--card-blue); border-color:rgba(255,255,255,.24); }
.layers__item:nth-child(3){ background:var(--card-kb);   border-color:var(--edge-deep); }

.layers__item:nth-child(1) .layers__idx{ color:var(--on-light-3); }
.layers__item:nth-child(1) .kicker{ color:var(--on-light-4); }
.layers__item:nth-child(1) h4{ color:var(--on-light-1); }
.layers__item:nth-child(1) > p:last-child{ color:var(--on-light-2); }

.layers__item:nth-child(2) .layers__idx, .layers__item:nth-child(2) .kicker, .layers__item:nth-child(2) h4{ color:#FFFFFF; opacity:1; }
.layers__item:nth-child(2) > p:last-child{ color:#FFFFFF; opacity:.84; }

.layers__item:nth-child(3) .layers__idx{ color:var(--on-dark-2); }
.layers__item:nth-child(3) .kicker{ color:var(--on-dark-3); }
.layers__item:nth-child(3) h4{ color:var(--on-dark-1); }
.layers__item:nth-child(3) > p:last-child{ color:var(--on-dark-2); }

.network{
  display:grid; grid-template-columns:minmax(0,1.32fr) minmax(0,.88fr);
  gap:clamp(24px,3vw,48px);
  align-items:center;
}
/* 地球给足地方：板块提起来能飘到 1.43 倍半径，展示区太小就会切到边 */
.network__globe{ position:relative; aspect-ratio:1/1; max-height:86vh; margin-inline:auto; width:100%; }
#plateCanvas{ width:100%; height:100%; touch-action:pan-y; display:block; }
.network__lead{ font-size:clamp(18px,1.7vw,24px); font-weight:700; margin:12px 0 26px; line-height:1.5; }
.taggroup + .taggroup{ margin-top:26px; }
/* 「收量渠道类型」跟「覆盖国家」同号 */
.taggroup__t{ font-size:clamp(18px,1.7vw,24px); font-weight:700; color:var(--text); margin-bottom:14px; line-height:1.5; }
.taglist{ display:flex; flex-wrap:wrap; gap:7px; }
.taglist li{
  position:relative; z-index:0;
  font-size:16.5px; color:var(--muted);
  padding:8px 16px; border:1px solid var(--line); border-radius:10px;
  background:rgba(10,14,26,.45);
  transition:color .25s, border-color .25s, box-shadow .25s, transform .25s;
}
/* 渐变没法直接 transition，用一层伪元素推透明度。
   它只铺到 padding box，不会渗到 border 底下——暗态才不会露出一圈白边。 */
.taglist li::before{
  content:''; position:absolute; inset:0; border-radius:inherit; z-index:-1;
  background:linear-gradient(135deg,#FFFFFF 0%,#E4F0FF 48%,#B9D8FF 100%);
  opacity:0; transition:opacity .25s;
}
/* 选中 / 悬停：白→蓝渐进，文字压成深蓝 */
.taglist li:hover::before, .taglist li.is-on::before{ opacity:1; }
.taglist li:hover, .taglist li.is-on{
  color:#0B2C5E; border-color:#CFE3FF;
  box-shadow:0 6px 20px rgba(61,156,255,.28);
  transform:translateY(-1px);
}
.taglist--alt li{ border-radius:999px; }

/* ==========================================================================
   Bento · 七星版图一览
   编辑式排版：超大压缩字重的数字 + 等宽小标签 + 卡片左右错位
   两列各自成流，卡片用 --insetL / --insetR 让出一侧，形成参差节奏
   ========================================================================== */
.bento{ margin-top:clamp(64px,7vw,120px); }
.bento__top{ margin-bottom:clamp(28px,3.4vw,52px); }
.bento__boxes{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); align-items:start; }
.bento__col{ display:flex; flex-direction:column; gap:var(--gap); }
.bento__col:last-child{ margin-top:clamp(0px,3vw,42px); }

.bcard{
  position:relative;
  display:flex; flex-direction:column;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--panel);
  padding:clamp(20px,2vw,30px);
  overflow:hidden;
  /* zentry 式翻起入场 */
  transform:perspective(1000px) translateY(100px) rotateX(-40deg);
  transform-origin:center top;
  opacity:0;
  transition:transform .95s var(--e-out), opacity .7s linear;
  transition-delay:var(--d,0ms);
}
.bcard.is-in{ transform:perspective(1000px); opacity:1; }

/* 错位：让出一侧，做出参考图那种参差 */
.bcard--insetL{ margin-left:34%; }
.bcard--insetR{ margin-right:34%; }

/* ---------- 排版三件套 ---------- */
/* 等宽小标签，钉在卡片左上 */
.bcard__label{
  /* 原来是等宽英文字体的小标签，中文掉 fallback、字号也偏小；
     统一成正文字体，字号跟 .bcard__foot 对齐。 */
  font-family:inherit; font-weight:700;
  font-size:clamp(15px,1.35vw,20px);
  letter-spacing:.01em; line-height:1.4;
}
/* 主角：Anton 的压缩重字重，收紧字距，顶到卡片边缘 */
.bcard__big{
  font-family:Anton,var(--f-en),sans-serif; font-weight:400;
  font-size:clamp(78px,11.5vw,172px);
  line-height:.82; letter-spacing:-.015em;
  margin:auto 0 0; padding-top:.16em;
  color:#E2E6F7;
}
.bcard__big--xl{ font-size:clamp(104px,18vw,268px); margin:.04em 0 auto; }
.bcard__big--ink{ color:#0A0E17; }
/* 中文单位跟着数字走，但用中文黑体，别让 Anton 掉字 */
.bcard__big em{
  font-family:var(--f-cn); font-style:normal; font-weight:900;
  font-size:.62em; letter-spacing:-.02em; margin-left:.06em;
}
.bcard__big span{ font-size:.86em; }
/* 右下角的补充说明 */
.bcard__foot{
  /* 原来挂的是英文字体，中文落上去会掉到 fallback，几张卡看着字体不一样；
     统一走正文字体，字号也一并放大。 */
  font-family:inherit; font-weight:700;
  font-size:clamp(15px,1.35vw,20px);
  line-height:1.45; letter-spacing:.01em;
  margin-top:auto; align-self:flex-end; text-align:right;
}
.bcard__sub{ font-family:var(--f-en); font-size:clamp(11px,.9vw,13px); margin-top:14px; }

/* ---------- ① 资源大类：白 → 蓝，蓝字 ---------- */
.bcard--cats{
  min-height:clamp(280px,26vw,384px);
  background:var(--card-wb);
  border-color:rgba(22,119,255,.30);
}
.bcard--cats .bcard__label{ color:#1B4E96; }
.bcard--cats .bcard__big{ color:#0B4FB8; }
.bcard--cats .bcard__foot{ color:#1B4E96; opacity:.88; }
/* ---------- ② 合作流程：白底黑字，数字压顶、标签右下 ---------- */
.bcard--flow{
  min-height:clamp(240px,22vw,330px);
  background:#FFFFFF; border-color:rgba(10,14,23,.14);
}
.bcard--flow .bcard__big{ margin:0 0 auto; }
.bcard--flow .bcard__foot{ color:#0A0E17; }

/* ---------- ③ 专业客服入口：实蓝白字 ---------- */
.bcard--hero{
  min-height:clamp(320px,34vw,470px);
  background:var(--card-blue);
  border-color:rgba(255,255,255,.24);
}
.bcard--hero .bcard__label{ color:#FFFFFF; opacity:.92; }
/* 数字紧跟标签，底下留大片空 —— 参考图 Treasury 卡的处理 */
.bcard--hero .bcard__big{
  color:#FFFFFF; margin:.04em 0 auto;
  text-shadow:0 6px 30px rgba(3,28,72,.35);
}
.bcard--hero .bcard__sub{ color:#FFFFFF; opacity:.82; padding-top:16px; }

/* ---------- ④ 覆盖国家：黑 → 蓝，数字压满卡宽 ---------- */
.bcard--geo{
  min-height:clamp(340px,40vw,560px);
  background:var(--card-kb);
  border-color:rgba(61,156,255,.28);
}
.bcard--geo .bcard__label{ color:#D3E4FF; }
.bcard--geo .bcard__big{ color:#E2E6F7; }
.bcard--geo .bcard__foot{ color:#D3E4FF; opacity:.72; }
.bcard--geo .bcard__corner{
  /* 绝对定位钉在卡片右下角。巨号数字比内容盒还宽，靠 flex 的 align-self
     会被撑开的内容盒带偏，贴不到右边。 */
  position:absolute; right:clamp(20px,2vw,30px); bottom:clamp(18px,1.8vw,28px);
  margin:0; text-align:right;
  font-family:inherit; font-weight:700;
  font-size:clamp(15px,1.35vw,20px);
  line-height:1.4; letter-spacing:.01em;
}
.bcard--list .bcard__corner{ color:#C9D6EE; opacity:.86; }
.bcard--list .bcard__label{ color:#8FB8F0; }
.bcard--list .bcard__big{ color:#E2E6F7; }
.bcard--list .bcard__foot{ color:#C9D6EE; opacity:.86; }
/* ---------- ⑤ 收量渠道名录：黑底，右对齐等宽清单 ---------- */
.bcard--list{
  min-height:clamp(340px,40vw,560px);
  background:#06080F; border-color:rgba(61,156,255,.22);
}
.bcard__display{
  font-family:Anton,var(--f-en),sans-serif; font-weight:400;
  font-size:clamp(26px,3.1vw,44px); line-height:.94; letter-spacing:-.01em;
  color:#E2E6F7;
}
/* ---------- ⑥ 官方矩阵入口：浅灰紫底黑字 ---------- */
/* 右下角标：和卡片留白对齐，压在超大数字的对角 */
.bcard__corner{
  margin-top:auto; align-self:flex-end; text-align:right;
  font-family:inherit; font-weight:700;
  font-size:clamp(15px,1.35vw,20px);
  line-height:1.4; letter-spacing:.01em;
}
/* 巨号数字走纯白（黑底/深蓝底那两张） */
/* 纯白巨号数字。要压过 .bcard--geo/.bcard--list 里那条同名着色（权重更高），
   所以这里把卡片类一并写上。 */
.bcard--geo .bcard__big--snow,
.bcard--list .bcard__big--snow{ color:#FFFFFF; }

/* ---------- 卡面底纹 ---------- */
.bcard__vis{ position:absolute; inset:0; pointer-events:none; }
.bcard--cats .bcard__vis{
  background:
    radial-gradient(62% 52% at 82% 12%, rgba(22,119,255,.22), transparent 66%),
    repeating-linear-gradient(115deg, rgba(22,119,255,.07) 0 1px, transparent 1px 16px);
}
.bcard__vis--glow{
  background:
    radial-gradient(45% 40% at 50% 30%, rgba(255,255,255,.28), transparent 68%),
    conic-gradient(from 200deg at 50% 35%, rgba(255,255,255,.12), transparent 40%, rgba(160,205,255,.20), transparent 75%);
  animation:heroGlow 12s ease-in-out infinite alternate;
}
@keyframes heroGlow{ from{ transform:scale(1) rotate(0deg); } to{ transform:scale(1.12) rotate(8deg); } }
.bcard > *{ position:relative; z-index:1; }

/* ==========================================================================
   转场
   ========================================================================== */
.zoom{ position:relative; height:220vh; z-index:var(--z-content); }
.zoom__sticky{ position:sticky; top:0; height:100svh; display:grid; place-items:center; overflow:hidden; }
.zoom__inner{ text-align:center; will-change:transform,opacity; transform:scale(var(--zs,1)); opacity:var(--zo,1); }
.zoom__cn{
  font-size:clamp(36px,6.4vw,92px); font-weight:900; letter-spacing:-.02em; line-height:1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.zoom__en{
  font-family:var(--f-en); font-size:clamp(12px,1.4vw,18px);
  letter-spacing:.4em; text-indent:.4em; color:var(--muted); margin-top:16px;
}/* ==========================================================================
   P4 · COOPERATION FLOW + READY
   ========================================================================== */
.flow{
  position:relative;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--gap); padding-top:52px;
}
.flow__line{ position:absolute; left:0; top:16px; width:100%; height:8px; }
.flow__line path{ stroke-dasharray:1200; stroke-dashoffset:1200; transition:stroke-dashoffset 1.6s linear; }
.flow.is-in .flow__line path{ stroke-dashoffset:0; }
.flow__step{
  position:relative; padding-right:16px;
  opacity:.5; filter:saturate(.4);
  transition:opacity .4s var(--e-out), filter .4s var(--e-out);
}
.flow__step.is-lit{ opacity:1; filter:none; }
.flow__dot{
  position:absolute; left:0; top:-42px;
  width:10px; height:10px; border-radius:50%;
  background:var(--bg); border:1px solid var(--hi);
  transition:background-color .3s, box-shadow .4s;
}
.flow__step.is-lit .flow__dot{
  background:var(--blue);
  box-shadow:0 0 0 4px rgba(22,119,255,.18), 0 0 16px rgba(61,156,255,.7);
}
.flow__num{ font-family:var(--f-en); font-size:12px; letter-spacing:.16em; color:var(--hi); }
.flow__step h4{ font-size:20px; font-weight:700; margin:10px 0 10px; }
.flow__step p{ font-size:14px; color:var(--muted); }

/* 标题原本用的是站内浅蓝渐变，落在白底上偏淡，这里换深一档 */
/* 描边按钮在浅底上要换深色，否则整颗看不见 */
/* ==========================================================================
   大字报转场（lenis solution 式）
   SO / WHY / SEVEN 左对齐，STAR 右对齐；整块放大冲出屏幕
   「与我们合作」从无到有、从小放大；其中一竖笔化成白色竖条，撑满整屏当背景
   ========================================================================== */
/* 转场行程：320vh 走完白幕才铺满，之后还要再滚一段才见到正文。
   收到 240vh，白幕落下就紧接着「我们的核心优势」。 */
/* 不再抬 z-index。它本来就排在 #resources 之后，靠文档顺序就能盖住上一屏；
   而抬高之后，那块白幕会连带压在后面 .bluerun 里的 3D 星上面 —— 星被切掉半截
   就是这么来的。去掉之后：白幕 < 星 < 正文，层次才对。 */
/* isolate 而不是抬 z-index：既把白幕的 z-index:2 关在自己上下文里
   （否则它会溢出去压住后面的 .bluerun，正文被整片盖白），
   又不会像之前那样整块浮到内容之上把 3D 星切掉。 */
.solution{ position:relative; height:240vh; isolation:isolate; }
.solution__sticky{
  position:sticky; top:0; height:100svh;
  display:grid; place-items:center;
  overflow:hidden;
}
.solution__sticky > *{ grid-area:1 / 1; }
.solution__first{ z-index:0; }
.solution__enter{ z-index:1; }
.solution__white{ z-index:2; }

.solution__first{
  width:100%;
  padding:0 var(--pad) 0 var(--pad-l);
  font-family:var(--f-en);
  font-size:clamp(52px,13vw,208px);
  font-weight:700; line-height:.88; letter-spacing:-.03em;
  text-transform:uppercase;
  color:var(--text);
  will-change:transform,opacity;
  pointer-events:none;
}
.solution__first span{ display:block; }
.solution__first .l1, .solution__first .l2, .solution__first .l3{ text-align:left; }
.solution__first .l3{ color:var(--hi); }
.solution__first .l4{ text-align:right; color:var(--hi); }
.solution__first{ transform:scale(var(--s1,1)); opacity:var(--o1,1); }

.solution__enter{
  text-align:center;
  font-size:clamp(34px,7vw,104px);
  font-weight:900; letter-spacing:.04em; line-height:1.05;
  color:#FFFFFF;
  transform:scale(var(--s2,.22));
  opacity:var(--o2,0);
  will-change:transform,opacity;
  pointer-events:none;
}

/* 竖笔画：一条白色竖条，先拉长再横向撑满，最后就是 P3 的白底 */
.solution__white{
  position:absolute; left:50%; top:50%;
  width:12px; height:70px;               /* 实际尺寸由 JS 按字形测量结果覆写 */
  background:#FFFFFF;
  transform:translate(calc(-50% + var(--wdx,0px)), calc(-50% + var(--wdy,0px)))
            scaleX(var(--wx,.22)) scaleY(var(--wy,.22));
  opacity:var(--wo,0);
  will-change:transform,opacity;
  pointer-events:none;
}/* ==========================================================================
  .bluerun · 白 → 渐变蓝 → 深蓝，一条连续的底
   以前这条渐层是「每个 section 各画一份」，两屏交界处就会从最深的 #0D244C
   猛地跳回最浅的 #79ADE9 —— 那道断层就是这么来的。
   现在整段只画一次，铺在包住 P3 / P4 的容器上，末端正好接页脚的 #0D244C。
   密集停靠点 + 叠一层噪点，避免大面积渐变在 8bit 屏上起色带。
   ========================================================================== */
/* isolate：让 ::before 待在自己的层叠上下文里，稳稳压在两屏内容之下、页面底色之上。
   负 margin：把这一屏往上提，压到转场那张白卡还铺满屏幕的时候 —— 于是
   「我们的核心优势」是浮在纯白卡片之上淡入的，而不是等白卡滚走了才出现。
   白卡和本屏渐层的顶端都是纯白，重叠区看不出接缝。 */
.bluerun{ position:relative; isolation:isolate; margin-top:-54vh; }
/* 紧接大字报转场的这一屏：白幕铺满的瞬间标题就该在视野里，
   顶部不留常规版块留白（这一段的「间距」本来就是那 240vh 的转场）。 */
.bluerun > .section:first-of-type{ padding-top:clamp(24px,2.6vw,40px); }
.bluerun::before{
  content:''; position:absolute; inset:0 0 -1px; z-index:-2;
  background-image:
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E"),
    linear-gradient(180deg,
      #FFFFFF 0%,  #FBFDFF 3%,  #F5F9FF 6%,  #EDF4FF 9%,
      #E4EEFF 12%, #DAE8FE 15%, #CFE1FD 18%, #C4DAFB 21%,
      #B9D3FA 24%, #AECBF7 27%, #A3C3F4 30%, #98BCF1 33%,
      #8DB4ED 36%, #83ACE9 39%, #79A4E4 42%, #6F9BDE 45%,
      #6693D8 48%, #5C8AD1 51%, #5381CA 54%, #4A78C2 57%,
      #426FB9 60%, #3A67B0 63%, #335EA6 66%, #2C569B 69%,
      #264E90 72%, #204685 75%, #1B3F79 78%, #16386D 81%,
      #123162 84%, #0F2B57 87%, #0C264D 91%, #0D244C 100%);
  background-size:140px 140px, 100% 100%;
}
.section--flow{ isolation:isolate; }

/* 04 的大标题正好落在渐层最浅的那一段上，浅色字会糊掉 —— 这一块改用深蓝。
   （再往下卡片区背景已经压深，其余文字仍走默认浅色） */
.section--flow > .wrap > .shead .kicker{ color:#0B3F8C; }
.section--flow > .wrap > .shead .h2{ color:#0A2550; }
.section--flow > .wrap > .shead .shead__sub{ color:#17457F; }

/* 官方矩阵的标题现在落在整条渐层的中段（中蓝）上，浅色字会糊成一片，
   跟上面那组标题一样压成深蓝。 */
.bluerun .svc-head .kicker{
  color:#b9dcff;
  text-shadow:0 2px 12px rgba(0,0,0,.55);
}
.bluerun .svc-head .h2{
  color:#fff;
  text-shadow:0 3px 20px rgba(0,0,0,.78), 0 0 34px rgba(19,82,170,.25);
}
.bluerun .svc-head__hint{
  color:#e1edfb;
  opacity:1;
  text-shadow:0 2px 12px rgba(0,0,0,.55);
}

/* 星点层：一套 tile，永远盖在渐变之上 */
.section--flow::after{
  content:''; position:absolute; inset:0; z-index:-1;
  pointer-events:none;
  background-repeat:repeat;
  background-size:520px 520px, 340px 340px;
}.section--flow::after{
  background-image:
    radial-gradient(1.8px 1.8px at 60px 80px,   rgba(214,231,255,.85), transparent 60%),
    radial-gradient(1.3px 1.3px at 210px 240px, rgba(61,156,255,.75), transparent 60%),
    radial-gradient(2.1px 2.1px at 360px 120px, rgba(226,240,255,.80), transparent 60%),
    radial-gradient(1.4px 1.4px at 110px 430px, rgba(61,156,255,.62), transparent 60%),
    radial-gradient(1.7px 1.7px at 470px 360px, rgba(214,231,255,.70), transparent 60%),
    radial-gradient(1.2px 1.2px at 280px 500px, rgba(61,156,255,.55), transparent 60%);
  background-size:560px 560px;
}
.section--flow > *{ position:relative; z-index:1; }/* ==========================================================================
   04 流程卡：阶梯入场（lenis feature-cards）
   每张卡随滚轮从右下角斜着推进画面，落到自己的台阶上。
   --step 是纵向步进，必须大于卡片实际高度（--cardh），台阶之间才留得出间距。
   ========================================================================== */
.fcards{
  --step:  clamp(210px, 17vw, 258px);   /* 纵向台阶：卡高 + 间距 */
  --cardh: clamp(176px, 14vw, 212px);   /* 卡片本体高度 */
  --rise:  13%;                         /* 横向台阶：每级右移多少 */
  position:relative;
  margin-top:18px;
  /* 最后一张的底边 + 一点收尾留白 */
  height:calc((var(--count) - 1) * var(--step) + var(--cardh) + 40px);
}
.fcard{
  position:absolute;
  left:calc(var(--i) * var(--rise));
  top:calc(var(--i) * var(--step));
  width:min(680px, calc(100% - (var(--count) - 1) * var(--rise)));
  opacity:0;
  /* 起点：画面右下角外侧；终点：自己的台阶 */
  transform:translate3d(clamp(120px,16vw,240px), clamp(80px,9vw,150px), 0) scale(.88);
  transition:transform 1s var(--e-out), opacity .55s linear;
  will-change:transform,opacity;
}
.fcard.is-on{ opacity:1; transform:none; }

/* ==========================================================================
   合并屏：左边流程卡整体左移，右边补一列优势小卡
   两列共用同一套台阶节奏（--step / --i），所以第 n 张流程卡和第 n 块优势卡齐平
   ========================================================================== */
/* 左右两列共用同一个横向台阶：右列跟着左列一起右移，
   所以每一行的左右间距都等于第四行那个间距，四行完全一致 */
.fcards--split{
  /* 容器高度贴着最后一行卡片收口，不留额外尾巴 —— 版块之间的间距全部交给
     section 的上下留白，这样这一段和别处一样宽。 */
  height:calc((var(--count) - 1) * var(--step) + var(--cardh));
  --rise:4%;
  --fcw:52%;                            /* 左列宽 */
  --colgap:clamp(20px,2.2vw,32px);      /* 行内左右间距，四行同一个值 */
  --acw:31%;                            /* 右列宽 */
}
.fcards--split .fcard{ width:var(--fcw); }
.acard{
  position:absolute;
  left:calc(var(--i) * var(--rise) + var(--fcw) + var(--colgap));
  top:calc(var(--i) * var(--step));
  width:var(--acw);
  min-height:var(--cardh);
  padding:clamp(20px,1.9vw,28px) clamp(20px,2vw,28px);
  border:1px solid var(--line); border-radius:20px;
  box-shadow:0 30px 70px -34px rgba(0,0,0,.85);
  opacity:0;
  /* 和左边流程卡一模一样的入场：从右下方推进来 */
  transform:translate3d(clamp(120px,16vw,240px), clamp(80px,9vw,150px), 0) scale(.88);
  transition:transform 1s var(--e-out), opacity .55s linear;
  will-change:transform,opacity;
}
.acard.is-on{ opacity:1; transform:none; }
/* 序号去掉了，标题直接顶到原来序号的位置，按大标题的分量来排 */
.acard__en{ font-family:var(--f-en); font-size:11px; letter-spacing:.18em; }
.acard h4{ font-size:clamp(22px,1.9vw,27px); font-weight:800; margin:10px 0 12px; line-height:1.24; }
.acard__d{ font-size:clamp(12.5px,.95vw,13.5px); line-height:1.62; }

/* 由深到浅：黑蓝 → 实蓝 → 中蓝 → 白蓝，取自「全球资源」那一行的卡片色 */
.acard--1{ background:linear-gradient(155deg,#04060C 0%,#07142C 38%,#103371 100%); border-color:rgba(61,156,255,.22); }
.acard--1 .acard__en{ color:#7CC0FF; }
.acard--1 h4{ color:#F2F6FF; }
.acard--1 .acard__d{ color:rgba(226,238,255,.72); }

.acard--2{ background:linear-gradient(150deg,#0B55C7 0%,#1677FF 60%,#2B8BFF 100%); border-color:rgba(255,255,255,.24); }
.acard--2 .acard__en{ color:#E4F1FF; }
.acard--2 h4{ color:#FFFFFF; }
.acard--2 .acard__d{ color:rgba(255,255,255,.86); }

.acard--3{ background:linear-gradient(152deg,#2B8BFF 0%,#69A9F0 55%,#9CC6F4 100%); border-color:rgba(255,255,255,.34); }
.acard--3 .acard__en{ color:#0F4CA8; }
.acard--3 h4{ color:#06192F; }
.acard--3 .acard__d{ color:rgba(9,32,62,.80); }

.acard--4{ background:linear-gradient(155deg,#FFFFFF 0%,#EEF6FF 34%,#C2DBF9 100%); border-color:rgba(10,14,23,.14); }
.acard--4 .acard__en{ color:#1B4E96; }
.acard--4 h4{ color:#0A0E17; }
.acard--4 .acard__d{ color:#46556F; }
.fcard__in{
  position:relative;
  display:grid; grid-template-columns:auto 1fr; column-gap:clamp(20px,2vw,30px);
  align-items:start;
  min-height:var(--cardh); padding:clamp(24px,2.4vw,34px) clamp(26px,2.6vw,38px);
  border:1px solid var(--line); border-radius:20px;
  background:var(--panel-2);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.85);
}
.fcard__num{
  grid-row:1 / span 3;
  font-family:var(--f-en); font-size:clamp(58px,5.4vw,78px); font-weight:700; line-height:.9;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.fcard__en{ font-family:var(--f-en); font-size:12px; letter-spacing:.18em; color:var(--hi); }
.fcard__in h4{ font-size:clamp(22px,1.9vw,27px); font-weight:800; margin:8px 0 10px; }
.fcard__d{ font-size:clamp(14px,1.05vw,15.5px); color:var(--muted); }

/* ==========================================================================
   四张流程卡沿用「七星版图一览」那套配色，01→04 由浅走到深
   序号原本是渐变剪切到文字上的，换纯色必须先把渐变和 text-fill 一起解掉
   ========================================================================== */
.fcard__num{ transition:none; }
.fcard:nth-child(1) .fcard__num, .fcard:nth-child(2) .fcard__num, .fcard:nth-child(3) .fcard__num, .fcard:nth-child(4) .fcard__num{
  background:none; -webkit-background-clip:border-box; background-clip:border-box;
}

/* 01 纯白黑字 */
.fcard:nth-child(1) .fcard__in{ background:#FFFFFF; border-color:rgba(10,14,23,.14); }
.fcard:nth-child(1) .fcard__num{ color:#0B4FB8; -webkit-text-fill-color:#0B4FB8; }
.fcard:nth-child(1) .fcard__en{ color:#1B4E96; }
.fcard:nth-child(1) .fcard__in h4{ color:#0A0E17; }
.fcard:nth-child(1) .fcard__d{ color:#46556F; }

/* 02 白 → 蓝渐层 */
.fcard:nth-child(2) .fcard__in{
  background:var(--card-wb);
  border-color:rgba(22,119,255,.30);
}
.fcard:nth-child(2) .fcard__num{ color:#0B4FB8; -webkit-text-fill-color:#0B4FB8; }
.fcard:nth-child(2) .fcard__en{ color:#1B4E96; }
.fcard:nth-child(2) .fcard__in h4{ color:#0A0E17; }
.fcard:nth-child(2) .fcard__d{ color:#46556F; }

/* 03 实蓝底白字 */
.fcard:nth-child(3) .fcard__in{
  background:var(--card-blue);
  border-color:rgba(255,255,255,.24);
}
.fcard:nth-child(3) .fcard__num{ color:#FFFFFF; -webkit-text-fill-color:#FFFFFF;
                                 text-shadow:0 6px 30px rgba(3,28,72,.35); }
.fcard:nth-child(3) .fcard__en{ color:#FFFFFF; opacity:.9; }
.fcard:nth-child(3) .fcard__in h4{ color:#FFFFFF; }
.fcard:nth-child(3) .fcard__d{ color:#FFFFFF; opacity:.82; }

/* 04 黑 → 蓝渐层，浅字 */
.fcard:nth-child(4) .fcard__in{
  background:var(--card-kb);
  border-color:rgba(61,156,255,.28);
}
.fcard:nth-child(4) .fcard__num{ color:#E2E6F7; -webkit-text-fill-color:#E2E6F7; }
.fcard:nth-child(4) .fcard__en{ color:#8FC5FF; }
.fcard:nth-child(4) .fcard__in h4{ color:#E8EFFB; }
.fcard:nth-child(4) .fcard__d{ color:#C9D6EE; }

/* ==========================================================================
   标题：只做入场，不做任何 hover 反应
  .ptitle__content 不接鼠标事件 → 划过标题不会逐字触发样式重算
   ========================================================================== */
[data-ptitle], [data-ptitle] .ptitle__content, [data-ptitle] .line, [data-ptitle] .word, .bigword{ pointer-events:none; }
[data-ptitle].is-in .ptitle__content{ will-change:auto; }
[data-ptitle].is-in .word{ will-change:auto; }/* 纯淡入：不做位移 */
[data-fade]{
  opacity:0;
  transition:opacity 1s linear;
  transition-delay:var(--d,0ms);
}
[data-fade].is-in{ opacity:1; }/* ==========================================================================
   分区星空画布：压在渐变之上、内容之下
   ========================================================================== */
.secstars{
  position:absolute; left:0; top:0;
  z-index:-1;
  pointer-events:none;
}
/* canvas 就位后，关掉 CSS 静态星点，避免和动画星点重叠 */
body.has-secstars .section--flow::after{ display:none; }

/* ==========================================================================
   3D 星：光点堆出来的 20 面立体星
   position:fixed 钉死在视口正中，滚到哪一屏都不动窝。
   层级：压过正文（--z-content）、退到 --z-rail 之下，
   左侧导航、跑马灯、悬浮客服仍在星上面。
   显隐由 star3d.js 的闸门管：白幕落下、.bluerun 顶进视口才加 .is-on，
   前面几屏完全不出现。
   ⚠ perspective 的值和 star3d.js 里的 PERSP 是一对 —— 那边靠它把点投影回
   屏幕坐标去算鼠标距离，改一个必须改另一个，否则聚拢会偏。
   ========================================================================== */
.star3d{
  position:fixed; left:50%; top:50%;
  width:0; height:0;
  /* 0 而不是负数：.bluerun 的渐层底画在 ::before(z:-2) 上，
     负 z-index 会掉到渐层背后 = 看不见。0 正好夹在渐层之上、section 之下。 */
  z-index:0;
  perspective:900px;
  pointer-events:none;                 /* 永远不吃鼠标，聚拢是算出来的不是 hover */
  opacity:0; transition:opacity 1.1s var(--e-out);
}
/* 兜底：万一 .bluerun 不在了，星退回 body，这时必须抬到正文之上才看得见 */
.star3d--free{ z-index:calc(var(--z-rail) - 2); }
/* 每一屏都明确压在星上面。sections 本来就是定位元素、按文档顺序排在星之后，
   这条只是把"靠顺序"变成"写死"，以后插入新节点也不会把正文塞到星底下。 */
.bluerun > .section{ position:relative; z-index:1; }
.star3d.is-on{ opacity:1; }
.star3d__rot{
  position:absolute; left:0; top:0;
  transform-style:preserve-3d;
  will-change:transform;
}
/* 整颗星的柔光底：不跟着转，纯粹让这团光在任何底色上都有存在感 */
.star3d::before{
  content:''; position:absolute; left:0; top:0;
  width:var(--aura,520px); height:var(--aura,520px);
  margin:calc(var(--aura,520px) / -2) 0 0 calc(var(--aura,520px) / -2);
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(61,156,255,.13) 0%, rgba(22,119,255,.07) 34%, rgba(22,119,255,.02) 60%, rgba(22,119,255,0) 100%);
  pointer-events:none;
}
/* 单颗光点 = 背景星场那种小圆点，画法照抄 universe.js 的 makeSprite()，
   但把光晕收窄了一圈（背景的 sprite 铺满整个盒子，星的点数多、挨得近，
   照那个铺法会糊成一片棉花）：
     背景  α.90 @0 → α.28 @35% → 0 @100%
     这里  α.92 @0 → α.34 @30% → 0 @72%    ← 芯略提亮，晕的半径收到 0.72
   一路软到底，没有硬芯也没有描边 —— 背景那些点就是这么画的，
   所以星和背景是同一种"物质"，不会像贴上去的另一套素材。
   白 : 蓝 = 78 : 22，也和背景 (tint = Math.random() < .22) 一致。
   不用 box-shadow：辉光就在元素自己的盒子里，
   几百颗大半径投影是纯粹的光栅负担，这么写一分钱不花。
   --o 是这颗点的当前亮度：建点时由面法线定基础值，鼠标靠近时 JS 会调亮它。 */
.star3d i{
  position:absolute; left:0; top:0;
  /* 宽高和负 margin 由 star3d.js 直接写字面值（每颗点的常量）。
     以前走 var(--s)+calc()：父层那个反向旋转变量一变，八百多个点重算样式时
     每个都要多解三次变量，实测整体贵 23%。 */
  border-radius:50%;
  opacity:var(--o,1);
  background:radial-gradient(circle,
    rgba(226,240,255,.92) 0%, rgba(226,240,255,.34) 30%, rgba(226,240,255,0) 72%);
}
.star3d i.b{
  background:radial-gradient(circle,
    rgba(61,156,255,.92) 0%, rgba(61,156,255,.34) 30%, rgba(61,156,255,0) 72%);
}
/* 闪烁只挂这一小撮：给每颗都挂 infinite 动画 = 几百个独立合成层，
   散着闪，肉眼一样读成「整片在闪」 */
.star3d i.tw{ animation:starTwinkle 3.4s ease-in-out infinite alternate; }
@keyframes starTwinkle{
  from{ opacity:calc(var(--o,1) * .42); }
  to  { opacity:var(--o,1); }
}
.section--service{
  position:relative;
  padding-top:clamp(80px,9vw,140px);
  padding-bottom:clamp(90px,10vw,160px);
}
.service-head{
  position:relative;
  margin-bottom:clamp(34px,5vw,72px);
  padding-left:clamp(18px,2vw,28px);
  max-width:760px;
}
.service-head::before{
  content:'';
  position:absolute;
  left:0;
  top:4px;
  bottom:3px;
  width:4px;
  border-radius:999px;
  background:linear-gradient(180deg,#8ed0ff,#1677ff);
  box-shadow:0 0 22px rgba(22,119,255,.55);
}
.section--service .service-head .kicker{
  color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.68);
}
.section--service .service-head .h2{
  color:#fff;
  text-shadow:0 3px 20px rgba(0,0,0,.82), 0 0 32px rgba(13,72,158,.28);
}
.section--service .service-head .shead__sub{
  color:#e2edfb;
  text-shadow:0 2px 12px rgba(0,0,0,.72);
}
.bcard__title{
  position:relative;
  z-index:2;
  margin:0 0 10px;
  max-width:18ch;
  color:#fff;
  font-size:clamp(18px,1.45vw,25px);
  font-weight:800;
  line-height:1.25;
}
.bcard__title--ink{ color:#0a1020; }
.bcard--cats .bcard__title{ color:#0a2550; }