/* ============================================================







   ARIFU 官网 V2 · 统一设计系统（design-system.css）







   依据《ARIFU 官网改版实施方案》第 3 章全站统一规范







   版本：V1.0 · 2026-08-16







   ============================================================ *//* ---------- 1. 色彩变量（工业数字感配色，依据《工业数字感设计指导方案》第 2 章） ---------- */:root {







  --c-primary:        #0E5A8C;   /* 科技蓝（对齐竞品亮蓝）：主色 / hero / 页头页脚 */







  --c-primary-hover:  #12689E;   /* 亮深蓝：分区背景 / 卡片底 / 主色悬停 */







  --c-accent:         #00D4FF;   /* 电光青：关键数字发光 / 主按钮 / 数字高亮 */







  --c-positive:       #16A3A3;   /* 碧绿青：达标 / 去除率 / 洁净语义 */







  --c-highlight:      #5FD0C5;   /* 高亮青绿：波纹纹理 / 渐变过渡 */







  --c-warn:           #C47B17;   /* 注意（仅传统方案问题，不满页使用） */







  --c-page-bg:        #E8EDF2;   /* 浅灰底：大段参数 / 案例 / 报告承载区 */







  --c-card:           #FFFFFF;   /* 卡片 */







  --c-card-border:    #D5DEE7;   /* 卡片 1px 边框 */







  --c-text:           #1F2D3D;   /* 中性深灰：正文 */







  --c-text-muted:     #5B6B7C;   /* 辅助文字（图注、来源，对比度 ≥ 4.5:1） */







  --c-disabled:       #8A939C;   /* 禁用 / 即将（不进主卡片） */















  /* ---------- 2. 字号系统（第 3.2 章） ----------







    原则：限制最小字号不小于"现在显示的字号"，







    最大字号不夸大。整体观感：所有字够大易读，大标题保持视觉冲击。 */







  --h1:        clamp(38px, 4.6vw, 52px);   /* 大标题上限 60px（不夸大） */







  --h1-w:      650;







  --h1-lh:     1.2;







  --h2:        clamp(26px, 3vw, 36px); /* 二级标题上限 40px */







  --h2-w:      600;







  --h2-lh:     1.3;







  --h3:        clamp(19px, 2vw, 22px); /* 三级标题上限 24px */







  --h3-w:      600;







  --h3-lh:     1.4;







  --lead:      clamp(22px, 2.3vw, 26px);  /* 引导文：20→28（×1.4） */







  --lead-w:    400;







  --lead-lh:   1.7;







  --body:      20px;                    /* 正文：18→24（×1.33） */







  --body-w:    400;







  --body-lh:   1.7;







  --meta:      17px;                    /* 辅助字：16→22（1.5×） */







  --meta-lh:   1.55;







  --stat:      clamp(36px, 4.4vw, 48px);  /* 大数字上限 56px（不夸大） */







  --stat-w:    600;







  --stat-lh:   1.0;







  --stat-unit: 16px;







  --stat-unit-w: 500;







  --stat-unit-lh: 1.3;







  --nav:       17px;                    /* 导航：16→22（1.5×） */







  --nav-w:     500;







  --nav-lh:    1;







  --btn:       18px;                    /* 按钮：16→22（1.5×） */







  --btn-w:     600;







  --btn-lh:    1;







  --foot:      15px;                    /* 页脚：14→18 */







  --foot-w:    400;







  --foot-lh:   1.5;















  /* ---------- 3. 栅格与间距（第 3.1 章） ----------







     满屏铺满：gutter 缩小让内容真的贴边 */







  --max-w:      1280px;   内容最大宽度（标准网站宽度） */







  --gutter:     16px;     /* 左右边距 */







  --sec-pad:    80px;     /* 区块上下内边距 */







  --card-pad:   32px;







  --radius:     12px;







  --body-measure: 1100px;















  /* ---------- 4. 按钮 ---------- */







  --btn-radius: 8px;







}/* ---------- 移动端覆盖（同步放大 1.5×） ---------- */@media (max-width: 768px) {:root {







    --gutter: 24px;







    --sec-pad: 72px;







    --card-pad: 28px;







  }}/* ============================================================







   基础重置







   ============================================================ */*, *::before, *::after { box-sizing: border-box; }html { -webkit-text-size-adjust: 100%; }body {







  margin: 0;







  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, sans-serif;







  font-size: var(--body);







  font-weight: var(--body-w);







  line-height: var(--body-lh);







  color: var(--c-text);







  background: var(--c-card);







  -webkit-font-smoothing: antialiased;







}h1, h2, h3, h4 { margin: 0; font-weight: var(--h2-w); color: var(--c-text); }h1 { font-size: var(--h1); font-weight: var(--h1-w); line-height: var(--h1-lh); }h2 { font-size: var(--h2); line-height: var(--h2-lh); }h3 { font-size: var(--h3); line-height: var(--h3-lh); }p { margin: 0; }a { color: var(--c-primary); text-decoration: none; }a:hover { color: var(--c-primary-hover); }img, video, iframe, embed, object {







  max-width: 100%;







  height: auto;







  display: block;







}/* 超长图（如手机竖拍照片）自动限制高度，避免顶天立地撑破页面 */img {







  max-height: none;







}ul, ol { margin: 0; padding: 0; list-style: none; }/* 文字自动换行兜底：防止超长文字/URL/代码撑破容器导致溢出 */body, main, .container, .prose, section, article, p, li, h1, h2, h3, h4, h5, h6, div, td, th {







  overflow-wrap: break-word;







  word-wrap: break-word;







  word-break: break-word;







}/* 表格兜底：超宽时内部横向滚动，不撑破页面 */table { max-width: 100%; }/* 正文标题前禁止 emoji 由内容层保证；此处不额外加伪元素装饰 *//* ============================================================







   布局容器







   ============================================================ */.container {







  width: 100%;







  max-width: var(--max-w);







  margin: 0 auto;







  padding-left: var(--gutter);







  padding-right: var(--gutter);







}.section { padding-top: var(--sec-pad); padding-bottom: var(--sec-pad); border-top: 1px solid var(--c-card-border); }.section--alt { background: var(--c-page-bg); }/* 正文栏（长文限宽，避免通栏） */.prose { max-width: var(--body-measure); }/* main 正文区：左右留边距 + 强制换行（文字/图片不溢出边界） */main {







  overflow-wrap: break-word;







  word-wrap: break-word;







  word-break: break-word;







  overflow-x: hidden;







}/* 正文内所有内容：超长文字/URL 强制换行 */main p, main h1, main h2, main h3, main h4, main h5, main h6,







