/* ============================================================
   banner-sections.css —— index.html 的第四层样式（板块横幅）
   ============================================================
   来源：preset-site-sections.html 的内联 <style>（板块骨架 + 十一块的
   专属样式 + 响应式 + 降低动效偏好），搬到独立文件里，只给 index.html 用。

   加载顺序（务必保持）：
     1. index.html 内联 <style>      —— 基础令牌、页头/页脚/轮播/弹窗
     2. shared/visual-refresh.css    —— 视觉覆盖层，重定义 :root 调色板
     3. shared/banner-sections.css   —— 本文件，必须最后加载才能压过第 2 层
   第 2 层刻意重写了 .hero / .stats / .advantages / .cooperation /
   .founder-* / .services-* 等旧板块样式，所以本层只能排在它后面。

   相对预设源文件的删改（都是为了不污染 index.html 原有的页头页脚）：
     - 删掉 :root / *{box-sizing} / html / body 这几条重置：调色板已经由
       visual-refresh.css 定义，且两边取值完全一致，不需要再来一遍。
     - 删掉预设自带的 .nav / .nav-brand / .nav-links / .nav-cta / .nav-note
       整块（含 720px 断点里的对应几条）：index.html 用的是自己的 <header>。
     - 「8b. 案例卡右上角的动图」整段保留（案例板块已换成预设版，
       index 原来的 .case-visual 环形轮播不再存在，不会互相覆盖）：案例板块改用 index.html 原有的
       3D 环形轮播，那段里 .visual-* / .agent-orbit / .store-map / .medical-*
       等选择器没有前缀，留着会反过来盖掉 visual-refresh.css 里同名的
       .case-visual 插画样式。
     - 末尾新增第 15 节，处理与 index.html 页头/页脚/悬浮件的层级关系。
   ============================================================ */

/* 预设骨架里 .bn{scroll-margin-top:var(--nav-h)} 要用；
   74px = index.html 的 <header> 实际高度（42px logo + 上下 16px 内距）。 */
:root{--nav-h:74px}

/* ============================================================
   2. 全局背景（一份，七块共用）
   ============================================================ */
.backdrop{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:var(--primary-bg);
}

.backdrop::after{
  content:'';
  position:absolute;
  inset:-100px;
  background:
    linear-gradient(rgba(32,180,255,0.026) 1px,transparent 1px),
    linear-gradient(90deg,rgba(32,180,255,0.026) 1px,transparent 1px);
  background-size:74px 74px;
  animation:bgGrid 42s linear infinite;
}

@keyframes bgGrid{
  from{transform:translate(0,0)}
  to{transform:translate(74px,74px)}
}

/* ============================================================
   3. 板块骨架
   ============================================================ */
main{position:relative;z-index:1}

.bn{
  position:relative;
  display:flex;
  align-items:center;
  min-height:min(880px,100vh);
  padding:64px 0;
  scroll-margin-top:var(--nav-h);
  overflow:hidden;
}

/* 每块自己的呼吸辉光，颜色跟 --tone 走 */
.bn::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 86% 14%,var(--glow-a),transparent 42%),
    radial-gradient(circle at 6% 84%,var(--glow-b),transparent 40%);
  animation:bnBreath 13s ease-in-out infinite;
}

@keyframes bnBreath{
  0%,100%{opacity:.62}
  50%{opacity:1}
}

.bn::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(6,9,22,0.72) 0%,rgba(6,9,22,0.22) 46%,transparent 72%);
}

.bn-sweep{
  position:absolute;
  top:0;bottom:0;
  z-index:1;
  width:42%;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--sweep,rgba(32,180,255,0.05)),transparent);
  animation:bnSweep 16s ease-in-out infinite;
}

@keyframes bnSweep{
  0%,100%{left:-44%}
  50%{left:102%}
}

.bn-inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,var(--lw,1fr)) minmax(0,var(--rw,1fr));
  gap:54px;
  align-items:center;
  width:100%;
  max-width:1340px;
  margin:0 auto;
  padding:0 48px;
}

/* --- 左右互换：图在左、文字在右 ---
   隔一块换一次，避免整页十一屏全是"左文右图"的同一节奏。
   DOM 顺序不动（文字仍排在可视化前面，对读屏与抓取都更友好），
   只用 order 调位置，同时把两列宽度也对调回来。 */
.bn-flip .bn-inner{grid-template-columns:minmax(0,var(--rw,1fr)) minmax(0,var(--lw,1fr))}
.bn-flip .bn-left{order:2}
.bn-flip .bn-visual{order:1}

/* 压暗的斜纱与呼吸辉光本来是照着"文字在左"画的，翻转后一起镜像 */
.bn-flip::after{background:linear-gradient(270deg,rgba(6,9,22,0.72) 0%,rgba(6,9,22,0.22) 46%,transparent 72%)}

.bn-flip::before{
  background:
    radial-gradient(circle at 14% 14%,var(--glow-a),transparent 42%),
    radial-gradient(circle at 94% 84%,var(--glow-b),transparent 40%);
}

/* 入场方向也跟着镜像，从右侧滑入 */
.bn-flip .rise{animation-name:bnRiseFlip}

@keyframes bnRiseFlip{
  from{opacity:0;transform:translate3d(24px,12px,0)}
  to{opacity:1;transform:none}
}

/* 板块之间的电路分隔 */
.divider{
  position:relative;
  z-index:2;
  display:block;
  width:100%;
  max-width:1340px;
  height:34px;
  margin:0 auto;
  padding:0 48px;
}

.divider svg{display:block;width:100%;height:34px}

.dv-trace{fill:none;stroke:rgba(120,180,255,0.15);stroke-width:1.2}

