/* ============================================================
   SDPY Site — 设计令牌 + 全站视觉
   风格：科技光感 / 深色沉浸 / 蓝紫光谱渐变 / 玻璃拟态 / 微交互
   ============================================================ */

:root {
  /* 主色：蓝 -> 亮蓝 -> 青 */
  --c-brand: #0147ff;
  --c-brand-2: #2e7bff;
  --c-cyan: #22d3ee;
  --c-violet: #7a5cff;

  /* 背景层 */
  --bg-base: #070b14;
  --bg-soft: #0e1729;
  --bg-white: #ffffff;

  /* 文字 */
  --t-primary: #ffffff;
  --t-muted: #a9bad6;
  --t-dark: #0b1220;

  /* 功能色 */
  --ok: #17c964;
  --warn: #f5a524;
  --danger: #f31260;
  --link: #4c9aff;

  /* 玻璃 / 描边 */
  --glass: rgba(14, 23, 41, 0.62);
  --glass-strong: rgba(7, 11, 20, 0.86);
  --line: rgba(169, 186, 214, 0.16);
  --line-strong: rgba(169, 186, 214, 0.3);

  /* 渐变 */
  --grad-spectrum: linear-gradient(120deg, #0147ff 0%, #2e7bff 45%, #22d3ee 100%);
  --grad-violet: linear-gradient(120deg, #312e81 0%, #0147ff 50%, #7a5cff 100%);
  --grad-faint: linear-gradient(180deg, rgba(1, 71, 255, 0.16), rgba(34, 211, 238, 0.04));

  /* 阴影 */
  --shadow-1: 0 6px 20px rgba(1, 20, 60, 0.35);
  --shadow-2: 0 18px 48px rgba(1, 20, 60, 0.5);
  --glow-blue: 0 0 42px rgba(46, 123, 255, 0.35);

  /* ------------------------------------------------------------------
     语义令牌：主题切换时只需在 [data-theme="light"] 里覆盖这些，
     不要再散落硬编码颜色（下面几项是历史上写死的，已统一收拢到这里）
     ------------------------------------------------------------------ */
  --card-bg: linear-gradient(165deg, rgba(20, 32, 58, 0.75), rgba(10, 16, 30, 0.85));
  --card-bg-plain: var(--bg-soft);
  --footer-bg: linear-gradient(180deg, rgba(10, 16, 30, 0.9), rgba(7, 11, 20, 1));
  --shine: rgba(255, 255, 255, 0.4);
  --ambient-bg:
    radial-gradient(900px 520px at 12% -6%, rgba(1, 71, 255, 0.22), transparent 62%),
    radial-gradient(760px 460px at 88% 8%, rgba(34, 211, 238, 0.13), transparent 60%),
    radial-gradient(1100px 700px at 50% 108%, rgba(122, 92, 255, 0.14), transparent 64%),
    var(--bg-base);
  /* 次级正文色（比 --t-muted 更亮一档，用于卡片正文） */
  --t-soft: rgba(203, 213, 230, 0.92);
  /* 压在图片 / 深色遮罩上的文字：两种主题都用浅色，否则亮色主题会变成深字压深底 */
  --t-on-media: #ffffff;
  --t-on-media-muted: rgba(226, 236, 250, 0.86);
  --glass-on-media: rgba(14, 23, 41, 0.55);

  /* ------------------------------------------------------------------
     Hero 视觉语境：首屏在两种主题下是**两种完全不同的场景** ——
       暗色：整幅深色大图 + 深色遮罩，所有内容都「压在图上」；
       亮色：白底，所有内容回到「写在页面底色上」的配色。
     这两种场景下标题渐变、正文色、玻璃底、描边、遮罩、卡片底色要整套一起换，
     所以收成一组以 --hero- 开头的令牌，分散写死必然漏。
     ------------------------------------------------------------------ */
  --hero-bg: transparent;
  --hero-media-opacity: 1;
  --hero-scrim:
    linear-gradient(100deg, rgba(7, 11, 20, 0.92) 0%, rgba(7, 11, 20, 0.55) 42%, rgba(7, 11, 20, 0.25) 100%),
    linear-gradient(0deg, rgba(7, 11, 20, 0.95), transparent 55%);
  --hero-title-grad: linear-gradient(94deg, #ffffff 18%, #cfe0ff 52%, var(--c-cyan) 96%);
  --hero-text: var(--t-on-media);
  --hero-text-muted: var(--t-on-media-muted);
  --hero-glass: var(--glass-on-media);
  --hero-line: rgba(255, 255, 255, 0.38);
  --hero-line-hover: rgba(255, 255, 255, 0.78);
  --hero-card-bg: var(--glass-on-media);
  --hero-card-text: var(--t-on-media);
  --hero-card-muted: var(--t-on-media-muted);
  --hero-shadow: 0 34px 64px rgba(0, 0, 0, 0.5);
  /* 缩略图角标底色：它压在**内容图**上，明暗不可控（换一张亮图就翻车），
     所以亮色主题给近乎实色，不让半透明底被亮图冲淡。 */
  --hero-badge-bg: rgba(7, 11, 20, 0.72);

  /* 强调色（青）：分「装饰用」和「文字/图标用」两种
     --c-cyan  只用于**压在深色遮罩上**的元素（轮播点、sol-more、case-ico…）和色块填充，
               亮色主题下不能拿它当文字色 —— #22d3ee 压白底只有 1.8:1。
     --c-accent 才是「写在页面底色上的青」，亮色主题自动换成更深的青。 */
  --c-accent: #22d3ee;
  /* 承载文字的实色填充（主按钮 / 激活态 Tab / 页码 / 侧栏全部分类）：
     三个色标对白字分别 6.3 / 5.3 / 5.4 : 1，都过 AA；
     --grad-spectrum 的青尾对白字只有 1.7:1，只留给 1~2px 装饰条。 */
  /* 浮层面板（Mega Menu）：亮色主题要反过来变成浅色玻璃，
     面板本身写死深色的话，面板内的 --t-primary 文字会变成深色压深底 */
  --panel-bg: linear-gradient(160deg, rgba(14, 23, 41, 0.94), rgba(7, 11, 20, 0.96));
  --fill-strong: linear-gradient(120deg, #0147ff 0%, #1a63e8 58%, #0e7490 100%);
  --t-on-fill: #ffffff;
  /* 渐变**文字**（stat-num / adv-idx / hero-stat strong）：亮色主题要换成深色色标，
     否则青尾压白底只有 1.8:1 */
  --grad-text: var(--grad-spectrum);
  /* 凹陷 / 浮层容器底色（Tab 条、翻页按钮、奖项卡、侧栏工具条…）
     历史上是写死的 rgba(14,23,41,0.5)，亮色主题下会把浅色文字压在浅底上，必须令牌化 */
  --surface-sunken: rgba(14, 23, 41, 0.5);
  --surface-sunken-soft: rgba(14, 23, 41, 0.6);
  --surface-band: linear-gradient(180deg, rgba(14, 23, 41, 0.72), rgba(7, 11, 20, 0.4));

  /* 排版 */
  --font: "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fs-h1: clamp(34px, 4.2vw, 52px);
  --fs-h2: clamp(26px, 2.6vw, 40px);
  --fs-h3: clamp(20px, 1.6vw, 28px);
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-xs: 12px;

  /* 间距与圆角 */
  --wrap: 1360px;
  --header-h: 76px;
  --gap: 24px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* 动效曲线 */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   亮色主题：白色底 + 对应调整的文字 / 描边 / 玻璃 / 阴影 / 卡片
   只覆盖语义令牌，组件样式一律不动 —— 这是「一处切换、全站生效」的前提。
   ============================================================ */
[data-theme="light"] {
  --bg-base: #ffffff;
  --bg-soft: #f4f7fc;
  --bg-white: #ffffff;

  --t-primary: #0b1220;
  /* 次级正文再压深一档：#5a6b85 压在统计条那种浅灰底上只有 4.45:1，差一点点；
     #4a5a72 对白底 7.0、对 --bg-soft 6.5、对浅灰底 5.8，全档都稳过 AA */
  --t-muted: #4a5a72;
  --t-dark: #0b1220;
  --t-soft: rgba(43, 55, 75, 0.9);

  --glass: rgba(255, 255, 255, 0.78);
  --glass-strong: rgba(255, 255, 255, 0.92);
  --line: rgba(15, 23, 42, 0.12);
  --line-strong: rgba(15, 23, 42, 0.24);

  --grad-spectrum: linear-gradient(120deg, #0147ff 0%, #2e7bff 45%, #22d3ee 100%);
  --grad-violet: linear-gradient(120deg, #4338ca 0%, #0147ff 50%, #7a5cff 100%);
  --grad-faint: linear-gradient(180deg, rgba(1, 71, 255, 0.08), rgba(34, 211, 238, 0.03));

  --shadow-1: 0 6px 20px rgba(15, 23, 42, 0.08);
  --shadow-2: 0 18px 48px rgba(15, 23, 42, 0.12);
  --glow-blue: 0 0 42px rgba(46, 123, 255, 0.22);

  --card-bg: linear-gradient(165deg, #ffffff, #f2f6fc);
  --card-bg-plain: #ffffff;
  --footer-bg: linear-gradient(180deg, #f7f9fd, #eef2f9);
  --shine: rgba(15, 23, 42, 0.1);
  --ambient-bg:
    radial-gradient(900px 520px at 12% -6%, rgba(1, 71, 255, 0.07), transparent 62%),
    radial-gradient(760px 460px at 88% 8%, rgba(34, 211, 238, 0.06), transparent 60%),
    radial-gradient(1100px 700px at 50% 108%, rgba(122, 92, 255, 0.05), transparent 64%),
    var(--bg-base);

  /* 亮色底上的可读青：#0e7490 压白底 5.36:1、压 --bg-soft 4.9:1，均过 AA */
  --c-accent: #0e7490;
  --panel-bg: linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(243, 247, 253, 0.98));

  /* 亮色主题的 Hero：白底。轮播图整幅隐去（--hero-media-opacity: 0），
     只留一层极淡的品牌色洗色把空白的白衬出层次；文字/描边/玻璃/卡片全部回到页面配色。
     想日后保留一点若隐若现的底图，把 --hero-media-opacity 调到 0.1 左右即可。 */
  --hero-bg:
    radial-gradient(760px 420px at 86% 14%, rgba(1, 71, 255, 0.06), transparent 62%),
    radial-gradient(680px 400px at 6% 96%, rgba(34, 211, 238, 0.07), transparent 60%);
  --hero-media-opacity: 0;
  --hero-scrim: none;
  --hero-title-grad: var(--grad-text);
  --hero-text: var(--t-primary);
  --hero-text-muted: var(--t-muted);
  --hero-glass: var(--glass);
  --hero-line: var(--line-strong);
  --hero-line-hover: var(--c-brand-2);
  --hero-card-bg: var(--card-bg);
  --hero-card-text: var(--t-primary);
  --hero-card-muted: var(--t-muted);
  --hero-shadow: 0 22px 44px rgba(15, 23, 42, 0.14);
  --hero-badge-bg: rgba(7, 11, 20, 0.94);
  /* 渐变文字在亮色底上换成深色色标（对白底 6.3 / 5.3 / 5.4 : 1） */
  --grad-text: linear-gradient(120deg, #0147ff 0%, #1a63e8 50%, #0e7490 100%);

  /* 凹陷容器在亮色主题下反过来变成「浅灰底 + 描边」，不能再是深色块 */
  --surface-sunken: rgba(15, 23, 42, 0.04);
  --surface-sunken-soft: rgba(15, 23, 42, 0.06);
  --surface-band: linear-gradient(180deg, rgba(244, 247, 252, 0.9), rgba(238, 242, 249, 0.6));
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--t-primary);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--ambient-bg);
}

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0; }
/* 显式清掉 <button> 的 UA 默认底色（buttonface 是浅灰），
   否则暗色主题下没写 background 的按钮会变成「白底 + 浅灰字」。
   全站按钮都自带背景，这一条只是兜底，避免同类问题再复发。 */
button { font: inherit; background: transparent; }

.wrap { width: min(100% - 48px, var(--wrap)); margin-inline: auto; }

/* ---------- 通用按钮 ---------- */
.btn {
  --btn-bg: transparent;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 26px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background: var(--btn-bg);
  color: var(--t-primary);
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out),
    background-color 0.3s var(--ease-soft), border-color 0.3s var(--ease-soft), color 0.3s;
  will-change: transform;
}
.btn-primary { --btn-bg: var(--fill-strong); color: var(--t-on-fill); box-shadow: var(--shadow-1); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: var(--shadow-2), var(--glow-blue); }
.btn-outline { border-color: var(--line-strong); backdrop-filter: blur(8px); }
.btn-outline:hover { border-color: var(--c-brand-2); transform: translateY(-3px); box-shadow: var(--shadow-1); }
.btn-ghost { background: rgba(169, 186, 214, 0.12); }
.btn-ghost:hover { background: rgba(169, 186, 214, 0.22); transform: translateY(-2px); }
.btn-sm { padding: 8px 18px; font-size: var(--fs-sm); }
.btn-xs { padding: 5px 12px; font-size: var(--fs-xs); }

.tag {
  display: inline-block;
  padding: 2px 10px;
  margin: 0 8px 8px 0;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  color: var(--t-muted);
  font-size: var(--fs-xs);
  transition: color 0.3s, border-color 0.3s, background-color 0.3s;
}

/* ---------- 区块标题 ---------- */

/* ============================================================
   区块背景：COB 模组像素纹理 + 随机散布的亮点（静态 + 闪烁）
   ------------------------------------------------------------
   作用范围（两级）：
     ① 哪些区块：只认显式带 .sec-grid 的区块 —— 目前**只有首页「六大行业解决方案」
        #solutions 一个**（其余 4 个区块已摘掉该类，不再有纹理）；
     ② 区块内的哪一块：只画在该区块的**标题条 .section-head** 上
        （纵向严格等于标题条高度，卡片区没有纹理），横向铺满整屏。

   纹理照 COB 模组实拍图还原（量测见脚本头部注释），并把每个芯片再细分成 2×2：
     - 像素间距 6px（上一版 12px，整条带密度 ×4），芯片层每块 12×12 个单元，
       平铺单元仍是 72px；
     - 芯片 4×4px 圆角 1px，横缝 2px、竖缝 2px
       （6px 间距下横竖等宽：1px 的差异在 1 倍屏上只会发虚，不如等宽干净）；
       坐标全部取整，避免细纹理被重采样糊掉；
     - 暗色主题画「亮芯片」、缝即页面底色；亮色主题白底上画不出更亮的芯片，
       改为画灰缝轮廓，观感同样是细密模组格。

   亮点：**整条效果带一次性随机撒点，不是分块后重复**。
     - 亮点层是一张 3840×144px 的**单一画布**（覆盖 4K 满宽），
       background-repeat: no-repeat → 结构上不存在「同一份随机图被复用」；
       任何 ≤3840px 的视口都只看到这张图的一个连续切片。
     - 落点由固定种子的伪随机决定，且任意两点间距 ≥ 4 格（= 24px），
       不会挤成一坨；种子写死 → 结果可复现，测试才能断言。
     - 亮点就是「整颗芯片被点亮」（4×4px，与芯片同尺寸同位置）；
       不透明度量化成 6 档（0.2~0.45）随机分配，
       有明有暗更自然；同档共用一个 <g>，省掉几百个重复属性。
     - 芯片层仍然是每 72px 平铺（方格阵列本来就该规律），
       两层 tile 不同没有关系：本版两层都不再平移。

   带的轮廓（2026-10-10 追加）：一张 SVG **mask**，两个层、两个主题共用。
     - 两端渐隐：横向线性渐变，两端各 16% 的带宽从全透明渐变到不透明，
       「从无到有、由浅变深」，中间是实的 —— 带子不再有硬邦邦的左右切口。
       两侧各 16% 只是渐隐段长度，随视口宽度等比变化。
     - 下边缘向上拱：底边走一条二次贝塞尔，控制点上移 30/100，
       顶点实际拱起 15/100（≈带高的 15%，两端仍贴原底边）。
       不用 border-radius —— 圆角只能向外凸，做不出「底边向上凹」的拱形。
     - 用 mask 而不是改背景图，是因为芯片层（72px 平铺）与亮点层（3840px 单一画布）
       画法完全不同，只有 mask 能让两层的边缘**严格重合**。

   动画：**只剩亮点闪烁 grid-twinkle**。原来纹理带还有一段
   「background-position 0,0 → 72px,72px」的循环流动，已按用户要求移除，
   纹理层现在完全没有 animation。
   ============================================================ */
:root {
  --grid-cell: 6px;
  --grid-tile: 72px;
  --grid-dots-canvas: 3840px 144px;
  --grid-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='%23ffffff' fill-opacity='0.085'%3E%3Crect x='1' y='1' width='4' height='4' rx='1'/%3E%3Crect x='7' y='1' width='4' height='4' rx='1'/%3E%3Crect x='13' y='1' width='4' height='4' rx='1'/%3E%3Crect x='19' y='1' width='4' height='4' rx='1'/%3E%3Crect x='25' y='1' width='4' height='4' rx='1'/%3E%3Crect x='31' y='1' width='4' height='4' rx='1'/%3E%3Crect x='37' y='1' width='4' height='4' rx='1'/%3E%3Crect x='43' y='1' width='4' height='4' rx='1'/%3E%3Crect x='49' y='1' width='4' height='4' rx='1'/%3E%3Crect x='55' y='1' width='4' height='4' rx='1'/%3E%3Crect x='61' y='1' width='4' height='4' rx='1'/%3E%3Crect x='67' y='1' width='4' height='4' rx='1'/%3E%3Crect x='1' y='7' width='4' height='4' rx='1'/%3E%3Crect x='7' y='7' width='4' height='4' rx='1'/%3E%3Crect x='13' y='7' width='4' height='4' rx='1'/%3E%3Crect x='19' y='7' width='4' height='4' rx='1'/%3E%3Crect x='25' y='7' width='4' height='4' rx='1'/%3E%3Crect x='31' y='7' width='4' height='4' rx='1'/%3E%3Crect x='37' y='7' width='4' height='4' rx='1'/%3E%3Crect x='43' y='7' width='4' height='4' rx='1'/%3E%3Crect x='49' y='7' width='4' height='4' rx='1'/%3E%3Crect x='55' y='7' width='4' height='4' rx='1'/%3E%3Crect x='61' y='7' width='4' height='4' rx='1'/%3E%3Crect x='67' y='7' width='4' height='4' rx='1'/%3E%3Crect x='1' y='13' width='4' height='4' rx='1'/%3E%3Crect x='7' y='13' width='4' height='4' rx='1'/%3E%3Crect x='13' y='13' width='4' height='4' rx='1'/%3E%3Crect x='19' y='13' width='4' height='4' rx='1'/%3E%3Crect x='25' y='13' width='4' height='4' rx='1'/%3E%3Crect x='31' y='13' width='4' height='4' rx='1'/%3E%3Crect x='37' y='13' width='4' height='4' rx='1'/%3E%3Crect x='43' y='13' width='4' height='4' rx='1'/%3E%3Crect x='49' y='13' width='4' height='4' rx='1'/%3E%3Crect x='55' y='13' width='4' height='4' rx='1'/%3E%3Crect x='61' y='13' width='4' height='4' rx='1'/%3E%3Crect x='67' y='13' width='4' height='4' rx='1'/%3E%3Crect x='1' y='19' width='4' height='4' rx='1'/%3E%3Crect x='7' y='19' width='4' height='4' rx='1'/%3E%3Crect x='13' y='19' width='4' height='4' rx='1'/%3E%3Crect x='19' y='19' width='4' height='4' rx='1'/%3E%3Crect x='25' y='19' width='4' height='4' rx='1'/%3E%3Crect x='31' y='19' width='4' height='4' rx='1'/%3E%3Crect x='37' y='19' width='4' height='4' rx='1'/%3E%3Crect x='43' y='19' width='4' height='4' rx='1'/%3E%3Crect x='49' y='19' width='4' height='4' rx='1'/%3E%3Crect x='55' y='19' width='4' height='4' rx='1'/%3E%3Crect x='61' y='19' width='4' height='4' rx='1'/%3E%3Crect x='67' y='19' width='4' height='4' rx='1'/%3E%3Crect x='1' y='25' width='4' height='4' rx='1'/%3E%3Crect x='7' y='25' width='4' height='4' rx='1'/%3E%3Crect x='13' y='25' width='4' height='4' rx='1'/%3E%3Crect x='19' y='25' width='4' height='4' rx='1'/%3E%3Crect x='25' y='25' width='4' height='4' rx='1'/%3E%3Crect x='31' y='25' width='4' height='4' rx='1'/%3E%3Crect x='37' y='25' width='4' height='4' rx='1'/%3E%3Crect x='43' y='25' width='4' height='4' rx='1'/%3E%3Crect x='49' y='25' width='4' height='4' rx='1'/%3E%3Crect x='55' y='25' width='4' height='4' rx='1'/%3E%3Crect x='61' y='25' width='4' height='4' rx='1'/%3E%3Crect x='67' y='25' width='4' height='4' rx='1'/%3E%3Crect x='1' y='31' width='4' height='4' rx='1'/%3E%3Crect x='7' y='31' width='4' height='4' rx='1'/%3E%3Crect x='13' y='31' width='4' height='4' rx='1'/%3E%3Crect x='19' y='31' width='4' height='4' rx='1'/%3E%3Crect x='25' y='31' width='4' height='4' rx='1'/%3E%3Crect x='31' y='31' width='4' height='4' rx='1'/%3E%3Crect x='37' y='31' width='4' height='4' rx='1'/%3E%3Crect x='43' y='31' width='4' height='4' rx='1'/%3E%3Crect x='49' y='31' width='4' height='4' rx='1'/%3E%3Crect x='55' y='31' width='4' height='4' rx='1'/%3E%3Crect x='61' y='31' width='4' height='4' rx='1'/%3E%3Crect x='67' y='31' width='4' height='4' rx='1'/%3E%3Crect x='1' y='37' width='4' height='4' rx='1'/%3E%3Crect x='7' y='37' width='4' height='4' rx='1'/%3E%3Crect x='13' y='37' width='4' height='4' rx='1'/%3E%3Crect x='19' y='37' width='4' height='4' rx='1'/%3E%3Crect x='25' y='37' width='4' height='4' rx='1'/%3E%3Crect x='31' y='37' width='4' height='4' rx='1'/%3E%3Crect x='37' y='37' width='4' height='4' rx='1'/%3E%3Crect x='43' y='37' width='4' height='4' rx='1'/%3E%3Crect x='49' y='37' width='4' height='4' rx='1'/%3E%3Crect x='55' y='37' width='4' height='4' rx='1'/%3E%3Crect x='61' y='37' width='4' height='4' rx='1'/%3E%3Crect x='67' y='37' width='4' height='4' rx='1'/%3E%3Crect x='1' y='43' width='4' height='4' rx='1'/%3E%3Crect x='7' y='43' width='4' height='4' rx='1'/%3E%3Crect x='13' y='43' width='4' height='4' rx='1'/%3E%3Crect x='19' y='43' width='4' height='4' rx='1'/%3E%3Crect x='25' y='43' width='4' height='4' rx='1'/%3E%3Crect x='31' y='43' width='4' height='4' rx='1'/%3E%3Crect x='37' y='43' width='4' height='4' rx='1'/%3E%3Crect x='43' y='43' width='4' height='4' rx='1'/%3E%3Crect x='49' y='43' width='4' height='4' rx='1'/%3E%3Crect x='55' y='43' width='4' height='4' rx='1'/%3E%3Crect x='61' y='43' width='4' height='4' rx='1'/%3E%3Crect x='67' y='43' width='4' height='4' rx='1'/%3E%3Crect x='1' y='49' width='4' height='4' rx='1'/%3E%3Crect x='7' y='49' width='4' height='4' rx='1'/%3E%3Crect x='13' y='49' width='4' height='4' rx='1'/%3E%3Crect x='19' y='49' width='4' height='4' rx='1'/%3E%3Crect x='25' y='49' width='4' height='4' rx='1'/%3E%3Crect x='31' y='49' width='4' height='4' rx='1'/%3E%3Crect x='37' y='49' width='4' height='4' rx='1'/%3E%3Crect x='43' y='49' width='4' height='4' rx='1'/%3E%3Crect x='49' y='49' width='4' height='4' rx='1'/%3E%3Crect x='55' y='49' width='4' height='4' rx='1'/%3E%3Crect x='61' y='49' width='4' height='4' rx='1'/%3E%3Crect x='67' y='49' width='4' height='4' rx='1'/%3E%3Crect x='1' y='55' width='4' height='4' rx='1'/%3E%3Crect x='7' y='55' width='4' height='4' rx='1'/%3E%3Crect x='13' y='55' width='4' height='4' rx='1'/%3E%3Crect x='19' y='55' width='4' height='4' rx='1'/%3E%3Crect x='25' y='55' width='4' height='4' rx='1'/%3E%3Crect x='31' y='55' width='4' height='4' rx='1'/%3E%3Crect x='37' y='55' width='4' height='4' rx='1'/%3E%3Crect x='43' y='55' width='4' height='4' rx='1'/%3E%3Crect x='49' y='55' width='4' height='4' rx='1'/%3E%3Crect x='55' y='55' width='4' height='4' rx='1'/%3E%3Crect x='61' y='55' width='4' height='4' rx='1'/%3E%3Crect x='67' y='55' width='4' height='4' rx='1'/%3E%3Crect x='1' y='61' width='4' height='4' rx='1'/%3E%3Crect x='7' y='61' width='4' height='4' rx='1'/%3E%3Crect x='13' y='61' width='4' height='4' rx='1'/%3E%3Crect x='19' y='61' width='4' height='4' rx='1'/%3E%3Crect x='25' y='61' width='4' height='4' rx='1'/%3E%3Crect x='31' y='61' width='4' height='4' rx='1'/%3E%3Crect x='37' y='61' width='4' height='4' rx='1'/%3E%3Crect x='43' y='61' width='4' height='4' rx='1'/%3E%3Crect x='49' y='61' width='4' height='4' rx='1'/%3E%3Crect x='55' y='61' width='4' height='4' rx='1'/%3E%3Crect x='61' y='61' width='4' height='4' rx='1'/%3E%3Crect x='67' y='61' width='4' height='4' rx='1'/%3E%3Crect x='1' y='67' width='4' height='4' rx='1'/%3E%3Crect x='7' y='67' width='4' height='4' rx='1'/%3E%3Crect x='13' y='67' width='4' height='4' rx='1'/%3E%3Crect x='19' y='67' width='4' height='4' rx='1'/%3E%3Crect x='25' y='67' width='4' height='4' rx='1'/%3E%3Crect x='31' y='67' width='4' height='4' rx='1'/%3E%3Crect x='37' y='67' width='4' height='4' rx='1'/%3E%3Crect x='43' y='67' width='4' height='4' rx='1'/%3E%3Crect x='49' y='67' width='4' height='4' rx='1'/%3E%3Crect x='55' y='67' width='4' height='4' rx='1'/%3E%3Crect x='61' y='67' width='4' height='4' rx='1'/%3E%3Crect x='67' y='67' width='4' height='4' rx='1'/%3E%3C/g%3E%3C/svg%3E");
  --grid-dots-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3840' height='144' viewBox='0 0 3840 144'%3E%3Cg fill='%23ffffff' fill-opacity='0.22'%3E%3Crect x='2995' y='115' width='4' height='4' rx='1'/%3E%3Crect x='3787' y='19' width='4' height='4' rx='1'/%3E%3Crect x='2377' y='91' width='4' height='4' rx='1'/%3E%3Crect x='169' y='7' width='4' height='4' rx='1'/%3E%3Crect x='3397' y='1' width='4' height='4' rx='1'/%3E%3Crect x='295' y='103' width='4' height='4' rx='1'/%3E%3Crect x='2215' y='133' width='4' height='4' rx='1'/%3E%3Crect x='3757' y='43' width='4' height='4' rx='1'/%3E%3Crect x='2095' y='1' width='4' height='4' rx='1'/%3E%3Crect x='475' y='55' width='4' height='4' rx='1'/%3E%3Crect x='2509' y='85' width='4' height='4' rx='1'/%3E%3Crect x='3703' y='25' width='4' height='4' rx='1'/%3E%3Crect x='1315' y='121' width='4' height='4' rx='1'/%3E%3Crect x='679' y='13' width='4' height='4' rx='1'/%3E%3Crect x='3301' y='103' width='4' height='4' rx='1'/%3E%3Crect x='3349' y='31' width='4' height='4' rx='1'/%3E%3Crect x='1633' y='31' width='4' height='4' rx='1'/%3E%3Crect x='2383' y='37' width='4' height='4' rx='1'/%3E%3Crect x='3397' y='49' width='4' height='4' rx='1'/%3E%3Crect x='2845' y='109' width='4' height='4' rx='1'/%3E%3Crect x='661' y='61' width='4' height='4' rx='1'/%3E%3Crect x='2689' y='67' width='4' height='4' rx='1'/%3E%3Crect x='319' y='1' width='4' height='4' rx='1'/%3E%3Crect x='469' y='19' width='4' height='4' rx='1'/%3E%3Crect x='1675' y='79' width='4' height='4' rx='1'/%3E%3Crect x='3619' y='109' width='4' height='4' rx='1'/%3E%3Crect x='3811' y='61' width='4' height='4' rx='1'/%3E%3Crect x='3055' y='67' width='4' height='4' rx='1'/%3E%3Crect x='289' y='73' width='4' height='4' rx='1'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='0.26'%3E%3Crect x='55' y='85' width='4' height='4' rx='1'/%3E%3Crect x='2323' y='37' width='4' height='4' rx='1'/%3E%3Crect x='3589' y='85' width='4' height='4' rx='1'/%3E%3Crect x='1033' y='49' width='4' height='4' rx='1'/%3E%3Crect x='547' y='73' width='4' height='4' rx='1'/%3E%3Crect x='1423' y='115' width='4' height='4' rx='1'/%3E%3Crect x='3607' y='19' width='4' height='4' rx='1'/%3E%3Crect x='307' y='43' width='4' height='4' rx='1'/%3E%3Crect x='1189' y='73' width='4' height='4' rx='1'/%3E%3Crect x='1627' y='61' width='4' height='4' rx='1'/%3E%3Crect x='1741' y='1' width='4' height='4' rx='1'/%3E%3Crect x='2263' y='91' width='4' height='4' rx='1'/%3E%3Crect x='727' y='13' width='4' height='4' rx='1'/%3E%3Crect x='1375' y='13' width='4' height='4' rx='1'/%3E%3Crect x='3487' y='1' width='4' height='4' rx='1'/%3E%3Crect x='631' y='19' width='4' height='4' rx='1'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='0.3'%3E%3Crect x='2761' y='31' width='4' height='4' rx='1'/%3E%3Crect x='2581' y='85' width='4' height='4' rx='1'/%3E%3Crect x='2191' y='13' width='4' height='4' rx='1'/%3E%3Crect x='3529' y='7' width='4' height='4' rx='1'/%3E%3Crect x='931' y='97' width='4' height='4' rx='1'/%3E%3Crect x='67' y='1' width='4' height='4' rx='1'/%3E%3Crect x='2809' y='115' width='4' height='4' rx='1'/%3E%3Crect x='1957' y='73' width='4' height='4' rx='1'/%3E%3Crect x='727' y='61' width='4' height='4' rx='1'/%3E%3Crect x='2455' y='91' width='4' height='4' rx='1'/%3E%3Crect x='2143' y='55' width='4' height='4' rx='1'/%3E%3Crect x='799' y='1' width='4' height='4' rx='1'/%3E%3Crect x='2539' y='25' width='4' height='4' rx='1'/%3E%3Crect x='3097' y='109' width='4' height='4' rx='1'/%3E%3Crect x='1789' y='79' width='4' height='4' rx='1'/%3E%3Crect x='283' y='133' width='4' height='4' rx='1'/%3E%3Crect x='3025' y='25' width='4' height='4' rx='1'/%3E%3Crect x='1825' y='115' width='4' height='4' rx='1'/%3E%3Crect x='1339' y='13' width='4' height='4' rx='1'/%3E%3Crect x='1153' y='79' width='4' height='4' rx='1'/%3E%3Crect x='1729' y='31' width='4' height='4' rx='1'/%3E%3Crect x='757' y='49' width='4' height='4' rx='1'/%3E%3Crect x='577' y='7' width='4' height='4' rx='1'/%3E%3Crect x='2461' y='19' width='4' height='4' rx='1'/%3E%3Crect x='1339' y='85' width='4' height='4' rx='1'/%3E%3Crect x='2821' y='91' width='4' height='4' rx='1'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='0.35'%3E%3Crect x='1561' y='103' width='4' height='4' rx='1'/%3E%3Crect x='1711' y='1' width='4' height='4' rx='1'/%3E%3Crect x='2161' y='103' width='4' height='4' rx='1'/%3E%3Crect x='3205' y='61' width='4' height='4' rx='1'/%3E%3Crect x='1363' y='133' width='4' height='4' rx='1'/%3E%3Crect x='1903' y='31' width='4' height='4' rx='1'/%3E%3Crect x='859' y='85' width='4' height='4' rx='1'/%3E%3Crect x='661' y='37' width='4' height='4' rx='1'/%3E%3Crect x='169' y='61' width='4' height='4' rx='1'/%3E%3Crect x='1393' y='103' width='4' height='4' rx='1'/%3E%3Crect x='1021' y='91' width='4' height='4' rx='1'/%3E%3Crect x='1885' y='127' width='4' height='4' rx='1'/%3E%3Crect x='1837' y='31' width='4' height='4' rx='1'/%3E%3Crect x='2605' y='121' width='4' height='4' rx='1'/%3E%3Crect x='1729' y='79' width='4' height='4' rx='1'/%3E%3Crect x='3337' y='73' width='4' height='4' rx='1'/%3E%3Crect x='2293' y='25' width='4' height='4' rx='1'/%3E%3Crect x='103' y='133' width='4' height='4' rx='1'/%3E%3Crect x='1945' y='37' width='4' height='4' rx='1'/%3E%3Crect x='2641' y='25' width='4' height='4' rx='1'/%3E%3Crect x='3223' y='7' width='4' height='4' rx='1'/%3E%3Crect x='523' y='7' width='4' height='4' rx='1'/%3E%3Crect x='2911' y='127' width='4' height='4' rx='1'/%3E%3Crect x='2761' y='121' width='4' height='4' rx='1'/%3E%3Crect x='793' y='73' width='4' height='4' rx='1'/%3E%3Crect x='2119' y='103' width='4' height='4' rx='1'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='0.39'%3E%3Crect x='415' y='115' width='4' height='4' rx='1'/%3E%3Crect x='2485' y='7' width='4' height='4' rx='1'/%3E%3Crect x='601' y='79' width='4' height='4' rx='1'/%3E%3Crect x='2689' y='1' width='4' height='4' rx='1'/%3E%3Crect x='205' y='61' width='4' height='4' rx='1'/%3E%3Crect x='2431' y='91' width='4' height='4' rx='1'/%3E%3Crect x='1219' y='133' width='4' height='4' rx='1'/%3E%3Crect x='1987' y='25' width='4' height='4' rx='1'/%3E%3Crect x='7' y='109' width='4' height='4' rx='1'/%3E%3Crect x='2071' y='7' width='4' height='4' rx='1'/%3E%3Crect x='2659' y='73' width='4' height='4' rx='1'/%3E%3Crect x='85' y='109' width='4' height='4' rx='1'/%3E%3Crect x='2809' y='55' width='4' height='4' rx='1'/%3E%3Crect x='2353' y='139' width='4' height='4' rx='1'/%3E%3Crect x='2569' y='61' width='4' height='4' rx='1'/%3E%3Crect x='769' y='103' width='4' height='4' rx='1'/%3E%3Crect x='2113' y='49' width='4' height='4' rx='1'/%3E%3Crect x='493' y='13' width='4' height='4' rx='1'/%3E%3Crect x='1555' y='19' width='4' height='4' rx='1'/%3E%3Crect x='2173' y='139' width='4' height='4' rx='1'/%3E%3Crect x='2791' y='139' width='4' height='4' rx='1'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='0.43'%3E%3Crect x='463' y='97' width='4' height='4' rx='1'/%3E%3Crect x='1297' y='85' width='4' height='4' rx='1'/%3E%3Crect x='1645' y='1' width='4' height='4' rx='1'/%3E%3Crect x='865' y='49' width='4' height='4' rx='1'/%3E%3Crect x='3049' y='133' width='4' height='4' rx='1'/%3E%3Crect x='2269' y='55' width='4' height='4' rx='1'/%3E%3Crect x='2437' y='139' width='4' height='4' rx='1'/%3E%3Crect x='2053' y='115' width='4' height='4' rx='1'/%3E%3Crect x='1747' y='55' width='4' height='4' rx='1'/%3E%3Crect x='751' y='127' width='4' height='4' rx='1'/%3E%3Crect x='3835' y='13' width='4' height='4' rx='1'/%3E%3Crect x='1429' y='43' width='4' height='4' rx='1'/%3E%3Crect x='1609' y='109' width='4' height='4' rx='1'/%3E%3Crect x='2917' y='55' width='4' height='4' rx='1'/%3E%3Crect x='1915' y='109' width='4' height='4' rx='1'/%3E%3Crect x='3439' y='43' width='4' height='4' rx='1'/%3E%3Crect x='235' y='79' width='4' height='4' rx='1'/%3E%3Crect x='151' y='103' width='4' height='4' rx='1'/%3E%3Crect x='3757' y='115' width='4' height='4' rx='1'/%3E%3Crect x='2035' y='61' width='4' height='4' rx='1'/%3E%3Crect x='3187' y='133' width='4' height='4' rx='1'/%3E%3Crect x='2737' y='67' width='4' height='4' rx='1'/%3E%3C/g%3E%3C/svg%3E");
  /* 带的轮廓 mask：两端渐隐 + 下边缘向上拱。只管形状不管颜色，两个主题共用 */
  --grid-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23ffffff' stop-opacity='0'/%3E%3Cstop offset='0.16' stop-color='%23ffffff' stop-opacity='1'/%3E%3Cstop offset='0.84' stop-color='%23ffffff' stop-opacity='1'/%3E%3Cstop offset='1' stop-color='%23ffffff' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0,0 H1000 V100 Q500,70 0,100 Z' fill='url(%23g)'/%3E%3C/svg%3E");
  --grid-opacity: 1;
}

[data-theme="light"] {
  --grid-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%230b1220' stroke-opacity='0.075' stroke-width='1.6'%3E%3Crect x='1' y='1' width='4' height='4' rx='1'/%3E%3Crect x='7' y='1' width='4' height='4' rx='1'/%3E%3Crect x='13' y='1' width='4' height='4' rx='1'/%3E%3Crect x='19' y='1' width='4' height='4' rx='1'/%3E%3Crect x='25' y='1' width='4' height='4' rx='1'/%3E%3Crect x='31' y='1' width='4' height='4' rx='1'/%3E%3Crect x='37' y='1' width='4' height='4' rx='1'/%3E%3Crect x='43' y='1' width='4' height='4' rx='1'/%3E%3Crect x='49' y='1' width='4' height='4' rx='1'/%3E%3Crect x='55' y='1' width='4' height='4' rx='1'/%3E%3Crect x='61' y='1' width='4' height='4' rx='1'/%3E%3Crect x='67' y='1' width='4' height='4' rx='1'/%3E%3Crect x='1' y='7' width='4' height='4' rx='1'/%3E%3Crect x='7' y='7' width='4' height='4' rx='1'/%3E%3Crect x='13' y='7' width='4' height='4' rx='1'/%3E%3Crect x='19' y='7' width='4' height='4' rx='1'/%3E%3Crect x='25' y='7' width='4' height='4' rx='1'/%3E%3Crect x='31' y='7' width='4' height='4' rx='1'/%3E%3Crect x='37' y='7' width='4' height='4' rx='1'/%3E%3Crect x='43' y='7' width='4' height='4' rx='1'/%3E%3Crect x='49' y='7' width='4' height='4' rx='1'/%3E%3Crect x='55' y='7' width='4' height='4' rx='1'/%3E%3Crect x='61' y='7' width='4' height='4' rx='1'/%3E%3Crect x='67' y='7' width='4' height='4' rx='1'/%3E%3Crect x='1' y='13' width='4' height='4' rx='1'/%3E%3Crect x='7' y='13' width='4' height='4' rx='1'/%3E%3Crect x='13' y='13' width='4' height='4' rx='1'/%3E%3Crect x='19' y='13' width='4' height='4' rx='1'/%3E%3Crect x='25' y='13' width='4' height='4' rx='1'/%3E%3Crect x='31' y='13' width='4' height='4' rx='1'/%3E%3Crect x='37' y='13' width='4' height='4' rx='1'/%3E%3Crect x='43' y='13' width='4' height='4' rx='1'/%3E%3Crect x='49' y='13' width='4' height='4' rx='1'/%3E%3Crect x='55' y='13' width='4' height='4' rx='1'/%3E%3Crect x='61' y='13' width='4' height='4' rx='1'/%3E%3Crect x='67' y='13' width='4' height='4' rx='1'/%3E%3Crect x='1' y='19' width='4' height='4' rx='1'/%3E%3Crect x='7' y='19' width='4' height='4' rx='1'/%3E%3Crect x='13' y='19' width='4' height='4' rx='1'/%3E%3Crect x='19' y='19' width='4' height='4' rx='1'/%3E%3Crect x='25' y='19' width='4' height='4' rx='1'/%3E%3Crect x='31' y='19' width='4' height='4' rx='1'/%3E%3Crect x='37' y='19' width='4' height='4' rx='1'/%3E%3Crect x='43' y='19' width='4' height='4' rx='1'/%3E%3Crect x='49' y='19' width='4' height='4' rx='1'/%3E%3Crect x='55' y='19' width='4' height='4' rx='1'/%3E%3Crect x='61' y='19' width='4' height='4' rx='1'/%3E%3Crect x='67' y='19' width='4' height='4' rx='1'/%3E%3Crect x='1' y='25' width='4' height='4' rx='1'/%3E%3Crect x='7' y='25' width='4' height='4' rx='1'/%3E%3Crect x='13' y='25' width='4' height='4' rx='1'/%3E%3Crect x='19' y='25' width='4' height='4' rx='1'/%3E%3Crect x='25' y='25' width='4' height='4' rx='1'/%3E%3Crect x='31' y='25' width='4' height='4' rx='1'/%3E%3Crect x='37' y='25' width='4' height='4' rx='1'/%3E%3Crect x='43' y='25' width='4' height='4' rx='1'/%3E%3Crect x='49' y='25' width='4' height='4' rx='1'/%3E%3Crect x='55' y='25' width='4' height='4' rx='1'/%3E%3Crect x='61' y='25' width='4' height='4' rx='1'/%3E%3Crect x='67' y='25' width='4' height='4' rx='1'/%3E%3Crect x='1' y='31' width='4' height='4' rx='1'/%3E%3Crect x='7' y='31' width='4' height='4' rx='1'/%3E%3Crect x='13' y='31' width='4' height='4' rx='1'/%3E%3Crect x='19' y='31' width='4' height='4' rx='1'/%3E%3Crect x='25' y='31' width='4' height='4' rx='1'/%3E%3Crect x='31' y='31' width='4' height='4' rx='1'/%3E%3Crect x='37' y='31' width='4' height='4' rx='1'/%3E%3Crect x='43' y='31' width='4' height='4' rx='1'/%3E%3Crect x='49' y='31' width='4' height='4' rx='1'/%3E%3Crect x='55' y='31' width='4' height='4' rx='1'/%3E%3Crect x='61' y='31' width='4' height='4' rx='1'/%3E%3Crect x='67' y='31' width='4' height='4' rx='1'/%3E%3Crect x='1' y='37' width='4' height='4' rx='1'/%3E%3Crect x='7' y='37' width='4' height='4' rx='1'/%3E%3Crect x='13' y='37' width='4' height='4' rx='1'/%3E%3Crect x='19' y='37' width='4' height='4' rx='1'/%3E%3Crect x='25' y='37' width='4' height='4' rx='1'/%3E%3Crect x='31' y='37' width='4' height='4' rx='1'/%3E%3Crect x='37' y='37' width='4' height='4' rx='1'/%3E%3Crect x='43' y='37' width='4' height='4' rx='1'/%3E%3Crect x='49' y='37' width='4' height='4' rx='1'/%3E%3Crect x='55' y='37' width='4' height='4' rx='1'/%3E%3Crect x='61' y='37' width='4' height='4' rx='1'/%3E%3Crect x='67' y='37' width='4' height='4' rx='1'/%3E%3Crect x='1' y='43' width='4' height='4' rx='1'/%3E%3Crect x='7' y='43' width='4' height='4' rx='1'/%3E%3Crect x='13' y='43' width='4' height='4' rx='1'/%3E%3Crect x='19' y='43' width='4' height='4' rx='1'/%3E%3Crect x='25' y='43' width='4' height='4' rx='1'/%3E%3Crect x='31' y='43' width='4' height='4' rx='1'/%3E%3Crect x='37' y='43' width='4' height='4' rx='1'/%3E%3Crect x='43' y='43' width='4' height='4' rx='1'/%3E%3Crect x='49' y='43' width='4' height='4' rx='1'/%3E%3Crect x='55' y='43' width='4' height='4' rx='1'/%3E%3Crect x='61' y='43' width='4' height='4' rx='1'/%3E%3Crect x='67' y='43' width='4' height='4' rx='1'/%3E%3Crect x='1' y='49' width='4' height='4' rx='1'/%3E%3Crect x='7' y='49' width='4' height='4' rx='1'/%3E%3Crect x='13' y='49' width='4' height='4' rx='1'/%3E%3Crect x='19' y='49' width='4' height='4' rx='1'/%3E%3Crect x='25' y='49' width='4' height='4' rx='1'/%3E%3Crect x='31' y='49' width='4' height='4' rx='1'/%3E%3Crect x='37' y='49' width='4' height='4' rx='1'/%3E%3Crect x='43' y='49' width='4' height='4' rx='1'/%3E%3Crect x='49' y='49' width='4' height='4' rx='1'/%3E%3Crect x='55' y='49' width='4' height='4' rx='1'/%3E%3Crect x='61' y='49' width='4' height='4' rx='1'/%3E%3Crect x='67' y='49' width='4' height='4' rx='1'/%3E%3Crect x='1' y='55' width='4' height='4' rx='1'/%3E%3Crect x='7' y='55' width='4' height='4' rx='1'/%3E%3Crect x='13' y='55' width='4' height='4' rx='1'/%3E%3Crect x='19' y='55' width='4' height='4' rx='1'/%3E%3Crect x='25' y='55' width='4' height='4' rx='1'/%3E%3Crect x='31' y='55' width='4' height='4' rx='1'/%3E%3Crect x='37' y='55' width='4' height='4' rx='1'/%3E%3Crect x='43' y='55' width='4' height='4' rx='1'/%3E%3Crect x='49' y='55' width='4' height='4' rx='1'/%3E%3Crect x='55' y='55' width='4' height='4' rx='1'/%3E%3Crect x='61' y='55' width='4' height='4' rx='1'/%3E%3Crect x='67' y='55' width='4' height='4' rx='1'/%3E%3Crect x='1' y='61' width='4' height='4' rx='1'/%3E%3Crect x='7' y='61' width='4' height='4' rx='1'/%3E%3Crect x='13' y='61' width='4' height='4' rx='1'/%3E%3Crect x='19' y='61' width='4' height='4' rx='1'/%3E%3Crect x='25' y='61' width='4' height='4' rx='1'/%3E%3Crect x='31' y='61' width='4' height='4' rx='1'/%3E%3Crect x='37' y='61' width='4' height='4' rx='1'/%3E%3Crect x='43' y='61' width='4' height='4' rx='1'/%3E%3Crect x='49' y='61' width='4' height='4' rx='1'/%3E%3Crect x='55' y='61' width='4' height='4' rx='1'/%3E%3Crect x='61' y='61' width='4' height='4' rx='1'/%3E%3Crect x='67' y='61' width='4' height='4' rx='1'/%3E%3Crect x='1' y='67' width='4' height='4' rx='1'/%3E%3Crect x='7' y='67' width='4' height='4' rx='1'/%3E%3Crect x='13' y='67' width='4' height='4' rx='1'/%3E%3Crect x='19' y='67' width='4' height='4' rx='1'/%3E%3Crect x='25' y='67' width='4' height='4' rx='1'/%3E%3Crect x='31' y='67' width='4' height='4' rx='1'/%3E%3Crect x='37' y='67' width='4' height='4' rx='1'/%3E%3Crect x='43' y='67' width='4' height='4' rx='1'/%3E%3Crect x='49' y='67' width='4' height='4' rx='1'/%3E%3Crect x='55' y='67' width='4' height='4' rx='1'/%3E%3Crect x='61' y='67' width='4' height='4' rx='1'/%3E%3Crect x='67' y='67' width='4' height='4' rx='1'/%3E%3C/g%3E%3C/svg%3E");
  --grid-dots-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3840' height='144' viewBox='0 0 3840 144'%3E%3Cg fill='%230e7490' fill-opacity='0.22'%3E%3Crect x='2995' y='115' width='4' height='4' rx='1'/%3E%3Crect x='3787' y='19' width='4' height='4' rx='1'/%3E%3Crect x='2377' y='91' width='4' height='4' rx='1'/%3E%3Crect x='169' y='7' width='4' height='4' rx='1'/%3E%3Crect x='3397' y='1' width='4' height='4' rx='1'/%3E%3Crect x='295' y='103' width='4' height='4' rx='1'/%3E%3Crect x='2215' y='133' width='4' height='4' rx='1'/%3E%3Crect x='3757' y='43' width='4' height='4' rx='1'/%3E%3Crect x='2095' y='1' width='4' height='4' rx='1'/%3E%3Crect x='475' y='55' width='4' height='4' rx='1'/%3E%3Crect x='2509' y='85' width='4' height='4' rx='1'/%3E%3Crect x='3703' y='25' width='4' height='4' rx='1'/%3E%3Crect x='1315' y='121' width='4' height='4' rx='1'/%3E%3Crect x='679' y='13' width='4' height='4' rx='1'/%3E%3Crect x='3301' y='103' width='4' height='4' rx='1'/%3E%3Crect x='3349' y='31' width='4' height='4' rx='1'/%3E%3Crect x='1633' y='31' width='4' height='4' rx='1'/%3E%3Crect x='2383' y='37' width='4' height='4' rx='1'/%3E%3Crect x='3397' y='49' width='4' height='4' rx='1'/%3E%3Crect x='2845' y='109' width='4' height='4' rx='1'/%3E%3Crect x='661' y='61' width='4' height='4' rx='1'/%3E%3Crect x='2689' y='67' width='4' height='4' rx='1'/%3E%3Crect x='319' y='1' width='4' height='4' rx='1'/%3E%3Crect x='469' y='19' width='4' height='4' rx='1'/%3E%3Crect x='1675' y='79' width='4' height='4' rx='1'/%3E%3Crect x='3619' y='109' width='4' height='4' rx='1'/%3E%3Crect x='3811' y='61' width='4' height='4' rx='1'/%3E%3Crect x='3055' y='67' width='4' height='4' rx='1'/%3E%3Crect x='289' y='73' width='4' height='4' rx='1'/%3E%3C/g%3E%3Cg fill='%230e7490' fill-opacity='0.26'%3E%3Crect x='55' y='85' width='4' height='4' rx='1'/%3E%3Crect x='2323' y='37' width='4' height='4' rx='1'/%3E%3Crect x='3589' y='85' width='4' height='4' rx='1'/%3E%3Crect x='1033' y='49' width='4' height='4' rx='1'/%3E%3Crect x='547' y='73' width='4' height='4' rx='1'/%3E%3Crect x='1423' y='115' width='4' height='4' rx='1'/%3E%3Crect x='3607' y='19' width='4' height='4' rx='1'/%3E%3Crect x='307' y='43' width='4' height='4' rx='1'/%3E%3Crect x='1189' y='73' width='4' height='4' rx='1'/%3E%3Crect x='1627' y='61' width='4' height='4' rx='1'/%3E%3Crect x='1741' y='1' width='4' height='4' rx='1'/%3E%3Crect x='2263' y='91' width='4' height='4' rx='1'/%3E%3Crect x='727' y='13' width='4' height='4' rx='1'/%3E%3Crect x='1375' y='13' width='4' height='4' rx='1'/%3E%3Crect x='3487' y='1' width='4' height='4' rx='1'/%3E%3Crect x='631' y='19' width='4' height='4' rx='1'/%3E%3C/g%3E%3Cg fill='%230e7490' fill-opacity='0.3'%3E%3Crect x='2761' y='31' width='4' height='4' rx='1'/%3E%3Crect x='2581' y='85' width='4' height='4' rx='1'/%3E%3Crect x='2191' y='13' width='4' height='4' rx='1'/%3E%3Crect x='3529' y='7' width='4' height='4' rx='1'/%3E%3Crect x='931' y='97' width='4' height='4' rx='1'/%3E%3Crect x='67' y='1' width='4' height='4' rx='1'/%3E%3Crect x='2809' y='115' width='4' height='4' rx='1'/%3E%3Crect x='1957' y='73' width='4' height='4' rx='1'/%3E%3Crect x='727' y='61' width='4' height='4' rx='1'/%3E%3Crect x='2455' y='91' width='4' height='4' rx='1'/%3E%3Crect x='2143' y='55' width='4' height='4' rx='1'/%3E%3Crect x='799' y='1' width='4' height='4' rx='1'/%3E%3Crect x='2539' y='25' width='4' height='4' rx='1'/%3E%3Crect x='3097' y='109' width='4' height='4' rx='1'/%3E%3Crect x='1789' y='79' width='4' height='4' rx='1'/%3E%3Crect x='283' y='133' width='4' height='4' rx='1'/%3E%3Crect x='3025' y='25' width='4' height='4' rx='1'/%3E%3Crect x='1825' y='115' width='4' height='4' rx='1'/%3E%3Crect x='1339' y='13' width='4' height='4' rx='1'/%3E%3Crect x='1153' y='79' width='4' height='4' rx='1'/%3E%3Crect x='1729' y='31' width='4' height='4' rx='1'/%3E%3Crect x='757' y='49' width='4' height='4' rx='1'/%3E%3Crect x='577' y='7' width='4' height='4' rx='1'/%3E%3Crect x='2461' y='19' width='4' height='4' rx='1'/%3E%3Crect x='1339' y='85' width='4' height='4' rx='1'/%3E%3Crect x='2821' y='91' width='4' height='4' rx='1'/%3E%3C/g%3E%3Cg fill='%230e7490' fill-opacity='0.35'%3E%3Crect x='1561' y='103' width='4' height='4' rx='1'/%3E%3Crect x='1711' y='1' width='4' height='4' rx='1'/%3E%3Crect x='2161' y='103' width='4' height='4' rx='1'/%3E%3Crect x='3205' y='61' width='4' height='4' rx='1'/%3E%3Crect x='1363' y='133' width='4' height='4' rx='1'/%3E%3Crect x='1903' y='31' width='4' height='4' rx='1'/%3E%3Crect x='859' y='85' width='4' height='4' rx='1'/%3E%3Crect x='661' y='37' width='4' height='4' rx='1'/%3E%3Crect x='169' y='61' width='4' height='4' rx='1'/%3E%3Crect x='1393' y='103' width='4' height='4' rx='1'/%3E%3Crect x='1021' y='91' width='4' height='4' rx='1'/%3E%3Crect x='1885' y='127' width='4' height='4' rx='1'/%3E%3Crect x='1837' y='31' width='4' height='4' rx='1'/%3E%3Crect x='2605' y='121' width='4' height='4' rx='1'/%3E%3Crect x='1729' y='79' width='4' height='4' rx='1'/%3E%3Crect x='3337' y='73' width='4' height='4' rx='1'/%3E%3Crect x='2293' y='25' width='4' height='4' rx='1'/%3E%3Crect x='103' y='133' width='4' height='4' rx='1'/%3E%3Crect x='1945' y='37' width='4' height='4' rx='1'/%3E%3Crect x='2641' y='25' width='4' height='4' rx='1'/%3E%3Crect x='3223' y='7' width='4' height='4' rx='1'/%3E%3Crect x='523' y='7' width='4' height='4' rx='1'/%3E%3Crect x='2911' y='127' width='4' height='4' rx='1'/%3E%3Crect x='2761' y='121' width='4' height='4' rx='1'/%3E%3Crect x='793' y='73' width='4' height='4' rx='1'/%3E%3Crect x='2119' y='103' width='4' height='4' rx='1'/%3E%3C/g%3E%3Cg fill='%230e7490' fill-opacity='0.39'%3E%3Crect x='415' y='115' width='4' height='4' rx='1'/%3E%3Crect x='2485' y='7' width='4' height='4' rx='1'/%3E%3Crect x='601' y='79' width='4' height='4' rx='1'/%3E%3Crect x='2689' y='1' width='4' height='4' rx='1'/%3E%3Crect x='205' y='61' width='4' height='4' rx='1'/%3E%3Crect x='2431' y='91' width='4' height='4' rx='1'/%3E%3Crect x='1219' y='133' width='4' height='4' rx='1'/%3E%3Crect x='1987' y='25' width='4' height='4' rx='1'/%3E%3Crect x='7' y='109' width='4' height='4' rx='1'/%3E%3Crect x='2071' y='7' width='4' height='4' rx='1'/%3E%3Crect x='2659' y='73' width='4' height='4' rx='1'/%3E%3Crect x='85' y='109' width='4' height='4' rx='1'/%3E%3Crect x='2809' y='55' width='4' height='4' rx='1'/%3E%3Crect x='2353' y='139' width='4' height='4' rx='1'/%3E%3Crect x='2569' y='61' width='4' height='4' rx='1'/%3E%3Crect x='769' y='103' width='4' height='4' rx='1'/%3E%3Crect x='2113' y='49' width='4' height='4' rx='1'/%3E%3Crect x='493' y='13' width='4' height='4' rx='1'/%3E%3Crect x='1555' y='19' width='4' height='4' rx='1'/%3E%3Crect x='2173' y='139' width='4' height='4' rx='1'/%3E%3Crect x='2791' y='139' width='4' height='4' rx='1'/%3E%3C/g%3E%3Cg fill='%230e7490' fill-opacity='0.43'%3E%3Crect x='463' y='97' width='4' height='4' rx='1'/%3E%3Crect x='1297' y='85' width='4' height='4' rx='1'/%3E%3Crect x='1645' y='1' width='4' height='4' rx='1'/%3E%3Crect x='865' y='49' width='4' height='4' rx='1'/%3E%3Crect x='3049' y='133' width='4' height='4' rx='1'/%3E%3Crect x='2269' y='55' width='4' height='4' rx='1'/%3E%3Crect x='2437' y='139' width='4' height='4' rx='1'/%3E%3Crect x='2053' y='115' width='4' height='4' rx='1'/%3E%3Crect x='1747' y='55' width='4' height='4' rx='1'/%3E%3Crect x='751' y='127' width='4' height='4' rx='1'/%3E%3Crect x='3835' y='13' width='4' height='4' rx='1'/%3E%3Crect x='1429' y='43' width='4' height='4' rx='1'/%3E%3Crect x='1609' y='109' width='4' height='4' rx='1'/%3E%3Crect x='2917' y='55' width='4' height='4' rx='1'/%3E%3Crect x='1915' y='109' width='4' height='4' rx='1'/%3E%3Crect x='3439' y='43' width='4' height='4' rx='1'/%3E%3Crect x='235' y='79' width='4' height='4' rx='1'/%3E%3Crect x='151' y='103' width='4' height='4' rx='1'/%3E%3Crect x='3757' y='115' width='4' height='4' rx='1'/%3E%3Crect x='2035' y='61' width='4' height='4' rx='1'/%3E%3Crect x='3187' y='133' width='4' height='4' rx='1'/%3E%3Crect x='2737' y='67' width='4' height='4' rx='1'/%3E%3C/g%3E%3C/svg%3E");
  --grid-opacity: 0.9;
}

/* 只画在标题条上，但横向要铺满整屏 —— 标题条在 .wrap 里，
   用 100vw + 负半边距撑到版心外，多出来的部分由 overflow-x: clip 裁掉。
   用 clip 而不是 hidden：clip 不生成滚动容器，也不影响纵向溢出（卡片悬浮阴影照常）。 */
.sec-grid { position: relative; overflow-x: clip; }

.sec-grid .section-head { position: relative; }

.sec-grid .section-head::before,
.sec-grid .section-head::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;              /* 纵向严格等于标题条高度，到卡片区就没有纹理了 */
  left: 50%;
  width: 100vw;
  margin-left: -50vw;     /* 横向铺满整屏 */
  z-index: 0;
  pointer-events: none;   /* 只是背景，不能吃掉点击 */
  background-repeat: repeat;
  /* 轮廓：一张 SVG mask 同时套住两层，保证芯片层与亮点层的边缘严格重合。
     mask-size 用 100% 100%（SVG 带 preserveAspectRatio='none'）——
     横向随视口、纵向随带高，全程相对单位，不写死任何像素。 */
  -webkit-mask-image: var(--grid-mask);
  mask-image: var(--grid-mask);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
/* 芯片层：静态，没有 animation —— 循环流动已移除 */
.sec-grid .section-head::before {
  background-image: var(--grid-image);
  background-size: var(--grid-tile) var(--grid-tile);
  opacity: var(--grid-opacity);
}
/* 亮点层：一张覆盖整条带的画布，不平铺；只闪不动 */
.sec-grid .section-head::after {
  background-image: var(--grid-dots-image);
  background-size: var(--grid-dots-canvas);
  background-repeat: no-repeat;   /* 关键：整条带一次性随机撒点，不留任何重复 */
  background-position: center top;
  opacity: var(--grid-opacity);
  animation: grid-twinkle 4.6s ease-in-out infinite;
}
/* 标题文字压在纹理之上 */
.sec-grid .section-head > * { position: relative; z-index: 1; }

@keyframes grid-twinkle {
  0%, 100% { opacity: calc(var(--grid-opacity) * 0.35); }
  50%      { opacity: var(--grid-opacity); }
}
/* 尊重「减少动态效果」偏好：关掉闪烁，纹理本身保留 */
@media (prefers-reduced-motion: reduce) {
  .sec-grid .section-head::after { animation: none; opacity: calc(var(--grid-opacity) * 0.8); }
}

/* >>> GRID-BG-BLOCK-END >>> */

.section { position: relative; padding: 74px 0; }
.section-head { margin-bottom: 34px; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--c-accent);
  font-size: var(--fs-sm);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, var(--c-accent), transparent);
}
.section-title { font-size: var(--fs-h2); margin-top: 14px; }
.section-sub { color: var(--t-muted); margin-top: 12px; max-width: 62ch; }

/* ============================================================
   顶栏 + Mega Menu
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  transition: background-color 0.35s var(--ease-soft), box-shadow 0.35s, backdrop-filter 0.35s;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: var(--glass-strong);
  backdrop-filter: saturate(150%) blur(18px);
  border-bottom-color: var(--line);
  box-shadow: 0 12px 34px rgba(3, 8, 22, 0.5);
}
.header-inner { display: flex; align-items: center; gap: 32px; height: var(--header-h); }

.brand { display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto; }
/* 品牌 Logo：白底卡片承托，深色导航上也清晰 */
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 6px 10px;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(1, 20, 60, 0.28);
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}
.brand-mark img { height: 26px; width: auto; object-fit: contain; }
.brand:hover .brand-mark { transform: translateY(-2px) scale(1.04); box-shadow: 0 12px 26px rgba(1, 20, 60, 0.42); }
.brand-text { display: flex; flex-direction: column; font-weight: 700; letter-spacing: 0.06em; line-height: 1.15; }
.brand-text em { font-style: normal; font-size: var(--fs-xs); color: var(--t-muted); font-weight: 500; letter-spacing: 0.3em; }

.primary-nav { display: flex; align-items: center; gap: 6px; margin-right: auto; }
.nav-item { position: relative; }
/* 悬停桥：补齐菜单项与面板之间的空隙，防止鼠标下移时 :hover 断开 */
.nav-item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 34px;
}
.nav-link {
  position: relative;
  display: block;
  padding: 10px 16px;
  font-size: 15px;
  color: var(--t-primary);
  opacity: 0.86;
  transition: opacity 0.3s, color 0.3s;
}
.nav-link:hover, .nav-item:focus-within .nav-link { opacity: 1; }
.nav-underline {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-spectrum);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.42s var(--ease-out);
}
.nav-item:hover .nav-underline, .nav-item:focus-within .nav-underline { transform: scaleX(1); }