main span, main li, main td, main th, main a, main div {







  overflow-wrap: break-word;







  word-wrap: break-word;







  word-break: break-word;







}/* 图片自动缩放到边界内 + 居中 */main img, main video, main iframe {







  max-width: 100%;







  height: auto;







  display: block;







  margin-left: auto;







  margin-right: auto;







}/* 两栏：左文右图 6/6，左 7 右 5 */.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }.grid-2--75 { display: grid; grid-template-columns: 7fr 5fr; gap: 40px; align-items: start; }/* 三栏卡片：桌面 3 / 平板 2 / 手机 1 */.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }@media (max-width: 992px) {.grid-2, .grid-2--75 { grid-template-columns: 1fr; }.grid-3 { grid-template-columns: repeat(2, 1fr); }}@media (max-width: 640px) {.grid-3 { grid-template-columns: 1fr; }}/* ============================================================







   响应式：自动适配屏幕与手机铺满







   ============================================================ *//* 平板：适度收紧内边距 */@media (max-width: 992px) {:root {







    --gutter: 20px;







    --sec-pad: 64px;







  }}/* 手机：内容铺满、边距最小化、字号自动缩放 */@media (max-width: 640px) {:root {







    --gutter: 20px;







    --sec-pad: 56px;







    --card-pad: 24px;







    --body-measure: 100%;







  }.container {







    padding-left: var(--gutter);







    padding-right: var(--gutter);







  }/* 手机端 hero 内边距收紧 */.hero { padding-top: 40px; padding-bottom: 40px; }/* 手机端两栏/三栏间距收紧 */.grid-2, .grid-2--75 { gap: 24px; }.grid-3 { gap: 16px; }/* 手机端表格允许横向滚动，避免溢出 */.data-table { display: block; overflow-x: auto; white-space: nowrap; }/* 手机端 hero 数据条换行更紧凑 */.hero-stats { gap: 16px; }.hero-stat-num { font-size: 24px; }.site-logo { font-size: 20px; }.site-header .container { height: 60px; }}/* 大屏（≥1280px）让容器内边距加大、导航更舒展 */@media (min-width: 1280px) {:root { --gutter: 24px; }.site-nav { gap: 24px; }}@media (min-width: 1600px) {:root { --gutter: 28px; }.site-nav { gap: 24px; }}/* ============================================================







   卡片







   ============================================================ */.card {







  background: var(--c-card);







  border: 1px solid var(--c-card-border);







  border-radius: var(--radius);







  padding: var(--card-pad);







}.card h3 { margin-bottom: 12px; }a.card { color: var(--c-text); display: block; }a.card:hover { border-color: var(--c-primary); }/* Hero 区块 */.hero {







  padding-top: 88px;







  padding-bottom: 88px;







  max-width: 100% !important;  /* hero 满屏，不受正文 760px 限宽 */







}.hero .container {







  margin: 0 auto;







}/* Hero 数据条（首页证据数据，最多 3 项） */.hero-stats { align-items: flex-start; }.hero-stats > div { display: flex; flex-direction: column; gap: 4px; }.hero-stat-num {







  font-size: 30px;







  font-weight: 700;







  line-height: 1.1;







  color: var(--c-accent);







  letter-spacing: -0.01em;







  text-shadow: 0 0 10px rgba(0, 212, 255, 0.5), 0 0 24px rgba(0, 212, 255, 0.22);







}.hero-stat-label {







  font-size: var(--meta);







  line-height: var(--meta-lh);







  color: var(--c-text-muted);







}/* 媒体占位（素材核查入库前的临时占位，正式上线前必须替换） */.media-placeholder {







  display: flex;







  align-items: center;







  justify-content: center;







  min-height: 220px;







  background: var(--c-page-bg);







  border: 1px dashed var(--c-card-border);







  border-radius: var(--radius);







  color: var(--c-text-muted);







  font-size: var(--meta);







}.hero-media .media-placeholder { min-height: 320px; }.hero-media img {







  width: 100%;







  height: auto;







  border-radius: var(--radius);







  object-fit: cover;







  display: block;







}/* ============================================================







   按钮（第 3.4 章，全站只允许 3 种）







   ============================================================ */.btn {







  display: inline-flex;







  align-items: center;







  justify-content: center;







  gap: 8px;







  font-size: var(--btn);







  font-weight: var(--btn-w);







  line-height: var(--btn-lh);







  border-radius: var(--btn-radius);







  padding: 14px 28px;







  cursor: pointer;







  border: 1px solid transparent;







  transition: background .15s, color .15s, border-color .15s;







  text-align: center;







}.btn--primary {







  background: var(--c-primary);







  color: #fff;







}.btn--primary:hover { background: var(--c-primary-hover); color: #fff; }.btn--secondary {







  background: #fff;







  color: var(--c-primary);







  border-color: var(--c-primary);







}.btn--secondary:hover { background: var(--c-page-bg); }.btn--link {







  color: var(--c-primary);







  padding: 4px 0;







  gap: 4px;







  background: none;







  border: none;







}content: "→";















/* ============================================================







   文字样式







   ============================================================ */







