/* ============================================================================
   昭明算界 · 站点共享样式层  site.css
   ----------------------------------------------------------------------------
   原先这些规则内联在 index.html 的 <style> 里。官网从单页拆成 7 个页面后，
   同一份手写样式要被所有页面复用，继续内联就会产生 7 份副本，改一处漏六处。
   抽成外链文件后浏览器还能跨页命中缓存（第二个页面 0 请求）。

   ⚠ 加载顺序：本文件必须排在 assets/build/tailwind.css 之前。
     Tailwind 与手写规则同权重时靠「后来者胜」定胜负，顺序反了会错版
     （典型：.magnetic{display:inline-block} 会盖掉 .inline-flex）。
   ============================================================================ */

/* ===========================================================================
   1. 设计令牌
   ---------------------------------------------------------------------------
   原来颜色是散在各处的字面量（#2563eb 出现了 40 多次）。抽成变量后，
   新页面里的图表、徽章、分隔线能直接引用同一套色，不会各写各的蓝。
   =========================================================================== */
:root {
  /* 品牌主色阶 —— 蓝（理性）· 青（数据）· 紫（智能）· 铜（昭明/东方） */
  --zm-blue-50:  #eff6ff;
  --zm-blue-100: #dbeafe;
  --zm-blue-200: #bfdbfe;
  --zm-blue-400: #60a5fa;
  --zm-blue-500: #3b82f6;
  --zm-blue-600: #2563eb;
  --zm-blue-700: #1d4ed8;
  --zm-blue-900: #1e3a8a;

  --zm-cyan-50:  #ecfeff;
  --zm-cyan-200: #a5f3fc;
  --zm-cyan-500: #06b6d4;
  --zm-cyan-600: #0891b2;
  --zm-cyan-700: #0e7490;

  --zm-violet-50:  #f5f3ff;
  --zm-violet-200: #ddd6fe;
  --zm-violet-500: #8b5cf6;
  --zm-violet-600: #7c3aed;

  --zm-amber-500: #f59e0b;
  --zm-amber-600: #d97706;
  --zm-copper:    #b45309;

  --zm-green-500: #22c55e;
  --zm-green-600: #16a34a;
  --zm-rose-500:  #f43f5e;

  /* 中性色 —— 与 tailwind.config.js 里的 porcelain / ink 对齐 */
  --zm-ink-900: #090d1f;
  --zm-ink-800: #1e253c;
  --zm-ink-600: #475569;
  --zm-ink-500: #64748b;
  --zm-ink-400: #94a3b8;
  --zm-line:    rgba(15, 23, 42, .08);
  --zm-line-2:  rgba(15, 23, 42, .14);
  --zm-surface: #ffffff;
  --zm-bg:      #f8fafc;

  /* 圆角节奏：卡片 20 / 面板 28 / 药丸 999 */
  --zm-r-sm: 10px;
  --zm-r-md: 14px;
  --zm-r-lg: 20px;
  --zm-r-xl: 28px;

  /* 阴影：统一为「一层贴边 + 一层扩散」，避免各处手写不同的 box-shadow */
  --zm-shadow-1: 0 1px 2px rgba(15, 23, 42, .04);
  --zm-shadow-2: 0 2px 8px rgba(15, 23, 42, .04), 0 12px 28px -12px rgba(15, 23, 42, .10);
  --zm-shadow-3: 0 4px 16px rgba(15, 23, 42, .05), 0 24px 56px -20px rgba(15, 23, 42, .16);

  /* 缓动 */
  --ease-spring: linear(0, .009, .035 4.3%, .141, .281 12.7%, .444, .613 22%, .696, .771,
                        .837, .892, .936, .968 41.8%, .991, 1.006 48.6%, 1.014, 1.016,
                        1.014, 1.009, 1.003 68%, .999, .997, .997, .998, 1);
  --ease-cine: cubic-bezier(.16, 1, .3, 1);
  --ease-out:  cubic-bezier(.25, .8, .25, 1);
}

/* ===========================================================================
   2. 基础排版
   =========================================================================== */
/* 字体栈补上本地中文字体：Web 字体异步加载期间（以及加载失败时）
   正文直接用系统自带的苹方 / 微软雅黑渲染，避免退到衬线默认字体导致的观感落差 */