.header-side { display: flex; align-items: center; gap: 12px; }

.lang-switch { position: relative; cursor: pointer; padding: 6px 10px; border-radius: var(--r-sm); }
.lang-switch:hover { background: rgba(169, 186, 214, 0.1); }
.lang-current { font-size: var(--fs-sm); display: inline-flex; align-items: center; gap: 6px; }
.caret { width: 0; height: 0; border: 4px solid transparent; border-top-color: var(--t-muted); margin-top: 4px; transition: transform 0.3s; }
.lang-switch:hover .caret { transform: rotate(180deg); }
.lang-drop {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 130px;
  padding: 8px;
  border-radius: var(--r-md);
  background: var(--glass-strong);
  border: 1px solid var(--line);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.3s var(--ease-soft), transform 0.3s var(--ease-out), visibility 0.3s;
}
.lang-switch:hover .lang-drop { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-drop a { display: block; padding: 7px 12px; border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--t-muted); transition: background-color 0.25s, color 0.25s; }
.lang-drop a:hover { background: rgba(46, 123, 255, 0.18); color: var(--t-primary); }

/* 主题切换：两个图标叠在同一格里，按 data-theme 交叉淡入淡出，
   显示的是「当前主题」对应的图标（暗色=月亮 / 亮色=太阳） */