.lead { font-size: var(--lead); line-height: var(--lead-lh); color: var(--c-text); }.meta { font-size: var(--meta); line-height: var(--meta-lh); color: var(--c-text-muted); }/* 标签（不得与 H2 抢权重） */.tag {







  display: inline-block;







  font-size: 13px;







  line-height: 1;







  padding: 4px 10px;







  border-radius: 20px;







  background: var(--c-page-bg);







  color: var(--c-text-muted);







  border: 1px solid var(--c-card-border);







}.tag--status-verified { background: rgba(22, 163, 163, .12); color: var(--c-positive); border-color: rgba(22, 163, 163, .35); }.tag--status-debug   { background: #fdf3e7; color: var(--c-warn); border-color: #f0dcbf; }.tag--status-plan    { background: var(--c-page-bg); color: var(--c-text-muted); border-color: var(--c-card-border); }/* 大数字（一屏最多 4 个）—— 电光青 + 发光，工业数字感 */.stat {







  font-size: var(--stat);







  font-weight: var(--stat-w);







  line-height: var(--stat-lh);







  color: var(--c-accent);







  text-shadow: 0 0 12px rgba(0, 212, 255, 0.55), 0 0 28px rgba(0, 212, 255, 0.25);







}.stat__unit { font-size: var(--stat-unit); font-weight: var(--stat-unit-w); color: var(--c-text-muted); margin-left: 4px; }/* 来源行（表格/数据下方必须带来源） */.src { font-size: var(--meta); color: var(--c-text-muted); }/* ============================================================







   表格







   ============================================================ */table.data-table {







  width: 100%;







  border-collapse: collapse;







  background: var(--c-card);







  border: 1px solid var(--c-card-border);







  border-radius: var(--radius);







  overflow: hidden;







}.data-table th, .data-table td {







  text-align: left;







  padding: 14px 16px;







  border-bottom: 1px solid var(--c-card-border);







  font-size: 16px;







}.data-table thead th {







  background: var(--c-page-bg);







  font-weight: 600;







  color: var(--c-text);







}.data-table tr:last-child td { border-bottom: none; }/* ============================================================







   顶栏（第 3.8 章）







   ============================================================ */.site-header {







  position: sticky;







  top: 0;







  z-index: 100;







  background: #fff;







  border-bottom: 1px solid var(--c-card-border);







}.site-header .container {







  display: flex;







  align-items: center;







  justify-content: space-between;







  height: 72px;







}.site-logo { font-size: 22px; font-weight: 700; color: var(--c-primary); }.site-nav { display: flex; align-items: center; gap: 24px; list-style: none; }.site-nav > li { position: relative; }.site-nav > li > a {







  display: inline-flex;







  align-items: center;







  gap: 4px;







  font-size: var(--nav);







  font-weight: var(--nav-w);







  color: var(--c-text);







  padding: 8px 0;







  white-space: nowrap;







  line-height: 1.15;







}.site-nav > li > a {







  position: relative;







  transition: color .2s ease;







}/* 科技蓝下划线：从中间向两侧渐显 */.site-nav > li > a::before {







  content: "";







  position: absolute;







  left: 0;







  bottom: 2px;







  width: 100%;







  height: 2px;







  border-radius: 2px;







  background: linear-gradient(90deg, var(--c-primary), #00D4FF);







  transform: scaleX(0);







  transform-origin: center;







  transition: transform .25s ease;







}.site-nav > li > a:hover { color: var(--c-primary); }.site-nav > li > a:hover::before,







.site-nav > li.active > a::before { transform: scaleX(1); }/* 下拉箭头（有子菜单的一级项） */.site-nav > li.has-submenu > a::after {







  content: "";







  width: 0; height: 0;







  border-left: 4px solid transparent;







  border-right: 4px solid transparent;







  border-top: 5px solid var(--c-text-muted);







  margin-left: 2px;







}/* 下拉菜单容器（桌面默认隐藏，点击/自动展开时显示） */.site-nav .submenu {







  position: absolute;







  top: 100%;







  left: 0;







  min-width: 280px;







  padding: 20px 0;







  background: #fff;







  border: 1px solid var(--c-card-border);







  border-radius: 12px;







  box-shadow: 0 16px 40px rgba(10, 61, 92, 0.18);







  opacity: 0;







  visibility: hidden;







  transform: translateY(8px);







  transition: opacity .18s ease, transform .18s ease, visibility .18s;







  z-index: 210;







}/* 展开状态：hover 悬停 或 点击 .open 时显示下拉 */.site-nav > li.has-submenu:hover > .submenu,







.site-nav > li.has-submenu:focus-within > .submenu,







.site-nav > li.has-submenu.open > .submenu {







  opacity: 1;







  visibility: visible;







  transform: translateY(0);







  pointer-events: auto;







}/* 默认隐藏时禁止点击穿透 */.site-nav .submenu {







  pointer-events: none;







}.site-nav .submenu a {







  display: block;







  padding: 18px 30px;







  font-size: 16px;







  font-weight: 500;







  color: var(--c-text);







  line-height: 1.5;







  margin: 8px 14px;







  border-radius: 6px;







  transition: background .15s, color .15s;







}.site-nav .submenu a:hover,







.site-nav .submenu a.active {







  color: var(--c-primary);







  background: var(--c-page-bg);







  font-weight: 600;







}.site-nav .submenu a.active {







  background: rgba(0, 212, 255, .14);







}/* 分组标签（按污水性质、按工艺等）更清晰 */.site-nav .submenu .submenu-group-label {







  padding: 20px 30px 10px;







  font-size: 13px;







  font-weight: 700;







  color: var(--c-text-muted);







  letter-spacing: 1px;







  text-transform: uppercase;







  cursor: default;







  border-top: 1px solid var(--c-card-border);







  margin-top: 14px;







}.site-nav .submenu .submenu-group-label:first-child {







  border-top: none;







  margin-top: 0;







  padding-top: 8px;







}/* 避免最后一个下拉项溢出右边界 */.site-nav > li:last-child .submenu { left: auto; right: 0; }/* ===== 三级子菜单（分组 + 组内项）===== *//* 有三级时下拉容器加宽，支持多列分组 */.site-nav .submenu {







  min-width: 300px;







}.site-nav .submenu .submenu-group {







  padding: 4px 0;







}.site-nav .submenu .submenu-group .submenu-group-label {







  padding: 14px 30px 8px;







  font-size: 13px;







  font-weight: 700;







  color: var(--c-text-muted);







  letter-spacing: 1px;







  cursor: default;







  border-top: 1px solid var(--c-card-border);







  margin-top: 10px;







}.site-nav .submenu .submenu-group:first-child .submenu-group-label {







  border-top: none;







  margin-top: 0;







  padding-top: 8px;







}/* 可点击的分组标题（跳转总览页） */.site-nav .submenu .submenu-group a.submenu-group-link {







  display: block;







  text-decoration: none;







  color: var(--c-text-muted);







  cursor: pointer;







  transition: color .15s;







}.site-nav .submenu .submenu-group a.submenu-group-link:hover {







  color: var(--c-primary);







}/* 三级链接：比二级项缩进，字号略小 */.site-nav .submenu .submenu-group .submenu-item {







  display: block;







  padding: 12px 30px 12px 46px;







  font-size: 15px;







  font-weight: 400;







  color: var(--c-text);







  line-height: 1.4;







  margin: 2px 14px;







  border-radius: 6px;







  transition: background .15s, color .15s;







}.site-nav .submenu .submenu-group .submenu-item:hover,







.site-nav .submenu .submenu-group .submenu-item.active {







  color: var(--c-primary);







  background: var(--c-page-bg);







  font-weight: 600;







}.site-nav .submenu .submenu-group .submenu-item.active {







  background: rgba(0, 212, 255, .14);







}/* 移动端抽屉里的三级分组 */.nav-drawer nav .submenu-group {







  margin-left: 16px;







  border-left: 1px solid var(--c-card-border);







  padding-left: 8px;







  margin-top: 4px;







}.nav-drawer nav .submenu-group .submenu-item {







  display: flex;







  align-items: center;







  min-height: 44px;







  padding: 8px 0 8px 8px;







  font-size: 15px;







  color: var(--c-text);







}/* 当前页所在一级项：主文字加底色 */.site-nav > li.active > a {







  color: var(--c-primary);







  font-weight: 700;







}.site-nav > li.active > a::after {







  border-top-color: var(--c-primary);







}.header-cta { margin-left: 12px; }/* 汉堡按钮（桌面隐藏） */.nav-toggle {







  display: none;







  flex-direction: column;







  justify-content: center;







  align-items: center;







  gap: 4px;







  width: 44px;







  height: 44px;







  background: none;







  border: none;







  cursor: pointer;







  padding: 10px;







  box-sizing: border-box;







}.nav-toggle span {







  display: block;







  width: 22px;







  height: 2px;







  background: var(--c-text);







}/* 移动端抽屉 */.nav-drawer {







  position: fixed;







  top: 0; right: 0;







  width: 280px;







  height: 100vh;







  background: #fff;







  box-shadow: -8px 0 24px rgba(0,0,0,.08);







  z-index: 300;







  padding: 72px 24px 24px;







  transform: translateX(100%);







  transition: transform .25s ease;







}.nav-drawer.is-open { transform: translateX(0); }.nav-drawer nav { display: flex; flex-direction: column; gap: 8px; }.nav-drawer nav a {







  display: block;







  font-size: 16px;







  font-weight: 500;







  padding: 12px 0;







  border-bottom: 1px solid var(--c-card-border);







  color: var(--c-text);







  min-height: 44px;







  line-height: 1.5;







}.nav-drawer nav a.btn { margin-top: 16px; border-bottom: none; justify-content: center; }.nav-drawer nav .submenu-group-label {







  margin-top: 12px;







  font-size: 13px;







  font-weight: 700;







  color: var(--c-text-muted);







  letter-spacing: .5px;







  padding: 4px 0;







}@media (max-width: 1240px) {.site-nav { display: none; }.header-cta { display: none; }.nav-toggle { display: flex; }}/* ============================================================







   页脚（第 3.5 章，4 列）







   ============================================================ */.site-footer {







  background: #0E5A8C;







  color: #cbd5dc;







  font-size: var(--foot);







  line-height: var(--foot-lh);







  padding: 56px 0 32px;







}.site-footer a { color: #cbd5dc; }.site-footer a:hover { color: var(--c-highlight); }.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }.footer-col h4 { color: #fff; font-size: 15px; margin-bottom: 16px; }.footer-col li { margin-bottom: 10px; }.footer-col li a {
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
  padding: 0 2px;
}.footer-bottom {







  margin-top: 40px;







  padding-top: 20px;







  border-top: 1px solid rgba(255,255,255,.18);







  display: flex;







  flex-wrap: wrap;







  gap: 16px;







  justify-content: space-between;







  font-size: var(--foot);







}@media (max-width: 768px) {.footer-grid { grid-template-columns: 1fr 1fr; }}/* ============================================================







   视频播放器（第 3.7 章，统一皮肤）







   ============================================================ */.video-wrap {







  position: relative;







  width: 100%;







  aspect-ratio: 16 / 9;







  background: #000;







  border-radius: 10px;







  overflow: hidden;







}.video-wrap video { width: 100%; height: 100%; object-fit: cover; }.video-cover {







  position: absolute; inset: 0;







  display: flex; align-items: center; justify-content: center;







  cursor: pointer;







}.video-cover img { width: 100%; height: 100%; object-fit: cover; }.video-play {







  position: absolute;







  width: 64px; height: 64px;







  border-radius: 50%;







  background: rgba(0,0,0,.55);







  color: #fff;







  display: flex; align-items: center; justify-content: center;







  font-size: 24px;







}.video-meta {







  position: absolute;







  left: 12px; bottom: 12px;







  display: flex; gap: 8px; align-items: center;







}.video-meta .tag { background: rgba(0,0,0,.6); color: #fff; border: none; }/* ============================================================







   表单（第 3.4 章，三级意向）







   ============================================================ */.form-group { margin-bottom: 20px; }.form-group label { display: block; font-size: 15px; font-weight: 500; margin-bottom: 6px; }.form-group input,







.form-group select,







.form-group textarea {







  width: 100%;







  padding: 12px 14px;







  font-size: 16px;







  border: 1px solid var(--c-card-border);







  border-radius: var(--btn-radius);







  font-family: inherit;







  color: var(--c-text);







}.form-group input:focus,







.form-group select:focus,







.form-group textarea:focus {







  outline: none;







  border-color: var(--c-primary);







}/* ============================================================







   浮层（第 3.8 章：仅「联系」+「回顶」）







   ============================================================ */.float-panel {







  position: fixed;







  right: 24px; bottom: 24px;







  z-index: 200;







  display: flex;







  flex-direction: column;







  gap: 12px;







}.float-btn {







  width: 52px; height: 52px;







  border-radius: 50%;







  background: var(--c-primary);







  color: #fff;







  display: flex; align-items: center; justify-content: center;







  cursor: pointer;







  border: none;







  box-shadow: 0 4px 12px rgba(10,61,92,.25);







  font-size: 20px;







}.float-btn:hover { background: var(--c-primary-hover); }.float-backtop { display: none; }/* 滚动超 1.5 屏后由 JS 显示 */.float-backtop.show { display: flex; }/* ============================================================







   无障碍：对比度与焦点







   ============================================================ */a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {







  outline: 2px solid var(--c-primary);







  outline-offset: 2px;







}/* ===== 首页量化数据卡片（科技感） ===== */.stat-grid {







  display: grid;







  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));







  gap: 16px;







  margin: 32px 0;







}.stat-card {







  background: linear-gradient(135deg, #0E5A8C, #12689E);







  color: #fff;







  border-radius: 12px;







  padding: 24px 20px;







  text-align: center;







  box-shadow: 0 8px 24px rgba(10, 61, 92, 0.25);







  position: relative;







  overflow: hidden;







}.stat-card::before {







  content: "";







  position: absolute;







  top: -50%;







  right: -30%;







  width: 120px;







  height: 120px;







  background: rgba(0, 212, 255, 0.25);







  border-radius: 50%;







  filter: blur(8px);







}.stat-card strong {







  display: block;







  font-size: 34px;







  font-weight: 800;







  line-height: 1.1;







  color: #00D4FF;







  letter-spacing: -0.5px;







  white-space: nowrap;







}.stat-card span {







  display: block;







  margin-top: 10px;







  font-size: 14px;







  color: rgba(255, 255, 255, 0.85);







  line-height: 1.4;







}/* 首页副标题 */.hero-sub {







  font-size: 20px;







  color: var(--c-text-muted);







  line-height: 1.6;







}/* ============================================================







   通用充实化组件（全站统一，2026-08 新增）







   ============================================================ *//* 区块标题组 */.section-head { margin-bottom: 32px; }.section-head .section-tag { margin-bottom: 12px; }.section-head h2 { margin-bottom: 12px; }.section-head .section-sub { margin-top: 0; }.section-tag {







  display: inline-block;







  font-size: 13px;







  letter-spacing: .08em;







  text-transform: uppercase;







  color: var(--c-accent);







  font-weight: 700;







}.section-sub {







  font-size: var(--lead);







  line-height: var(--lead-lh);







  color: var(--c-text-muted);







}/* Hero 图文/视频双栏 */.hero-grid {







  display: grid;







  grid-template-columns: 1.05fr .95fr;







  gap: 48px;







  align-items: center;







}.hero-text h1 { margin: 12px 0 16px; }.hero-text .lead { margin: 0; }.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }.hero-media video {







  width: 100%;







  height: auto;







  border-radius: var(--radius);







  box-shadow: 0 16px 40px rgba(11, 58, 91, .22);







  display: block;







  aspect-ratio: 16 / 10;







  object-fit: cover;







  background: #061a2b;







}/* 卡片网格（产品系列/方案/场景） */.card-grid {







  display: grid;







  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));







  gap: 20px;







}a.card--link {







  display: flex;







  flex-direction: column;







  gap: 8px;







  text-decoration: none;







  transition: transform .18s, box-shadow .18s, border-color .18s;







}a.card--link:hover {







  transform: translateY(-4px);







  box-shadow: 0 16px 36px rgba(11, 58, 91, .14);







  border-color: var(--c-accent);







}.card-badge {







  display: inline-block;







  align-self: flex-start;







  font-size: 12px;







  font-weight: 800;







  letter-spacing: .06em;







  color: var(--c-accent);







  background: rgba(0, 212, 255, .10);







  border: 1px solid rgba(0, 212, 255, .30);







  border-radius: 20px;







  padding: 3px 12px;







}.card--link h3 { margin: 4px 0 0; font-size: 24px; }.card-pos { color: var(--c-text-muted); font-size: var(--meta); margin: 0; }.card-list { margin: 4px 0; padding-left: 0; list-style: none; }.card-list li { font-size: 15px; line-height: 1.6; color: var(--c-text); }content: "· ";