html, body {
  background-color: #f8fafc;
  color: #475569;
  font-family: 'Manrope', 'Noto Sans SC', 'PingFang SC', 'HarmonyOS Sans SC',
               'Microsoft YaHei', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body { overflow-x: hidden; }
::selection { background: rgba(37, 99, 235, 0.12); color: #090d1f; }

/* 中文数字并排时用等宽数字，图表与 KPI 才不会在数值跳动时抖宽 */
.tnum, [data-live], [data-counter], .zm-chart text { font-variant-numeric: tabular-nums; }

/* Custom Scrollbar —— html 选择器保证 Chrome/Edge 视口滚动条也生效 */
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 8px; }
html::-webkit-scrollbar-track, body::-webkit-scrollbar-track { background: #f1f5f9; }
html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #cbd5e1, #94a3b8);
  border-radius: 4px;
}
html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #94a3b8, #64748b);
}
/* Firefox */
html { scrollbar-width: thin; scrollbar-color: #cbd5e1 #f1f5f9; }

.gradient-text {
  background: linear-gradient(135deg, #1e40af 0%, #0891b2 50%, #6d28d9 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradient-x 8s ease infinite;
}

/* ===========================================================================
   3. 装饰层 / 动效基础件（沿用原单页实现）
   =========================================================================== */

/* Light Border Beam Animation */
.border-beam {
  position: relative;
  border-radius: 1.5rem;
  background: #ffffff;
  transition: background 0.3s;
}
.border-beam::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 1.5rem;
  padding: 1.5px;
  background: linear-gradient(var(--angle, 0deg), rgba(37,99,235,0.05), rgba(8,145,178,0.5) 50%, rgba(125,51,255,0.05));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: rotate-angle 4s linear infinite;
}
@keyframes rotate-angle { to { --angle: 360deg; } }
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* Light Spotlight */
.spotlight { position: relative; overflow: hidden; isolation: isolate; }
.spotlight::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(400px circle at var(--mx, -200px) var(--my, -200px), rgba(37, 99, 235, 0.05), rgba(125, 51, 255, 0.03) 30%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}
.spotlight:hover::after { opacity: 1; }
.spotlight > * { position: relative; z-index: 2; }

/* Space Aurora - Ultra Soft Pastel
   原实现是 3 个 600~750px 的圆形 div 叠 filter:blur(140px) + mix-blend-mode:multiply。
   大半径高斯模糊要先栅格化再做卷积，混合模式又强制额外合成层，
   是整页最贵的绘制项（滚动时尤其明显）。
   这里用等效的 radial-gradient 直接画在一个 fixed 层上：观感几乎一致，
   但只是一次普通渐变填充，没有模糊、没有混合层。 */
.aurora {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(46% 40% at 6% 0%,   rgba(191, 219, 254, .55) 0%, rgba(191, 219, 254, 0) 72%),
    radial-gradient(44% 38% at 98% 30%, rgba(233, 213, 255, .50) 0%, rgba(233, 213, 255, 0) 72%),
    radial-gradient(42% 36% at 32% 100%, rgba(186, 240, 250, .48) 0%, rgba(186, 240, 250, 0) 72%);
}

/* Subtle Grid Overlay */
.grid-overlay {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(15, 23, 42, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.025) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 25%, #000 40%, transparent 95%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 25%, #000 40%, transparent 95%);
}

/* Subtle texture */
.noise {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.012;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='100'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='1' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Infinite Marquee */
.marquee-track { display: flex; gap: 5rem; width: max-content; animation: marquee 40s linear infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-mask { mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.marquee-track.reverse { animation-direction: reverse; animation-duration: 55s; }

/* Glass Porcelain Pill */
.glass-pill {
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.02), inset 0 1px 1px #ffffff;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.magnetic {
  display: inline-block; position: relative; overflow: hidden;
  transition: transform 0.3s cubic-bezier(.25,.8,.25,1);
}
/* will-change 只在真正要动的时候给：常驻会把全站 20 个按钮各自提成一个
   合成层，白白占显存也拖慢合成 */
.magnetic:hover { will-change: transform; }
.gsap-ready [data-anim] { opacity: 0; }

.text-glow-blue { text-shadow: 0 0 24px rgba(37, 99, 235, 0.15); }

/* Section eyebrow tag */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; font-family: 'Space Grotesk', monospace; font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; background: linear-gradient(135deg, rgba(37,99,235,.06), rgba(125,51,255,.06)); border: 1px solid rgba(37,99,235,.12); color: #2563eb; }
.eyebrow::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #2563eb; box-shadow: 0 0 8px #2563eb; }

/* Dashboard live dot */
@keyframes liveDot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.85); } }
.live-dot { animation: liveDot 1.4s ease-in-out infinite; }

/* Ticker bar animation */
@keyframes barFill { from { width: 0%; } }
.bar-fill { animation: barFill 1.6s cubic-bezier(.4,0,.2,1) both; }

/* Sparkline path animation */
@keyframes sparkDraw { from { stroke-dashoffset: 200; } to { stroke-dashoffset: 0; } }
.spark-path { stroke-dasharray: 200; animation: sparkDraw 2.4s ease-out forwards; }

/* Card lifted shadow on hover */
.lift-card { transition: transform .4s cubic-bezier(.25,.8,.25,1), box-shadow .4s, border-color .4s; }
.lift-card:hover { transform: translateY(-6px); }

/* Diagonal striped backgrounds */
.stripes-blue { background-image: repeating-linear-gradient(45deg, rgba(37,99,235,.03) 0 8px, transparent 8px 16px); }