.theme-toggle {
  position: relative;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--t-muted);
  cursor: pointer;
  transition: color 0.3s, border-color 0.3s, background-color 0.3s;
}
.theme-toggle:hover { color: var(--t-primary); border-color: var(--line-strong); background: rgba(169, 186, 214, 0.1); }
.theme-ico {
  position: absolute;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  transition: opacity 0.35s var(--ease-soft), transform 0.45s var(--ease-out);
}
.theme-ico svg { width: 20px; height: 20px; }
/* 默认（暗色）显示月亮 */
.theme-ico--sun { opacity: 0; transform: rotate(-90deg) scale(0.6); }
.theme-ico--moon { opacity: 1; transform: none; }
[data-theme="light"] .theme-ico--sun { opacity: 1; transform: none; }
[data-theme="light"] .theme-ico--moon { opacity: 0; transform: rotate(90deg) scale(0.6); }

.nav-burger { display: none; flex-direction: column; gap: 4px; padding: 10px; background: none; border: 0; cursor: pointer; }
.nav-burger span { display: block; width: 20px; height: 2px; background: var(--t-primary); border-radius: 2px; }

/* Mega Menu：跨通栏对齐容器中心线，悬停 0.4s 展开，可停留操作 */
.mega-menu {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--header-h);
  z-index: 58;
  display: flex;
  justify-content: center;
  padding: 12px 0 0;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.4s var(--ease-soft), transform 0.4s var(--ease-out), visibility 0.4s;
}
.nav-item:hover .mega-menu, .nav-item:focus-within .mega-menu, .nav-item.is-open .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* 命中区域只落在卡片本体：这样从左右两侧移出也会触发 mouseleave */
.mega-inner { pointer-events: auto; }
.mega-inner {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 28px;
  margin: 0 auto;
  width: min(1180px, calc(100vw - 48px));
  padding: 26px 28px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--panel-bg);
  backdrop-filter: saturate(160%) blur(22px);
  box-shadow: var(--shadow-2);
}
.mega-groups { display: flex; flex-direction: column; gap: 4px; border-right: 1px solid var(--line); padding-right: 18px; }
.mega-group {
  padding: 12px 14px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background-color 0.3s var(--ease-soft), transform 0.3s var(--ease-out);
}
.mega-group:hover { background: rgba(46, 123, 255, 0.14); transform: translateX(4px); }
.mega-group-title { display: block; font-weight: 600; font-size: 15px; }
.group-underline { display: block; height: 2px; margin-top: 6px; width: 0; background: var(--grad-spectrum); transition: width 0.4s var(--ease-out); }
.mega-group:hover .group-underline { width: 44px; }
.mega-group-summary { margin-top: 6px; color: var(--t-muted); font-size: var(--fs-xs); line-height: 1.6; }