.dv-pulse{
  fill:none;
  stroke:url(#gFlowBlue);
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-dasharray:7 93;
  animation:gRun 7s linear infinite;
}

@keyframes gRun{
  from{stroke-dashoffset:100}
  to{stroke-dashoffset:0}
}

/* --- 未进入视口时冻结所有动画 ---
   伪元素也要一起冻结：.stat-cell::after / .adv-icon::after /
   .fd-photo::before / .hb-scroll::after 都是一次性入场动画，
   不冻的话在屏幕外就播完了，滚到时什么都看不见。 */
.bn:not(.visible) *,
.bn:not(.visible) *::before,
.bn:not(.visible) *::after,
.bn:not(.visible)::before,
.bn:not(.visible)::after{animation-play-state:paused !important}

/* ============================================================
   4. 左侧标题块（七块共用）
   ============================================================ */
.rise{opacity:0;animation:bnRise .95s cubic-bezier(.22,.68,.36,1) both}

@keyframes bnRise{
  from{opacity:0;transform:translate3d(-24px,12px,0)}
  to{opacity:1;transform:none}
}

.bn-brand{
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:var(--text-muted);
  font-size:12.5px;
  letter-spacing:.14em;
}

.bn-brand::before{
  content:'';
  width:22px;height:1px;
  background:linear-gradient(90deg,var(--tone),transparent);
}

.bn-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-top:15px;
  padding:6px 14px 6px 11px;
  border:1px solid var(--tone-b,rgba(32,180,255,0.3));
  border-radius:999px;
  background:var(--tone-f,rgba(32,180,255,0.07));
  color:var(--tone-t,#9ed8ff);
  font-size:12.5px;
  letter-spacing:.08em;
}

.bn-eyebrow i{
  width:5px;height:5px;
  border-radius:50%;
  background:var(--tone);
  animation:bnPing 2.4s ease-out infinite;
}

@keyframes bnPing{
  0%{box-shadow:0 0 0 0 var(--tone-f,rgba(32,180,255,0.5))}
  70%,100%{box-shadow:0 0 0 10px transparent}
}

.bn-zh{
  margin:18px 0 0;
  font-size:clamp(28px,3.6vw,44px);
  font-weight:790;
  line-height:1.18;
  letter-spacing:-0.03em;
}

.bn-zh .hl{
  background:linear-gradient(115deg,#f7f9fc 18%,var(--tone-t,#63cbff) 58%,#63cbff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.bn-en{
  margin:11px 0 0;
  color:var(--text-muted);
  font-size:13px;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.bn-desc{
  margin:17px 0 0;
  max-width:600px;
  color:var(--text-secondary);
  font-size:15.5px;
}

.accent-text{color:var(--tone-t,#7fd8ff);font-weight:620}

.bn-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

.bn-cta,.bn-ghost{
  display:inline-flex;
  align-items:center;
  padding:11px 24px;
  border-radius:10px;
  font-size:14.5px;
  font-weight:620;
  text-decoration:none;
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease;
}

.bn-cta{
  background:linear-gradient(120deg,var(--tone),#4b7dff);
  color:#04101b;
  box-shadow:0 10px 26px rgba(32,180,255,0.22);
}

.bn-cta:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(32,180,255,0.3)}

.bn-ghost{
  border:1px solid rgba(255,255,255,0.16);
  background:rgba(255,255,255,0.03);
  color:var(--text-primary);
}

.bn-ghost:hover{transform:translateY(-2px);background:rgba(255,255,255,0.07)}

.bn-metrics{
  display:flex;
  flex-wrap:wrap;
  gap:26px;
  margin:26px 0 0;
  padding:18px 0 0;
  border-top:1px solid rgba(255,255,255,0.08);
  list-style:none;
}

.bn-metrics b{
  display:block;
  font-size:23px;
  font-weight:770;
  letter-spacing:-0.02em;
  background:linear-gradient(120deg,#f7f9fc,var(--tone));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.bn-metrics span{color:var(--text-muted);font-size:12.5px}

.bn-visual{position:relative}

.bn-visual svg{display:block;width:100%;height:auto}

/* --- 共用的卡片 / 列表零件 --- */
.tile{
  position:relative;
  padding:17px 19px;
  border:1px solid rgba(255,255,255,0.08);
  border-left:2px solid var(--c,var(--tone));
  border-radius:0 14px 14px 0;
  background:linear-gradient(100deg,rgba(255,255,255,0.05),rgba(255,255,255,0.01));
  transition:transform .35s ease,border-color .35s ease;
}

.tile:hover{transform:translateX(5px);border-color:rgba(255,255,255,0.18);border-left-color:var(--c,var(--tone))}

.tile h3,.tile h4{margin:0 0 4px;font-size:15px;font-weight:680}

.tile p{margin:0;color:var(--text-secondary);font-size:13.5px;line-height:1.62}

.dot-list{margin:22px 0 0;padding:0;list-style:none;max-width:560px}

.dot-list li{
  position:relative;
  padding:7px 0 7px 25px;
  color:var(--text-secondary);
  font-size:14.5px;
}

.dot-list li strong{color:var(--text-primary);font-weight:640}

.dot-list li::before{
  content:'';
  position:absolute;
  top:15px;left:2px;
  width:7px;height:7px;
  border-radius:2px;
  background:var(--tone);
  box-shadow:0 0 10px var(--tone-f,rgba(32,180,255,0.6));
}

.dot-list li:not(:last-child)::after{
  content:'';
  position:absolute;
  top:25px;left:5px;
  width:1px;height:calc(100% - 18px);
  background:linear-gradient(180deg,var(--tone-b,rgba(32,180,255,0.4)),transparent);
}

/* ============================================================
   4b. 首屏 Hero（并自 hero-preview.html）
   ============================================================
   与源文件的差别：
   1. 预览用的 .hb-nav 去掉了 —— 这里有真的 .nav。
   2. .hero-banner / .hb-container / .hb-rise / .hb-eyebrow / .hb-zh / .hb-en /
      .hb-tagline / .hb-actions / .hb-cta / .hb-ghost / .hb-metrics 全部换成
      本文件共用的 .bn / .bn-inner / .rise / .bn-eyebrow / .bn-zh / .bn-en /
      .bn-desc / .bn-actions / .bn-cta / .bn-ghost / .bn-metrics，
      只留首屏独有的背景层与电路层。
   3. hbGridMove / hbSpin / hbFlow 并到已有的 bgGrid / spin360 / gRun；
      电路流光的三条渐变换成全局的 gFlowBlue / gFlowTeal / gFlowViolet。
   4. 两个 href="#" 占位改成真锚点 #contact / #services-detail。
   ============================================================ */
#hero{--tone:var(--tone-blue);--tone-b:rgba(32,180,255,0.28);--tone-f:rgba(32,180,255,0.08);
  --tone-t:#9ed8ff;--sweep:rgba(32,180,255,0.075)}

/* 首屏自带三团辉光，关掉 .bn 的公用辉光，免得叠成一片糊 */
#hero::before{content:none}

/* 首屏只有左栏，标题也比其它块大一号 */
#hero .bn-inner{grid-template-columns:minmax(0,1fr)}
#hero .bn-zh{margin:22px 0 0;font-size:clamp(34px,4.4vw,58px);font-weight:800;line-height:1.16;letter-spacing:-0.02em}
#hero .bn-en{margin:14px 0 0;font-size:13px;letter-spacing:.2em}
#hero .bn-desc{margin:20px 0 0;max-width:560px;font-size:16.5px}
#hero .bn-desc strong{color:var(--text-primary);font-weight:660}
#hero .bn-metrics{margin-top:34px}

.hb-slogan{
  max-width:640px;
  padding-left:22px;
  border-left:2px solid transparent;
  border-image:linear-gradient(180deg,var(--accent),rgba(32,180,255,0.05)) 1;
}

/* 公司名走一道缓慢扫过的高光 */
.hb-shine{
  background:linear-gradient(96deg,#f7f9fc 12%,#63cbff 34%,#a99bff 50%,#f7f9fc 72%);
  background-size:260% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:hbShine 8s ease-in-out infinite;
}

/* 公司全称固定为两排，“有限公司”作为不可拆分的第二排 */
.hb-title-line{
  display:block;
  width:max-content;
  max-width:100%;
  white-space:nowrap;
}

@keyframes hbShine{
  0%,100%{background-position:100% 0}
  50%{background-position:0 0}
}

/* --- 动态背景层（原站是循环视频，这里是纯 CSS + SVG） --- */
.hb-bg{position:absolute;inset:0;z-index:0;pointer-events:none}

.hb-bg::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 78% 34%,rgba(32,180,255,0.16),transparent 46%),
    radial-gradient(circle at 96% 78%,rgba(169,155,255,0.10),transparent 40%),
    radial-gradient(circle at 6% 8%,rgba(85,222,198,0.07),transparent 38%),
    linear-gradient(160deg,#080c1c 0%,#0b1226 48%,#0e1530 100%);
}

.hb-grid{
  position:absolute;
  inset:-80px;
  background:
    linear-gradient(rgba(32,180,255,0.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(32,180,255,0.05) 1px,transparent 1px);
  background-size:74px 74px;      /* 与全局 .backdrop 网格同尺寸，好共用 bgGrid */
  mask-image:radial-gradient(circle at 70% 45%,#000 10%,transparent 72%);
  -webkit-mask-image:radial-gradient(circle at 70% 45%,#000 10%,transparent 72%);
  animation:bgGrid 36s linear infinite;
}

.hb-glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55}

.hb-glow-1{
  top:-8%;right:8%;
  width:620px;height:620px;
  background:radial-gradient(circle,rgba(32,180,255,0.34),transparent 68%);
  animation:hbBreathe 14s ease-in-out infinite;
}

.hb-glow-2{
  right:-6%;bottom:-16%;
  width:520px;height:520px;
  background:radial-gradient(circle,rgba(169,155,255,0.26),transparent 68%);
  animation:hbBreathe 18s ease-in-out infinite reverse;
}

.hb-glow-3{
  top:32%;left:-10%;
  width:460px;height:460px;
  background:radial-gradient(circle,rgba(85,222,198,0.16),transparent 70%);
  animation:hbBreathe 22s ease-in-out infinite;
}

@keyframes hbBreathe{
  0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.5}
  50%{transform:translate3d(-24px,26px,0) scale(1.1);opacity:.78}
}

.hb-particles{position:absolute;inset:0;overflow:hidden}

.hb-particles i{
  position:absolute;
  bottom:-12px;
  left:var(--x,50%);
  width:var(--s,2px);height:var(--s,2px);
  border-radius:50%;
  background:var(--c,rgba(32,180,255,0.9));
  box-shadow:0 0 8px var(--c,rgba(32,180,255,0.9));
  opacity:0;
  animation:hbFloat var(--d,16s) linear var(--dl,0s) infinite;
}

@keyframes hbFloat{
  0%{transform:translate3d(0,0,0);opacity:0}
  12%{opacity:.85}
  80%{opacity:.5}
  100%{transform:translate3d(var(--dx,20px),-100vh,0);opacity:0}
}

.hb-vignette{
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 60% 45%,transparent 38%,rgba(4,8,20,0.62) 100%);
}

/* 底部渐隐，让首屏融进下一块 */
.hb-fade{
  position:absolute;
  right:0;bottom:0;left:0;
  height:190px;
  background:linear-gradient(to bottom,transparent,var(--primary-bg) 92%);
}

/* --- SVG 电路层：线路流光 + AI 中枢芯片 --- */
.hb-circuit{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  /* 左侧压掉，保证标题区域干净 */
  mask-image:linear-gradient(90deg,transparent 4%,rgba(0,0,0,0.28) 26%,#000 52%);
  -webkit-mask-image:linear-gradient(90deg,transparent 4%,rgba(0,0,0,0.28) 26%,#000 52%);
}

.hb-trace{fill:none;stroke:rgba(120,180,255,0.16);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* 沿线路奔跑的光点：pathLength=100 归一化，与路径实际长度无关 */
.hb-pulse{
  fill:none;
  stroke-width:2.6;
  stroke-linecap:round;
  stroke-dasharray:9 91;
  animation:gRun var(--fd,6s) linear var(--fdl,0s) infinite;
}

.hb-joint{
  fill:rgba(32,180,255,0.55);
  /* SVG 元素的 transform-origin 默认是 (0,0)，不显式指定的话缩放会把节点甩飞 */
  transform-box:fill-box;
  transform-origin:center;
  animation:hbBlink 3.6s ease-in-out var(--bd,0s) infinite;
}

@keyframes hbBlink{
  0%,100%{opacity:.28;transform:scale(.85)}
  50%{opacity:1;transform:scale(1.18)}
}

.hb-chip-body{fill:url(#hbChipFill);stroke:rgba(32,180,255,0.5);stroke-width:1.6}

.hb-chip-core{
  fill:rgba(32,180,255,0.14);
  stroke:rgba(32,180,255,0.42);
  stroke-width:1.2;
  animation:hbCorePulse 3.4s ease-in-out infinite;
}

@keyframes hbCorePulse{
  0%,100%{opacity:.6}
  50%{opacity:1}
}

.hb-chip-label{
  fill:#cfe9ff;
  font-family:inherit;
  font-size:44px;
  font-weight:800;
  letter-spacing:2px;
  text-anchor:middle;
  dominant-baseline:central;
}

.hb-chip-sub{fill:rgba(167,177,195,0.85);font-family:inherit;font-size:17px;letter-spacing:4px;text-anchor:middle}

.hb-pin{fill:rgba(32,180,255,0.7)}

.hb-ring{
  fill:none;
  stroke:rgba(32,180,255,0.3);
  stroke-width:1.3;
  stroke-dasharray:16 12;
  transform-box:view-box;
  transform-origin:1180px 450px;
  animation:spin360 26s linear infinite;
}

.hb-ring-2{stroke:rgba(85,222,198,0.26);stroke-dasharray:4 20;animation-duration:38s;animation-direction:reverse}

.hb-halo{
  fill:url(#hbHalo);
  transform-box:view-box;
  transform-origin:1180px 450px;
  animation:hbHaloPulse 5s ease-in-out infinite;
}

@keyframes hbHaloPulse{
  0%,100%{opacity:.45;transform:scale(1)}
  50%{opacity:.8;transform:scale(1.06)}
}

/* --- 能力标签（浮动药丸） --- */
.hb-pills{position:absolute;inset:0;z-index:1;pointer-events:none}

.hb-pill{
  position:absolute;
  padding:7px 15px;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:999px;
  background:rgba(18,27,56,0.72);
  box-shadow:0 8px 24px rgba(3,7,18,0.4);
  color:var(--text-secondary);
  font-size:13px;
  white-space:nowrap;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  animation:hbDrift var(--pd,9s) ease-in-out var(--pdl,0s) infinite;
}

.hb-pill::before{
  content:'';
  display:inline-block;
  width:6px;height:6px;
  margin-right:8px;
  border-radius:50%;
  background:var(--pc,var(--accent));
  box-shadow:0 0 10px var(--pc,var(--accent));
  vertical-align:middle;
}

.hb-pill-1{top:22%;right:31%}
.hb-pill-2{top:35%;right:6%;--pc:var(--tone-teal)}
.hb-pill-3{bottom:31%;right:29%;--pc:var(--tone-violet)}
.hb-pill-4{bottom:20%;right:8%;--pc:var(--tone-warm)}

@keyframes hbDrift{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-14px,0)}
}

/* --- 底部滚动提示 --- */
.hb-scroll{
  position:absolute;
  bottom:26px;left:50%;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  color:var(--text-muted);
  font-size:12px;
  letter-spacing:.16em;
  transform:translateX(-50%);
}

.hb-scroll::after{
  content:'';
  width:1px;height:34px;
  background:linear-gradient(to bottom,var(--accent),transparent);
  animation:hbScroll 2.2s ease-in-out infinite;
}

@keyframes hbScroll{
  0%,100%{opacity:.25;transform:scaleY(.5);transform-origin:top}
  50%{opacity:1;transform:scaleY(1);transform-origin:top}
}

/* ============================================================
   5. 产品 · GEO 可见度雷达
   ============================================================ */
#products{--tone:var(--tone-blue);--tone-b:rgba(32,180,255,0.3);--tone-f:rgba(32,180,255,0.09);
  --tone-t:#9ed8ff;--glow-a:rgba(32,180,255,0.15);--glow-b:rgba(169,155,255,0.1);
  --sweep:rgba(32,180,255,0.05);--lw:0.94fr;--rw:1.06fr}

.rd-ring{
  fill:none;
  stroke:rgba(32,180,255,0.16);
  stroke-width:1;
  stroke-dasharray:5 9;
  transform-box:view-box;
  transform-origin:320px 300px;
}

.rd-ring.r1{animation:spin360 30s linear infinite}
.rd-ring.r2{animation:spin360 44s linear reverse infinite}
.rd-ring.r3{animation:spin360 62s linear infinite}

@keyframes spin360{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

.rd-beam{
  fill:url(#gBeam);
  transform-box:view-box;
  transform-origin:320px 300px;
  animation:spin360 6.5s linear infinite;
}

.rd-spoke{fill:none;stroke:rgba(120,180,255,0.2);stroke-width:1.1}

.rd-flow{
  fill:none;
  stroke:url(#gFlowBlue);
  stroke-width:2.6;
  stroke-linecap:round;
  stroke-dasharray:12 88;
  animation:gRun 4.2s linear var(--d,0s) infinite;
}

.rd-node{fill:#0d1530;stroke:rgba(32,180,255,0.42);stroke-width:1.2}

.rd-core{
  fill:var(--tone-blue);
  transform-box:fill-box;
  transform-origin:center;   /* SVG 默认 transform-origin 是 (0,0)，不写会把节点甩飞 */
  animation:rdBlink 3.4s ease-in-out var(--d,0s) infinite;
}

@keyframes rdBlink{
  0%,100%{opacity:.35;transform:scale(1)}
  45%{opacity:1;transform:scale(1.5)}
}

.rd-label{fill:var(--text-secondary);font-size:13px;font-family:inherit;text-anchor:middle}

.rd-hub{fill:rgba(13,21,48,0.92);stroke:rgba(255,255,255,0.1);stroke-width:1}

.rd-gauge-track{fill:none;stroke:rgba(255,255,255,0.07);stroke-width:9}

.rd-gauge{
  fill:none;
  stroke:url(#gGauge);
  stroke-width:9;
  stroke-linecap:round;
  /* r=64 → 周长 ≈ 402；78% 剩 22% ≈ 88 */
  stroke-dasharray:402;
  stroke-dashoffset:402;
  transform-box:view-box;
  transform-origin:320px 300px;
  transform:rotate(-90deg);
  animation:rdFill 2.2s cubic-bezier(.2,.7,.3,1) .5s both;
}

@keyframes rdFill{to{stroke-dashoffset:88}}

.rd-score{fill:var(--text-primary);font-size:44px;font-weight:780;text-anchor:middle;font-family:inherit}

.rd-unit{fill:var(--text-muted);font-size:15px;font-weight:500}

.rd-cap{fill:var(--text-muted);font-size:11.5px;letter-spacing:.14em;text-anchor:middle;font-family:inherit}

.rd-spark{
  fill:none;
  stroke:var(--tone-teal);
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:100;
  stroke-dashoffset:100;
  animation:gDraw 2.4s cubic-bezier(.3,.6,.3,1) 1s both;
}

@keyframes gDraw{to{stroke-dashoffset:0}}

.rd-spark-dot{fill:#fff;opacity:0;animation:gFadeIn .4s ease 3.3s both}

@keyframes gFadeIn{to{opacity:1}}

.rd-caption{fill:var(--text-muted);font-size:12px;font-family:inherit}

.mini-stat{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:22px;
}

.mini-stat > div{
  flex:1;
  min-width:100px;
  padding:12px 15px;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
  background:rgba(255,255,255,0.025);
}

.mini-stat strong{
  display:block;
  font-size:21px;
  font-weight:760;
  letter-spacing:-0.01em;
  background:linear-gradient(120deg,#f7f9fc,#63cbff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.mini-stat span{color:var(--text-muted);font-size:12px}

/* ============================================================
   5b. 数据实力 · 增长曲线（并自 preset-2-stats.html）
   ============================================================
   四个数字全部来自原文（亿元+ / 10x / 4项 / 端到端），没有新增承诺。
   gcDraw / gcFade / gcRun 并到已有的 gDraw / gFadeIn / gRun。
   ============================================================ */
#stats{--tone:var(--tone-teal);--tone-b:rgba(85,222,198,0.3);--tone-f:rgba(85,222,198,0.09);
  --tone-t:#8ff0e0;--glow-a:rgba(85,222,198,0.13);--glow-b:rgba(32,180,255,0.12);
  --sweep:rgba(85,222,198,0.05);--lw:0.95fr;--rw:1.05fr}

/* 上升的数据粒子 */
.bn-motes{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}

.bn-motes i{
  position:absolute;
  bottom:-8px;
  width:3px;height:3px;
  border-radius:50%;
  background:rgba(85,222,198,0.7);
  box-shadow:0 0 8px rgba(85,222,198,0.6);
  animation:bnMote var(--md,16s) linear var(--mdl,0s) infinite;
}

@keyframes bnMote{
  0%{transform:translateY(0) scale(.5);opacity:0}
  12%{opacity:.85}
  88%{opacity:.5}
  100%{transform:translateY(-100vh) scale(1);opacity:0}
}

.stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:30px;max-width:540px}

.stat-cell{
  position:relative;
  padding:22px 22px 20px;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  background:linear-gradient(150deg,rgba(255,255,255,0.05),rgba(255,255,255,0.012));
  overflow:hidden;
  transition:transform .35s ease,border-color .35s ease;
}

.stat-cell:hover{transform:translateY(-4px);border-color:rgba(255,255,255,0.16)}

/* 底部这道线逐格划出来，代替数字滚动 */
.stat-cell::after{
  content:'';
  position:absolute;
  right:22px;bottom:0;left:22px;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--c,var(--tone)),transparent);
  transform:scaleX(0);
  transform-origin:left;
  animation:stRule 1.2s cubic-bezier(.2,.7,.3,1) var(--sd,0s) both;
}

@keyframes stRule{to{transform:scaleX(1)}}

.stat-num{
  display:block;
  font-size:clamp(28px,3.2vw,36px);
  font-weight:790;
  line-height:1.1;
  letter-spacing:-0.03em;
  background:linear-gradient(120deg,#f7f9fc 20%,var(--c,var(--tone)) 82%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.stat-cap{display:block;margin-top:6px;color:var(--text-muted);font-size:13.5px}

/* --- 右侧：增长曲线 --- */
.gc-frame{fill:rgba(10,16,36,0.5);stroke:rgba(255,255,255,0.08);stroke-width:1}
.gc-grid{stroke:rgba(255,255,255,0.05);stroke-width:1}
.gc-axis-label{fill:var(--text-muted);font-size:11.5px;font-family:inherit}

.gc-area{fill:url(#gcArea);opacity:0;animation:gFadeIn 1.2s ease 1.6s both}

.gc-line{
  fill:none;
  stroke:url(#gcLine);
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:100;
  stroke-dashoffset:100;
  animation:gDraw 2.6s cubic-bezier(.32,.6,.28,1) .4s both;
}

/* 曲线画完之后，一道高光继续沿着它跑 */
.gc-runner{
  fill:none;
  stroke:#ffffff;
  stroke-width:3;
  stroke-linecap:round;
  stroke-dasharray:6 94;
  opacity:.75;
  animation:gRun 5s linear 3s infinite;
}

.gc-node{
  fill:#0b1226;
  stroke:var(--c,var(--tone));
  stroke-width:2;
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
  animation:gcPop .55s cubic-bezier(.2,1.4,.4,1) var(--nd,0s) both;
}

@keyframes gcPop{
  from{opacity:0;transform:scale(.2)}
  to{opacity:1;transform:scale(1)}
}

.gc-halo{
  fill:none;
  stroke:var(--c,var(--tone));
  stroke-width:1.4;
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
  animation:gcHalo 2.8s ease-out var(--nd,0s) infinite;
}

@keyframes gcHalo{
  0%{opacity:.6;transform:scale(.7)}
  70%,100%{opacity:0;transform:scale(2.1)}
}

.gc-tag{
  fill:var(--text-primary);
  font-size:15px;
  font-weight:700;
  font-family:inherit;
  text-anchor:middle;
  opacity:0;
  animation:gFadeIn .5s ease var(--td,0s) both;
}

.gc-tag-sub{
  fill:var(--text-muted);
  font-size:11.5px;
  font-family:inherit;
  text-anchor:middle;
  opacity:0;
  animation:gFadeIn .5s ease var(--td,0s) both;
}

/* 底部柱状：逐根升起 */
.gc-bar{
  fill:url(#gcBar);
  transform-box:fill-box;
  transform-origin:bottom;
  animation:gcGrow .9s cubic-bezier(.2,.7,.3,1) var(--bd,0s) both;
}

@keyframes gcGrow{
  from{transform:scaleY(0)}
  to{transform:scaleY(1)}
}

.gc-foot{fill:var(--text-muted);font-size:11.5px;font-family:inherit}

/* ============================================================
   5c. 我们的优势 · 六边形雷达（并自 preset-3-advantages.html）
   ============================================================
   六个轴名对应原文的「六边形战士」说法，四条优势文案照抄原文。
   advSpin / hxSpin 并到已有的 spin360；描边渐变复用全局 gStrokeViolet
   （原来的 hxStroke 与它完全同色，去掉不另建）。
   ============================================================ */
#advantages{--tone:var(--tone-violet);--tone-b:rgba(169,155,255,0.32);--tone-f:rgba(169,155,255,0.09);
  --tone-t:#cbc2ff;--glow-a:rgba(169,155,255,0.14);--glow-b:rgba(32,180,255,0.11);
  --sweep:rgba(169,155,255,0.05);--lw:1fr;--rw:0.96fr}

.adv-list{display:grid;gap:12px;margin-top:28px;max-width:580px}

/* 与 .svc-item 一样，外层复用 .tile，这里只补图标那一列 */
.adv-item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:flex-start}

.adv-icon{
  position:relative;
  display:grid;
  place-items:center;
  width:42px;height:42px;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:12px;
  background:rgba(255,255,255,0.04);
  color:var(--c,var(--tone));
}

.adv-icon svg{width:21px;height:21px}

/* 悬停时外面转起一圈虚线 */
.adv-icon::after{
  content:'';
  position:absolute;
  inset:-6px;
  border:1px dashed var(--c,var(--tone));
  border-radius:16px;
  opacity:0;
  transition:opacity .35s ease;
  animation:spin360 14s linear infinite;
}

.adv-item:hover .adv-icon::after{opacity:.45}

/* --- 右侧：六边形能力雷达 --- */
.hx-web{fill:none;stroke:rgba(169,155,255,0.16);stroke-width:1}
.hx-web.w-outer{stroke:rgba(169,155,255,0.26)}
.hx-axis{stroke:rgba(255,255,255,0.07);stroke-width:1}

/* 数据多边形：从中心涨开，之后缓慢呼吸 */
.hx-poly{
  fill:url(#hxFill);
  stroke:url(#gStrokeViolet);
  stroke-width:2.4;
  stroke-linejoin:round;
  transform-box:view-box;
  transform-origin:320px 290px;
  animation:hxGrow 1.6s cubic-bezier(.2,.8,.3,1) .4s both,hxBreathe 7s ease-in-out 2.2s infinite;
}

@keyframes hxGrow{
  from{opacity:0;transform:scale(.15)}
  to{opacity:1;transform:scale(1)}
}

@keyframes hxBreathe{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.025)}
}

.hx-orbit{
  fill:none;
  stroke:rgba(169,155,255,0.22);
  stroke-width:1.2;
  stroke-dasharray:14 12;
  transform-box:view-box;
  transform-origin:320px 290px;
  animation:spin360 34s linear infinite;
}

.hx-vertex{
  fill:#0d1530;
  stroke:var(--tone);
  stroke-width:2;
  transform-box:fill-box;
  transform-origin:center;
  animation:hxPop .5s cubic-bezier(.2,1.4,.4,1) var(--vd,0s) both;
}

@keyframes hxPop{
  from{opacity:0;transform:scale(.2)}
  to{opacity:1;transform:scale(1)}
}

.hx-vertex-halo{
  fill:none;
  stroke:var(--tone);
  stroke-width:1.3;
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
  animation:hxHalo 3.2s ease-out var(--vd,0s) infinite;
}

@keyframes hxHalo{
  0%{opacity:.55;transform:scale(.6)}
  70%,100%{opacity:0;transform:scale(2.4)}
}

.hx-label{
  fill:var(--text-secondary);
  font-size:14px;
  font-family:inherit;
  text-anchor:middle;
  opacity:0;
  animation:gFadeIn .6s ease var(--vd,0s) both;
}

.hx-core{fill:rgba(13,21,48,0.94);stroke:rgba(255,255,255,0.12);stroke-width:1}

.hx-core-ring{
  fill:none;
  stroke:url(#gStrokeViolet);
  stroke-width:2;
  stroke-dasharray:9 7;
  transform-box:view-box;
  transform-origin:320px 290px;
  animation:spin360 18s linear reverse infinite;
}

.hx-core-t1{fill:var(--text-primary);font-size:22px;font-weight:760;text-anchor:middle;font-family:inherit}

.hx-core-t2{fill:var(--text-muted);font-size:11.5px;letter-spacing:.16em;text-anchor:middle;font-family:inherit}

/* ============================================================
   6. 服务 · 交付管线
   ============================================================ */
#services-detail{--tone:var(--tone-warm);--tone-b:rgba(246,184,107,0.32);--tone-f:rgba(246,184,107,0.09);
  --tone-t:#ffd8a4;--glow-a:rgba(246,184,107,0.11);--glow-b:rgba(32,180,255,0.12);
  --sweep:rgba(246,184,107,0.045);--lw:1.18fr;--rw:0.82fr}

.svc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin-top:26px}

.svc-item{position:relative;padding:19px 19px 17px;overflow:hidden}

.svc-index{
  position:absolute;
  top:9px;right:15px;
  font-size:44px;
  font-weight:800;
  line-height:1;
  letter-spacing:-0.04em;
  color:var(--c,var(--tone));
  opacity:.1;
  transition:opacity .35s ease,transform .35s ease;
}

.svc-item:hover .svc-index{opacity:.2;transform:translateY(-3px)}

.svc-item h3{margin:0 0 9px;font-size:15px;font-weight:700}

.svc-item ul{margin:0;padding:0;list-style:none}

.svc-item li{
  position:relative;
  padding:4px 0 4px 17px;
  color:var(--text-secondary);
  font-size:12.8px;
  line-height:1.58;
}

.svc-item li::before{
  content:'';
  position:absolute;
  top:12px;left:0;
  width:5px;height:5px;
  border-radius:1.5px;
  background:var(--c,var(--tone));
  opacity:.8;
  transform:rotate(45deg);
}

.pl-cap{fill:rgba(10,16,36,0.72);stroke:rgba(255,255,255,0.12);stroke-width:1}

.pl-cap-t{fill:var(--text-secondary);font-size:14px;font-family:inherit;text-anchor:middle}

.pl-box{fill:rgba(13,21,48,0.86);stroke:rgba(255,255,255,0.1);stroke-width:1}

.pl-accent{fill:var(--c,var(--tone))}

.pl-stage{opacity:0;animation:plIn .7s cubic-bezier(.22,.68,.36,1) var(--sd,0s) both}

@keyframes plIn{
  from{opacity:0;transform:translate3d(0,16px,0)}
  to{opacity:1;transform:none}
}

.pl-num{fill:#04101b;font-size:14px;font-weight:750;font-family:inherit;text-anchor:middle}

.pl-title{fill:var(--text-primary);font-size:15.5px;font-weight:660;font-family:inherit}

.pl-sub{fill:var(--text-muted);font-size:11.5px;font-family:inherit}

.pl-link{stroke:rgba(255,255,255,0.12);stroke-width:2;stroke-linecap:round}

.pl-flow{
  fill:none;
  stroke:url(#gFlowBlue);
  stroke-width:3;
  stroke-linecap:round;
  stroke-dasharray:22 78;
  animation:gRun 2.6s linear var(--fd,0s) infinite;
}

.pl-tick{
  stroke:var(--c,var(--tone));
  stroke-width:2;
  stroke-linecap:round;
  opacity:.5;
  animation:plTick 3.2s ease-in-out var(--td,0s) infinite;
}

@keyframes plTick{
  0%,100%{opacity:.22}
  50%{opacity:.95}
}

/* ============================================================
   7. 场景 · 能力蜂巢
   ============================================================ */
#cases{--tone:var(--tone-teal);--tone-b:rgba(85,222,198,0.3);--tone-f:rgba(85,222,198,0.09);
  --tone-t:#8ff0e0;--glow-a:rgba(85,222,198,0.13);--glow-b:rgba(32,180,255,0.12);
  --sweep:rgba(85,222,198,0.045);--lw:1.06fr;--rw:0.94fr}

.scene-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:26px}

.scene-item{padding:15px 17px}

.scene-item h3{margin:0 0 3px;font-size:14.5px;font-weight:680}

.scene-item p{margin:0;color:var(--text-secondary);font-size:12.8px;line-height:1.58}

/* 蜂巢单元：底色/描边按序轮流点亮 */
.hc-cell{
  fill:rgba(13,21,48,0.82);
  stroke:rgba(255,255,255,0.09);
  stroke-width:1.4;
  animation:hcOn 8.4s ease-in-out var(--d,0s) infinite;
}

@keyframes hcOn{
  0%,22%,100%{fill:rgba(13,21,48,0.82);stroke:rgba(255,255,255,0.09)}
  4%{fill:rgba(85,222,198,0.14);stroke:rgba(85,222,198,0.68)}
  16%{fill:rgba(85,222,198,0.14);stroke:rgba(85,222,198,0.68)}
}

.hc-core{fill:rgba(10,16,36,0.96);stroke:url(#gStrokeTeal);stroke-width:2}

.hc-ring{
  fill:none;
  stroke:rgba(85,222,198,0.24);
  stroke-width:1.2;
  stroke-dasharray:12 10;
  transform-box:view-box;
  transform-origin:320px 320px;
  animation:spin360 30s linear infinite;
}

.hc-link{stroke:rgba(255,255,255,0.09);stroke-width:1.6;stroke-linecap:round}

.hc-flow{
  fill:none;
  stroke:url(#gFlowTeal);
  stroke-width:2.6;
  stroke-linecap:round;
  stroke-dasharray:20 80;
  animation:gRun 8.4s linear var(--d,0s) infinite;
}

.hc-t{fill:var(--text-primary);font-size:13.5px;font-weight:650;font-family:inherit;text-anchor:middle}

.hc-t2{fill:var(--text-muted);font-size:12px;font-family:inherit;text-anchor:middle}

.hc-core-t1{fill:var(--text-primary);font-size:19px;font-weight:750;font-family:inherit;text-anchor:middle}

.hc-core-t2{fill:var(--text-muted);font-size:11px;letter-spacing:.14em;font-family:inherit;text-anchor:middle}

/* ============================================================
   8. 案例 · 自动轮播卡（纯 CSS，8 张 × 4s = 32s 一轮）
   ============================================================ */
#case-carousel{--tone:var(--tone-violet);--tone-b:rgba(169,155,255,0.32);--tone-f:rgba(169,155,255,0.1);
  --tone-t:#cbc2ff;--glow-a:rgba(169,155,255,0.14);--glow-b:rgba(32,180,255,0.11);
  --sweep:rgba(169,155,255,0.05);--lw:0.86fr;--rw:1.14fr}

.cs-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;max-width:520px}

.cs-tags span{
  padding:5px 13px;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:999px;
  background:rgba(255,255,255,0.03);
  color:var(--text-secondary);
  font-size:12.5px;
  transition:border-color .3s ease,color .3s ease;
}

.cs-tags span:hover{border-color:var(--tone-b);color:var(--tone-t)}

.cs-stage{
  position:relative;
  min-height:520px;
  padding:28px 30px;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:20px;
  background:linear-gradient(155deg,rgba(18,27,56,0.9),rgba(10,16,36,0.86));
  box-shadow:0 24px 64px rgba(0,0,0,0.34);
  overflow:hidden;
}

/* 顶边流光 */
.cs-stage::before{
  content:'';
  position:absolute;
  top:0;right:0;left:0;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--tone),transparent);
  opacity:.7;
}

.cs-slide{
  position:absolute;
  top:28px;right:30px;left:30px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,296px);
  grid-template-areas:"main visual" "blocks blocks";
  gap:18px 20px;
  align-items:start;
  opacity:0;
  animation:csCycle 32s ease-in-out var(--sd,0s) infinite;
}

@keyframes csCycle{
  0%{opacity:0;transform:translate3d(0,14px,0)}
  1.6%{opacity:1;transform:none}
  11%{opacity:1;transform:none}
  12.5%{opacity:0;transform:translate3d(0,-10px,0)}
  100%{opacity:0;transform:translate3d(0,-10px,0)}
}

.cs-main{grid-area:main}

.cs-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px}

.cs-tag{
  padding:4px 12px;
  border:1px solid var(--c,var(--tone));
  border-radius:999px;
  background:rgba(255,255,255,0.04);
  color:var(--c,var(--tone));
  font-size:12px;
  font-weight:640;
}

.cs-slide h3{margin:12px 0 0;font-size:21px;font-weight:740;line-height:1.3;letter-spacing:-0.02em}

.cs-blocks{grid-area:blocks;margin:0}

.cs-blocks > div{
  display:grid;
  grid-template-columns:66px minmax(0,1fr);
  gap:14px;
  padding:8px 0;
  border-top:1px dashed rgba(255,255,255,0.08);
}

.cs-blocks dt{color:var(--text-muted);font-size:12px;padding-top:1px}

.cs-blocks dd{margin:0;color:var(--text-secondary);font-size:13px;line-height:1.62}

.cs-dots{
  position:absolute;
  right:30px;bottom:22px;left:30px;
  display:flex;
  gap:6px;
}

.cs-dots i{
  flex:1;
  height:3px;
  border-radius:3px;
  background:rgba(255,255,255,0.12);
  transform:scaleX(1);
  overflow:hidden;
}

.cs-dots i::after{
  content:'';
  display:block;
  height:100%;
  border-radius:3px;
  background:var(--tone);
  transform:scaleX(0);
  transform-origin:left;
  animation:csDot 32s linear var(--sd,0s) infinite;
}

@keyframes csDot{
  0%{transform:scaleX(0)}
  12.5%{transform:scaleX(1)}
  12.6%{transform:scaleX(0)}
  100%{transform:scaleX(0)}
}

/* ============================================================
   8b. 案例卡右上角的动图（移植自 index.html + shared/visual-refresh.css
       的 .case-visual 系统）
   ------------------------------------------------------------
   与原实现的三点差异：
   1. 原来是 position:absolute;inset:0 铺满整张卡片，这里改成一个
      296×200 的独立盒子（.cs-visual），所以尺寸相关的数值做了收缩；
   2. 原来动画靠 .case-card.active + .gallery-active 双重门控，这里
      靠 .bn:not(.visible) 的整段暂停，所以选择器改成 .cs-visual 前缀；
   3. 新增 .cv-kpi（右上角业务数值）与 .cv-axis（左下角口径说明），
      数值全部取自本页案例正文，没有新增对外声明的数字。
   子元素类名一律保留原名，方便日后和 index.html 对照。
   ============================================================ */
.cs-visual{
  position:relative;
  grid-area:visual;
  height:200px;
  overflow:hidden;
  border:1px solid rgba(var(--case-rgb),0.2);
  border-radius:14px;
  color:#f5f8ff;
  font-size:11px;
  line-height:1.35;
  background:
    radial-gradient(circle at 78% 26%,rgba(var(--case-rgb),0.18),transparent 32%),
    radial-gradient(circle at 24% 80%,rgba(var(--case-rgb),0.09),transparent 31%),
    linear-gradient(145deg,#0b1229 0%,#111a38 58%,#0a1128 100%);
  box-shadow:0 14px 34px rgba(0,0,0,0.3),0 0 26px rgba(var(--case-rgb),0.07);
  isolation:isolate;
}

.cs-visual::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px);
  background-size:24px 24px;
  -webkit-mask-image:linear-gradient(135deg,rgba(0,0,0,0.82),transparent 82%);
  mask-image:linear-gradient(135deg,rgba(0,0,0,0.82),transparent 82%);
}

.cs-visual::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(115deg,transparent 18%,rgba(var(--case-rgb),0.055) 45%,transparent 70%);
}

.cs-visual > *{position:absolute}

/* 左上角：场景标签 */
.visual-kicker{
  top:6%;left:4%;
  z-index:2;
  max-width:52%;
  padding:4px 9px;
  border:1px solid rgba(var(--case-rgb),0.28);
  border-radius:999px;
  color:var(--case-tone);
  font-size:9px;
  font-weight:700;
  letter-spacing:.06em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  background:rgba(var(--case-rgb),0.08);
  box-shadow:0 0 20px rgba(var(--case-rgb),0.08);
}

/* 右上角：业务数值读数 */
.cv-kpi{
  top:6%;right:4%;
  z-index:3;
  display:flex;
  align-items:baseline;
  gap:5px;
  padding:4px 9px;
  border:1px solid rgba(var(--case-rgb),0.24);
  border-radius:7px;
  background:rgba(9,16,39,0.7);
  white-space:nowrap;
  backdrop-filter:blur(6px);
}

.cv-kpi b{
  color:var(--case-tone);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;
  font-weight:760;
  letter-spacing:-0.02em;
}

.cv-kpi span{color:rgba(225,232,248,0.6);font-size:7.5px}

/* 左下角：数据口径 */
.cv-axis{
  bottom:6%;left:4%;
  z-index:3;
  max-width:56%;
  color:rgba(214,224,244,0.44);
  font-size:7.5px;
  letter-spacing:.04em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.cv-axis::before{
  content:'';
  display:inline-block;
  width:9px;height:1px;
  margin-right:5px;
  vertical-align:3px;
  background:rgba(var(--case-rgb),0.6);
}

/* 右下角：核心指标卡 */
.visual-stat{
  right:5%;bottom:8%;
  z-index:3;
  display:flex;
  min-width:84px;
  padding:7px 10px;
  border:1px solid rgba(var(--case-rgb),0.22);
  border-radius:9px;
  flex-direction:column;
  background:rgba(9,16,39,0.78);
  box-shadow:0 10px 25px rgba(0,0,0,0.2);
  backdrop-filter:blur(8px);
}

.visual-stat strong{color:var(--case-tone);font-size:15px;line-height:1}

.visual-stat span{margin-top:4px;color:rgba(225,232,248,0.65);font-size:7.5px}

/* ---- 01 多业务线 Agent 编排 ---- */
.agent-orbit{
  top:53%;left:49%;
  z-index:2;
  width:82px;height:82px;
  border:1px solid rgba(var(--case-rgb),0.23);
  border-radius:50%;
  transform:translate(-50%,-50%);
}

.agent-orbit::before,
.agent-orbit::after{
  content:'';
  position:absolute;
  top:50%;left:50%;
  z-index:-1;
  width:230%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--case-rgb),0.28),transparent);
  transform:translate(-50%,-50%);
}

.agent-orbit::after{transform:translate(-50%,-50%) rotate(90deg)}

.agent-orbit i{position:absolute;border:1px solid rgba(var(--case-rgb),0.35);border-radius:50%}

.agent-orbit i:first-child{inset:12%;border-top-color:var(--case-tone);border-right-color:transparent}

.agent-orbit i:nth-child(2){inset:28%;border-bottom-color:var(--case-tone);box-shadow:0 0 18px rgba(var(--case-rgb),0.22)}

.agent-orbit > span{
  position:absolute;
  inset:38%;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#081020;
  font-size:7.5px;
  font-weight:800;
  background:var(--case-tone);
  box-shadow:0 0 24px rgba(var(--case-rgb),0.55);
}

.visual-node{
  z-index:2;
  min-width:38px;
  padding:4px 6px;
  border:1px solid rgba(var(--case-rgb),0.25);
  border-radius:7px;
  color:rgba(239,245,255,0.78);
  font-size:9.5px;
  text-align:center;
  background:rgba(17,27,57,0.88);
  box-shadow:0 6px 18px rgba(0,0,0,0.14);
}

.visual-agent .node-1{top:32%;left:5%}
.visual-agent .node-2{top:32%;right:5%}
.visual-agent .node-3{top:56%;left:2%}
.visual-agent .node-4{top:56%;right:2%}
.visual-agent .node-5{bottom:12%;left:19%}
.visual-agent .node-6{right:20%;bottom:12%}
.visual-agent .node-7{top:18%;left:41%}
.visual-agent .visual-stat{right:4%;bottom:6%}
.visual-agent .cv-axis{max-width:44%}

/* ---- 02 GMV 异动归因 ---- */
.attr-metric{top:27%;left:5%;z-index:2;display:flex;flex-direction:column}

.attr-metric span{color:rgba(224,233,248,0.58);font-size:8.5px}

.attr-metric strong{margin-top:3px;font-size:20px;line-height:1;letter-spacing:-0.04em}

.attr-metric em{margin-top:4px;color:#ff7f8b;font-size:8.5px;font-style:normal}

.attr-bars{
  bottom:20%;left:5%;
  z-index:2;
  display:flex;
  width:32%;height:20%;
  align-items:end;
  gap:4px;
}

.attr-bars i,
.bi-bars i,
.medical-bars i{
  display:block;
  flex:1;
  border-radius:3px 3px 1px 1px;
  background:linear-gradient(180deg,var(--case-tone),rgba(var(--case-rgb),0.28));
  transform-origin:bottom;
}

.attr-bars i:nth-child(1){height:42%}
.attr-bars i:nth-child(2){height:67%}
.attr-bars i:nth-child(3){height:48%}
.attr-bars i:nth-child(4){height:88%}
.attr-bars i:nth-child(5){height:59%}
.attr-bars i:nth-child(6){height:76%}

.attr-tree{
  top:26%;right:5%;
  z-index:2;
  display:grid;
  width:44%;height:38%;
  padding-top:25px;
  grid-template-columns:repeat(3,1fr);
  gap:4px;
}

.attr-tree::before{
  content:'';
  position:absolute;
  top:19px;left:12%;
  width:76%;height:26px;
  border-top:1px solid rgba(var(--case-rgb),0.35);
  border-right:1px solid rgba(var(--case-rgb),0.22);
  border-left:1px solid rgba(var(--case-rgb),0.22);
}

.attr-tree strong{
  position:absolute;
  top:0;left:50%;
  padding:4px 9px;
  border:1px solid rgba(var(--case-rgb),0.3);
  border-radius:6px;
  color:var(--case-tone);
  font-size:8.5px;
  background:#111c39;
  transform:translateX(-50%);
}

.attr-tree span{
  z-index:1;
  display:grid;
  height:30px;
  place-items:center;
  border:1px solid rgba(var(--case-rgb),0.2);
  border-radius:6px;
  color:rgba(235,240,252,0.76);
  font-size:9px;
  background:rgba(var(--case-rgb),0.07);
}

.visual-attribution .visual-stat{right:5%;bottom:7%}
.visual-attribution .cv-axis{max-width:40%}

/* ---- 03 户型图 → 效果图 ---- */
.floor-plan{
  top:30%;left:6%;
  z-index:2;
  width:29%;height:44%;
  border:2px solid rgba(var(--case-rgb),0.58);
  border-radius:4px;
  background:rgba(12,19,43,0.72);
}

.floor-plan::before,
.floor-plan::after,
.floor-plan i{
  content:'';
  position:absolute;
  border:1px solid rgba(var(--case-rgb),0.38);
}

.floor-plan::before{inset:12% 48% 47% 9%}
.floor-plan::after{inset:54% 48% 10% 9%}
.floor-plan i:nth-child(1){inset:12% 9% 58% 56%}
.floor-plan i:nth-child(2){inset:47% 9% 10% 56%}
.floor-plan i:nth-child(3){top:49%;left:31%;width:17%;border-bottom:0}
.floor-plan i:nth-child(4){top:38%;left:55%;height:15%;border-right:0}

.floor-plan > span{
  position:absolute;
  right:6%;bottom:5%;
  padding:2px 5px;
  border-radius:4px;
  color:var(--case-tone);
  font-size:7px;
  background:rgba(var(--case-rgb),0.1);
}

.render-arrow{top:45%;left:39%;z-index:2;width:38px;height:30px}

.render-arrow::before{
  content:'';
  position:absolute;
  top:50%;left:0;
  width:100%;height:1px;
  background:linear-gradient(90deg,rgba(var(--case-rgb),0.18),var(--case-tone));
}

.render-arrow::after{
  content:'';
  position:absolute;
  top:calc(50% - 4px);right:0;
  width:7px;height:7px;
  border-top:1px solid var(--case-tone);
  border-right:1px solid var(--case-tone);
  transform:rotate(45deg);
}

.render-arrow i{
  position:absolute;
  top:calc(50% - 3px);left:0;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--case-tone);
  box-shadow:0 0 12px rgba(var(--case-rgb),0.8);
}

.render-arrow span{
  position:absolute;
  top:-3px;left:50%;
  color:rgba(232,239,255,0.7);
  font-size:8px;
  transform:translateX(-50%);
}

.room-preview{
  top:26%;right:6%;
  z-index:2;
  width:36%;height:50%;
  overflow:hidden;
  border:1px solid rgba(var(--case-rgb),0.38);
  border-radius:7px;
  background:
    linear-gradient(150deg,transparent 0 58%,rgba(var(--case-rgb),0.14) 59% 100%),
    linear-gradient(90deg,#17213e 0 48%,#101a35 49% 100%);
  box-shadow:inset 0 0 26px rgba(var(--case-rgb),0.08);
}

.room-preview::before{
  content:'';
  position:absolute;
  right:0;bottom:0;left:0;
  height:35%;
  background:linear-gradient(165deg,#26304b 0 49%,#1c2644 50% 100%);
}

.room-preview .window{
  position:absolute;
  top:12%;left:12%;
  width:30%;height:31%;
  border:2px solid rgba(255,255,255,0.18);
  background:linear-gradient(135deg,rgba(var(--case-rgb),0.38),rgba(var(--case-rgb),0.06));
}

.room-preview .sofa{
  position:absolute;
  right:12%;bottom:21%;
  width:52%;height:23%;
  border-radius:6px 6px 2px 2px;
  background:linear-gradient(180deg,rgba(var(--case-rgb),0.75),rgba(var(--case-rgb),0.3));
}

.room-preview .table{
  position:absolute;
  bottom:13%;left:14%;
  width:28%;height:9%;
  border-radius:50%;
  background:rgba(244,238,228,0.55);
}

.room-preview .lamp{
  position:absolute;
  top:16%;right:9%;
  width:10px;height:10px;
  border-radius:50%;
  background:#fff3b6;
  box-shadow:0 0 22px rgba(255,235,142,0.55);
}

.visual-render .visual-stat{right:6%;bottom:5%}
.visual-render .cv-axis{max-width:40%}

/* ---- 04 POI / AOI 区域诊断 ---- */
.store-map{
  top:25%;left:5%;
  z-index:2;
  width:57%;height:56%;
  overflow:hidden;
  border:1px solid rgba(var(--case-rgb),0.25);
  border-radius:8px;
  background:
    linear-gradient(30deg,transparent 48%,rgba(var(--case-rgb),0.1) 49% 51%,transparent 52%),
    linear-gradient(120deg,transparent 47%,rgba(var(--case-rgb),0.08) 48% 50%,transparent 51%),
    rgba(13,22,44,0.86);
}

.store-map .road-a,
.store-map .road-b{
  position:absolute;
  top:47%;left:-10%;
  width:120%;height:8px;
  border-top:1px dashed rgba(255,255,255,0.16);
  border-bottom:1px dashed rgba(255,255,255,0.12);
  transform:rotate(-10deg);
}

.store-map .road-b{transform:rotate(32deg)}

.store-map .pin{
  position:absolute;
  width:9px;height:9px;
  border:2px solid rgba(9,16,37,0.9);
  border-radius:50% 50% 50% 0;
  background:var(--case-tone);
  box-shadow:0 0 14px rgba(var(--case-rgb),0.5);
  transform:rotate(-45deg);
}

.store-map .p1{top:20%;left:22%}
.store-map .p2{top:58%;left:34%}
.store-map .p3{top:31%;left:66%}
.store-map .p4{top:66%;left:78%}

.store-map .map-scan{
  position:absolute;
  top:48%;left:54%;
  width:18px;height:18px;
  border:1px solid var(--case-tone);
  border-radius:50%;
  opacity:0;
  transform:translate(-50%,-50%);
}

.store-scores{
  top:26%;right:5%;
  z-index:2;
  display:grid;
  width:29%;
  gap:6px;
}

.store-scores > span{
  display:grid;
  padding:6px 8px;
  border:1px solid rgba(var(--case-rgb),0.2);
  border-radius:7px;
  color:rgba(229,235,248,0.62);
  font-size:7px;
  background:rgba(15,25,52,0.84);
  grid-template-columns:5px 1fr auto;
  align-items:center;
  gap:4px;
}

.store-scores i{width:5px;height:5px;border-radius:50%;background:var(--case-tone)}

.store-scores strong{color:#fff;font-size:12px}

.visual-store .visual-stat{right:5%;bottom:6%}
.visual-store .cv-axis{max-width:44%}

/* ---- 05 自然语言问数 ---- */
.bi-chat{
  top:27%;left:5%;
  z-index:2;
  display:flex;
  width:42%;height:46%;
  padding:10px 9px;
  border:1px solid rgba(var(--case-rgb),0.2);
  border-radius:8px;
  flex-direction:column;
  gap:8px;
  background:rgba(13,22,46,0.82);
}

.bi-chat::before{
  content:'AI DATA COPILOT';
  color:rgba(220,230,248,0.47);
  font-size:6.5px;
  letter-spacing:.12em;
}

.bi-chat span{
  max-width:92%;
  padding:6px 8px;
  border-radius:7px 7px 2px 7px;
  color:rgba(242,247,255,0.83);
  font-size:7.5px;
  background:rgba(var(--case-rgb),0.14);
  align-self:flex-end;
}

.bi-chat span:last-child{
  border-radius:7px 7px 7px 2px;
  color:var(--case-tone);
  background:rgba(255,255,255,0.05);
  align-self:flex-start;
}

.bi-dashboard{
  top:25%;right:5%;
  z-index:2;
  width:44%;height:50%;
  padding:9px 10px;
  border:1px solid rgba(var(--case-rgb),0.23);
  border-radius:8px;
  background:rgba(13,22,46,0.88);
}

.bi-dashboard strong{color:rgba(231,238,252,0.7);font-size:8px}

.bi-dashboard em{
  position:absolute;
  right:8px;bottom:6px;
  color:var(--case-tone);
  font-size:7px;
  font-style:normal;
}

.bi-bars{position:absolute;inset:30% 9% 26%;display:flex;align-items:end;gap:4px}

.bi-bars i:nth-child(1){height:48%}
.bi-bars i:nth-child(2){height:70%}
.bi-bars i:nth-child(3){height:56%}
.bi-bars i:nth-child(4){height:88%}
.bi-bars i:nth-child(5){height:78%}

.visual-bi .visual-stat{right:5%;bottom:5%}
.visual-bi .cv-axis{max-width:42%}

/* ---- 06 DRG / DIP 智慧运营 ---- */
.medical-mark{
  top:38%;left:6%;
  z-index:2;
  width:44px;height:44px;
  border:1px solid rgba(var(--case-rgb),0.28);
  border-radius:13px;
  background:rgba(var(--case-rgb),0.07);
  box-shadow:0 0 28px rgba(var(--case-rgb),0.12);
}

.medical-mark i{
  position:absolute;
  top:50%;left:50%;
  width:24px;height:7px;
  border-radius:2px;
  background:var(--case-tone);
  transform:translate(-50%,-50%);
}

.medical-mark i:last-child{transform:translate(-50%,-50%) rotate(90deg)}

.medical-ring{
  top:36%;left:26%;
  z-index:2;
  display:grid;
  width:54px;height:54px;
  border-radius:50%;
  background:conic-gradient(var(--case-tone) 0 78%,rgba(255,255,255,0.08) 78% 100%);
  place-content:center;
  text-align:center;
}

.medical-ring::before{content:'';position:absolute;inset:5px;border-radius:50%;background:#101a37}

.medical-ring strong,
.medical-ring span{position:relative;z-index:1}

.medical-ring strong{color:#fff;font-size:13px;line-height:1}
.medical-ring span{margin-top:2px;color:rgba(225,232,248,0.5);font-size:7px}

.medical-bars{
  top:30%;right:6%;
  z-index:2;
  display:flex;
  width:42%;height:28%;
  padding:9px;
  border:1px solid rgba(var(--case-rgb),0.2);
  border-radius:7px;
  align-items:end;
  gap:4px;
  background:rgba(13,22,46,0.75);
}

.medical-bars i:nth-child(1){height:43%}
.medical-bars i:nth-child(2){height:71%}
.medical-bars i:nth-child(3){height:59%}
.medical-bars i:nth-child(4){height:84%}
.medical-bars i:nth-child(5){height:66%}
.medical-bars i:nth-child(6){height:91%}

.medical-metrics{right:6%;bottom:18%;z-index:2;display:flex;width:42%;gap:5px}

.medical-metrics span{
  flex:1;
  padding:6px;
  border:1px solid rgba(var(--case-rgb),0.18);
  border-radius:6px;
  color:rgba(225,232,248,0.52);
  font-size:7px;
  background:rgba(13,22,46,0.78);
}

.medical-metrics strong{display:block;margin-top:2px;color:var(--case-tone);font-size:12px}

.visual-medical .cv-axis{max-width:46%}

/* ---- 07 内容出海流水线 ---- */
.global-orbit{
  top:30%;left:6%;
  z-index:2;
  width:52px;height:52px;
  border:1px solid rgba(var(--case-rgb),0.45);
  border-radius:50%;
  box-shadow:inset 0 0 24px rgba(var(--case-rgb),0.1),0 0 26px rgba(var(--case-rgb),0.09);
}

.global-orbit::before,
.global-orbit::after{
  content:'';
  position:absolute;
  inset:18% 3%;
  border:1px solid rgba(var(--case-rgb),0.3);
  border-radius:50%;
}

.global-orbit::after{inset:3% 31%}

.global-orbit i{
  position:absolute;
  top:50%;left:-8%;
  width:116%;height:1px;
  background:rgba(var(--case-rgb),0.32);
}

.global-orbit i:nth-child(2){transform:rotate(28deg)}

.global-orbit span{
  position:absolute;
  top:50%;left:50%;
  color:var(--case-tone);
  font-size:9px;
  font-weight:800;
  transform:translate(-50%,-50%);
}

.global-pipeline{
  top:38%;right:4%;
  z-index:2;
  display:flex;
  width:66%;
  justify-content:space-between;
  align-items:center;
}

.global-pipeline::before{
  content:'';
  position:absolute;
  top:50%;right:6%;left:6%;
  z-index:-1;
  height:1px;
  background:linear-gradient(90deg,rgba(var(--case-rgb),0.18),var(--case-tone),rgba(var(--case-rgb),0.18));
}

/* 原来是 42px/个，5 个放不进 296px 的盒子，这里收到 32px */
.global-pipeline span{
  display:grid;
  width:32px;height:30px;
  place-items:center;
  border:1px solid rgba(var(--case-rgb),0.28);
  border-radius:7px;
  color:rgba(237,242,253,0.74);
  font-size:7px;
  background:#111a38;
}

.global-pipeline b{
  position:absolute;
  top:calc(50% - 3px);left:5%;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--case-tone);
  box-shadow:0 0 12px rgba(var(--case-rgb),0.9);
}

.visual-global .visual-stat{right:4%;bottom:7%}
.visual-global .cv-axis{max-width:38%}

/* ---- 08 OpenClaw 企业中枢 ---- */
.claw-hub{
  top:52%;left:50%;
  z-index:2;
  display:grid;
  width:70px;height:70px;
  place-items:center;
  border:1px solid rgba(var(--case-rgb),0.5);
  border-radius:50%;
  background:radial-gradient(circle,rgba(var(--case-rgb),0.3),rgba(var(--case-rgb),0.06) 65%);
  box-shadow:0 0 36px rgba(var(--case-rgb),0.18);
  transform:translate(-50%,-50%);
}

.claw-hub::before,
.claw-hub::after{
  content:'';
  position:absolute;
  top:50%;left:50%;
  z-index:-1;
  width:360%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--case-rgb),0.34),transparent);
  transform:translate(-50%,-50%);
}

.claw-hub::after{width:190%;transform:translate(-50%,-50%) rotate(90deg)}

.claw-hub i{
  position:absolute;
  inset:12%;
  border:1px solid rgba(var(--case-rgb),0.3);
  border-top-color:var(--case-tone);
  border-radius:50%;
}

.claw-hub i:nth-child(2){inset:25%;border-top-color:transparent;border-bottom-color:var(--case-tone)}

.claw-hub strong{color:#f7f9ff;font-size:9.5px;line-height:1.05;text-align:center}

.claw-node{
  z-index:2;
  display:grid;
  min-width:46px;
  padding:5px 8px;
  place-items:center;
  border:1px solid rgba(var(--case-rgb),0.26);
  border-radius:7px;
  color:rgba(235,241,253,0.74);
  font-size:9.5px;
  background:rgba(17,27,57,0.9);
}

.visual-claw .c1{top:48%;left:4%}
.visual-claw .c2{top:48%;right:4%}
.visual-claw .c3{top:20%;left:42%}
.visual-claw .c4{bottom:16%;left:42%}
/* 原实现里 claw 的指标卡在右上角，这里让位给 .cv-kpi，挪回右下角 */
.visual-claw .visual-stat{top:auto;right:4%;bottom:6%}
.visual-claw .cv-axis{max-width:34%}

/* ---- 动效（整段 .bn 未进入视口时由上面的 animation-play-state 冻结）---- */
.cs-visual .agent-orbit i:first-child,
.cs-visual .claw-hub i:first-child{animation:caseVisualSpin 8s linear infinite}

.cs-visual .agent-orbit i:nth-child(2),
.cs-visual .claw-hub i:nth-child(2){animation:caseVisualSpinReverse 5s linear infinite}

.cs-visual .visual-node,
.cs-visual .claw-node{animation:caseVisualNodeGlow 2.8s ease-in-out infinite}

.cs-visual .node-2,.cs-visual .c2{animation-delay:-.45s}
.cs-visual .node-3,.cs-visual .c3{animation-delay:-.9s}
.cs-visual .node-4,.cs-visual .c4{animation-delay:-1.35s}
.cs-visual .node-5{animation-delay:-1.8s}
.cs-visual .node-6{animation-delay:-2.25s}
.cs-visual .node-7{animation-delay:-2.7s}

.cs-visual .attr-bars i,
.cs-visual .bi-bars i,
.cs-visual .medical-bars i{animation:caseVisualBar 2.3s ease-in-out infinite alternate}

.cs-visual .attr-bars i:nth-child(2),
.cs-visual .bi-bars i:nth-child(2),
.cs-visual .medical-bars i:nth-child(2){animation-delay:-.7s}
.cs-visual .attr-bars i:nth-child(3),
.cs-visual .bi-bars i:nth-child(3),
.cs-visual .medical-bars i:nth-child(3){animation-delay:-1.1s}
.cs-visual .attr-bars i:nth-child(4),
.cs-visual .bi-bars i:nth-child(4),
.cs-visual .medical-bars i:nth-child(4){animation-delay:-1.6s}
.cs-visual .attr-bars i:nth-child(5),
.cs-visual .bi-bars i:nth-child(5),
.cs-visual .medical-bars i:nth-child(5){animation-delay:-.35s}
.cs-visual .attr-bars i:nth-child(6),
.cs-visual .medical-bars i:nth-child(6){animation-delay:-1.9s}

.cs-visual .render-arrow i{animation:caseVisualArrow 1.8s ease-in-out infinite}

.cs-visual .room-preview .lamp{animation:caseVisualLamp 2.2s ease-in-out infinite}

.cs-visual .map-scan{animation:caseVisualScan 2.7s ease-out infinite}

.cs-visual .store-map .pin{animation:caseVisualPin 2s ease-in-out infinite}

.cs-visual .store-map .p2{animation-delay:-.5s}
.cs-visual .store-map .p3{animation-delay:-1s}
.cs-visual .store-map .p4{animation-delay:-1.5s}

.cs-visual .bi-chat span:last-child{animation:caseVisualReply 2.6s ease-in-out infinite}

.cs-visual .medical-ring{animation:caseVisualBreathe 2.5s ease-in-out infinite}

.cs-visual .global-orbit{animation:caseVisualFloat 3.2s ease-in-out infinite}

.cs-visual .global-pipeline b{animation:caseVisualFlow 3s linear infinite}

@keyframes caseVisualSpin{to{transform:rotate(360deg)}}

@keyframes caseVisualSpinReverse{to{transform:rotate(-360deg)}}

@keyframes caseVisualNodeGlow{
  0%,100%{border-color:rgba(var(--case-rgb),0.2);background:rgba(17,27,57,0.88)}
  50%{border-color:rgba(var(--case-rgb),0.62);background:rgba(var(--case-rgb),0.14)}
}

@keyframes caseVisualBar{
  0%{opacity:.6;transform:scaleY(.72)}
  100%{opacity:1;transform:scaleY(1)}
}

/* 箭头行程原来是 46px，这里跟着 .render-arrow 一起收到 30px */
@keyframes caseVisualArrow{
  0%{opacity:0;transform:translateX(0)}
  40%,70%{opacity:1}
  100%{opacity:0;transform:translateX(30px)}
}

@keyframes caseVisualLamp{
  50%{opacity:.72;box-shadow:0 0 12px rgba(255,235,142,0.35)}
}

@keyframes caseVisualScan{
  0%{opacity:.8;transform:translate(-50%,-50%) scale(.35)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(6)}
}

@keyframes caseVisualPin{
  0%,100%{margin-top:0}
  50%{margin-top:-4px}
}

@keyframes caseVisualReply{
  0%,14%{opacity:.32;transform:translateY(4px)}
  35%,100%{opacity:1;transform:translateY(0)}
}

@keyframes caseVisualBreathe{
  50%{filter:brightness(1.16);transform:scale(1.035)}
}

@keyframes caseVisualFloat{
  50%{transform:translateY(-5px)}
}

@keyframes caseVisualFlow{
  0%{left:5%;opacity:0}
  8%,92%{opacity:1}
  100%{left:90%;opacity:0}
}



/* ============================================================
   8c. 创始人 · 环绕轨道（并自 preset-5-founder.html）
   ============================================================
   全页唯一用到位图的一块：创始人照片仍走原来的阿里云 OSS 外链，
   外面的锥形渐变环、扫描线、四颗公转的成就标签都是 CSS 画的。
   成就文案全部取自原文，没有新增头衔。
   注意：conic-gradient 在很旧的浏览器里不支持，那种情况下环不显示，
   照片与文字不受影响。fdSpin 并到已有的 spin360。
   ============================================================ */
#founder{--tone:var(--tone-blue);--tone-b:rgba(32,180,255,0.3);--tone-f:rgba(32,180,255,0.08);
  --tone-t:#9ed8ff;--glow-a:rgba(32,180,255,0.15);--glow-b:rgba(169,155,255,0.1);
  --sweep:rgba(32,180,255,0.05);--lw:1.06fr;--rw:0.94fr}

/* 这一块右侧不是 SVG 而是 DOM 轨道，居中摆 */
#founder .bn-visual{display:grid;place-items:center;padding:20px}

.fd-name{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;margin-top:26px}

.fd-name h2{margin:0;font-size:26px;font-weight:750;letter-spacing:-0.02em}

.fd-role{
  padding:4px 12px;
  border:1px solid var(--tone-b);
  border-radius:999px;
  background:var(--tone-f);
  color:var(--tone-t);
  font-size:12.5px;
}

.fd-bio{margin:20px 0 0;max-width:600px}

.fd-bio p{position:relative;margin:0 0 12px;padding-left:18px;color:var(--text-secondary);font-size:14.5px}

.fd-bio p::before{
  content:'';
  position:absolute;
  top:11px;left:0;
  width:6px;height:6px;
  border-radius:2px;
  background:var(--tone);
  opacity:.75;
  transform:rotate(45deg);
}

.fd-bio strong{color:var(--text-primary);font-weight:660}

.fd-orbit{position:relative;width:100%;max-width:520px;aspect-ratio:1 / 1}

/* 两圈轨道 */
.fd-ring{position:absolute;border-radius:50%;border:1px dashed rgba(32,180,255,0.2)}

.fd-ring.r1{inset:22px;animation:spin360 40s linear infinite}
.fd-ring.r2{inset:96px;border-style:solid;border-color:rgba(255,255,255,0.06);animation:spin360 56s linear reverse infinite}

.fd-photo{position:absolute;top:50%;left:50%;width:46%;aspect-ratio:1 / 1;transform:translate(-50%,-50%)}

/* 锥形渐变旋转描边 */
.fd-photo::before{
  content:'';
  position:absolute;
  inset:-4px;
  border-radius:50%;
  background:conic-gradient(from 0deg,#20b4ff,rgba(85,222,198,.85),rgba(169,155,255,.85),transparent 64%,#20b4ff);
  animation:spin360 11s linear infinite;
}

.fd-photo::after{content:'';position:absolute;inset:0;border-radius:50%;background:var(--primary-bg)}

.fd-photo img{
  position:relative;
  z-index:1;
  display:block;
  width:100%;height:100%;
  border-radius:50%;
  object-fit:cover;
  border:1px solid rgba(255,255,255,0.1);
}

/* 扫描线 */
.fd-scan{position:absolute;z-index:2;inset:0;border-radius:50%;overflow:hidden;pointer-events:none}

.fd-scan::before{
  content:'';
  position:absolute;
  right:0;left:0;
  height:34%;
  background:linear-gradient(180deg,transparent,rgba(32,180,255,0.18),transparent);
  animation:fdScanMove 5.5s ease-in-out infinite;
}

@keyframes fdScanMove{
  0%,100%{top:-34%}
  50%{top:100%}
}

/* 公转的成就标签 —— 外层转，内层反向转把字摆正 */
.fd-sat{position:absolute;inset:0;animation:spin360 34s linear infinite;pointer-events:none}

.fd-sat > span{
  position:absolute;
  top:44px;left:50%;
  display:inline-block;
  padding:5px 11px;
  border:1px solid rgba(32,180,255,0.3);
  border-radius:999px;
  background:rgba(10,16,36,0.88);
  box-shadow:0 4px 18px rgba(0,0,0,0.4);
  color:#bfe6ff;
  font-size:11.5px;
  white-space:nowrap;
  transform:translateX(-50%);
  animation:fdCounter 34s linear infinite;
}

@keyframes fdCounter{
  from{transform:translateX(-50%) rotate(0deg)}
  to{transform:translateX(-50%) rotate(-360deg)}
}

.fd-sat.s1,.fd-sat.s1 > span{animation-delay:0s}
.fd-sat.s2,.fd-sat.s2 > span{animation-delay:-8.5s}
.fd-sat.s3,.fd-sat.s3 > span{animation-delay:-17s}
.fd-sat.s4,.fd-sat.s4 > span{animation-delay:-25.5s}

/* 轨道上的微光点 */
.fd-spark{position:absolute;inset:22px;animation:spin360 18s linear infinite;pointer-events:none}

.fd-spark::before{
  content:'';
  position:absolute;
  top:-3px;left:50%;
  width:6px;height:6px;
  margin-left:-3px;
  border-radius:50%;
  background:#8ff0e0;
  box-shadow:0 0 12px rgba(85,222,198,0.9);
}

/* ============================================================
   9. FAQ · 11 步蛇形轨道
   ============================================================ */
#faq{--tone:var(--tone-teal);--tone-b:rgba(85,222,198,0.3);--tone-f:rgba(85,222,198,0.09);
  --tone-t:#8ff0e0;--glow-a:rgba(85,222,198,0.12);--glow-b:rgba(169,155,255,0.09);
  --sweep:rgba(85,222,198,0.045);--lw:1.2fr;--rw:0.8fr}

.faq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:26px}

.faq-item{
  position:relative;
  padding:16px 17px 15px;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  background:linear-gradient(150deg,rgba(255,255,255,0.05),rgba(255,255,255,0.012));
  overflow:hidden;
  transition:transform .35s ease,border-color .35s ease;
}

.faq-item:hover{transform:translateY(-4px);border-color:rgba(255,255,255,0.18)}

.faq-item::before{
  content:'';
  position:absolute;
  top:0;right:0;left:0;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--tone),transparent);
  opacity:0;
  transition:opacity .35s ease;
}

.faq-item:hover::before{opacity:1}

.faq-q{display:flex;align-items:flex-start;gap:10px}

.faq-tag{
  flex:none;
  padding:2px 9px;
  border:1px solid var(--tone-b);
  border-radius:7px;
  background:var(--tone-f);
  color:var(--tone-t);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11.5px;
  font-weight:620;
}

.faq-q-text{font-size:14px;font-weight:660;line-height:1.5}

.faq-a{
  margin-top:10px;
  padding-top:10px;
  border-top:1px dashed rgba(255,255,255,0.09);
  color:var(--text-secondary);
  font-size:12.8px;
  line-height:1.64;
}

.faq-callout{
  padding:9px 13px;
  margin-bottom:8px;
  border-left:2px solid var(--tone);
  border-radius:0 9px 9px 0;
  background:linear-gradient(90deg,var(--tone-f),transparent);
  color:var(--text-primary);
  font-weight:620;
}

.faq-tags-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}

.faq-tags-row span{
  padding:4px 10px;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:999px;
  background:rgba(255,255,255,0.03);
  font-size:11.5px;
}

.fl-panel{fill:rgba(10,16,36,0.5);stroke:rgba(255,255,255,0.08);stroke-width:1}

.fl-cap{fill:var(--text-secondary);font-size:14px;font-weight:640;font-family:inherit}

.fl-cap-sub{fill:var(--text-muted);font-size:11.5px;font-family:inherit}

.fl-track{fill:none;stroke:rgba(255,255,255,0.09);stroke-width:3;stroke-linecap:round}

.fl-run{
  fill:none;
  stroke:url(#gFlowTeal);
  stroke-width:3.4;
  stroke-linecap:round;
  stroke-dasharray:14 86;
  animation:gRun 9s linear infinite;
}

.fl-node{
  fill:#0b1226;
  stroke:var(--c,var(--tone-blue));
  stroke-width:1.8;
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
  animation:flPop .5s cubic-bezier(.2,1.4,.4,1) var(--nd,0s) both;
}

@keyframes flPop{
  from{opacity:0;transform:scale(.25)}
  to{opacity:1;transform:scale(1)}
}

.fl-num{
  fill:var(--c,var(--tone-blue));
  font-size:14px;
  font-weight:700;
  font-family:inherit;
  text-anchor:middle;
  opacity:0;
  animation:gFadeIn .5s ease var(--nd,0s) both;
}

.fl-name{
  fill:var(--text-secondary);
  font-size:12.5px;
  font-family:inherit;
  text-anchor:middle;
  opacity:0;
  animation:gFadeIn .5s ease var(--nd,0s) both;
}

.fl-free{
  fill:none;
  stroke:rgba(85,222,198,0.34);
  stroke-width:1.4;
  stroke-dasharray:9 7;
  animation:flDash 24s linear infinite;
}

@keyframes flDash{to{stroke-dashoffset:-320}}

.fl-free-t{fill:#8ff0e0;font-size:12px;font-weight:640;font-family:inherit}

.fl-legend{fill:var(--text-muted);font-size:11.5px;font-family:inherit}

/* ============================================================
   10. 合作 · 三模式接入
   ============================================================ */
#cooperation{--tone:var(--tone-violet);--tone-b:rgba(169,155,255,0.32);--tone-f:rgba(169,155,255,0.1);
  --tone-t:#cbc2ff;--glow-a:rgba(169,155,255,0.14);--glow-b:rgba(32,180,255,0.11);
  --sweep:rgba(169,155,255,0.05);--lw:1fr;--rw:1fr}

.co-list{display:grid;gap:12px;margin-top:26px;max-width:580px}

.co-item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:15px;align-items:flex-start}

.co-icon{
  display:grid;
  place-items:center;
  width:40px;height:40px;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:12px;
  background:rgba(255,255,255,0.04);
  color:var(--c,var(--tone));
}

.co-icon svg{width:20px;height:20px}

.cn-orbit{
  fill:none;
  stroke:rgba(169,155,255,0.2);
  stroke-width:1.2;
  stroke-dasharray:13 11;
  transform-box:view-box;
  transform-origin:300px 300px;
  animation:spin360 36s linear infinite;
}

.cn-orbit.o2{stroke:rgba(255,255,255,0.06);stroke-dasharray:none;animation:spin360 50s linear reverse infinite}

.cn-link{stroke:rgba(255,255,255,0.1);stroke-width:2;stroke-linecap:round}

.cn-flow{
  fill:none;
  stroke:url(#gFlowViolet);
  stroke-width:3;
  stroke-linecap:round;
  stroke-dasharray:16 84;
  animation:gRun 3.4s linear var(--fd,0s) infinite;
}

.cn-flow.back{
  stroke:url(#gFlowBlue);
  stroke-dasharray:10 90;
  animation-direction:reverse;
  animation-duration:4.6s;
}

.cn-node{
  fill:rgba(13,21,48,0.94);
  stroke:var(--c,var(--tone));
  stroke-width:1.8;
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
  animation:cnPop .6s cubic-bezier(.2,1.4,.4,1) var(--nd,0s) both;
}

@keyframes cnPop{
  from{opacity:0;transform:scale(.3)}
  to{opacity:1;transform:scale(1)}
}

.cn-halo{
  fill:none;
  stroke:var(--c,var(--tone));
  stroke-width:1.3;
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
  animation:cnHalo 3.6s ease-out var(--nd,0s) infinite;
}

@keyframes cnHalo{
  0%{opacity:.5;transform:scale(.85)}
  70%,100%{opacity:0;transform:scale(1.6)}
}

.cn-t{
  fill:var(--text-primary);
  font-size:15px;
  font-weight:660;
  font-family:inherit;
  text-anchor:middle;
  opacity:0;
  animation:gFadeIn .5s ease var(--nd,0s) both;
}

.cn-sub{
  fill:var(--text-muted);
  font-size:11.5px;
  font-family:inherit;
  text-anchor:middle;
  opacity:0;
  animation:gFadeIn .5s ease var(--nd,0s) both;
}

.cn-core{fill:rgba(10,16,36,0.96);stroke:rgba(255,255,255,0.14);stroke-width:1.4}

.cn-core-ring{
  fill:none;
  stroke:url(#gStrokeViolet);
  stroke-width:2.2;
  stroke-dasharray:11 8;
  transform-box:view-box;
  transform-origin:300px 300px;
  animation:spin360 20s linear reverse infinite;
}

.cn-core-t1{fill:var(--text-primary);font-size:20px;font-weight:750;text-anchor:middle;font-family:inherit}

.cn-core-t2{fill:var(--text-muted);font-size:11.5px;letter-spacing:.14em;text-anchor:middle;font-family:inherit}

/* ============================================================
   11. 联系 · 接通示意
   ============================================================ */
#contact{--tone:var(--tone-blue);--tone-b:rgba(32,180,255,0.3);--tone-f:rgba(32,180,255,0.09);
  --tone-t:#9ed8ff;--glow-a:rgba(32,180,255,0.15);--glow-b:rgba(85,222,198,0.09);
  --sweep:rgba(32,180,255,0.05);--lw:1fr;--rw:1fr}

.ct-panel{
  margin-top:24px;
  padding:20px 22px;
  border:1px solid rgba(255,255,255,0.09);
  border-radius:16px;
  background:linear-gradient(150deg,rgba(255,255,255,0.05),rgba(255,255,255,0.012));
  max-width:520px;
}

.ct-lines{margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px}

.ct-lines > div{
  display:flex;
  gap:14px;
  padding:8px 0;
  border-bottom:1px dashed rgba(255,255,255,0.07);
}

.ct-lines dt{flex:none;width:52px;color:var(--text-muted)}

.ct-lines dd{margin:0;color:var(--text-primary)}

.ct-lines a{color:var(--tone-t);text-decoration:none}

.ct-lines a:hover{text-decoration:underline}

.ct-cursor{
  display:inline-block;
  width:8px;height:14px;
  margin-left:2px;
  background:var(--tone);
  vertical-align:-2px;
  animation:ctBlink 1.1s steps(2,start) infinite;
}

@keyframes ctBlink{
  0%,100%{opacity:1}
  50%{opacity:0}
}

.ct-note{margin:14px 0 0;color:var(--text-secondary);font-size:13.5px}

/* 发射端涟漪 */
.sg-ripple{
  fill:none;
  stroke:var(--tone-blue);
  stroke-width:1.5;
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
  animation:sgRipple 3.6s ease-out var(--rd,0s) infinite;
}

@keyframes sgRipple{
  0%{opacity:.55;transform:scale(.6)}
  70%,100%{opacity:0;transform:scale(2.4)}
}

.sg-node{fill:rgba(13,21,48,0.94);stroke:var(--c,var(--tone-blue));stroke-width:1.8}

.sg-t{fill:var(--text-primary);font-size:15px;font-weight:660;font-family:inherit;text-anchor:middle}

.sg-sub{fill:var(--text-muted);font-size:11.5px;font-family:inherit;text-anchor:middle}

.sg-arc{fill:none;stroke:rgba(255,255,255,0.12);stroke-width:2;stroke-linecap:round}

.sg-packet{
  fill:none;
  stroke:url(#gFlowBlue);
  stroke-width:3.2;
  stroke-linecap:round;
  stroke-dasharray:12 88;
  animation:gRun 3s linear var(--pd,0s) infinite;
}

.sg-badge{fill:rgba(10,16,36,0.9);stroke:var(--tone-b);stroke-width:1.2}

.sg-badge-t{fill:#9ed8ff;font-size:13px;font-weight:640;font-family:inherit;text-anchor:middle}

.sg-step{fill:rgba(13,21,48,0.86);stroke:rgba(255,255,255,0.1);stroke-width:1}

.sg-step-t{fill:var(--text-secondary);font-size:13px;font-family:inherit;text-anchor:middle}

.sg-step-n{
  fill:var(--tone-teal);
  transform-box:fill-box;
  transform-origin:center;
  animation:rdBlink 3.2s ease-in-out var(--d,0s) infinite;
}

.sg-link{stroke:rgba(255,255,255,0.1);stroke-width:1.6;stroke-linecap:round}

.sg-link-flow{
  fill:none;
  stroke:url(#gFlowTeal);
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-dasharray:18 82;
  animation:gRun 3.4s linear var(--fd,0s) infinite;
}

/* ============================================================
   13. 响应式
   ============================================================ */
@media (max-width:1080px){
  .bn{min-height:0;padding:56px 0}
  .bn-inner{grid-template-columns:minmax(0,1fr) !important;gap:40px;padding:0 36px}
  /* 单列之后不再左右互换，文字一律排在可视化前面 */
  .bn-flip .bn-left,.bn-flip .bn-visual{order:0}
  .bn::after{background:linear-gradient(180deg,rgba(6,9,22,0.72),rgba(6,9,22,0.2) 46%)}
  .bn-visual{max-width:560px;margin:0 auto;width:100%}
  .divider{padding:0 36px}
  /* 案例卡单列：动图改成整幅横条压在标题下面 */
  .cs-stage{min-height:640px}
  .cs-slide{grid-template-columns:minmax(0,1fr);grid-template-areas:"main" "visual" "blocks";gap:16px}
  .cs-visual{height:190px}
  /* 首屏没有右栏，塌到 0 高就太扁了，单独保一个下限 */
  #hero{min-height:min(680px,100vh)}
  .hb-pill-1,.hb-pill-3{display:none}
  .hb-circuit{opacity:.55}
  .fd-orbit{max-width:440px}
}

@media (max-width:720px){
  .hb-pills{display:none}
  .hb-scroll{display:none}
  .hb-slogan{padding-left:16px}
  /* 窄屏没有"左侧留白"可言，遮罩取消、整体压暗即可 */
  .hb-circuit{opacity:.32;mask-image:none;-webkit-mask-image:none}
}

@media (max-width:640px){
  .bn-inner{padding:0 20px}
  .svc-grid,.scene-grid,.faq-grid{grid-template-columns:minmax(0,1fr)}
  .co-item{grid-template-columns:minmax(0,1fr)}
  .cs-stage{min-height:700px;padding:22px 20px}
  .cs-slide{top:22px;right:20px;left:20px}
  .cs-dots{right:20px;left:20px}
  .cs-blocks > div{grid-template-columns:minmax(0,1fr);gap:2px}
  .cs-visual{height:172px}
  .rd-label,.hc-t,.fl-name,.cn-t,.hx-label{font-size:15px}
  .stat-grid{grid-template-columns:minmax(0,1fr)}
  .adv-item{grid-template-columns:minmax(0,1fr)}
  .fd-orbit{max-width:320px}
  .fd-ring.r2{inset:60px}
  .fd-sat > span{top:24px;padding:4px 9px;font-size:10.5px}
}

@media (max-width:380px){
  #hero .bn-zh{font-size:30px}
}

/* ============================================================
   14. 降低动效偏好
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .backdrop::after,.bn::before,.bn-sweep,.bn-eyebrow i,.dv-pulse,
  .hb-grid,.hb-glow,.hb-particles i,.hb-pulse,.hb-joint,.hb-chip-core,
  .hb-ring,.hb-halo,.hb-pill,.hb-shine,.hb-scroll::after,
  .bn-motes i,.stat-cell::after,.gc-area,.gc-line,.gc-runner,
  .gc-node,.gc-halo,.gc-tag,.gc-tag-sub,.gc-bar,
  .adv-icon::after,.hx-poly,.hx-orbit,.hx-vertex,.hx-vertex-halo,
  .hx-label,.hx-core-ring,
  .fd-ring,.fd-photo::before,.fd-scan::before,.fd-sat,.fd-sat > span,.fd-spark,
  .rd-ring,.rd-beam,.rd-flow,.rd-core,.pl-flow,.pl-tick,
  .hc-cell,.hc-ring,.hc-flow,.fl-run,.fl-free,
  .cn-orbit,.cn-core-ring,.cn-flow,.cn-halo,
  .sg-ripple,.sg-packet,.sg-link-flow,.sg-step-n,.ct-cursor{
    animation:none !important;
  }
  .bn-sweep,.rd-beam,.rd-flow,.pl-flow,.hc-flow,.fl-run,
  .cn-flow,.cn-halo,.sg-ripple,.sg-packet,.sg-link-flow,
  .hb-particles,.gc-runner,.gc-halo,.hx-vertex-halo,.fd-scan{display:none}
  .rise{opacity:1;animation:none}
  /* 首屏：高光渐变停在文字上会糊，退回纯色 */
  .hb-shine{background:none;-webkit-text-fill-color:currentColor;color:var(--text-primary)}
  .hb-joint,.hb-chip-core,.hb-halo{opacity:.7}
  .stat-cell::after{transform:scaleX(1)}
  .gc-area,.gc-tag,.gc-tag-sub,.gc-node,.hx-poly,.hx-vertex,.hx-label{opacity:1}
  .gc-line{stroke-dashoffset:0}
  .gc-bar{transform:none}
  /* 停转后把四个成就标签手动摆到四个方位，避免全叠在正上方 */
  .fd-sat.s1{transform:rotate(0deg)}
  .fd-sat.s2{transform:rotate(90deg)}
  .fd-sat.s3{transform:rotate(180deg)}
  .fd-sat.s4{transform:rotate(270deg)}
  .fd-sat.s2 > span{transform:translateX(-50%) rotate(-90deg)}
  .fd-sat.s3 > span{transform:translateX(-50%) rotate(-180deg)}
  .fd-sat.s4 > span{transform:translateX(-50%) rotate(-270deg)}
  .rd-gauge{stroke-dashoffset:88;animation:none}
  .rd-spark{stroke-dashoffset:0;animation:none}
  .rd-spark-dot{opacity:1;animation:none}
  .pl-stage{opacity:1;animation:none}
  .fl-node,.fl-num,.fl-name,.cn-node,.cn-t,.cn-sub{opacity:1;animation:none}
  .hc-cell{fill:rgba(85,222,198,0.08);stroke:rgba(85,222,198,0.35)}
  /* 轮播停掉后只留第一张，其余隐藏，避免八张叠在一起 */
  .cs-slide{opacity:0;animation:none;position:absolute}
  .cs-slide:first-of-type{opacity:1}
  .cs-dots i::after{animation:none;transform:scaleX(0)}
  .cs-dots i:first-child::after{transform:scaleX(1)}
}

/* ============================================================
   15. 与 index.html 的集成
   ============================================================ */
/* .backdrop 是 position:fixed;z-index:0，会形成层叠上下文压住页面里未定位的
   静态内容，所以 index.html 原有的 .container（页头、页脚）要显式抬上来。 */
body > .container{position:relative;z-index:2}

/* 案例板块用的是预设的 .cs-stage 纯 CSS 自动轮播（8 张 × 4s = 32s 一轮），
   index.html 原来的 3D 环形轮播与卡内图集已整体移除，所以这一块和其他板块
   一样是两栏，正常参与「文左图右 / 图左文右」的交替。 */