/* Hero dashboard card */
.dash-card { background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%); border: 1px solid rgba(15, 23, 42, 0.06); border-radius: 24px; box-shadow: 0 1px 2px rgba(15,23,42,.03), 0 8px 32px -8px rgba(37,99,235,.1), 0 24px 60px -12px rgba(15,23,42,.08); }
.dash-stat { background: #ffffff; border: 1px solid rgba(15,23,42,.05); border-radius: 14px; padding: 12px 14px; transition: all .3s; }
.dash-stat:hover { border-color: rgba(37,99,235,.2); transform: translateY(-2px); box-shadow: 0 6px 16px -4px rgba(37,99,235,.08); }

/* Floating chip pulse */
@keyframes floatChip { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.float-chip { animation: floatChip 4s ease-in-out infinite; }

/* Section divider ornament */
.divider-orn { position: relative; height: 1px; background: linear-gradient(90deg, transparent, rgba(15,23,42,.08), transparent); }
.divider-orn::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(135deg, #2563eb, #7c3aed); box-shadow: 0 0 20px rgba(37,99,235,.4); }

/* Trend mini sparkline container */
.trend-line { stroke: url(#trend-gradient); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.trend-area { fill: url(#trend-area-gradient); }

/* Tab pane fade-slide */
.tab-pane { animation: tabFadeIn .5s cubic-bezier(.25,.8,.25,1); }
@keyframes tabFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Flow travel dot animation */
@keyframes flow-travel {
  0%   { left: 0%;   opacity: 0; transform: translateY(-50%) scale(0.6); }
  8%   { opacity: 1; transform: translateY(-50%) scale(1); }
  92%  { opacity: 1; transform: translateY(-50%) scale(1); }
  100% { left: 100%; opacity: 0; transform: translateY(-50%) scale(0.6); }
}

/* Capability card hover shimmer + accent */
.cap-card { position: relative; overflow: hidden; }
.cap-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(110deg, transparent 30%, rgba(37,99,235,.05) 50%, transparent 70%); transition: left .8s; z-index: 0; }
.cap-card:hover::before { left: 130%; }
.cap-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; border-radius: 2px 2px 0 0; background: linear-gradient(90deg, var(--cap-c1, #3b82f6), var(--cap-c2, #06b6d4)); opacity: 0; transition: opacity .3s ease; }
.cap-card:hover::after { opacity: 1; }

/* 顶部阅读进度条 */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9999; pointer-events: none; background: transparent; }
.scroll-progress-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #2563eb 0%, #06b6d4 45%, #7c3aed 100%);
  box-shadow: 0 0 10px rgba(37,99,235,.55), 0 0 22px rgba(124,58,237,.35);
  transform-origin: 0 50%;
  transition: width .08s linear;
  border-radius: 0 2px 2px 0;
}

/* Hero 打字机轮播 */
.typewriter-wrap { display: inline-flex; align-items: baseline; min-height: 1.4em; min-width: 9.5em; }
.typewriter-text {
  background: linear-gradient(90deg, #2563eb, #0891b2, #7c3aed);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 800; white-space: nowrap;
  transition: opacity .25s ease;
}
.typewriter-caret {
  display: inline-block; width: 2px; height: 1em;
  background: linear-gradient(180deg, #2563eb, #7c3aed);
  margin-left: 3px;
  animation: caret-blink 1s steps(2) infinite;
  vertical-align: -2px; border-radius: 1px;
}
@keyframes caret-blink { 50% { opacity: 0; } }
@media (max-width: 480px) { .typewriter-wrap { min-width: 8.5em; } }

/* 产品卡 hover 光流扫过 */
.card-shimmer { position: relative; }
.card-shimmer::before {
  content: ''; position: absolute; top: 0; left: -120%;
  width: 80%; height: 100%;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%);
  pointer-events: none; z-index: 10;
  transform: skewX(-12deg);
  transition: left 0s;
}
.card-shimmer:hover::before { animation: shimmer-pass 1.4s cubic-bezier(.4,0,.2,1); }
@keyframes shimmer-pass { from { left: -120%; } to { left: 130%; } }

/* Live Dashboard 数字波动 flash */
@keyframes valueFlash {
  0%   { background-color: rgba(34,197,94,.25); }
  100% { background-color: transparent; }
}
.value-flash { animation: valueFlash .65s ease-out; border-radius: 4px; padding: 0 3px; margin: 0 -3px; }
[data-live] { transition: color .2s ease; }

/* FAQ details/summary 折叠动画 */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details > summary::marker { content: ''; }
.faq-chev { transition: transform .3s cubic-bezier(.4,0,.2,1); }
details[open] .faq-chev { transform: rotate(180deg); }
@keyframes faqOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
details[open] > div:not(summary) { animation: faqOpen .35s cubic-bezier(.25,.8,.25,1); }

/* 按钮 ripple 点击动画 */
.ripple-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.48);
  pointer-events: none;
  transform: scale(0);
  animation: ripple .65s cubic-bezier(.4,0,.2,1) forwards;
  mix-blend-mode: overlay;
}
@keyframes ripple { to { transform: scale(3.5); opacity: 0; } }
/* 白底按钮上改用品牌蓝 ripple，避免白色涟漪在浅底上不可见 */
.magnetic.bg-white .ripple-circle,
.magnetic.bg-slate-50 .ripple-circle,
.magnetic.bg-slate-100 .ripple-circle {
  background: rgba(37, 99, 235, 0.18);
  mix-blend-mode: normal;
}

/* 全局 focus-visible ring（无障碍） */
:focus { outline: none; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
details > summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 3px;
  border-radius: 8px;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}

/* 主导航 active state 高亮 */
nav[aria-label="主导航"] a { position: relative; transition: color .25s ease, background-color .25s ease; }
nav[aria-label="主导航"] a.nav-active { color: #2563eb; background-color: rgba(241, 245, 249, .85); }
nav[aria-label="主导航"] a.nav-active::after {
  content: '';
  position: absolute; left: 50%; bottom: 2px;
  transform: translateX(-50%);
  width: 50%; height: 2px;
  background: linear-gradient(90deg, #2563eb, #06b6d4, #7c3aed);
  border-radius: 2px;
  animation: navUnderlineIn .35s cubic-bezier(.25,.8,.25,1);
}
@keyframes navUnderlineIn { from { width: 0; opacity: 0; } to { width: 50%; opacity: 1; } }

/* ===========================================================================
   4. 昭明 · 东方测度美学层
   =========================================================================== */
.serif-zh { font-family: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', 'STSong', SimSun, serif; }

/* 「照见」金铜渐变 —— 区别于大众蓝紫的品牌记忆点 */
.glow-ink {
  background: linear-gradient(160deg, #0f172a 0%, #1e40af 42%, #b45309 78%, #d97706 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradient-x 10s ease infinite;
}

/* 印章 —— 朱文方印「昭」 */
.seal-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 8px;
  background: linear-gradient(145deg, #c2410c, #9a3412);
  color: #fff7ed; font-family: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', 'STSong', SimSun, serif; font-weight: 900; font-size: 22px;
  box-shadow: 0 4px 14px -4px rgba(154, 52, 18, 0.55), inset 0 1px 0 rgba(255,255,255,0.25);
  transform: rotate(-3deg);
  user-select: none;
}

/* 竖排测度铭文 */
.vertical-mark {
  writing-mode: vertical-rl; text-orientation: mixed;
  font-family: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', 'STSong', SimSun, serif; font-weight: 700;
  font-size: 12px; letter-spacing: 0.55em; color: rgba(15, 23, 42, 0.38);
  user-select: none;
}
.vertical-mark::after {
  content: ''; display: block; margin-top: 14px; width: 1px; height: 56px;
  background: linear-gradient(180deg, rgba(180, 83, 9, 0.65), transparent);
  margin-left: auto; margin-right: auto;
}

/* 测度刻度线 —— hero 标题下划线（呼应「算界」的精密感） */
.measure-rule { position: relative; display: block; height: 12px; margin-top: 6px; }
.measure-rule::before {
  content: ''; position: absolute; left: 0; right: 0; top: 5px; height: 2px;
  background: linear-gradient(90deg, #1e40af 0%, #0891b2 55%, #d97706 100%);
  border-radius: 2px;
}
.measure-rule i { position: absolute; top: 0; width: 1.5px; height: 12px; background: #0f172a; opacity: .55; }
.measure-rule i:nth-child(1) { left: 0; }
.measure-rule i:nth-child(2) { left: 25%; height: 8px; top: 2px; opacity: .3; }
.measure-rule i:nth-child(3) { left: 50%; }
.measure-rule i:nth-child(4) { left: 75%; height: 8px; top: 2px; opacity: .3; }
.measure-rule i:nth-child(5) { right: 0; background: #d97706; opacity: 1; }

/* 光标光晕（仅精确指针设备） */
#cursor-glow {
  position: fixed; left: 0; top: 0; width: 460px; height: 460px;
  margin-left: -230px; margin-top: -230px;
  border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.05) 0%, rgba(217, 119, 6, 0.025) 38%, transparent 68%);
  opacity: 0; transition: opacity .5s ease;
  will-change: transform;
}
@media (pointer: coarse) { #cursor-glow { display: none; } }

/* 宋体引言块（客户案例引用） */
.serif-quote { font-family: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', 'STSong', SimSun, serif; font-weight: 600; font-style: normal; }

/* hero 衬线主标题混排 */
.hero-serif { font-family: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', 'STSong', SimSun, serif; font-weight: 900; letter-spacing: 0.01em; }

/* 折角光斑 —— hero 右上的「昭」光束 */
.light-shaft {
  position: absolute; top: -12%; right: -6%; width: 58%; height: 130%;
  pointer-events: none; z-index: 0;
  background: conic-gradient(from 218deg at 78% 12%,
    rgba(217, 119, 6, 0.10) 0deg, rgba(37, 99, 235, 0.07) 42deg,
    transparent 95deg, transparent 360deg);
  filter: blur(2px);
  mask-image: radial-gradient(ellipse 90% 80% at 75% 20%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 75% 20%, #000 30%, transparent 78%);
}

/* Image2 纯图片无缝跑马灯 */
.image2-marquee {
  --image2-gap: 22px;
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 34px 0;
  background: linear-gradient(180deg, #edf4ff 0%, #f8fbff 48%, #eef5ff 100%);
  border-block: 1px solid rgba(148, 163, 184, .2);
  box-shadow: inset 0 1px rgba(255,255,255,.9), inset 0 -1px rgba(255,255,255,.9);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.image2-marquee-track {
  display: flex; align-items: center; gap: var(--image2-gap);
  width: max-content; will-change: transform;
  animation: image2MarqueeLTR 96s linear infinite;
}
.image2-marquee-sequence { display: flex; align-items: center; gap: var(--image2-gap); flex: none; }
.image2-marquee-card {
  flex: none; width: 520px; height: 326px; overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .34);
  border-radius: 18px; background: #fff;
  box-shadow: 0 18px 42px rgba(37, 64, 112, .15);
}
.image2-marquee-card.is-portrait { width: 232px; height: 348px; }
.image2-marquee-card img { width: 100%; height: 100%; display: block; object-fit: contain; background: #fff; }
@keyframes image2MarqueeLTR {
  from { transform: translate3d(calc(-50% - (var(--image2-gap) / 2)), 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}
@media (max-width: 900px) {
  .image2-marquee { --image2-gap: 16px; padding: 24px 0; }
  .image2-marquee-card { width: 400px; height: 250px; border-radius: 14px; }
  .image2-marquee-card.is-portrait { width: 184px; height: 276px; }
}
@media (max-width: 640px) {
  .image2-marquee-card { width: 310px; height: 194px; }
  .image2-marquee-card.is-portrait { width: 142px; height: 213px; }
  .image2-marquee-track { animation-duration: 78s; }
}

/* 跳转到主内容（键盘 / 读屏用户） */
.skip-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -140%);
  z-index: 10000; padding: 10px 20px; border-radius: 0 0 12px 12px;
  background: #2563eb; color: #fff; font-weight: 700; font-size: 13.5px;
  box-shadow: 0 8px 24px -6px rgba(37, 99, 235, .5);
  transition: transform .25s cubic-bezier(.25,.8,.25,1);
}
.skip-link:focus { transform: translate(-50%, 0); outline: none; }

/* 移动端抽屉导航 */
#mobile-menu {
  max-height: 0; opacity: 0; overflow: hidden; pointer-events: none;
  transition: max-height .38s cubic-bezier(.25,.8,.25,1), opacity .25s ease, margin-top .38s cubic-bezier(.25,.8,.25,1);
  margin-top: 0;
}
#mobile-menu.is-open { max-height: 560px; opacity: 1; pointer-events: auto; margin-top: 10px; }
#mobile-menu a { transition: background-color .2s ease, color .2s ease, padding-left .2s ease; }
#mobile-menu a:hover, #mobile-menu a:focus-visible { padding-left: 18px; }
#menu-toggle .bar { transition: transform .3s cubic-bezier(.25,.8,.25,1), opacity .2s ease; transform-origin: center; }
#menu-toggle[aria-expanded="true"] .bar-top { transform: translateY(5.5px) rotate(45deg); }
#menu-toggle[aria-expanded="true"] .bar-mid { opacity: 0; transform: scaleX(.3); }
#menu-toggle[aria-expanded="true"] .bar-bot { transform: translateY(-5.5px) rotate(-45deg); }

/* Hero 视口高度：svh 避免移动端浏览器地址栏收放时抖动 */
.hero-viewport { min-height: 95vh; }
@supports (min-height: 100svh) { .hero-viewport { min-height: 95svh; } }

/* Tabs：状态完全由 aria-selected 驱动，
   未激活按钮也保留 1px 透明边框，消除切换时的位移抖动 */
.tab-btn { border: 1px solid transparent; color: #64748b; }
.tab-btn:hover { color: #090d1f; }
.tab-btn .tab-ico { background: #f1f5f9; color: #64748b; transition: background-color .3s ease, color .3s ease; }
.tab-btn[aria-selected="true"] { box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
.tab-btn[data-accent="blue"][aria-selected="true"]   { color: #2563eb; border-color: rgba(219, 234, 254, .6); background: linear-gradient(to bottom right, #eff6ff, #fff); }
.tab-btn[data-accent="blue"][aria-selected="true"] .tab-ico   { background: rgba(219, 234, 254, .7); color: #2563eb; }
.tab-btn[data-accent="cyan"][aria-selected="true"]   { color: #0e7490; border-color: rgba(207, 250, 254, .7); background: linear-gradient(to bottom right, #ecfeff, #fff); }
.tab-btn[data-accent="cyan"][aria-selected="true"] .tab-ico   { background: rgba(207, 250, 254, .7); color: #0e7490; }
.tab-btn[data-accent="purple"][aria-selected="true"] { color: #9333ea; border-color: rgba(243, 232, 255, .7); background: linear-gradient(to bottom right, #faf5ff, #fff); }
.tab-btn[data-accent="purple"][aria-selected="true"] .tab-ico { background: rgba(243, 232, 255, .7); color: #9333ea; }

/* 整卡可点：卡片本体由 div/article 改成链接元素后的基础样式 */
.card-link { cursor: pointer; color: inherit; text-decoration: none; }
.card-link:focus-visible { outline: 2px solid #2563eb; outline-offset: 3px; border-radius: 14px; }

/* ===========================================================================
   5. 多页结构：页头副导航 / 页面 hero / 面包屑 / 上下页
   ---------------------------------------------------------------------------
   官网从一页拆成 7 页后新增的结构件。原来靠锚点滚动，现在靠链接跳转，
   需要在每页顶部把「你在哪、上一页下一页是什么」交代清楚。
   =========================================================================== */

/* 内页顶部主题带：比首页 hero 矮，只承担「这一页讲什么」 */
.page-hero {
  position: relative;
  padding: 148px 0 56px;
  overflow: hidden;
  border-bottom: 1px solid var(--zm-line);
  background:
    radial-gradient(58% 100% at 12% 0%, rgba(219, 234, 254, .55) 0%, rgba(219, 234, 254, 0) 70%),
    radial-gradient(52% 100% at 92% 8%, rgba(233, 213, 255, .45) 0%, rgba(233, 213, 255, 0) 70%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
@media (max-width: 640px) { .page-hero { padding: 124px 0 40px; } }
/* 底部刻度：与 .measure-rule 同一套语言，暗示「可度量」 */
.page-hero::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--zm-blue-600) 0%, var(--zm-cyan-500) 45%, var(--zm-violet-600) 72%, var(--zm-amber-600) 100%);
  opacity: .5;
}

/* 面包屑 */
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--zm-ink-400); }
.crumbs a { color: var(--zm-ink-500); transition: color .2s ease; }
.crumbs a:hover { color: var(--zm-blue-600); }
.crumbs .sep { color: #cbd5e1; }

/* 章节标题统一件：eyebrow + h2 + 描述 */
.sec-head { max-width: 760px; }
.sec-head h2 {
  margin-top: 16px;
  font-family: 'Manrope', 'Noto Sans SC', system-ui, sans-serif;
  font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(1.75rem, 3.6vw, 2.65rem);
  line-height: 1.2; color: var(--zm-ink-900);
}
.sec-head p { margin-top: 14px; font-size: 14.5px; line-height: 1.8; color: var(--zm-ink-500); }

/* 下一页导航条：拆页后必备，避免读完一页无路可走 */
.pager {
  display: grid; gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .pager { grid-template-columns: 1fr 1fr; } }
.pager a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 22px; border-radius: var(--zm-r-lg);
  border: 1px solid var(--zm-line); background: #fff;
  box-shadow: var(--zm-shadow-1);
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s var(--ease-out);
}
.pager a:hover { border-color: var(--zm-blue-200); box-shadow: var(--zm-shadow-2); transform: translateY(-3px); }
.pager .k { font-family: 'Space Grotesk', monospace; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--zm-ink-400); }
.pager .t { margin-top: 6px; font-weight: 700; font-size: 15px; color: var(--zm-ink-900); }
.pager .d { margin-top: 4px; font-size: 12px; color: var(--zm-ink-500); }

/* 页内目录：内页顶部的 sticky 分区跳转条。
   当前分区由 site.js 的 IntersectionObserver 打上 .is-current。 */
.toc { pointer-events: none; }            /* 让整条透明区域不挡住底下的内容 */
.toc > * { pointer-events: auto; }
.toc a.is-current {
  color: var(--zm-blue-600);
  background: rgba(239, 246, 255, .9);
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .12);
}

/* 内容分区节奏：拆页后每页只剩 3-5 个分区，留白可以给得更大方 */
.sec { padding: 84px 0; }
@media (max-width: 640px) { .sec { padding: 56px 0; } }
.sec-tint { background: linear-gradient(180deg, rgba(248,250,252,.7), rgba(255,255,255,0)); }

/* ===========================================================================
   6. 动态图表层（charts.js 的样式合约）
   ---------------------------------------------------------------------------
   图表本体由 charts.js 生成 SVG，这里只定义容器、坐标轴、图例、tooltip
   这些「壳」的观感，保证 6 类图表看起来是同一套设计语言。
   =========================================================================== */
.zm-chart-card {
  position: relative;
  border-radius: var(--zm-r-xl);
  border: 1px solid var(--zm-line);
  background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
  box-shadow: var(--zm-shadow-2);
  overflow: hidden;
}
/* 顶部彩条：区分图表主题色，同时给卡片一个视觉锚点 */
.zm-chart-card::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--zm-c1, #2563eb), var(--zm-c2, #06b6d4));
}
.zm-chart-card > header {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 12px; padding: 22px 24px 0;
}
.zm-chart-title { font-weight: 800; font-size: 15.5px; color: var(--zm-ink-900); letter-spacing: -0.01em; }
.zm-chart-sub { margin-top: 5px; font-size: 12px; line-height: 1.65; color: var(--zm-ink-500); }
.zm-chart-body { padding: 12px 14px 20px; }
.zm-chart-foot {
  padding: 12px 24px 18px;
  font-size: 11.5px; color: var(--zm-ink-400); line-height: 1.7;
  border-top: 1px dashed var(--zm-line);
  margin: 0 10px;
}

/* 图表本体容器：给一个稳定的高度，避免脚本渲染前后布局跳动（CLS） */
.zm-chart { position: relative; width: 100%; }
.zm-chart svg { display: block; width: 100%; height: auto; overflow: visible; }

/* 坐标轴与网格：极淡，不与数据争视觉 */
.zm-axis-line { stroke: rgba(15, 23, 42, .12); stroke-width: 1; }
.zm-grid-line { stroke: rgba(15, 23, 42, .06); stroke-width: 1; stroke-dasharray: 3 5; }
.zm-axis-text { font-size: 10.5px; fill: #94a3b8; font-family: 'Space Grotesk', 'Manrope', monospace; }
.zm-cat-text  { font-size: 11.5px; fill: #475569; font-weight: 600; }
.zm-val-text  { font-size: 12px; fill: #0f172a; font-weight: 800; font-family: 'Space Grotesk', 'Manrope', monospace; }
.zm-delta-text{ font-size: 11px; font-weight: 800; font-family: 'Space Grotesk', 'Manrope', monospace; }

/* 条形：入场时从 0 长出，用 transform 而不是改宽度，走合成线程 */
.zm-bar { transition: opacity .2s ease; }
.zm-bar-track { fill: rgba(15, 23, 42, .04); }
.zm-series-row:hover .zm-bar { opacity: .55; }
.zm-series-row:hover .zm-bar.is-hi { opacity: 1; }

/* 折线：路径描边动画由 charts.js 设置 dasharray/dashoffset 后交给 CSS 过渡 */
.zm-line-path { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.zm-line-dot  { stroke: #fff; stroke-width: 2; }
.zm-area      { stroke: none; }

/* 环形进度 */
.zm-ring-track { fill: none; stroke: rgba(15, 23, 42, .07); }
.zm-ring-value { fill: none; stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; }

/* 雷达 */
.zm-radar-web { fill: none; stroke: rgba(15, 23, 42, .08); }
.zm-radar-poly { stroke-width: 2; stroke-linejoin: round; }

/* 图例 */
.zm-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 2px 12px 0; }
.zm-legend span { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; color: var(--zm-ink-500); }
.zm-legend i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.zm-legend i.dash { height: 3px; border-radius: 2px; }

/* Tooltip：跟随指针，绝对定位在 .zm-chart 内 */
.zm-tip {
  position: absolute; z-index: 5; pointer-events: none;
  padding: 9px 12px; border-radius: 12px;
  background: rgba(9, 13, 31, .93); color: #fff;
  font-size: 11.5px; line-height: 1.6; white-space: nowrap;
  box-shadow: 0 10px 30px -8px rgba(9, 13, 31, .5);
  opacity: 0; transform: translate(-50%, -118%) scale(.96);
  transition: opacity .16s ease, transform .16s ease;
}
.zm-tip.is-on { opacity: 1; transform: translate(-50%, -128%) scale(1); }
.zm-tip b { color: #fff; font-weight: 800; font-family: 'Space Grotesk', monospace; }
.zm-tip .k { color: rgba(255,255,255,.6); }
.zm-tip .row { display: flex; align-items: center; gap: 7px; }
.zm-tip .row i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.zm-crosshair { stroke: rgba(37, 99, 235, .35); stroke-width: 1; stroke-dasharray: 3 4; }

/* ROI 计算器：滑杆 */
.zm-range { -webkit-appearance: none; appearance: none; width: 100%; height: 26px; background: transparent; cursor: pointer; }
.zm-range::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--zm-blue-600) 0%, var(--zm-cyan-500) var(--zm-pct, 40%), #e2e8f0 var(--zm-pct, 40%), #e2e8f0 100%);
}
.zm-range::-moz-range-track { height: 6px; border-radius: 999px; background: #e2e8f0; }
.zm-range::-moz-range-progress { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--zm-blue-600), var(--zm-cyan-500)); }
.zm-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; margin-top: -7px; border-radius: 50%;
  background: #fff; border: 2px solid var(--zm-blue-600);
  box-shadow: 0 2px 8px rgba(37, 99, 235, .35);
  transition: transform .18s var(--ease-out);
}
.zm-range::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 2px solid var(--zm-blue-600);
  box-shadow: 0 2px 8px rgba(37, 99, 235, .35);
}
.zm-range:active::-webkit-slider-thumb { transform: scale(1.15); }

/* 指标卡：效率页大量复用 */
.zm-metric {
  position: relative; overflow: hidden;
  border-radius: var(--zm-r-lg); border: 1px solid var(--zm-line);
  background: #fff; padding: 20px 22px;
  transition: transform .35s var(--ease-out), box-shadow .35s ease, border-color .35s ease;
}
.zm-metric:hover { transform: translateY(-4px); box-shadow: var(--zm-shadow-2); border-color: var(--zm-blue-200); }
.zm-metric .cap { font-family: 'Space Grotesk', monospace; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--zm-ink-400); font-weight: 700; }
.zm-metric .num { margin-top: 10px; font-weight: 800; font-size: 38px; line-height: 1; letter-spacing: -0.03em; color: var(--zm-ink-900); }
.zm-metric .num small { font-size: 17px; font-weight: 700; color: var(--zm-ink-400); margin-left: 2px; }
.zm-metric .desc { margin-top: 8px; font-size: 12.5px; color: var(--zm-ink-500); line-height: 1.65; }
.zm-metric .spark { position: absolute; right: 16px; top: 18px; opacity: .9; }

/* 数据口径提示条：给出处，避免「效率提升 5 倍」变成空口号 */
.zm-note {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 14px 18px; border-radius: var(--zm-r-md);
  background: rgba(248, 250, 252, .9); border: 1px dashed var(--zm-line-2);
  font-size: 12px; line-height: 1.75; color: var(--zm-ink-500);
}
.zm-note b { color: var(--zm-ink-800); }

/* ===========================================================================
   7. Remotion 式滚动时间轴动效层
   ---------------------------------------------------------------------------
   用原生 CSS scroll-driven animation（animation-timeline: view()）
   实现帧驱动的电影感入场：动画由合成线程按滚动进度求值，
   主线程 0 开销、不新增 JS，也不会像 ScrollTrigger 那样为每个元素挂观察器。
   浏览器不支持时（Safari / Firefox）整层不生效，自动回落到 GSAP 路径。
   =========================================================================== */
@keyframes cineRise {
  from { opacity: 0; transform: translate3d(0, 34px, 0) scale(.985); }
  to   { opacity: 1; transform: none; }
}
/* 标题遮罩：像视频里的擦除转场，自左向右揭开 */
@keyframes cineWipe {
  from { opacity: 0; clip-path: inset(0 100% -20% 0); transform: translate3d(0, 14px, 0); }
  55%  { opacity: 1; }
  to   { opacity: 1; clip-path: inset(0 -5% -20% 0); transform: none; }
}
/* 镜头推近：Hero 仪表盘随页面滚动上浮并轻微放大 */
@keyframes cineCam {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(0, -46px, 0) scale(1.035); }
}
/* 光带扫过：分区进入视口时一道高光掠过「屏幕」 */
@keyframes cineBand {
  from { transform: translate3d(-140%, 0, 0) skewX(-14deg); opacity: 0; }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  to   { transform: translate3d(300%, 0, 0) skewX(-14deg); opacity: 0; }
}
/* 数字落定时的弹簧回弹 */
@keyframes numPop {
  0%   { transform: scale(1); }
  28%  { transform: scale(1.13); }
  100% { transform: scale(1); }
}
.num-pop { display: inline-block; animation: numPop .68s var(--ease-spring) both; }

@supports (animation-timeline: view()) {
  html.native-timeline [data-anim] {
    animation: cineRise both var(--ease-cine);
    animation-timeline: view();
    animation-range: entry 4% cover 30%;
  }

  /* Series 式错峰：同一网格内的子项依次入场，
     滚动驱动里没有「时间延迟」，靠错开各自的 animation-range 实现 */
  html.native-timeline .seq > * {
    animation: cineRise both var(--ease-cine);
    animation-timeline: view();
  }
  html.native-timeline .seq > *:nth-child(1) { animation-range: entry 2%  cover 24%; }
  html.native-timeline .seq > *:nth-child(2) { animation-range: entry 6%  cover 28%; }
  html.native-timeline .seq > *:nth-child(3) { animation-range: entry 10% cover 32%; }
  html.native-timeline .seq > *:nth-child(4) { animation-range: entry 14% cover 36%; }
  html.native-timeline .seq > *:nth-child(5) { animation-range: entry 18% cover 40%; }
  html.native-timeline .seq > *:nth-child(6) { animation-range: entry 22% cover 44%; }
  html.native-timeline .seq > *:nth-child(7) { animation-range: entry 26% cover 48%; }
  html.native-timeline .seq > *:nth-child(n+8) { animation-range: entry 30% cover 52%; }

  /* 标题擦除转场 —— 放在通用规则之后，覆盖 [data-anim] 的 cineRise */
  html.native-timeline .cine-wipe {
    animation: cineWipe both var(--ease-cine);
    animation-timeline: view();
    animation-range: entry 6% cover 34%;
  }

  /* Hero 镜头：绑文档滚动而非元素可见性，
     这样页面停在顶部时进度为 0，保持设计稿原样，不会一进来就偏移 */
  html.native-timeline .cine-cam {
    animation: cineCam linear both;
    animation-timeline: scroll(root);
    animation-range: 0 92vh;
    will-change: transform;
  }

  /* 光带扫过（需要容器 overflow:hidden 与 position:relative） */
  html.native-timeline .cine-band { position: relative; }
  html.native-timeline .cine-band::after {
    content: '';
    position: absolute; top: 0; bottom: 0; left: 0; width: 26%;
    background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.55) 45%, rgba(191,219,254,.35) 60%, transparent 100%);
    pointer-events: none; z-index: 3;
    animation: cineBand linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 55%;
  }

  /* 首屏在加载时就已可见，滚动进度直接是终点，
     所以这里改回时间轴动画，保留逐条入场节奏 */
  html.native-timeline .hero-seq > [data-anim] {
    animation: cineRise .95s var(--ease-cine) both;
    animation-timeline: auto;
  }
  html.native-timeline .hero-seq > [data-anim]:nth-child(1) { animation-delay: .05s; }
  html.native-timeline .hero-seq > [data-anim]:nth-child(2) { animation-delay: .14s; }
  html.native-timeline .hero-seq > [data-anim]:nth-child(3) { animation-delay: .23s; }
  html.native-timeline .hero-seq > [data-anim]:nth-child(4) { animation-delay: .32s; }
  html.native-timeline .hero-seq > [data-anim]:nth-child(5) { animation-delay: .41s; }
  html.native-timeline .hero-seq > [data-anim]:nth-child(6) { animation-delay: .50s; }
  html.native-timeline .hero-seq > [data-anim]:nth-child(n+7) { animation-delay: .58s; }
}

/* ===========================================================================
   8. 打印样式：去掉装饰层，保留信息
   =========================================================================== */
@media print {
  .aurora, .grid-overlay, .noise, #cursor-glow, #neural,
  .scroll-progress, .light-shaft, .marquee-mask, .image2-marquee,
  header, #mobile-menu, .pager { display: none !important; }
  html, body { background: #fff !important; color: #000 !important; }
  main { padding-top: 0 !important; }
  section, .zm-chart-card { break-inside: avoid; padding-top: 18px !important; padding-bottom: 18px !important; }
  details { break-inside: avoid; }
  details > div { display: block !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; color: #555; }
  [data-anim] { opacity: 1 !important; transform: none !important; }
  .page-hero { padding-top: 24px !important; }
}

/* ===========================================================================
   9. 无障碍：尊重系统「减弱动态效果」偏好
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .image2-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .image2-marquee-track { animation: none; transform: none; }
  .image2-marquee-sequence[aria-hidden="true"] { display: none; }

  /* 关闭全站装饰性动画，仅保留必要的状态过渡 */
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .marquee-track { animation: none !important; transform: none !important; }
  .marquee-mask { -webkit-mask-image: none; mask-image: none; }
  .animate-float-slow, .float-chip, .live-dot, .typewriter-caret { animation: none !important; }
  .gradient-text, .glow-ink { animation: none !important; background-size: 100% 100% !important; }
  .bar-fill, .spark-path { animation: none !important; stroke-dashoffset: 0 !important; }
  .lift-card:hover, .cap-card:hover, .zm-metric:hover, .pager a:hover { transform: none !important; }
  #neural, #cursor-glow { display: none !important; }
  /* 滚动时间轴动效层整体停用，元素直接呈现终态 */
  html.native-timeline [data-anim],
  html.native-timeline .seq > *,
  html.native-timeline .cine-wipe,
  html.native-timeline .cine-cam,
  html.native-timeline .hero-seq > [data-anim] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  html.native-timeline .cine-band::after { display: none !important; }
  .num-pop { animation: none !important; }
}