.mega-panels { position: relative; min-height: 160px; }
.mega-panel { display: none; animation: fadeUp 0.45s var(--ease-out) both; }
.mega-panel.is-active { display: block; }
.mega-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.mega-card { padding: 10px; border-radius: var(--r-md); transition: transform 0.4s var(--ease-out), background-color 0.35s; }
.mega-card:hover { transform: translateY(-5px); background: rgba(46, 123, 255, 0.12); }
.mega-thumb { position: relative; overflow: hidden; border-radius: var(--r-sm); aspect-ratio: 16 / 10; background: var(--bg-soft); }
.mega-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
.mega-card:hover .mega-img { transform: scale(1.08); }
.mega-thumb-glow {
  position: absolute;
  inset: -40%;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.4) 50%, transparent 62%);
  translate: -60% 0;
  transition: translate 0.75s var(--ease-out);
}
.mega-card:hover .mega-thumb-glow { translate: 60% 0; }
.mega-card-title { display: block; margin-top: 9px; font-size: var(--fs-sm); color: var(--t-muted); transition: color 0.3s; }
.mega-card:hover .mega-card-title { color: var(--t-primary); }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Hero：全屏渐变 + 轮播 + VR 卡片
   ============================================================ */
.hero {
  position: relative;
  background: var(--hero-bg);
  min-height: clamp(620px, 88vh, 940px);
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.06);
  /* 过渡时长与主 js 里 heroCarousel 的 DELAY（3000ms）配套：
     淡入约占 1/3 间隔，留 ~1.9s 稳定画面；Ken Burns 长于间隔（2 倍），缓慢缩放才看得出来。
     改 DELAY 时这两个数要一起改，否则要么切太快看不清，要么缩放走不完就被换掉。 */
  transition: opacity 1.1s var(--ease-soft), transform 6s linear;
}
.hero-slide.is-active { opacity: 1; transform: scale(1); }
/* 亮色主题把底图整幅隐去（--hero-media-opacity: 0）——轮播逻辑完全不动，
   只是这个主题下不显示底图，首屏变成白底 */