.card-app {







  margin-top: auto;







  font-size: 13px;







  color: var(--c-text-muted);







  padding-top: 8px;







  border-top: 1px solid var(--c-card-border);







}.card-more { font-size: 14px; font-weight: 700; color: var(--c-primary); }/* 图文/视频双栏（工程实拍等） */.media-grid {







  display: grid;







  grid-template-columns: 1fr 1fr;







  gap: 24px;







}.media-grid figure { margin: 0; }.media-grid img, .media-grid video {







  width: 100%;







  height: auto;







  border-radius: var(--radius);







  display: block;







  box-shadow: 0 10px 28px rgba(11, 58, 91, .14);







}.media-grid video { background: #061a2b; aspect-ratio: 16 / 10; object-fit: cover; }.media-grid figcaption {







  margin-top: 10px;







  font-size: var(--meta);







  color: var(--c-text-muted);







  text-align: center;







}/* 承诺/清单列表 */.commit-list {







  list-style: none;







  padding: 0;







  margin: 0;







  display: flex;







  flex-direction: column;







  gap: 16px;







}.commit-list li {







  padding: 16px 20px;







  background: var(--c-card);







  border: 1px solid var(--c-card-border);







  border-left: 3px solid var(--c-accent);







  border-radius: var(--radius);







  line-height: 1.7;







}.commit-list strong { color: var(--c-primary); }/* 响应式 */@media (max-width: 992px) {.hero-grid { grid-template-columns: 1fr; gap: 24px; }.media-grid { grid-template-columns: 1fr; }}/* ===== 首页专用样式 ===== */.hero {







  padding: 72px 0 64px;







  background: linear-gradient(135deg, #0E5A8C 0%, #12689E 100%);







  color: #fff;







}.hero-inner {







  max-width: none;







}.hero h1 {







  color: #fff;







  font-size: 44px;







  line-height: 1.2;







  font-weight: 800;







  margin: 0;







}.hero-sub {







  color: rgba(255,255,255,.85);







  font-size: 19px;







  line-height: 1.7;







  margin-top: 20px;







}.hero-cta {







  margin-top: 32px;







  display: flex;







  gap: 12px;







  flex-wrap: wrap;







}.btn--lg {







  padding: 14px 28px;







  font-size: 16px;







}.btn--ghost {







  background: transparent;







  color: #fff;







  border: 1px solid rgba(255,255,255,.6);







}.btn--ghost:hover {







  background: rgba(255,255,255,.12);







  border-color: #fff;







}.stats-band {







  padding: 32px 0;







  background: #fff;







  border-bottom: 1px solid var(--c-card-border);







}.stats-grid {







  display: grid;







  grid-template-columns: repeat(4, 1fr);







  gap: 24px;







}.stat-num {







  font-size: 32px;







  font-weight: 800;







  color: var(--c-primary);







  line-height: 1.1;







}.stat-label {







  font-size: 14px;







  color: var(--c-text-muted);







  margin-top: 6px;







}.section-title {







  font-size: 28px;







  font-weight: 700;







  margin: 0 0 8px;







}.grid-4 {







  display: grid;







  grid-template-columns: repeat(4, 1fr);







  gap: 16px;







}.card-link {







  display: block;







  text-decoration: none;







  color: inherit;







  transition: transform .15s, box-shadow .15s;







}.card-link:hover {







  transform: translateY(-3px);







  box-shadow: 0 12px 28px rgba(10,61,92,.12);







}.video-card video {







  background: #000;







  aspect-ratio: 16/9;







  object-fit: cover;







}.cta-band {







  background: linear-gradient(135deg, #0E5A8C 0%, #12689E 100%);







  padding: 64px 0;







}@media (max-width: 900px) {.stats-grid { grid-template-columns: repeat(2, 1fr); }.grid-4 { grid-template-columns: repeat(2, 1fr); }.hero h1 { font-size: 32px; }}@media (max-width: 560px) {.stats-grid { grid-template-columns: 1fr; }.grid-4 { grid-template-columns: 1fr; }}/* ===== 修复 .nav-drawer 桌面端默认隐藏 ===== */.nav-drawer {







  display: none;







}.nav-drawer.is-open {







  display: block;







}@media (min-width: 900px) {.nav-drawer,







  .nav-drawer.is-open {







    display: none !important;







  }}/* ============================================================



   V2 增强：导航图文卡片（图片/图标 + 标题 + 一句话说明，竞品 式）



   ============================================================ *//* 移动端抽屉 *//* ============================================================



   V2 增强：产品卡片顶部图片（竞品 式产品展示）



   ============================================================ */a.card--link { overflow: hidden; }a.card--link .card-img {



  display: block;



  width: 100%;



  height: 172px;



  object-fit: cover;



  flex: 0 0 auto;



  margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) 18px calc(-1 * var(--card-pad));



  border-radius: 11px 11px 0 0;



  background: var(--c-page-bg, #f2f6fa);



}@media (max-width: 768px) {a.card--link .card-img { height: 150px; }}/* ============================================================



   V2 增强：视频中等窗口弹窗播放（竞品 式轻量观看）



   ============================================================ */.video-modal {



  position: fixed;



  inset: 0;



  z-index: 9990;



  background: rgba(13, 20, 36, .78);



  display: flex;



  align-items: center;



  justify-content: center;



  padding: 16px;



}.video-modal-box {



  position: relative;



  width: min(720px, 94vw);



  background: #000;



  border-radius: 12px;



  overflow: hidden;



  box-shadow: 0 24px 70px rgba(0, 0, 0, .45);



}.video-modal-box video { display: block; width: 100%; aspect-ratio: 16/9; background: #000; }.video-modal-close {



  position: absolute;



  top: 10px;



  right: 10px;



  z-index: 2;



  width: 32px;



  height: 32px;



  border-radius: 50%;



  border: none;



  background: rgba(255, 255, 255, .92);



  color: #0d1424;



  font-size: 20px;



  line-height: 1;



  cursor: pointer;



  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);



}.video-modal-close:hover { background: #fff; }/* ============================================================



   V2 增强：案例表格排列（竞品 式行式表格）



   ============================================================ */.case-table {



  width: 100%;



  border-collapse: separate;



  border-spacing: 0;



  font-size: 14px;



  background: #fff;



  border: 1px solid var(--c-card-border, #e4ecf3);



  border-radius: 12px;



  overflow: hidden;



  box-shadow: 0 4px 24px rgba(15, 42, 66, .06);



}.case-table th {



  text-align: left;



  padding: 14px 18px;



  background: var(--c-page-bg, #f5f8fb);



  font-weight: 600;



  color: var(--c-text-muted, #6b7a8a);



  font-size: 13px;



  letter-spacing: .02em;



  border-bottom: 1px solid var(--c-card-border, #e4ecf3);



  white-space: nowrap;



}.case-table td {



  padding: 14px 18px;



  border-bottom: 1px solid var(--c-card-border, #e4ecf3);



  vertical-align: middle;



  color: var(--c-text, #12233a);



}.case-table tbody tr:last-child td { border-bottom: none; }.case-table tbody tr { transition: background .15s; }.case-table tbody tr:hover { background: #f8fafc; }.case-table td.case-name { white-space: nowrap; }.case-table .case-name-inner { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }.case-table .case-name-inner a { color: var(--c-text, #12233a); text-decoration: none; }.case-table .case-name-inner a:hover { color: var(--c-primary); }.case-table .case-thumb {



  width: 42px;



  height: 42px;



  border-radius: 8px;



  object-fit: cover;



  flex: 0 0 42px;



  border: 1px solid var(--c-card-border, #e4ecf3);



  background: var(--c-page-bg, #f5f8fb);



}.case-table .case-note { color: var(--c-text-sub, #4a5a6a); }.case-table .case-go { text-align: right; white-space: nowrap; }.case-table .case-go .btn { padding: 6px 14px; font-size: 13px; }.case-table .tag { white-space: nowrap; }@media (max-width: 768px) {.case-table { font-size: 13px; }.case-table th, .case-table td { padding: 10px 12px; }}/* ============================================================



   V2 增强：验证/检测/辨真伪 图文卡（竞品 式，图+文一体）



   ============================================================ */.verify-card {



  padding: 0;



  overflow: hidden;



  display: flex;



  flex-direction: column;



  text-align: left;



}.verify-card .card-media {



  display: block;



  width: 100%;



  height: 180px;



  object-fit: cover;



  flex: 0 0 auto;



  border-radius: 11px 11px 0 0;



  background: var(--c-page-bg, #f2f6fa);



}.verify-card .card-body { padding: 18px 20px 22px; }.verify-card h3 { margin-top: 0; font-size: 17px; }.verify-card .card-body .meta { margin-top: 8px; line-height: 1.8; }.verify-card .card-body ul { margin: 8px 0 0; padding-left: 18px; }.verify-card .card-body li { line-height: 1.8; }.verify-card .data-table { width: 100%; font-size: 13px; }.verify-card .data-table td { padding: 7px 10px; }@media (max-width: 768px) {.verify-card .card-media { height: 150px; }}/* ============================================================



   V2 增强：客户评价卡（对齐 竞品 testimonial 模块）



   ============================================================ */.quote-card {



  background: var(--c-card, #fff);



  border: 1px solid var(--c-card-border, #e3e9ef);



  border-radius: 14px;



  padding: 30px 24px 22px;



  position: relative;



}.quote-card::before {



  content: '“';



  position: absolute;



  top: 4px;



  left: 20px;



  font-size: 72px;



  line-height: 1;



  font-family: Georgia, 'Times New Roman', serif;



  color: var(--c-accent, #00d4ff);



  opacity: .32;



}.quote-card p.quote-text {



  font-size: 15px;



  line-height: 1.9;



  color: var(--c-text, #1f2d3d);



  margin: 14px 0 0;



}.quote-card .quote-by {



  margin-top: 16px;



  padding-top: 12px;



  border-top: 1px solid var(--c-card-border, #e3e9ef);



  font-size: 13px;



  font-weight: 600;



  color: var(--c-primary, #0a3d5c);



}.quote-card .quote-by span {



  display: block;



  font-weight: 400;



  margin-top: 2px;



  color: var(--c-text-muted, #5b6b7c);



}@media (max-width: 768px) {.quote-card { padding: 26px 20px 18px; }}/* ============================================================

   V3 导航升级：参照竞品（竞品 多列 Mega 面板 + 竞品 简洁 2 层）

   说明：3 层导航（含 submenu-group）渲染为多列卡片面板；

        2 层导航（无 submenu-group）渲染为紧凑单列列表。

   ============================================================ *//* 一级菜单 hover：箭头旋转 180 度 + 变蓝 */.site-nav > li.has-submenu > a::after {

  transition: transform .2s ease, border-top-color .2s ease;

}.site-nav > li.has-submenu:hover > a::after,

.site-nav > li.has-submenu.open > a::after {

  transform: rotate(180deg);

  border-top-color: var(--c-primary);

}/* ---- 3 层导航：多列卡片面板（含 submenu-group 时启用） ---- */.site-nav .submenu:has(.submenu-group) {

  display: flex;

  flex-wrap: wrap;

  gap: 4px;

  width: max-content;

  min-width: 400px;

  max-width: min(960px, calc(100vw - 32px));

  padding: 18px 14px 14px;

  border-radius: 14px;

  box-shadow: 0 24px 60px rgba(10, 61, 92, .22), 0 4px 14px rgba(10, 61, 92, .08);

}.site-nav .submenu:has(.submenu-group) .submenu-group {

  flex: 1 1 240px;

  min-width: 210px;

  max-width: 340px;

  padding: 0;

}/* 分组标题：蓝色小标签 + 底部渐变线 */.site-nav .submenu:has(.submenu-group) .submenu-group-label {

  margin: 0 14px 6px;

  padding: 8px 12px;

  font-size: 12px;

  font-weight: 800;

  letter-spacing: 1.5px;

  color: var(--c-primary);

  text-transform: uppercase;

  border-top: none;

  border-bottom: 2px solid rgba(0, 212, 255, .35);

}.site-nav .submenu:has(.submenu-group) .submenu-group a.submenu-group-link:hover {

  color: var(--c-primary);

}/* 子项：圆角卡片 hover 高亮 + 左侧蓝色竖条 */.site-nav .submenu:has(.submenu-group) .submenu-group .submenu-item {

  position: relative;

  padding: 7px 12px;

  margin: 1px 14px;

  font-size: 14px;

  border-radius: 8px;

}.site-nav .submenu:has(.submenu-group) .submenu-group .submenu-item::before {

  content: '';

  position: absolute;

  left: 2px;

  top: 50%;

  width: 3px;

  height: 0;

  border-radius: 2px;

  background: linear-gradient(180deg, var(--c-primary), #00D4FF);

  transform: translateY(-50%);

  transition: height .18s ease;

}.site-nav .submenu:has(.submenu-group) .submenu-group .submenu-item:hover::before,

.site-nav .submenu:has(.submenu-group) .submenu-group .submenu-item.active::before {

  height: 16px;

}.site-nav .submenu:has(.submenu-group) .submenu-group .submenu-item:hover,

.site-nav .submenu:has(.submenu-group) .submenu-group .submenu-item.active {

  background: linear-gradient(90deg, rgba(14, 90, 140, .08), rgba(0, 212, 255, .05));

  color: var(--c-primary);

}/* ---- 2 层导航：紧凑单列列表（无 submenu-group 时启用） ---- */.site-nav .submenu:not(:has(.submenu-group)) {

  min-width: 230px;

  padding: 10px 6px;

}.site-nav .submenu:not(:has(.submenu-group)) a {

  padding: 10px 16px;

  margin: 2px 8px;

  font-size: 14px;

  border-radius: 8px;

}/* 宽面板防溢出：右侧对齐（由 JS 在 hover 时检测添加） */.site-nav .submenu.align-right {

  left: auto;

  right: 0;

}/* 移动端抽屉：分组标题同样蓝色小标签风格 */.nav-drawer nav .submenu-group-label {

  font-size: 12px;

  font-weight: 800;

  letter-spacing: 1.5px;

  color: var(--c-primary);

  text-transform: uppercase;

  margin-top: 10px;

}/* ============================================================

   V4 导航升级（2026-08-23）：参照竞品修正 3 层 Mega 面板与 2 层紧凑列表

   - 修复 V2 富卡片 !important 压制 V3 紧凑样式 → 面板过高(1182px)

   - 分组标题被 JS 增强为富卡片 → 恢复纯文字蓝色标签

   - 分组换行错乱(3+1) → 按内容自适应多列、行内填满

   ============================================================ *//* ---- 3 层导航：多列 Mega 面板 ---- */.site-nav .submenu:has(.submenu-group) {

  display: flex;

  flex-wrap: wrap;

  align-items: flex-start;

  gap: 6px 18px;

  width: max-content;

  min-width: 430px;

  max-width: min(980px, calc(100vw - 48px));

  padding: 18px 20px 16px;

  border-radius: 16px;

  box-shadow: 0 28px 64px rgba(10, 61, 92, .22), 0 4px 14px rgba(10, 61, 92, .08);

}.site-nav .submenu:has(.submenu-group) .submenu-group {

  flex: 1 1 200px;

  min-width: 186px;

  max-width: 340px;

  padding: 0;

  margin: 0;

  border: none;

  background: transparent;

}/* 分组标题：恢复纯文字蓝色标签（即使被 JS 增强为富卡片，隐藏图标与描述） */.site-nav .submenu:has(.submenu-group) .submenu-group-label {

  display: block !important;

  margin: 0 6px 7px;

  padding: 0 8px 8px;

  font-size: 12px;

  font-weight: 800;

  letter-spacing: 1.5px;

  color: var(--c-primary);

  text-transform: uppercase;

  line-height: 1.4;

  border-top: none;

  border-bottom: 2px solid rgba(0, 212, 255, .35);

  white-space: nowrap;

}.site-nav .submenu:has(.submenu-group) .submenu-group-label:hover {

  color: var(--c-primary);

}/* 子项富卡片：图标 + 标题 + 单行描述 紧凑横排 *//* 3 层 hover 竖条高亮（覆盖 V2 !important 的 margin/padding 冲突） */.site-nav .submenu:has(.submenu-group) .submenu-group .submenu-item {

  position: relative;

  padding: 5px 8px;

  margin: 1px 6px;

  border-radius: 8px;

}.site-nav .submenu:has(.submenu-group) .submenu-group .submenu-item::before {

  content: '';

  position: absolute;

  left: 3px;

  top: 50%;

  width: 3px;

  height: 0;

  border-radius: 2px;

  background: linear-gradient(180deg, var(--c-primary), #00D4FF);

  transform: translateY(-50%);

  transition: height .18s ease;

}.site-nav .submenu:has(.submenu-group) .submenu-group .submenu-item:hover::before,

.site-nav .submenu:has(.submenu-group) .submenu-group .submenu-item.active::before {

  height: 14px;

}.site-nav .submenu:has(.submenu-group) .submenu-group .submenu-item:hover,

.site-nav .submenu:has(.submenu-group) .submenu-group .submenu-item.active {

  background: linear-gradient(90deg, rgba(14, 90, 140, .08), rgba(0, 212, 255, .05));

  color: var(--c-primary);

}/* ---- 2 层导航：紧凑单列列表（无 submenu-group 时启用） ---- */.site-nav .submenu:not(:has(.submenu-group)) {

  min-width: 230px;

  padding: 10px 6px;

}.site-nav .submenu:not(:has(.submenu-group)) a {

  padding: 10px 16px;

  margin: 2px 8px;

  font-size: 14px;

  border-radius: 8px;

}/* ===== 视频中心：主播放器 + 卡片（大框 + 点击小视频） ===== */.video-master { margin-bottom: 34px; }.video-master-stage { position: relative; border-radius: 16px; overflow: hidden; background: #0a0f1c; box-shadow: 0 18px 50px rgba(10, 20, 40, .25); }.video-master-stage video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; }.video-master-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: linear-gradient(135deg, rgba(13, 20, 36, .94), rgba(16, 40, 72, .86)); color: #cfe3ff; }.video-master-empty .vm-empty-ico { width: 76px; height: 76px; border-radius: 50%; background: linear-gradient(135deg, var(--c-accent), #1ba2a0); display: flex; align-items: center; justify-content: center; font-size: 24px; padding-left: 4px; color: #fff; box-shadow: 0 10px 30px rgba(26, 163, 161, .45); animation: vmPulse 2.2s ease-in-out infinite; }@keyframes vmPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }.video-master-empty p { color: rgba(207, 227, 255, .85); font-size: 14px; }.video-master-head { position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 22px 16px; background: linear-gradient(180deg, transparent, rgba(8, 12, 24, .9)); pointer-events: none; }.video-master-head .vm-tag { display: inline-block; padding: 3px 11px; border-radius: 14px; background: rgba(26, 163, 161, .92); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .5px; margin-bottom: 8px; }.video-master-head h3 { color: #fff; font-size: 20px; margin: 0 0 6px; }.video-master-head p { color: rgba(255, 255, 255, .8); font-size: 13px; margin: 0; }@media (max-width: 600px) {.video-master-head h3 { font-size: 16px; }}/* 小视频卡片：hover 上浮 + 选中高亮 */.video-card { cursor: pointer; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }.video-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(10, 20, 40, .14); }.video-card.active { border-color: var(--c-accent); box-shadow: 0 10px 26px rgba(26, 163, 161, .22); }.video-card video { transition: transform .35s ease; }.video-card:hover video { transform: scale(1.03); }.video-card.active video { box-shadow: inset 0 0 0 2px var(--c-accent); }/* 通用视频块（video-wrap）：hover 上浮 + 封面微缩放 */.video-wrap { transition: box-shadow .25s ease, transform .25s ease; }.video-wrap:hover { box-shadow: 0 16px 40px rgba(10, 20, 40, .18); transform: translateY(-2px); }.video-cover img { transition: transform .45s ease; }.video-wrap:hover .video-cover img { transform: scale(1.04); }.video-play { transition: transform .2s ease, box-shadow .2s ease; }.video-wrap:hover .video-play { transform: scale(1.1); box-shadow: 0 10px 30px rgba(26, 163, 161, .5); }/* 弹窗播放器（video-modal）：毛玻璃 + 大尺寸 + 标题栏 */.video-modal { background: rgba(8, 12, 24, .82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }.video-modal-box { width: min(880px, 95vw); border-radius: 16px; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 30px 90px rgba(0, 0, 0, .55); }.video-modal-box video { aspect-ratio: 16 / 9; }.video-modal-title { position: absolute; left: 0; right: 0; top: 0; z-index: 2; padding: 14px 58px 12px 18px; background: linear-gradient(180deg, rgba(0, 0, 0, .78), rgba(0, 0, 0, .1)); color: #fff; font-size: 14px; font-weight: 600; line-height: 1.4; }.video-modal-close { background: rgba(0, 0, 0, .5); color: #fff; border: 1px solid rgba(255, 255, 255, .25); }.video-modal-close:hover { background: rgba(255, 255, 255, .92); color: #0a0f1c; }/* 防横向溢出：隐藏下拉菜单/装饰元素不撑开页面宽度（clip 不破坏 sticky 导航） */html { overflow-x: clip; }body { overflow-x: clip; }@supports not (overflow: clip) {html, body { overflow-x: hidden; }}/* ===== 富文本编辑器（Quill）对齐支持：编辑器保存的 ql-align-* 需在前台生效 ===== */.ql-align-center  { text-align: center !important; }.ql-align-right   { text-align: right !important; }.ql-align-justify { text-align: justify !important; }.ql-align-left    { text-align: left !important; }/* ===== 双图并排（后台编辑器"双图并排"按钮插入，2026-08-25） ===== */.ql-imagepair { display: flex; gap: 16px; align-items: flex-start; margin: 24px 0; }.ql-imagepair .img-pair-item { flex: 1; min-width: 0; }.ql-imagepair .img-pair-item img { width: 100%; height: auto; display: block; border-radius: 8px; object-fit: cover; }@media (max-width: 640px) {.ql-imagepair { flex-direction: column; }}/* 图片排列容器（后台编辑器插入，2-4 张自动排布） */.ql-imagegrid { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; margin: 24px 0; }.ql-imagegrid .img-grid-item { flex: 1 1 0; min-width: 0; }.ql-imagegrid .img-grid-item img { width: 100%; height: auto; display: block; border-radius: 8px; object-fit: cover; }.ql-imagegrid[data-count="4"] .img-grid-item { flex-basis: calc(50% - 8px); }@media (max-width: 640px) {.ql-imagegrid { flex-direction: column; }.ql-imagegrid[data-count="4"] .img-grid-item { flex-basis: auto; }}/* 2026-08-25 导航重构后：多列下拉中可点击分组标题也使用主色，避免与不可点击标题颜色冲突 */.site-nav .submenu:has(.submenu-group) .submenu-group a.submenu-group-link {
    color: var(--c-primary);
}.site-nav .submenu:has(.submenu-group) .submenu-group a.submenu-group-link:hover {
    color: var(--c-primary-hover, #12689E);
}/* ===== 三级导航：下拉多列布局（2026-08-25 nav3） ===== */.site-nav .submenu {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px 36px;
  width: max-content;
  max-width: calc(100vw - 48px);
  padding: 20px 24px;
}.site-nav .submenu > a {
  display: block;
  padding: 8px 12px;
  white-space: nowrap;
  border-radius: 8px;
  color: var(--c-text);
  font-size: 15px;
}.site-nav .submenu > a:hover {
  background: var(--c-page-bg);
  color: var(--c-primary);
}.site-nav .submenu .submenu-group {
  flex: 0 1 210px;
  min-width: 180px;
}.site-nav .submenu .submenu-group .submenu-group-label {
  padding: 14px 14px 8px;
  white-space: nowrap;
}.site-nav .submenu .submenu-group .submenu-item {
  padding: 10px 14px;
  margin: 2px 6px;
  white-space: nowrap;
}.site-nav > li:nth-last-child(-n+3) .submenu { left: auto; right: 0; }.site-nav > li:nth-last-child(-n+3) .submenu .submenu-group { flex-basis: 190px; }@media (max-width: 1500px) {.site-nav > li:nth-last-child(-n+4) .submenu { left: auto; right: 0; }}/* ===== 三级导航：下拉多列布局（2026-08-25 nav3） ===== */.site-nav .submenu {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px 36px;
  width: max-content;
  max-width: calc(100vw - 48px);
  padding: 20px 24px;
}.site-nav .submenu > a {
  display: block;
  padding: 8px 12px;
  white-space: nowrap;
  border-radius: 8px;
  color: var(--c-text);
  font-size: 15px;
}.site-nav .submenu > a:hover {
  background: var(--c-page-bg);
  color: var(--c-primary);
}.site-nav .submenu .submenu-group {
  flex: 0 1 210px;
  min-width: 180px;
}.site-nav .submenu .submenu-group .submenu-group-label {
  padding: 14px 14px 8px;
  white-space: nowrap;
}.site-nav .submenu .submenu-group .submenu-item {
  padding: 10px 14px;
  margin: 2px 6px;
  white-space: nowrap;
}.site-nav > li:nth-last-child(-n+3) .submenu { left: auto; right: 0; }.site-nav > li:nth-last-child(-n+3) .submenu .submenu-group { flex-basis: 190px; }@media (max-width: 1500px) {.site-nav > li:nth-last-child(-n+4) .submenu { left: auto; right: 0; }}

/* === Quill list compatibility (2026-08-26) === */
li[data-list="bullet"] { list-style: disc; }
li[data-list="ordered"] { list-style: decimal; }
.ql-ui { display: none; }
.ql-editor { line-height: 1.8; }

/* ===== 2026-08-26 白字显示修复：浅色背景上的幽灵按钮/标签改深色；深色区块内保持白字 ===== */
.btn--ghost { color: var(--c-primary); border-color: rgba(14,90,140,.5); }
.btn--ghost:hover { background: rgba(14,90,140,.08); border-color: var(--c-primary); color: var(--c-primary); }
.hero .btn--ghost,
.hero-inner .btn--ghost,
section[style*="linear-gradient(135deg"] .btn--ghost {
  color: #fff; border-color: rgba(255,255,255,.6);
}
.hero .btn--ghost:hover,
.hero-inner .btn--ghost:hover,
section[style*="linear-gradient(135deg"] .btn--ghost:hover {
  background: rgba(255,255,255,.12); border-color: #fff; color: #fff;
}
/* 2026-08-26 修正：hero-stat-label 仅深蓝渐变 hero 内浅色，浅色底保持深灰 */
.hero-stat-label { color: var(--c-text-muted); }
.hero .hero-stat-label,
.hero-inner .hero-stat-label,
section[style*="linear-gradient(135deg"] .hero-stat-label { color: rgba(255,255,255,.85); }
/* 2026-08-26 修正：section-tag 深蓝 hero 内青色，浅色 section 内深蓝 */
.section-tag { color: var(--c-accent); }
.section:not([style*="linear-gradient(135deg"]) .section-tag { color: var(--c-primary); }
.hero .section-tag,
.hero-inner .section-tag,
section[style*="linear-gradient(135deg"] .section-tag { color: var(--c-accent); }
.card-badge { color: var(--c-primary); background: rgba(14,90,140,.08); border-color: rgba(14,90,140,.30); }