/* ==========================================================================
   天府星空集团 TFXK.COM — Design System
   纯亮色系 · 企业蓝 · 大留白 · 全端自适应
   色彩对标：阿里云 / 腾讯云 / 百度智能云
   ========================================================================== */

/* ---------- 1. Design Tokens ---------- */
:root {
  /* 页面底色（亮色系） */
  --ink-900: #ffffff;          /* 页面主背景 */
  --ink-800: #f5f8ff;          /* 分区交替底 */
  --ink-700: #eef3fc;          /* 次级底 / 图片占位 */
  --ink-600: #e6ecf8;          /* 缩略图占位 */
  --ink-500: #dce4f3;

  /* 品牌主色 */
  --blue-600: #0654d4;
  --blue-500: #0868F7;
  --blue-400: #2a7ff8;
  --cyan-400: #0868F7;
  --cyan-300: #0868F7;
  --cyan-500: #0654d4;
  --violet-400: #0868F7;

  /* 强调色 */
  --rose: #e5484d;
  --amber: #d97706;

  /* 文本 */
  --txt-1: #07152F;                      /* 标题（深蓝黑） */
  --txt-2: #1a2744;                      /* 正文 */
  --txt-3: #58677C;                      /* 次级正文（灰蓝） */
  --txt-4: #8696ac;                      /* 弱化 / 说明 */

  /* 线框与容器 */
  --line: #e6ebf5;
  --line-strong: #d4dcec;
  --glass: #ffffff;                      /* 卡片实底 */
  --glass-2: #f5f8ff;

  /* 渐变 */
  --grad-brand: linear-gradient(120deg, #0868F7 0%, #0868F7 100%);
  --grad-text: #07152F;
  --grad-line: linear-gradient(90deg, transparent, #d4dcec, transparent);

  /* 阴影 */
  --sh-sm: 0 1px 3px rgba(8, 30, 66, .05);
  --sh-md: 0 6px 20px rgba(8, 30, 66, .08);
  --sh-lg: 0 18px 48px rgba(8, 30, 66, .1);
  --sh-glow: 0 0 0 1px rgba(8, 104, 247, .14), 0 12px 32px rgba(8, 30, 66, .09);

  /* 尺寸 */
  --nav-h: 92px;
  --nav-h-scrolled: 72px;
  --maxw: 1440px;
  --pad: clamp(20px, 3vw, 56px);
  --r-sm: 10px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 36px;

  /* 动效 */
  --ease: cubic-bezier(.22, .68, 0, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 90px;
}

body {
  background: var(--ink-900);
  color: var(--txt-2);
  font-family: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans GB", sans-serif;
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: .01em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.nav-open, body.menu-locked { overflow: hidden; }

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
/* 元素自带 loading="lazy" 时，浏览器不支持时会退化为立即加载；
   下面的 contain 提示浏览器图片尺寸已声明，避免滚动时反复重排 */
img[width][height] { contain: layout paint; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, textarea { font: inherit; color: inherit; border: none; background: none; outline: none; }
button { cursor: pointer; }

::selection { background: rgba(19, 102, 236, .16); color: var(--blue-600); }

/* 滚动条 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink-800); }
::-webkit-scrollbar-thumb { background: #c3cddd; border-radius: 10px; border: 2px solid var(--ink-800); }
::-webkit-scrollbar-thumb:hover { background: #a9b6cb; }

/* ---------- 3. Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.wrap-wide { max-width: 1560px; }
.wrap-narrow { max-width: 900px; }

/* 版块纵向节奏：整体收至原值的约 1/3，让页面更紧凑、一屏信息更饱满 */
.sec { position: relative; padding: clamp(22px, 3vw, 46px) 0; }
.sec-tight { padding: clamp(16px, 2vw, 30px) 0; }

/* 亮色背景装饰：极淡的蓝色光晕，替代原深空辉光 */
.dark-bg {
  position: relative;
  background:
    radial-gradient(1100px 620px at 88% -6%, rgba(19, 102, 236, .06), transparent 62%),
    radial-gradient(900px 560px at 2% 18%, rgba(19, 102, 236, .045), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, var(--ink-800) 100%);
}
.sec > .wrap { position: relative; z-index: 2; }

/* 分区 */
.sec-head { max-width: 860px; margin-bottom: clamp(14px, 1.32vw, 24px); }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--blue-500);
  padding: 7px 16px 7px 14px;
  border: 1px solid rgba(19, 102, 236, .2);
  border-radius: 100px;
  background: rgba(19, 102, 236, .055);
  margin-bottom: 8px;
}
.eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue-500);
  animation: pulse 2.4s var(--ease-soft) infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }

.sec-title {
  font-size: clamp(24px, 2.5vw, 40px);
  line-height: 1.2; font-weight: 800; letter-spacing: -.02em;
  color: var(--txt-1);
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sec-desc {
  margin-top: 8px;
  font-size: clamp(14.5px, 1.6vw, 17px);
  color: var(--txt-3);
  line-height: 1.9;
  max-width: 720px;
}
.sec-head.center .sec-desc { margin-left: auto; margin-right: auto; }

.divider {
  height: 1px; margin: clamp(14px, 2vw, 26px) 0;
  background: var(--grad-line);
}

/* ---------- 4. Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 34px;
  border-radius: 100px;
  font-size: 15px; font-weight: 600; letter-spacing: .02em;
  transition: all .38s var(--ease);
  white-space: nowrap;
  overflow: hidden;
}
.btn svg { width: 17px; height: 17px; transition: transform .38s var(--ease); }
.btn:hover svg { transform: translateX(4px); }

.btn-primary {
  color: #fff;
  background: var(--blue-500);
  box-shadow: 0 6px 18px rgba(19, 102, 236, .26);
}
.btn-primary:hover {
  background: var(--blue-600);
  box-shadow: 0 10px 26px rgba(19, 102, 236, .32);
  transform: translateY(-2px);
}

.btn-ghost {
  color: var(--txt-1);
  border: 1px solid var(--line-strong);
  background: #ffffff;
}
.btn-ghost:hover {
  border-color: var(--blue-500);
  background: rgba(19, 102, 236, .05);
  color: var(--blue-500);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(21, 34, 66, .1);
}

.btn-sm { padding: 11px 24px; font-size: 14px; }

/* 文字链接 */
.tlink {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 600; color: var(--blue-500);
  transition: gap .3s var(--ease), color .3s;
}
.tlink:hover { gap: 12px; color: var(--blue-600); }
.tlink svg { width: 15px; height: 15px; }

/* ---------- 5. Navigation ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: all .45s var(--ease);
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  height: var(--nav-h-scrolled);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 20px rgba(8, 30, 66, .06);
}

/* 桌面吸顶只切换背景和阴影，外框始终保留首屏高度，避免内容随滚动阈值抖动。 */
@media (min-width: 1281px) {
  .nav.scrolled { height: var(--nav-h); }
}

.nav-inner {
  width: 100%; max-width: var(--maxw); margin: 0 auto;
  padding: 0 var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
}

/* LOGO */
.nav-logo { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.nav-logo img { height: 48px; width: auto; transition: height .45s var(--ease), transform .45s var(--ease); }
.nav.scrolled .nav-logo img { height: 40px; }
/* 桌面吸顶不改变 Logo 的尺寸，避免通用吸顶规则触发内部重排。 */
@media (min-width: 1281px) {
  .nav.scrolled .nav-logo img {
    height: 48px;
    transform: none;
    transform-origin: center;
  }
}
.nav-logo-txt { display: flex; flex-direction: column; line-height: 1.15; }
.nav-logo-txt b { font-size: 17px; font-weight: 800; color: var(--txt-1); letter-spacing: .04em; }
.nav-logo-txt span { font-size: 10px; letter-spacing: .26em; color: var(--txt-4); text-transform: uppercase; }
@media (max-width: 480px) { .nav-logo-txt { display: none; } }

/* 菜单 */
.nav-menu { display: flex; align-items: center; gap: 6px; }
.nav-menu > li { position: relative; }
.nav-menu > li > a {
  display: block; padding: 12px 20px;
  font-size: 16px; font-weight: 500; color: var(--txt-2);
  white-space: nowrap;
  border-radius: 10px; position: relative;
  transition: color .3s;
}
.nav-menu > li > a::after {
  content: ''; position: absolute; left: 50%; bottom: 6px;
  width: 24px; height: 3px;
  background: var(--blue-500); border-radius: 2px;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform .38s var(--ease);
}
.nav-menu > li > a:hover, .nav-menu > li.cur > a { color: var(--blue-500); }
.nav-menu > li > a:hover::after, .nav-menu > li.cur > a::after { transform: translateX(-50%) scaleX(1); }

/* 下拉 */
.nav-drop {
  position: absolute; top: calc(100% + 14px); left: 50%;
  transform: translate(-50%, 10px);
  min-width: 210px; padding: 10px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 12px 36px rgba(21, 34, 66, .12);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: all .34s var(--ease);
}
/* 桥接区：填平一级菜单与下拉之间的 14px 空隙，避免鼠标经过时 hover 失效导致菜单收不回来 */
.nav-menu > li::after {
  content: '';
  position: absolute; left: 0; right: 0; top: 100%;
  height: 16px;
  pointer-events: none;
}
.nav-menu > li:hover::after { pointer-events: auto; }
.nav-menu > li:hover .nav-drop { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
.nav-drop a {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: 10px;
  font-size: 14px; color: var(--txt-2);
  transition: all .26s;
}
.nav-drop a::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--line-strong); transition: all .26s;
}
.nav-drop a:hover { background: rgba(19, 102, 236, .07); color: var(--blue-500); padding-left: 18px; }
.nav-drop a:hover::before { background: var(--blue-500); }

.nav-cta { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.nav-tel {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--txt-2);
  transition: color .3s;
}
.nav-tel:hover { color: var(--blue-500); }
.nav-tel svg { width: 15px; height: 15px; color: var(--blue-500); }

.nav-cta .btn-cta {
  padding: 13px 28px;
  font-size: 15px;
  color: #fff;
  background: var(--blue-500);
  border-radius: 100px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(8, 104, 247, .3);
  transition: all .38s var(--ease);
}
.nav-cta .btn-cta:hover {
  background: var(--blue-600);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(8, 104, 247, .38);
}
.nav-cta .btn-cta svg { width: 16px; height: 16px; transition: transform .3s; }
.nav-cta .btn-cta:hover svg { transform: translateX(3px); }

/* 汉堡 */
.nav-burger {
  display: none; width: 44px; height: 44px;
  border-radius: 11px; border: 1px solid var(--line);
  background: #ffffff;
  -webkit-appearance: none; appearance: none;
  min-width: 44px; flex: 0 0 44px; position: relative; z-index: 2;
  align-items: center; justify-content: center;
  transition: all .3s;
}
.nav-burger:hover { border-color: var(--blue-500); background: rgba(19, 102, 236, .05); }
.nav-burger span { position: relative; display: block; width: 19px; height: 1.8px; background: var(--txt-1); border-radius: 2px; transition: all .38s var(--ease); }
.nav-burger span::before, .nav-burger span::after {
  content: ''; position: absolute; left: 0; width: 19px; height: 1.8px; background: var(--txt-1); border-radius: 2px;
  transition: all .38s var(--ease);
}
.nav-burger span::before { top: -6px; }
.nav-burger span::after { top: 6px; }
body.nav-open .nav-burger span { background: transparent; }
body.nav-open .nav-burger span::before { top: 0; transform: rotate(45deg); }
body.nav-open .nav-burger span::after { top: 0; transform: rotate(-45deg); }

/* 移动端抽屉：左侧白色面板 + 右侧遮罩（移动端设计规范） */
body.nav-open { overflow: hidden; }
.drawer {
  position: fixed; inset: 0; z-index: 920;
  visibility: hidden;
  transition: visibility 0s linear .45s;
}
body.nav-open .drawer { visibility: visible; transition-delay: 0s; }
.drawer-mask {
  position: absolute; inset: 0;
  background: rgba(9, 14, 28, .48);
  opacity: 0;
  transition: opacity .42s var(--ease);
}
body.nav-open .drawer-mask { opacity: 1; }
.drawer-panel {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: min(78vw, 300px);
  background: #ffffff;
  padding: 12px 24px calc(28px + env(safe-area-inset-bottom));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column;
  transform: translateX(-103%);
  transition: transform .45s var(--ease);
  box-shadow: 12px 0 44px rgba(8, 30, 66, .16);
}
body.nav-open .drawer-panel { transform: translateX(0); }

/* 头部：左 Logo + 右关闭按钮（正常文档流占位，不遮挡菜单） */
.drawer-head { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; }
.drawer-head::before {
  content: ''; display: block; flex-shrink: 0;
  width: 118px; height: 48px; margin-left: -4px;
  background: url(../images/logo.png) no-repeat left center / contain;
}
.drawer-close {
  width: 44px; height: 44px; margin: 0 -12px 0 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0;
  color: var(--txt-1); cursor: pointer;
  border-radius: 12px;
  transition: background .25s;
}
.drawer-close:hover { background: rgba(21, 34, 66, .05); }
.drawer-close svg { width: 23px; height: 23px; display: block; }

/* 一级菜单 */
.drawer-list { flex-shrink: 0; }
.drawer-list > li { border-bottom: 1px solid #f0f1f5; }
.drawer-list > li > a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 17px 2px;
  font-size: 17px; font-weight: 500; color: var(--txt-1);
  transition: color .25s;
}
.drawer-list > li > a:active { color: var(--blue-500); }
.drawer-list > li.cur > a { color: var(--blue-500); }
/* 抽屉箭头固定为触摸友好的小图标，避免全局 svg 的 max-width/height 规则撑开菜单。 */
.drawer-list > li.has-sub > a .arrow,
.drawer-list > li > a > .arrow {
  display: block;
  width: 18px !important; height: 18px !important;
  min-width: 18px; max-width: 18px;
  min-height: 18px; max-height: 18px;
  flex: 0 0 18px;
  color: #a2a9b6;
  transition: transform .38s var(--ease), color .25s;
}
.drawer-list > li.has-sub > a:active .arrow,
.drawer-list > li.has-sub.open > a .arrow { color: var(--blue-500); }
.drawer-list > li.has-sub.open > a .arrow { transform: rotate(180deg); }

/* 二级菜单：缩进纯文字 + 浅分隔线（max-height 折叠保证可测量高度） */
.drawer-sub { max-height: 0; overflow: hidden; transition: max-height .42s var(--ease); }
.drawer-sub a {
  display: block; padding: 13px 2px 13px 30px;
  font-size: 15px; color: var(--txt-3);
  transition: color .25s, padding-left .25s;
}
.drawer-sub a + a { border-top: 1px solid #f6f7fa; }
.drawer-sub a:active, .drawer-sub a.cur { color: var(--blue-500); }
.drawer-sub a:active { padding-left: 34px; }

/* 底部操作：两列并排，保证一屏可见 */
.drawer-foot { margin-top: auto; padding-top: 26px; display: flex; flex-direction: row; gap: 10px; }
.drawer-foot .btn { flex: 1; padding: 13px 8px; font-size: 14px; white-space: nowrap; }

/* 1100 - 1400px：收紧间距与字号；仍放不下则走抽屉 */
@media (max-width: 1200px) {
  .nav-menu { gap: 0; }
  .nav-menu > li > a { padding: 10px 14px; font-size: 15px; }
  .nav-menu > li > a::after { left: 14px; right: 14px; width: 20px; }
  .nav-logo img { height: 42px; }
  .nav-cta { gap: 12px; }
  .nav-cta .btn-cta { padding: 11px 22px; font-size: 14px; }
}
/*
 * 断点修正（2026-09-23）：
 * 原抽屉断点 980px 存在盲区——981~1280px（iPad 横屏 / 125% 缩放笔记本）
 * 桌面菜单实际需宽约 1284px，溢出部分被 body overflow-x:hidden 裁剪，
 * 而汉堡按钮在该区间又是隐藏的，导致此区间完全没有导航入口。
 * 故将抽屉断点提升至 1280px；1281~1400px 隐藏电话保持菜单完整。
 */
@media (max-width: 1280px) {
  .nav-menu, .nav-tel { display: none; }
  /* 移动端把入口脱离常规 flex 排版，固定在导航右侧，避免被页面内容撑到下一行。 */
  .nav-inner { position: relative; min-height: 44px; }
  .nav-burger {
    display: flex !important; visibility: visible; opacity: 1;
    position: absolute; top: 50%; right: var(--pad); margin: 0;
    transform: translateY(-50%);
  }
  .nav-cta .btn-cta { display: none; }
  .nav-cta .btn-primary { display: none; }
}

/* 移动端菜单最终兜底：提高选择器优先级，避免旧缓存或页面局部样式隐藏菜单入口。 */
@media screen and (max-width: 1280px) {
  #nav .nav-inner > #burger.nav-burger {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute;
    top: 50%;
    right: var(--pad);
    width: 44px;
    height: 44px;
    min-width: 44px;
    flex: 0 0 44px;
    transform: translateY(-50%);
  }
}

/* 设备模拟器兼容：部分浏览器在移动设备仿真和缩放组合下会错误报告视口宽度，触摸指针仍可作为移动端判据。 */
@media screen and (pointer: coarse) {
  #nav .nav-inner > #burger.nav-burger {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute;
    top: 50%;
    right: var(--pad);
    width: 44px;
    height: 44px;
    min-width: 44px;
    flex: 0 0 44px;
    transform: translateY(-50%);
  }
}
@media (min-width: 1281px) and (max-width: 1400px) {
  .nav-tel { display: none; }
}

/* 滚动进度条：轨道始终占据固定高度，避免进度首次出现时产生视觉跳动。 */
.progress {
  position: fixed; top: 0; left: 0; z-index: 950;
  height: 2px; width: 100%;
  overflow: hidden;
  background: #ffffff;
  pointer-events: none;
}
.progress::before {
  content: '';
  position: absolute; inset: 0 auto 0 0;
  width: var(--progress-width, 0%);
  background: var(--blue-500);
  transition: width .12s linear;
}

/* ---------- 6. Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--nav-h) + 40px) 0 80px;
  overflow: hidden;
  background:
    radial-gradient(1200px 700px at 90% 0%, rgba(8, 104, 247, .06), transparent 60%),
    radial-gradient(900px 600px at 5% 80%, rgba(8, 104, 247, .04), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #f0f5ff 55%, #ffffff 100%);
}

/* 光球：极淡的柔光 */
.orb { position: absolute; border-radius: 50%; filter: blur(100px); pointer-events: none; z-index: 0; }
.orb-1 { width: 520px; height: 520px; top: -160px; right: -80px; background: rgba(8, 104, 247, .09); animation: float1 20s ease-in-out infinite; }
.orb-2 { width: 460px; height: 460px; bottom: -180px; left: -100px; background: rgba(8, 104, 247, .06); animation: float2 24s ease-in-out infinite; }
.orb-3 { width: 360px; height: 360px; top: 40%; left: 45%; background: rgba(8, 104, 247, .05); animation: float1 28s ease-in-out infinite reverse; }
@keyframes float1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-40px, 40px) scale(1.12); } }
@keyframes float2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(50px, -40px) scale(1.08); } }

.hero-inner {
  position: relative; z-index: 3;
  display: grid; grid-template-columns: minmax(0, .43fr) minmax(0, .57fr);
  gap: clamp(24px, 2.5vw, 36px); align-items: center;
}

.hero-tag {
  display: inline-flex; align-items: center;
  margin-bottom: 24px;
  font-size: 18px; font-weight: 500;
  color: var(--blue-500);
  letter-spacing: .02em;
}

.hero-title {
  font-size: clamp(34px, 3.8vw, 64px);
  line-height: 1.12; font-weight: 800; letter-spacing: -.03em;
  color: var(--txt-1);
}
.hero-title .accent {
  color: var(--blue-500);
  position: relative;
}
.hero-title .line { display: block; overflow: hidden; }
.hero-title .line > span { display: block; animation: riseIn .95s var(--ease) both; }
.hero-title .line:nth-child(1) > span { animation-delay: .08s; }
.hero-title .line:nth-child(2) > span { animation-delay: .2s; }
.hero-title .line:nth-child(3) > span { animation-delay: .32s; }
@keyframes riseIn { from { transform: translateY(105%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.hero-sub {
  margin-top: 24px;
  font-size: clamp(15px, 1.65vw, 18px);
  line-height: 1.85; color: var(--txt-3);
  max-width: 520px;
}

.hero-btns { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 16px; }
.hero-btns .btn { height: 56px; padding: 0 36px; font-size: 16px; line-height: 1; }
.hero-btns .btn-primary { box-shadow: 0 6px 20px rgba(8, 104, 247, .3); }

.hero-sublinks {
  margin-top: 32px;
  display: flex; align-items: center; gap: 20px;
  font-size: 15px;
  color: var(--txt-2);
}
.hero-sublinks a {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 500;
  transition: color .3s;
}
.hero-sublinks a:hover { color: var(--blue-500); }
.hero-sublinks a svg { width: 14px; height: 14px; transition: transform .3s; }
.hero-sublinks a:hover svg { transform: translate(2px, -2px); }
.hero-sublinks .divider { width: 1px; height: 16px; background: var(--line-strong); }

/* 右侧主视觉 */
.hero-visual { position: relative; }
.hero-main-img {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ink-700);
  box-shadow: 0 24px 60px rgba(8, 30, 66, .12);
  aspect-ratio: 5 / 4;
}
.hero-main-img img.cover { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.hero-main-img:hover img.cover { transform: scale(1.04); }
.hero-main-img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(5, 15, 35, .7) 100%);
}

/* 走进天府星空 文字 */
.hero-img-text {
  position: absolute; left: 32px; bottom: 28px; z-index: 3;
  display: flex; align-items: center; gap: 20px;
}
.hero-img-text .label {
  font-size: 18px; font-weight: 700; color: #fff;
  letter-spacing: .02em;
}

/* 播放按钮 */
.hero-play-wrap {
  display: flex; align-items: center; gap: 14px;
  cursor: pointer;
}
.hero-play-btn {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .95);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 8px 24px rgba(5, 15, 35, .25);
  transition: all .4s var(--ease);
  flex-shrink: 0;
}
.hero-play-btn svg { width: 18px; height: 18px; color: var(--blue-500); margin-left: 2px; }
.hero-play-wrap:hover .hero-play-btn {
  background: var(--blue-500);
  transform: scale(1.08);
}
.hero-play-wrap:hover .hero-play-btn svg { color: #fff; }
.hero-play-wrap .play-label {
  font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, .9);
  white-space: nowrap;
}

/* 右下角鲜花小卡片 */
.hero-flower-card {
  position: absolute;
  right: -12px;
  bottom: -12px;
  z-index: 5;
  width: 180px;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 16px 40px rgba(8, 30, 66, .15);
  transition: transform .5s var(--ease), box-shadow .5s;
}
.hero-flower-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 52px rgba(8, 30, 66, .2);
}
.hero-flower-card .fc-img {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.hero-flower-card .fc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.hero-flower-card:hover .fc-img img { transform: scale(1.08); }
.hero-flower-card .fc-img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(5, 15, 35, .4) 100%);
}
.hero-flower-card .fc-body {
  padding: 12px 16px 16px;
}
.hero-flower-card .fc-body p {
  font-size: 13px; font-weight: 600;
  color: var(--txt-1);
  line-height: 1.4;
}

@media (max-width: 1100px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
  .hero-title { font-size: clamp(30px, 3.5vw, 48px); }
}
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .hero-visual { max-width: 560px; margin: 0 auto; width: 100%; }
  .hero-flower-card { width: 150px; right: -8px; bottom: -8px; }
}
@media (max-width: 620px) {
  .hero { min-height: auto; padding-top: calc(var(--nav-h) + 32px); padding-bottom: 50px; }
  .hero-title { font-size: clamp(32px, 8.5vw, 42px); }
  .hero-tag { font-size: 15px; margin-bottom: 18px; }
  .hero-sub { font-size: 15px; margin-top: 18px; }
  .hero-btns { margin-top: 28px; gap: 12px; }
  .hero-btns .btn { flex: 1 1 auto; min-width: 140px; height: 50px; padding: 0 22px; font-size: 14.5px; }
  .hero-sublinks { margin-top: 24px; font-size: 14px; gap: 14px; }
  .hero-flower-card { width: 130px; right: -6px; bottom: -6px; }
  .hero-flower-card .fc-body { padding: 10px 12px 12px; }
  .hero-flower-card .fc-body p { font-size: 11.5px; }
  .hero-img-text { left: 20px; bottom: 18px; gap: 12px; }
  .hero-img-text .label { font-size: 14px; }
  .hero-play-btn { width: 44px; height: 44px; }
  .hero-play-btn svg { width: 15px; height: 15px; }
  .hero-play-wrap .play-label { font-size: 12px; }
}

/* 横向无缝滚动关键帧 —— 由「荣誉墙」轨道使用（首页合作生态跑马灯已下线） */
@keyframes scrollX { to { transform: translateX(-50%); } }

/* ---------- 7. 卡片通用 ---------- */
.grid { display: grid; gap: clamp(18px, 1.6vw, 28px); }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
.g-auto { grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); }
@media (max-width: 980px) { .g-3, .g-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .g-2, .g-3, .g-4 { grid-template-columns: 1fr; } }

.card {
  position: relative;
  padding: clamp(24px, 2.15vw, 38px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: #ffffff;
  overflow: hidden;
  transition: transform .5s var(--ease), border-color .45s, box-shadow .5s;
}
.card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--blue-500);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease);
}
.card:hover { transform: translateY(-6px); border-color: rgba(19, 102, 236, .2); box-shadow: 0 18px 44px rgba(21, 34, 66, .1); }
.card:hover::before { transform: scaleX(1); }

.card-ico {
  width: 54px; height: 54px; border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(19, 102, 236, .07);
  border: 1px solid rgba(19, 102, 236, .14);
  margin-bottom: 22px;
  transition: all .45s var(--ease);
}
.card-ico svg { width: 25px; height: 25px; color: var(--blue-500); }
.card:hover .card-ico { background: var(--blue-500); border-color: transparent; }
.card:hover .card-ico svg { color: #fff; }

.card h3 { font-size: clamp(16px, 1.5vw, 21px); font-weight: 700; color: var(--txt-1); margin-bottom: 13px; letter-spacing: -.01em; }
.card p { font-size: 14.5px; color: var(--txt-3); line-height: 1.85; }

.card-num {
  position: absolute; top: 14px; right: 20px;
  font-size: 46px; font-weight: 900; line-height: 1;
  letter-spacing: -.04em;
  color: var(--ink-500);
  pointer-events: none;
  user-select: none;
  transition: color .45s;
}
.card:hover .card-num { color: rgba(19, 102, 236, .16); }
/* 有编号的卡片给标题留出避让空间 */
.card:has(.card-num) h3 { padding-right: 62px; }

/* ---------- 8. 关于/简介双栏 ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(18px, 1.6vw, 28px); align-items: center; }
@media (max-width: 980px) { .split { grid-template-columns: 1fr; gap: 38px; } }

.prose p { font-size: clamp(14.5px, 1.6vw, 16.5px); line-height: 2.05; color: var(--txt-3); margin-bottom: 22px; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--txt-1); font-weight: 600; }
.prose .hl {
  color: var(--blue-500); font-weight: 600;
  background: linear-gradient(180deg, transparent 62%, rgba(19, 102, 236, .16) 62%);
}

.stat-panel {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
}
.stat-cell { padding: clamp(22px, 1.88vw, 32px); background: #ffffff; transition: background .4s; }
.stat-cell:hover { background: var(--ink-800); }
.stat-cell b {
  display: flex; align-items: baseline; gap: 1px;
  font-size: clamp(25px, 2.4vw, 38px); font-weight: 900; line-height: 1.05;
  letter-spacing: -.035em;
  color: var(--blue-500);
  white-space: nowrap;
}
.stat-cell b em { font-style: normal; font-size: .48em; }
.stat-cell > span { display: block; margin-top: 9px; font-size: 13px; color: var(--txt-4); }

/* ---------- 9. 生态圈环形 ---------- */
.eco { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 2.2vw, 32px); align-items: center; }
@media (max-width: 1020px) { .eco { grid-template-columns: 1fr; } }

.eco-ring {
  position: relative; aspect-ratio: 1; max-width: 560px; margin: 0 auto; width: 100%;
}
.eco-ring::before {
  content: ''; position: absolute; inset: 12%;
  border-radius: 50%; border: 1px dashed var(--line-strong);
  animation: rotate 46s linear infinite;
}
.eco-ring::after {
  content: ''; position: absolute; inset: 26%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(19, 102, 236, .09), transparent 68%);
  animation: breathe 6s ease-in-out infinite;
}
@keyframes rotate { to { transform: rotate(360deg); } }
@keyframes breathe { 0%, 100% { transform: scale(.94); opacity: .55; } 50% { transform: scale(1.08); opacity: 1; } }

.eco-center {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 4; text-align: center; width: 42%;
}
.eco-center b {
  display: block; font-size: clamp(16px, 1.5vw, 21px); font-weight: 900; line-height: 1.25;
  color: var(--txt-1);
}
.eco-center span { display: block; margin-top: 6px; font-size: 10.5px; letter-spacing: .2em; color: var(--txt-4); text-transform: uppercase; }

.eco-node {
  position: absolute; z-index: 5;
  width: 26%; aspect-ratio: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 8px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(21, 34, 66, .07);
  text-align: center;
  cursor: pointer;
  transition: all .45s var(--ease);
  /* 圆心定位：top/left 已按正六边形各顶点百分比设置 */
  transform: translate(-50%, -50%);
  will-change: transform;
}
.eco-node b { font-size: clamp(11px, 1.35vw, 13.5px); font-weight: 700; color: var(--txt-2); line-height: 1.3; transition: color .35s; }
.eco-node i { font-style: normal; font-size: 9.5px; letter-spacing: .12em; color: var(--txt-4); text-transform: uppercase; }
.eco-node:hover, .eco-node.on {
  border-color: var(--blue-500);
  background: var(--blue-500);
  box-shadow: 0 12px 30px rgba(19, 102, 236, .3);
}
.eco-node:hover b, .eco-node.on b { color: #fff; }
.eco-node:hover i, .eco-node.on i { color: rgba(255, 255, 255, .78); }

/* 正六边形顶点：以圆心 (50%,50%) 为基准，R = 44% */
/* 顶点 = (50 + 44*sin(60°k), 50 - 44*cos(60°k)) */
.eco-n1 { top: 6.0%;  left: 50.0%; }   /* 0°   */
.eco-n2 { top: 28.0%; left: 88.1%; }   /* 60°  */
.eco-n3 { top: 72.0%; left: 88.1%; }   /* 120° */
.eco-n4 { top: 94.0%; left: 50.0%; }   /* 180° */
.eco-n5 { top: 72.0%; left: 11.9%; }   /* 240° */
.eco-n6 { top: 28.0%; left: 11.9%; }   /* 300° */

.eco-info {
  min-height: 240px;
  padding: clamp(26px, 2.36vw, 42px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--ink-800);
}
.eco-info-idx {
  display: inline-block; margin-bottom: 16px;
  font-size: 12px; font-weight: 700; letter-spacing: .18em;
  padding: 5px 13px; border-radius: 100px;
  background: rgba(19, 102, 236, .08);
  border: 1px solid rgba(19, 102, 236, .16);
  color: var(--blue-500);
}
.eco-info h3 { font-size: clamp(18px, 1.8vw, 25px); font-weight: 800; color: var(--txt-1); margin-bottom: 16px; letter-spacing: -.015em; }
.eco-info p { font-size: 14.8px; line-height: 1.95; color: var(--txt-3); }
.eco-fade { animation: fadeUp .5s var(--ease) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 620px) {
  .eco-node { width: 31%; }
  .eco-node b { font-size: 10.5px; }
  .eco-node i { display: none; }
  .eco-info { min-height: auto; }
}

/* ---------- 10. 业务品牌卡 ---------- */
.brand-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(18px, 1.53vw, 26px); }

.brand-card {
  position: relative; display: flex; flex-direction: column;
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line);
  background: #ffffff;
  transition: transform .55s var(--ease), border-color .45s, box-shadow .55s;
}
.brand-card:hover { transform: translateY(-8px); border-color: rgba(19, 102, 236, .22); box-shadow: 0 18px 44px rgba(21, 34, 66, .11); }

.brand-top {
  position: relative; height: 172px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.brand-top::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, #0d4fc4, #1366ec 55%, #2a7ef0);
  transition: transform .8s var(--ease);
}
.brand-card:hover .brand-top::before { transform: scale(1.14); }
.brand-top::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .09) 1px, transparent 1px);
  background-size: 34px 34px;
}
.brand-name {
  position: relative; z-index: 3;
  font-size: 32px; font-weight: 900; letter-spacing: .22em;
  color: #fff;
  padding-left: .22em;
}
.brand-body { padding: clamp(22px, 1.81vw, 30px); display: flex; flex-direction: column; flex: 1; }
.brand-body h3 { font-size: 19px; font-weight: 700; color: var(--txt-1); margin-bottom: 14px; }
.brand-body p { font-size: 14.2px; line-height: 1.88; color: var(--txt-3); flex: 1; }
.brand-meta {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 22px;
  padding-top: 18px; border-top: 1px solid var(--line);
}
.brand-meta span {
  font-size: 12px; padding: 5px 12px; border-radius: 100px;
  background: var(--ink-800);
  border: 1px solid var(--line);
  color: var(--txt-3);
}

/* ---------- 11. 新闻 ---------- */
.news-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(22px, 2.08vw, 38px); }
@media (max-width: 1020px) { .news-layout { grid-template-columns: 1fr; } }

.news-hero {
  position: relative; display: block;
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line);
  min-height: 420px;
  transition: border-color .45s, box-shadow .5s;
}
.news-hero:hover { border-color: rgba(19, 102, 236, .22); box-shadow: 0 18px 44px rgba(21, 34, 66, .11); }
.news-hero .thumb { position: absolute; inset: 0; }
.news-hero .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.news-hero:hover .thumb img { transform: scale(1.07); }
.news-hero .thumb::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 20, 40, .05) 0%, rgba(10, 20, 40, .55) 52%, rgba(10, 20, 40, .9) 100%);
}
.news-hero-body { position: relative; z-index: 3; padding: clamp(24px, 2.22vw, 40px); display: flex; flex-direction: column; justify-content: flex-end; min-height: 420px; }
.news-hero-body h3 { font-size: clamp(18px, 1.9vw, 26px); font-weight: 800; color: #fff; line-height: 1.42; margin: 14px 0 14px; letter-spacing: -.015em; }
.news-hero-body p { font-size: 14.5px; color: rgba(255, 255, 255, .78); line-height: 1.85; }

.chip {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em;
  padding: 6px 14px; border-radius: 100px;
  background: rgba(19, 102, 236, .92);
  border: 1px solid transparent;
  color: #fff;
}

.news-side { display: flex; flex-direction: column; gap: 14px; }
.news-item {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: #ffffff;
  transition: all .4s var(--ease);
}
.news-item:hover { border-color: rgba(19, 102, 236, .24); background: var(--ink-800); transform: translateX(6px); }
.news-item .thumb {
  flex: 0 0 96px; width: 96px; height: 68px; border-radius: 10px; overflow: hidden;
  background: var(--ink-600);
}
.news-item .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.news-item:hover .thumb img { transform: scale(1.1); }
.news-item .txt { flex: 1; min-width: 0; }
.news-item .txt h4 {
  font-size: 15px; font-weight: 600; color: var(--txt-1); line-height: 1.55;
  margin-bottom: 9px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: color .3s;
}
.news-item:hover .txt h4 { color: var(--blue-500); }
.news-item .txt time { font-size: 12.5px; color: var(--txt-4); letter-spacing: .03em; }
@media (max-width: 620px) {
  .news-hero, .news-hero-body { min-height: 300px; }
  .news-item .thumb { flex: 0 0 78px; width: 78px; height: 58px; }
}

/* ---------- 12. 视频区 ----------
   改动：原来封面是一整块深蓝纯色渐变（无画面），观感像"没加载出来"。
   现改为「影片真实画面截图 + 底部渐隐说明条 + 玻璃拟态播放键」：
   截图取自影片夜景航拍帧（成都双子塔 / 交子商圈），已裁掉片内字幕条与右上角品牌角标。 */
.video-wrap {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #070d1a;
  aspect-ratio: 16 / 9;
  box-shadow: 0 18px 48px rgba(21, 34, 66, .2);
}
.video-wrap video { width: 100%; height: 100%; object-fit: cover; }
/* 封面：真实画面 + 上浅下深的两段式遮罩，保证播放键与标题都可读 */
.video-poster {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer;
  background-image:
    linear-gradient(180deg, rgba(5, 11, 24, .52) 0%, rgba(5, 11, 24, .12) 30%, rgba(5, 11, 24, .06) 48%, rgba(4, 9, 20, .74) 82%, rgba(3, 7, 16, .92) 100%),
    url('../images/video/corp-poster.jpg');
  background-size: cover, cover;
  background-position: center, center 50%;
  background-repeat: no-repeat, no-repeat;
  transition: opacity .55s var(--ease), visibility .55s;
}
/* 中央柔光：托住播放键，弱化画面正中杂乱灯光 */
.video-poster::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(46% 52% at 50% 46%, rgba(5, 11, 24, .42), rgba(5, 11, 24, .14) 58%, transparent 100%);
}
/* 细扫描线：呼应站内科技质感，极淡不抢画面 */
.video-poster::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 100% 3px;
  opacity: .45;
}
.video-poster.hide { opacity: 0; visibility: hidden; }

/* 播放键：玻璃拟态 + 白色描边，摒弃原来的实心蓝大圆 */
.video-play {
  position: relative; z-index: 3;
  width: 82px; height: 82px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  background: rgba(255, 255, 255, .16);
  border: 1.5px solid rgba(255, 255, 255, .72);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  box-shadow: 0 14px 40px rgba(4, 10, 22, .44);
  transition: transform .45s var(--ease), background .35s, border-color .35s;
}
.video-poster:hover .video-play {
  transform: scale(1.09);
  background: var(--blue-500);
  border-color: transparent;
  box-shadow: 0 16px 44px rgba(19, 102, 236, .5);
}
.video-play::after {
  content: ''; position: absolute; inset: -11px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .46);
  animation: ring 2.8s var(--ease-soft) infinite;
}
.video-play svg { width: 27px; height: 27px; margin-left: 4px; }

/* 底部说明条：压在渐隐带上，左对齐落款 */
.video-poster h3 {
  position: absolute; z-index: 3;
  left: clamp(22px, 2.42vw, 44px); right: clamp(22px, 2.42vw, 44px);
  bottom: clamp(52px, 4.4vw, 76px);
  margin: 0;
  font-size: clamp(17px, 1.7vw, 23px); font-weight: 800;
  color: #fff; letter-spacing: -.01em;
  text-shadow: 0 2px 18px rgba(4, 10, 22, .7);
}
.video-poster p {
  position: absolute; z-index: 3;
  left: clamp(22px, 2.42vw, 44px); right: clamp(22px, 2.42vw, 44px);
  bottom: clamp(24px, 2.09vw, 38px);
  margin: 0;
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13.5px; color: rgba(255, 255, 255, .84); letter-spacing: .04em;
  text-shadow: 0 2px 12px rgba(4, 10, 22, .68);
}
.video-poster p::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: #ffffff; flex: 0 0 auto;
  animation: pulse 2.4s var(--ease-soft) infinite;
}
@media (max-width: 620px) {
  /* 移动端卡片高约 192px（16:9）：播放键缩小并上移，错开底部标题行，避免文字被按钮遮挡 */
  .video-play { width: 60px; height: 60px; margin-bottom: 58px; }
  .video-play svg { width: 20px; height: 20px; }
  .video-play::after { inset: -8px; }
  .video-poster h3 { bottom: 44px; font-size: 15.5px; }
  .video-poster p { bottom: 20px; font-size: 12.5px; }
  .video-poster { background-position: center, center 52%; }
}

/* ---------- 13. 时间轴 ---------- */
.tl-filters { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 44px; }
.tl-filter {
  padding: 9px 20px; border-radius: 100px;
  border: 1px solid var(--line);
  background: #ffffff;
  font-size: 13.5px; font-weight: 600; color: var(--txt-3);
  transition: all .35s var(--ease);
}
.tl-filter:hover { border-color: var(--blue-500); color: var(--blue-500); }
.tl-filter.on {
  background: var(--blue-500); color: #fff; border-color: transparent;
  box-shadow: 0 6px 18px rgba(19, 102, 236, .26);
}

.tl { position: relative; padding-left: 42px; }
.tl::before {
  content: ''; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px;
  background: linear-gradient(180deg, #1366ec, #7faef5 72%, transparent);
  border-radius: 2px;
}
.tl-item { position: relative; padding-bottom: 44px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ''; position: absolute; left: -40px; top: 9px;
  width: 13px; height: 13px; border-radius: 50%;
  background: #ffffff;
  border: 2.5px solid var(--blue-500);
  box-shadow: 0 0 0 5px rgba(19, 102, 236, .1);
  transition: all .4s var(--ease);
}
.tl-item:hover::before { background: var(--blue-500); border-color: var(--blue-500); box-shadow: 0 0 0 8px rgba(19, 102, 236, .14); }
.tl-item.hide { display: none; }

.tl-year {
  display: inline-flex; align-items: baseline; gap: 10px; margin-bottom: 14px;
}
.tl-year b {
  font-size: clamp(24px, 2.3vw, 36px); font-weight: 900; line-height: 1; letter-spacing: -.03em;
  color: var(--blue-500);
}
.tl-year em {
  font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .12em;
  padding: 4px 11px; border-radius: 100px;
  background: rgba(19, 102, 236, .07); border: 1px solid rgba(19, 102, 236, .16);
  color: var(--blue-500);
}
.tl-item h3 { font-size: clamp(16px, 1.5vw, 21px); font-weight: 700; color: var(--txt-1); margin-bottom: 14px; }
.tl-list { display: flex; flex-direction: column; gap: 12px; }
.tl-list li {
  position: relative; padding-left: 22px;
  font-size: 14.5px; line-height: 1.85; color: var(--txt-3);
}
.tl-list li::before {
  content: ''; position: absolute; left: 3px; top: .72em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--blue-400);
}
.tl-list li b { color: var(--txt-1); font-weight: 600; }
@media (max-width: 620px) { .tl { padding-left: 30px; } .tl-item::before { left: -28px; } .tl-item { padding-bottom: 34px; } }

/* ---------- 14. 环境网格 ---------- */
.env-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.env-item {
  position: relative; border-radius: var(--r-md); overflow: hidden;
  min-height: 178px;
  border: 1px solid var(--line);
  transition: all .5s var(--ease);
}
.env-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.env-item::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 20, 40, .05) 40%, rgba(10, 20, 40, .78) 100%);
  transition: opacity .45s;
}
.env-item span {
  position: absolute; left: 20px; bottom: 18px; z-index: 3;
  font-size: 15px; font-weight: 700; color: #fff;
  display: flex; align-items: center; gap: 9px;
}
.env-item span::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: #ffffff;
  opacity: 0; transform: translateX(-8px);
  transition: all .4s var(--ease);
}
.env-item:hover { border-color: rgba(19, 102, 236, .3); transform: translateY(-6px); }
.env-item:hover img { transform: scale(1.1); }
.env-item:hover::after { background: linear-gradient(180deg, rgba(10, 30, 70, .2) 20%, rgba(10, 20, 40, .85) 100%); }
.env-item:hover span::before { opacity: 1; transform: translateX(0); }
.env-item.big { grid-column: span 2; grid-row: span 2; min-height: 370px; }
.env-item.wide { grid-column: 1 / -1; min-height: 236px; }
@media (max-width: 980px) {
  .env-grid { grid-template-columns: repeat(2, 1fr); }
  .env-item.big { grid-column: span 2; grid-row: span 1; min-height: 220px; }
  /* 尾图为单数时撑满整行，避免右侧空洞 */
  .env-item:last-child { grid-column: span 2; min-height: 200px; }
  .env-item.wide { grid-column: 1 / -1; min-height: 200px; }
}
@media (max-width: 620px) {
  .env-grid { gap: 10px; }
  .env-item { min-height: 132px; }
  .env-item span { left: 13px; bottom: 11px; font-size: 13.5px; }
  .env-item.big { min-height: 180px; }
  .env-item.wide { min-height: 150px; }
}

/* ---------- 15. 荣誉滚动 ---------- */
.honor-view { overflow: hidden; position: relative; }
.honor-view::before, .honor-view::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 4; pointer-events: none;
}
.honor-view::before { left: 0; background: linear-gradient(90deg, #ffffff, transparent); }
.honor-view::after { right: 0; background: linear-gradient(270deg, #ffffff, transparent); }
.honor-track { display: flex; gap: 18px; width: max-content; animation: scrollX 52s linear infinite; }
.honor-view:hover .honor-track { animation-play-state: paused; }
.honor-item {
  flex: 0 0 232px; width: 232px;
  border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--line);
  background: #ffffff;
  transition: all .45s var(--ease);
}
.honor-item:hover { border-color: rgba(19, 102, 236, .26); transform: translateY(-6px); box-shadow: 0 14px 34px rgba(21, 34, 66, .1); }
.honor-item img { width: 100%; height: 150px; object-fit: cover; background: var(--ink-700); }
.honor-item span {
  display: block; padding: 14px 16px;
  font-size: 13px; line-height: 1.55; color: var(--txt-3);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 62px;
}
@media (max-width: 620px) { .honor-item { flex: 0 0 172px; width: 172px; } .honor-item img { height: 112px; } }

/* ---------- 16. 核心数据区 ---------- */
.stats-band {
  padding: 0;
  background: #ffffff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 2;
}
.stats-band .wrap { max-width: var(--maxw); padding: 0; }
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
}
.stat-item {
  position: relative;
  padding: clamp(44px, 4.5vw, 72px) clamp(20px, 2.5vw, 40px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.stat-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: var(--line-strong);
}
.stat-item b {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-size: clamp(36px, 3.8vw, 56px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--blue-500);
  white-space: nowrap;
}
.stat-item b em {
  font-style: normal;
  font-size: .48em;
  font-weight: 600;
  color: var(--blue-500);
}
.stat-item > span {
  display: block;
  margin-top: 14px;
  font-size: 15px;
  font-weight: 500;
  color: var(--txt-3);
  letter-spacing: .02em;
}
@media (max-width: 820px) {
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .stat-item:nth-child(2)::after { display: none; }
  .stat-item { padding: 36px 20px; }
  .stat-item:not(:last-child)::after { top: 18%; bottom: 18%; }
  .stat-item:nth-child(1)::after,
  .stat-item:nth-child(3)::after { display: block; }
  .stat-item:nth-child(2)::after,
  .stat-item:nth-child(4)::after { display: none; }
}
@media (max-width: 480px) {
  .stat-item { padding: 30px 16px; }
  .stat-item b { font-size: clamp(28px, 7.5vw, 40px); }
  .stat-item > span { font-size: 13px; margin-top: 10px; }
}

/* ---------- 17. 产业生态卡片 ---------- */
.eco-section {
  position: relative;
  padding: clamp(60px, 6vw, 100px) 0;
  background:
    radial-gradient(900px 500px at 95% 20%, rgba(8, 104, 247, .04), transparent 60%),
    radial-gradient(800px 460px at 5% 80%, rgba(8, 104, 247, .03), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #f5f8ff 50%, #ffffff 100%);
}

.sec-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(28px, 3vw, 48px);
}
.sec-head-row .sec-head-left { flex: 1; min-width: 0; }
.sec-head-row .eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--blue-500);
  margin-bottom: 14px;
  padding: 0;
  border: none;
  background: none;
}
.sec-head-row .eyebrow::before { display: none; }
.sec-head-row h2 {
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--txt-1);
}
.sec-head-row .sec-head-right { flex-shrink: 0; }

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 30px;
  border-radius: 100px;
  font-size: 15px;
  font-weight: 600;
  color: var(--blue-500);
  border: 1.5px solid var(--blue-500);
  background: #ffffff;
  transition: all .38s var(--ease);
}
.btn-outline:hover {
  background: var(--blue-500);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(8, 104, 247, .3);
}
.btn-outline svg { width: 16px; height: 16px; transition: transform .3s; }
.btn-outline:hover svg { transform: translateX(3px); }

/* 生态卡片网格 */
.eco-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2vw, 32px);
}
.eco-card {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--line);
  transition: all .5s var(--ease);
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.eco-card:hover {
  transform: translateY(-8px);
  border-color: rgba(8, 104, 247, .2);
  box-shadow: 0 24px 52px rgba(8, 30, 66, .12);
}
.eco-card-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ink-700);
}
.eco-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.eco-card:hover .eco-card-thumb img {
  transform: scale(1.06);
}
.eco-card-body {
  padding: clamp(20px, 2vw, 28px) clamp(20px, 2vw, 28px) clamp(22px, 2.2vw, 30px);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.eco-card-body h3 {
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 700;
  color: var(--txt-1);
  margin-bottom: 10px;
  letter-spacing: -.01em;
}
.eco-card-body p {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--txt-3);
  flex: 1;
}
.eco-card-arrow {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.eco-card-arrow span {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 104, 247, .08);
  transition: all .4s var(--ease);
}
.eco-card:hover .eco-card-arrow span {
  background: var(--blue-500);
  transform: translateX(4px);
}
.eco-card-arrow svg {
  width: 16px;
  height: 16px;
  color: var(--blue-500);
  transition: color .3s;
}
.eco-card:hover .eco-card-arrow svg {
  color: #fff;
}

@media (max-width: 1024px) {
  .eco-cards { grid-template-columns: repeat(2, 1fr); }
  .eco-card:last-child { grid-column: span 2; }
  .eco-card:last-child .eco-card-thumb { aspect-ratio: 21 / 10; }
}
@media (max-width: 640px) {
  .eco-cards { grid-template-columns: 1fr; }
  .eco-card:last-child { grid-column: span 1; }
  .eco-card:last-child .eco-card-thumb { aspect-ratio: 16 / 10; }
  .sec-head-row { flex-direction: column; align-items: flex-start; gap: 20px; }
}

/* ---------- 18. 新版集团介绍 ---------- */
.about-new {
  padding: clamp(60px, 6vw, 100px) 0;
  background: #ffffff;
}
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(24px, 3vw, 56px);
  align-items: center;
}
.about-title-block .eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--blue-500);
  margin-bottom: 16px;
  padding: 0;
  border: none;
  background: none;
}
.about-title-block .eyebrow::before { display: none; }
.about-title-block h2 {
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--txt-1);
  margin-bottom: 20px;
}
.about-title-block .title-line {
  width: 48px;
  height: 4px;
  background: var(--blue-500);
  border-radius: 2px;
}
.about-text-block {
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.9;
  color: var(--txt-3);
}
.about-text-block p { margin-bottom: 0; }
.about-text-block .about-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  font-size: 15px;
  font-weight: 600;
  color: var(--blue-500);
  transition: gap .3s;
}
.about-text-block .about-link:hover { gap: 14px; }
.about-text-block .about-link svg { width: 16px; height: 16px; }

.about-image-block {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 20px 50px rgba(8, 30, 66, .1);
  aspect-ratio: 5 / 4;
}
.about-image-block img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease);
}
.about-image-block:hover img {
  transform: scale(1.04);
}

@media (max-width: 1024px) {
  .about-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .about-image-block {
    grid-column: span 2;
    max-width: 600px;
    margin: 0 auto;
    aspect-ratio: 16 / 10;
  }
}
@media (max-width: 640px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .about-image-block {
    grid-column: span 1;
    max-width: 100%;
  }
  .about-title-block h2 { font-size: clamp(26px, 6.5vw, 36px); }
}

/* ---------- 19. 责任 ---------- */
.rsp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: clamp(16px, 1.39vw, 24px); }
.rsp-card {
  padding: clamp(24px, 2.01vw, 34px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: #ffffff;
  position: relative; overflow: hidden;
  transition: all .5s var(--ease);
}
.rsp-card::after {
  content: ''; position: absolute; top: -60px; right: -60px;
  width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(circle, rgba(19, 102, 236, .07), transparent 68%);
  transition: transform .7s var(--ease);
}
.rsp-card:hover { transform: translateY(-6px); border-color: rgba(19, 102, 236, .2); box-shadow: 0 16px 40px rgba(21, 34, 66, .1); }
.rsp-card:hover::after { transform: scale(1.5); }
.rsp-card h3 { position: relative; z-index: 2; font-size: 17.5px; font-weight: 700; color: var(--txt-1); margin-bottom: 14px; line-height: 1.5; }
.rsp-card p { position: relative; z-index: 2; font-size: 14.2px; line-height: 1.9; color: var(--txt-3); }
.rsp-quote {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px dashed var(--line);
  font-size: 13.5px; font-style: italic; color: var(--blue-500); line-height: 1.8;
}

/* ---------- 18. 联系 ---------- */
.contact-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(18px, 1.53vw, 26px); }
@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; } }

.contact-list { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.contact-row { display: flex; gap: 18px; align-items: flex-start; padding: clamp(20px, 1.67vw, 28px); background: #ffffff; transition: background .4s; }
.contact-row:hover { background: var(--ink-800); }
.contact-row .ic {
  flex: 0 0 42px; width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(19, 102, 236, .07);
  border: 1px solid rgba(19, 102, 236, .14);
}
.contact-row .ic svg { width: 19px; height: 19px; color: var(--blue-500); }
.contact-row small { display: block; font-size: 12px; color: var(--txt-4); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; }
.contact-row b { font-size: 15.5px; font-weight: 600; color: var(--txt-1); line-height: 1.6; }
.contact-row b a:hover { color: var(--blue-500); }

/* 地图 */
.map-box {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line); min-height: 400px;
  background:
    radial-gradient(700px 500px at 50% 40%, rgba(19, 102, 236, .06), transparent 68%),
    linear-gradient(160deg, #f7faff, #eef3fc);
}
.map-box::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(19, 102, 236, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(19, 102, 236, .05) 1px, transparent 1px);
  background-size: 40px 40px;
}
.map-pin {
  position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%);
  z-index: 4; text-align: center;
}
.map-pin-dot {
  width: 18px; height: 18px; border-radius: 50%; margin: 0 auto 16px;
  background: var(--blue-500); box-shadow: 0 0 0 8px rgba(19, 102, 236, .12);
  position: relative;
}
.map-pin-dot::after {
  content: ''; position: absolute; inset: -14px; border-radius: 50%;
  border: 1px solid rgba(19, 102, 236, .34);
  animation: ring 2.6s var(--ease-soft) infinite;
}
.map-pin b { display: block; font-size: 17px; font-weight: 800; color: var(--txt-1); }
.map-pin span { display: block; margin-top: 8px; font-size: 13px; color: var(--txt-3); }
.map-badge {
  position: absolute; left: 22px; top: 22px; z-index: 4;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 100px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--line);
  box-shadow: 0 4px 16px rgba(21, 34, 66, .07);
  font-size: 12.5px; color: var(--txt-2);
}
.map-badge i { font-style: normal; width: 6px; height: 6px; border-radius: 50%; background: #12b76a; }

/* 联系页地图：SDK 画布覆盖静态占位，配置缺失时保留占位文案和打开地图按钮。 */
.map-card { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: #f4f7fd; }
.map-container { position: relative; min-height: 360px; overflow: hidden; background: linear-gradient(160deg, #f7faff, #eef3fc); }
.tfxk-map-canvas { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; min-height: inherit; }
.map-card .map-compass,
.map-card .map-badge,
.map-card .map-empty,
.map-card .map-pin-card,
.map-card .map-pin-dot { position: relative; z-index: 2; }
.map-card .map-empty { display: flex; min-height: 360px; align-items: center; justify-content: center; padding: 0 32px; color: var(--txt-3); text-align: center; }
.map-card.tfxk-map-ready .map-empty,
.map-card.tfxk-map-ready .map-pin-card,
.map-card.tfxk-map-ready .map-pin-dot { display: none; }

/* ---------- 19. 加入我们 ---------- */
.join-panel {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl);
  padding: clamp(38px, 3.96vw, 76px) clamp(26px, 3.26vw, 68px);
  border: 1px solid var(--line);
  background:
    radial-gradient(760px 420px at 82% 12%, rgba(19, 102, 236, .07), transparent 62%),
    radial-gradient(620px 460px at 8% 86%, rgba(19, 102, 236, .05), transparent 64%),
    linear-gradient(150deg, #f6f9ff, #eef3fd 72%);
  text-align: center;
}
.join-panel > * { position: relative; z-index: 2; }
.join-panel h2 { font-size: clamp(22px, 2.2vw, 36px); font-weight: 900; line-height: 1.2; letter-spacing: -.025em; margin-bottom: 20px; color: var(--txt-1); }
.join-panel p { max-width: 720px; margin: 0 auto 34px; font-size: clamp(14.2px, 1.6vw, 16.5px); line-height: 1.95; color: var(--txt-3); }
.join-btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.join-tags { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 34px; }
.join-tags span {
  font-size: 12.5px; padding: 7px 16px; border-radius: 100px;
  background: #ffffff; border: 1px solid var(--line);
  color: var(--txt-3);
}

/* ---------- 20. 页脚（深蓝渐变 · 白字版）---------- */
.foot {
  position: relative;
  border-top: none;
  background: linear-gradient(160deg, #1a4296 0%, #102E73 42%, #0a1f52 100%);
  padding: clamp(48px, 4.38vw, 78px) 0 30px;
}
.foot::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(640px 340px at 86% 8%, rgba(90, 140, 235, .18), transparent 64%),
    radial-gradient(520px 320px at 4% 92%, rgba(70, 118, 220, .14), transparent 66%);
}
.foot > .wrap { position: relative; z-index: 1; }
.foot-grid {
  display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.25vw, 22px);
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
@media (max-width: 900px) { .foot-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; gap: 32px; } }

.foot-brand img { height: 44px; width: auto; margin-bottom: 20px; }
.foot-brand p { font-size: 13.8px; line-height: 1.9; color: rgba(255, 255, 255, .72); max-width: 340px; }
.foot-wx-card {
  display: inline-flex; align-items: center; gap: 14px; margin-top: 22px;
  padding: 10px 20px 10px 10px; border-radius: 14px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: all .38s var(--ease);
}
.foot-wx-card:hover {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .3);
  transform: translateY(-2px);
}
.foot-wx-card img {
  width: 78px; height: 78px; display: block; margin-bottom: 0;
  border-radius: 8px; background: #fff; padding: 4px;
}
/* 页脚二维码支持点击放大，焦点描边保证键盘操作时仍能定位当前控件。 */
.foot-wx-card .foot-wx-qr { cursor: zoom-in; }
.foot-wx-card .foot-wx-qr:focus-visible { outline: 3px solid rgba(120, 184, 255, .9); outline-offset: 3px; }
.foot-wx-card figcaption { display: flex; flex-direction: column; gap: 4px; }
.foot-wx-card b { font-size: 13.5px; font-weight: 600; color: #ffffff; }
.foot-wx-card span { font-size: 12px; color: rgba(255, 255, 255, .62); }

.foot-col h4 { font-size: 14.5px; font-weight: 700; color: #ffffff; margin-bottom: 20px; letter-spacing: .02em; }
.foot-col ul { display: flex; flex-direction: column; gap: 13px; }
.foot-col a { font-size: 13.8px; color: rgba(255, 255, 255, .78); transition: all .3s; }
.foot-col a:hover { color: #ffffff; padding-left: 5px; }
.foot-col li.plain { font-size: 13.8px; color: rgba(255, 255, 255, .78); line-height: 1.7; }

.foot-bottom {
  padding-top: 26px;
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: center; justify-content: space-between;
  font-size: 12.8px; color: rgba(255, 255, 255, .6);
}
.foot-bottom a { color: rgba(255, 255, 255, .6); transition: color .3s; }
.foot-bottom a:hover { color: #ffffff; }
.foot-bottom .links { display: flex; flex-wrap: wrap; gap: 18px; }

/* 回顶 */
.to-top {
  position: fixed; right: 26px; bottom: 28px; z-index: 800;
  width: 48px; height: 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: #ffffff;
  border: 1px solid var(--line);
  color: var(--txt-2);
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: all .4s var(--ease);
  box-shadow: 0 6px 20px rgba(21, 34, 66, .1);
}
.to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--blue-500); border-color: transparent; color: #fff; box-shadow: 0 10px 26px rgba(19, 102, 236, .3); }
.to-top svg { width: 19px; height: 19px; }
@media (max-width: 620px) { .to-top { right: 16px; bottom: 18px; width: 42px; height: 42px; } }

/* ---------- 21. 内页头 ---------- */
.page-head {
  position: relative; overflow: hidden;
  padding: calc(var(--nav-h) + clamp(26px, 2.6vw, 44px)) 0 clamp(44px, 4.31vw, 80px);
  background:
    radial-gradient(1000px 600px at 80% 0%, rgba(19, 102, 236, .07), transparent 62%),
    radial-gradient(800px 560px at 8% 90%, rgba(19, 102, 236, .05), transparent 64%),
    linear-gradient(180deg, #f7faff, #ffffff);
  border-bottom: 1px solid var(--line);
}
.page-head .wrap { position: relative; z-index: 3; }
.page-head h1 {
  font-size: clamp(26px, 3vw, 44px); font-weight: 900; line-height: 1.14; letter-spacing: -.03em;
  color: var(--txt-1); margin-bottom: 22px;
}
.page-head h1 .grad { color: var(--blue-500); }
.page-head p { max-width: 720px; font-size: clamp(14.5px, 1.7vw, 17px); line-height: 1.95; color: var(--txt-3); }

.crumb { display: flex; align-items: center; gap: 9px; margin-bottom: clamp(18px, 1.9vw, 30px); font-size: 13px; color: var(--txt-4); }
.crumb a:hover { color: var(--blue-500); }
.crumb svg { width: 12px; height: 12px; opacity: .6; }
.crumb b { color: var(--txt-2); font-weight: 500; }

/* 子页切换 tab */
.subnav {
  display: flex; flex-wrap: wrap; gap: 9px;
  padding: 14px; border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--ink-800);
  margin-bottom: clamp(14px, 1.18vw, 20px);
}
.subnav a {
  padding: 10px 22px; border-radius: 100px;
  font-size: 14px; font-weight: 600; color: var(--txt-3);
  transition: all .35s var(--ease);
  border: 1px solid transparent;
}
.subnav a:hover { color: var(--blue-500); background: rgba(19, 102, 236, .06); }
.subnav a.on {
  color: #fff; background: var(--blue-500);
  box-shadow: 0 6px 16px rgba(19, 102, 236, .24);
}

/* 业务详情块 */
.biz-block {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(14px, 1.32vw, 24px);
  padding: clamp(30px, 2.99vw, 56px);
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background: #ffffff;
  margin-bottom: clamp(14px, 1.25vw, 22px);
  position: relative; overflow: hidden;
  transition: border-color .5s, box-shadow .5s;
}
.biz-block:hover { border-color: rgba(19, 102, 236, .2); box-shadow: 0 16px 40px rgba(21, 34, 66, .08); }
.biz-block::before {
  content: ''; position: absolute; top: -90px; right: -90px;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(19, 102, 236, .06), transparent 68%);
  pointer-events: none;
}
/* 左侧品牌块：sticky 跟随，长文案时也能保持视觉重心 */
.biz-mark-wrap { position: relative; }
@media (min-width: 901px) {
  .biz-mark-wrap { position: sticky; top: calc(var(--nav-h) + 24px); align-self: start; }
  /* 关闭 grid 的等高拉伸，让 sticky 生效 */
  .biz-block { align-items: start; }
}
@media (max-width: 900px) { .biz-block { grid-template-columns: 1fr; gap: 26px; } }

.biz-mark {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: center;
  min-height: clamp(200px, 16.67vw, 280px);
  padding: clamp(26px, 2.22vw, 38px);
  border-radius: var(--r-lg);
  background: linear-gradient(150deg, #0d4fc4, #1366ec 60%, #2a7ef0);
  border: 1px solid transparent;
  overflow: hidden;
}
.biz-mark::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
  background-size: 30px 30px;
}
.biz-mark b {
  position: relative; z-index: 2;
  font-size: clamp(30px, 3vw, 46px); font-weight: 900; letter-spacing: .16em;
  color: #fff;
  padding-left: .16em;
}
.biz-mark span { position: relative; z-index: 2; margin-top: 14px; font-size: 12.5px; letter-spacing: .18em; color: rgba(255, 255, 255, .78); text-transform: uppercase; }
.biz-mark i {
  position: relative; z-index: 2; margin-top: 22px;
  font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .1em;
  padding: 6px 14px; border-radius: 100px; align-self: flex-start;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); color: #fff;
}
.biz-body { position: relative; z-index: 2; }
.biz-body h2 { font-size: clamp(19px, 1.9vw, 27px); font-weight: 800; color: var(--txt-1); margin-bottom: 20px; letter-spacing: -.015em; }
.biz-body p { font-size: 14.8px; line-height: 2; color: var(--txt-3); margin-bottom: 18px; }
.biz-body p:last-of-type { margin-bottom: 0; }
.biz-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 26px; margin: 24px 0 0; padding-top: 22px; border-top: 1px solid var(--line); }
.biz-kpi b {
  display: flex; align-items: baseline; gap: 1px;
  font-size: clamp(22px, 2.2vw, 32px); font-weight: 900; letter-spacing: -.03em;
  color: var(--blue-500);
  white-space: nowrap;
}
.biz-kpi b em { font-style: normal; font-size: .5em; }
/* 指标说明与数字节点共用 span，保持现有数字字号；仅对 TOP 文本单独收窄字号。 */
.biz-kpi span { display: block; margin-top: 6px; font-size: 15px; color: var(--txt-4); }
/* TOP 是无数字子节点的纯文本指标，字号与同组数字主值保持一致。 */
.biz-kpi b.biz-kpi-text { font-size: 15px; }
@media (max-width: 640px) { .biz-kpis { grid-template-columns: 1fr; gap: 16px; } }

/* 通用文本页 */
.text-page { max-width: 860px; }
.text-page h2 { font-size: clamp(20px, 2vw, 28px); font-weight: 800; color: var(--txt-1); margin: 44px 0 20px; letter-spacing: -.015em; }
.text-page h2:first-child { margin-top: 0; }
.text-page p { font-size: clamp(14.5px, 1.6vw, 16.3px); line-height: 2.05; color: var(--txt-3); margin-bottom: 20px; }
.text-page strong { color: var(--txt-1); font-weight: 600; }

/* 愿景卡 */
.vision-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 1.6vw, 28px); }
@media (max-width: 760px) { .vision-grid { grid-template-columns: 1fr; } }
.vision-card {
  position: relative; overflow: hidden;
  padding: clamp(28px, 2.57vw, 46px);
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background: var(--ink-800);
  transition: all .5s var(--ease);
}
.vision-card:hover { transform: translateY(-6px); border-color: rgba(19, 102, 236, .2); box-shadow: 0 16px 40px rgba(21, 34, 66, .09); }
.vision-card .tag { display: inline-block; margin-bottom: 20px; font-size: 11.5px; font-weight: 700; letter-spacing: .16em; color: var(--blue-500); text-transform: uppercase; }
.vision-card h3 { font-size: clamp(19px, 1.9vw, 26px); font-weight: 900; line-height: 1.4; color: var(--txt-1); letter-spacing: -.02em; margin-bottom: 18px; }
.vision-card p { font-size: 14.5px; line-height: 1.95; color: var(--txt-3); }
.vision-card .big {
  position: absolute; right: -14px; bottom: -34px;
  font-size: 132px; font-weight: 900; line-height: 1;
  color: rgba(19, 102, 236, .045);
  pointer-events: none; user-select: none;
  /* 有意溢出卡片边界（设计如此），不影响内容高度 */
}

/* 环保/责任清单 */
.chips-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chips-row span {
  font-size: 13px; padding: 8px 17px; border-radius: 100px;
  background: #ffffff; border: 1px solid var(--line); color: var(--txt-3);
}

/* ---------- 22. 滚动进场动画 ---------- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .85s var(--ease), transform .85s var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }
.reveal.d5 { transition-delay: .4s; }

/* 轻量入场：低端设备直接显示，保证滚动流畅 */
body.lite .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
body.lite .orb { animation: none !important; filter: blur(70px); }
body.lite .eco-ring::before, body.lite .eco-ring::after, body.lite .hero-card-play::before { animation: none !important; }
body.lite .honor-track { animation-duration: 90s; }

/* ---------- 23. 无障碍 / 打印 ---------- */
:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 3px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ============================================================
   24. 新闻中心 2.0 —— 全量文章列表 / 分类 / 搜索 / 分页
   ============================================================ */
.news-tools {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  justify-content: space-between; margin-bottom: clamp(14px, 1.18vw, 20px);
}
.news-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.news-tab {
  padding: 9px 18px; border-radius: 999px; font-size: 14px; font-weight: 600;
  background: #ffffff; border: 1px solid var(--line);
  color: var(--txt-3); cursor: pointer; transition: all .3s var(--ease);
}
.news-tab:hover { color: var(--blue-500); border-color: rgba(19, 102, 236, .3); }
.news-tab.on {
  color: #fff; border-color: transparent;
  background: var(--blue-500);
  box-shadow: 0 6px 16px rgba(19, 102, 236, .24);
}
.news-tab em { font-style: normal; opacity: .7; font-size: 12px; margin-left: 5px; }

.news-search { position: relative; min-width: 210px; flex: 0 1 250px; }
.news-search input {
  width: 100%; padding: 10px 38px 10px 15px; border-radius: 999px;
  background: #ffffff; border: 1px solid var(--line);
  color: var(--txt-1); font-size: 14px; outline: none; transition: all .3s var(--ease);
}
.news-search input::placeholder { color: var(--txt-4); }
.news-search input:focus { border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(19, 102, 236, .1); }
.news-search svg {
  position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--txt-4); pointer-events: none;
}

/* 新闻卡片网格 */
.news-grid {
  display: grid; gap: clamp(16px, 1.39vw, 24px);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.news-card {
  display: flex; flex-direction: column; overflow: hidden; border-radius: 18px;
  background: #ffffff;
  border: 1px solid var(--line); transition: all .45s var(--ease);
}
.news-card:hover { transform: translateY(-5px); border-color: rgba(19, 102, 236, .22); box-shadow: 0 16px 38px rgba(21, 34, 66, .1); }
.news-card .thumb {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--ink-700); flex: none;
}
.news-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.news-card:hover .thumb img { transform: scale(1.07); }
.news-card .thumb.noimg::after {
  content: "TFXK"; position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 30px; font-weight: 800; letter-spacing: .18em;
  color: rgba(19, 102, 236, .16);
}
.news-card .body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; gap: 9px; }
.news-card .meta { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--txt-4); }
.news-card .meta .tag {
  padding: 3px 10px; border-radius: 999px; color: var(--blue-500);
  background: rgba(19, 102, 236, .07); border: 1px solid rgba(19, 102, 236, .14); font-weight: 600;
}
.news-card h3 {
  font-size: 16.5px; line-height: 1.5; font-weight: 700; color: var(--txt-1);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.news-card p {
  font-size: 13.5px; line-height: 1.72; color: var(--txt-3);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: 1;
}
.news-card .more {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
  color: var(--blue-500); margin-top: 4px;
}
.news-card .more svg { width: 14px; height: 14px; transition: transform .35s var(--ease); }
.news-card:hover .more svg { transform: translateX(4px); }

.news-empty { text-align: center; padding: 70px 20px; color: var(--txt-3); font-size: 15px; }

/* 分页 */
.pager { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: clamp(14px, 1.18vw, 20px); }
.pager button, .pager span {
  min-width: 40px; height: 40px; padding: 0 12px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; cursor: pointer;
  background: #ffffff; border: 1px solid var(--line); color: var(--txt-3);
  transition: all .3s var(--ease);
}
.pager button:hover:not(:disabled) { color: var(--blue-500); border-color: rgba(19, 102, 236, .32); }
.pager button.on {
  color: #fff; border-color: transparent;
  background: var(--blue-500);
  box-shadow: 0 6px 16px rgba(19, 102, 236, .24);
}
.pager button:disabled { opacity: .32; cursor: not-allowed; }
.pager span { border: 0; background: none; cursor: default; }

/* 相关阅读 */
.news-related { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.related-item {
  padding: 15px 17px; border-radius: 13px; display: flex; flex-direction: column; gap: 7px;
  background: var(--ink-800); border: 1px solid var(--line); transition: all .35s var(--ease);
}
.related-item:hover { border-color: rgba(19, 102, 236, .22); background: rgba(19, 102, 236, .04); transform: translateX(4px); }
.related-item b { font-size: 14.5px; font-weight: 600; color: var(--txt-1); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.related-item time { font-size: 12.5px; color: var(--txt-4); }

/* ============================================================
   25. 文章详情页
   ============================================================ */
.article-head { padding: clamp(44px, 4.58vw, 88px) 0 clamp(22px, 1.94vw, 34px); }
.article-head h1 {
  font-size: clamp(23px, 2.4vw, 36px); line-height: 1.34; font-weight: 800;
  letter-spacing: -.015em; margin: 16px 0 18px; color: var(--txt-1); max-width: 880px;
}
.article-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  font-size: 13.5px; color: var(--txt-4);
}
.article-meta .tag {
  padding: 5px 13px; border-radius: 999px; color: var(--blue-500); font-weight: 600;
  background: rgba(19, 102, 236, .07); border: 1px solid rgba(19, 102, 236, .16);
}
.article-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--txt-4); }

.article-wrap { display: grid; gap: clamp(16px, 1.39vw, 24px); grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
.article-main { min-width: 0; }
.article-body {
  font-size: 16.5px; line-height: 2.05; color: var(--txt-2);
  background: #ffffff;
  border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
  padding: clamp(24px, 2.43vw, 46px);
}
.article-body p { margin-bottom: 1.35em; }
.article-body p:last-child { margin-bottom: 0; }
.article-body p:first-of-type { color: var(--txt-1); }
.article-body figure { margin: 26px 0; }
/* CMS 正文可能带有旧的固定 height 属性，移动端必须按原图比例自动计算高度，避免图片被纵向拉伸。 */
.article-body figure img { width: 100%; height: auto !important; border-radius: 14px; border: 1px solid var(--line); }
/* 新闻详情正文图片沿用环境图的放大交互，并由正文卡片裁剪溢出内容。 */
.article-body img {
  display: block;
  max-width: 100%;
  height: auto !important;
  cursor: zoom-in;
  transition: transform .9s var(--ease);
  transform-origin: center center;
}
@media (hover: hover) {
  .article-body img:hover { transform: scale(1.05); cursor: zoom-in; }
}
.article-body figcaption { text-align: center; font-size: 13px; color: var(--txt-4); margin-top: 10px; }
.article-body .lead::first-letter {
  float: left; font-size: 3.1em; line-height: .92; font-weight: 800; margin: 4px 12px 0 0;
  color: var(--blue-500);
}
.article-foot {
  margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center;
}
.article-foot .back {
  display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600;
  color: var(--blue-500); padding: 10px 20px; border-radius: 999px;
  border: 1px solid rgba(19, 102, 236, .2); background: rgba(19, 102, 236, .05);
  transition: all .3s var(--ease);
}
.article-foot .back:hover { background: rgba(19, 102, 236, .1); transform: translateX(-4px); }

.article-side { position: sticky; top: calc(var(--nav-h) + 24px); display: flex; flex-direction: column; gap: 18px; }
.side-card {
  padding: 22px; border-radius: 17px;
  background: var(--ink-800);
  border: 1px solid var(--line);
}
.side-card h4 {
  font-size: 14px; font-weight: 700; color: var(--txt-1); margin-bottom: 15px;
  display: flex; align-items: center; gap: 9px;
}
.side-card h4::before {
  content: ""; width: 3px; height: 15px; border-radius: 2px;
  background: var(--blue-500);
}
.side-list { display: flex; flex-direction: column; gap: 13px; }
.side-list a { font-size: 13.8px; line-height: 1.6; color: var(--txt-3); transition: color .3s var(--ease);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.side-list a:hover { color: var(--blue-500); }
.side-list time { display: block; font-size: 12px; color: var(--txt-4); margin-top: 4px; }
.side-cta {
  background: linear-gradient(150deg, rgba(19, 102, 236, .08), rgba(19, 102, 236, .04));
  border-color: rgba(19, 102, 236, .16);
}
.side-cta p { font-size: 13.5px; line-height: 1.75; color: var(--txt-3); margin-bottom: 15px; }

/* ============================================================
   25.1 招聘详情页
   复用文章详情页的色彩和间距，但为岗位概览、投递方式提供清晰层级。
   ============================================================ */
.job-detail-head { padding-bottom: clamp(30px, 3.2vw, 58px); }
.job-detail-intro {
  max-width: 720px; margin: 0; color: var(--txt-3); font-size: clamp(14.5px, 1.55vw, 17px); line-height: 1.9;
}
.job-detail-section { padding-bottom: clamp(56px, 8vw, 104px); }
.job-detail-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(16px, 1.39vw, 24px); align-items: start;
}
.job-detail-main { min-width: 0; }
.job-detail-card {
  background: #ffffff; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 10px 30px rgba(21, 34, 66, .035);
}
.job-detail-summary { padding: clamp(22px, 2.1vw, 34px); margin-bottom: 18px; }
.job-detail-card-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.job-detail-card-head .eyebrow { color: var(--blue-500); font-size: 11px; font-weight: 800; letter-spacing: .2em; }
.job-detail-card-head h2 { margin: 0; color: var(--txt-1); font-size: clamp(20px, 2vw, 27px); font-weight: 800; }
.job-detail-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.job-detail-fact {
  min-height: 76px; padding: 14px 16px; border-radius: 12px; background: var(--ink-800); border: 1px solid rgba(19, 102, 236, .08);
}
.job-detail-fact span { display: block; margin-bottom: 7px; color: var(--txt-4); font-size: 12.5px; }
.job-detail-fact b { display: block; color: var(--txt-1); font-size: 14px; line-height: 1.55; font-weight: 700; word-break: break-word; }
.job-detail-content { padding: clamp(24px, 2.43vw, 46px); color: var(--txt-2); }
.job-detail-content > div { margin-bottom: 13px; }
.job-detail-content > div:last-child { margin-bottom: 0; }
.job-detail-content strong { display: inline-block; margin-top: 10px; color: var(--txt-1); font-size: 17px; font-weight: 800; }
.job-detail-content strong:first-child { margin-top: 0; }
.job-detail-content a { color: var(--blue-500); font-weight: 600; }
.job-detail-foot { margin-top: 22px; padding-top: 0; border-top: 0; }
.job-detail-foot .btn { display: inline-flex; align-items: center; gap: 8px; }
.job-detail-foot .btn span { transition: transform .3s var(--ease); }
.job-detail-foot .btn:hover span { transform: translateX(4px); }
.job-detail-side { gap: 18px; }
.job-detail-contact { display: flex; flex-direction: column; gap: 13px; }
.job-detail-contact p { display: flex; flex-direction: column; gap: 3px; margin: 0; color: var(--txt-3); font-size: 13.5px; line-height: 1.65; }
.job-detail-contact span { color: var(--txt-4); font-size: 12px; }
.job-detail-contact b { color: var(--txt-2); font-weight: 600; }
.job-detail-contact a { color: var(--blue-500); font-weight: 700; }

@media (max-width: 980px) {
  .article-wrap, .job-detail-layout { grid-template-columns: 1fr; }
  .article-side { position: static; }
}
@media (max-width: 620px) {
  .news-grid { grid-template-columns: 1fr; }
  .news-tools { flex-direction: column; align-items: stretch; }
  .news-search { flex: 1 1 auto; }
  .article-body { font-size: 15.8px; line-height: 1.95; padding: 22px 18px; }
  .job-detail-card-head { display: block; }
  .job-detail-card-head .eyebrow { display: block; margin-bottom: 7px; }
  .job-detail-facts { grid-template-columns: 1fr 1fr; }
  .job-detail-summary { padding: 20px 16px; }
  .job-detail-content { padding: 22px 18px; }
  .job-detail-foot { align-items: stretch; flex-direction: column; }
  .job-detail-foot .back, .job-detail-foot .btn { justify-content: center; }
}

/* ============================================================
   26. 办公环境相册 / 团队风采
   注意：此处必须限定在 .env-panel 内，否则会与第 14 节 about 页
   的 .env-grid（env-item 布局）同名冲突，导致 about 移动端布局崩坏
   ============================================================ */
.env-panel .env-grid {
  display: grid; gap: clamp(14px, 1.18vw, 20px);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.env-card {
  position: relative; overflow: hidden; border-radius: 17px;
  border: 1px solid var(--line); aspect-ratio: 4 / 3; cursor: zoom-in;
  background: var(--ink-700);
}
.env-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.env-card:hover img { transform: scale(1.08); }
.env-card figcaption {
  position: absolute; inset: auto 0 0 0; padding: 34px 18px 16px;
  font-size: 14.5px; font-weight: 600; color: #fff;
  background: linear-gradient(180deg, transparent, rgba(10, 20, 40, .86));
}
.env-card figcaption em { display: block; font-style: normal; font-size: 11.5px; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255, 255, 255, .82); margin-top: 4px; font-weight: 600; }

.team-row { display: grid; gap: clamp(14px, 1.18vw, 20px); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.team-card {
  overflow: hidden; border-radius: 17px; border: 1px solid var(--line);
  background: #ffffff;
  transition: all .45s var(--ease);
}
.team-card:hover { transform: translateY(-5px); border-color: rgba(19, 102, 236, .22); box-shadow: 0 14px 34px rgba(21, 34, 66, .1); }
.team-card .thumb { aspect-ratio: 3 / 2; overflow: hidden; background: var(--ink-700); }
.team-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.team-card:hover .thumb img { transform: scale(1.07); }
.team-card .body { padding: 16px 19px 19px; }
.team-card h4 { font-size: 16px; font-weight: 700; color: var(--txt-1); margin-bottom: 6px; }
.team-card span { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-500); font-weight: 600; }

/* 图片灯箱 */
.lightbox {
  /* 预览层必须高于固定导航和移动抽屉，确保遮罩覆盖完整视口。 */
  position: fixed; inset: 0; z-index: 2000; display: none;
  place-items: center; padding: 5vw;
  background: rgba(10, 16, 28, .9);
}
.lightbox.on { display: grid; animation: lbIn .3s var(--ease); }
.lightbox img { max-width: 100%; max-height: 88vh; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .2); }
.lightbox button {
  position: absolute; top: 20px; right: 24px; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; color: #fff; font-size: 22px;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .26);
}
.lightbox button[hidden] { display: none; }
.lightbox .lb-prev,
.lightbox .lb-next {
  top: 50%; right: auto; width: 48px; height: 64px; border-radius: 14px;
  transform: translateY(-50%); font-size: 38px; line-height: 1; z-index: 1;
}
.lightbox .lb-prev { left: 24px; }
.lightbox .lb-next { right: 24px; }
.lightbox .lb-prev:hover,
.lightbox .lb-next:hover { transform: translateY(-50%) scale(1.06); }
.lightbox .lb-counter {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
  color: rgba(255, 255, 255, .82); font-size: 13px; letter-spacing: .08em;
}
.lightbox button:hover { background: rgba(255, 255, 255, .26); }
@keyframes lbIn { from { opacity: 0; } to { opacity: 1; } }

/* ============================================================
   27. 招聘岗位
   ============================================================ */
.job-grid { display: grid; gap: clamp(14px, 1.18vw, 20px); grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); }
.job-card {
  display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 17px;
  background: #ffffff;
  border: 1px solid var(--line); transition: all .45s var(--ease);
}
.job-card:hover { transform: translateY(-5px); border-color: rgba(19, 102, 236, .22); box-shadow: 0 14px 34px rgba(21, 34, 66, .1); }
.job-card .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.job-card h3 { font-size: 18px; font-weight: 700; color: var(--txt-1); }
.job-card .dept { font-size: 12.5px; color: var(--blue-500); font-weight: 600; letter-spacing: .04em; }
.job-card .tags { display: flex; flex-wrap: wrap; gap: 7px; }
.job-card .tags i {
  font-style: normal; font-size: 12px; padding: 4px 11px; border-radius: 999px;
  color: var(--txt-3); background: var(--ink-800); border: 1px solid var(--line);
}
.job-card .desc { font-size: 13.8px; line-height: 1.78; color: var(--txt-3); }
.job-card .desc ul { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.job-card .desc li { position: relative; padding-left: 15px; }
.job-card .desc li::before {
  content: ""; position: absolute; left: 0; top: .68em; width: 5px; height: 5px;
  border-radius: 50%; background: var(--blue-500);
}
.job-card .go {
  margin-top: auto; display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  font-size: 13.5px; font-weight: 600; color: var(--blue-500); padding-top: 4px;
}
.job-card .go svg { width: 14px; height: 14px; transition: transform .35s var(--ease); }
.job-card:hover .go svg { transform: translateX(4px); }

.benefit-grid { display: grid; gap: clamp(12px, 1.04vw, 18px); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.benefit {
  padding: 20px; border-radius: 15px; background: var(--ink-800);
  border: 1px solid var(--line); transition: all .4s var(--ease);
}
.benefit:hover { border-color: rgba(19, 102, 236, .2); background: rgba(19, 102, 236, .04); }
.benefit b { display: block; font-size: 15px; font-weight: 700; color: var(--txt-1); margin-bottom: 7px; }
.benefit span { font-size: 13.2px; line-height: 1.72; color: var(--txt-3); }

.ladder { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ladder i {
  font-style: normal; font-size: 13.5px; font-weight: 600; padding: 9px 17px; border-radius: 999px;
  color: var(--txt-2); background: #ffffff; border: 1px solid var(--line);
}
.ladder i.peak { color: #fff; border-color: transparent; background: var(--blue-500); }
.ladder span { color: var(--txt-4); font-size: 13px; }

/* ============================================================
   28. 通用 CTA 横幅
   ============================================================ */
.cta-band {
  display: flex; flex-wrap: wrap; gap: clamp(14px, 1.32vw, 24px);
  align-items: center; justify-content: space-between;
  padding: clamp(28px, 2.64vw, 48px) clamp(24px, 2.64vw, 52px); border-radius: 22px;
  background: linear-gradient(120deg, #0d4fc4, #1366ec 62%, #2a7ef0);
  border: 1px solid transparent;
  position: relative; overflow: hidden;
}
.cta-band h2 { font-size: clamp(19px, 1.9vw, 27px); font-weight: 800; color: #fff; margin-bottom: 10px; letter-spacing: -.01em; }
.cta-band p { font-size: 14.5px; line-height: 1.75; color: rgba(255, 255, 255, .82); max-width: 620px; }
.cta-band-act { display: flex; flex-wrap: wrap; gap: 12px; position: relative; z-index: 1; }
.cta-band .btn-primary { background: #ffffff; color: var(--blue-600); box-shadow: 0 6px 18px rgba(10, 30, 70, .18); }
.cta-band .btn-primary:hover { background: #ffffff; color: var(--blue-600); box-shadow: 0 10px 26px rgba(10, 30, 70, .24); }
.cta-band .btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.cta-band .btn-ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .7); }

/* ============================================================
   29. 数据事实格（办公环境 / 通用）
   ============================================================ */
.fact-grid { display: grid; gap: clamp(12px, 1.04vw, 18px); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.fact {
  padding: 22px 20px; border-radius: 16px; text-align: center;
  background: var(--ink-800);
  border: 1px solid var(--line); transition: all .4s var(--ease);
}
.fact:hover { border-color: rgba(19, 102, 236, .2); background: rgba(19, 102, 236, .04); transform: translateY(-4px); }
.fact b {
  display: flex; align-items: baseline; justify-content: center; gap: 2px; white-space: nowrap;
  font-size: clamp(24px, 2.3vw, 36px); font-weight: 800; line-height: 1.1;
  color: var(--blue-500);
}
.fact b span { font-size: .5em; font-weight: 700; }
.fact > span { display: block; margin-top: 9px; font-size: 13px; color: var(--txt-3); }

/* ============================================================
   30. 发展历程 2.0 —— 紧凑卡片网格（替代超长单列时间轴）
   ============================================================ */
.era-bar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  justify-content: space-between; margin-bottom: clamp(22px, 1.88vw, 32px);
}
.era-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.era-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 17px; border-radius: 999px; cursor: pointer;
  font-size: 13.5px; font-weight: 600; color: var(--txt-3);
  background: #ffffff; border: 1px solid var(--line);
  transition: all .3s var(--ease);
}
.era-tab:hover { color: var(--blue-500); border-color: rgba(19, 102, 236, .3); }
.era-tab.on {
  color: #fff; border-color: transparent;
  background: var(--blue-500);
  box-shadow: 0 6px 16px rgba(19, 102, 236, .24);
}
.era-tab i {
  font-style: normal; font-size: 11.5px; font-weight: 700; padding: 2px 8px;
  border-radius: 999px; background: rgba(255, 255, 255, .22);
}
.era-tab:not(.on) i { background: rgba(19, 102, 236, .08); color: var(--blue-500); }

.era-hint { font-size: 13px; color: var(--txt-4); }

/* 阶段进度条 */
.era-progress {
  position: relative; height: 3px; border-radius: 3px; margin-bottom: clamp(24px, 2.01vw, 34px);
  background: linear-gradient(90deg, #1366ec, #7faef5 78%, rgba(127, 174, 245, .3));
  opacity: .65;
}
.era-progress::after {
  content: ""; position: absolute; right: 0; top: 50%; transform: translate(50%, -50%);
  width: 11px; height: 11px; border-radius: 50%; background: var(--blue-500);
  box-shadow: 0 0 0 5px rgba(19, 102, 236, .12);
}

/* 卡片网格：两列，条目紧凑 */
.era-grid {
  display: grid; gap: clamp(14px, 1.18vw, 20px);
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  align-items: start;
}
.era-card {
  position: relative; overflow: hidden;
  padding: clamp(18px, 1.46vw, 24px); border-radius: 17px;
  background: #ffffff;
  border: 1px solid var(--line);
  transition: all .42s var(--ease);
}
.era-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--blue-500);
  opacity: .9;
}
.era-card:hover {
  transform: translateY(-4px);
  border-color: rgba(19, 102, 236, .22);
  box-shadow: 0 14px 32px rgba(21, 34, 66, .09);
}
.era-card.hide { display: none; }

.era-card .top {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.era-card .yr {
  font-size: clamp(19px, 1.9vw, 27px); font-weight: 900; line-height: 1;
  letter-spacing: -.03em;
  color: var(--blue-500);
}
.era-card .ver {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; font-style: normal;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
  color: var(--blue-500); background: rgba(19, 102, 236, .07);
  border: 1px solid rgba(19, 102, 236, .16);
}
.era-card h3 {
  font-size: 15.5px; font-weight: 700; color: var(--txt-1);
  line-height: 1.55; margin-bottom: 12px;
}
.era-card ul { display: flex; flex-direction: column; gap: 8px; }
.era-card li {
  position: relative; padding-left: 16px;
  font-size: 13.6px; line-height: 1.78; color: var(--txt-3);
}
.era-card li::before {
  content: ""; position: absolute; left: 2px; top: .68em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--blue-500);
}
.era-card li b { color: var(--txt-1); font-weight: 600; }

/* 里程碑速览条 */
.milestones {
  display: grid; gap: 12px; margin-bottom: clamp(26px, 2.22vw, 38px);
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
}
.mile {
  padding: 18px 16px; border-radius: 15px; text-align: center;
  background: var(--ink-800); border: 1px solid var(--line);
  transition: all .4s var(--ease);
}
.mile:hover { border-color: rgba(19, 102, 236, .2); background: rgba(19, 102, 236, .04); }
.mile b {
  display: block; font-size: 22px; font-weight: 900; line-height: 1.1;
  color: var(--blue-500);
}
.mile span { display: block; margin-top: 7px; font-size: 12.5px; color: var(--txt-3); line-height: 1.6; }

@media (max-width: 620px) {
  .era-grid { grid-template-columns: 1fr; }
  .era-bar { flex-direction: column; align-items: stretch; }
  .mile b { font-size: 20px; }
}

/* ============================================================
   25. 字号收减层 —— 对标 west.cn（西部数码）字号体系
   ------------------------------------------------------------
   参考站实测（1440 视口）：
     h1 28px / h2 18px / h3 24px / 正文 14px / 导航 14px / 按钮 14px
   本站改为：大标题适度收，正文收到 14px 档，正文类不再随视口放大。
   本层为纯覆盖层，集中管理便于回滚；如需还原直接删除本段。
   ============================================================ */

/* ---------- 25.1 基准：正文 16 → 15，行高同步收紧 ---------- */
body { font-size: 15px; line-height: 1.72; }

/* ---------- 25.2 标题层级（收减约 18~24%）---------- */
/* 区块主标题：40 → 32 */
.sec-title { font-size: clamp(21px, 2.05vw, 32px); }
/* Hero 主标题：52 → 44 */
.hero-title { font-size: clamp(26px, 2.86vw, 44px); }
/* 页面头 h1：44 → 36 */
.page-head h1 { font-size: clamp(23px, 2.6vw, 36px); }
/* 大号分区标题 */
.eco-info h3 { font-size: clamp(16px, 1.58vw, 22px); }
.news-hero-body h3 { font-size: clamp(16px, 1.65vw, 23px); }
.biz-body h2 { font-size: clamp(17px, 1.68vw, 24px); }
.text-page h2 { font-size: clamp(18px, 1.75vw, 25px); }
.vision-card h3 { font-size: clamp(17px, 1.68vw, 23px); }
.cta-band h2 { font-size: clamp(17px, 1.68vw, 24px); }
.join-panel h2 { font-size: clamp(19px, 1.92vw, 31px); }
.video-poster h3 { font-size: clamp(16px, 1.5vw, 21px); }
.card h3 { font-size: clamp(15px, 1.36vw, 19px); }
.tl-item h3 { font-size: clamp(15px, 1.36vw, 19px); }
.eco-node b { font-size: clamp(11px, 1.25vw, 12.5px); }

/* ---------- 25.3 正文类：改为固定 14px 档，不再随视口放大 ---------- */
.sec-desc { font-size: 14.5px; }
.hero-sub { font-size: 15.5px; }
.prose p { font-size: 14.5px; }
.page-head p { font-size: 15px; }
.join-panel p { font-size: 14px; }
.text-page p { font-size: 14.5px; }
.card p { font-size: 14px; }
.eco-info p { font-size: 14px; }
.brand-body p { font-size: 14px; }
.biz-body p { font-size: 14px; }
.rsp-card p { font-size: 14px; }
.news-hero-body p { font-size: 14px; }
.vision-card p { font-size: 14px; }
.cta-band p { font-size: 14px; }

/* ---------- 25.4 数值 / 指标 ---------- */
.stat-cell b { font-size: clamp(21px, 2.05vw, 32px); }
.number-cell b { font-size: clamp(24px, 2.4vw, 36px); }
.hero-stat b { font-size: clamp(20px, 1.9vw, 29px); }
.biz-kpi b { font-size: clamp(22px, 2.2vw, 32px); }
.fact b { font-size: clamp(21px, 1.98vw, 31px); }
.eco-center b { font-size: clamp(15px, 1.36vw, 19px); }
.mile b { font-size: 20px; }
.brand-name { font-size: 28px; }
.map-pin b { font-size: 15.5px; }

/* ---------- 25.5 装饰性大水印数字 ---------- */
.card-num { font-size: 40px; }
.vision-card .big { font-size: 112px; }
.biz-mark b { font-size: clamp(26px, 2.6vw, 40px); }

/* ---------- 25.6 导航空调（west.cn 导航 14px）---------- */
.nav-menu > li > a { font-size: 14px; }
.nav-menu > li > a { padding: 10px 10px; }
.nav-logo-txt b { font-size: 15px; }
.nav-drop a { font-size: 13.5px; }

/* ---------- 25.7 卡片标题 / 新闻 / 时间线 ---------- */
.news-item .txt b { font-size: 14.5px; }
.news-card h3 { font-size: 15.5px; }
.job-card h3 { font-size: 16.5px; }
.article-body h2 { font-size: clamp(21px, 2.15vw, 32px); }
.article-body h3 { font-size: 17px; }
.article-body { font-size: 15.5px; }
.article-body .lead { font-size: 15.5px; }
.article-body .lead::first-letter { font-size: 2.9em; }
.related-item b { font-size: 14px; }

/* ---------- 25.8 文章排版（PC 阅读宽度同步收窄）---------- */
.prose { font-size: 14.5px; }

/* ---------- 25.9 移动端：小屏再退一档，避免标题压屏 ---------- */
@media (max-width: 620px) {
  .sec-title { font-size: 21px; }
  .hero-title { font-size: 27px; }
  .page-head h1 { font-size: 23px; }
  .eco-info h3, .news-hero-body h3, .biz-body h2, .text-page h2,
  .vision-card h3, .cta-band h2, .video-poster h3 { font-size: 17px; }
  .join-panel h2 { font-size: 20px; }
  .card h3, .tl-item h3 { font-size: 15px; }
  .article-body h2 { font-size: 21px; }
  .stat-cell b { font-size: 22px; }
  .number-cell b { font-size: 26px; }
  .brand-name { font-size: 24px; }
  .brand-top { padding: 28px 18px; }
  .brand-body h3 { font-size: 16px; }
  .brand-body p { font-size: 13.5px; }
  .brand-body { padding: 20px 18px; }
  .card-num { font-size: 34px; }
}

/* ============================================================
   26. 集团旗下四大业务品牌 —— 一行并列显示
   ------------------------------------------------------------
   原 auto-fit + minmax(300px,1fr) 在 1440 下只能排 3 列会折行，
   改为固定 4 列，并收紧文字密度以适配 320px 左右卡宽。
   窄屏按 4 → 2 → 1 降级，保证可读性。
   ============================================================ */
.brand-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.18vw, 20px);
}
.brand-top { padding: clamp(30px, 2.42vw, 40px) clamp(18px, 1.36vw, 24px); }
.brand-body { padding: clamp(18px, 1.44vw, 24px); }
.brand-body h3 { font-size: 16.5px; margin-bottom: 11px; line-height: 1.45; }
.brand-body p { font-size: 13.5px; line-height: 1.8; }
.brand-meta { gap: 6px; margin: 14px 0 16px; }
.brand-meta span { font-size: 11.5px; padding: 4px 10px; }
.brand-body .tlink { font-size: 13.5px; }

/* 四列 → 两列 → 单列 降级 */
@media (max-width: 1180px) {
  .brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .brand-grid { grid-template-columns: 1fr; }
  .brand-name { font-size: 26px; }
  .brand-body h3 { font-size: 16px; }
  .brand-body p { font-size: 14px; }
}

/* ============================================================
   27. 办公环境图库 —— 分类切换 + 响应式相册
   ------------------------------------------------------------
   数据源自手机站 m.tfxk.com（style-2 系列 8 个分类子页），
   共 74 张实拍图，按 8 个分类归档。
   排版要点：卡片固定 4:3 比例避免高度参差；分类切换仅隐藏/显示，
   不重建 DOM，保证灯箱与进场动画的绑定不失效。
   ============================================================ */

/* ---------- 27.1 分类切换条 ---------- */
.env-tabs {
  display: flex; flex-wrap: wrap; gap: 9px;
  margin: clamp(20px, 1.76vw, 30px) 0 clamp(20px, 1.9vw, 32px);
}
.env-tab {
  display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 9px 17px; border-radius: 11px;
  border: 1px solid var(--line);
  background: #ffffff;
  color: var(--txt-2);
  font-family: inherit; font-size: 14px; font-weight: 600;
  line-height: 1.3; cursor: pointer;
  transition: all .32s var(--ease);
}
.env-tab em {
  font-style: normal; font-size: 10px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--txt-4); transition: color .32s;
}
.env-tab:hover { border-color: rgba(19, 102, 236, .34); color: var(--blue-500); transform: translateY(-2px); }
.env-tab:hover em { color: var(--blue-500); }
.env-tab.on {
  background: var(--blue-500); border-color: transparent; color: #fff;
  box-shadow: 0 6px 16px rgba(19, 102, 236, .24);
}
.env-tab.on em { color: rgba(255, 255, 255, .8); }
.env-tab:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 3px; }

/* ---------- 27.2 图组面板 ---------- */
.env-panel { display: none; }
.env-panel.show { display: block; }

/* 分类提示条：显示当前分类与张数 */
.env-hint {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-bottom: clamp(14px, 1.32vw, 20px);
  font-size: 13.5px; color: var(--txt-3);
}
.env-hint b { color: var(--txt-1); font-weight: 700; }
.env-hint i {
  font-style: normal; padding: 2px 9px; border-radius: 100px;
  background: rgba(19, 102, 236, .08); color: var(--blue-500);
  font-size: 12px; font-weight: 700;
}

/* ---------- 27.3 相册网格（分类内）----------
   固定 4:3 比例 + 统一列宽，图片再多也不会参差 */
.env-panel .env-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(11px, 1.06vw, 18px);
}
.env-panel .env-card { aspect-ratio: 4 / 3; }

/* ---------- 27.4 响应式降级 ---------- */
@media (max-width: 1180px) {
  .env-panel .env-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .env-panel .env-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .env-tab { padding: 8px 14px; font-size: 13.5px; }
  .env-tab em { font-size: 9.5px; }
}
@media (max-width: 480px) {
  .env-tabs { gap: 7px; }
  .env-tab { padding: 7px 12px; font-size: 13px; border-radius: 9px; }
  .env-tab em { display: none; }
  .env-panel .env-grid { gap: 10px; }
  .env-card figcaption { padding: 26px 13px 12px; font-size: 13px; }
  .env-card figcaption em { font-size: 10.5px; }
}

/* ==========================================================================
   28. 版块背景节奏重构
   --------------------------------------------------------------------------
   问题：首页自 #tech 往下连续 6 个 section 共用同一套「白 → 极淡蓝」渐变，
        版块之间没有任何视觉边界，整片看过去就是"一大块白色"。
   方案：给每个 section 一个明确的"底色身份"，形成 浅/深/卡 的交替节奏：
        · brand-bg   —— 浅蓝实底，托住白色卡片（四大品牌、数据总览）
        · tech-bg    —— 深蓝渐变实底 + 网格底纹，作为首页唯一的深色锚点
        · video-bg   —— 由视频区自带的深色块承担视觉重量，外底保持纯白
        · news-bg    —— 纯白 + 顶部细分隔线
        · join-bg    —— 深蓝大圆角面板，收束整页
   所有 section 统一获得一条"分段装饰线"，避免相邻版块糊在一起。
   ========================================================================== */

/* ---------- 28.1 通用版块分割：细线 + 居中渐变，替代原来的无边界 ---------- */
.sec + .sec::before {
  content: ''; position: absolute; z-index: 1;
  top: 0; left: 0; right: 0; height: 1px;
  background: var(--grad-line);
  pointer-events: none;
}
/* 深色版块不画浅色线 */
.tech-bg::before, .join-bg::before { background: rgba(255, 255, 255, .08); }

/* ---------- 28.2 浅蓝实底：四大品牌 / 数据总览 ---------- */
.brand-bg {
  background:
    radial-gradient(900px 520px at 92% 4%, rgba(19, 102, 236, .075), transparent 62%),
    radial-gradient(760px 460px at 4% 96%, rgba(19, 102, 236, .055), transparent 60%),
    var(--ink-800);
}
.brand-bg::after {
  content: ''; position: absolute; z-index: 1; inset: 0;
  background-image:
    linear-gradient(rgba(19, 102, 236, .034) 1px, transparent 1px),
    linear-gradient(90deg, rgba(19, 102, 236, .034) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(80% 70% at 50% 40%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000 30%, transparent 100%);
  pointer-events: none;
}

/* ---------- 28.3 深蓝科技底：技术驱动（首页唯一深色锚点） ---------- */
.tech-bg {
  background: linear-gradient(158deg, #0b1f47 0%, #10306e 46%, #0d2757 100%);
  overflow: hidden;
}
.tech-bg .sec-title { color: #ffffff; }
.tech-bg .sec-desc { color: rgba(226, 236, 255, .8); }
.tech-bg .eyebrow {
  color: #b9d2ff;
  border-color: rgba(140, 178, 255, .34);
  background: rgba(120, 165, 255, .13);
}
/* 网格底纹 + 顶部光带，科技感来源 */
.tech-bg::after {
  content: ''; position: absolute; z-index: 1; inset: 0;
  background-image:
    linear-gradient(rgba(140, 178, 255, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 178, 255, .09) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(96% 82% at 50% 0%, #000 12%, transparent 92%);
  -webkit-mask-image: radial-gradient(96% 82% at 50% 0%, #000 12%, transparent 92%);
  pointer-events: none;
}
.tech-bg .wrap::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  top: -180px; left: 50%; transform: translateX(-50%);
  width: 900px; height: 420px;
  background: radial-gradient(closest-side, rgba(59, 130, 246, .34), transparent 100%);
  filter: blur(18px);
}
/* 深色底上的卡片：玻璃质感，白字 */
.tech-bg .card {
  background: rgba(255, 255, 255, .055);
  border-color: rgba(150, 185, 255, .19);
  box-shadow: 0 10px 30px rgba(4, 10, 26, .3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.tech-bg .card:hover {
  background: rgba(255, 255, 255, .095);
  border-color: rgba(150, 185, 255, .42);
  box-shadow: 0 18px 42px rgba(4, 10, 26, .42);
}
.tech-bg .card h3 { color: #ffffff; }
.tech-bg .card p { color: rgba(216, 228, 250, .78); }
.tech-bg .card-num { color: rgba(150, 185, 255, .19); }
.tech-bg .card-ico {
  background: rgba(140, 178, 255, .14);
  border-color: rgba(150, 185, 255, .26);
  color: #9dc0ff;
}
.tech-bg .card:hover .card-ico { background: var(--blue-500); border-color: transparent; color: #fff; }

/* ---------- 28.4 纯白 + 顶线：新闻中心 ---------- */
.news-bg {
  background:
    radial-gradient(760px 420px at 8% 0%, rgba(19, 102, 236, .05), transparent 62%),
    #ffffff;
}

/* ---------- 28.6 深蓝收束面板：加入我们 ---------- */
.join-bg {
  background: #ffffff;
}
.join-bg .join-panel {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, #0c2149 0%, #123a80 52%, #0e2a5c 100%);
  border: none;
  box-shadow: 0 26px 68px rgba(12, 33, 73, .3);
}
.join-bg .join-panel::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(150, 185, 255, .075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150, 185, 255, .075) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(86% 96% at 50% 0%, #000 22%, transparent 92%);
  -webkit-mask-image: radial-gradient(86% 96% at 50% 0%, #000 22%, transparent 92%);
}
.join-bg .join-panel > * { position: relative; z-index: 2; }
.join-bg .join-panel .eyebrow {
  color: #b9d2ff;
  border-color: rgba(140, 178, 255, .34);
  background: rgba(120, 165, 255, .13);
}
.join-bg .join-panel h2 { color: #ffffff; }
.join-bg .join-panel p { color: rgba(216, 228, 250, .82); }
.join-bg .join-panel .btn-ghost {
  color: #ffffff;
  border-color: rgba(255, 255, 255, .46);
  background: rgba(255, 255, 255, .07);
}
.join-bg .join-panel .btn-ghost:hover {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .72);
  color: #ffffff;
}
.join-bg .join-tags span {
  color: rgba(216, 228, 250, .9);
  background: rgba(255, 255, 255, .09);
  border-color: rgba(150, 185, 255, .22);
}

/* ---------- 28.7 版块头部在深色底上的统一处理 ---------- */
.tech-bg .sec-head.center .sec-desc { max-width: 760px; margin-left: auto; margin-right: auto; }

/* ---------- 28.8 移动端：底纹降密，避免小屏发花 ---------- */
@media (max-width: 620px) {
  .brand-bg::after, .tech-bg::after, .join-bg .join-panel::after { background-size: 40px 40px; }
  .tech-bg .wrap::before { width: 520px; height: 280px; top: -120px; }
}

/* ---------- 28.9 技术区卡片：3×2 均衡网格（原 auto-fit 在 1440 下是 4+2 断腰） ---------- */
@media (min-width: 981px) {
  .tech-bg .grid.g-auto { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* eyebrow 芯片在深蓝底上加深填充，保证可读 */
.tech-bg .eyebrow, .join-bg .join-panel .eyebrow {
  color: #cfe0ff;
  border-color: rgba(150, 185, 255, .4);
  background: rgba(19, 102, 236, .26);
}
.tech-bg .eyebrow::before, .join-bg .join-panel .eyebrow::before { background: #8fb6ff; }

/* ---------- 28.10 事业群卡片：4 / 2 / 1 列阶梯，避免中间断点留孤行 ---------- */
/* 1024 附近 auto-fit 会掉到 3 列、末行只剩 2 张；这里强制 2 列更整齐 */
@media (min-width: 861px) and (max-width: 1100px) {
  .sec .grid.g-auto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 28.11 视频区：浅蓝底托住深色视频块，与相邻的新闻纯白区区分 ---------- */
.video-bg {
  background:
    radial-gradient(880px 480px at 50% 0%, rgba(19, 102, 236, .07), transparent 64%),
    var(--ink-800);
}

/* ==========================================================================
   29. 集团关键数据（首页 #about 的 .stat-panel）：字号放大到 3 倍
   --------------------------------------------------------------------------
   原始尺寸（收减后）：数值 clamp(21px, 2.05vw, 32px) / 标签 13px
   放大 3 倍后：        数值 clamp(63px, 6.15vw, 96px) / 标签 39px
   说明：clamp 的上下限与中间值同步 ×3，保持原来的响应式缩放曲线不变；
        同时收紧内边距、行高与字距，避免超大字号把面板撑破。
   ========================================================================== */
.stat-cell { padding: clamp(18px, 1.5vw, 26px); }
.stat-cell b {
  font-size: clamp(63px, 6.15vw, 96px);
  line-height: .96;
  letter-spacing: -.045em;
  gap: 2px;
}
.stat-cell b em { font-size: .42em; }
.stat-cell > span {
  margin-top: 12px;
  font-size: 39px;
  line-height: 1.28;
  letter-spacing: -.02em;
  color: var(--txt-3);
}

/* 小屏：3 倍后双列放不下，改为单列，并给字号设一个可用的上限 */
@media (max-width: 980px) {
  .stat-cell b { font-size: clamp(60px, 9vw, 88px); }
  .stat-cell > span { font-size: 34px; }
}
@media (max-width: 620px) {
  .stat-panel { grid-template-columns: 1fr; }
  .stat-cell { padding: 22px 20px; }
  .stat-cell b { font-size: clamp(56px, 16vw, 76px); }
  .stat-cell > span { font-size: 27px; margin-top: 10px; }
}

/* ==========================================================================
   30. 人才理念（culture.html #talent）版块重排
   --------------------------------------------------------------------------
   原问题：
     · 左文右卡用 .split + align-items:center，左列仅 404px、右列高达 997px，
       居中后左列被压到中线，标题上方留下近 300px 空白；
     · 右侧 4 张卡片单列竖排，又高又窄，与左侧正文完全不成比例。
   方案：
     · 标题与导语升为整行 sec-head，左文右卡从此在同一水平线上起跑；
     · 4 张卡片改为 2×2 网格，高度大幅压缩，与左栏正文形成对等体量；
     · 卡片改用轻量描边样式（小图标 + 标题 + 说明），与左栏文字重量相称。
   ========================================================================== */

.talent-body {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.18fr);
  gap: clamp(26px, 3vw, 54px);
  align-items: start;
}

/* 左栏正文：与卡片首行对齐，行距略收 */
.talent-prose p {
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--txt-3);
  margin-bottom: 18px;
}
.talent-prose p:last-child { margin-bottom: 0; }
.talent-prose strong { color: var(--txt-1); font-weight: 600; }

/* 右栏：2×2 卡片矩阵 */
.talent-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.15vw, 17px);
}

.talent-card {
  position: relative;
  padding: clamp(18px, 1.55vw, 24px);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: #ffffff;
  overflow: hidden;
  transition: transform .45s var(--ease), border-color .4s, box-shadow .45s, background .4s;
}
/* 顶部一条主色细线，悬停时展开 —— 取代原来笨重的大图标块 */
.talent-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--blue-500);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease);
}
.talent-card:hover {
  transform: translateY(-4px);
  border-color: rgba(19, 102, 236, .26);
  box-shadow: 0 14px 34px rgba(21, 34, 66, .1);
}
.talent-card:hover::before { transform: scaleX(1); }

.talent-ico {
  width: 38px; height: 38px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(19, 102, 236, .08);
  border: 1px solid rgba(19, 102, 236, .14);
  color: var(--blue-500);
  margin-bottom: 13px;
  transition: background .4s, color .4s, border-color .4s;
}
.talent-ico svg { width: 19px; height: 19px; }
.talent-card:hover .talent-ico {
  background: var(--blue-500); color: #ffffff; border-color: transparent;
}

.talent-card h3 {
  font-size: 15.5px; font-weight: 700; color: var(--txt-1);
  line-height: 1.45; margin-bottom: 8px; letter-spacing: -.005em;
}
.talent-card p {
  font-size: 13.5px; line-height: 1.8; color: var(--txt-3); margin: 0;
}

/* 中等屏：右栏提前收成单列太窄，改为上下堆叠 */
@media (max-width: 1100px) {
  .talent-body { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 620px) {
  .talent-grid { grid-template-columns: 1fr; gap: 11px; }
  .talent-card { padding: 17px 16px; }
  .talent-prose p { font-size: 14px; line-height: 1.9; }
}
@media (min-width: 621px) and (max-width: 1100px) {
  /* 堆叠时 2×2 仍然成立，卡片不至于过窄 */
  .talent-grid { gap: 14px; }
}

/* ---------- 30.1 微调：卡片行等高、左右栏体量更均衡 ---------- */
/* 2×2 网格里两行文字长短不一，让同一行的卡片自动等高，底边齐平 */
.talent-card { display: flex; flex-direction: column; }
.talent-card p { flex: 1 1 auto; }

/* 左栏略窄、右栏略宽，且给两栏设一个体量相当的比例 */
@media (min-width: 1101px) {
  .talent-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.24fr); }
}

/* ==========================================================================
   31. 办公环境页（workplace.html）数据格：字号放大到 1.5 倍
   --------------------------------------------------------------------------
   目标元素：24楼 / 2000㎡ / 200+ / 50米 及对应说明文字
   原始尺寸（收减后）：数值 clamp(21px, 1.98vw, 31px) / 单位 .5em / 标签 13px
   放大 1.5 倍后：      数值 clamp(31.5px, 2.97vw, 46.5px) / 单位 .5em / 标签 19.5px
   说明：clamp 的上下限与中间值同步 ×1.5，保持原响应式缩放曲线；
        用 body.pg-workplace 作用域限定，避免影响 jobs.html 上同名的 .fact。
        同时收紧内边距、行高与间距，避免放大后卡片被撑破。
   ========================================================================== */
body.pg-workplace .fact { padding: clamp(20px, 1.7vw, 28px) clamp(16px, 1.32vw, 22px); }
body.pg-workplace .fact b {
  font-size: clamp(31.5px, 2.97vw, 46.5px);
  line-height: 1.04;
  letter-spacing: -.03em;
}
body.pg-workplace .fact b span { font-size: .46em; }
body.pg-workplace .fact > span {
  margin-top: 11px;
  font-size: 19.5px;
  line-height: 1.4;
  letter-spacing: -.01em;
}

/* 小屏：1.5 倍后四列放不下，阶梯式收列并给字号设可用上限 */
@media (max-width: 1100px) {
  body.pg-workplace .fact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  body.pg-workplace .fact { padding: 20px 16px; }
  body.pg-workplace .fact b { font-size: clamp(30px, 11vw, 40px); }
  body.pg-workplace .fact > span { font-size: 16px; margin-top: 9px; }
}

/* ==========================================================================
   32. 首页 Hero：标题到顶部的距离缩减为原来的 1/2
   --------------------------------------------------------------------------
   现状（1440）：导航底边 → 「以数字技术…」标题顶边 = 227px
                 其中：hero 垂直居中的余量 157px + hero-tag 芯片及间距 70px
   目标：113px（1/2）

   做法：hero 原为 justify-content:center，垂直余量随视口高度浮动、不可控。
        改为顶部对齐 + 固定 padding-top，把"导航 → 标题"的距离变成可控值。
        实测构成：留白 + tag高(42) + tag下边距(28) = 导航底→标题顶
        取留白 44px → 76+44 = padding-top 120px，合计 114px ≈ 原来 227px 的 1/2。
   ========================================================================== */
.hero {
  justify-content: flex-start;
  min-height: auto;
  padding-top: calc(var(--nav-h) + 44px);
  padding-bottom: 74px;
}
/* 首屏仍保有足够的呼吸感：给内容区一个最小高度，避免整块贴上导航 */
.hero-inner { padding-top: 0; }

/* 超宽屏：底部留白略增，画面更均衡 */
@media (min-width: 1600px) {
  .hero { padding-bottom: 88px; }
}

/* 移动端：同步按比例收紧（原 44px → 22px） */
@media (max-width: 620px) {
  .hero { padding-top: calc(var(--nav-h) + 34px); padding-bottom: 54px; }
}

/* ---------- 32.1 对齐修正：左栏文案不再被右栏图片竖向居中下压 ----------
   原 .hero-inner 是 align-items:center，左栏(599px)被右栏(792px)居中，
   额外下压 97px，导致"导航→标题"的距离无法精确控制。
   改为顶部对齐后，标题顶边 = hero 的 padding-top，距离完全可控。 */
.hero-inner { align-items: flex-start; }
/* 顶对齐后右栏图片与文案齐顶，给图片留一点上边距使视觉更顺 */
.hero-visual { align-self: flex-start; }

/* ==========================================================================
   33. 技术驱动版块：标题改白色 + 背景减淡
   --------------------------------------------------------------------------
   【标题为什么没变白】
   .sec-title 全局带一套「渐变文字」写法（第 145-152 行）：
       background: var(--grad-text);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;   ← 关键
   之前 33 节只覆盖了 color，但真正决定字形填充的是 -webkit-text-fill-color，
   它仍是 transparent，于是透出后面那层深色渐变，标题看起来就是黑的。
   正确做法：同时清掉 background、background-clip 与 text-fill-color。

   【背景减淡】
   原为 #0b1f47 → #10306e → #0d2757（很深），现整体提亮并降低饱和度，
   改为 #17376f → #24509b → #1b3f7f，保留深蓝气质但明显更浅、更透气。
   ========================================================================== */
.tech-bg {
  background: linear-gradient(158deg, #17376f 0%, #24509b 46%, #1b3f7f 100%);
}

/* 标题：彻底关掉渐变文字，改为实心白
   （必须清 background / background-clip / text-fill-color 三件套） */
.tech-bg .sec-title {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: #ffffff;
  color: #ffffff;
}
/* 副标题与导语同步提亮，与新底色形成更好的层次 */
.tech-bg .sec-desc { color: rgba(233, 241, 255, .9); }
.tech-bg .eyebrow {
  color: #dbe8ff;
  border-color: rgba(170, 200, 255, .44);
  background: rgba(19, 102, 236, .3);
}
.tech-bg .eyebrow::before { background: #a9c8ff; }

/* 背景减淡后，网格底纹与光带同步降一点强度，避免显脏 */
.tech-bg::after {
  background-image:
    linear-gradient(rgba(160, 195, 255, .085) 1px, transparent 1px),
    linear-gradient(90deg, rgba(160, 195, 255, .085) 1px, transparent 1px);
}
.tech-bg .wrap::before {
  background: radial-gradient(closest-side, rgba(90, 150, 250, .3), transparent 100%);
}

/* 卡片：底色略微提亮，与新背景层次相称 */
.tech-bg .card {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(165, 198, 255, .24);
}
.tech-bg .card:hover {
  background: rgba(255, 255, 255, .13);
  border-color: rgba(165, 198, 255, .48);
}

/* ---------- 33.1 卡片正文提亮：背景减淡后正文对比度需补回 WCAG AA ----------
   底色减淡使卡片正文（原 78% 白）对比度降到 3.73:1，低于 AA 要求的 4.5。
   提高到 88% 白后回到 4.5 以上。 */
.tech-bg .card p { color: rgba(226, 236, 253, .88); }

/* ==========================================================================
   34. 首页「集团关键数据」数据格 —— 重新设计
   --------------------------------------------------------------------------
   上一版把数值放大 3 倍后暴露出的真问题（不是字号大小，是比例失衡）：
     · 数值吃满格子：`24层` 宽 232px / 格宽 275px = 占比 0.84，一行放不下
     · 单位与数字脱节：`层` / `万+` 同为巨型字，比数字本身更抢眼
     · 标签被压扁：18px 紧贴 88px 巨字，视觉上像附件而非信息
     · 面板只有 554px 宽却被塞在右栏，2×2 排版拥挤

   重新设计的方向：
     1. 数值回落到「大而不霸」的量级（桌面 clamp(38px, 3.1vw, 50px)）
     2. 单位降为角标（.42em → .34em），与数字形成主从关系
     3. 标签提级为真正的主信息（16.5px，深色，可读性优先）
     4. 数值与标签之间加一条短分隔线，建立呼吸节奏
     5. 悬停时数值轻微上移 + 分隔线拉长，保持与全站的交互语言一致

   作用域：.stat-panel--home —— about.html 上也有一组 .stat-cell
   （集团成立年份 / 业务覆盖范围 / 现有员工规模 / 自持总部整层），
   本次只针对首页，about.html 那一组维持原字号不变。
   ========================================================================== */

/* 34.1 格子本身：留白更从容，加一条极淡底边做呼吸 */
.stat-panel--home .stat-cell {
  padding: clamp(24px, 2.1vw, 34px) clamp(20px, 1.7vw, 28px);
  position: relative;
}
.stat-panel--home .stat-cell::after {
  content: '';
  position: absolute;
  left: clamp(20px, 1.7vw, 28px);
  bottom: clamp(24px, 2.1vw, 34px);
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--blue-500);
  opacity: .32;
  transition: width .5s var(--ease), opacity .4s;
}
.stat-panel--home .stat-cell:hover::after { width: 40px; opacity: .62; }

/* 34.2 数值行：数字大、单位小，形成明确主从 */
.stat-panel--home .stat-cell b {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 3px;
  font-size: clamp(38px, 3.1vw, 50px);
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--blue-500);
  transition: transform .45s var(--ease);
}
.stat-panel--home .stat-cell:hover b { transform: translateY(-2px); }
.stat-panel--home .stat-cell b em {
  font-style: normal;
  font-size: .34em;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--blue-500);
  opacity: .82;
}

/* 34.3 标签：提级为主信息，深色、可读 */
.stat-panel--home .stat-cell > span {
  display: block;
  margin-top: 14px;
  padding-bottom: 12px;
  font-size: 16.5px;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: .005em;
  color: var(--txt-2);
}

/* 34.4 数值撑不下时自动降级（防溢出兜底） */
@media (max-width: 1240px) {
  .stat-panel--home .stat-cell b { font-size: clamp(34px, 3.4vw, 44px); }
  .stat-panel--home .stat-cell > span { font-size: 15.5px; }
}
@media (max-width: 980px) {
  .stat-panel--home .stat-cell b { font-size: clamp(36px, 5vw, 46px); }
  .stat-panel--home .stat-cell > span { font-size: 16px; margin-top: 12px; }
}
@media (max-width: 620px) {
  .stat-panel--home .stat-cell { padding: 20px 18px; }
  .stat-panel--home .stat-cell::after { left: 18px; bottom: 20px; }
  .stat-panel--home .stat-cell b { font-size: clamp(34px, 11vw, 42px); }
  .stat-panel--home .stat-cell > span { font-size: 15px; margin-top: 11px; padding-bottom: 10px; }
}

/* ==========================================================================
   35. 首页「数据总览」数据格（.numbers / .number-cell）整体放大 1.5 倍
   --------------------------------------------------------------------------
   目标元素（index.html #数据总览，注意与第 34 节的 .stat-cell 是两套不同的组件）：
     20 年+  行业深耕历程
     50 万+  平台注册商户
     1200 家+ 连锁加盟门店
     300 项+ 专利与著作权

   放大对照（×1.5）：
     数值桌面 clamp(28px, 2.8vw, 42px) → clamp(42px, 4.2vw, 63px)
     数值 ≤620 26px                    → 39px
     标签 13px                         → 19.5px

   为什么同时改布局：原 4 列布局下数值已占格宽 80%~91%，直接 ×1.5 会溢出。
   故桌面维持 4 列（放宽单元格内边距、收紧字距），≤1100 改 2×2，
   ≤620 保持 2 列。这样放大后仍有充足留白。
   ========================================================================== */

/* 35.1 数值行 */
.number-cell b {
  font-size: clamp(42px, 4.2vw, 63px);
  line-height: 1;
  letter-spacing: -.045em;
  gap: 2px;
}
.number-cell b em { font-size: .42em; }

/* 35.2 标签：同步放大，并提亮一档保证放大后的可读性 */
.number-cell > span {
  margin-top: 14px;
  font-size: 19.5px;
  line-height: 1.4;
  color: var(--txt-3);
}

/* 35.3 内边距加大，给放大后的字让出空间 */
.number-cell { padding: clamp(30px, 2.6vw, 48px) clamp(16px, 1.5vw, 28px); }

/* 35.4 中间档：4 列放不下，改 2×2 */
@media (max-width: 1100px) {
  .numbers { grid-template-columns: repeat(2, 1fr); }
  .number-cell b { font-size: clamp(42px, 5.2vw, 58px); }
  .number-cell > span { font-size: 18px; }
}
@media (max-width: 820px) {
  .numbers { grid-template-columns: repeat(2, 1fr); }
  .number-cell b { font-size: clamp(40px, 6.4vw, 52px); }
  .number-cell > span { font-size: 17px; margin-top: 12px; }
}

/* 35.5 小屏：保持 2 列，字号退一档避免挤压 */
@media (max-width: 620px) {
  .number-cell { padding: 26px 14px; }
  .number-cell b { font-size: clamp(34px, 10.6vw, 42px); }
  .number-cell > span { font-size: 14.5px; margin-top: 10px; }
}

/* ==========================================================================
   36. 首页 Hero 首屏指标（.hero-stats / .hero-stat）重新设计
   --------------------------------------------------------------------------
   目标元素（index.html 首屏左栏底部）：
     20 年+  数字化深耕
     50 万+  平台入驻商户
     34 省   业务覆盖范围
     300 项+ 专利与著作权

   诊断（改前实测）：
     · Hero 左栏在 1440 视口只有 715px，4 列后每格仅 164px
     · 数值宽度 / 格宽 = 1.00，即文字撑满并贴边，`300项+` 视觉上已被挤压
     · 单位 .52em 过大，`年+` / `万+` 几乎与数字等大，主从不明
     · 标签 12.5px + .04em 宽字距，偏散、存在感弱

   重新设计：
     1. 布局：4 列 → 桌面 2×2。格子宽度从 164px 翻到约 340px，彻底解决挤压
     2. 数值：clamp(20px, 1.9vw, 29px) → clamp(30px, 2.55vw, 40px)，明显放大
     3. 单位：.52em → .38em，降为角标，与数字形成主从
     4. 标签：12.5px + .04em → 13.5px + 0，去掉宽字距，提升可读性
     5. 分隔：每格左侧加一条 2px 蓝色竖线，2×2 下形成清晰的四象限
     6. 间距：4 列时的 20px 横向间隙在 2×2 下改为更大行距，避免两行贴在一起

   作用域：.hero-stats / .hero-stat 仅首页使用，无跨页副作用。
   ========================================================================== */

/* 36.1 容器：桌面改 2×2，行距拉开来 */
.hero-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 40px;
  margin-top: 38px;
  padding-top: 26px;
}

/* 36.1b 矮视口收缩：1366×768 / 1024×768 这类笔记本屏，
       2×2 比原 4 列高约 88px，会把 stats 顶出首屏。按视口高度再收一档。 */
@media (min-width: 1024px) and (max-height: 820px) {
  .hero-stats { gap: 16px 36px; margin-top: 26px; padding-top: 20px; }
  .hero-stat b { font-size: clamp(26px, 2.3vw, 36px); }
  .hero-stat > span { margin-top: 7px; font-size: 13px; }
  .hero-stat::before { height: 21px; }
}

/* 36.2 单元格：左侧蓝色竖线，形成四象限节奏 */
.hero-stat {
  position: relative;
  padding-left: 18px;
}
.hero-stat::before {
  content: '';
  position: absolute;
  left: 0; top: 3px;
  width: 2px; height: 26px;
  border-radius: 2px;
  background: var(--blue-500);
  opacity: .38;
  transition: height .45s var(--ease), opacity .4s;
}
.hero-stat:hover::before { height: 100%; opacity: .72; }

/* 36.3 数值：放大 + 单位降为角标 */
.hero-stat b {
  font-size: clamp(30px, 2.55vw, 40px);
  line-height: 1;
  letter-spacing: -.04em;
  gap: 2px;
}
.hero-stat b em {
  font-size: .38em;
  font-weight: 700;
  letter-spacing: .01em;
  opacity: .82;
}

/* 36.4 标签：提级为可读信息，去掉宽字距 */
.hero-stat > span {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--txt-3);
}

/* 36.5 中档：单列左栏时给足宽度 */
@media (max-width: 1100px) {
  .hero-stats { gap: 22px 32px; }
  .hero-stat b { font-size: clamp(28px, 3vw, 36px); }
}

/* 36.6 平板及以下：Hero 转单列，容器变宽，恢复 4 列更紧凑 */
@media (max-width: 980px) {
  .hero-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 18px; }
  .hero-stat { padding-left: 14px; }
  .hero-stat b { font-size: clamp(26px, 4vw, 34px); }
  .hero-stat > span { font-size: 13px; }
}

/* 36.7 手机：回到 2×2，竖线收短 */
@media (max-width: 620px) {
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 18px; margin-top: 36px; padding-top: 24px; }
  .hero-stat { padding-left: 13px; }
  .hero-stat::before { height: 22px; }
  .hero-stat b { font-size: clamp(25px, 8.2vw, 31px); }
  .hero-stat > span { font-size: 12.5px; margin-top: 8px; }
}

/* ==========================================================================
   37. Hero 右侧图片卡（.hero-card）：高度与左栏对齐
   --------------------------------------------------------------------------
   原问题（实测）：
     .hero-card 用 aspect-ratio: 4/5 固定比例，高度完全由「列宽」决定，
     与左栏内容高度天然不匹配。各视口高差：
       1920×1080  左栏 673 / 卡片 848  → -175px
       1440×900   左栏 661 / 卡片 792  → -131px
       1366×768   左栏 628 / 卡片 751  → -123px
       1280×800   左栏 618 / 卡片 704  →  -86px
       1024×768   左栏 628 / 卡片 561  →  +67px
     即：宽屏下卡片比左栏高出一截，窄屏下又矮一截，两边底边永远不齐。

   修复思路：
     1. 去掉 aspect-ratio，改用 grid 的 align-items:stretch 让卡片自动撑满行高
     2. 网格由 flex-start 改为 stretch —— 这是「高度对齐」的关键
        （第 32 节为控制「导航→标题」距离而设的 flex-start 只作用于
          文本基线，与卡片拉伸不冲突：标题顶边仍由 .hero 的 padding-top 决定）
     3. 给卡片设 min-height 兜底，防止左栏极矮时图片被压成薄片
     4. 图片本身 object-fit:cover，高度变化只会改变裁切范围，不会变形

   保留：≤820 单列时卡片仍有自己的比例（此时左右上下堆叠，无对齐诉求）
   ========================================================================== */

/* 37.1 网格拉伸：两栏等高 */
.hero-inner { align-items: stretch; }

/* 37.2 卡片：取消固定比例，撑满行高 */
.hero-visual {
  align-self: stretch;
  display: flex;
}
.hero-card {
  aspect-ratio: auto;
  width: 100%;
  height: auto;
  min-height: 420px;
}

/* 37.3 图片覆盖 + 底部渐变随之延展，保证大高度下文字区仍有遮罩 */
.hero-card img.cover { height: 100%; }
.hero-card::after {
  background: linear-gradient(180deg, transparent 46%, rgba(10, 20, 40, .30) 68%, rgba(10, 20, 40, .76) 100%);
}

/* 37.4 文案区随卡片高度自适应，大屏下留白更舒展 */
.hero-card-body { padding: clamp(24px, 2vw, 34px); }
.hero-card-body h3 { font-size: clamp(18px, 1.24vw, 21px); }
.hero-card-body p { font-size: clamp(13.5px, .93vw, 15px); line-height: 1.7; }

/* 37.5 中等屏：左栏偏高但卡片不至于被拉得过于瘦长，收紧最小高度 */
@media (max-width: 1100px) {
  .hero-card { min-height: 380px; }
}

/* 37.6 ≤820 单列堆叠：此时无左右对齐诉求，恢复 16:10 比例让图片完整 */
@media (max-width: 980px) {
  .hero-inner { align-items: start; }
  .hero-visual { align-self: auto; display: block; }
  .hero-card { aspect-ratio: 16 / 10; height: auto; min-height: 0; }
  .hero-card::after {
    background: linear-gradient(180deg, transparent 52%, rgba(10, 20, 40, .62) 100%);
  }
  .hero-card-body { padding: 26px; }
  .hero-card-body h3 { font-size: 18px; }
  .hero-card-body p { font-size: 13.5px; line-height: 1.75; }
}

/* 37.7 手机：比例略竖，适配窄屏 */
@media (max-width: 620px) {
  .hero-card { aspect-ratio: 4 / 3; }
  .hero-card-body { padding: 22px 20px; }
}

/* ==========================================================================
   38. Hero 图片卡底部文案区（.hero-card-body）放大
   --------------------------------------------------------------------------
   目标：卡片底部那片文字区 ——
     h3「一座不断生长的鲜花帝国」+ p「从前端交易到后端履约…」

   改前实测（占比 = 文案区高 / 卡片高）：
     1920  卡片 849 / 文案区 165  (19.5%)  h3 21px  p 15px   padding 34px
     1440  卡片 792 / 文案区 121  (15.3%)  h3 18px  p 13.5px padding 28.8px
     1280  卡片 704 / 文案区 138  (19.6%)  h3 18px  p 13.5px padding 25.6px
     1024  卡片 628 / 文案区 135  (21.5%)  h3 18px  p 13.5px padding 24px
   问题：文案区在卡片里占比仅 15%~21%，字也偏小，2700px 宽的巨幅图片下方
        只压着两行小字，头重脚轻。

   放大方案：
     1. h3：clamp(18px,1.24vw,21px) → clamp(22px,1.6vw,28px)   （×1.22~1.33）
     2. p ：clamp(13.5px,.93vw,15px) → clamp(14.5px,1.05vw,17px)（×1.07~1.13）
     3. 内边距整体加大，并抬高底部与右侧留白，让文字不贴边
     4. 渐变遮罩加深并上移起始点，保证大字号下的对比度（WCAG AA）
     5. 加一条顶部细线做视觉分隔，让文案区成为独立的"信息条"
     6. 移动端同步放大，但不夸张
   ========================================================================== */

/* 38.1 文案区容器：更宽裕的内边距 + 顶部分隔线 */
.hero-card-body {
  padding: clamp(30px, 2.5vw, 44px) clamp(28px, 2.4vw, 42px) clamp(30px, 2.4vw, 40px);
}
.hero-card-body::before {
  content: '';
  position: absolute;
  left: clamp(28px, 2.4vw, 42px);
  right: clamp(28px, 2.4vw, 42px);
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .06));
  pointer-events: none;
}

/* 38.2 标题：明显放大，行高收紧一点更精神 */
.hero-card-body h3 {
  font-size: clamp(22px, 1.6vw, 28px);
  line-height: 1.28;
  font-weight: 700;
  letter-spacing: -.015em;
  margin-bottom: 12px;
}

/* 38.3 正文：放大并提高不透明度，长句更好读 */
.hero-card-body p {
  font-size: clamp(14.5px, 1.05vw, 17px);
  line-height: 1.72;
  color: rgba(255, 255, 255, .84);
  max-width: 46ch;
}

/* 38.4 遮罩加强：大字号需要更实的底色托住，同时起始点上移 */
.hero-card::after {
  background: linear-gradient(
    180deg,
    transparent 40%,
    rgba(10, 20, 40, .30) 58%,
    rgba(10, 20, 40, .68) 76%,
    rgba(8, 16, 33, .90) 100%
  );
}

/* 38.5 中等屏：跟随收紧，但不失分量 */
@media (max-width: 1280px) {
  .hero-card-body { padding: 30px 28px 28px; }
  .hero-card-body h3 { font-size: 21px; margin-bottom: 10px; }
  .hero-card-body p { font-size: 14.5px; line-height: 1.7; }
}

/* 38.6 平板 */
@media (max-width: 980px) {
  .hero-card-body { padding: 28px 26px 26px; }
  .hero-card-body::before { left: 26px; right: 26px; }
  .hero-card-body h3 { font-size: 20px; }
  .hero-card-body p { font-size: 14.5px; }
}

/* 38.7 手机：保持放大后的可读性，但不压满整张图 */
@media (max-width: 620px) {
  .hero-card-body { padding: 24px 20px 22px; }
  .hero-card-body::before { left: 20px; right: 20px; }
  .hero-card-body h3 { font-size: 19px; margin-bottom: 9px; letter-spacing: -.01em; }
  .hero-card-body p { font-size: 13.5px; line-height: 1.68; }
}

/* ==========================================================================
   39. Hero 首屏高度整体压缩（纯间距，不动任何字号）
   --------------------------------------------------------------------------
   需求：首屏「一座不断生长的鲜花帝国」那块整体高度太高，压到现在的 4/5。

   实测高度构成（1440×900）：
     Hero 986 = padding-top 120 + 内容 792 + padding-bottom 74
     内容 792 = 左栏子元素 528 + 内间距 132（28+26+40+38）+ 卡片贴底余量

   【为什么没做到严格 4/5】
   纯间距可压缩空间上限：
     padding-top   120 → 86   (-34)
     padding-bottom 74 → 42   (-32)
     内间距        132 → 62   (-70)
     合计 -136px，即 986 → 850px ≈ -13.8%
   要做到 -20%（789px）还需再减 61px，那就只能缩主标题/导语字号 ——
   而这些字号是前几轮反复调整确定的，故按「只压间距」执行。

   压缩明细（1440 视口）：
     padding-top    calc(nav-h + 44px) = 120 → calc(nav-h + 10px) = 86
     padding-bottom 74 → 42
     tag → 标题     28 → 16
     标题 → 导语     26 → 15
     导语 → 按钮     40 → 24
     按钮 → 数据格   38 → 22

   同时压缩间距不改变任何 font-size / line-height，文案观感完全不变。
   ========================================================================== */

/* 39.1 首屏外框内边距收紧 */
.hero {
  padding-top: calc(var(--nav-h) + 8px);
  padding-bottom: 26px;
}

/* 39.2 左栏各段间距收紧（浅蓝短横线处不动，保持视觉节奏） */
.hero-tag { margin-bottom: 14px; }
.hero-sub { margin-top: 13px; }
.hero-btns { margin-top: 20px; }
.hero-stats { margin-top: 18px; padding-top: 18px; }

/* 39.3 数据格内部同步微收：格子内边距与行距，避免压缩后显得挤 */
.hero-stats { gap: 16px 38px; }
.hero-stat { padding-left: 16px; }
.hero-stat b { line-height: .98; }
.hero-stat > span { margin-top: 7px; }

/* 39.4 卡片文案区同步微收内边距，与左栏底边保持齐平 */
.hero-card-body {
  padding: clamp(24px, 1.9vw, 34px) clamp(24px, 2.2vw, 38px) clamp(22px, 1.8vw, 32px);
}

/* 39.5 矮视口：已经有按高度收缩的规则，这里再收一档间距 */
@media (min-width: 1024px) and (max-height: 820px) {
  .hero { padding-top: calc(var(--nav-h) + 4px); padding-bottom: 22px; }
  .hero-tag { margin-bottom: 12px; }
  .hero-sub { margin-top: 11px; }
  .hero-btns { margin-top: 17px; }
  .hero-stats { margin-top: 15px; padding-top: 15px; gap: 13px 32px; }
}

/* 39.6 超宽屏：底部留白同步收（原 88px） */
@media (min-width: 1600px) {
  .hero { padding-bottom: 34px; }
}

/* 39.7 平板以下单列：间距按比例收，仍不动字号 */
@media (max-width: 980px) {
  .hero { padding-top: calc(var(--nav-h) + 12px); padding-bottom: 30px; }
  .hero-tag { margin-bottom: 15px; }
  .hero-sub { margin-top: 12px; }
  .hero-btns { margin-top: 20px; }
  .hero-stats { margin-top: 22px; padding-top: 18px; }
}

/* 39.8 手机：保持舒适，不收得过紧 */
@media (max-width: 620px) {
  .hero { padding-top: calc(var(--nav-h) + 14px); padding-bottom: 28px; }
  .hero-tag { margin-bottom: 14px; }
  .hero-sub { margin-top: 12px; }
  .hero-btns { margin-top: 18px; }
  .hero-stats { margin-top: 18px; padding-top: 16px; gap: 14px 18px; }
  .hero-stat { padding-left: 13px; }
  .hero-stat > span { margin-top: 7px; }
}

/* ==========================================================================
   40. Hero 右侧图片卡高度改为现在的 4/5
   --------------------------------------------------------------------------
   需求：图片区域（.hero-card）高度改为当前的 4/5。

   现状：第 37 节将卡片改为随左栏拉伸（stretch），高度 = 左栏高度：
     1920  卡片 849  → 4/5 = 679
     1440  卡片 792  → 4/5 = 634
     1280  卡片 704  → 4/5 = 563
     1024  卡片 561  → 4/5 = 449

   实现：保持 .hero-visual 的 stretch（它给卡片提供可参照的确定高度），
   卡片高度从 auto 改为 80% —— 即行高的 4/5，随左栏高度自动缩放。
   左栏不再被卡片拉高，Hero 总高度也随之下降（约等于左栏自然高度）。

   【注意】这会取消第 37 节的「左右底边对齐」：卡片底边将高于左栏底边
   （1440 下相差约 158px），顶部仍齐平。这是本需求的直接结果。

   配套调整：
     · min-height 420 → 360，避免矮视口下与 80% 冲突
     · 渐变遮罩恢复到第 38 节前的较浅版本起始点（卡片变矮后 40% 起始
       会让遮罩过重，调整为 48% 起）
     · ≤980 单列堆叠不受影响（那里本来就是 16/10 固定比例）
   ========================================================================== */

/* 40.1 卡片高度 = 行高（= 左栏高度）的 80% */
.hero-card {
  height: 80%;
  min-height: 360px;
}

/* 40.2 卡片变矮后，遮罩起始点略下移，避免上半部分过暗 */
.hero-card::after {
  background: linear-gradient(
    180deg,
    transparent 48%,
    rgba(10, 20, 40, .28) 64%,
    rgba(10, 20, 40, .64) 80%,
    rgba(8, 16, 33, .88) 100%
  );
}

/* 40.3 ≤980 单列堆叠：恢复第 37.6 节的固定比例（本节的 80% 只针对双栏） */
@media (max-width: 980px) {
  .hero-card {
    height: auto;
    min-height: 0;
  }
}

/* ==========================================================================
   41. Hero 数据格字体样式重设计（第三版）
   --------------------------------------------------------------------------
   目标：20年+ 数字化深耕 / 50万+ 平台入驻商户 / 34省 业务覆盖范围 / 300项+ 专利与著作权

   前两版的问题：
     v1（原始）：全蓝数值 4 列，挤压、无层次
     v2（36 节）：2×2 + 蓝色竖条 + 全蓝数值 —— 蓝色浓度过高：
        同屏已有蓝色标题强调、蓝色按钮、蓝色数据格，主视觉全部抢蓝，
        数值反而失去了"数据应有的稳重感"

   本版方向 —— 编辑风数据块（editorial stat）：
     1. 数值改深墨色（--txt-1），回归"数据的严肃感"，与主标题同色系
     2. 单位（年+/万+/省/项+）改为品牌蓝，成为唯一的蓝色点缀 —— 主从反转
     3. 去掉左侧竖条，改为每格顶部的细线（hairline），形成杂志感的数据表
     4. 悬停：细线由灰变蓝，替代原来的竖条拉伸动画
     5. 数值启用 tabular-nums，计数动画滚动时数字宽度稳定不抖动
     6. 标签加微字距（.03em），更接近"图注"气质
   ========================================================================== */

/* 41.1 容器：撤掉整条旧顶线（原 border-top），让位给每格自己的细线 */
.hero-stats {
  border-top: 0;
  padding-top: 0;
  margin-top: 30px;
}

/* 41.2 单元格：顶部细线 + 上留白（覆盖 36 节的竖条方案） */
.hero-stat {
  padding: 15px 0 0;
}
.hero-stat::before {
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  border-radius: 0;
  background: var(--line);
  opacity: 1;
  transition: background .4s;
}
.hero-stat:hover::before {
  height: 1px;
  opacity: 1;
  background: var(--blue-500);
}

/* 41.3 数值：深墨为主 + 蓝色单位点缀 + 等宽数字 */
.hero-stat b {
  color: var(--txt-1);
  font-weight: 800;
  font-size: clamp(30px, 2.55vw, 40px);
  line-height: 1;
  letter-spacing: -.04em;
  gap: 4px;
  font-variant-numeric: tabular-nums;
}
.hero-stat b em {
  font-size: .36em;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--blue-500);
  opacity: 1;
  margin-left: 1px;
}

/* 41.4 标签：图注气质 —— 小一号灰字 + 微字距 */
.hero-stat > span {
  margin-top: 9px;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: .03em;
  color: var(--txt-3);
}

/* 41.5 断点同步（保持 36 节定下的移动端尺度，仅换色彩与结构） */
@media (max-width: 980px) {
  .hero-stat b { font-size: clamp(26px, 4vw, 34px); }
  .hero-stat { padding-top: 13px; }
}
@media (max-width: 620px) {
  .hero-stats { margin-top: 24px; gap: 14px 18px; }
  .hero-stat { padding-top: 12px; }
  .hero-stat b { font-size: clamp(25px, 8.2vw, 31px); }
  .hero-stat > span { font-size: 12.5px; }
}

/* ==========================================================================
   42. 数据格数字保护层 —— 修复「标签规则误伤数字」的后代选择器缺陷
   --------------------------------------------------------------------------
   问题：<b> 内层的 <span data-count> 数字 span 一直被 .hero-stat span /
        .stat-cell span / .number-cell span 这类标签规则命中，数字被压成
        标签字号（如首屏 50 / 34 / 300 渲染成 13px）。首格「20」因无内层
        span 独善其身 —— 这正是各格数字大小不一、历次「字号不好看」的根源。
   修复：上述标签规则已全部改为「> span」直接子选择器；此处再加一层
        inherit 兜底，让数字 span 的字号 / 行高 / 字距永远跟随 <b>，
        杜绝后续任何后代规则再次误伤。
   ========================================================================== */
.hero-stat b > span,
.stat-cell b > span,
.number-cell b > span {
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  font-weight: inherit;
  margin: 0;
}

/* ==========================================================================
   43. 六大商业闭环 —— 右侧面板内容加厚
   --------------------------------------------------------------------------
   问题：右侧 .eco-info 只有 282px 高，左侧环形是 560px，两者高度差得远，
        单段 100 余字显得单薄。
   方案：1) 面板设 min-height 跟随环形，视觉上左右齐平；
        2) 每环新增的第二段与首段之间加一条渐隐细线，形成「概述 + 深化」两
           个层次，避免两段糊成一块；
        3) 首段提亮一档做引导句，第二段保持正文灰，阅读层级更清楚。
   ========================================================================== */

/* 43.1 面板高度对齐左侧环形（560px 环 + 自身内边距），消除大面积留白
       注意：1024 档环形会缩小到 477px，故只在环形足尺寸的视口固定 560px */
@media (min-width: 1021px) {
  .eco-info { display: flex; flex-direction: column; justify-content: center; }
}
@media (min-width: 1140px) {
  .eco-info { min-height: 560px; }
}
@media (min-width: 1021px) and (max-width: 1139px) {
  .eco-info { min-height: 477px; }
}

/* 43.2 两段之间加渐隐分隔线 + 呼吸间距 */
.eco-info p + p {
  position: relative;
  margin-top: 20px;
  padding-top: 20px;
}
.eco-info p + p::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 46px; height: 1px;
  background: linear-gradient(90deg, rgba(19, 102, 236, .55), rgba(19, 102, 236, 0));
}

/* 43.3 分层配色：首段作引导（略深），第二段为深化（常规灰） */
.eco-info p:first-of-type { color: var(--txt-2); }
.eco-info p + p { color: var(--txt-3); }

/* 43.4 内容变多后行高略收，保证 6 环在 560px 内不溢出 */
.eco-info p { line-height: 1.86; }

/* 43.5 中屏：面板改纵向排列，不再强行对齐环形 */
@media (max-width: 1020px) {
  .eco-info { min-height: 0; }
  .eco-info p + p { margin-top: 16px; padding-top: 16px; }
}

/* 43.6 手机：进一步收间距，段落字号同步下调一档 */
@media (max-width: 620px) {
  .eco-info p + p { margin-top: 14px; padding-top: 14px; }
  .eco-info p { font-size: 14px; line-height: 1.8; }
  .eco-info p + p::before { width: 34px; }
}

/* ==========================================================================
   44. 集团概览区顶部间距压缩至 1/3
   --------------------------------------------------------------------------
   问题：「About TFXK Group」标签距上方首屏过远（1440 实测 75px / 1920 为
        84px），视觉上出现一段空档，与下面紧凑的版式节奏不协调。
   间距构成：Hero 区 padding-bottom(26/34px) + #about 区 padding-top(43/46px)
            + .split align-items:center 产生的额外偏移。
   目标：整体压到原值的 1/3（约 25px）。
   ========================================================================== */

/* 44.1 收窄本区块自身顶部内边距（原 clamp(22px,3vw,46px)） */
#about { padding-top: clamp(8px, 1vw, 15px); }

/* 44.2 同步收窄上方 Hero 区底部内边距（原 26/28px 两档） */
.hero { padding-bottom: 12px; }
@media (max-width: 980px) {
  .hero { padding-bottom: 10px; }
}

/* 44.3 左栏为区首内容，取消 center 对齐带来的额外空隙 */
#about .split { align-items: start; }

/* 44.4 标签与标题之间的间距同步微收，配合更紧凑的上边距 */
#about .eyebrow { margin-bottom: 6px; }

/* 44.5 矮视口同样收紧，避免比例反弹 */
@media (min-width: 1024px) and (max-height: 820px) {
  #about { padding-top: 8px; }
}

/* 44.6 手机：屏幕窄、视觉重心不同，间距压到 1/3 会过于局促，单独放宽一档 */
@media (max-width: 620px) {
  #about { padding-top: 38px; }
  .hero { padding-bottom: 14px; }
}

/* 44.7 【已废弃 → 见 46.2】hero 拉伸空白已在 46 节消除，
       此前的负边距上提方案由 46.2 的正边距（60px）统一取代 */

/* 44.8 平板单列档：上提为 0 后间距略宽，微调至与桌面节奏一致 */
@media (min-width: 621px) and (max-width: 1020px) {
  #about { padding-top: 44px; }
}

/* ==========================================================================
   45. 移动端导航抽屉（已重构）
   --------------------------------------------------------------------------
   新规范：左侧白色面板（width: min(78vw, 300px)）+ 右侧半透明遮罩，
   从左滑入；样式统一见第 5 节「移动端抽屉」，此处不再覆盖。
   ========================================================================== */

/* ==========================================================================
   46. HERO 高度回归内容 —— 修复「hero 版块挡住 About」
   --------------------------------------------------------------------------
   问题：hero 右栏容器随 grid 拉伸到与左栏等高，而卡片只占容器 80%，
        卡片下方余出约 170px 无内容空白，把 hero 区块撑到接近整屏
        （1440×900 下 hero 底部达 888px），About 区被顶出首屏视野，
        且 44 节的负边距上提让 About 标题落进 hero 背景范围内，
        视觉上像被 hero 盖住。
   方案：hero-visual 取消拉伸（align-self:start），卡片高度改用与原
        80% 实测值完全吻合的 clamp(430px, 44vw, 680px)——
        卡片视觉尺寸零变化，hero 高度回归内容本身（1920: 945→776）。
        About 间距改用正边距重新定节奏（gap ≈ 85px）。
   ========================================================================== */

/* 46.1 宽屏：右栏不再拉伸，卡片高度取实测等值 */
@media (min-width: 981px) {
  .hero-visual { align-self: start; }
  .hero-card { height: clamp(430px, 44vw, 680px); min-height: 0; }
}

/* 46.2 About 间距重校：hero 已无拉伸空白，负边距作废，改用正边距
       （仅宽屏生效；手机/平板为单列布局，维持 44.6/44.8 的原有节奏） */
@media (min-width: 981px) {
  #about { margin-top: 60px; }
}
@media (max-width: 980px) {
  #about { margin-top: 0; }
}

/* ==========================================================================
   47. 企业文化页 · 核心文化 & 红色文化（culture.html）
   ========================================================================== */

/* 47.1 四宫格：愿景 / 使命 / 价值观 / 精神风貌 */
.cc-quad {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.3vw, 20px);
  margin-bottom: clamp(22px, 2.2vw, 34px);
}
.cc-cell {
  position: relative;
  padding: clamp(22px, 2vw, 30px) clamp(18px, 1.6vw, 24px) clamp(20px, 1.9vw, 28px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.cc-cell::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--blue-500), #6aa8ff);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .5s var(--ease);
}
.cc-cell:hover {
  transform: translateY(-6px);
  border-color: rgba(19, 102, 236, .22);
  box-shadow: 0 18px 44px rgba(21, 34, 66, .1);
}
.cc-cell:hover::before { transform: scaleY(1); }
.cc-idx {
  position: absolute;
  top: clamp(14px, 1.3vw, 20px);
  right: clamp(16px, 1.5vw, 22px);
  font-size: clamp(30px, 3vw, 44px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  color: rgba(19, 102, 236, .09);
  user-select: none;
}
.cc-cell em {
  display: block;
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--blue-500);
  margin-bottom: 10px;
}
.cc-cell h3 {
  font-size: clamp(17px, 1.45vw, 21px);
  font-weight: 800;
  color: var(--txt-1);
  letter-spacing: -.015em;
  margin-bottom: 12px;
}
.cc-cell p {
  font-size: clamp(13.5px, 1.05vw, 15px);
  line-height: 1.85;
  color: var(--txt-3);
}

/* 47.2 宣言带：奋斗宣言 / 永久目标 / 企训 */
.cc-band {
  display: grid;
  grid-template-columns: .9fr .9fr 1.6fr;
  gap: clamp(14px, 1.3vw, 20px);
  padding: clamp(24px, 2.2vw, 34px) clamp(22px, 2vw, 32px);
  margin-bottom: clamp(22px, 2.2vw, 34px);
  background: linear-gradient(135deg, #0a3d8f 0%, #1366ec 52%, #3d8bff 100%);
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(19, 102, 236, .22);
}
.cc-band-item { position: relative; padding-left: clamp(16px, 1.5vw, 22px); }
.cc-band-item + .cc-band-item::before {
  content: "";
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 1px;
  background: rgba(255, 255, 255, .22);
}
.cc-band-item em {
  display: block;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  margin-bottom: 12px;
}
.cc-band-item p {
  font-size: clamp(15px, 1.35vw, 19px);
  font-weight: 700;
  line-height: 1.7;
  color: #fff;
  letter-spacing: -.01em;
}

/* 47.3 双栏面板：十五项基本原则 + 十条红线 */
.cc-cols {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(16px, 1.5vw, 24px);
  margin-bottom: clamp(22px, 2.2vw, 34px);
}
.cc-panel {
  padding: clamp(24px, 2.1vw, 32px) clamp(22px, 1.9vw, 30px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
}
.cc-panel--warn {
  background: linear-gradient(180deg, #fff8f7 0%, #fff 62%);
  border-color: rgba(224, 82, 62, .18);
}
.cc-panel-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.cc-panel--warn .cc-panel-head { border-bottom-color: rgba(224, 82, 62, .16); }
.cc-panel-head h3 {
  font-size: clamp(16.5px, 1.4vw, 20px);
  font-weight: 800;
  color: var(--txt-1);
  letter-spacing: -.015em;
}
.cc-panel-head span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--txt-4);
}
.cc-panel--warn .cc-panel-head span { color: rgba(196, 62, 44, .72); }

.cc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.cc-list--two { grid-template-columns: repeat(2, 1fr); column-gap: clamp(16px, 1.6vw, 26px); }
.cc-list li {
  position: relative;
  padding-left: 22px;
  font-size: clamp(13.2px, 1.02vw, 14.6px);
  line-height: 1.7;
  color: var(--txt-3);
}
.cc-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .58em;
  width: 7px; height: 7px;
  border-radius: 2px;
  background: var(--blue-500);
  opacity: .7;
}
.cc-list--red li::before { background: #e0523e; }
.cc-list--red li { color: var(--txt-2); font-weight: 600; }

/* 47.4 干部「六不」原则条带 */
.cc-strip {
  padding: clamp(24px, 2.1vw, 32px) clamp(22px, 1.9vw, 30px);
  background: linear-gradient(135deg, #f5f8ff 0%, #eef4ff 100%);
  border: 1px solid rgba(19, 102, 236, .14);
  border-radius: 18px;
}
.cc-strip-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.cc-strip-head h3 {
  font-size: clamp(16.5px, 1.4vw, 20px);
  font-weight: 800;
  color: var(--txt-1);
  letter-spacing: -.015em;
}
.cc-strip-head span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--txt-4);
}
.cc-strip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.cc-strip-grid span {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 12px 16px 12px 44px;
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: clamp(12.8px, 1vw, 14.2px);
  font-weight: 600;
  color: var(--txt-2);
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}
.cc-strip-grid span::before {
  content: "✕";
  position: absolute;
  left: 15px;
  font-size: 12px;
  font-weight: 800;
  color: #e0523e;
}
.cc-strip-grid span:hover {
  transform: translateY(-3px);
  border-color: rgba(19, 102, 236, .22);
  box-shadow: 0 12px 28px rgba(21, 34, 66, .08);
}

/* 47.5 红色文化板块 */
.red-wrap {
  display: grid;
  grid-template-columns: .82fr 1.6fr;
  gap: clamp(22px, 2.4vw, 44px);
  align-items: start;
}
.red-quote {
  position: relative;
  padding: clamp(26px, 2.4vw, 36px) clamp(24px, 2.2vw, 32px);
  background: linear-gradient(150deg, #b3241a 0%, #d93a2b 55%, #e8634f 100%);
  border-radius: 20px;
  box-shadow: 0 22px 52px rgba(179, 36, 26, .22);
  overflow: hidden;
}
.red-quote::after {
  content: "“";
  position: absolute;
  top: -18px; right: 14px;
  font-size: 130px;
  line-height: 1;
  font-weight: 800;
  color: rgba(255, 255, 255, .13);
  font-family: Georgia, "Songti SC", serif;
  pointer-events: none;
}
.red-quote p {
  position: relative;
  font-size: clamp(17px, 1.6vw, 22px);
  font-weight: 800;
  line-height: 1.62;
  color: #fff;
  letter-spacing: -.01em;
}
.red-quote span {
  display: block;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .26);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  color: rgba(255, 255, 255, .82);
}
.red-prose p {
  font-size: clamp(14.5px, 1.15vw, 16px);
  line-height: 2.05;
  color: var(--txt-3);
}
.red-prose p + p { margin-top: clamp(16px, 1.5vw, 22px); }
.red-prose strong { color: var(--txt-2); font-weight: 700; }

/* 47.6 响应式 */
@media (max-width: 1020px) {
  .cc-quad { grid-template-columns: repeat(2, 1fr); }
  .cc-band { grid-template-columns: 1fr; gap: 20px; }
  .cc-band-item { padding-left: 0; padding-top: 0; }
  .cc-band-item + .cc-band-item::before {
    left: 0; right: 0; top: -10px; bottom: auto;
    width: auto; height: 1px;
  }
  .cc-cols { grid-template-columns: 1fr; }
  .cc-strip-grid { grid-template-columns: repeat(2, 1fr); }
  .red-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .cc-quad { grid-template-columns: 1fr; gap: 12px; }
  .cc-cell { padding: 20px 18px; }
  .cc-cell p { font-size: 13.4px; }
  .cc-band { padding: 22px 18px; border-radius: 16px; }
  .cc-band-item p { font-size: 15.5px; }
  .cc-panel { padding: 22px 18px; }
  .cc-list--two { grid-template-columns: 1fr; gap: 10px; }
  .cc-strip { padding: 22px 18px; }
  .cc-strip-grid { grid-template-columns: 1fr; gap: 10px; }
  .cc-strip-grid span { min-height: 46px; }
  .red-quote { padding: 24px 20px; border-radius: 16px; }
  .red-quote p { font-size: 16.5px; }
  .red-prose p { font-size: 14.4px; line-height: 1.95; }
}

/* ==========================================================================
   48. 首页版块顶部英文标识统一距顶 20px
       背景：多数版块带 style="padding-top:0"，eyebrow 紧贴版块上边缘（0px）；
             #about 原为 14px。现统一为首个 eyebrow 距版块顶 20px。
   ========================================================================== */
#about .sec-head > .eyebrow,
#ecosystem > .wrap > .sec-head > .eyebrow,
#brands > .wrap > .sec-head > .eyebrow,
#tech > .wrap > .sec-head > .eyebrow,
#news > .wrap > .sec-head > .eyebrow,
#corp-video .sec-head > .eyebrow {
  margin-top: 20px;
}
/* #join：eyebrow 在卡片内，改用卡片 padding-top 控制（不加 margin，避免叠加） */
#join .join-panel > .eyebrow { margin-top: 0; }
/* #about 的第 44.6 节 margin-bottom:6px 保留；此处仅补回上边距，避免覆盖第 48 节的 margin-top */
#about .sec-head > .eyebrow { margin-top: 20px; margin-bottom: 6px; }

/* 48.2 #about：原 padding-top(8~15px) 会与 20px 叠加，归零让 20px 成为净间距
        （矮视口 44.5 / 手机 44.6 的分档一并覆写，保持统一 20px） */
#about { padding-top: 0; }
@media (min-width: 1024px) and (max-height: 820px) { #about { padding-top: 0; } }
@media (max-width: 620px) { #about { padding-top: 0; } }
@media (min-width: 621px) and (max-width: 1020px) { #about { padding-top: 0; } }

/* 48.3 #join：蓝色卡片是独立容器，内边距原为 clamp(38px,3.96vw,76px)
        这里把上内边距收到 20px，使「Join Us」距卡片顶为 20px */
#join .join-panel { padding-top: 20px; }

/* ==========================================================================
   49. #about 整块上移 20px
       第 46.2 节基准：宽屏 margin-top:60px（窄屏 0px 为单列布局的最紧状态）。
       上移 20px → 宽屏 60px 收至 40px。
   ========================================================================== */
@media (min-width: 981px) {
  #about { margin-top: 40px; }
}
/* 窄屏（≤980px）原为 0，已是单列最紧状态；如需同幅上移改为负边距会侵入 hero，故维持 */

/* ==========================================================================
   50. 首页四大品牌 · 品牌名前 LOGO（index.html #brands）
       统一规则：LOGO 在 .brand-name 左侧水平排列；
       花递黑标反白与文字统一；金色/3D 形象保持原色。
   ========================================================================== */
.brand-top { gap: clamp(12px, 1.1vw, 18px); }
.brand-logo {
  position: relative; z-index: 3;
  display: block; width: auto;
  flex: 0 0 auto;
}
/* 花娃 3D 形象：保持原彩，略大于文字，带柔和投影 */
.brand-logo--huawa {
  height: clamp(58px, 4.8vw, 74px);
  filter: drop-shadow(0 8px 18px rgba(6, 20, 50, .35));
}
/* 花递：黑色字标反白，与白色文字融为一体 */
.brand-logo--huadi {
  height: clamp(40px, 3.3vw, 52px);
  filter: brightness(0) invert(1);
  opacity: .96;
}
/* 爱花居：金色原色，深蓝底上保持高级质感 */
.brand-logo--aihuaju {
  height: clamp(44px, 3.6vw, 56px);
  filter: drop-shadow(0 4px 12px rgba(6, 20, 50, .28));
}
/* 管单宝：方形图标圆角化，白色细描边提升精致度 */
.brand-logo--gdb {
  height: clamp(46px, 3.8vw, 58px);
  border-radius: clamp(9px, .8vw, 13px);
  box-shadow: 0 6px 16px rgba(6, 20, 50, .3), 0 0 0 1px rgba(255, 255, 255, .18);
}
/* 平板：LOGO 同步收一档 */
@media (max-width: 1020px) {
  .brand-logo--huawa { height: 56px; }
  .brand-logo--huadi { height: 40px; }
  .brand-logo--aihuaju { height: 42px; }
  .brand-logo--gdb { height: 44px; }
}
/* 手机：再收一档，避免挤压品牌名 */
@media (max-width: 620px) {
  .brand-top { gap: 11px; }
  .brand-logo--huawa { height: 50px; }
  .brand-logo--huadi { height: 36px; }
  .brand-logo--aihuaju { height: 38px; }
  .brand-logo--gdb { height: 40px; }
  .brand-logo--gdb { border-radius: 9px; }
}

/* ==========================================================================
   51. 集团概览（about.html）关键数据字号回调
   --------------------------------------------------------------------------
   问题：第 29 节为【首页】.stat-panel 设的「放大 3 倍」用了无作用域的裸
        .stat-cell 选择器，把 about.html 的同名结构一并放大到
        数值 88.6px / 标签 39px。而 about 的面板是双列侧栏
        （1440px 下单格仅 275px 宽），巨型字号严重失衡。
   方案：把第 29 节的放大规则限定到首页 .stat-panel--home，
        并给 about.html 这组数据设定一档与卡片层级相称的尺寸。
   ========================================================================== */

/* 51.1 第 29 节裸规则收回首页作用域（about.html 不再继承 3 倍放大） */
.stat-panel--home .stat-cell { padding: clamp(18px, 1.5vw, 26px); }
.stat-panel--home .stat-cell b { font-size: clamp(38px, 3.1vw, 50px); }
.stat-panel--home .stat-cell b em { font-size: .42em; }
.stat-panel--home .stat-cell > span { margin-top: 12px; }

/* 51.2 about.html 关键数据：收敛到正文层级。
        上稿放大到 60px 与卡片尺度不符（反馈：仍过大），
        本稿按「缩到原值约 1/5」定为 b ≈ 12px、标签 ≈ 4px，
        与 .prose 正文（约 16.5px）同处一个视觉层级。 */
.stat-panel:not(.stat-panel--home) .stat-cell b {
  font-size: clamp(11px, 1.05vw, 13px);
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--blue-500);
}
.stat-panel:not(.stat-panel--home) .stat-cell b em { font-size: .46em; font-weight: 700; }
.stat-panel:not(.stat-panel--home) .stat-cell > span {
  margin-top: 5px;
  font-size: 10px;
  line-height: 1.35;
  letter-spacing: .01em;
  color: var(--txt-3);
}

/* 51.3 平板 / 手机分档 */
@media (max-width: 1100px) {
  .stat-panel:not(.stat-panel--home) .stat-cell b { font-size: 12px; }
  .stat-panel:not(.stat-panel--home) .stat-cell > span { font-size: 10px; }
}
@media (max-width: 820px) {
  .stat-panel:not(.stat-panel--home) .stat-cell b { font-size: 12px; }
  .stat-panel:not(.stat-panel--home) .stat-cell > span { font-size: 10px; margin-top: 4px; }
}
@media (max-width: 620px) {
  .stat-panel:not(.stat-panel--home) .stat-cell b { font-size: 12px; }
  .stat-panel:not(.stat-panel--home) .stat-cell > span { font-size: 10px; margin-top: 4px; }
}

/* ==========================================================================
   52. 产业生态页四大品牌 · 品牌标 LOGO（business.html .biz-mark）
       .biz-mark 为竖排卡片（品牌大字在上、英文、标签依次向下），
       故 LOGO 置于品牌大字上方，与首页 #brands 的处理语言保持一致。
   ========================================================================== */
.biz-logo {
  position: relative; z-index: 2;
  display: block; width: auto; height: auto;
  max-width: 100%;
  align-self: flex-start;      /* .biz-mark 是 flex 列容器，防止被拉伸 */
  object-fit: contain;
  margin-bottom: clamp(12px, 1.1vw, 18px);
}
/* 花娃 3D 形象：保留原彩 + 柔和投影 */
.biz-logo--huawa {
  height: clamp(66px, 5.4vw, 84px);
  filter: drop-shadow(0 8px 18px rgba(6, 20, 50, .38));
}
/* 花递：黑色字标反白 */
.biz-logo--huadi {
  height: clamp(46px, 3.8vw, 58px);
  filter: brightness(0) invert(1);
  opacity: .96;
}
/* 爱花居：金色原色 */
.biz-logo--aihuaju {
  height: clamp(50px, 4.1vw, 64px);
  filter: drop-shadow(0 4px 12px rgba(6, 20, 50, .3));
}
/* 管单宝：方形图标圆角 + 细描边 */
.biz-logo--gdb {
  height: clamp(54px, 4.4vw, 68px);
  border-radius: clamp(11px, .9vw, 15px);
  box-shadow: 0 6px 16px rgba(6, 20, 50, .32), 0 0 0 1px rgba(255, 255, 255, .18);
}
/* 平板 / 手机：随卡片收一档，保证不挤压品牌大字 */
@media (max-width: 1020px) {
  .biz-logo--huawa { height: 60px; }
  .biz-logo--huadi { height: 42px; }
  .biz-logo--aihuaju { height: 46px; }
  .biz-logo--gdb { height: 50px; }
}
@media (max-width: 620px) {
  .biz-logo { margin-bottom: 12px; }
  .biz-logo--huawa { height: 54px; }
  .biz-logo--huadi { height: 38px; }
  .biz-logo--aihuaju { height: 42px; }
  .biz-logo--gdb { height: 45px; border-radius: 10px; }
}

/* ============================================================
   28. 产业生态交互模块（左侧菜单 + 右侧详情卡片）
   ============================================================ */
.industry-eco {
  position: relative;
  padding: clamp(60px, 6vw, 100px) 0;
  background:
    radial-gradient(1000px 560px at 92% 10%, rgba(8, 104, 247, .06), transparent 60%),
    radial-gradient(800px 500px at 8% 90%, rgba(8, 104, 247, .04), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #f5f9ff 50%, #ffffff 100%);
  overflow: hidden;
}

/* 抽象几何装饰 */
.eco-deco {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: .4;
  filter: blur(60px);
}
.eco-deco-1 {
  width: 380px; height: 380px;
  top: -80px; right: -60px;
  background: radial-gradient(circle, rgba(8, 104, 247, .12), transparent 70%);
}
.eco-deco-2 {
  width: 300px; height: 300px;
  bottom: -60px; left: -40px;
  background: radial-gradient(circle, rgba(8, 104, 247, .08), transparent 70%);
}

.eco-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(28px, 3vw, 48px);
}
.eco-header-left { flex: 1; min-width: 0; }

.eco-eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--blue-500);
  margin-bottom: 14px;
}

.eco-title {
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--txt-1);
  margin-bottom: 12px;
}

.eco-subtitle {
  font-size: clamp(15px, 1.5vw, 18px);
  color: var(--txt-3);
  line-height: 1.8;
  max-width: 560px;
}

.eco-header-right { flex-shrink: 0; padding-top: 6px; }

.eco-section-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 500;
  color: var(--txt-3);
}
.eco-section-label::before {
  content: '';
  width: 80px;
  height: 1px;
  background: var(--line-strong);
}

/* 布局：左菜单 + 右详情 */
.eco-layout {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
  gap: clamp(20px, 2vw, 32px);
  align-items: start;
}

/* 左侧菜单 */
.eco-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  background: #ffffff;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
}

.eco-menu-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: all .35s var(--ease);
  position: relative;
}
.eco-menu-item:hover {
  background: var(--ink-800);
}
.eco-menu-item:focus-visible {
  outline: 2px solid var(--blue-500);
  outline-offset: 2px;
}

.eco-menu-item.active {
  background: linear-gradient(120deg, var(--blue-500), var(--blue-600));
  color: #ffffff;
  box-shadow: 0 10px 28px rgba(8, 104, 247, .35);
}
.eco-menu-item.active .eco-menu-icon,
.eco-menu-item.active .eco-menu-num,
.eco-menu-item.active .eco-menu-name,
.eco-menu-item.active .eco-menu-arrow {
  color: #ffffff;
}

.eco-menu-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-500);
  transition: color .3s;
}
.eco-menu-icon svg { width: 24px; height: 24px; }

.eco-menu-num {
  font-size: 14px;
  font-weight: 600;
  color: var(--txt-4);
  min-width: 28px;
  transition: color .3s;
}
.eco-menu-item.active .eco-menu-num {
  color: rgba(255, 255, 255, .85);
}

.eco-menu-name {
  flex: 1;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--txt-1);
  transition: color .3s;
}

.eco-menu-arrow {
  width: 20px;
  height: 20px;
  color: var(--txt-4);
  opacity: 0;
  transform: translateX(-4px);
  transition: all .35s var(--ease);
}
.eco-menu-item:hover .eco-menu-arrow,
.eco-menu-item.active .eco-menu-arrow {
  opacity: 1;
  transform: translateX(0);
  color: inherit;
}
.eco-menu-arrow svg { width: 100%; height: 100%; }

/* 右侧详情卡片 */
.eco-detail {
  min-height: 520px;
}

.eco-detail-card {
  background: #ffffff;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  animation: ecoFadeIn .45s var(--ease);
}

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

.eco-detail-top {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 0;
}

.eco-detail-info {
  padding: clamp(28px, 2.5vw, 44px) clamp(24px, 2.2vw, 36px);
  display: flex;
  flex-direction: column;
}

.eco-detail-index {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--blue-500);
  margin-bottom: 16px;
}

.eco-detail-title {
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--txt-1);
  margin-bottom: 12px;
}

.eco-detail-subtitle {
  font-size: 17px;
  font-weight: 600;
  color: var(--txt-2);
  margin-bottom: 16px;
}

.eco-detail-desc {
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--txt-3);
  margin-bottom: 28px;
}

.eco-detail-image {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ink-700);
}
.eco-detail-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 卖点区域 */
.eco-detail-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.5vw, 24px);
  padding: clamp(24px, 2.2vw, 32px) clamp(24px, 2.2vw, 36px);
  border-top: 1px solid var(--line);
}

.eco-feature {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.eco-feature-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(8, 104, 247, .08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-500);
}
.eco-feature-icon svg { width: 22px; height: 22px; }

.eco-feature-text h5 {
  font-size: 15px;
  font-weight: 700;
  color: var(--txt-1);
  margin-bottom: 4px;
  line-height: 1.4;
}
.eco-feature-text p {
  font-size: 13px;
  line-height: 1.7;
  color: var(--txt-3);
}

/* 底部操作 */
.eco-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 0 clamp(24px, 2.2vw, 36px) clamp(28px, 2.5vw, 40px);
}

.eco-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: 100px;
  font-size: 14.5px;
  font-weight: 600;
  color: #ffffff;
  background: linear-gradient(120deg, var(--blue-500), var(--blue-600));
  box-shadow: 0 6px 18px rgba(8, 104, 247, .3);
  transition: all .35s var(--ease);
}
.eco-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(8, 104, 247, .38);
}
.eco-btn-primary svg { width: 16px; height: 16px; transition: transform .3s; }
.eco-btn-primary:hover svg { transform: translateX(3px); }

.eco-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 100px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--txt-2);
  background: transparent;
  transition: all .35s var(--ease);
}
.eco-btn-ghost:hover {
  color: var(--blue-500);
}
.eco-btn-ghost svg { width: 15px; height: 15px; transition: transform .3s; }
.eco-btn-ghost:hover svg { transform: translate(2px, -2px); }

/* 产业生态响应式 */
@media (max-width: 1024px) {
  .eco-layout {
    grid-template-columns: 1fr;
  }
  .eco-menu {
    flex-direction: row;
    overflow-x: auto;
    padding: 10px;
    gap: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .eco-menu::-webkit-scrollbar { height: 6px; }
  .eco-menu-item {
    flex-shrink: 0;
    padding: 12px 16px;
    gap: 10px;
  }
  .eco-menu-icon { width: 28px; height: 28px; }
  .eco-menu-icon svg { width: 18px; height: 18px; }
  .eco-menu-num { font-size: 12px; min-width: auto; }
  .eco-menu-name { font-size: 14px; white-space: nowrap; }
  .eco-menu-arrow { display: none; }
  .eco-detail { min-height: auto; }
  .eco-detail-top { grid-template-columns: 1fr; }
  .eco-detail-image { aspect-ratio: 16 / 9; }
}

@media (max-width: 640px) {
  .eco-header { flex-direction: column; gap: 16px; }
  .eco-section-label::before { width: 40px; }
  .eco-detail-features {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .eco-detail-actions { flex-direction: column; align-items: stretch; }
  .eco-btn-primary, .eco-btn-ghost { justify-content: center; }
}

/* ============================================================
   29. 四大品牌轻量化卡片
   ============================================================ */
.brands-section {
  padding: clamp(60px, 6vw, 100px) 0;
  background: #ffffff;
}

.brands-head {
  max-width: 720px;
  margin-bottom: clamp(28px, 3vw, 48px);
}

.brands-eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--blue-500);
  margin-bottom: 14px;
}

.brands-title {
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--txt-1);
  margin-bottom: 12px;
}

.brands-desc {
  font-size: clamp(15px, 1.5vw, 18px);
  color: var(--txt-3);
  line-height: 1.8;
}

.brands-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.4vw, 22px);
}

.brand-card-light {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2vw, 32px) clamp(20px, 1.8vw, 26px);
  border-radius: 18px;
  border: 1px solid var(--line);
  background: #ffffff;
  transition: all .4s var(--ease);
  overflow: hidden;
}
.brand-card-light::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 120px;
  opacity: .6;
  transition: opacity .4s;
  pointer-events: none;
}
.brand-card-light:hover {
  transform: translateY(-6px);
  border-color: rgba(8, 104, 247, .25);
  box-shadow: 0 18px 44px rgba(8, 30, 66, .1);
}
.brand-card-light:hover::before { opacity: 1; }

/* 品牌背景色 */
.brand-light--huawa::before { background: linear-gradient(160deg, #fff1f3, #ffffff 70%); }
.brand-light--huadi::before { background: linear-gradient(160deg, #f0f6ff, #ffffff 70%); }
.brand-light--aihuaju::before { background: linear-gradient(160deg, #faf6ed, #ffffff 70%); }
.brand-light--guandanbao::before { background: linear-gradient(160deg, #fff0f0, #ffffff 70%); }

.brand-light-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.brand-light-logo {
  width: 56px;
  height: 56px;
  object-fit: contain;
  flex-shrink: 0;
}

.brand-light-name {
  font-size: 22px;
  font-weight: 800;
  color: var(--txt-1);
  letter-spacing: .02em;
}

.brand-light-tag {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: 100px;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 14px;
  align-self: flex-start;
}
.tag-pink { background: #ffe8ec; color: #e5486a; }
.tag-blue { background: #e6f0ff; color: #0868F7; }
.tag-gold { background: #f8edd5; color: #b8860b; }
.tag-rose { background: #ffe5e5; color: #d63945; }

.brand-light-title {
  position: relative;
  z-index: 2;
  font-size: 17px;
  font-weight: 700;
  color: var(--txt-1);
  margin-bottom: 10px;
  line-height: 1.5;
}

.brand-light-desc {
  position: relative;
  z-index: 2;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--txt-3);
  flex: 1;
  margin-bottom: 20px;
}

.brand-light-link {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--blue-500);
  transition: gap .3s;
  align-self: flex-start;
}
.brand-light-link:hover { gap: 10px; }
.brand-light-link svg { width: 15px; height: 15px; }

/* 品牌卡片响应式 */
@media (max-width: 1180px) {
  .brands-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .brands-grid { grid-template-columns: 1fr; }
  .brand-light-name { font-size: 20px; }
  .brand-light-title { font-size: 16px; }
}

/* ============================================================
   26. 集团概览页 2.0 —— 参考图风格重制
   ============================================================ */

/* ---------- 首屏左右两栏 ---------- */
.page-head-about {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(26px, 2.6vw, 44px));
  padding-bottom: clamp(48px, 4.5vw, 88px);
  overflow: hidden;
  background: linear-gradient(180deg, #f2f7ff 0%, #f7faff 45%, #ffffff 100%);
}
.hero-bg-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-bg-deco::before {
  content: '';
  position: absolute;
  left: -120px;
  top: -60px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(19, 102, 236, .1), transparent 70%);
  filter: blur(30px);
}
.hero-bg-deco::after {
  content: '';
  position: absolute;
  right: -80px;
  bottom: -100px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(19, 102, 236, .08), transparent 70%);
  filter: blur(40px);
}
.about-hero {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 3.5vw, 64px);
  align-items: center;
}
/* 面包屑所在左列顶对齐，保证各页面包屑起点一致；右列图片保持居中 */
.about-hero-left { align-self: start; }
.about-hero-left {
  position: relative;
  padding-left: clamp(0px, 2vw, 0);
}
.about-hero-left .crumb {
  margin-bottom: clamp(18px, 1.9vw, 30px);
}
.hero-en-tag {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.hero-en-tag span {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--blue-500);
}
.hero-en-tag i {
  display: inline-block;
  width: 48px;
  height: 2px;
  background: linear-gradient(90deg, var(--blue-500), transparent);
  border-radius: 2px;
}
.about-hero-left h1 {
  font-size: clamp(32px, 4vw, 60px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: #0f1a2e;
  margin-bottom: 22px;
}
.about-hero-left h1 .grad {
  color: var(--blue-500);
  background: none;
  -webkit-text-fill-color: currentColor;
}
.about-hero-left p {
  font-size: clamp(15px, 1.6vw, 19px);
  line-height: 1.9;
  color: #5b6780;
  max-width: 520px;
  margin-bottom: 0;
}
.hero-accent-line {
  margin-top: 32px;
  width: 44px;
  height: 3px;
  background: var(--blue-500);
  border-radius: 3px;
}

.about-hero-img {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(19, 102, 236, .1);
  box-shadow: 0 24px 60px rgba(8, 30, 66, .14), 0 8px 24px rgba(19, 102, 236, .08);
  aspect-ratio: 5 / 4;
  background: #e8f0fe;
}
.about-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}
.about-hero-img:hover img {
  transform: scale(1.05);
}
.hero-img-tag {
  position: absolute;
  left: 22px;
  bottom: 22px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 12px;
  background: rgba(12, 28, 58, .7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, .15);
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1;
  z-index: 3;
}
.hero-img-tag svg {
  width: 15px;
  height: 15px;
  color: #7fb3ff;
  flex-shrink: 0;
}
.hero-img-tag span {
  white-space: nowrap;
}

/* ---------- 公司简介模块 ---------- */
.about-profile {
  padding-top: clamp(30px, 3.2vw, 56px);
  padding-bottom: clamp(30px, 3.2vw, 56px);
  background: #ffffff;
}
.about-profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(24px, 3vw, 56px);
  /* 左右内容共享同一行高，让统计卡片与公司简介文字区域上下对齐。 */
  align-items: stretch;
}
.about-profile-left .about-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--blue-500);
  margin-bottom: 14px;
  padding: 0;
  border: none;
  background: none;
}
.about-profile-left .about-eyebrow::before {
  display: none;
}
.about-profile-left .sec-title {
  font-size: clamp(26px, 2.8vw, 42px);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--txt-1);
  margin-bottom: 20px;
  background: none;
  -webkit-text-fill-color: currentColor;
  background-clip: initial;
  -webkit-background-clip: initial;
}
.about-profile-left p {
  font-size: clamp(14.5px, 1.5vw, 16.5px);
  line-height: 2;
  color: var(--txt-3);
  margin-bottom: 20px;
}
.about-profile-left p:last-child {
  margin-bottom: 0;
}
.about-profile-left strong {
  color: var(--txt-1);
  font-weight: 600;
}
.about-profile-left .hl {
  color: var(--blue-500);
  font-weight: 600;
  background: linear-gradient(180deg, transparent 62%, rgba(19, 102, 236, .16) 62%);
}

/* ---------- 数据卡片 2×2 ---------- */
.about-stats-card {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(19, 102, 236, .12);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid rgba(19, 102, 236, .12);
  background-color: rgba(240, 246, 255, 0.9);
}
.about-stat-cell {
  padding: clamp(22px, 2vw, 34px) clamp(18px, 1.8vw, 28px);
  background: rgba(248, 251, 255, 0.95);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: background .4s;
}
.about-stat-cell:hover {
  background: #ffffff;
}
.about-stat-ico {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(19, 102, 236, .08);
  border: 1px solid rgba(19, 102, 236, .16);
  flex-shrink: 0;
  transition: all .45s var(--ease);
}
.about-stat-ico svg {
  width: 22px;
  height: 22px;
  color: var(--blue-500);
}
.about-stat-cell:hover .about-stat-ico {
  background: var(--blue-500);
  border-color: transparent;
}
.about-stat-cell:hover .about-stat-ico svg {
  color: #fff;
}
.about-stat-num b {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-size: clamp(26px, 2.6vw, 40px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.035em;
  color: var(--blue-500);
  white-space: nowrap;
}
.about-stat-num b em {
  font-style: normal;
  font-size: .48em;
  font-weight: 600;
}
.about-stat-label {
  font-size: 13.5px;
  color: var(--txt-3);
  font-weight: 500;
}

/* ---------- 创新成果深蓝色横幅 ---------- */
.about-achievements {
  padding-top: 0;
  padding-bottom: clamp(30px, 3.2vw, 56px);
  background: #ffffff;
}
.achievements-banner {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  padding: clamp(32px, 3.5vw, 60px) clamp(28px, 3vw, 56px);
  background:
    radial-gradient(600px 400px at 100% 0%, rgba(8, 104, 247, .25), transparent 60%),
    radial-gradient(500px 360px at 0% 100%, rgba(8, 104, 247, .18), transparent 62%),
    linear-gradient(135deg, #0a2a5e 0%, #0d3a7e 50%, #0f4a9e 100%);
  display: grid;
  /* 装饰与数据分层，指标横向铺开，避免使用大比例左列把数据推到右侧。 */
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: center;
}
.achievements-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  opacity: .6;
}
.achievements-banner::after {
  content: '';
  position: absolute;
  right: -80px;
  bottom: -100px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(8, 104, 247, .3), transparent 70%);
  pointer-events: none;
  filter: blur(20px);
}
.achievements-left {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 1;
  width: 25%;
  display: flex;
  align-items: center;
  pointer-events: none;
}
.achievements-deco {
  width: 100%;
  height: 100%;
  min-height: 100px;
  background: url("data:image/svg+xml,%3Csvg width='200' height='120' viewBox='0 0 200 120' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='60' cy='60' r='30' stroke='rgba(255,255,255,0.1)' stroke-width='1.5'/%3E%3Ccircle cx='60' cy='60' r='21' stroke='rgba(255,255,255,0.15)' stroke-width='1.5'/%3E%3Ccircle cx='60' cy='60' r='12' stroke='rgba(255,255,255,0.2)' stroke-width='1.5'/%3E%3Ccircle cx='140' cy='60' r='30' stroke='rgba(255,255,255,0.08)' stroke-width='1'/%3E%3Ccircle cx='140' cy='60' r='21' stroke='rgba(255,255,255,0.12)' stroke-width='1'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
  opacity: .7;
  /* 桌面端将圆环移到第一项指标后方，保留装饰感但不遮挡文字。 */
  transform: translateX(45%);
}
.achievements-right {
  position: relative;
  z-index: 2;
  width: 95%;
  margin-left: 5%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.ach-item {
  position: relative;
  padding: 10px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.ach-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 15%;
  bottom: 15%;
  width: 1px;
  background: rgba(255, 255, 255, .18);
}
.ach-ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  flex-shrink: 0;
}
.ach-ico svg {
  width: 20px;
  height: 20px;
  color: #7fb3ff;
}
.ach-num b {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: #ffffff;
  white-space: nowrap;
  justify-content: center;
}
.ach-num b em {
  font-style: normal;
  font-size: .48em;
  font-weight: 600;
  color: #7fb3ff;
}
.ach-label {
  font-size: 13.5px;
  color: rgba(255, 255, 255, .75);
  font-weight: 500;
  text-align: center;
}

/* ---------- 响应式 ---------- */
@media (max-width: 1100px) {
  .about-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
  }
  .about-hero-left h1 {
    font-size: clamp(28px, 3.6vw, 44px);
  }
  .about-profile-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px;
  }
  .achievements-banner {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .about-hero {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .about-hero-right {
    max-width: 560px;
    margin: 0 auto;
    width: 100%;
  }
  .hero-en-tag {
    margin-bottom: 18px;
  }
  .hero-accent-line {
    margin-top: 26px;
  }
  .about-profile-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .about-stats-card {
    max-width: 480px;
  }
  .achievements-banner {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: clamp(28px, 4vw, 44px) clamp(20px, 3vw, 36px);
  }
  .achievements-deco {
    min-height: 60px;
    max-width: 200px;
    margin: 0 auto;
    transform: none;
  }
  .achievements-right {
    /* 指标区必须继承横幅内容宽度，防止固定宽度或最小内容宽度造成水平裁剪。 */
    width: 100%;
    margin-left: 0;
    max-width: 100%;
    min-width: 0;
    grid-template-columns: repeat(4, 1fr);
  }
  .achievements-left {
    position: relative;
    inset: auto;
    width: 100%;
    display: block;
  }
  /* 平板和手机窗口都使用流式指标卡，避免编辑器快照或旧 HTML 固定宽度造成横向裁剪。 */
  .ach-item {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    width: auto !important;
    height: auto !important;
    transform: none !important;
  }
}

@media (max-width: 620px) {
  .page-head-about {
    padding-top: calc(var(--nav-h) + 32px);
    padding-bottom: 40px;
  }
  .about-hero {
    gap: 28px;
  }
  .about-hero-left h1 {
    font-size: clamp(30px, 9vw, 42px);
    line-height: 1.2;
  }
  .about-hero-left p {
    font-size: 14.5px;
  }
  .hero-en-tag span {
    font-size: 12px;
    letter-spacing: .2em;
  }
  .hero-en-tag i {
    width: 32px;
  }
  .hero-accent-line {
    margin-top: 22px;
    width: 36px;
    height: 2.5px;
  }
  .about-hero-img {
    border-radius: 18px;
  }
  .hero-img-tag {
    left: 14px;
    bottom: 14px;
    padding: 6px 12px 6px 10px;
    font-size: 12px;
    gap: 6px;
  }
  .hero-img-tag svg {
    width: 13px;
    height: 13px;
  }
  .about-profile-left .sec-title {
    font-size: clamp(24px, 6.5vw, 34px);
  }
  .about-stats-card {
    grid-template-columns: repeat(2, 1fr);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    box-sizing: border-box;
  }
  .about-stat-cell {
    padding: 20px 18px;
    align-items: center;
    text-align: center;
  }
  /* 移动端集团概览的数字、单位和说明统一居中，避免沿用桌面端左对齐。 */
  .about-stat-num b {
    justify-content: center;
  }
  .about-stat-label {
    text-align: center;
  }
  .about-stat-ico {
    width: 42px;
    height: 42px;
  }
  .about-stat-ico svg {
    width: 20px;
    height: 20px;
  }
  .about-stat-num b {
    font-size: clamp(22px, 6vw, 32px);
  }
  .achievements-banner {
    border-radius: var(--r-lg);
    text-align: center;
  }
  .achievements-right {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 0;
  }
  .ach-item {
    padding: 8px 12px;
    align-items: center;
    text-align: center;
    /* 修复：覆盖可视化编辑器写入的内联快照宽高与位移，避免撑爆栅格导致内容被裁剪 */
    width: auto !important;
    height: auto !important;
    transform: none !important;
  }
  .ach-item:nth-child(2)::after {
    display: none;
  }
  .ach-item:nth-child(1)::after,
  .ach-item:nth-child(3)::after {
    display: block;
  }
  .ach-ico {
    width: 40px;
    height: 40px;
  }
  .ach-ico svg {
    width: 18px;
    height: 18px;
  }
  .ach-num b {
    font-size: clamp(24px, 6.5vw, 34px);
  }
  .ach-label {
    font-size: 12.5px;
  }
}

@media (max-width: 380px) {
  .about-stats-card {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   28. 首页 V2.0 —— 全新设计的 8 个板块样式
   ============================================================ */

/* ---------- 1. Hero V2 ---------- */
.hero-v2 {
  position: relative;
  padding: calc(var(--nav-h) + 50px) 0 clamp(60px, 6vw, 100px);
  overflow: hidden;
  background:
    radial-gradient(1000px 600px at 95% 0%, rgba(22, 119, 255, .08), transparent 60%),
    radial-gradient(800px 500px at 5% 90%, rgba(22, 119, 255, .05), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #f0f6ff 55%, #ffffff 100%);
}

.hero-v2-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 3.5vw, 60px);
  align-items: center;
}

.hero-v2-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  border-radius: 100px;
  background: rgba(22, 119, 255, .08);
  border: 1px solid rgba(22, 119, 255, .2);
  color: var(--blue-500);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .02em;
  margin-bottom: 24px;
}
.hero-v2-tag svg {
  width: 15px;
  height: 15px;
}

.hero-v2-title {
  font-size: clamp(32px, 3.8vw, 58px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--txt-1);
  margin-bottom: 24px;
}
.hero-v2-title .line {
  display: block;
  overflow: hidden;
}
.hero-v2-title .line > span {
  display: block;
  animation: riseIn .95s var(--ease) both;
}
.hero-v2-title .line:nth-child(1) > span { animation-delay: .08s; }
.hero-v2-title .line:nth-child(2) > span { animation-delay: .2s; }
.hero-v2-title .line:nth-child(3) > span { animation-delay: .32s; }
.hero-v2-title .accent {
  color: var(--blue-500);
}

.hero-v2-desc {
  font-size: clamp(14.5px, 1.6vw, 17px);
  line-height: 1.95;
  color: var(--txt-3);
  max-width: 580px;
  margin-bottom: 32px;
}

.hero-v2-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 40px;
}
.hero-v2-btns .btn {
  height: 54px;
  padding: 0 32px;
  font-size: 15.5px;
}
.hero-v2-btns .btn-primary {
  box-shadow: 0 6px 20px rgba(22, 119, 255, .28);
}
.hero-v2-btns .btn-ghost svg {
  width: 16px;
  height: 16px;
  color: var(--txt-2);
  transition: color .3s;
}
.hero-v2-btns .btn-ghost:hover svg {
  color: var(--blue-500);
}

/* Hero 数据网格 2x2 */
.hero-v2-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  max-width: 480px;
  position: relative;
}
.hstat-item {
  padding: 20px 24px;
  position: relative;
}
.hstat-item b {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-size: clamp(26px, 2.6vw, 38px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--blue-500);
  white-space: nowrap;
}
.hstat-item b em {
  font-style: normal;
  font-size: .48em;
  font-weight: 600;
}
.hstat-item > span {
  display: block;
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--txt-3);
  line-height: 1.4;
}
.hstat-divider {
  position: absolute;
  background: var(--line-strong);
}
.hstat-divider-v {
  left: 50%;
  top: 10%;
  bottom: 10%;
  width: 1px;
  transform: translateX(-50%);
}
.hstat-divider:not(.hstat-divider-v) {
  left: 8%;
  right: 8%;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
}

/* Hero 右侧大图 */
.hero-v2-right {
  position: relative;
}
.hero-v2-img {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(8, 30, 66, .15);
  aspect-ratio: 4 / 5;
}
.hero-v2-img img.cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.hero-v2-img:hover img.cover {
  transform: scale(1.05);
}

/* 右下角渐变蒙层文字 */
.hero-v2-img-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: clamp(24px, 2.5vw, 40px);
  padding-top: clamp(60px, 6vw, 100px);
  background: linear-gradient(180deg, transparent 0%, rgba(5, 15, 35, .75) 100%);
}
.hero-v2-img-bottom h4 {
  font-size: clamp(17px, 1.7vw, 22px);
  font-weight: 800;
  color: #fff;
  margin-bottom: 8px;
  letter-spacing: -.01em;
}
.hero-v2-img-bottom p {
  font-size: clamp(13px, 1.4vw, 15px);
  line-height: 1.75;
  color: rgba(255, 255, 255, .82);
  margin: 0;
}

/* 中央播放按钮 */
.hero-v2-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, .9);
  box-shadow: 0 12px 36px rgba(5, 15, 35, .3);
  cursor: pointer;
  transition: all .4s var(--ease);
}
.hero-v2-play svg {
  width: 24px;
  height: 24px;
  color: var(--blue-500);
  margin-left: 3px;
  transition: color .3s;
}
.hero-v2-play:hover {
  background: var(--blue-500);
  border-color: var(--blue-500);
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 16px 44px rgba(22, 119, 255, .45);
}
.hero-v2-play:hover svg {
  color: #fff;
}
/* 播放按钮动效：双层呼吸涟漪 + 图标心跳 */
.hero-v2-play::before,
.hero-v2-play::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .75);
  pointer-events: none;
  opacity: 0;
  animation: heroPlayRipple 2.6s cubic-bezier(.21, .61, .35, 1) infinite;
}
.hero-v2-play::after { animation-delay: 1.3s; }
.hero-v2-play svg {
  position: relative;
  z-index: 2;
  animation: heroPlayIcon 2.6s ease-in-out infinite;
}
.hero-v2-play:hover::before,
.hero-v2-play:hover::after,
.hero-v2-play:focus-visible::before,
.hero-v2-play:focus-visible::after {
  border-color: rgba(22, 119, 255, .55);
}
.hero-v2-play:focus-visible {
  background: var(--blue-500);
  border-color: var(--blue-500);
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 16px 44px rgba(22, 119, 255, .45);
}
.hero-v2-play:focus-visible svg { color: #fff; }
@keyframes heroPlayRipple {
  0% { transform: scale(1); opacity: .75; }
  75%, 100% { transform: scale(1.8); opacity: 0; }
}
@keyframes heroPlayIcon {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

@media (max-width: 1100px) {
  .hero-v2-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px;
  }
  .hero-v2-title {
    font-size: clamp(28px, 3.2vw, 44px);
  }
}
@media (max-width: 900px) {
  .hero-v2-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hero-v2-right {
    max-width: 560px;
    margin: 0 auto;
    width: 100%;
  }
  .hero-v2-img {
    aspect-ratio: 16 / 10;
  }
}
@media (max-width: 620px) {
  .hero-v2 {
    padding-top: calc(var(--nav-h) + 32px);
    padding-bottom: 50px;
  }
  .hero-v2-title {
    font-size: clamp(30px, 8vw, 40px);
  }
  .hero-v2-desc {
    font-size: 14.5px;
    margin-bottom: 26px;
  }
  .hero-v2-btns {
    margin-bottom: 32px;
    gap: 12px;
  }
  .hero-v2-btns .btn {
    flex: 1 1 auto;
    min-width: 140px;
    height: 48px;
    padding: 0 22px;
    font-size: 14.5px;
  }
  .hero-v2-stats {
    max-width: 100%;
  }
  .hstat-item {
    padding: 16px 18px;
  }
  .hstat-item b {
    font-size: clamp(22px, 6vw, 30px);
  }
  .hstat-item > span {
    font-size: 12.5px;
  }
  .hero-v2-play {
    width: 56px;
    height: 56px;
  }
  .hero-v2-play svg {
    width: 18px;
    height: 18px;
  }
}

/* ---------- 2. About V2 ---------- */
.about-v2 {
  padding: clamp(60px, 6vw, 100px) 0;
  background:
    radial-gradient(900px 500px at 5% 30%, rgba(22, 119, 255, .04), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
}

.about-v2-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(30px, 3.5vw, 60px);
  align-items: center;
}

.about-v2-eyebrow {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--blue-500);
  margin-bottom: 16px;
}

.about-v2-title {
  font-size: clamp(26px, 2.8vw, 42px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--txt-1);
  margin-bottom: 28px;
  position: relative;
}
.about-v2-title .title-line {
  display: block;
  width: 56px;
  height: 4px;
  background: var(--blue-500);
  border-radius: 2px;
  margin-top: 18px;
}

.about-v2-text p {
  font-size: clamp(14.5px, 1.6vw, 16.5px);
  line-height: 2;
  color: var(--txt-3);
  margin-bottom: 18px;
}
.about-v2-text p:last-child {
  margin-bottom: 0;
}
.about-v2-text .hl {
  color: var(--blue-500);
  font-weight: 600;
}

.about-v2-btn {
  margin-top: 32px;
}

/* About 右侧数据卡片 2x2 */
.about-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.about-stat-card {
  position: relative;
  padding: clamp(22px, 2vw, 32px);
  border-radius: var(--r-lg);
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: 0 4px 16px rgba(8, 30, 66, .05);
  transition: all .45s var(--ease);
  overflow: hidden;
}
.about-stat-card:hover {
  transform: translateY(-4px);
  border-color: rgba(22, 119, 255, .2);
  box-shadow: 0 14px 36px rgba(8, 30, 66, .1);
}
.about-stat-ico {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(22, 119, 255, .08);
  /* 提高图标容器边界的蓝色识别度，保持白底卡片的轻量感。 */
  border: 1px solid rgba(22, 119, 255, .22);
  margin-bottom: 18px;
  transition: all .4s;
}
.about-stat-card:hover .about-stat-ico {
  background: var(--blue-500);
  border-color: transparent;
}
.about-stat-ico svg {
  width: 22px;
  height: 22px;
  /* 使用实色并略增描边，避免细线在高分屏抗锯齿后显得发灰。 */
  color: #0868F7;
  stroke-width: 2.1px;
  opacity: 1;
  transition: color .3s;
}
.about-stat-card:hover .about-stat-ico svg {
  color: #fff;
}
.about-stat-num b {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--txt-1);
  transition: color .3s;
}
.about-stat-card:hover .about-stat-num b {
  color: var(--blue-500);
}
.about-stat-num b em {
  font-style: normal;
  font-size: .5em;
  font-weight: 600;
}
.about-stat-label {
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--txt-3);
  line-height: 1.5;
}

@media (max-width: 900px) {
  .about-v2-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .about-stats-grid {
    max-width: 500px;
  }
}
@media (max-width: 480px) {
  .about-stats-grid {
    gap: 12px;
  }
  .about-stat-card {
    padding: 18px;
  }
  .about-stat-ico {
    width: 42px;
    height: 42px;
    margin-bottom: 14px;
  }
  .about-stat-ico svg {
    width: 20px;
    height: 20px;
  }
  .about-stat-num b {
    font-size: clamp(22px, 6vw, 28px);
  }
}

/* ---------- 3. 六环生态圈 V2 ---------- */
.sixring-section {
  padding: clamp(60px, 6vw, 100px) 0;
  position: relative;
  background:
    radial-gradient(900px 500px at 95% 20%, rgba(22, 119, 255, .05), transparent 60%),
    radial-gradient(800px 460px at 5% 80%, rgba(22, 119, 255, .035), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #f5f9ff 50%, #ffffff 100%);
  overflow: hidden;
}
.sixring-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(22, 119, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 119, 255, .035) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 75%);
}
.sixring-section .wrap {
  position: relative;
  z-index: 2;
}

.sixring-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(36px, 4vw, 60px);
}
.sixring-eyebrow {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--blue-500);
  margin-bottom: 14px;
}
.sixring-title {
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--txt-1);
  margin-bottom: 16px;
}
.sixring-subtitle {
  font-size: clamp(14.5px, 1.6vw, 17px);
  line-height: 1.95;
  color: var(--txt-3);
}

.sixring-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 3.5vw, 60px);
  align-items: center;
}

/* 环形图 */
.sixring-ring-wrap {
  display: flex;
  justify-content: center;
}
.sixring-ring {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  max-width: 480px;
}
.sixring-ring::before {
  content: '';
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 1.5px dashed rgba(22, 119, 255, .2);
  animation: rotate 50s linear infinite;
}
.sixring-ring::after {
  content: '';
  position: absolute;
  inset: 28%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(22, 119, 255, .1), transparent 70%);
  animation: breathe 6s ease-in-out infinite;
}
@keyframes rotate {
  to { transform: rotate(360deg); }
}
@keyframes breathe {
  0%, 100% { transform: scale(.94); opacity: .55; }
  50% { transform: scale(1.08); opacity: 1; }
}

.sixring-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  text-align: center;
  width: 42%;
}
.sixring-center b {
  display: block;
  font-size: clamp(16px, 1.6vw, 22px);
  font-weight: 900;
  line-height: 1.3;
  color: var(--txt-1);
}
.sixring-center span {
  display: block;
  margin-top: 8px;
  font-size: 10.5px;
  letter-spacing: .2em;
  color: var(--txt-4);
  text-transform: uppercase;
}

.sixring-node {
  position: absolute;
  z-index: 5;
  width: 28%;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: #ffffff;
  box-shadow: 0 4px 18px rgba(8, 30, 66, .08);
  text-align: center;
  cursor: pointer;
  transition: all .45s var(--ease);
  transform: translate(-50%, -50%);
}
.sixring-node b {
  font-size: clamp(11px, 1.3vw, 14px);
  font-weight: 700;
  color: var(--txt-2);
  line-height: 1.3;
  transition: color .35s;
}
.sixring-node i {
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: .12em;
  color: var(--txt-4);
  text-transform: uppercase;
  transition: color .35s;
}
.sixring-node:hover,
.sixring-node.active {
  border-color: var(--blue-500);
  background: var(--blue-500);
  box-shadow: 0 12px 32px rgba(22, 119, 255, .35);
  transform: translate(-50%, -50%) scale(1.06);
}
.sixring-node:hover b,
.sixring-node.active b {
  color: #fff;
}
.sixring-node:hover i,
.sixring-node.active i {
  color: rgba(255, 255, 255, .78);
}

/* 正六边形节点位置 */
.sixring-n1 { top: 6.0%;  left: 50.0%; }
.sixring-n2 { top: 28.0%; left: 88.1%; }
.sixring-n3 { top: 72.0%; left: 88.1%; }
.sixring-n4 { top: 94.0%; left: 50.0%; }
.sixring-n5 { top: 72.0%; left: 11.9%; }
.sixring-n6 { top: 28.0%; left: 11.9%; }

/* 右侧详情卡片 */
.sixring-detail-card {
  padding: clamp(28px, 2.8vw, 44px);
  border-radius: var(--r-xl);
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: 0 16px 48px rgba(8, 30, 66, .08);
  transition: opacity .4s ease, transform .4s ease;
}
.sixring-detail-index {
  display: inline-block;
  margin-bottom: 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  padding: 5px 14px;
  border-radius: 100px;
  background: rgba(22, 119, 255, .08);
  border: 1px solid rgba(22, 119, 255, .16);
  color: var(--blue-500);
}
.sixring-detail-title {
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 800;
  color: var(--txt-1);
  margin-bottom: 18px;
  letter-spacing: -.015em;
}
.sixring-detail-desc {
  font-size: 15px;
  line-height: 1.95;
  color: var(--txt-3);
}
.sixring-detail-divider {
  height: 1px;
  margin: 28px 0;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}
.sixring-detail-bottom p {
  font-size: 15px;
  line-height: 1.95;
  color: var(--txt-3);
  margin: 0;
}

@media (max-width: 1024px) {
  .sixring-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .sixring-ring {
    max-width: 400px;
  }
}
@media (max-width: 620px) {
  .sixring-ring {
    max-width: 340px;
  }
  .sixring-node {
    width: 32%;
    padding: 6px;
  }
  .sixring-node b {
    font-size: 10.5px;
  }
  .sixring-node i {
    display: none;
  }
  .sixring-center b {
    font-size: 15px;
  }
  .sixring-center span {
    font-size: 9px;
    letter-spacing: .15em;
  }
  .sixring-detail-card {
    padding: 24px;
  }
}

/* ---------- 4. 四大品牌 V2（品牌面板样式对齐产业生态页 .biz-mark） ---------- */
.brands-v2 {
  padding: clamp(60px, 6vw, 100px) 0;
  background: #ffffff;
}

.brands-v2-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(36px, 4vw, 56px);
}
.brands-v2-eyebrow {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--blue-500);
  margin-bottom: 14px;
}
.brands-v2-title {
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--txt-1);
  margin-bottom: 16px;
}
.brands-v2-desc {
  font-size: clamp(14.5px, 1.6vw, 17px);
  line-height: 1.95;
  color: var(--txt-3);
}

.brands-v2-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 1.6vw, 28px);
}

.brand-v2-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(19, 102, 236, .1);
  box-shadow: 0 14px 44px rgba(31, 66, 135, .08);
  transition: all .5s var(--ease);
}
.brand-v2-card:hover {
  transform: translateY(-8px);
  border-color: rgba(19, 102, 236, .22);
  box-shadow: 0 22px 60px rgba(31, 66, 135, .13);
}

/* ---- 品牌面板：浅蓝渐变 + 花瓣光影（同产业生态页） ---- */
.brand-v2-top {
  position: relative;
  min-height: clamp(230px, 19vw, 300px);
  padding: clamp(20px, 1.8vw, 30px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
}
.brand-v2-top::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 52% at 76% 66%, rgba(255, 255, 255, .5), transparent 70%),
    radial-gradient(52% 40% at 24% 22%, rgba(255, 255, 255, .34), transparent 70%),
    linear-gradient(168deg, #d8e8fc 0%, #e6f1fe 46%, #f2f8ff 100%);
  transition: transform .8s var(--ease);
}
.brand-v2-card:hover .brand-v2-top::before {
  transform: scale(1.06);
}
/* 花瓣光影装饰层 */
.brand-v2-top::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(46% 34% at 78% 74%, rgba(147, 189, 246, .5) 0%, rgba(147, 189, 246, 0) 70%),
    radial-gradient(36% 26% at 88% 52%, rgba(190, 218, 250, .55) 0%, rgba(190, 218, 250, 0) 72%),
    radial-gradient(30% 22% at 62% 88%, rgba(205, 228, 252, .6) 0%, rgba(205, 228, 252, 0) 74%);
  background-size: 100% 100%;
  background-position: 0 0;
  filter: blur(3px);
  z-index: 1;
}

/* 面板内容层：LOGO 在上，品牌大字、英文年份依次向下 */
.brand-v2-top-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.brand-v2-logo {
  height: auto;
  display: flex;
  align-items: center;
  margin-bottom: clamp(12px, 1.1vw, 18px);
}
.brand-v2-logo img {
  display: block;
  width: auto;
  height: 52px;
  object-fit: contain;
}
.brand-v2-name-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.brand-v2-name-row h3 {
  font-size: clamp(30px, 2.6vw, 40px);
  font-weight: 900;
  color: #0d2a5e;
  letter-spacing: .14em;
  margin: 0;
  line-height: 1.25;
}
.brand-v2-num {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .22em;
  color: #6b7f9f;
  text-transform: uppercase;
}
/* 英文年份水印（面板左下，参考图 HUAWA · SINCE 2014） */
.brand-v2-mark-foot {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding-top: 26px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: rgba(84, 112, 156, .78);
  line-height: 2;
}
/* 特性玻璃标签 */
.brand-v2-badge {
  position: relative;
  z-index: 2;
  margin-top: 14px;
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  padding: 6px 14px;
  border-radius: 100px;
  align-self: flex-start;
  background: rgba(255, 255, 255, .66);
  border: 1px solid rgba(19, 102, 236, .18);
  color: var(--blue-600);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* 面板内 LOGO 适配：深色字标在浅底上还原本色 */
.brand-v2-card.c-huadi .brand-v2-logo img { filter: none; opacity: 1; }
.brand-v2-card .brand-v2-logo img { filter: none; }
/* 花娃 3D 形象：保留原彩 + 柔和投影（同产业生态页） */
.brand-v2-card.c-huawa .brand-v2-logo img {
  height: 68px;
  filter: drop-shadow(0 8px 18px rgba(6, 20, 50, .25));
}
/* 爱花居：金色原色 + 轻投影 */
.brand-v2-card.c-aihuaju .brand-v2-logo img {
  height: 56px;
  filter: drop-shadow(0 4px 12px rgba(6, 20, 50, .18));
}
/* 管单宝：方形图标圆角 + 细描边（同产业生态页） */
.brand-v2-card.c-gdb .brand-v2-logo img {
  height: 58px;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(6, 20, 50, .18), 0 0 0 1px rgba(255, 255, 255, .5);
}

.brand-v2-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.brand-v2-body h4 {
  font-size: 17px;
  font-weight: 700;
  color: var(--txt-1);
  margin-bottom: 12px;
  line-height: 1.5;
}
.brand-v2-body p {
  font-size: 14px;
  line-height: 1.85;
  color: var(--txt-3);
  flex: 1;
  margin-bottom: 18px;
}
.brand-v2-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.brand-v2-tags span {
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 100px;
  background: var(--ink-800);
  border: 1px solid var(--line);
  color: var(--txt-3);
}
.brand-v2-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--blue-500);
  transition: gap .35s var(--ease);
}
.brand-v2-link:hover {
  gap: 12px;
}
.brand-v2-link svg {
  width: 14px;
  height: 14px;
}

@media (max-width: 1100px) {
  .brands-v2-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .brand-v2-top { min-height: 250px; }
  .brand-v2-card.c-huawa .brand-v2-logo img { height: 60px; }
  .brand-v2-card.c-aihuaju .brand-v2-logo img { height: 50px; }
  .brand-v2-card.c-gdb .brand-v2-logo img { height: 52px; }
}
@media (max-width: 620px) {
  .brands-v2-grid {
    grid-template-columns: 1fr;
  }
  .brand-v2-top { min-height: 230px; }
  .brand-v2-logo img { height: 46px; }
  .brand-v2-card.c-huawa .brand-v2-logo img { height: 54px; }
  .brand-v2-card.c-aihuaju .brand-v2-logo img { height: 44px; }
  .brand-v2-card.c-gdb .brand-v2-logo img { height: 46px; border-radius: 10px; }
  .brand-v2-body {
    padding: 20px;
  }
}

/* ---------- 5. 技术驱动板块 ---------- */
.tech-section {
  padding: clamp(60px, 6vw, 100px) 0;
  position: relative;
  background:
    radial-gradient(900px 500px at 90% 10%, rgba(22, 119, 255, .12), transparent 60%),
    radial-gradient(800px 500px at 10% 90%, rgba(22, 119, 255, .08), transparent 60%),
    linear-gradient(180deg, #0a1a3a 0%, #0d2247 50%, #0a1a3a 100%);
  overflow: hidden;
}
.tech-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
}
.tech-section .wrap {
  position: relative;
  z-index: 2;
}

.tech-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(36px, 4vw, 56px);
}
.tech-eyebrow {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #6ba4ff;
  margin-bottom: 14px;
}
.tech-title {
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: #ffffff;
  margin-bottom: 16px;
}
.tech-desc {
  font-size: clamp(14.5px, 1.6vw, 17px);
  line-height: 1.95;
  color: rgba(255, 255, 255, .72);
}

.tech-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 1.8vw, 28px);
}

.tech-card {
  position: relative;
  padding: clamp(24px, 2.2vw, 36px);
  border-radius: var(--r-lg);
  background: linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02));
  border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all .45s var(--ease);
  overflow: hidden;
}
.tech-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(400px 200px at 0% 0%, rgba(22, 119, 255, .25), transparent 60%);
  opacity: 0;
  transition: opacity .45s;
  pointer-events: none;
}
.tech-card:hover {
  transform: translateY(-6px);
  border-color: rgba(107, 164, 255, .35);
  box-shadow: 0 16px 48px rgba(0, 0, 0, .3), 0 0 0 1px rgba(107, 164, 255, .15) inset;
}
.tech-card:hover::before {
  opacity: 1;
}
.tech-card > * {
  position: relative;
  z-index: 2;
}

.tech-card-num {
  display: block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .12em;
  color: #6ba4ff;
  margin-bottom: 18px;
}
.tech-card h3 {
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 12px;
  line-height: 1.4;
  letter-spacing: -.01em;
}
.tech-card p {
  font-size: 14.5px;
  line-height: 1.85;
  color: rgba(255, 255, 255, .68);
  margin: 0;
}

@media (max-width: 1024px) {
  .tech-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 620px) {
  .tech-grid {
    grid-template-columns: 1fr;
  }
  .tech-card {
    padding: 24px;
  }
}

/* ---------- 6. 企业影片 V2 ---------- */
.film-v2 {
  padding: clamp(60px, 6vw, 100px) 0;
  background: #ffffff;
}

.film-v2-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(36px, 4vw, 56px);
}
.film-v2-eyebrow {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--blue-500);
  margin-bottom: 14px;
}
.film-v2-title {
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--txt-1);
}

.film-v2-card {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(8, 30, 66, .15);
  aspect-ratio: 16 / 9;
  background: #070d1a;
}
.film-v2-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.film-v2-poster {
  position: absolute;
  inset: 0;
  z-index: 4;
  cursor: pointer;
}
.film-v2-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.film-v2-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 11, 24, .4) 0%, rgba(5, 11, 24, .1) 40%, rgba(5, 11, 24, .75) 100%);
}
.film-v2-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, .72);
  color: #fff;
  box-shadow: 0 14px 40px rgba(4, 10, 22, .4);
  transition: all .45s var(--ease);
}
.film-v2-poster:hover .film-v2-play {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--blue-500);
  border-color: transparent;
  box-shadow: 0 16px 44px rgba(22, 119, 255, .5);
}
.film-v2-play::after {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .46);
  animation: ring 2.8s var(--ease-soft) infinite;
}
.film-v2-play svg {
  width: 27px;
  height: 27px;
  margin-left: 3px;
}

.film-v2-text {
  position: absolute;
  left: clamp(24px, 2.5vw, 44px);
  bottom: clamp(24px, 2.5vw, 44px);
  z-index: 5;
}
.film-v2-text h3 {
  font-size: clamp(17px, 1.7vw, 23px);
  font-weight: 800;
  color: #fff;
  margin: 0 0 8px;
  letter-spacing: -.01em;
  text-shadow: 0 2px 18px rgba(4, 10, 22, .7);
}
.film-v2-text p {
  font-size: 14px;
  color: rgba(255, 255, 255, .82);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-shadow: 0 2px 12px rgba(4, 10, 22, .6);
}
.film-v2-text p::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
  animation: pulse 2.4s var(--ease-soft) infinite;
}

.film-v2-poster.hide {
  opacity: 0;
  visibility: hidden;
}

@media (max-width: 620px) {
  .film-v2-play {
    width: 62px;
    height: 62px;
  }
  .film-v2-play svg {
    width: 20px;
    height: 20px;
  }
  .film-v2-play::after {
    inset: -9px;
  }
  .film-v2-text h3 {
    font-size: 16px;
  }
  .film-v2-text p {
    font-size: 12.5px;
  }
}

/* ---------- 7. 新闻中心 V2 ---------- */
.news-v2 {
  padding: clamp(60px, 6vw, 100px) 0;
  background:
    linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
}

.news-v2-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(36px, 4vw, 56px);
}
.news-v2-eyebrow {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--blue-500);
  margin-bottom: 14px;
}
.news-v2-title {
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--txt-1);
  margin-bottom: 16px;
}
.news-v2-desc {
  font-size: clamp(14.5px, 1.6vw, 17px);
  line-height: 1.95;
  color: var(--txt-3);
}

.news-v2-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(20px, 2vw, 36px);
  margin-bottom: clamp(36px, 4vw, 56px);
}

.news-v2-hero {
  display: block;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--line);
  transition: all .45s var(--ease);
}
.news-v2-hero:hover {
  transform: translateY(-4px);
  border-color: rgba(22, 119, 255, .22);
  box-shadow: 0 18px 44px rgba(8, 30, 66, .1);
}
.news-v2-hero-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.news-v2-hero-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease);
}
.news-v2-hero:hover .news-v2-hero-thumb img {
  transform: scale(1.06);
}
.news-v2-date-chip {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  padding: 6px 14px;
  border-radius: 100px;
  background: rgba(22, 119, 255, .92);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.news-v2-hero-body {
  padding: 24px;
}
.news-v2-hero-body h3 {
  font-size: clamp(17px, 1.7vw, 22px);
  font-weight: 700;
  color: var(--txt-1);
  line-height: 1.5;
  margin-bottom: 10px;
  letter-spacing: -.01em;
  transition: color .3s;
}
.news-v2-hero:hover h3 {
  color: var(--blue-500);
}
.news-v2-hero-body p {
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--txt-3);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-v2-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.news-v2-item {
  display: flex;
  gap: 16px;
  padding: 14px;
  border-radius: var(--r-md);
  background: #ffffff;
  border: 1px solid var(--line);
  transition: all .4s var(--ease);
}
.news-v2-item:hover {
  border-color: rgba(22, 119, 255, .24);
  background: var(--ink-800);
  transform: translateX(6px);
}
.news-v2-item-thumb {
  flex: 0 0 100px;
  width: 100px;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--ink-600);
}
.news-v2-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.news-v2-item:hover .news-v2-item-thumb img {
  transform: scale(1.1);
}
.news-v2-item-txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.news-v2-item-txt h4 {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--txt-1);
  line-height: 1.55;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .3s;
}
.news-v2-item:hover h4 {
  color: var(--blue-500);
}
.news-v2-item-txt time {
  font-size: 12.5px;
  color: var(--txt-4);
  letter-spacing: .03em;
}

/* 底部数据统计条 */
.news-v2-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.news-stat-item {
  padding: clamp(20px, 2vw, 32px) 20px;
  text-align: center;
  border-radius: var(--r-lg);
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: 0 4px 16px rgba(8, 30, 66, .05);
  transition: all .4s var(--ease);
}
.news-stat-item:hover {
  transform: translateY(-4px);
  border-color: rgba(22, 119, 255, .2);
  box-shadow: 0 14px 36px rgba(8, 30, 66, .1);
}
.news-stat-item b {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  /* 统计主数字按参考图控制比例，避免相对说明文字过度放大。 */
  font-size: clamp(30px, 2vw, 34px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--blue-500);
  white-space: nowrap;
}
.news-stat-item b em {
  font-style: normal;
  font-size: .5em;
  font-weight: 600;
}
/* 统计说明文字只匹配卡片直属 span，避免覆盖数字节点的主字号。 */
.news-stat-item > span {
  display: block;
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--txt-3);
  line-height: 1.4;
}

@media (max-width: 1024px) {
  .news-v2-layout {
    grid-template-columns: 1fr;
  }
  /* 修复：覆盖可视化编辑器写入的内联快照尺寸，避免移动端横向溢出 */
  .news-v2-hero,
  .news-v2-hero-thumb,
  .news-v2-hero-thumb img,
  .news-v2-hero-body {
    width: auto !important;
    height: auto !important;
    transform: none !important;
  }
  .news-v2-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 620px) {
  .news-v2-item-thumb {
    flex: 0 0 80px;
    width: 80px;
    height: 60px;
  }
  .news-v2-item-txt h4 {
    font-size: 13.5px;
  }
  .news-v2-stats {
    gap: 12px;
  }
  .news-stat-item {
    padding: 18px 12px;
  }
  .news-stat-item b {
    font-size: clamp(26px, 7vw, 36px);
  }
  .news-stat-item > span {
    font-size: 12px;
  }
}
@media (max-width: 420px) {
  .news-v2-stats {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- 8. 加入我们 V2 ---------- */
.join-v2 {
  padding: clamp(50px, 5vw, 80px) 0 clamp(60px, 6vw, 100px);
}

.join-v2-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  padding: clamp(44px, 4.5vw, 76px) clamp(30px, 4vw, 72px);
  background:
    radial-gradient(800px 400px at 85% 10%, rgba(107, 164, 255, .2), transparent 60%),
    radial-gradient(600px 400px at 10% 90%, rgba(107, 164, 255, .12), transparent 60%),
    linear-gradient(150deg, #0a2550 0%, #0d2e63 50%, #0a2550 100%);
  text-align: center;
}
.join-v2-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 75%);
}
.join-v2-card > * {
  position: relative;
  z-index: 2;
}

.join-v2-eyebrow {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #8bb8ff;
  margin-bottom: 18px;
}
.join-v2-title {
  font-size: clamp(24px, 2.6vw, 40px);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -.025em;
  color: #ffffff;
  margin-bottom: 20px;
}
.join-v2-desc {
  max-width: 720px;
  margin: 0 auto 36px;
  font-size: clamp(14px, 1.55vw, 16.5px);
  line-height: 2;
  color: rgba(255, 255, 255, .78);
}

.join-v2-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-bottom: 36px;
}
.btn-join-dark {
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.btn-join-dark:hover {
  background: rgba(255, 255, 255, .2);
  border-color: rgba(255, 255, 255, .35);
  transform: translateY(-2px);
  color: #fff;
}

.join-v2-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.join-v2-tags span {
  font-size: 13px;
  padding: 8px 18px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .78);
  transition: all .35s;
}
.join-v2-tags span:hover {
  background: rgba(255, 255, 255, .15);
  border-color: rgba(255, 255, 255, .25);
  color: #fff;
}

@media (max-width: 620px) {
  .join-v2-card {
    padding: 40px 24px;
  }
  .join-v2-title {
    font-size: clamp(22px, 6vw, 32px);
  }
  .join-v2-btns .btn {
    flex: 1 1 auto;
    min-width: 140px;
  }
  .join-v2-tags {
    gap: 8px;
  }
  .join-v2-tags span {
    font-size: 12px;
    padding: 7px 14px;
  }
}

/* ============================================================
   28. 首页 V2.0 —— 全新设计的 8 个板块样式
   ============================================================ */

/* ---------- 1. Hero V2 ---------- */
.hero-v2 {
  position: relative;
  padding: calc(var(--nav-h) + 50px) 0 clamp(60px, 6vw, 100px);
  overflow: hidden;
  background:
    radial-gradient(1000px 600px at 95% 0%, rgba(22, 119, 255, .08), transparent 60%),
    radial-gradient(800px 500px at 5% 90%, rgba(22, 119, 255, .05), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #f0f6ff 55%, #ffffff 100%);
}

.hero-v2-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 3.5vw, 60px);
  align-items: center;
}

.hero-v2-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  border-radius: 100px;
  background: rgba(22, 119, 255, .08);
  border: 1px solid rgba(22, 119, 255, .2);
  color: var(--blue-500);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .02em;
  margin-bottom: 24px;
}
.hero-v2-tag svg {
  width: 15px;
  height: 15px;
}

.hero-v2-title {
  font-size: clamp(32px, 3.8vw, 58px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--txt-1);
  margin-bottom: 24px;
}
.hero-v2-title .line {
  display: block;
  overflow: hidden;
}
.hero-v2-title .line > span {
  display: block;
  animation: riseIn .95s var(--ease) both;
}
.hero-v2-title .line:nth-child(1) > span { animation-delay: .08s; }
.hero-v2-title .line:nth-child(2) > span { animation-delay: .2s; }
.hero-v2-title .line:nth-child(3) > span { animation-delay: .32s; }
.hero-v2-title .accent {
  color: var(--blue-500);
}

.hero-v2-desc {
  font-size: clamp(14.5px, 1.6vw, 17px);
  line-height: 1.95;
  color: var(--txt-3);
  max-width: 580px;
  margin-bottom: 32px;
}

.hero-v2-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 40px;
}
.hero-v2-btns .btn {
  height: 54px;
  padding: 0 32px;
  font-size: 15.5px;
}
.hero-v2-btns .btn-primary {
  box-shadow: 0 6px 20px rgba(22, 119, 255, .28);
}
.hero-v2-btns .btn-ghost svg {
  width: 16px;
  height: 16px;
  color: var(--txt-2);
  transition: color .3s;
}
.hero-v2-btns .btn-ghost:hover svg {
  color: var(--blue-500);
}

/* Hero 数据网格 2x2 */
.hero-v2-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  max-width: 480px;
  position: relative;
}
.hstat-item {
  padding: 20px 24px;
  position: relative;
}
.hstat-item b {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-size: clamp(26px, 2.6vw, 38px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--blue-500);
  white-space: nowrap;
}
.hstat-item b em {
  font-style: normal;
  font-size: .48em;
  font-weight: 600;
}
.hstat-item > span {
  display: block;
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--txt-3);
  line-height: 1.4;
}
.hstat-divider {
  position: absolute;
  background: var(--line-strong);
}
.hstat-divider-v {
  left: 50%;
  top: 10%;
  bottom: 10%;
  width: 1px;
  transform: translateX(-50%);
}
.hstat-divider:not(.hstat-divider-v) {
  left: 8%;
  right: 8%;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
}

/* Hero 右侧大图 */
.hero-v2-right {
  position: relative;
}
.hero-v2-img {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(8, 30, 66, .15);
  aspect-ratio: 4 / 5;
}
.hero-v2-img img.cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.hero-v2-img:hover img.cover {
  transform: scale(1.05);
}

/* 右下角渐变蒙层文字 */
.hero-v2-img-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: clamp(24px, 2.5vw, 40px);
  padding-top: clamp(60px, 6vw, 100px);
  background: linear-gradient(180deg, transparent 0%, rgba(5, 15, 35, .75) 100%);
}
.hero-v2-img-bottom h4 {
  font-size: clamp(17px, 1.7vw, 22px);
  font-weight: 800;
  color: #fff;
  margin-bottom: 8px;
  letter-spacing: -.01em;
}
.hero-v2-img-bottom p {
  font-size: clamp(13px, 1.4vw, 15px);
  line-height: 1.75;
  color: rgba(255, 255, 255, .82);
  margin: 0;
}

/* 中央播放按钮 */
.hero-v2-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, .9);
  box-shadow: 0 12px 36px rgba(5, 15, 35, .3);
  cursor: pointer;
  transition: all .4s var(--ease);
}
.hero-v2-play svg {
  width: 24px;
  height: 24px;
  color: var(--blue-500);
  margin-left: 3px;
  transition: color .3s;
}
.hero-v2-play:hover {
  background: var(--blue-500);
  border-color: var(--blue-500);
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 16px 44px rgba(22, 119, 255, .45);
}
.hero-v2-play:hover svg {
  color: #fff;
}
/* 播放按钮动效：双层呼吸涟漪 + 图标心跳 */
.hero-v2-play::before,
.hero-v2-play::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .75);
  pointer-events: none;
  opacity: 0;
  animation: heroPlayRipple 2.6s cubic-bezier(.21, .61, .35, 1) infinite;
}
.hero-v2-play::after { animation-delay: 1.3s; }
.hero-v2-play svg {
  position: relative;
  z-index: 2;
  animation: heroPlayIcon 2.6s ease-in-out infinite;
}
.hero-v2-play:hover::before,
.hero-v2-play:hover::after,
.hero-v2-play:focus-visible::before,
.hero-v2-play:focus-visible::after {
  border-color: rgba(22, 119, 255, .55);
}
.hero-v2-play:focus-visible {
  background: var(--blue-500);
  border-color: var(--blue-500);
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 16px 44px rgba(22, 119, 255, .45);
}
.hero-v2-play:focus-visible svg { color: #fff; }
@keyframes heroPlayRipple {
  0% { transform: scale(1); opacity: .75; }
  75%, 100% { transform: scale(1.8); opacity: 0; }
}
@keyframes heroPlayIcon {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

@media (max-width: 1100px) {
  .hero-v2-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px;
  }
  .hero-v2-title {
    font-size: clamp(28px, 3.2vw, 44px);
  }
}
@media (max-width: 900px) {
  .hero-v2-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hero-v2-right {
    max-width: 560px;
    margin: 0 auto;
    width: 100%;
  }
  .hero-v2-img {
    aspect-ratio: 16 / 10;
  }
}
@media (max-width: 620px) {
  .hero-v2 {
    padding-top: calc(var(--nav-h) + 32px);
    padding-bottom: 50px;
  }
  .hero-v2-title {
    font-size: clamp(30px, 8vw, 40px);
  }
  .hero-v2-desc {
    font-size: 14.5px;
    margin-bottom: 26px;
  }
  .hero-v2-btns {
    margin-bottom: 32px;
    gap: 12px;
  }
  .hero-v2-btns .btn {
    flex: 1 1 auto;
    min-width: 140px;
    height: 48px;
    padding: 0 22px;
    font-size: 14.5px;
  }
  .hero-v2-stats {
    max-width: 100%;
  }
  .hstat-item {
    padding: 16px 18px;
  }
  .hstat-item b {
    font-size: clamp(22px, 6vw, 30px);
  }
  .hstat-item > span {
    font-size: 12.5px;
  }
  .hero-v2-play {
    width: 56px;
    height: 56px;
  }
  .hero-v2-play svg {
    width: 18px;
    height: 18px;
  }
}

/* ---------- 2. About V2 ---------- */
.about-v2 {
  padding: clamp(60px, 6vw, 100px) 0;
  background:
    radial-gradient(900px 500px at 5% 30%, rgba(22, 119, 255, .04), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
}

.about-v2-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(30px, 3.5vw, 60px);
  align-items: center;
}

.about-v2-eyebrow {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--blue-500);
  margin-bottom: 16px;
}

.about-v2-title {
  font-size: clamp(26px, 2.8vw, 42px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--txt-1);
  margin-bottom: 28px;
  position: relative;
}
.about-v2-title .title-line {
  display: block;
  width: 56px;
  height: 4px;
  background: var(--blue-500);
  border-radius: 2px;
  margin-top: 18px;
}

.about-v2-text p {
  font-size: clamp(14.5px, 1.6vw, 16.5px);
  line-height: 2;
  color: var(--txt-3);
  margin-bottom: 18px;
}
.about-v2-text p:last-child {
  margin-bottom: 0;
}
.about-v2-text .hl {
  color: var(--blue-500);
  font-weight: 600;
}

.about-v2-btn {
  margin-top: 32px;
}

/* About 右侧数据卡片 2x2 */
.about-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.about-stat-card {
  position: relative;
  padding: clamp(22px, 2vw, 32px);
  border-radius: var(--r-lg);
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: 0 4px 16px rgba(8, 30, 66, .05);
  transition: all .45s var(--ease);
  overflow: hidden;
}
.about-stat-card:hover {
  transform: translateY(-4px);
  border-color: rgba(22, 119, 255, .2);
  box-shadow: 0 14px 36px rgba(8, 30, 66, .1);
}
.about-stat-ico {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(22, 119, 255, .08);
  /* 与上方重复模板保持一致，确保静态页和 PHP 页颜色统一。 */
  border: 1px solid rgba(22, 119, 255, .22);
  margin-bottom: 18px;
  transition: all .4s;
}
.about-stat-card:hover .about-stat-ico {
  background: var(--blue-500);
  border-color: transparent;
}
.about-stat-ico svg {
  width: 22px;
  height: 22px;
  /* 明确使用参考图蓝色，避免主题变量或透明度造成图标变淡。 */
  color: #0868F7;
  stroke-width: 2.1px;
  opacity: 1;
  transition: color .3s;
}
.about-stat-card:hover .about-stat-ico svg {
  color: #fff;
}
.about-stat-num b {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--txt-1);
  transition: color .3s;
}
.about-stat-card:hover .about-stat-num b {
  color: var(--blue-500);
}
.about-stat-num b em {
  font-style: normal;
  font-size: .5em;
  font-weight: 600;
}
.about-stat-label {
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--txt-3);
  line-height: 1.5;
}

@media (max-width: 900px) {
  .about-v2-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .about-stats-grid {
    max-width: 500px;
  }
}
@media (max-width: 480px) {
  .about-stats-grid {
    gap: 12px;
  }
  .about-stat-card {
    padding: 18px;
  }
  .about-stat-ico {
    width: 42px;
    height: 42px;
    margin-bottom: 14px;
  }
  .about-stat-ico svg {
    width: 20px;
    height: 20px;
  }
  .about-stat-num b {
    font-size: clamp(22px, 6vw, 28px);
  }
}

/* ---------- 3. 六环生态圈 V2 ---------- */
.sixring-section {
  padding: clamp(60px, 6vw, 100px) 0;
  position: relative;
  background:
    radial-gradient(900px 500px at 95% 20%, rgba(22, 119, 255, .05), transparent 60%),
    radial-gradient(800px 460px at 5% 80%, rgba(22, 119, 255, .035), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #f5f9ff 50%, #ffffff 100%);
  overflow: hidden;
}
.sixring-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(22, 119, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 119, 255, .035) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 75%);
}
.sixring-section .wrap {
  position: relative;
  z-index: 2;
}

.sixring-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(36px, 4vw, 60px);
}
.sixring-eyebrow {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--blue-500);
  margin-bottom: 14px;
}
.sixring-title {
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--txt-1);
  margin-bottom: 16px;
}
.sixring-subtitle {
  font-size: clamp(14.5px, 1.6vw, 17px);
  line-height: 1.95;
  color: var(--txt-3);
}

.sixring-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 3.5vw, 60px);
  align-items: center;
}

/* 环形图 */
.sixring-ring-wrap {
  display: flex;
  justify-content: center;
}
.sixring-ring {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  max-width: 480px;
}
.sixring-ring::before {
  content: '';
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 1.5px dashed rgba(22, 119, 255, .2);
  animation: rotate 50s linear infinite;
}
.sixring-ring::after {
  content: '';
  position: absolute;
  inset: 28%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(22, 119, 255, .1), transparent 70%);
  animation: breathe 6s ease-in-out infinite;
}
@keyframes rotate {
  to { transform: rotate(360deg); }
}
@keyframes breathe {
  0%, 100% { transform: scale(.94); opacity: .55; }
  50% { transform: scale(1.08); opacity: 1; }
}

.sixring-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  text-align: center;
  width: 42%;
}
.sixring-center b {
  display: block;
  font-size: clamp(16px, 1.6vw, 22px);
  font-weight: 900;
  line-height: 1.3;
  color: var(--txt-1);
}
.sixring-center span {
  display: block;
  margin-top: 8px;
  font-size: 10.5px;
  letter-spacing: .2em;
  color: var(--txt-4);
  text-transform: uppercase;
}

.sixring-node {
  position: absolute;
  z-index: 5;
  width: 28%;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: #ffffff;
  box-shadow: 0 4px 18px rgba(8, 30, 66, .08);
  text-align: center;
  cursor: pointer;
  transition: all .45s var(--ease);
  transform: translate(-50%, -50%);
}
.sixring-node b {
  font-size: clamp(11px, 1.3vw, 14px);
  font-weight: 700;
  color: var(--txt-2);
  line-height: 1.3;
  transition: color .35s;
}
.sixring-node i {
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: .12em;
  color: var(--txt-4);
  text-transform: uppercase;
  transition: color .35s;
}
.sixring-node:hover,
.sixring-node.active {
  border-color: var(--blue-500);
  background: var(--blue-500);
  box-shadow: 0 12px 32px rgba(22, 119, 255, .35);
  transform: translate(-50%, -50%) scale(1.06);
}
.sixring-node:hover b,
.sixring-node.active b {
  color: #fff;
}
.sixring-node:hover i,
.sixring-node.active i {
  color: rgba(255, 255, 255, .78);
}

/* 正六边形节点位置 */
.sixring-n1 { top: 6.0%;  left: 50.0%; }
.sixring-n2 { top: 28.0%; left: 88.1%; }
.sixring-n3 { top: 72.0%; left: 88.1%; }
.sixring-n4 { top: 94.0%; left: 50.0%; }
.sixring-n5 { top: 72.0%; left: 11.9%; }
.sixring-n6 { top: 28.0%; left: 11.9%; }

/* 右侧详情卡片 */
.sixring-detail-card {
  padding: clamp(28px, 2.8vw, 44px);
  border-radius: var(--r-xl);
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: 0 16px 48px rgba(8, 30, 66, .08);
  transition: opacity .4s ease, transform .4s ease;
}
.sixring-detail-index {
  display: inline-block;
  margin-bottom: 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  padding: 5px 14px;
  border-radius: 100px;
  background: rgba(22, 119, 255, .08);
  border: 1px solid rgba(22, 119, 255, .16);
  color: var(--blue-500);
}
.sixring-detail-title {
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 800;
  color: var(--txt-1);
  margin-bottom: 18px;
  letter-spacing: -.015em;
}
.sixring-detail-desc {
  font-size: 15px;
  line-height: 1.95;
  color: var(--txt-3);
}
.sixring-detail-divider {
  height: 1px;
  margin: 28px 0;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}
.sixring-detail-bottom p {
  font-size: 15px;
  line-height: 1.95;
  color: var(--txt-3);
  margin: 0;
}

@media (max-width: 1024px) {
  .sixring-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .sixring-ring {
    max-width: 400px;
  }
}
@media (max-width: 620px) {
  .sixring-ring {
    max-width: 340px;
  }
  .sixring-node {
    width: 32%;
    padding: 6px;
  }
  .sixring-node b {
    font-size: 10.5px;
  }
  .sixring-node i {
    display: none;
  }
  .sixring-center b {
    font-size: 15px;
  }
  .sixring-center span {
    font-size: 9px;
    letter-spacing: .15em;
  }
  .sixring-detail-card {
    padding: 24px;
  }
}

/* ---------- 5. 技术驱动板块 ---------- */
.tech-section {
  padding: clamp(60px, 6vw, 100px) 0;
  position: relative;
  background:
    radial-gradient(900px 500px at 90% 10%, rgba(22, 119, 255, .12), transparent 60%),
    radial-gradient(800px 500px at 10% 90%, rgba(22, 119, 255, .08), transparent 60%),
    linear-gradient(180deg, #0a1a3a 0%, #0d2247 50%, #0a1a3a 100%);
  overflow: hidden;
}
.tech-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
}
.tech-section .wrap {
  position: relative;
  z-index: 2;
}

.tech-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(36px, 4vw, 56px);
}
.tech-eyebrow {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #6ba4ff;
  margin-bottom: 14px;
}
.tech-title {
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: #ffffff;
  margin-bottom: 16px;
}
.tech-desc {
  font-size: clamp(14.5px, 1.6vw, 17px);
  line-height: 1.95;
  color: rgba(255, 255, 255, .72);
}

.tech-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 1.8vw, 28px);
}

.tech-card {
  position: relative;
  padding: clamp(24px, 2.2vw, 36px);
  border-radius: var(--r-lg);
  background: linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02));
  border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all .45s var(--ease);
  overflow: hidden;
}
.tech-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(400px 200px at 0% 0%, rgba(22, 119, 255, .25), transparent 60%);
  opacity: 0;
  transition: opacity .45s;
  pointer-events: none;
}
.tech-card:hover {
  transform: translateY(-6px);
  border-color: rgba(107, 164, 255, .35);
  box-shadow: 0 16px 48px rgba(0, 0, 0, .3), 0 0 0 1px rgba(107, 164, 255, .15) inset;
}
.tech-card:hover::before {
  opacity: 1;
}
.tech-card > * {
  position: relative;
  z-index: 2;
}

.tech-card-num {
  display: block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .12em;
  color: #6ba4ff;
  margin-bottom: 18px;
}
.tech-card h3 {
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 12px;
  line-height: 1.4;
  letter-spacing: -.01em;
}
.tech-card p {
  font-size: 14.5px;
  line-height: 1.85;
  color: rgba(255, 255, 255, .68);
  margin: 0;
}

@media (max-width: 1024px) {
  .tech-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 620px) {
  .tech-grid {
    grid-template-columns: 1fr;
  }
  .tech-card {
    padding: 24px;
  }
}

/* ---------- 6. 企业影片 V2 ---------- */
.film-v2 {
  padding: clamp(60px, 6vw, 100px) 0;
  background: #ffffff;
}

.film-v2-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(36px, 4vw, 56px);
}
.film-v2-eyebrow {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--blue-500);
  margin-bottom: 14px;
}
.film-v2-title {
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--txt-1);
}

.film-v2-card {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(8, 30, 66, .15);
  aspect-ratio: 16 / 9;
  background: #070d1a;
}
.film-v2-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.film-v2-poster {
  position: absolute;
  inset: 0;
  z-index: 4;
  cursor: pointer;
}
.film-v2-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.film-v2-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 11, 24, .4) 0%, rgba(5, 11, 24, .1) 40%, rgba(5, 11, 24, .75) 100%);
}
.film-v2-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, .72);
  color: #fff;
  box-shadow: 0 14px 40px rgba(4, 10, 22, .4);
  transition: all .45s var(--ease);
}
.film-v2-poster:hover .film-v2-play {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--blue-500);
  border-color: transparent;
  box-shadow: 0 16px 44px rgba(22, 119, 255, .5);
}
.film-v2-play::after {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .46);
  animation: ring 2.8s var(--ease-soft) infinite;
}
.film-v2-play svg {
  width: 27px;
  height: 27px;
  margin-left: 3px;
}

.film-v2-text {
  position: absolute;
  left: clamp(24px, 2.5vw, 44px);
  bottom: clamp(24px, 2.5vw, 44px);
  z-index: 5;
}
.film-v2-text h3 {
  font-size: clamp(17px, 1.7vw, 23px);
  font-weight: 800;
  color: #fff;
  margin: 0 0 8px;
  letter-spacing: -.01em;
  text-shadow: 0 2px 18px rgba(4, 10, 22, .7);
}
.film-v2-text p {
  font-size: 14px;
  color: rgba(255, 255, 255, .82);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-shadow: 0 2px 12px rgba(4, 10, 22, .6);
}
.film-v2-text p::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
  animation: pulse 2.4s var(--ease-soft) infinite;
}

.film-v2-poster.hide {
  opacity: 0;
  visibility: hidden;
}

@media (max-width: 620px) {
  .film-v2-play {
    width: 62px;
    height: 62px;
  }
  .film-v2-play svg {
    width: 20px;
    height: 20px;
  }
  .film-v2-play::after {
    inset: -9px;
  }
  .film-v2-text h3 {
    font-size: 16px;
  }
  .film-v2-text p {
    font-size: 12.5px;
  }
}

/* ---------- 7. 新闻中心 V2 ---------- */
.news-v2 {
  padding: clamp(60px, 6vw, 100px) 0;
  background:
    linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
}

.news-v2-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(36px, 4vw, 56px);
}
.news-v2-eyebrow {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--blue-500);
  margin-bottom: 14px;
}
.news-v2-title {
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--txt-1);
  margin-bottom: 16px;
}
.news-v2-desc {
  font-size: clamp(14.5px, 1.6vw, 17px);
  line-height: 1.95;
  color: var(--txt-3);
}

.news-v2-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(20px, 2vw, 36px);
  margin-bottom: clamp(36px, 4vw, 56px);
}

.news-v2-hero {
  display: block;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--line);
  transition: all .45s var(--ease);
}
.news-v2-hero:hover {
  transform: translateY(-4px);
  border-color: rgba(22, 119, 255, .22);
  box-shadow: 0 18px 44px rgba(8, 30, 66, .1);
}
.news-v2-hero-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.news-v2-hero-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease);
}
.news-v2-hero:hover .news-v2-hero-thumb img {
  transform: scale(1.06);
}
.news-v2-date-chip {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  padding: 6px 14px;
  border-radius: 100px;
  background: rgba(22, 119, 255, .92);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.news-v2-hero-body {
  padding: 24px;
}
.news-v2-hero-body h3 {
  font-size: clamp(17px, 1.7vw, 22px);
  font-weight: 700;
  color: var(--txt-1);
  line-height: 1.5;
  margin-bottom: 10px;
  letter-spacing: -.01em;
  transition: color .3s;
}
.news-v2-hero:hover h3 {
  color: var(--blue-500);
}
.news-v2-hero-body p {
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--txt-3);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-v2-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.news-v2-item {
  display: flex;
  gap: 16px;
  padding: 14px;
  border-radius: var(--r-md);
  background: #ffffff;
  border: 1px solid var(--line);
  transition: all .4s var(--ease);
}
.news-v2-item:hover {
  border-color: rgba(22, 119, 255, .24);
  background: var(--ink-800);
  transform: translateX(6px);
}
.news-v2-item-thumb {
  flex: 0 0 100px;
  width: 100px;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--ink-600);
}
.news-v2-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.news-v2-item:hover .news-v2-item-thumb img {
  transform: scale(1.1);
}
.news-v2-item-txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.news-v2-item-txt h4 {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--txt-1);
  line-height: 1.55;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .3s;
}
.news-v2-item:hover h4 {
  color: var(--blue-500);
}
.news-v2-item-txt time {
  font-size: 12.5px;
  color: var(--txt-4);
  letter-spacing: .03em;
}

/* 底部数据统计条 */
.news-v2-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.news-stat-item {
  padding: clamp(20px, 2vw, 32px) 20px;
  text-align: center;
  border-radius: var(--r-lg);
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: 0 4px 16px rgba(8, 30, 66, .05);
  transition: all .4s var(--ease);
}
.news-stat-item:hover {
  transform: translateY(-4px);
  border-color: rgba(22, 119, 255, .2);
  box-shadow: 0 14px 36px rgba(8, 30, 66, .1);
}
.news-stat-item b {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  /* 重复样式保持与上方统计卡一致，确保不同模板段落视觉统一。 */
  font-size: clamp(30px, 2vw, 34px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--blue-500);
  white-space: nowrap;
}
.news-stat-item b em {
  font-style: normal;
  font-size: .5em;
  font-weight: 600;
}
/* 与上方基础规则保持一致，避免重复样式再次误伤数字节点。 */
.news-stat-item > span {
  display: block;
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--txt-3);
  line-height: 1.4;
}

@media (max-width: 1024px) {
  .news-v2-layout {
    grid-template-columns: 1fr;
  }
  /* 修复：覆盖可视化编辑器写入的内联快照尺寸，避免移动端横向溢出 */
  .news-v2-hero,
  .news-v2-hero-thumb,
  .news-v2-hero-thumb img,
  .news-v2-hero-body {
    width: auto !important;
    height: auto !important;
    transform: none !important;
  }
  .news-v2-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 620px) {
  .news-v2-item-thumb {
    flex: 0 0 80px;
    width: 80px;
    height: 60px;
  }
  .news-v2-item-txt h4 {
    font-size: 13.5px;
  }
  .news-v2-stats {
    gap: 12px;
  }
  .news-stat-item {
    padding: 18px 12px;
  }
  .news-stat-item b {
    font-size: clamp(26px, 7vw, 36px);
  }
  .news-stat-item > span {
    font-size: 12px;
  }
}
@media (max-width: 420px) {
  .news-v2-stats {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- 8. 加入我们 V2 ---------- */
.join-v2 {
  padding: clamp(50px, 5vw, 80px) 0 clamp(60px, 6vw, 100px);
}

.join-v2-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  padding: clamp(44px, 4.5vw, 76px) clamp(30px, 4vw, 72px);
  background:
    radial-gradient(800px 400px at 85% 10%, rgba(107, 164, 255, .2), transparent 60%),
    radial-gradient(600px 400px at 10% 90%, rgba(107, 164, 255, .12), transparent 60%),
    linear-gradient(150deg, #0a2550 0%, #0d2e63 50%, #0a2550 100%);
  text-align: center;
}
.join-v2-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 75%);
}
.join-v2-card > * {
  position: relative;
  z-index: 2;
}

.join-v2-eyebrow {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #8bb8ff;
  margin-bottom: 18px;
}
.join-v2-title {
  font-size: clamp(24px, 2.6vw, 40px);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -.025em;
  color: #ffffff;
  margin-bottom: 20px;
}
.join-v2-desc {
  max-width: 720px;
  margin: 0 auto 36px;
  font-size: clamp(14px, 1.55vw, 16.5px);
  line-height: 2;
  color: rgba(255, 255, 255, .78);
}

.join-v2-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-bottom: 36px;
}
.btn-join-dark {
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.btn-join-dark:hover {
  background: rgba(255, 255, 255, .2);
  border-color: rgba(255, 255, 255, .35);
  transform: translateY(-2px);
  color: #fff;
}

.join-v2-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.join-v2-tags span {
  font-size: 13px;
  padding: 8px 18px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .78);
  transition: all .35s;
}
.join-v2-tags span:hover {
  background: rgba(255, 255, 255, .15);
  border-color: rgba(255, 255, 255, .25);
  color: #fff;
}

@media (max-width: 620px) {
  .join-v2-card {
    padding: 40px 24px;
  }
  .join-v2-title {
    font-size: clamp(22px, 6vw, 32px);
  }
  .join-v2-btns .btn {
    flex: 1 1 auto;
    min-width: 140px;
  }
  .join-v2-tags {
    gap: 8px;
  }
  .join-v2-tags span {
    font-size: 12px;
    padding: 7px 14px;
  }
}

/* ==========================================================================
   53. 产业生态页 2.0 —— 参考图风格重制（仅作用于 business.html）
   --------------------------------------------------------------------------
   设计语言（对齐参考图）：
   · 浅蓝白通透底 + 大朵花瓣氛围装饰（模糊花瓣光影，右上 / 左下呼应）
   · 页头：大号黑标题 + 蓝色强调短语，右侧竖排英文点题
   · 品牌 tab：白色胶囊条 + 选中态蓝底胶囊
   · 品牌卡：左侧浅蓝渐变品牌面板（LOGO+大字+特性列表），右侧白底文案 + 蓝色 KPI 行
   · 全部文案、DOM 骨架、锚点与交互逻辑保持原样
   ========================================================================== */

/* ---------- 53.1 页头：浅蓝花瓣氛围 ---------- */
.biz-head {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #eaf3fe 0%, #f3f8ff 52%, #ffffff 100%);
  border-bottom: none;
}
/* 花瓣氛围：多组柔和径向光影模拟花瓣虚化 */
.biz-head::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(560px 400px at 88% 18%, rgba(142, 186, 248, .38), transparent 62%),
    radial-gradient(380px 300px at 74% 8%, rgba(186, 214, 250, .32), transparent 66%),
    radial-gradient(300px 260px at 96% 52%, rgba(163, 200, 248, .26), transparent 64%),
    radial-gradient(420px 340px at 2% 96%, rgba(170, 205, 248, .22), transparent 66%);
  filter: blur(6px);
}
/* 花瓣几何：右上两片椭圆花瓣剪影 */
.biz-head::after {
  content: '';
  position: absolute; z-index: 1;
  top: -70px; right: -40px;
  width: 420px; height: 420px;
  pointer-events: none;
  background:
    radial-gradient(58% 42% at 62% 38%, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(46% 34% at 34% 66%, rgba(214, 232, 253, .8) 0%, rgba(214, 232, 253, 0) 72%);
  transform: rotate(-16deg);
  filter: blur(2px);
}
.biz-head .wrap { position: relative; z-index: 3; }
.biz-head h1 {
  font-size: clamp(28px, 3.2vw, 50px);
  font-weight: 900; line-height: 1.16; letter-spacing: -.025em;
  color: #0c1a33;
  margin-bottom: 18px;
}
.biz-head h1 .grad { color: var(--blue-500); }
.biz-head .head-desc {
  max-width: 640px;
  font-size: clamp(14.5px, 1.55vw, 17px);
  line-height: 1.95;
  color: #5b6a85;
}
/* 右侧竖排点题（参考图右上角「让世界闻到中国的花香」） */
.biz-head-vert {
  position: absolute; z-index: 3;
  right: clamp(20px, 3vw, 56px); top: clamp(96px, 10vw, 150px);
  display: flex; flex-direction: column; align-items: flex-end; gap: 18px;
  pointer-events: none;
}
.biz-head-vert span {
  writing-mode: vertical-rl;
  font-size: 13px; letter-spacing: .42em;
  color: rgba(64, 96, 148, .55);
  font-weight: 500;
}
.biz-head-vert i {
  width: 1px; height: 56px;
  background: linear-gradient(180deg, rgba(19, 102, 236, .45), transparent);
}
@media (max-width: 900px) { .biz-head-vert { display: none; } }

/* ---------- 53.2 品牌 tab：白胶囊条 ---------- */
.biz-tabs {
  position: relative; z-index: 3;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 10px;
  border-radius: 100px;
  border: 1px solid rgba(19, 102, 236, .1);
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 34px rgba(31, 66, 135, .1);
  margin-bottom: clamp(16px, 1.6vw, 26px);
}
.biz-tabs a {
  padding: 11px 30px;
  border-radius: 100px;
  font-size: 15px; font-weight: 600;
  color: #41506b;
  transition: all .35s var(--ease);
}
/* hover 仅对真实指针设备生效，避免手机点按后残留灰底 */
@media (hover: hover) {
  .biz-tabs a:hover { color: var(--blue-500); background: rgba(19, 102, 236, .07); }
}
.biz-tabs a:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 2px; }
.biz-tabs a.on {
  color: #fff;
  background: linear-gradient(120deg, #1268f5, #2f83ff);
  box-shadow: 0 8px 22px rgba(18, 104, 245, .32);
}
/* 右侧标语（参考图「四大品牌 · 共建产业新生态」） */
.biz-tabs-slogan {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 10px;
  padding-right: 18px;
  font-size: 13px; letter-spacing: .18em;
  color: #8a97ad;
  white-space: nowrap;
}
.biz-tabs-slogan::before {
  content: ''; width: 42px; height: 1px;
  background: linear-gradient(90deg, transparent, #b9c8e2);
}
@media (max-width: 760px) {
  .biz-tabs {
    position: sticky; top: var(--nav-h-scrolled); z-index: 60;
    border-radius: 100px;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* 防止 iOS Safari 因 sticky 定位导致 backdrop-filter 失效后露出背景 */
    background: rgba(255, 255, 255, .94);
  }
  .biz-tabs::-webkit-scrollbar { display: none; }
  .biz-tabs a { flex: 0 0 auto; padding: 9px 18px; font-size: 14px; }
  .biz-tabs-slogan { display: none; }
}
@media (max-width: 360px) {
  .biz-tabs a { padding: 8px 14px; font-size: 13.5px; }
}

/* ---------- 53.3 品牌卡：左品牌面板 + 右文案 ---------- */
.page-biz .biz-block {
  border: 1px solid rgba(19, 102, 236, .1);
  border-radius: 26px;
  background: #ffffff;
  box-shadow: 0 14px 44px rgba(31, 66, 135, .08);
}
.page-biz .biz-block:hover {
  border-color: rgba(19, 102, 236, .22);
  box-shadow: 0 22px 60px rgba(31, 66, 135, .13);
}
.page-biz .biz-block::before { display: none; }

/* 左侧：浅蓝渐变品牌面板（花瓣光影 + LOGO + 大字 + 特性列表） */
.page-biz .biz-mark {
  min-height: clamp(380px, 34vw, 520px);
  padding: clamp(28px, 2.6vw, 46px);
  border-radius: 0;
  border: none;
  background:
    radial-gradient(70% 52% at 76% 66%, rgba(255, 255, 255, .5), transparent 70%),
    radial-gradient(52% 40% at 24% 22%, rgba(255, 255, 255, .34), transparent 70%),
    linear-gradient(168deg, #d8e8fc 0%, #e6f1fe 46%, #f2f8ff 100%);
  overflow: hidden;
  justify-content: flex-start;
}
/* 花瓣光影装饰层（覆盖网格纹理） */
.page-biz .biz-mark::after {
  background-image:
    radial-gradient(46% 34% at 78% 74%, rgba(147, 189, 246, .5) 0%, rgba(147, 189, 246, 0) 70%),
    radial-gradient(36% 26% at 88% 52%, rgba(190, 218, 250, .55) 0%, rgba(190, 218, 250, 0) 72%),
    radial-gradient(30% 22% at 62% 88%, rgba(205, 228, 252, .6) 0%, rgba(205, 228, 252, 0) 74%);
  background-size: 100% 100%;
  background-position: 0 0;
  filter: blur(3px);
  z-index: 1;
}
/* 品牌大字与标签在浅底上重调 */
.page-biz .biz-mark b {
  color: #0d2a5e;
  font-size: clamp(34px, 3.4vw, 54px);
  letter-spacing: .14em;
}
.page-biz .biz-mark span { color: #6b7f9f; }
.page-biz .biz-mark i {
  background: rgba(255, 255, 255, .66);
  border: 1px solid rgba(19, 102, 236, .18);
  color: var(--blue-600);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
/* 品牌英文竖排水印（面板左下，参考图 HUAWA · SINCE 2014） */
.page-biz .biz-mark .biz-mark-foot {
  position: relative; z-index: 2;
  margin-top: auto; padding-top: 26px;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .34em; text-transform: uppercase;
  color: rgba(84, 112, 156, .78);
  line-height: 2;
}

/* 右侧文案区 */
.page-biz .biz-body h2 {
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 800; letter-spacing: -.015em;
  color: #0c1a33;
  margin-bottom: 20px;
}
.page-biz .biz-body p { color: #4d5d78; }
.page-biz .biz-body .hl { color: var(--blue-600); font-weight: 600; }

/* KPI 行：蓝色大数字（参考图底部 50万+ / 1000万笔+ / 80%） */
.page-biz .biz-kpis {
  gap: 20px clamp(18px, 2vw, 36px);
  padding-top: 24px;
  border-top: 1px solid #e7eef9;
}
.page-biz .biz-kpi b { color: var(--blue-500); }
.page-biz .biz-kpi span { color: #7c8aa3; }

/* 品牌面板内 LOGO 在浅底上的适配（覆盖原深底反白逻辑） */
.page-biz .biz-logo--huadi { filter: none; opacity: 1; }
.page-biz .biz-logo--gdb { box-shadow: 0 10px 26px rgba(31, 66, 135, .22); }

@media (max-width: 900px) {
  .page-biz .biz-mark { min-height: 320px; }
}

/* ---------- 53.4 六环生态圈：浅蓝花瓣氛围重绘 ---------- */
.biz-eco-bg {
  position: relative;
  background:
    radial-gradient(640px 420px at 90% 12%, rgba(150, 192, 246, .22), transparent 64%),
    radial-gradient(520px 380px at 4% 88%, rgba(170, 205, 248, .18), transparent 66%),
    linear-gradient(180deg, #f2f8ff 0%, #f7fbff 50%, #ffffff 100%);
}
.biz-eco-bg::after { display: none; }
.biz-eco-bg .eyebrow {
  background: rgba(255, 255, 255, .72);
  border-color: rgba(19, 102, 236, .16);
}

/* 环形：柔蓝虚线轨道 + 花瓣呼吸 */
.biz-eco-bg .eco-ring::before { border-color: rgba(19, 102, 236, .22); }
.biz-eco-bg .eco-ring::after {
  background:
    radial-gradient(circle at 50% 50%, rgba(19, 102, 236, .1), transparent 68%),
    conic-gradient(from 20deg, rgba(163, 200, 248, .16), transparent 25%, rgba(163, 200, 248, .16) 50%, transparent 75%, rgba(163, 200, 248, .16));
  filter: blur(2px);
}
.biz-eco-bg .eco-node {
  border: 1px solid rgba(19, 102, 236, .12);
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 6px 22px rgba(31, 66, 135, .1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.biz-eco-bg .eco-node:hover, .biz-eco-bg .eco-node.on {
  background: linear-gradient(135deg, #1268f5, #2f83ff);
  border-color: transparent;
  box-shadow: 0 14px 34px rgba(18, 104, 245, .32);
}
.biz-eco-bg .eco-center b { color: #0c1a33; }
.biz-eco-bg .eco-center span { color: #7d8dab; }

/* 右侧信息面板：白色玻璃卡 */
.biz-eco-bg .eco-info {
  border: 1px solid rgba(19, 102, 236, .1);
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 14px 44px rgba(31, 66, 135, .09);
}
/* 面板为 flex 列后，防止「04 / 06」指示胶囊被 stretch 成通栏条 */
.biz-eco-bg .eco-info-idx { align-self: flex-start; }
.biz-eco-bg .eco-info h3 { color: #0c1a33; }
.biz-eco-bg .eco-info p { color: #4d5d78; }

/* ---------- 53.5 合作伙伴卡：浅蓝描边白卡 ---------- */
.biz-partner-bg {
  background: linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
}
.biz-partner-bg .card {
  border-color: rgba(19, 102, 236, .1);
  box-shadow: 0 6px 24px rgba(31, 66, 135, .05);
}
.biz-partner-bg .card h3 { color: #0c1a33; }
.biz-partner-bg .card p { color: #4d5d78; }

/* ==========================================================================
   54. 新闻中心页 2.0 —— 参考图风格重制（仅作用于 news.html）
   --------------------------------------------------------------------------
   · 页头：浅蓝通透底 + 云层光影 + 3D NEWS 报刊插画 + 底部城市剪影 + 竖排标语
   · 工具条：白色胶囊容器，分类 tab 带图标与计数徽章，右侧胶囊搜索框
   · 卡片：白卡内嵌圆角缩略图 + 蓝色分类胶囊 + 蓝色圆形箭头「阅读全文」
   · 分页：圆角胶囊，选中态蓝色渐变
   · 全部文案与交互（分类切换 / 搜索 / 分页 / 计数统计）保持原样
   ========================================================================== */

/* ---------- 54.1 页头：浅蓝云层 + 插画 + 城市剪影 ---------- */
.news-head {
  border-bottom: none;
  background: linear-gradient(180deg, #e7f1fe 0%, #f0f6ff 48%, #ffffff 100%);
}
.news-head::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(640px 380px at 60% 6%, rgba(255, 255, 255, .9), transparent 60%),
    radial-gradient(560px 340px at 28% 0%, rgba(173, 207, 250, .38), transparent 62%),
    radial-gradient(460px 320px at 97% 26%, rgba(150, 192, 246, .3), transparent 62%),
    radial-gradient(520px 360px at 4% 94%, rgba(170, 205, 248, .24), transparent 64%);
  filter: blur(8px);
}
.news-head .wrap { position: relative; z-index: 3; }
.news-head h1 {
  font-size: clamp(30px, 3.4vw, 54px);
  letter-spacing: -.02em; color: #0c1a33;
}
.news-head .wrap > p { color: #5b6a85; }
.news-head .wrap > p b { color: var(--blue-600) !important; }

/* 标题下的 NEWS CENTER 点题 */
.news-head-word {
  display: inline-flex; align-items: center; gap: 14px;
  margin-top: clamp(22px, 2.2vw, 34px);
  font-size: 12.5px; font-weight: 600; letter-spacing: .42em;
  color: rgba(84, 112, 156, .78);
}
.news-head-word i {
  width: 46px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--blue-500), rgba(19, 102, 236, .12));
}

/* 3D NEWS 报刊插画 */
.news-head-art {
  position: absolute; z-index: 2;
  right: clamp(84px, 8.5vw, 148px); top: clamp(56px, 5.6vw, 92px);
  width: clamp(330px, 32vw, 490px);
  pointer-events: none;
  filter: drop-shadow(0 20px 32px rgba(31, 66, 135, .14));
}
.news-head-art svg { display: block; width: 100%; height: auto; }

/* 底部城市剪影 */
.news-head-city {
  position: absolute; z-index: 1; right: 0; bottom: -2px;
  width: min(780px, 60vw);
  pointer-events: none; opacity: .95;
}
.news-head-city svg { display: block; width: 100%; height: auto; }

/* 右侧竖排标语 */
.news-head-vert {
  position: absolute; z-index: 3;
  right: clamp(20px, 2.6vw, 46px); top: clamp(96px, 9vw, 142px);
  display: flex; flex-direction: row; align-items: flex-start; gap: 16px;
  pointer-events: none;
}
.news-head-vert span { writing-mode: vertical-rl; }
.news-head-vert .main { font-size: 15px; font-weight: 700; letter-spacing: .32em; color: #23477f; }
.news-head-vert .sub {
  font-size: 12px; letter-spacing: .28em; line-height: 2;
  height: 208px; color: rgba(84, 112, 156, .68);
}
.news-head-vert i {
  width: 1px; height: 64px;
  background: linear-gradient(180deg, rgba(19, 102, 236, .45), transparent);
}
@media (max-width: 1180px) {
  .news-head-art { opacity: .45; right: 24px; }
  .news-head-vert { display: none; }
}
@media (max-width: 880px) {
  .news-head-art, .news-head-city { display: none; }
}

/* ---------- 54.2 工具条：白色胶囊容器 + 图标 tab + 胶囊搜索 ---------- */
.page-news .news-tools {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between;
  padding: 9px 10px 9px 12px;
  border-radius: 100px;
  border: 1px solid rgba(19, 102, 236, .12);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 12px 34px rgba(31, 66, 135, .1);
  margin-bottom: clamp(18px, 1.8vw, 28px);
}
.page-news .news-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.page-news .news-tab {
  display: inline-flex; align-items: center;
  padding: 10px 20px; font-size: 14.5px; font-weight: 600;
  color: #41506b; background: transparent; border-color: transparent;
}
.page-news .news-tab::before {
  content: ''; width: 15px; height: 15px; flex: none; margin-right: 8px;
  background-color: currentColor;
  -webkit-mask-image: var(--ico); -webkit-mask-position: center;
  -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat;
  mask-image: var(--ico); mask-position: center;
  mask-size: contain; mask-repeat: no-repeat;
}
.page-news .news-tab[data-cat="all"] {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='8' height='8' rx='2'/%3E%3Crect x='13' y='3' width='8' height='8' rx='2'/%3E%3Crect x='3' y='13' width='8' height='8' rx='2'/%3E%3Crect x='13' y='13' width='8' height='8' rx='2'/%3E%3C/svg%3E");
}
.page-news .news-tab[data-cat="12"] {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M5 21V6l7-3v18'/%3E%3Cpath d='M12 21V10l7 3v8'/%3E%3Cpath d='M8 9h1M8 13h1M8 17h1'/%3E%3C/svg%3E");
}
.page-news .news-tab[data-cat="8"] {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3 20c.9-3.4 3.3-5.2 6-5.2s5.1 1.8 6 5.2'/%3E%3Ccircle cx='16.5' cy='9' r='2.4'/%3E%3Cpath d='M15.6 15.4c2.5.4 4.6 2 5.4 4.6'/%3E%3C/svg%3E");
}
.page-news .news-tab[data-cat="33"] {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5l7.5 3v5.7c0 4.8-3.2 8.2-7.5 10.3-4.3-2.1-7.5-5.5-7.5-10.3V5.5z'/%3E%3Cpath d='M8.8 11.6l2.3 2.3 4.2-4.2'/%3E%3C/svg%3E");
}
.page-news .news-tab:hover { color: var(--blue-500); background: rgba(19, 102, 236, .07); border-color: transparent; }
.page-news .news-tab.on {
  color: #fff; background: linear-gradient(120deg, #1268f5, #2f83ff);
  box-shadow: 0 8px 20px rgba(18, 104, 245, .3);
}
.page-news .news-tab em {
  margin-left: 8px; padding: 1px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; opacity: 1;
  background: rgba(19, 102, 236, .09); color: #6b7f9f;
}
.page-news .news-tab.on em { background: rgba(255, 255, 255, .24); color: #fff; }

.page-news .news-search { min-width: 230px; flex: 0 1 272px; }
.page-news .news-search input {
  padding: 10px 38px;
  background: #ffffff; border: 1px solid #e3ecf9;
}
.page-news .news-search input:focus { border-color: var(--blue-500); }
.page-news .news-search::before {
  content: ''; position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; background-color: #9aa9c2;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 8h9M19 8h1M4 16h3M13 16h7'/%3E%3Ccircle cx='16' cy='8' r='2.2'/%3E%3Ccircle cx='10' cy='16' r='2.2'/%3E%3C/svg%3E");
  -webkit-mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 8h9M19 8h1M4 16h3M13 16h7'/%3E%3Ccircle cx='16' cy='8' r='2.2'/%3E%3Ccircle cx='10' cy='16' r='2.2'/%3E%3C/svg%3E");
  mask-position: center; mask-size: contain; mask-repeat: no-repeat;
  pointer-events: none;
}
.page-news .news-search svg { color: #6b7f9f; }

/* ---------- 54.3 列表区与新闻卡片 ---------- */
.news-list-bg {
  background:
    radial-gradient(700px 420px at 94% 4%, rgba(150, 192, 246, .16), transparent 62%),
    radial-gradient(560px 380px at 2% 60%, rgba(170, 205, 248, .12), transparent 64%),
    linear-gradient(180deg, #f2f8ff 0%, #fafcff 44%, #ffffff 100%);
}
.page-news .news-grid {
  gap: clamp(18px, 1.7vw, 26px);
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}
@media (max-width: 760px) { .page-news .news-grid { grid-template-columns: 1fr; } }
.page-news .news-card {
  border-radius: 16px;
  border-color: rgba(19, 102, 236, .1);
  background: #ffffff;
  box-shadow: 0 6px 22px rgba(31, 66, 135, .06);
}
.page-news .news-card:hover {
  border-color: rgba(19, 102, 236, .22);
  box-shadow: 0 20px 48px rgba(31, 66, 135, .13);
}
.page-news .news-card .thumb {
  margin: 10px 10px 0;
  border-radius: 11px;
  background: linear-gradient(135deg, #e8f1fd, #dbe9fc);
}
/* 新闻中心缩略图沿用环境图的悬停放大效果，放大只发生在裁剪容器内，不改变卡片布局。 */
.page-news .news-card .thumb { overflow: hidden; }
.page-news .news-card .thumb img {
  cursor: zoom-in;
  transition: transform .9s var(--ease);
  transform-origin: center center;
}
@media (hover: hover) {
  .page-news .news-card:hover .thumb img { transform: scale(1.1); }
}
.page-news .news-card .thumb.noimg::after { color: rgba(19, 102, 236, .2); }
.page-news .news-card .body { padding: 20px 22px 22px; gap: 10px; }
.page-news .news-card .meta { color: #8a97ad; }
.page-news .news-card .meta .tag {
  background: #eaf2fe; border-color: transparent; color: var(--blue-600);
}
.page-news .news-card h3 { color: #101d36; }
.page-news .news-card p { color: #66748d; }
.page-news .news-card .more { color: var(--blue-600); gap: 9px; margin-top: 6px; }
.page-news .news-card .more svg {
  width: 22px; height: 22px; padding: 4.5px; box-sizing: border-box;
  border-radius: 50%;
  background: linear-gradient(135deg, #1268f5, #2f83ff);
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(18, 104, 245, .28);
}
.page-news .news-empty {
  background: #ffffff; border: 1px dashed rgba(19, 102, 236, .22);
  border-radius: 18px;
}

/* ---------- 54.4 分页 ---------- */
.page-news .pager { margin-top: clamp(22px, 2.2vw, 34px); gap: 9px; }
.page-news .pager button, .page-news .pager span {
  min-width: 42px; height: 42px; padding: 0 16px;
  border-radius: 999px; border-color: #e3ecf9;
  background: #ffffff; color: #41506b;
  box-shadow: 0 3px 10px rgba(31, 66, 135, .05);
}
.page-news .pager button:hover:not(:disabled) { color: var(--blue-500); border-color: rgba(19, 102, 236, .35); }
.page-news .pager button.on {
  color: #fff; border-color: transparent;
  background: linear-gradient(120deg, #1268f5, #2f83ff);
  box-shadow: 0 8px 20px rgba(18, 104, 245, .3);
}

@media (max-width: 760px) {
  .page-news .news-tools { border-radius: 24px; padding: 10px; justify-content: center; }
  .page-news .news-tabs { justify-content: center; }
  .page-news .news-tab { padding: 9px 15px; font-size: 13.5px; }
  .page-news .news-search { flex: 1 1 100%; min-width: 0; }
}

/* ==========================================================================
   55. 招聘职位页 2.0 —— 参考图风格重制（仅作用于 jobs.html）
   --------------------------------------------------------------------------
   · 页头：浅蓝通透底 + 右侧山景登山者插画 + 大标题蓝色强调
   · 数据卡：白卡 + 蓝色渐变圆角图标 + 大数字
   · 职位卡：部门蓝胶囊 + 蓝色渐变圆角部门图标 + 需求标签 + 蓝色「投递简历」
   · 福利 / 晋升 / CTA 配套浅色化，CTA 带 JOIN US 水印
   · 全部文案与交互保持原样
   ========================================================================== */

/* ---------- 55.1 页头：浅蓝底 + 山景插画 ---------- */
.jobs-head {
  border-bottom: none;
  background: linear-gradient(180deg, #e8f2fe 0%, #f2f8ff 46%, #ffffff 100%);
}
.jobs-head::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(620px 360px at 58% 4%, rgba(255, 255, 255, .9), transparent 60%),
    radial-gradient(520px 320px at 30% 0%, rgba(173, 207, 250, .35), transparent 62%),
    radial-gradient(440px 300px at 98% 30%, rgba(150, 192, 246, .28), transparent 62%),
    radial-gradient(480px 320px at 2% 96%, rgba(170, 205, 248, .22), transparent 64%);
  filter: blur(8px);
}
.jobs-head .wrap { position: relative; z-index: 3; }
.jobs-head h1 {
  font-size: clamp(30px, 3.4vw, 56px);
  font-weight: 900; letter-spacing: -.02em; line-height: 1.18;
  color: #0c1a33;
}
.jobs-head h1 .grad { color: var(--blue-500); }
.jobs-head .wrap > p {
  max-width: 600px;
  font-size: clamp(14.5px, 1.55vw, 17px);
  line-height: 2.05; color: #5b6a85;
}
/* 右侧山景：写实雪山 + 登山者摄影图，左缘 / 顶部渐隐融入浅蓝底 */
.jobs-mountain {
  position: absolute; z-index: 2;
  top: 0; right: 0;
  width: min(860px, 54vw); height: 100%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%, #000 100%),
                      linear-gradient(180deg, transparent 0%, #000 20%, #000 72%, rgba(0, 0, 0, .45) 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 38%, #000 100%),
              linear-gradient(180deg, transparent 0%, #000 20%, #000 72%, rgba(0, 0, 0, .45) 100%);
  mask-composite: intersect;
}
.jobs-mountain img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.jm-slogan {
  position: absolute; left: 41%; top: 21%;
  display: flex; flex-direction: column; gap: 7px;
  transform: rotate(-7deg);
  font-family: 'Segoe Script', 'STKaiti', 'KaiTi', cursive;
  font-size: clamp(17px, 1.5vw, 25px);
  line-height: 1.55; letter-spacing: .05em;
  color: #3f6fb5;
  text-shadow: 0 1px 10px rgba(255, 255, 255, .85), 0 0 22px rgba(255, 255, 255, .65);
}
.jm-slogan i { font-style: normal; }
@media (max-width: 980px) { .jobs-mountain { display: none; } }

/* ---------- 55.2 数据卡：图标 + 大数字 ---------- */
.page-jobs .fact {
  display: flex; align-items: center; gap: 16px;
  padding: clamp(18px, 1.8vw, 26px) clamp(18px, 1.8vw, 26px);
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(19, 102, 236, .1);
  box-shadow: 0 8px 26px rgba(31, 66, 135, .07);
}
.page-jobs .fact-ico {
  flex: none;
  width: clamp(44px, 3.8vw, 54px); height: clamp(44px, 3.8vw, 54px);
  border-radius: 14px;
  background: linear-gradient(135deg, #1268f5, #3f8bff);
  box-shadow: 0 8px 18px rgba(18, 104, 245, .26);
  position: relative;
}
.page-jobs .fact-ico::after {
  content: ''; position: absolute; inset: 13%;
  background: #ffffff;
  -webkit-mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat;
  mask-position: center; mask-size: contain; mask-repeat: no-repeat;
}
.page-jobs .fact-ico[data-i="1"]::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E");
}
.page-jobs .fact-ico[data-i="2"]::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}
.page-jobs .fact-ico[data-i="3"]::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}
.page-jobs .fact-ico[data-i="4"]::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpath d='M3.3 7l8.7 5 8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpath d='M3.3 7l8.7 5 8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E");
}
.page-jobs .fact b {
  font-size: clamp(24px, 2.3vw, 34px);
  font-weight: 900; color: var(--blue-500);
  line-height: 1;
}
.page-jobs .fact b span { font-size: .52em; font-weight: 700; }
.page-jobs .fact > span {
  display: block; margin-top: 7px;
  font-size: 13px; color: #7c8aa3;
}

/* ---------- 55.3 板块标题 ---------- */
.page-jobs .sec-head .eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--blue-500);
  background: none; border: none; padding: 0;
}
.page-jobs .sec-head .eyebrow::before {
  content: ''; width: 30px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--blue-500), rgba(19, 102, 236, .15));
}
.page-jobs .sec-title {
  font-size: clamp(24px, 2.6vw, 38px);
  font-weight: 900; letter-spacing: -.015em;
  color: #0c1a33;
}
.page-jobs .sec-desc {
  position: relative; padding-left: 26px;
  font-size: 14.5px; line-height: 1.9; color: #5b6a85;
}
.page-jobs .sec-desc::before {
  content: ''; position: absolute; left: 0; top: 6px;
  width: 16px; height: 16px;
  background-color: var(--blue-500);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  -webkit-mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  mask-position: center; mask-size: contain; mask-repeat: no-repeat;
}
.page-jobs .sec-desc a { color: var(--blue-600) !important; font-weight: 700; }
.page-jobs .sec-desc a:hover { text-decoration: underline; }

/* ---------- 55.4 职位卡 ---------- */
.page-jobs .job-grid {
  gap: clamp(16px, 1.5vw, 24px);
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}
@media (max-width: 760px) { .page-jobs .job-grid { grid-template-columns: 1fr; } }
/* 数据库岗位尚未返回或没有已发布岗位时，维持参考站的留白和提示层级。 */
.page-jobs .jobs-empty {
  grid-column: 1 / -1;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border: 1px dashed rgba(19, 102, 236, .2);
  border-radius: 18px;
  color: var(--txt-3);
  background: rgba(255, 255, 255, .72);
  text-align: center;
}
.page-jobs .job-card {
  gap: 13px; padding: clamp(22px, 2vw, 28px);
  border-radius: 18px;
  border-color: rgba(19, 102, 236, .1);
  box-shadow: 0 6px 24px rgba(31, 66, 135, .06);
}
.page-jobs .job-card:hover {
  transform: translateY(-5px);
  border-color: rgba(19, 102, 236, .24);
  box-shadow: 0 20px 48px rgba(31, 66, 135, .13);
}
.page-jobs .job-card .top {
  position: relative;
  justify-content: flex-start; align-items: center;
  min-height: 40px;
}
/* 部门图标：蓝色渐变圆角方块 */
.page-jobs .job-card .top::before {
  content: ''; flex: none;
  width: 40px; height: 40px; margin-right: 12px;
  border-radius: 11px;
  background: linear-gradient(135deg, #1268f5, #3f8bff);
  box-shadow: 0 6px 14px rgba(18, 104, 245, .24);
}
/* 白色图标定位在方块中心 */
.page-jobs .job-card .top .ico {
  position: absolute; left: 11px; top: 11px;
  width: 18px; height: 18px;
  background: #ffffff;
  -webkit-mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat;
  mask-position: center; mask-size: contain; mask-repeat: no-repeat;
}
.page-jobs .job-card h3 {
  font-size: clamp(16.5px, 1.35vw, 19px);
  font-weight: 800; color: #101d36; letter-spacing: -.01em;
}
.page-jobs .job-card .dept {
  margin-left: auto; flex: none;
  padding: 5px 13px; border-radius: 999px;
  background: #eaf2fe; color: var(--blue-600);
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
}
.page-jobs .job-card .tags { padding-top: 2px; }
.page-jobs .job-card .tags i {
  font-size: 12px; padding: 5px 12px; border-radius: 999px;
  color: #55647e; background: #f3f7fd; border: 1px solid transparent;
}
.page-jobs .job-card .desc {
  font-size: 13.5px; line-height: 1.82; color: #66748d;
  padding-top: 12px; border-top: 1px dashed #e8effb;
}
.page-jobs .job-card .desc li::before {
  width: 5px; height: 5px; top: .66em;
  background: var(--blue-500);
}
.page-jobs .job-card .go {
  margin-top: auto; width: 100%;
  padding-top: 14px; border-top: 1px solid #eef3fb;
  font-size: 13.5px; font-weight: 700; color: var(--blue-600);
}
/* 动态岗位链接复用参考站投递入口的视觉规则，并限制箭头装饰动画范围。 */
.page-jobs .job-card .job-apply {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  margin-top: auto;
  width: 100%;
  padding-top: 14px;
  border-top: 1px solid #eef3fb;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--blue-600);
}
.page-jobs .job-card .job-apply span { transition: transform .35s var(--ease); }
.page-jobs .job-card:hover .job-apply span { transform: translateX(4px); }
/* 部门 → 图标（白色 mask） */
.page-jobs .job-card.jc-prod .ico {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpath d='M3.3 7l8.7 5 8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpath d='M3.3 7l8.7 5 8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E");
}
.page-jobs .job-card.jc-ops .ico {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}
.page-jobs .job-card.jc-media .ico {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l18-7-7 18-2.5-7.5z'/%3E%3Cpath d='M11.5 14.5L21 4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l18-7-7 18-2.5-7.5z'/%3E%3Cpath d='M11.5 14.5L21 4'/%3E%3C/svg%3E");
}
.page-jobs .job-card.jc-fran .ico {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z'/%3E%3Cpath d='M12 15l-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z'/%3E%3Cpath d='M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0'/%3E%3Cpath d='M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z'/%3E%3Cpath d='M12 15l-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z'/%3E%3Cpath d='M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0'/%3E%3Cpath d='M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5'/%3E%3C/svg%3E");
}
.page-jobs .job-card.jc-cs .ico {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18v-6a9 9 0 0 1 18 0v6'/%3E%3Cpath d='M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18v-6a9 9 0 0 1 18 0v6'/%3E%3Cpath d='M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z'/%3E%3C/svg%3E");
}
.page-jobs .job-card.jc-dev .ico {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 18l6-6-6-6'/%3E%3Cpath d='M8 6l-6 6 6 6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 18l6-6-6-6'/%3E%3Cpath d='M8 6l-6 6 6 6'/%3E%3C/svg%3E");
}
.page-jobs .job-card.jc-o2o .ico {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
}
.page-jobs .job-card.jc-hr .ico {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='8.5' cy='7' r='4'/%3E%3Cpath d='M17 11l2 2 4-4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='8.5' cy='7' r='4'/%3E%3Cpath d='M17 11l2 2 4-4'/%3E%3C/svg%3E");
}

/* ---------- 55.5 福利 / 晋升 / CTA ---------- */
.page-jobs .benefit {
  background: #ffffff;
  border: 1px solid rgba(19, 102, 236, .1);
  border-radius: 14px;
  padding: clamp(18px, 1.7vw, 24px);
  box-shadow: 0 5px 18px rgba(31, 66, 135, .05);
}
.page-jobs .benefit b {
  display: flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 800; color: #101d36;
}
.page-jobs .benefit b::before {
  content: ''; flex: none; width: 20px; height: 20px;
  border-radius: 6px;
  background: linear-gradient(135deg, #1268f5, #3f8bff);
  position: relative;
}
.page-jobs .benefit b::after {
  content: ''; position: absolute;
  width: 10px; height: 10px; margin-left: -15px; margin-top: 0;
  transform: translateY(5px);
  background: #ffffff;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  -webkit-mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  mask-position: center; mask-size: contain; mask-repeat: no-repeat;
}
.page-jobs .benefit span { font-size: 13.2px; line-height: 1.75; color: #7c8aa3; }

.page-jobs .ladder { gap: 12px; }
.page-jobs .ladder i {
  padding: 10px 20px; border-radius: 999px;
  background: #ffffff;
  border: 1px solid #e3ecf9;
  color: #41506b; font-weight: 600;
  box-shadow: 0 3px 10px rgba(31, 66, 135, .05);
}
.page-jobs .ladder i.peak {
  color: #fff; border-color: transparent;
  background: linear-gradient(120deg, #1268f5, #2f83ff);
  box-shadow: 0 8px 20px rgba(18, 104, 245, .3);
}
.page-jobs .ladder span { color: #b6c3da; font-size: 14px; font-weight: 600; }

.page-jobs .cta-band {
  position: relative; overflow: hidden;
  background:
    radial-gradient(560px 300px at 90% 10%, rgba(150, 192, 246, .2), transparent 62%),
    linear-gradient(120deg, #f2f8ff, #e9f3fe);
  border: 1px solid rgba(19, 102, 236, .12);
  border-radius: 22px;
}
.page-jobs .cta-band::after {
  content: 'JOIN US';
  position: absolute; right: 26px; bottom: -14px;
  font-size: clamp(64px, 8vw, 118px);
  font-weight: 900; font-style: italic;
  letter-spacing: .02em; line-height: 1;
  color: rgba(19, 102, 236, .06);
  pointer-events: none; white-space: nowrap;
}
.page-jobs .cta-band > div { position: relative; z-index: 1; }
.page-jobs .cta-band h2 {
  font-size: clamp(20px, 2.1vw, 30px);
  font-weight: 900; color: #0c1a33; letter-spacing: -.01em;
}
.page-jobs .cta-band p { color: #5b6a85; }

/* ==========================================================================
   56. 发展历程页 2.0 —— 参考图风格重制（仅作用于 history.html）
   --------------------------------------------------------------------------
   · 页头：浅蓝通透底 + 右侧雪山云海插画 + FLOWERS 英文点题 + 手写体标语
   · 里程碑速览：白卡 + 蓝色年份 + 右上角浅色序号
   · 阶段时间轴：横向轴线 + 均布年份节点 + 「现在」放大光环
   · 节点卡：3 列网格 + 顶部渐变线 + 年份蓝字 + 版本胶囊 + 右上角浅色序号
   · CTA 浅色化 + SINCE 2006 水印，全部文案与筛选交互保持原样
   ========================================================================== */

/* ---------- 56.1 页头：浅蓝底 + 雪山云海插画 ---------- */
.his-head {
  border-bottom: none;
  background: linear-gradient(180deg, #e7f1fe 0%, #f0f6ff 46%, #ffffff 100%);
}
.his-head::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(640px 380px at 58% 4%, rgba(255, 255, 255, .9), transparent 60%),
    radial-gradient(540px 320px at 30% 0%, rgba(173, 207, 250, .36), transparent 62%),
    radial-gradient(460px 300px at 98% 28%, rgba(150, 192, 246, .3), transparent 62%),
    radial-gradient(500px 340px at 2% 96%, rgba(170, 205, 248, .22), transparent 64%);
  filter: blur(8px);
}
.his-head .wrap { position: relative; z-index: 3; }
.his-head h1 {
  font-size: clamp(30px, 3.4vw, 56px);
  font-weight: 900; letter-spacing: -.02em; line-height: 1.18;
  color: #0c1a33;
}
.his-head h1 .grad { color: var(--blue-500); }
.his-head .wrap > p {
  max-width: 640px;
  font-size: clamp(14.5px, 1.55vw, 17px);
  line-height: 2.05; color: #5b6a85;
}
/* 右上英文点题 */
.his-head .his-en {
  position: absolute; z-index: 3;
  right: clamp(24px, 3vw, 54px); top: calc(var(--nav-h) + clamp(52px, 5.62vw, 110px));
  font-size: 12.5px; font-weight: 700; letter-spacing: .34em; line-height: 2;
  color: rgba(96, 134, 194, .55); text-align: right;
  pointer-events: none;
}
/* 雪山云海插画 */
.his-head .his-mountain {
  position: absolute; z-index: 2;
  right: 0; bottom: -2px;
  width: min(660px, 47vw);
  pointer-events: none;
  filter: drop-shadow(0 18px 30px rgba(31, 66, 135, .1));
}
.his-head .his-mountain svg { display: block; width: 100%; height: auto; }
.his-head .his-mountain .his-script {
  position: absolute; right: 24%; top: 0;
  font-family: "KaiTi", "STKaiti", "Kaiti SC", "DFKai-SB", serif;
  font-size: clamp(17px, 1.7vw, 25px); font-weight: 700;
  color: #3d6bb3; letter-spacing: .14em;
  transform: rotate(-4deg);
  white-space: nowrap;
}
@media (max-width: 1180px) {
  .his-head .his-mountain { opacity: .45; }
  .his-head .his-en { display: none; }
}
@media (max-width: 980px) {
  .his-head .his-mountain { display: none; }
}

/* ---------- 56.2 里程碑速览：白卡 + 序号 ---------- */
.page-history .milestones {
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(10px, 1vw, 14px);
  margin-bottom: clamp(30px, 2.8vw, 46px);
}
.page-history .mile {
  position: relative; overflow: hidden;
  padding: clamp(16px, 1.5vw, 22px) clamp(14px, 1.4vw, 20px);
  border-radius: 14px; text-align: center;
  background: #ffffff;
  border: 1px solid rgba(19, 102, 236, .1);
  box-shadow: 0 6px 20px rgba(31, 66, 135, .06);
  transition: all .4s var(--ease);
}
.page-history .mile b {
  display: block;
  font-size: clamp(20px, 1.9vw, 26px); font-weight: 900;
  letter-spacing: -.02em; color: var(--blue-500);
}
.page-history .mile:hover {
  transform: translateY(-4px);
  border-color: rgba(19, 102, 236, .24);
  box-shadow: 0 14px 32px rgba(31, 66, 135, .12);
}
.page-history .mile span { margin-top: 8px; font-size: 12.5px; line-height: 1.65; color: #66748d; }
.page-history .mile i {
  position: absolute; right: 12px; top: 8px;
  font-style: normal; line-height: 1;
  font-size: clamp(22px, 2vw, 30px); font-weight: 900;
  color: rgba(120, 152, 205, .18); letter-spacing: -.02em;
}
@media (max-width: 1080px) { .page-history .milestones { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .page-history .milestones { grid-template-columns: repeat(2, 1fr); } }

/* ---------- 56.3 阶段时间轴：轴线 + 年份节点 ---------- */
.page-history .era-progress {
  height: 2px; opacity: 1;
  margin: 0 0 clamp(36px, 3.4vw, 54px);
  background: linear-gradient(90deg, #c4d9f7, #7faef5 62%, rgba(127, 174, 245, .28));
}
.page-history .era-progress::after { content: none; }
.page-history .era-progress .node {
  position: absolute; top: 50%; left: var(--x);
  width: 10px; height: 10px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff; border: 2.5px solid var(--blue-500);
  box-sizing: border-box;
}
.page-history .era-progress .node.now {
  width: 15px; height: 15px;
  background: var(--blue-500); border-color: #dcebfc;
  box-shadow: 0 0 0 6px rgba(19, 102, 236, .14);
}
.page-history .era-progress .node b {
  position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
  font-size: 13px; font-weight: 700; color: #7c8aa3;
  white-space: nowrap;
}
.page-history .era-progress .node.now b { color: var(--blue-600); }
@media (max-width: 760px) {
  .page-history .era-progress { margin-bottom: 42px; }
  .page-history .era-progress .node b { font-size: 11px; top: 17px; }
}

/* ---------- 56.4 阶段筛选条微调 ---------- */
.page-history .era-tab {
  padding: 10px 20px; font-size: 14px;
  border-color: #e3ecf9;
  box-shadow: 0 3px 10px rgba(31, 66, 135, .05);
}
.page-history .era-tab.on {
  background: linear-gradient(120deg, #1268f5, #2f83ff);
  box-shadow: 0 8px 20px rgba(18, 104, 245, .3);
}
.page-history .era-hint { color: #8a97ad; }

/* ---------- 56.5 节点卡：3 列 + 顶线 + 序号 ---------- */
.page-history .era-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.5vw, 24px);
}
.page-history .era-card {
  padding: clamp(22px, 2vw, 28px);
  border-radius: 16px;
  border-color: rgba(19, 102, 236, .1);
  box-shadow: 0 6px 22px rgba(31, 66, 135, .06);
}
.page-history .era-card::before {
  left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 3px;
  background: linear-gradient(90deg, #1268f5, rgba(19, 102, 236, .05));
}
.page-history .era-card:hover {
  transform: translateY(-5px);
  border-color: rgba(19, 102, 236, .24);
  box-shadow: 0 20px 48px rgba(31, 66, 135, .13);
}
.page-history .era-card .top { margin-bottom: 13px; padding-right: 46px; }
.page-history .era-card .yr { font-size: clamp(22px, 2vw, 29px); color: var(--blue-500); }
.page-history .era-card .ver {
  padding: 5px 12px;
  color: var(--blue-600); background: #eaf2fe; border-color: transparent;
}
.page-history .era-card .top .no {
  position: absolute; right: clamp(16px, 1.5vw, 22px); top: 10px;
  font-style: normal; line-height: 1;
  font-size: clamp(26px, 2.3vw, 36px); font-weight: 900;
  color: rgba(120, 152, 205, .2); letter-spacing: -.02em;
  pointer-events: none;
}
.page-history .era-card h3 {
  font-size: clamp(15.5px, 1.4vw, 18px);
  font-weight: 800; color: var(--blue-600);
}
.page-history .era-card li { font-size: 13.4px; line-height: 1.8; color: #66748d; }
.page-history .era-card li b { color: #23324e; }
@media (max-width: 1080px) { .page-history .era-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .page-history .era-grid { grid-template-columns: 1fr; } }

/* ---------- 56.6 列表底色 / 空态 / CTA 浅色化 ---------- */
.page-history .news-bg {
  background:
    radial-gradient(700px 420px at 96% 2%, rgba(150, 192, 246, .14), transparent 60%),
    linear-gradient(180deg, #f4f9ff 0%, #ffffff 32%);
}
.page-history .news-empty {
  background: #ffffff;
  border: 1px dashed rgba(19, 102, 236, .22);
  border-radius: 18px;
}
.page-history .brand-bg {
  background:
    radial-gradient(760px 420px at 92% 0%, rgba(150, 192, 246, .18), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #eaf3fc 100%);
}
.page-history .brand-bg::after { content: none; }
.page-history .brand-bg::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 130px; z-index: 0; pointer-events: none;
  background:
    radial-gradient(58% 130% at 16% 128%, rgba(173, 205, 246, .4), transparent 62%),
    radial-gradient(48% 120% at 80% 140%, rgba(150, 192, 246, .32), transparent 60%);
}
.page-history .cta-band {
  background:
    radial-gradient(560px 300px at 90% 10%, rgba(150, 192, 246, .2), transparent 62%),
    linear-gradient(120deg, #f2f8ff, #e9f3fe);
  border: 1px solid rgba(19, 102, 236, .12);
}
.page-history .cta-band::after {
  content: 'SINCE 2006';
  position: absolute; right: 26px; bottom: -12px;
  font-size: clamp(56px, 7vw, 104px);
  font-weight: 900; font-style: italic; line-height: 1;
  color: rgba(19, 102, 236, .06);
  pointer-events: none; white-space: nowrap;
}
.page-history .cta-band > div { position: relative; z-index: 1; }
.page-history .cta-band h2 { color: #0c1a33; }
.page-history .cta-band p { color: #5b6a85; }
.page-history .cta-band .btn-primary {
  background: linear-gradient(120deg, #1268f5, #2f83ff); color: #ffffff;
  box-shadow: 0 8px 20px rgba(18, 104, 245, .3);
}
.page-history .cta-band .btn-primary:hover {
  background: linear-gradient(120deg, #0e5ae0, #1f77f2); color: #ffffff;
  box-shadow: 0 10px 26px rgba(18, 104, 245, .36);
}
.page-history .cta-band .btn-ghost {
  background: #ffffff; color: var(--blue-600); border-color: rgba(19, 102, 236, .28);
}
.page-history .cta-band .btn-ghost:hover {
  background: #f4f9ff; color: var(--blue-600); border-color: rgba(19, 102, 236, .45);
}

/* ==========================================================================
   48. 移动端 UI 规范修正（可读性 / 触摸目标）—— 390px 视口实测后统一修正
   --------------------------------------------------------------------------
   · 面包屑：移动端隐藏（不符合移动端规范），仅 PC 端保留显示
   · 中文单位角标（年+/万+/省/层/㎡/新闻计数等）原 10~11.7px → 统一 ≥12px
   · 英文装饰字（SIX-RING、PEOPLE 等，大写+大字距视觉更小）原 9~10.5px → ≥11px
   ========================================================================== */
@media (max-width: 980px) {
  /* 48.1 移动端隐藏面包屑（PC 端不受影响；!important 覆盖页内自定义的 .crumb display 样式） */
  .crumb { display: none !important; }

  /* 48.2 数字单位角标 ≥12px */
  .hstat-item b em,
  .about-stat-num b em,
  .ach-num b em,
  .wp-stat b span,
  .news-tab em,
  .era-tab i,
  .page-history .era-progress .node b,
  .era-card .ver { font-size: 12px !important; }

  /* 48.3 英文装饰小字 ≥11px */
  .sixring-center span,
  .sixring-node b,
  .eco-center span,
  .eco-node b,
  .cta-bottom-text span { font-size: 11px !important; }
}

/* 六环节点触摸反馈：移动端点击时保持圆形焦点轮廓，避免出现矩形蓝色高亮。 */
.sixring-node {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.sixring-node:focus {
  outline: 2px solid var(--blue-500);
  outline-offset: 3px;
  border-radius: 50%;
}
/* 支持 :focus-visible 的浏览器中，触摸点击不显示额外焦点圈，仅键盘操作保留提示。 */
.sixring-node:focus:not(:focus-visible) {
  outline: none;
}

/* 移动端触摸反馈：统一移除链接、按钮和可聚焦控件的默认蓝色点击框，桌面端键盘焦点样式不受影响。 */
@media (hover: none) and (pointer: coarse) {
  a,
  button,
  input,
  textarea,
  select,
  summary,
  [role="button"],
  [tabindex] {
    -webkit-tap-highlight-color: transparent;
  }

  a:focus,
  button:focus,
  input:focus,
  textarea:focus,
  select:focus,
  summary:focus,
  [role="button"]:focus,
  [tabindex]:focus {
    outline: none !important;
  }
}

/* ---------- 49. 移动端页脚（参考设计稿：蓝底联系栏 + 备案信息 + 举报入口，仅 ≤620px 显示） ---------- */
.m-foot { display: none; }
@media (max-width: 620px) {
  .foot { display: none !important; }
  .m-foot {
    display: block;
    background: #2878e5;
    color: #ffffff;
  }
  .m-foot a { color: #ffffff; text-decoration: none; }
  .m-foot-tel {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    padding: 30px 12px 26px;
    border-bottom: 1px solid rgba(255, 255, 255, .55);
  }
  .m-foot-tel svg { width: clamp(30px, 9vw, 38px); height: clamp(30px, 9vw, 38px); flex: none; }
  .m-foot-tel span { font-size: clamp(19px, 6vw, 25px); font-weight: 700; letter-spacing: .01em; white-space: nowrap; }
  .m-foot-info { padding: 24px 18px 0; }
  .m-foot-info + .m-foot-info { margin-top: 18px; }
  .m-foot-info p { margin: 0; font-size: 15.5px; line-height: 2.05; color: #ffffff; }
  .m-foot-info a:hover { text-decoration: underline; }
  .m-foot-links {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 6px;
    padding: 26px 13px 32px;
  }
  .m-foot-links a { display: inline-flex; align-items: center; gap: 5px; font-size: clamp(11.5px, 3.5vw, 14px); white-space: nowrap; }
  .m-foot-links svg { width: clamp(17px, 4.8vw, 20px); height: clamp(17px, 4.8vw, 20px); flex: none; }
  .m-foot-links a:hover { text-decoration: underline; }
}

/* ==========================================================================
   45. 六环生态圈 —— 单列布局（≤1020px）防遮挡修正
   --------------------------------------------------------------------------
   问题：节点按正六边形顶点定位（半径 R = 44%），节点直径 26%~31%，
        单列布局（≤1020px）下六个节点全部溢出 .eco-ring 方形容器：
        顶部「花店花材供应」上溢约 9.5%，盖住区块描述文字后半句；
        底部「花艺培训」下溢压到下方信息卡片；左右节点溢出屏幕边缘。
   方案：≤1020px 将六边形半径内收为 R = 35%（虚线圆 inset 同步改为 15%，
        保持节点正好落在虚线圆上），节点圆心与边缘全部收进容器内；
        ≤620px 节点直径微调为 30%、中心文字块收窄，避免与节点相贴。
   ========================================================================== */
@media (max-width: 1020px) {
  .eco-ring::before { inset: 15%; }
  /* 顶点 = (50 ± 35·sin60°, 50 ∓ 35·cos60°) */
  .eco-n1 { top: 15%;   left: 50%; }
  .eco-n2 { top: 32.5%; left: 80.3%; }
  .eco-n3 { top: 67.5%; left: 80.3%; }
  .eco-n4 { top: 85%;   left: 50%; }
  .eco-n5 { top: 67.5%; left: 19.7%; }
  .eco-n6 { top: 32.5%; left: 19.7%; }
  .eco-center { width: 38%; }
}
@media (max-width: 620px) {
  .eco-node { width: 30%; }
  .eco-node b { font-size: 10.5px; }
  .eco-center { width: 34%; }
}

/* ---------- 57. 首页新闻中心：「进入新闻中心」按钮入口 ---------- */
.news-v2-more {
  margin-top: 30px;
}
@media (max-width: 760px) {
  .news-v2-more { margin-top: 22px; }
  .news-v2-more .btn { padding: 13px 28px; font-size: 14px; }
}

/* ---------- 58. 首页数据统计条：蓝色数字 + 入场/悬浮动效（仅 index.html） ----------
   触发方式：JS 在统计条滚入视口时为其添加 .stats-in，
   卡片逐个上浮、顶部蓝线从中心展开、数字弹跳聚焦；
   数字滚动计数由 main.js 的 [data-count] 逻辑负责。
   -------------------------------------------------------------------------- */
.news-v2-stats .news-stat-item {
  position: relative;
  overflow: hidden;
  --d: 0s;
}
.news-v2-stats .news-stat-item:nth-child(2) { --d: .12s; }
.news-v2-stats .news-stat-item:nth-child(3) { --d: .24s; }
.news-v2-stats .news-stat-item:nth-child(4) { --d: .36s; }

/* 顶部蓝色渐变线：入场时从中心向两侧展开并保持 */
.news-v2-stats .news-stat-item::before {
  content: '';
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 58%; height: 3px; border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, rgba(8, 104, 247, 0), #0868F7 28%, #2a7ff8 72%, rgba(8, 104, 247, 0));
  opacity: 1;
}
.news-v2-stats.stats-in .news-stat-item::before {
  animation: statLineIn .7s var(--ease) backwards;
  animation-delay: calc(var(--d) + .1s);
}
@keyframes statLineIn {
  from { width: 0; opacity: 0; }
  to   { width: 58%; opacity: 1; }
}

/* 卡片逐个上浮入场（backwards 填充，结束后交还悬浮位移） */
@keyframes statCardIn {
  from { opacity: 0; transform: translateY(28px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.news-v2-stats.stats-in .news-stat-item {
  animation: statCardIn .75s var(--ease) backwards;
  animation-delay: var(--d);
}

/* 数字：品牌蓝渐变字（兼容回退为 .news-stat-item b 的纯蓝） */
.news-v2-stats .news-stat-item b span {
  /* 数字节点继承 b 的响应式字号，不参与说明文字的排版规则。 */
  display: inline;
  margin: 0;
  font-size: inherit;
  background: linear-gradient(180deg, #2a7ff8 0%, #0868F7 60%, #0654d4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 数字弹跳聚焦：入场时轻微放大回落 */
.news-v2-stats .news-stat-item b { transform-origin: center bottom; }
@keyframes statNumPop {
  0%   { transform: scale(.86); }
  60%  { transform: scale(1.07); }
  100% { transform: scale(1); }
}
.news-v2-stats.stats-in .news-stat-item b {
  animation: statNumPop .6s var(--ease) backwards;
  animation-delay: calc(var(--d) + .15s);
}

/* 悬浮：扫光掠过 + 抬升辉光 + 蓝线延展 */
.news-v2-stats .news-stat-item::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 32%, rgba(8, 104, 247, .07) 50%, transparent 68%);
  transform: translateX(-130%);
  transition: transform .9s var(--ease);
  pointer-events: none;
}
.news-v2-stats .news-stat-item:hover {
  transform: translateY(-6px);
  border-color: rgba(22, 119, 255, .32);
  box-shadow: 0 16px 40px rgba(8, 104, 247, .16);
}
.news-v2-stats .news-stat-item:hover::after { transform: translateX(130%); }
.news-v2-stats .news-stat-item:hover::before { width: 72%; }
.news-v2-stats .news-stat-item:hover b span { text-shadow: 0 8px 22px rgba(8, 104, 247, .35); }

/* 低端设备 / 减少动效：直接呈现静态蓝字 */
body.lite .news-v2-stats .news-stat-item,
body.lite .news-v2-stats .news-stat-item::before,
body.lite .news-v2-stats .news-stat-item b { animation: none !important; }

/* ---------- 59. 联系页独立布局：避免复用首页 hero 导致图片和内容错位 ---------- */
.contact-hero {
  /* 联系页 Hero 高度由内容和上下内边距决定，避免固定高度制造大块空白。 */
  min-height: 0;
  display: block;
  padding: 0;
  background: linear-gradient(180deg, #f0f5ff 0%, #ffffff 100%);
}
.contact-hero .hero-bg {
  position: absolute;
  top: 0;
  right: 0;
  width: 55%;
  height: 100%;
  background: url('../images/chengdu-financial-city.jpg') center / cover no-repeat;
  opacity: .9;
}
.contact-hero .hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #ffffff 0%, rgba(255,255,255,.62) 30%, rgba(255,255,255,.08) 64%);
}
.contact-hero .hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(240,245,255,.28) 0%, rgba(255,255,255,.82) 100%);
}
.contact-hero .hero-office {
  /* 联系页办公环境卡片避开固定导航，保持与参考图一致的右上悬浮位置。 */
  position: absolute;
  top: calc(var(--nav-h) + 28px);
  right: 5%;
  z-index: 2;
  width: 280px;
  height: 200px;
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  box-shadow: var(--sh-lg);
}
.contact-hero .hero-office img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.contact-hero .hero-office-tag {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 6px 14px;
  border-radius: 20px;
  background: rgba(255,255,255,.9);
  color: var(--blue-600);
  font-size: 13px;
  font-weight: 600;
  backdrop-filter: blur(8px);
}
.contact-hero .hero-inner {
  position: relative;
  z-index: 3;
  display: block;
  /* 与参考联系页保持内容驱动高度，避免背景图区域脱离正文形成空白带。 */
  min-height: 0;
  padding-top: calc(var(--nav-h) + 34px);
  padding-bottom: 72px;
}
.contact-hero .crumb { color: var(--txt-4); }
.contact-hero .crumb a { color: var(--txt-4); }
.contact-hero .crumb b { color: var(--txt-2); }
.contact-hero .hero-title {
  max-width: 620px;
  margin-bottom: 20px;
  color: var(--txt-1);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.02em;
}
.contact-hero .hero-title .accent { color: var(--blue-500); }
.contact-hero .hero-sub {
  max-width: 520px;
  margin-top: 0;
  color: var(--txt-3);
  font-size: 16px;
  line-height: 1.8;
}

/* 联系页通用区块和信息卡片。 */
.contact-hero + .section,
.contact-hero ~ .section { padding: clamp(56px, 6vw, 80px) 0; }
.contact-hero ~ .section.section-light {
  background:
    linear-gradient(rgba(19,102,236,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(19,102,236,.03) 1px, transparent 1px),
    var(--ink-800);
  background-size: 44px 44px, 44px 44px, auto;
}
/* 联系页各终端统一采用「英文标签在上、中文标题在下」的纵向标题结构。 */
.contact-hero ~ .section .section-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin-bottom: 48px;
}
.contact-hero ~ .section .section-head .eyebrow {
  align-self: flex-start;
  margin-bottom: 12px;
}
.contact-hero ~ .section .section-title {
  position: relative;
  display: block;
  color: var(--txt-1);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.contact-hero ~ .section .section-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 48px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--blue-500), transparent);
}
.find-layout {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 36px;
  align-items: stretch;
}
.find-left {
  display: flex;
  flex-direction: column;
  padding: 36px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: #fff;
  box-shadow: var(--sh-sm);
}
.contact-list { display: flex; flex: 1; flex-direction: column; gap: 8px; background: transparent; border: 0; }
.contact-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border-radius: var(--r-md);
  transition: background .2s ease;
}
/* 联系方式行默认使用卡片白底，只有鼠标经过时才显示浅蓝色反馈。 */
.contact-item:first-child { background: transparent; }
.contact-item:hover { background: var(--ink-800); }
.contact-item + .contact-item { border-top: 1px solid #f0f3f8; }
.contact-ico {
  display: flex;
  flex: 0 0 42px;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(19,102,236,.07);
  color: var(--blue-500);
}
.contact-ico svg { width: 22px; height: 22px; stroke-width: 1.8; }
.contact-info { flex: 1; min-width: 0; }
.contact-info small { display: block; margin-bottom: 4px; color: var(--txt-3); font-size: 13px; }
.contact-info b { color: var(--txt-1); font-size: 15px; font-weight: 600; line-height: 1.5; }
.contact-info b a:hover { color: var(--blue-500); }
.copy-btn {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #fff;
  color: var(--blue-500);
  font-size: 12px;
  font-weight: 500;
  transition: all .2s ease;
}
.copy-btn:hover { border-color: var(--blue-500); background: rgba(19,102,236,.07); }
.contact-btns {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.contact-btns .btn-primary,
.contact-btns .btn-outline {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 11px 20px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}
.contact-btns .btn-outline { border: 1px solid var(--blue-500); color: var(--blue-500); }
.contact-btns .btn-outline:hover { background: rgba(19,102,236,.07); }

/* 地图占位区：没有地图服务配置时仍保持完整卡片比例。 */
.contact-hero ~ .section .map-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: #fff;
  box-shadow: var(--sh-md);
}
.contact-hero ~ .section .map-container {
  position: relative;
  flex: 1;
  min-height: 380px;
  overflow: hidden;
  background: linear-gradient(160deg, #f7faff, #eef3fc);
}
.contact-hero ~ .section .map-container::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(19,102,236,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(19,102,236,.05) 1px, transparent 1px);
  background-size: 40px 40px;
}
.contact-hero ~ .section .map-card .map-badge,
.contact-hero ~ .section .map-card .map-compass,
.contact-hero ~ .section .map-card .map-empty,
.contact-hero ~ .section .map-card .map-pin-card,
.contact-hero ~ .section .map-card .map-pin-dot { position: absolute; z-index: 2; }
.contact-hero ~ .section .map-card .map-badge {
  top: 20px;
  right: 20px;
  left: auto;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.95);
  color: var(--txt-2);
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--sh-sm);
}
.contact-hero ~ .section .map-card .map-badge svg {
  width: 16px;
  height: 16px;
  color: var(--blue-500);
}
.contact-hero ~ .section .map-card .map-compass {
  top: 20px;
  right: 80px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  color: var(--txt-2);
  font-size: 11px;
  font-weight: 700;
  line-height: 36px;
  text-align: center;
  box-shadow: var(--sh-sm);
}
.contact-hero ~ .section .map-card .map-empty { inset: 0; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 0 32px; color: var(--txt-3); text-align: center; }
.contact-hero ~ .section .map-card .map-pin-card {
  top: 80px;
  left: 50%;
  padding: 10px 20px;
  transform: translateX(-50%);
  border-radius: 10px;
  background: #fff;
  color: var(--blue-500);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--sh-md);
}
.contact-hero ~ .section .map-card .map-pin-dot { top: 140px; left: 50%; width: 20px; height: 20px; transform: translateX(-50%); border-radius: 50%; background: var(--blue-500); box-shadow: 0 0 0 9px rgba(19,102,236,.14); }
.contact-hero ~ .section .map-card .map-pin-dot::after { content: ''; position: absolute; inset: -14px; border: 1px solid rgba(19,102,236,.34); border-radius: 50%; animation: ring 2.6s var(--ease-soft) infinite; }
.contact-hero ~ .section .map-info { padding: 24px 28px 28px; }
.contact-hero ~ .section .map-info-title { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; color: var(--txt-1); font-size: 16px; font-weight: 700; }
.contact-hero ~ .section .map-info-title svg { width: 20px; height: 20px; color: var(--blue-500); flex-shrink: 0; }
.contact-hero ~ .section .map-info-title span { color: var(--txt-3); font-size: 13px; font-weight: 400; }
.contact-hero ~ .section .map-directions { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.contact-hero ~ .section .map-direction-item { display: flex; align-items: center; gap: 12px; color: var(--txt-2); font-size: 14px; }
.contact-hero ~ .section .map-direction-item svg { width: 18px; height: 18px; color: var(--blue-500); flex-shrink: 0; }
.contact-hero ~ .section .map-direction-item b { min-width: 48px; color: var(--txt-1); font-weight: 600; }
.contact-hero ~ .section .map-btns { display: flex; gap: 10px; }
.contact-hero ~ .section .map-btns .btn-outline,
.contact-hero ~ .section .map-btns .btn-primary { display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: 5px; min-height: 42px; padding: 10px 18px; border-radius: 100px; font-size: 13px; }
.contact-hero ~ .section .map-btns .btn-outline { border: 1px solid var(--blue-500); color: var(--blue-500); }
.contact-hero ~ .section .map-btns .btn-outline svg,
.contact-hero ~ .section .map-btns .btn-primary svg { width: 15px; height: 15px; flex-shrink: 0; }

/* 联系页 outline 按钮沿用参考页的浅蓝 hover 反馈，避免被全站实心蓝样式覆盖。 */
.contact-hero ~ .section .contact-btns .btn-outline:hover,
.contact-hero ~ .section .map-btns .btn-outline:hover {
  background: #e6f0ff;
  border-color: var(--blue-500);
  color: var(--blue-500);
  transform: none;
  box-shadow: none;
}

/* 办公地点与常见咨询卡片。 */
.locations-head { margin-bottom: 0; }
.locations-pill { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; padding: 9px 22px; border: 1px solid #dfe8f8; border-radius: 999px; background: #fff; color: var(--blue-500); font-size: 12px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; box-shadow: var(--sh-sm); }
.locations-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--blue-500); box-shadow: 0 0 0 4px rgba(19,102,236,.14); }
.locations-title { display: block; margin-bottom: 12px; color: var(--txt-1); font-size: clamp(26px, 3vw, 38px); font-weight: 800; line-height: 1.25; }
.locations-sub { color: var(--txt-3); font-size: 14.5px; line-height: 1.8; }
.locations-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2vw, 28px); margin-top: clamp(28px, 3.2vw, 44px); }
.loc-card { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(26px, 2.7vw, 42px); border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 10px 34px rgba(19,102,236,.07); transition: transform .35s ease, box-shadow .35s ease; }
.loc-card:hover { transform: translateY(-4px); box-shadow: 0 18px 46px rgba(19,102,236,.12); }
.loc-badge { display: inline-block; margin-bottom: 22px; padding: 7px 18px; border-radius: 999px; background: linear-gradient(120deg, var(--blue-600), var(--blue-400)); color: #fff; font-size: 13px; font-weight: 600; }
.loc-card h3 { margin-bottom: 14px; color: var(--txt-1); font-size: clamp(18px, 1.8vw, 24px); font-weight: 800; }
.loc-card > p { flex: 1; color: var(--txt-3); font-size: 14px; line-height: 1.95; }
.loc-tags { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.loc-tags span { padding: 7px 15px; border: 1px solid #e3ecf9; border-radius: 999px; background: #f2f6fd; color: var(--txt-3); font-size: 12.5px; }
.faq-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.faq-card { padding: 28px 24px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; transition: all .3s ease; }
.faq-card:hover { border-color: var(--blue-500); box-shadow: var(--sh-md); transform: translateY(-4px); }
.faq-card h3 { margin-bottom: 12px; color: var(--txt-1); font-size: 17px; font-weight: 700; line-height: 1.4; }
.faq-card p { margin-bottom: 16px; color: var(--txt-3); font-size: 13px; line-height: 1.7; }
.faq-card .arrow-link { display: inline-flex; align-items: center; gap: 6px; color: var(--blue-500); font-size: 13px; font-weight: 600; }

@media (max-width: 1024px) {
  .contact-hero .hero-bg { width: 70%; }
  .find-layout { grid-template-columns: 1fr; }
  .locations-grid { grid-template-columns: 1fr; }
  .faq-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
  /* 平板和窄桌面隐藏悬浮办公卡片，避免它覆盖联系页导语文字。 */
  .contact-hero .hero-office { display: none; }
  .contact-hero .hero-bg { width: 100%; opacity: .3; }
  .contact-hero .hero-inner {
    min-height: 0;
    padding-top: calc(var(--nav-h) + 18px);
    padding-bottom: 56px;
  }
}
@media (max-width: 640px) {
  .contact-hero { min-height: auto; }
  .contact-hero .hero-bg { width: 100%; opacity: .3; }
  .contact-hero .hero-office { display: none; }
  /* 手机端按内容计算 Hero 高度，避免固定最小高度制造大块空白。 */
  .contact-hero .hero-inner { min-height: 0; padding-top: calc(var(--nav-h) + 12px); padding-bottom: 56px; }
  .contact-hero .hero-title { font-size: clamp(32px, 8.5vw, 42px); }
  .find-left { padding: 20px 16px; }
  .contact-item { flex-wrap: wrap; padding: 14px 4px; }
  .contact-info { flex: 1 1 calc(100% - 58px); }
  .copy-btn { order: 3; margin-top: 8px; margin-left: 58px; }
  .contact-btns { flex-direction: column; }
  .contact-hero ~ .section .map-container { min-height: 260px; }
  .contact-hero ~ .section .map-info { padding: 20px; }
  .contact-hero ~ .section .map-btns { flex-direction: column; }
  .faq-grid { grid-template-columns: 1fr; }
  .loc-card { padding: 24px 20px; }
}