.hero-slide > img { width: 100%; height: 100%; object-fit: cover; opacity: var(--hero-media-opacity); transition: opacity 0.6s var(--ease-soft); }
.hero-slide::after { content: ""; position: absolute; inset: 0; background: var(--hero-scrim); }
.hero-body { position: relative; padding: 104px 0 128px; max-width: 780px; }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hero-line);
  background: var(--hero-glass);
  backdrop-filter: blur(10px);
  font-size: var(--fs-sm);
  color: var(--hero-text-muted);
}
.hero-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-accent); box-shadow: 0 0 12px var(--c-accent); }
.hero-title {
  margin-top: 26px;
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.14;
  background: var(--hero-title-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* 首屏文字色跟随 --hero-* 语境：暗色压图用浅色，亮色白底用页面配色 */
.hero-sub { margin-top: 22px; font-size: 18px; color: var(--hero-text-muted); max-width: 58ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
/* 首屏 CTA 三按钮统一规格：定宽 + 居中对齐，避免文字长度差异导致宽度参差 */
.hero-actions .btn {
  justify-content: center;
  text-align: center;
  min-width: 168px;
  min-height: 48px;
  padding-inline: 24px;
  white-space: nowrap;
}
/* 描边按钮跟随 Hero 语境：暗色压在深色大图上用浅色，亮色白底上用页面配色 */
.hero-actions .btn-outline {
  color: var(--hero-text);
  border-color: var(--hero-line);
  background: var(--hero-glass);
}
.hero-actions .btn-outline:hover { color: var(--hero-text); border-color: var(--hero-line-hover); }

.hero-stat-row { display: flex; flex-wrap: wrap; gap: 42px; margin-top: 56px; }
.hero-stat small { display: block; color: var(--hero-text-muted); font-size: var(--fs-xs); letter-spacing: 0.18em; }
.hero-stat strong { font-size: 30px; font-weight: 700; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* 轮播指示条（.hero-rail / .hero-dot）样式已随模板一并移除：
   Hero 顶部轮播保留自动切换效果，仅不再展示底部指示条 */

.vr-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 48px; }
.hero .vr-strip { margin-bottom: 62px; }
.vr-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  padding: 30px;
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 264px; /* 需求：模块垂直高度为原来的 2 倍 */
  align-items: center;
  background: var(--hero-card-bg);
  color: var(--hero-card-text);
  cursor: pointer;
  transition: transform 0.45s var(--ease-out), border-color 0.4s, box-shadow 0.45s;
}
.vr-card:hover { transform: translateY(-6px); border-color: var(--c-brand-2); box-shadow: var(--shadow-2); }
/* 缩略图宽度改为相对值：≥1156px 视口仍为 208px（桌面观感不变），
   更窄时按 18vw 平滑收缩，给标题留出空间，无需为每个断点写死像素 */
.vr-thumb { position: relative; width: clamp(96px, 18vw, 208px); aspect-ratio: 4 / 3; border-radius: var(--r-sm); overflow: hidden; flex: 0 0 auto; }
.vr-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
.vr-card:hover .vr-thumb img { transform: scale(1.12) rotate(1deg); }
.vr-badge {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--hero-badge-bg);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--c-cyan);
}
.vr-card > span:not(.vr-thumb) { display: flex; flex-direction: column; min-width: 0; }
/* 标题不设 nowrap：宽度够时自然单行（桌面观感不变），
   窄屏/平板改为折行显示完整标题，避免出现「桌面看得到、手机只剩省略号」的不一致 */
.vr-title { font-weight: 600; font-size: clamp(17px, 1.1vw + 8px, 21px); line-height: 1.45; overflow-wrap: anywhere; }
.vr-desc { color: var(--hero-card-muted); font-size: var(--fs-sm); margin-top: 8px; }

/* ============================================================
   核心数据条
   ============================================================ */
.stats-band {
  position: relative;
  border-block: 1px solid var(--line);
  background: var(--surface-band);
  backdrop-filter: blur(10px);
}
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat-cell {
  padding: 34px 22px;
  text-align: center;
  border-right: 1px solid var(--line);
  transition: background-color 0.4s;
}
.stat-cell:last-child { border-right: 0; }
.stat-cell:hover { background: rgba(46, 123, 255, 0.08); }
.stat-num {
  font-size: clamp(30px, 3.2vw, 46px);
  font-weight: 700;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}
.stat-label { margin-top: 8px; color: var(--t-muted); font-size: var(--fs-sm); }

/* ============================================================
   通用卡片：悬停浮起 + 阴影加深 + 内图放大 + 标题下划线 + 光扫
   ============================================================ */
.card {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--card-bg);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out), border-color 0.4s;
  will-change: transform;
}
.card::after {
  content: "";
  position: absolute;
  inset: -50%;
  background: linear-gradient(115deg, transparent 40%, var(--shine) 50%, transparent 60%);
  translate: -70% 0;
  opacity: 0;
  transition: translate 0.9s var(--ease-out), opacity 0.3s;
  pointer-events: none;
}
.card:hover { transform: translateY(-10px); box-shadow: var(--shadow-2); border-color: var(--c-brand-2); }
.card:hover::after { translate: 70% 0; opacity: 0.4; }
.card-media { position: relative; overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out); }
.card:hover .card-media img { transform: scale(1.06); }
.card-title { position: relative; display: inline-block; font-size: var(--fs-h3); }
.card-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 2px;
  background: var(--grad-spectrum);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}
.card:hover .card-title::after { transform: scaleX(1); }

/* ============================================================
   优势四宫格
   ============================================================ */
/* 五环式布局：上三下二；grid-auto-rows:1fr 保证两行等高 */
.adv-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; grid-auto-rows: 1fr; }
.adv-card {
  position: relative;
  padding: 38px 30px 42px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--card-bg);
  overflow: hidden;
  transition: transform 0.5s var(--ease-out), border-color 0.4s, box-shadow 0.5s;
}
.adv-card::before {
  content: "";
  position: absolute;
  inset: auto -30% -60% -30%;
  height: 190px;
  background: radial-gradient(closest-side, rgba(46, 123, 255, 0.32), transparent 72%);
  opacity: 0;
  transition: opacity 0.5s var(--ease-soft);
}
.adv-card:hover { transform: translateY(-10px); border-color: var(--c-brand-2); box-shadow: var(--shadow-2); }
.adv-card:hover::before { opacity: 1; }
.adv-idx {
  font-size: 46px;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.9;
}
.adv-title { margin-top: 16px; font-size: 24px; font-weight: 700; letter-spacing: 0.01em; }
.adv-desc { margin-top: 12px; color: var(--t-soft); font-size: 16px; line-height: 1.85; }

/* 6 列轨道：每张卡片占 2 列（= 行宽 1/3），第 4、5 张居中摆放，左右各留 1 列空白 */
.adv-card { grid-column: span 2; }
.adv-card:nth-child(4) { grid-column: 2 / span 2; }
.adv-card:nth-child(5) { grid-column: 4 / span 2; }

/* ============================================================
   解决方案矩阵（2 大卡 + 4 小卡）
   ============================================================ */
.solution-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.solution-grid .sol-card { grid-column: span 1; }
.solution-grid .sol-card[data-size="lg"] { grid-column: span 2; }
/* display:grid + 默认 stretch：卡片被同一行拉高时，.sol-media 跟着长高，图始终铺满
   （文字是 absolute 压在图上，图没铺满就会露出卡片底色） */
.sol-card { position: relative; display: grid; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--bg-soft); }
/* 占位链接：全站统一的约定——详情页 / 页面未就绪时**不输出 href**，
   否则 `href="#"` 的实际行为是把用户甩回页面顶部。
   这里只做一件事：把这类不可跳转的 <a> 光标恢复默认。
   写成 `a:not([href])` 是通用形态，新增任何占位链接都自动生效，不用再枚举；
   且它不会误伤 <button class="side-item">（回到顶部仍是 pointer）。 */
a:not([href]) { cursor: default; }
/* aspect-ratio 只负责「没被拉伸时」的默认高度；
   一旦同一行的卡片被栅格拉高，height:100% 会让图跟着铺满整卡
   （百分比高度在这里以栅格区域高度为参照，能拿到最终的拉伸后高度） */
.sol-media { position: relative; aspect-ratio: 4 / 3; height: 100%; overflow: hidden; }
.sol-card[data-size="lg"] .sol-media { aspect-ratio: 16 / 9; }
.sol-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-out); }
.sol-card:hover .sol-media img { transform: scale(1.08); }
.sol-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(7, 11, 20, 0.92));
}
/* 卡片文字压在图片上：两种主题都用浅色。
   文字层自带一层底部渐变兜底 —— 不能只靠 .sol-media::after：
   卡片越矮（375 窄档实测），标题正好落在大图遮罩渐变的**淡端**（近乎无遮罩），
   白字对亮蓝底图只剩 3.1:1。由文字层自己保证身后的对比度，就不依赖卡片高度了。 */
.sol-body {
  position: absolute;
  inset: auto 0 0 0;
  padding: 30px 24px 24px;
  color: var(--t-on-media);
  background: linear-gradient(180deg, rgba(7, 11, 20, 0) 0%, rgba(7, 11, 20, 0.78) 34%, rgba(7, 11, 20, 0.95) 100%);
}
.sol-title { font-size: 19px; font-weight: 600; }
.sol-sub { color: var(--t-on-media-muted); font-size: var(--fs-sm); margin-top: 6px; }
.sol-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.5s var(--ease-out), opacity 0.4s; }
/* 标签同样压在卡片的图片遮罩上：必须用「压图」配色，
   否则亮色主题下 --t-muted 变深灰、深灰压深底直接看不见 */
.sol-tags .tag { color: var(--t-on-media-muted); border-color: rgba(255, 255, 255, 0.3); background: rgba(7, 11, 20, 0.22); }
.sol-card:hover .sol-tags { max-height: 80px; opacity: 1; }
.sol-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; color: var(--c-cyan); font-size: var(--fs-sm); opacity: 0; transform: translateX(-8px); transition: opacity 0.4s, transform 0.45s var(--ease-out); }
.sol-card:hover .sol-more { opacity: 1; transform: translateX(0); }

/* ============================================================
   解决方案轮播（/solutions 专用）：整区背景随悬停切换 + 横向面板轨道
   两层结构：.sol-bg 提供整区预览图；.sol-panel 只承载文字。
   悬停时只有背景淡入切换，面板的文字 / 边框 / 尺寸一律不变。
   面板宽度按「一屏可见数」反推，不写死像素；高度用 41.7vw
   （= 600/1440），使 4 个面板时刚好是 360×600 的 3:5 比例。
   ============================================================ */
.sol-showcase {
  --sol-per-view: 4;
  --sol-seam: 1px;
  --sol-h: clamp(430px, 41.7vw, 600px);
  --sol-pad: clamp(22px, 1.6vw, 34px);
  position: relative;
  height: var(--sol-h);
  margin-top: 34px;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
}
.sol-bg { position: absolute; inset: 0; }
.sol-bg-item { position: absolute; inset: 0; opacity: 0; transition: opacity 0.65s var(--ease-soft); }
.sol-bg-item.is-active { opacity: 1; }
.sol-bg-item img { width: 100%; height: 100%; object-fit: cover; }
.sol-bg-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 11, 20, 0.2) 0%, rgba(7, 11, 20, 0.5) 46%, rgba(7, 11, 20, 0.9) 100%),
    linear-gradient(90deg, rgba(7, 11, 20, 0.5) 0%, rgba(7, 11, 20, 0.14) 46%, rgba(7, 11, 20, 0.42) 100%);
}
.sol-rail {
  position: relative;
  z-index: 1;
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sol-rail::-webkit-scrollbar { display: none; }
.sol-rail.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.sol-panel {
  position: relative;
  flex: 0 0 calc((100% - (var(--sol-per-view) - 1) * var(--sol-seam)) / var(--sol-per-view));
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: var(--sol-pad);
  color: var(--t-on-media);
  border-right: var(--sol-seam) solid rgba(148, 163, 189, 0.16);
}
.sol-panel:last-child { border-right: 0; }
.sol-panel-idx { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.2em; color: var(--c-cyan); opacity: 0.8; }
.sol-panel-body { margin-top: auto; }
.sol-showcase .sol-title { font-size: clamp(20px, 1.5vw + 4px, 26px); font-weight: 700; letter-spacing: 0.01em; }
.sol-showcase .sol-sub {
  margin-top: 10px;
  color: var(--t-on-media-muted);
  font-size: var(--fs-sm);
  line-height: 1.75;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 面板内文字一律常显：悬停只换背景，不再出现「文字显隐」的变化 */
.sol-showcase .sol-tags { margin-top: 14px; max-height: none; opacity: 1; overflow: visible; }
.sol-showcase .sol-more { margin-top: 14px; opacity: 1; transform: none; color: var(--c-cyan); }
.sol-arrows {
  position: absolute;
  z-index: 2;
  top: clamp(16px, 1.8vw, 26px);
  right: clamp(16px, 2vw, 34px);
  display: flex;
  gap: 8px;
}
.sol-arrow--prev svg { transform: rotate(180deg); }

/* 宽屏逐级增加一屏数量，把单个面板宽度维持在 320~400 之间，避免被拉得过宽 */
.sol-showcase.is-static .sol-arrows { display: none; }
@media (min-width: 1600px) { .sol-showcase { --sol-per-view: 5; } }
@media (min-width: 1920px) { .sol-showcase { --sol-per-view: 6; } }
@media (max-width: 1200px) { .sol-showcase { --sol-per-view: 3; } }
@media (max-width: 768px) {
  .sol-showcase { --sol-per-view: 2; --sol-h: clamp(400px, 62vw, 520px); }
  .sol-arrows { display: none; }
}
@media (max-width: 520px) { .sol-showcase { --sol-per-view: 1.15; } }

/* ============================================================
   产品系列 Tab + 横向轨道
   ============================================================ */
.tab-bar { display: inline-flex; gap: 6px; padding: 6px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface-sunken-soft); }
.tab-btn {
  padding: 9px 22px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--t-muted);
  cursor: pointer;
  font-weight: 600;
  transition: background-color 0.35s, color 0.35s, box-shadow 0.35s;
}
.tab-btn:hover { color: var(--t-primary); }
.tab-btn.is-active { background: var(--fill-strong); color: var(--t-on-fill); box-shadow: var(--shadow-1); }

.rail-wrap { position: relative; margin-top: 28px; }
.rail {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 12px;
  scrollbar-width: thin;
}
.rail::-webkit-scrollbar { height: 4px; }
.rail::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }
.rail-card { flex: 0 0 260px; scroll-snap-align: start; }
.rail-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.rail-arrows { display: flex; gap: 8px; }
.rail-arrow {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface-sunken-soft);
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s, transform 0.3s;
}
.rail-arrow:hover { background: rgba(46, 123, 255, 0.2); border-color: var(--c-brand-2); transform: translateY(-2px); }
.prod-card { overflow: hidden; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bg-soft); transition: transform 0.45s var(--ease-out), box-shadow 0.45s, border-color 0.35s; }
.prod-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-2); border-color: var(--c-brand-2); }
.prod-media { aspect-ratio: 4 / 3; overflow: hidden; }
.prod-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out); }
.prod-card:hover .prod-media img { transform: scale(1.07); }
.prod-body { padding: 16px 18px 20px; }
.prod-name { font-weight: 600; }
.prod-sub { color: var(--t-muted); font-size: var(--fs-xs); margin-top: 4px; }

/* ============================================================
   案例墙：左侧大类划分 + 右侧无限加载（不做页码分页）
   分栏宽度全部用 minmax()/fr 表达，不写死像素；侧栏用 sticky 跟随滚动
   ============================================================ */
.cases-layout {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: clamp(20px, 2.4vw, 40px);
  align-items: start;
}
.case-side { position: sticky; top: calc(var(--header-h) + 24px); }
.case-side-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--t-primary);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.case-cat-list { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.case-cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--t-muted);
  font-size: var(--fs-sm);
  text-align: left;
  cursor: pointer;
  transition: color 0.3s, background-color 0.3s, border-color 0.3s;
}
.case-cat:hover { color: var(--t-primary); background: rgba(148, 163, 189, 0.08); }
.case-cat.is-active {
  color: var(--t-primary);
  background: linear-gradient(90deg, rgba(46, 123, 255, 0.22), rgba(34, 211, 238, 0.08));
  border-color: var(--line-strong);
}
.case-cat--placeholder { opacity: 0.55; cursor: not-allowed; }
.case-cat--placeholder:hover { color: var(--t-muted); background: transparent; }
.case-cat-count {
  flex: 0 0 auto;
  min-width: 2em;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  background: rgba(148, 163, 189, 0.14);
  color: var(--t-muted);
  font-size: var(--fs-xs);
  text-align: center;
}
.case-cat.is-active .case-cat-count { background: var(--c-cyan); color: #07131f; }
.case-cat-tag { flex: 0 0 auto; font-size: var(--fs-xs); color: var(--t-muted); opacity: 0.8; }
.case-main { min-width: 0; }
.cases-empty { padding: 40px 0; color: var(--t-muted); font-size: var(--fs-sm); text-align: center; }
.cases-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
}
.cases-status { color: var(--t-muted); font-size: var(--fs-xs); min-height: 1.2em; }
.case-sentinel { width: 100%; height: 1px; }
.case-ico.is-hidden { display: none; }

@media (max-width: 1024px) {
  /* 窄屏改为上下堆叠：大类条变成可横向滚动的一行，不再 sticky */
  .cases-layout { grid-template-columns: minmax(0, 1fr); }
  .case-side { position: static; }
  .case-cat-list {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: none;
  }
  .case-cat-list::-webkit-scrollbar { display: none; }
  .case-cat { width: auto; flex: 0 0 auto; white-space: nowrap; }
}

.case-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.case-card { position: relative; display: grid; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--bg-soft); grid-column: span 2; }
.case-card[data-span="2"] { grid-column: span 3; }
.case-media { position: relative; aspect-ratio: 3 / 2; height: 100%; overflow: hidden; }
.case-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-out); }
.case-card:hover .case-media img { transform: scale(1.07); }
.case-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(7, 11, 20, 0.9)); opacity: 0.75; transition: opacity 0.45s; }
.case-card:hover .case-media::after { opacity: 0.55; }
/* 同理：案例文字压在 .case-media 的深色遮罩上 */
.case-body { position: absolute; inset: auto 0 0 0; padding: 20px 22px; color: var(--t-on-media); }
.case-title { font-size: 17px; font-weight: 600; }
.case-meta { margin-top: 6px; color: var(--t-on-media-muted); font-size: var(--fs-xs); }
.case-icons { position: absolute; top: 14px; right: 14px; display: flex; gap: 8px; }
.case-ico {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(7, 11, 20, 0.66);
  border: 1px solid var(--line);
  color: var(--c-cyan);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.4s, transform 0.4s var(--ease-out);
}
.case-card:hover .case-ico { opacity: 1; transform: translateY(0); }
.case-ico svg { width: 17px; height: 17px; }

/* ============================================================
   洲明动态
   ============================================================ */
.news-layout { display: grid; grid-template-columns: 1.15fr 1fr; gap: 30px; }
.news-lead { position: relative; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--bg-soft); }
.news-lead-media { aspect-ratio: 16 / 10; overflow: hidden; }
.news-lead-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.news-lead:hover .news-lead-media img { transform: scale(1.06); }
.news-lead-body { padding: 24px 26px 28px; }
.news-list { display: flex; flex-direction: column; gap: 4px; }
.news-row {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 20px 18px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  transition: background-color 0.4s, border-color 0.4s, transform 0.45s var(--ease-out);
}
.news-row + .news-row { border-top: 1px solid var(--line); border-top-left-radius: 0; border-top-right-radius: 0; }
.news-row:hover { background: rgba(46, 123, 255, 0.1); border-color: var(--line); transform: translateX(6px); }
.news-date { color: var(--t-muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; transition: color 0.35s; }
.news-row:hover .news-date { color: var(--c-accent); }
.news-title { font-weight: 500; }
.news-row:hover .news-title { color: #fff; }
.news-go { color: var(--t-muted); opacity: 0.5; transition: opacity 0.4s, transform 0.45s var(--ease-out); }
.news-row:hover .news-go { opacity: 1; transform: translateX(6px); color: var(--c-accent); }
.ico-arrow { width: 20px; height: 20px; }

/* ============================================================
   发展历程时间轴
   ============================================================ */
.timeline-years {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 6px 0 18px;
  border-bottom: 1px solid var(--line);
  scrollbar-width: thin;
}
.timeline-years::-webkit-scrollbar { height: 3px; }
.timeline-years::-webkit-scrollbar-thumb { background: var(--line-strong); }
.year-chip {
  flex: 0 0 auto;
  padding: 8px 18px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface-sunken-soft);
  color: var(--t-muted);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: color 0.3s, border-color 0.3s, background-color 0.35s, transform 0.35s var(--ease-out);
}
.year-chip:hover { transform: translateY(-3px); color: #fff; border-color: var(--c-brand-2); }
.year-chip.is-active { background: var(--fill-strong); color: var(--t-on-fill); border-color: transparent; box-shadow: var(--shadow-1); }

.timeline-viewport { position: relative; margin-top: 26px; overflow: hidden; }
.timeline-track { display: flex; transition: transform 0.8s var(--ease-out); }
.timeline-panel { flex: 0 0 100%; }
.timeline-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.tl-card {
  padding: 22px 22px 26px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--card-bg);
  transition: transform 0.45s var(--ease-out), border-color 0.4s, box-shadow 0.45s;
}
.tl-card:hover { transform: translateY(-7px); border-color: var(--c-brand-2); box-shadow: var(--shadow-2); }
.tl-month { color: var(--c-accent); font-size: var(--fs-xs); letter-spacing: 0.16em; }
.tl-title { margin-top: 8px; font-size: 16px; font-weight: 600; line-height: 1.6; }
.tl-summary { margin-top: 8px; color: var(--t-muted); font-size: var(--fs-sm); }
.timeline-nav { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }

/* ============================================================
   荣誉奖项
   ============================================================ */
.award-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.award-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface-sunken);
  transition: transform 0.45s var(--ease-out), background-color 0.4s, border-color 0.4s;
}
.award-item:hover { transform: translateY(-6px); background: rgba(46, 123, 255, 0.14); border-color: var(--c-brand-2); }
.award-ico { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; background: var(--grad-faint); color: var(--c-accent); }
.award-ico svg { width: 22px; height: 22px; }
/* 图片版图标：容器与显示尺寸沿用 40/22，只去掉底色让奖杯自身质感出得来 */
.award-ico--img { background: none; }
.award-ico--img img { width: 22px; height: 22px; object-fit: contain; display: block; }

/* 简笔画奖杯沿用 .award-ico 默认样式：渐变底色 + currentColor 线条（品牌青），
   与全站线性图标一致；如需换成实拍图版本，用 .award-ico--img 即可 */
.award-name { font-weight: 600; font-size: 15px; }
.award-org { color: var(--t-muted); font-size: var(--fs-xs); margin-top: 3px; }

/* ============================================================
   页脚
   ============================================================ */
.site-footer { position: relative; margin-top: 60px; border-top: 1px solid var(--line); background: var(--footer-bg); }
.footer-glow { position: absolute; inset: -1px 0 auto 0; height: 1px; background: var(--grad-spectrum); opacity: 0.55; }
/* 第三列（联系我们）给足最小宽度：中文地址较长，窄列会逼出折行或溢出 */
.footer-top { display: grid; grid-template-columns: 1.1fr 2.2fr minmax(320px, 1fr); gap: 44px; padding: 62px 0 44px; }
.footer-slogan { margin: 18px 0 22px; color: var(--t-muted); }
.footer-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.footer-col h4 { font-size: 15px; margin-bottom: 14px; }
.footer-col a { display: inline-block; padding: 5px 0; color: var(--t-muted); font-size: var(--fs-sm); transition: color 0.3s, transform 0.35s var(--ease-out); }
.footer-col a:hover { color: #fff; transform: translateX(4px); }
.footer-contact h4 { font-size: 15px; margin-bottom: 14px; }
/* 联系条目改 grid 两列（2026-10-13）：英文 label（Manufacturing Base）远超原
   2.9em 固定宽被挤成竖排、英文地址 nowrap 直接溢出裁切 —— 都是固定宽 + 禁折行
   按中文长度设计埋下的。改为：label 列取各行最大宽（minmax 下限仍是 2.9em，
   中文短标签对齐观感不变），值列 1fr 内自动折行。li 用 display:contents 让
   label/value 直接成为网格项，全部行的 label 共享同一列宽 → 左对齐一致。 */
.contact-list {
  display: grid;
  grid-template-columns: minmax(2.9em, max-content) 1fr;
  column-gap: 12px;
  row-gap: 5px;
  color: var(--t-muted);
  font-size: var(--fs-sm);
}
.contact-list li { display: contents; }
.contact-list .contact-label { align-self: center; white-space: nowrap; color: var(--t-primary); opacity: 0.7; }
.contact-list .contact-value { min-width: 0; align-self: center; text-align: left; overflow-wrap: anywhere; }
.contact-list a.contact-value:hover { color: var(--c-accent); }
/* 地址：每段独立成行，行内不折行（宁可溢出也不把语义段落拆散）；
   行距取 1.7 保持多行紧凑，段间距由 .footer-addr p + p 控制 */
.footer-addr { margin-top: 16px; color: var(--t-muted); font-size: var(--fs-xs); line-height: 1.7; }
.footer-addr p { white-space: nowrap; }
.footer-addr p + p { margin-top: 4px; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 20px 0 26px;
  border-top: 1px solid var(--line);
  color: var(--t-muted);
  font-size: var(--fs-xs);
}
.footer-links { display: flex; gap: 20px; }
.footer-links a:hover { color: var(--c-accent); }

/* ============================================================
   右侧悬浮 + 管理条
   ============================================================ */
.side-rail { position: fixed; right: 18px; top: 50%; translate: 0 -50%; z-index: 55; display: flex; flex-direction: column; gap: 10px; }
.side-item {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface-sunken-soft);
  backdrop-filter: blur(10px);
  cursor: pointer;
  overflow: hidden;
  transition: background-color 0.4s, border-color 0.4s, box-shadow 0.4s, padding-left 0.4s var(--ease-out);
}
.side-item:hover { background: var(--c-brand-2); border-color: transparent; box-shadow: var(--shadow-2); padding-left: 12px; }
[data-theme="light"] .side-item:hover { background: var(--c-brand); }
.side-ico { width: 44px; height: 44px; display: grid; place-items: center; color: var(--c-accent); }
.side-item:hover .side-ico { color: #fff; }
.side-ico svg { width: 20px; height: 20px; }
.side-label { max-width: 0; white-space: nowrap; overflow: hidden; font-size: var(--fs-sm); opacity: 0; transition: max-width 0.45s var(--ease-out), opacity 0.35s; }
.side-item:hover .side-label { max-width: 92px; opacity: 1; padding-right: 14px; }
.side-top { color: inherit; }

.admin-bar {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 58;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--glass-strong);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-2);
  font-size: var(--fs-xs);
  color: var(--t-muted);
}
.admin-bar-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.admin-bar-text { white-space: nowrap; }

/* ============================================================
   滚动入场动画（IntersectionObserver 驱动）
   ============================================================ */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.75s var(--ease-out), transform 0.85s var(--ease-out); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal-delay] { transition-delay: var(--delay, 0ms); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ============================================================
   HERO 固定素材位（.gif，不随轮播切换）
   ============================================================ */
.hero-gif {
  position: absolute;
  right: clamp(24px, 5vw, 92px);
  top: 46%;
  translate: 0 -50%;
  width: clamp(300px, 25vw, 500px);
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(var(--hero-shadow));
}
.hero-gif img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-strong);
}

/* 第二 GIF：与主素材同尺寸，整体向左上偏移，右下角被主素材压住形成层叠。
   偏移量约为主素材宽度的 42% / 高度的 62%，保证只是「压住一个角」而不是遮掉大半。 */
.hero-gif--stack {
  /* 在基础错位之上再向左下各推 100px（right 增大即左移，top 增大即下移） */
  right: calc(clamp(24px, 5vw, 92px) + 11vw + 100px);
  top: calc(46% - 14vw + 100px);
  z-index: 0;
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.45));
}

/* ============================================================
   重点合作客户 LOGO 墙
   ============================================================ */
/* 行轨道：每行独立横向飘移，超出部分裁掉。
   单元格宽度用 --cell-w 统一控制：轨道宽为 max-content，百分比在内部无法反推容器宽，
   因此按容器宽度算出单格宽后由 .logo-wall 下发变量。 */
/* 用容器查询单位 cqw 定单元格宽：轨道是 max-content，内部百分比无法反推容器宽度，
   把 .logo-wall 设为容器后，100cqw 即容器宽，宽度计算在任何情况下都成立 */
.logo-wall {
  --logo-cols: 6;
  --logo-gap: 14px;
  /* 三行统一速度：一行跑完正本 12 格的用时。改这一处即可整体调速。
     ⚠ 这里填的是「周期」，与速度成反比 —— 要降速就把数字调大。
     2026-10-10 用户要求「移动速度降低 1/3」：速度变为 2/3 → 周期 ×1.5，36s → 54s。 */
  --logo-speed: 54s;
  --cell-w: calc(
    (100cqw - (var(--logo-cols) - 1) * var(--logo-gap)) / var(--logo-cols)
  );
  container-type: inline-size;
  container-name: logowall;
  display: flex;
  flex-direction: column;
  gap: var(--logo-gap);
}
.logo-row { overflow: hidden; }
.logo-track {
  display: flex;
  gap: var(--logo-gap);
  width: max-content;
  /* 行内可用 --marquee-duration 单独覆盖，默认统一走 --logo-speed */
  animation: logo-marquee var(--marquee-duration, var(--logo-speed)) linear infinite;
}
/* 轨道内容含正本 + 副本两份，平移 50% 即回到起点，视觉无缝 */
@keyframes logo-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
/* 奇数行向左（默认方向），偶数行反向即向右 */
.logo-row--ltr .logo-track { animation-direction: reverse; }

/* 悬停整行暂停，方便看清某个 LOGO 并触发单元格的高亮反馈 */
.logo-row:hover .logo-track { animation-play-state: paused; }

.logo-cell {
  flex: 0 0 auto;
  /* 宽度取自容器查询单位计算的 --cell-w */
  width: var(--cell-w);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-sunken);
  padding: 10px;
  overflow: hidden;
  filter: grayscale(1);
  opacity: 0.82;
  transition: filter 0.4s var(--ease-out), opacity 0.4s var(--ease-out),
    border-color 0.3s, transform 0.3s var(--ease-out);
}
.logo-cell img { width: 100%; height: auto; display: block; border-radius: var(--r-sm); }
.logo-cell:hover { filter: none; opacity: 1; border-color: var(--c-brand-2); transform: translateY(-4px); }

/* ============================================================
   页脚品牌区：按钮 + 二维码
   ============================================================ */
.footer-brand-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.footer-qr { display: flex; align-items: center; gap: 12px; }
.footer-qr img {
  width: 96px;
  height: 96px;
  display: block;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  background: #fff;
}
.footer-qr span { color: var(--t-muted); font-size: var(--fs-xs); letter-spacing: 0.1em; }

/* ============================================================
   产品系列列表页（面包屑 + 筛选 + 网格 + 分页）
   ============================================================ */
.pf-section { padding-top: 40px; }
.crumb { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; color: var(--t-muted); font-size: var(--fs-xs); letter-spacing: 0.08em; }
.crumb a { color: var(--t-muted); }
.crumb a:hover { color: var(--t-primary); }
.crumb-sep { opacity: 0.5; }
/* 当前页用 --c-accent（亮色主题自动换成深青 #0e7490，对白底 5.4:1）。
   不能直接用 --c-brand-2：它是品牌亮蓝，亮色主题下没有覆盖，压白底只有 3.8:1。 */
.crumb-cur { color: var(--c-accent); }

.pf-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.pf-count { color: var(--t-muted); font-size: var(--fs-xs); letter-spacing: 0.08em; }
.pf-current { font-size: 20px; font-weight: 600; }

/* 左栏分类树 + 右栏网格（参考洲明产品列表布局） */
.pf-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 30px; align-items: start; }

.pf-side { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 4px; }
.pf-side-all {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 16px; margin-bottom: 8px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface-sunken-soft);
  font-weight: 600; font-size: var(--fs-sm);
  transition: color 0.3s, border-color 0.3s, background 0.3s;
}
.pf-side-all:hover { color: var(--t-primary); border-color: var(--c-brand-2); }
.pf-side-all.is-active { background: var(--fill-strong); border-color: transparent; color: var(--t-on-fill); }

.pf-side-group { padding: 10px 0; border-top: 1px solid var(--line); }
.pf-side-title {
  display: block; padding: 6px 16px;
  color: var(--t-primary); font-weight: 600; font-size: var(--fs-sm); letter-spacing: 0.04em;
}
.pf-side-title.is-active { color: var(--c-brand-2); }
.pf-side-group ul { margin-top: 2px; }
.pf-side-link {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 16px; border-radius: var(--r-sm);
  color: var(--t-muted); font-size: var(--fs-sm);
  transition: background 0.3s, color 0.3s, padding-left 0.3s;
}
.pf-side-link:hover { background: rgba(46, 123, 255, 0.12); color: var(--t-primary); padding-left: 20px; }
.pf-side-link.is-active { background: rgba(46, 123, 255, 0.18); color: var(--c-brand-2); font-weight: 600; }
.pf-side em, .pf-side-all em { font-style: normal; font-size: var(--fs-xs); opacity: 0.7; }

.pf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pf-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--bg-soft);
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s, border-color 0.35s;
}
.pf-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-2); border-color: var(--c-brand-2); }
.pf-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-sunken-soft); }
.pf-media img {
  width: 100%;
  height: 100%;
  /* cover：图片填满媒体区、顶到卡片边缘，卡片自身的圆角 + overflow:hidden
     会把图片顶角裁成弧形（用户要求的"按卡片边缘弧形设计"）。
     产品图为白底居中构图，被裁掉的主要是边缘留白，产品主体保持完整；
     若日后出现主体偏侧的图，可单独用 object-position 微调取景位置。 */
  object-fit: cover;
  object-position: center;
  transition: transform 0.8s var(--ease-out);
}
.pf-card:hover .pf-media img { transform: scale(1.05); }
.pf-body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 22px; flex: 1; }
.pf-name { font-size: 19px; font-weight: 600; line-height: 1.4; }
.pf-spec { color: var(--t-primary); font-size: var(--fs-sm); line-height: 1.6; }
.pf-cat { color: var(--t-muted); font-size: var(--fs-xs); letter-spacing: 0.06em; }
.pf-cta {
  margin-top: auto;
  padding-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--c-brand-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  opacity: 0;
  translate: 0 6px;
  transition: opacity 0.35s, translate 0.35s var(--ease-out);
}
.pf-card:hover .pf-cta { opacity: 1; translate: 0 0; }
.pf-empty { padding: 40px 0; text-align: center; }
/* 副标题 / 系列名可能为空：空元素不占位，避免出现莫名的空行
   （JS 克隆卡片时要靠这两个元素填值，所以始终渲染、由 CSS 决定是否显示） */
.pf-spec:empty, .pf-cat:empty { display: none; }
/* 无限加载底部：与 /cases 的 .cases-foot 同构（按钮只是无 IntersectionObserver 时的兜底） */
.pf-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
}
.pf-status { color: var(--t-muted); font-size: var(--fs-xs); min-height: 1.2em; }
.pf-sentinel { width: 100%; height: 1px; }

.pager { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 46px; flex-wrap: wrap; }
.pager-btn, .pager-num {
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface-sunken-soft);
  color: var(--t-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: color 0.3s, border-color 0.3s, background 0.3s, transform 0.3s var(--ease-out);
}
.pager-btn:hover, .pager-num:hover { color: var(--t-primary); border-color: var(--c-brand-2); transform: translateY(-2px); }
.pager-num.is-active { background: var(--fill-strong); border-color: transparent; color: var(--t-on-fill); }

/* ============================================================
   独立栏目页（关于盛达 / 服务支持 / 联系我们）
   ============================================================ */
.page-block { margin-top: 56px; }
.ct-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ct-card {
  padding: 20px 22px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--bg-soft);
  transition: border-color 0.3s, transform 0.3s var(--ease-out);
}
.ct-card:hover { border-color: var(--c-brand-2); transform: translateY(-4px); }
.ct-label { display: block; color: var(--t-muted); font-size: var(--fs-xs); letter-spacing: 0.1em; }
.ct-value { display: block; margin-top: 8px; font-size: 19px; font-weight: 600; word-break: break-all; }
.ct-card a.ct-value:hover { color: var(--c-brand-2); }

.ct-layout { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 34px; align-items: start; }
.ct-layout .footer-qr { flex-direction: column; }
.ct-layout .footer-qr img { width: 150px; height: 150px; }

/* ============================================================
   服务支持页（/support）—— 版式与内容对标 sdrgb.com/fwzc
   规格（量自参考站）：
     区块标题  28px / 700 / 左对齐
     条款正文  14px / 行高 1.75（≈24.5px）/ 两端对齐 / 悬挂式编号
     热线号码  30px / 700，标签 18px / 700，按钮 16px / 700
     服务内容  三列，列标题 18px，条目 18px / 行高 2
   尺寸一律用 clamp() 相对值，各档宽度平滑收缩，不为每个断点写死像素。
   配色全部走语义令牌，暗色 / 亮色主题自动适配（参考站只有一套浅色）。
   ============================================================ */

/* ---------- 服务热线 + 报修 ---------- */
/* auto-fit + minmax：列数由可用宽度决定，加一张热线卡不用改 CSS */
.sp-hotline-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
/* 热线卡与报修卡：**同一套视觉规格**，合并选择器只写一份。
   2026-10-10 用户报障：第三张（报修卡）原本单独写了一份样式 —— 底色更沉、
   小标题是灰色小字、主文本小一档、还没有悬停反馈，三张卡摆在一起明显不是一套。
   现在统一到同一组规则里，以后调样式只改这一处，不会再各自漂移。
   两者的差异只保留「文案与按钮动作」这种内容层面的不同。 */
.sp-hotline,
.sp-report {
  padding: 24px 22px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--card-bg);
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
  transition: border-color 0.35s, transform 0.4s var(--ease-out), box-shadow 0.4s;
}
.sp-hotline:hover,
.sp-report:hover { border-color: var(--c-brand-2); transform: translateY(-4px); box-shadow: var(--shadow-1); }

/* 小标题：品牌色 + 加粗，与卡片主文本形成明确的层级差 */
.sp-hotline-label,
.sp-report-eyebrow { color: var(--c-accent); font-size: clamp(16px, 0.4vw + 12px, 18px); font-weight: 700; }

/* 主文本：热线号码与报修标题用同一档字号；文案更长的报修标题在窄屏靠 clamp 自行收缩 */
.sp-hotline-num,
.sp-report-title {
  font-size: clamp(22px, 1.2vw + 12px, 30px);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.35;
}
.sp-hotline-action,
.sp-report-action { margin-top: 6px; }

/* ---------- 服务内容（三列） ---------- */
.sp-svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.sp-svc-col {
  padding: 26px 24px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface-sunken-soft);
  transition: border-color 0.35s, transform 0.4s var(--ease-out);
}
.sp-svc-col:hover { border-color: var(--c-brand-2); transform: translateY(-4px); }
.sp-svc-title {
  font-size: clamp(16px, 0.4vw + 12px, 18px);
  font-weight: 600;
  color: var(--t-primary);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.sp-svc-list { margin-top: 14px; display: grid; gap: 4px; }
.sp-svc-item {
  font-size: clamp(15px, 0.3vw + 11px, 18px);
  line-height: 1.9;
  color: var(--t-muted);
}
/* 「>> 」是纯装饰符号，放 CSS 里，不进 DOM（屏幕阅读器不会念出来） */
.sp-svc-item::before { content: ">> "; color: var(--c-accent); }

/* ---------- 售后服务公约 / 售后服务承诺书 ---------- */
.sp-block-title {
  font-size: clamp(22px, 1.5vw + 8px, 28px);
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
  margin-bottom: 20px;
}
/* list-style:none + padding:0 是必须的：<ol> 自带 decimal 序号标记，
   不关掉就会和下面 ::before 的 counter 叠加成「1、1、」。
   序号宽度由 li 的负 text-indent 悬挂，不靠列表的内建缩进。
   不设 max-width：条款铺满内容区宽度（与参考站一致），避免过早折行。 */
.sp-clause-list { display: grid; gap: 6px; list-style: none; padding: 0; counter-reset: clause; }
.sp-clause-item {
  counter-increment: clause;
  font-size: var(--fs-sm);          /* 14px，与参考站一致 */
  line-height: 1.75;                /* ≈24.5px */
  color: var(--t-muted);
  text-align: justify;
  /* 悬挂缩进：序号凸出到左边距，换行顶格 —— 中文条款排版习惯，也与参考站一致 */
  padding-left: 2.1em;
  text-indent: -2.1em;
}
/* counter 在每个列表开头重置，两个区块各自从 1 开始编号 */
.sp-clause-item::before {
  content: counter(clause) "、";
  color: var(--t-primary);
  font-weight: 600;
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 1200px) {
  .mega-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-top { grid-template-columns: 1fr 1.6fr; }
  .footer-contact { grid-column: span 2; }
  .footer-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-gif { display: none; } /* 窄屏下为文案让位 */
  .hero-gif--stack { display: none; } /* 叠加素材位同样让位 */
  .logo-wall { --logo-cols: 4; } /* 改为 flex 轨道后，只需调整可见列数 */
  .pf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .primary-nav { display: none; }
  .nav-burger { display: flex; }
  .adv-grid, .stats-grid, .award-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 窄屏放弃五环排列，恢复顺序平铺 */
  .adv-card, .adv-card:nth-child(4), .adv-card:nth-child(5) { grid-column: auto; }
  /* 产品页：左栏分类树改为顶部横向排列 */
  .pf-layout { grid-template-columns: 1fr; gap: 18px; }
  .pf-side { position: static; flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .pf-side-group { border-top: 0; padding: 0; display: flex; align-items: center; gap: 8px; }
  .pf-side-group ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
  .pf-side-link, .pf-side-title { padding: 6px 14px; border: 1px solid var(--line); border-radius: var(--r-pill); }
  .pf-side-link:hover { padding-left: 14px; }
  .pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .solution-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .solution-grid .sol-card[data-size="lg"] { grid-column: span 2; }
  .case-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .news-layout { grid-template-columns: 1fr; }
  .timeline-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .wrap { width: min(100% - 32px, var(--wrap)); }
  .section { padding: 66px 0; }
  .hero-body { padding: 92px 0 70px; }
  .hero-stat-row { gap: 26px; }
  .vr-strip { grid-template-columns: 1fr; }
  .vr-card { min-height: 0; padding: 20px; gap: 14px; }
  /* 缩略图与标题已改用 clamp() 自适应，这里不再写死像素 */
  .vr-thumb { width: clamp(96px, 26vw, 208px); }
  .logo-wall { --logo-cols: 3; }
  .adv-grid, .stats-grid, .award-strip, .solution-grid, .case-grid, .timeline-grid { grid-template-columns: 1fr; }
  .adv-grid { grid-auto-rows: auto; } /* 单列时按内容自然高度，不强制等高 */
  .solution-grid .sol-card[data-size="lg"] { grid-column: span 1; }
  .stat-cell { border-right: 0; border-bottom: 1px solid var(--line); }
  .news-row { grid-template-columns: 1fr; gap: 6px; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-contact { grid-column: span 1; }
  .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .side-rail { gap: 8px; right: 10px; }
  .side-ico { width: 38px; height: 38px; }
  .pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-cta { opacity: 1; translate: 0 0; } /* 触屏无悬停，常驻显示 */
  .ct-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-layout { grid-template-columns: 1fr; gap: 24px; }
}




/* ---------- 详情页 ---------- */
.detail-media { margin: 22px 0; }
.detail-media img { width: 100%; height: auto; border-radius: var(--r-lg); }
.detail-body h1 { font-size: var(--fs-h2); margin-top: 18px; }
.detail-summary { line-height: 1.9; margin-top: 14px; }
.detail-tags .eyebrow { display: inline-block; margin-right: 8px; }

/* ---------- 详情页相关推荐 ---------- */
.detail-related { margin-top: clamp(32px, 4vw, 56px); }
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(12px, 1.6vw, 20px);
  margin-top: 16px;
}
.related-card { display: block; padding: 0; overflow: hidden; }
.related-card img { width: 100%; height: auto; }
.related-name {
  display: block;
  padding: 10px 12px;
  font-size: var(--fs-sm);
  color: var(--t-primary);
}