:root {
  /* 全站基底：偏冷蓝灰，与顶栏/导航深蓝科技主题一致 */
  --bg0: #e6edf6;
  --bg1: #ffffff;
  --bg2: #e8eef5;
  --line: rgba(15, 23, 42, 0.1);
  --text: #0f172a;
  --muted: #475569;
  --faint: #64748b;
  --accent: #0c6ed0;
  --accent-dark: #0958b5;
  --accent-dim: rgba(12, 110, 208, 0.12);
  --accent-teal: #0d9488;
  --heat: #c2410c;
  --rose: #be123c;
  --nav-blue: #0b2d4a;
  --cta-warm: #e65100;
  /* 全站两种字体：Noto Sans SC（标题加粗 + 正文）+ JetBrains Mono（小标签/数字/代码）。
     --font-display 保留为语义变量，与正文同族，仅靠字重区分层级。 */
  --font-display: "Noto Sans SC", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Noto Sans SC", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;
  --shadow-sm: 0 2px 12px rgba(28, 25, 23, 0.05);
  --shadow-md: 0 12px 40px rgba(28, 25, 23, 0.07);
  --shadow-nav: 0 4px 24px rgba(28, 25, 23, 0.06);
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --space: clamp(1rem, 3vw, 2rem);
  --max: 76rem;
}

/* Iconfont（/assets/fonts/iconfont/iconfont.css）：与 icon-xxx 联用；需 npm run build:iconfont */
.iconfont {
  font-family: iconfont, sans-serif;
  font-style: normal;
  font-weight: normal;
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: 7.5rem;
}
.sub-anchor {
  scroll-margin-top: 7.5rem;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { animation: none !important; opacity: 1 !important; transform: none !important; }
  .page-bg::after { animation: none !important; }
  .hero-pill::before { animation: none !important; }
  section.reveal-section {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--text);
  background: var(--bg0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* 中文排版：避免段落/标题行末出现孤字（第二行只剩一两个字） */
p, li, dd, dt, figcaption, blockquote {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6, th, td {
  text-wrap: balance;
}

.page-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 110% 75% at 12% -10%, rgba(6, 52, 92, 0.12), transparent 52%),
    radial-gradient(ellipse 85% 50% at 92% 8%, rgba(12, 110, 208, 0.1), transparent 48%),
    radial-gradient(ellipse 70% 45% at 50% 100%, rgba(13, 148, 136, 0.06), transparent 55%),
    linear-gradient(180deg, #f2f6fb 0%, var(--bg0) 42%, #dfe8f2 100%);
}
.page-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.45;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .page-bg::after {
    animation: grainBreath 16s ease-in-out infinite alternate;
  }
}
@keyframes grainBreath {
  from { opacity: 0.38; }
  to { opacity: 0.52; }
}
.grid-lines {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(90deg, rgba(15, 23, 42, 0.045) 1px, transparent 1px);
  background-size: calc(100% / 24) 100%;
  opacity: 0.55;
  pointer-events: none;
  mask-image: linear-gradient(180deg, black 0%, transparent 90%);
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

.skip {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip:focus {
  position: fixed;
  left: var(--space);
  top: var(--space);
  z-index: 100;
  width: auto;
  height: auto;
  padding: 0.5rem 1rem;
  background: var(--heat);
  color: #fff;
  font-weight: 600;
  border-radius: var(--radius);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

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

.site-header-wrap {
  position: sticky;
  top: 0;
  /* 88：高于首屏轮播的层级（轮播内容实际在 z80 平齐，会盖住下拉菜单导致「点不了」），
     仍低于右侧浮窗弹层(95/96)，保证表单弹层能正常盖住导航 */
  z-index: 88;
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.08);
}

.nav.site-nav {
  position: relative;
  border-bottom: 1px solid var(--line);
  /* 吸顶导航随页面滚动时，大面积 backdrop-filter 在 Safari / 集显设备上
     会持续触发昂贵的重绘。接近不透明的底色观感一致，但滚动明显更稳。 */
  background: rgba(255, 255, 255, 0.985);
}
.nav-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.05rem var(--space);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
}
@media (min-width: 1024px) {
  .nav-inner {
    flex-wrap: nowrap;
  }
}
.brand-block {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
}
.brand-block:hover {
  text-decoration: none;
}
.brand-block .brand-logo {
  display: block;
  height: 62px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}
/* 深色钉住态：给 logo 加轻微青色辉光 + 提亮，蓝色描线在深底上依旧清晰 */
.site-header-wrap.is-stuck .brand-logo {
  filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.4)) brightness(1.08);
}
.brand-block .brand-cn {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 0.12rem;
  font-size: 0.7rem;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.035em;
  border-left: 1px solid rgba(0, 0, 0, 0.08);
  padding: 0.08rem 0 0.08rem 0.75rem;
  line-height: 1.2;
  white-space: nowrap;
}
.brand-block .brand-cn > span:last-child {
  color: var(--nav-blue);
  font-weight: 700;
}

.site-nav-main {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: flex-end;
}
.nav-links > li {
  display: flex;
  align-items: center;
}
@media (min-width: 1024px) {
  .nav-links {
    flex-wrap: nowrap;
    gap: 0.05rem 0.15rem;
  }
  .nav-links > li > a:not(.nav-dropdown-trigger),
  .nav-dropdown-trigger {
    font-size: 0.8125rem;
    padding: 0.45rem 0.55rem;
  }
}
.nav-links > li > a:not(.nav-dropdown-trigger) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.25;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition:
    color 0.2s var(--ease-out),
    background 0.2s var(--ease-out);
}
.nav-links > li > a:not(.nav-dropdown-trigger):hover {
  color: var(--accent);
  text-decoration: none;
  background: var(--accent-dim);
}
.nav-links > li > a:not(.nav-dropdown-trigger)[aria-current="page"] {
  color: var(--accent);
  font-weight: 600;
  background: var(--accent-dim);
}

.nav-dropdown {
  position: relative;
}
.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition:
    color 0.2s var(--ease-out),
    background 0.2s var(--ease-out);
}
/* 下拉小三角：用 ::before + order:1 放到文字「后面」。
   不能用 ::after —— `.nav-links > li > a::after` 已被 hover 霓虹底条占用，
   同一元素的 ::after 只有一个，会互相覆盖导致三角跑到按钮顶部。 */
.nav-dropdown-trigger::before {
  content: "";
  order: 1;
  flex: 0 0 auto;
  align-self: center;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.5;
  transition: transform 0.2s var(--ease-out), opacity 0.2s var(--ease-out);
}
.nav-dropdown:hover .nav-dropdown-trigger::before,
.nav-dropdown:focus-within .nav-dropdown-trigger::before {
  transform: rotate(180deg);
  opacity: 0.9;
}
.nav-dropdown:hover .nav-dropdown-trigger,
.nav-dropdown:focus-within .nav-dropdown-trigger {
  color: var(--accent);
  background: var(--accent-dim);
  text-decoration: none;
}
.nav-dropdown-trigger[aria-current="page"] {
  color: var(--accent);
  font-weight: 600;
  background: var(--accent-dim);
}

.mega-panel {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, 0.35rem);
  min-width: min(100vw - 2rem, 36rem);
  padding: 1.15rem 0 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.22s var(--ease-out),
    transform 0.22s var(--ease-out),
    visibility 0.22s;
  z-index: 120;
}
.mega-panel--narrow {
  min-width: min(100vw - 2rem, 22rem);
}
.mega-panel--wide {
  min-width: min(100vw - 2rem, 44rem);
}
/* 行业锚点：扣掉吸顶导航高度，跳转后标题不被遮住 */
#industries [id^="ind-"] {
  scroll-margin-top: 6.5rem;
}
.nav-dropdown:hover .mega-panel,
.nav-dropdown:focus-within .mega-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.mega-inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem 2rem;
  padding: 1.15rem 1.35rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-md);
}
.mega-panel--narrow .mega-inner {
  grid-template-columns: 1fr;
}
.mega-col--full {
  grid-column: 1 / -1;
}
.mega-title {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 0.5rem;
}
.mega-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mega-list li {
  margin-bottom: 0.4rem;
}
.mega-list a {
  color: var(--text);
  font-size: 0.875rem;
  text-decoration: none;
}
.mega-list a:hover {
  color: var(--accent);
  text-decoration: underline;
}
.mega-list--grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.35rem 1rem;
}
.mega-hint {
  margin: 0.75rem 0 0;
  font-size: 0.78rem;
  color: var(--faint);
  line-height: 1.5;
}
.mega-more {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.84rem;
  font-weight: 600;
}
.mega-more .iconfont {
  font-size: 0.85em;
  margin-left: 0.12em;
  vertical-align: -0.06em;
  opacity: 0.9;
}
.zh-inline-more .iconfont {
  font-size: 0.85em;
  margin-left: 0.12em;
  vertical-align: -0.06em;
  opacity: 0.9;
}

@media (max-width: 900px) {
  .mega-inner {
    grid-template-columns: 1fr;
  }
  .mega-panel {
    display: none;
  }
  .nav-dropdown:hover .mega-panel,
  .nav-dropdown:focus-within .mega-panel {
    display: none;
  }
}

.nav-cta {
  border: 1px solid var(--accent);
  color: var(--accent) !important;
  padding: 0.4rem 1rem;
  border-radius: var(--radius-full);
  font-weight: 600;
  transition: background 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), transform 0.2s var(--ease-out);
}
.nav-cta:hover {
  background: var(--accent-dim);
  box-shadow: 0 4px 16px rgba(12, 110, 208, 0.2);
  transform: translateY(-1px);
}

/* ===================== Header 下载按钮（自动检测系统 + 下拉其它版本）===================== */
.nav-download {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  flex: 0 0 auto;
  margin-left: 0.5rem;
}
.btn-download {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  background: var(--accent);
  color: #fff !important;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  white-space: nowrap;
  transition: background 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.btn-download:hover {
  background: #0a5cb0;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(12, 110, 208, 0.3);
}
.btn-download .dl-ico { flex: 0 0 auto; }
.btn-download-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  padding: 0;
  background: #0a5cb0;
  color: #fff;
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  cursor: pointer;
  transition: background 0.2s var(--ease-out);
}
.btn-download-caret:hover { background: #084a90; }
.btn-download-caret svg { transition: transform 0.2s var(--ease-out); }
.nav-download.open .btn-download-caret svg { transform: rotate(180deg); }

.download-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 248px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.16), 0 2px 8px rgba(15, 23, 42, 0.08);
  padding: 6px;
  z-index: 60;
  animation: dlMenuIn 0.16s var(--ease-out);
}
.download-menu[hidden] { display: none; }
@keyframes dlMenuIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.download-menu-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text);
  transition: background 0.15s var(--ease-out);
}
.download-menu-item:hover { background: var(--accent-dim); text-decoration: none; }
.download-menu-item svg { flex: 0 0 auto; color: var(--muted); }
.download-menu-item:hover svg { color: var(--accent); }
.download-menu-item.is-detected { background: var(--accent-dim); }
.download-menu-item.is-detected svg { color: var(--accent); }
.dm-text { display: flex; flex-direction: column; line-height: 1.25; }
.dm-text strong { font-size: 0.85rem; font-weight: 600; }
.dm-text em { font-size: 0.72rem; color: var(--muted); font-style: normal; }
.download-menu-ver {
  font-size: 0.72rem;
  color: var(--muted);
  text-align: center;
  padding: 0.45rem 0 0.2rem;
  margin-top: 2px;
  border-top: 1px solid var(--line);
}

/* ===================== 顶部语言切换（中文 / English / العربية）===================== */
/* 视觉上刻意做得比下载按钮弱一档：下载是主转化按钮，语言只是辅助入口。
   ⚠️ 余量提醒：.nav-inner 被 --max(76rem=1216px) 卡死，导航是**定宽**布局，再宽的屏也不会更宽。
   实测占用（1440px 视口，含品牌副标题）：中文 1133 / 1152px、英文 1107、阿语 974。
   中文只剩 19px 富余——再往顶部导航加菜单项或加长文案前，先量一遍，
   否则会像早期版本那样直接压到品牌副标题上。 */
.lang-switch {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  margin-left: 0.5rem;
}
.lang-switch__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.6rem;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.lang-switch__btn:hover {
  background: var(--accent-dim);
  border-color: rgba(12, 110, 208, 0.35);
  color: var(--accent);
}
.lang-switch__globe { flex: 0 0 auto; opacity: 0.8; }
.lang-switch__caret { flex: 0 0 auto; transition: transform 0.2s var(--ease-out); }
.lang-switch.open .lang-switch__caret { transform: rotate(180deg); }
/* 头部吸顶后底色变深，按钮跟着转白字，否则深色条上看不见 */
.site-header-wrap.is-stuck .lang-switch__btn {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
}
.site-header-wrap.is-stuck .lang-switch__btn:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}

.lang-switch__menu {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0; /* LTR 贴右、RTL 自动贴左 */
  min-width: 176px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.16), 0 2px 8px rgba(15, 23, 42, 0.08);
  padding: 6px;
  z-index: 60;
  animation: dlMenuIn 0.16s var(--ease-out);
}
.lang-switch__menu[hidden] { display: none; }
.lang-switch__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.85rem;
  text-decoration: none;
  transition: background 0.15s var(--ease-out);
}
.lang-switch__item:hover { background: var(--accent-dim); text-decoration: none; }
.lang-switch__item.is-current { background: var(--accent-dim); color: var(--accent); font-weight: 600; }
.lang-switch__code { font-size: 0.72rem; color: var(--muted); letter-spacing: 0.02em; }
.lang-switch__item.is-current .lang-switch__code { color: var(--accent); }
/* 每个选项按自己的语言排版：阿语项在英文页里也要从右往左读 */
.lang-switch__item[dir="rtl"] { flex-direction: row-reverse; }

/* ===================== 正文暂未翻译时的提示条 ===================== */
.i18n-fallback-notice {
  max-width: 1160px;
  margin: 0.75rem auto 0;
  padding: 0.6rem 1rem;
  background: rgba(234, 179, 8, 0.12);
  border: 1px solid rgba(234, 179, 8, 0.35);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.85rem;
  line-height: 1.5;
}

@media (max-width: 900px) {
  /* 没有手机版客户端，H5 / 移动端不展示任何下载入口（含下拉的其它版本） */
  .nav-download { display: none !important; }
  /* 语言切换在移动端保留：这是换语言的唯一入口，藏了就没别的路径了。
     位置排到汉堡按钮左边，避免和它抢右上角。 */
  .lang-switch { margin-inline-start: auto; margin-inline-end: 0.5rem; }
  .lang-switch__btn { padding: 0.4rem 0.5rem; }
}

main { overflow-x: hidden; }
main > section:first-of-type {
  border-top: none !important;
}
section {
  max-width: var(--max);
  margin: 0 auto;
  /* 2026-06 V3：节奏压紧（原 2.75-5rem 被反馈“间隔太大”） */
  padding: clamp(2rem, 5vw, 3.25rem) var(--space);
  border-top: 1px solid transparent;
}
section:not(.hero) {
  border-top-color: rgba(28, 25, 23, 0.06);
}

.section-label {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.7rem;
  position: relative;
  display: inline-block;
  padding-left: 1rem;
}
.section-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 1.1em;
  background: linear-gradient(180deg, var(--accent), var(--accent-teal));
  border-radius: 2px;
}
h1, h2 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 1rem;
}
h1 { font-size: clamp(1.85rem, 4.5vw, 3rem); }
h2 { font-size: clamp(1.4rem, 3.2vw, 2.05rem); }
h3, .h3 {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 0.65rem;
  color: var(--text);
}

.lead {
  font-size: clamp(1rem, 1.85vw, 1.12rem);
  color: var(--muted);
  max-width: 46em;
  margin: 0 0 1.25rem;
}
.lead strong { color: #292524; }

/* 区块内小节标题 — 与卡片标题（.h3）区分，建立清晰层级 */
.section-subtitle {
  font-family: var(--font-display);
  font-size: clamp(1.18rem, 1.6vw, 1.34rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
  margin: 2.5rem 0 1.15rem;
  padding-bottom: 0.55rem;
  padding-left: 0.85rem;
  border-bottom: 1px solid rgba(28, 25, 23, 0.08);
  position: relative;
}
.section-subtitle::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.12em;
  bottom: 0.55rem;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent), var(--accent-teal));
}
.section-subtitle:first-of-type { margin-top: 1.75rem; }

.hero {
  padding-top: clamp(2.5rem, 9vw, 5.5rem);
  padding-bottom: clamp(1.5rem, 5vw, 3rem);
  border-top: none !important;
}
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.38rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 1.1rem;
  background: rgba(255, 255, 255, 0.65);
  box-shadow: var(--shadow-sm);
}
.hero-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
  animation: pulseDot 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .hero-pill::before { animation: none; }
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(0.92); }
}
.hero-quote {
  margin: 1.25rem 0 1.5rem;
  padding: 1.15rem 1.25rem;
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-lg);
  background: rgba(13, 148, 136, 0.08);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.75;
  box-shadow: var(--shadow-sm);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; }
}

.hero-brand {
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--faint);
  margin: 0.35rem 0 1rem;
}
.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-bottom: 0.25rem;
}
.hero-cta-secondary {
  display: inline-flex;
  align-items: center;
  padding: 0.42rem 1.1rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.22s var(--ease-out), color 0.22s var(--ease-out);
}
.hero-cta-secondary:hover {
  background: var(--accent-dim);
  text-decoration: none;
}
.hero-cta-tertiary {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  border-radius: var(--radius-full);
  border: 1px solid var(--line);
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.hero-cta-tertiary:hover {
  color: var(--accent);
  background: rgba(13, 148, 136, 0.06);
  text-decoration: none;
}

.hero-priority {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
  margin: 1.2rem 0 0.5rem;
}
@media (min-width: 720px) {
  .hero-priority {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
  }
}
.hero-priority-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.15rem 1.2rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg1);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition:
    border-color 0.22s var(--ease-out),
    box-shadow 0.22s var(--ease-out),
    transform 0.22s var(--ease-out);
}
.hero-priority-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--accent), var(--accent-teal));
  opacity: 0;
  transition: opacity 0.25s var(--ease-out);
}
.hero-priority-card:hover::before {
  opacity: 1;
}
.hero-priority-card:hover {
  border-color: rgba(12, 110, 208, 0.4);
  box-shadow: 0 12px 40px rgba(12, 110, 208, 0.12);
  transform: translateY(-5px);
  text-decoration: none;
}
@media (prefers-reduced-motion: reduce) {
  .hero-priority-card {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .hero-priority-card:hover {
    transform: none;
  }
}
.hero-priority-kicker {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-dark);
}
.hero-priority-title {
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--text);
  font-family: var(--font-display);
  letter-spacing: 0.02em;
}
.hero-priority-desc {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.45;
}

.hero-card--accent {
  border-color: rgba(12, 110, 208, 0.28);
  background: linear-gradient(155deg, rgba(12, 110, 208, 0.1) 0%, var(--bg1) 52%);
}
.hero-aside-list {
  margin: 0.75rem 0 0;
  padding-left: 1.15rem;
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.65;
}
.hero-aside-list a {
  color: var(--accent);
  font-weight: 500;
}

/* fit-teaser：区块本身是标准 section（保持与上下模块一致的垂直留白），
   高亮卡片样式下沉到 .fit-teaser__inner，避免「整段被压成一张小卡片」 */
.fit-teaser__inner {
  max-width: 60rem;
  margin: 0 auto;
  border: 1px solid rgba(12, 110, 208, 0.22);
  border-radius: var(--radius-xl);
  padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.5rem, 3vw, 2.5rem);
  background: linear-gradient(145deg, rgba(12, 110, 208, 0.08) 0%, var(--bg1) 55%);
  box-shadow: var(--shadow-sm);
}
.fit-teaser .section-label {
  color: var(--accent-dark);
}

.brand-pillars {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}
@media (min-width: 720px) {
  .brand-pillars { grid-template-columns: repeat(3, 1fr); }
  .brand-pillars--two { grid-template-columns: repeat(2, 1fr); }
  .brand-pillars .callout { margin-top: 0 !important; height: 100%; }
}

.hero-card {
  border: 1px solid var(--line);
  background: linear-gradient(150deg, var(--bg2), var(--bg1));
  padding: 1.35rem 1.45rem;
  border-radius: var(--radius-xl);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: box-shadow 0.4s var(--ease-out), transform 0.45s var(--ease-out);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-card:hover {
    box-shadow: 0 16px 48px rgba(28, 25, 23, 0.1);
    transform: translateY(-3px);
  }
}
.hero-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 45%;
  height: 100%;
  background: radial-gradient(circle at 100% 0%, var(--accent-dim), transparent 72%);
  pointer-events: none;
}
.hero-stat {
  font-family: var(--font-display);
  font-size: 2.35rem;
  color: var(--heat);
  line-height: 1;
  margin: 0 0 0.2rem;
}
.hero-stat-caption { font-size: 0.82rem; color: var(--muted); margin: 0 0 1rem; }

.card-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
/* 首页「六大能力」：固定每行 3 个（共 2 行） */
.card-grid.card-grid--six {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media screen and (max-width: 900px) {
  .card-grid.card-grid--six {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* 服务页「产品核心能力」5 张卡：避免 auto-fill 出现 4+1 空行；宽屏五列均分，中屏 3+2 居中 */
.card-grid.card-grid--five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 1280px) {
  .card-grid.card-grid--five {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .card-grid.card-grid--five .card:nth-child(1),
  .card-grid.card-grid--five .card:nth-child(2),
  .card-grid.card-grid--five .card:nth-child(3) {
    grid-column: span 4;
  }
  .card-grid.card-grid--five .card:nth-child(4) {
    grid-column: 3 / span 4;
  }
  .card-grid.card-grid--five .card:nth-child(5) {
    grid-column: 7 / span 4;
  }
}
.home-role-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14.5rem), 1fr));
}
.home-role-card .h3 {
  font-size: 1.02rem;
  margin-bottom: 0.5rem;
}
.home-role-card__dept {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin: 0 0 0.35rem;
}
.home-role-card p:last-child {
  margin: 0;
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.55;
}
.home-role-card--more {
  border-color: rgba(12, 110, 208, 0.35);
  background: linear-gradient(180deg, rgba(12, 110, 208, 0.07) 0%, var(--bg1) 100%);
}
.home-role-card--more .h3 {
  font-family: var(--font-display);
  color: var(--accent);
}
.card {
  border: 1px solid var(--line);
  background: var(--bg1);
  padding: 1.35rem 1.4rem;
  border-radius: var(--radius-lg);
  transition:
    border-color 0.28s var(--ease-out),
    transform 0.35s var(--ease-out),
    box-shadow 0.35s var(--ease-out);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-teal));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}
.card:hover::after {
  transform: scaleX(1);
}
.card--clickable {
  position: relative;
  cursor: pointer;
}
.card--clickable .card__link {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}
.card--clickable .h3 {
  color: var(--accent);
  position: relative;
  z-index: 1;
}
.card--clickable:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.card--clickable .card__link:focus {
  outline: none;
}
.card:hover {
  border-color: rgba(12, 110, 208, 0.38);
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(12, 110, 208, 0.1);
}
@media (prefers-reduced-motion: reduce) {
  .card { transition: border-color 0.2s ease; }
  .card:hover { transform: none; }
  .card::after { display: none; }
}
.card p { margin: 0; font-size: 0.88rem; color: var(--muted); line-height: 1.65; }
.card .h3 {
  transition: color 0.25s var(--ease-out);
}
.card:hover .h3 {
  color: var(--accent);
}

.compare-wrap {
  margin-top: 1.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  background: var(--bg1);
  overflow: hidden;
}
.compare-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
table.compare {
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
  font-size: 0.82rem;
}
table.compare.dense { font-size: 0.78rem; min-width: 44rem; }
table.compare.selection-table {
  min-width: 52rem;
}
.compare th, .compare td {
  border: 1px solid var(--line);
  padding: 0.75rem 0.85rem;
  text-align: left;
  vertical-align: top;
}
.compare th {
  background: linear-gradient(180deg, #f0ede6 0%, var(--bg2) 100%);
  color: var(--heat);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
/* 定价页·能力对照表（一张表对照所有能力）——表头与首列改为干净的居中/左对齐样式，数据列居中 */
table.compare.ability-table {
  min-width: 46rem;
}
table.compare.ability-table thead th {
  background: linear-gradient(180deg, rgba(12, 110, 208, 0.10) 0%, rgba(12, 110, 208, 0.04) 100%);
  color: var(--nav-blue);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
}
table.compare.ability-table thead th:first-child {
  text-align: left;
}
table.compare.ability-table tbody th[scope="row"] {
  background: var(--bg1);
  color: var(--text);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  white-space: normal;
  min-width: 13rem;
}
table.compare.ability-table tbody td {
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  color: var(--muted);
  font-size: 0.82rem;
}
table.compare.ability-table tbody tr:nth-child(even) th[scope="row"],
table.compare.ability-table tbody tr:nth-child(even) td {
  background: rgba(15, 23, 42, 0.02);
}
/* 场景与选型表：第 4 列 TotalClaw — 与「常见做法」两列形成明确视觉对比（须写在 .compare th 之后） */
table.compare.selection-table th:nth-child(4) {
  background: linear-gradient(165deg, rgba(12, 110, 208, 0.22) 0%, rgba(13, 148, 136, 0.14) 55%, rgba(12, 110, 208, 0.1) 100%);
  color: var(--nav-blue);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  text-transform: none;
  border-left: 3px solid var(--accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
table.compare.selection-table td:nth-child(4) {
  background: linear-gradient(180deg, rgba(12, 110, 208, 0.08) 0%, rgba(12, 110, 208, 0.05) 100%);
  color: var(--text);
  font-weight: 500;
  font-size: 0.8rem;
  line-height: 1.6;
  border-left: 3px solid var(--accent);
}
table.compare.selection-table tbody tr:nth-child(even) td:nth-child(4) {
  background: linear-gradient(180deg, rgba(12, 110, 208, 0.11) 0%, rgba(13, 148, 136, 0.06) 100%);
}
table.compare.selection-table td:nth-child(4) a {
  font-weight: 600;
}
/* Token 价格页：图像表第 5 列为「我们的价格」 */
table.compare.token-pricing-img {
  min-width: 48rem;
}
table.compare.token-pricing-img th:nth-child(5) {
  background: linear-gradient(165deg, rgba(12, 110, 208, 0.22) 0%, rgba(13, 148, 136, 0.14) 55%, rgba(12, 110, 208, 0.1) 100%);
  color: var(--nav-blue);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  text-transform: none;
  border-left: 3px solid var(--accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
table.compare.token-pricing-img td:nth-child(5) {
  background: linear-gradient(180deg, rgba(12, 110, 208, 0.08) 0%, rgba(12, 110, 208, 0.05) 100%);
  color: var(--text);
  font-weight: 500;
  font-size: 0.8rem;
  line-height: 1.6;
  border-left: 3px solid var(--accent);
}
table.compare.token-pricing-img tbody tr:nth-child(even) td:nth-child(5) {
  background: linear-gradient(180deg, rgba(12, 110, 208, 0.11) 0%, rgba(13, 148, 136, 0.06) 100%);
}
/* Token 价格页：8 列全表 — 第 7、8 列为泰途售价（输入 / 输出，置于最后两列） */
table.compare.token-pricing-8col {
  width: max-content;
  min-width: 72rem;
  max-width: none;
  font-size: 0.7rem;
  table-layout: auto;
}
/* 表头允许换行，避免最后一列标题被挤没；数据格保持单行便于扫读 */
table.compare.token-pricing-8col th {
  white-space: normal;
  word-break: break-word;
  line-height: 1.25;
  vertical-align: bottom;
  padding: 0.55rem 0.65rem;
  hyphens: auto;
}
table.compare.token-pricing-8col td {
  white-space: nowrap;
}
/* 横向滚动时右侧留出空隙，避免最后一列贴边或被滚动条挡住 */
.compare-wrap:has(table.token-pricing-8col) .compare-scroll {
  padding-right: 1rem;
  padding-bottom: 0.35rem;
}
table.compare.token-pricing-8col.token-pricing-taitu th:nth-child(7),
table.compare.token-pricing-8col.token-pricing-taitu td:nth-child(7),
table.compare.token-pricing-8col.token-pricing-taitu th:nth-child(8),
table.compare.token-pricing-8col.token-pricing-taitu td:nth-child(8) {
  border-left: 3px solid var(--accent);
}
table.compare.token-pricing-8col.token-pricing-taitu th:nth-child(7),
table.compare.token-pricing-8col.token-pricing-taitu th:nth-child(8) {
  background: linear-gradient(165deg, rgba(12, 110, 208, 0.22) 0%, rgba(13, 148, 136, 0.14) 55%, rgba(12, 110, 208, 0.1) 100%);
  color: var(--nav-blue);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  text-transform: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
table.compare.token-pricing-8col.token-pricing-taitu td:nth-child(7),
table.compare.token-pricing-8col.token-pricing-taitu td:nth-child(8) {
  background: linear-gradient(180deg, rgba(12, 110, 208, 0.08) 0%, rgba(12, 110, 208, 0.05) 100%);
  color: var(--text);
  font-weight: 500;
  font-size: 0.72rem;
}
table.compare.token-pricing-8col.token-pricing-taitu tbody tr:nth-child(even) td:nth-child(7),
table.compare.token-pricing-8col.token-pricing-taitu tbody tr:nth-child(even) td:nth-child(8) {
  background: linear-gradient(180deg, rgba(12, 110, 208, 0.11) 0%, rgba(13, 148, 136, 0.06) 100%);
}
/* Other 表：9 列，泰途为第 7、8 列（备注在第 9 列） */
table.compare.token-pricing-other {
  min-width: 58rem;
  font-size: 0.68rem;
}
table.compare.token-pricing-other th:nth-child(7),
table.compare.token-pricing-other td:nth-child(7),
table.compare.token-pricing-other th:nth-child(8),
table.compare.token-pricing-other td:nth-child(8) {
  border-left: 3px solid var(--accent);
}
table.compare.token-pricing-other th:nth-child(7),
table.compare.token-pricing-other th:nth-child(8) {
  background: linear-gradient(165deg, rgba(12, 110, 208, 0.22) 0%, rgba(13, 148, 136, 0.14) 55%, rgba(12, 110, 208, 0.1) 100%);
  color: var(--nav-blue);
  font-weight: 700;
  font-size: 0.68rem;
  text-transform: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
table.compare.token-pricing-other td:nth-child(7),
table.compare.token-pricing-other td:nth-child(8) {
  background: linear-gradient(180deg, rgba(12, 110, 208, 0.08) 0%, rgba(12, 110, 208, 0.05) 100%);
  color: var(--text);
  font-weight: 500;
}
table.compare.token-pricing-other tbody tr:nth-child(even) td:nth-child(7),
table.compare.token-pricing-other tbody tr:nth-child(even) td:nth-child(8) {
  background: linear-gradient(180deg, rgba(12, 110, 208, 0.11) 0%, rgba(13, 148, 136, 0.06) 100%);
}
.token-pricing-toc ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1.35rem;
  list-style: none;
  padding: 0;
  margin: 0.85rem 0 0;
}
.token-pricing-toc a {
  font-size: 0.86rem;
  color: var(--nav-blue);
  text-decoration: none;
  border-bottom: 1px solid rgba(12, 110, 208, 0.35);
}
.token-pricing-toc a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.compare td { color: var(--muted); }
.compare-footnote {
  margin: 0;
  padding: 0.65rem 0.85rem 1rem;
  font-size: 0.75rem;
  color: var(--faint);
  line-height: 1.55;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(245, 244, 240, 0.35) 0%, var(--bg1) 100%);
}

.steps-ol {
  margin: 1rem 0 0;
  padding-left: 1.2rem;
  color: var(--muted);
  font-size: 0.9rem;
}
.steps-ol li { margin-bottom: 0.5rem; }

.callout {
  margin-top: 1.25rem;
  padding: 1rem 1.15rem;
  border: 1px dashed rgba(180, 83, 9, 0.35);
  background: rgba(180, 83, 9, 0.06);
  border-radius: var(--radius-lg);
  font-size: 0.88rem;
  color: var(--muted);
  transition: background 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.callout:hover {
  background: rgba(180, 83, 9, 0.09);
  border-color: rgba(180, 83, 9, 0.45);
}
.callout strong { color: var(--heat); }

.price-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14.5rem), 1fr));
}
.price-card {
  border: 1px solid var(--line);
  padding: 1.35rem;
  background: var(--bg1);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  min-height: 11rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.price-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
@media (prefers-reduced-motion: reduce) {
  .price-card { transition: none; }
  .price-card:hover { transform: none; }
}
.price-card.featured {
  border-color: var(--accent);
  background: linear-gradient(165deg, var(--accent-dim), var(--bg1));
  box-shadow: 0 8px 28px rgba(13, 148, 136, 0.12);
}
.price-name { font-weight: 700; font-size: 0.95rem; margin-bottom: 0.3rem; }
.price-tag { font-family: var(--font-display); font-size: 1.4rem; color: var(--accent); margin-bottom: 0.45rem; }
.price-card p { margin: 0; font-size: 0.78rem; color: var(--muted); flex: 1; line-height: 1.55; }

.timeline {
  border-left: 2px solid var(--line);
  margin: 1.25rem 0 0;
  padding-left: 1.15rem;
  list-style: none;
}
.timeline li {
  margin-bottom: 0.85rem;
  color: var(--muted);
  font-size: 0.88rem;
  position: relative;
}
.timeline li::before {
  content: "";
  position: absolute;
  left: -1.38rem;
  top: 0.42rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bg1);
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
  transition: transform 0.25s var(--ease-out);
}
.timeline li:hover::before {
  transform: scale(1.12);
}
@media (prefers-reduced-motion: reduce) {
  .timeline li::before { transition: none; }
  .timeline li:hover::before { transform: none; }
}
.timeline strong { color: var(--text); }

.two-col {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .two-col { grid-template-columns: 1fr 1fr; }
}

/* =========================
   Footer
   ========================= */
.site-footer {
  position: relative;
  padding: 4rem var(--space) 1.5rem;
  background:
    radial-gradient(ellipse 80% 60% at 10% 0%, rgba(12, 110, 208, 0.22), transparent 60%),
    radial-gradient(ellipse 60% 50% at 95% 10%, rgba(13, 148, 136, 0.14), transparent 60%),
    linear-gradient(180deg, #0b2d4a 0%, #061e35 100%);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.85rem;
  line-height: 1.7;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
}
.site-footer a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  transition: color 0.2s var(--ease-out);
}
.site-footer a:hover {
  color: #fff;
}
.footer-inner {
  max-width: var(--max);
  margin: 0 auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  gap: 2.5rem 2.25rem;
  align-items: flex-start;
  padding-bottom: 2.75rem;
}
.footer-grid > div:empty {
  display: none;
}

/* Brand column */
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  max-width: 22rem;
}
.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: #fff;
}
.footer-logo-img {
  display: inline-block;
  width: 2.75rem;
  height: 2.75rem;
  object-fit: contain;
  background: #ffffff;
  border-radius: 10px;
  padding: 4px;
  box-shadow: 0 8px 20px rgba(12, 110, 208, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.footer-logo-text {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.2;
  font-style: normal;
}
.footer-logo-text strong {
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 0;
}
.footer-logo-text em {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.74rem;
  font-style: normal;
  margin-top: 0.15rem;
  letter-spacing: 0.06em;
}
.footer-tagline {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.82rem;
  line-height: 1.65;
}
.footer-domain {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  font-family: var(--font-display);
}
.footer-domain:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}

/* Link columns */
.footer-col strong {
  display: block;
  margin-bottom: 0.85rem;
  color: #fff;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: none;
}
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.footer-col li {
  margin: 0;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.68);
}
.footer-col a {
  position: relative;
  display: inline-block;
  color: rgba(255, 255, 255, 0.72);
}
.footer-col a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s var(--ease-out);
}
.footer-col a:hover::after {
  transform: scaleX(1);
}
.footer-note {
  color: rgba(255, 255, 255, 0.42);
  font-size: 0.76rem;
  line-height: 1.55;
}

/* Legal / beian bar */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding-top: 1.35rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.5);
}
.footer-legal__left,
.footer-legal__right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1rem;
}
.footer-legal__right {
  gap: 0.35rem 1.25rem;
}
.footer-legal__sep {
  color: rgba(255, 255, 255, 0.22);
}
.footer-legal__site {
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.04em;
}
.footer-legal__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.2s var(--ease-out);
}
.footer-legal__link:hover {
  color: #fff;
}
.footer-legal__badge {
  color: #3ea6ff;
  flex-shrink: 0;
}
.footer-legal__link--police:hover .footer-legal__badge {
  color: #7cc4ff;
}

/* Legacy copyright class (kept for backwards compatibility) */
.copyright {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.5;
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 960px) {
  .footer-grid {
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 2rem 1.75rem;
  }
  .footer-brand {
    grid-column: 1 / -1;
    max-width: none;
  }
}

/* 「先隐藏后揭幕」一律以 html.motion 为前缀：禁 JS / 老旧浏览器 / 爬虫默认全可见 */
html.motion .reveal {
  opacity: 0;
  transform: translateY(18px) scale(0.992);
  animation: fadeUp 0.85s var(--ease-spring) forwards;
}
.reveal:nth-child(1) { animation-delay: 0.03s; }
.reveal:nth-child(2) { animation-delay: 0.09s; }
.reveal:nth-child(3) { animation-delay: 0.15s; }
.reveal:nth-child(4) { animation-delay: 0.21s; }
.reveal:nth-child(5) { animation-delay: 0.27s; }
.reveal:nth-child(6) { animation-delay: 0.33s; }
.reveal:nth-child(7) { animation-delay: 0.39s; }
.reveal:nth-child(8) { animation-delay: 0.45s; }
@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
/* 下方区块始终可见（不再用 opacity:0 等滚动），避免首屏下滑时大片空白像「没加载」 */
section.reveal-section {
  opacity: 1;
  transform: none;
  will-change: auto;
}

.muted-list {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  color: var(--muted);
  font-size: 0.86rem;
}
.muted-list li {
  margin-bottom: 0.35rem;
  text-wrap: balance;
}
.muted-list__knit {
  white-space: nowrap;
}
@media (max-width: 480px) {
  .muted-list__knit {
    white-space: normal;
  }
}

/* —— 右侧快捷条（参考 B2B 门户：客服 / 电话 / 预约 / 公众号 / 反馈 / 回顶） —— */
.fab-rail {
  position: fixed;
  right: max(0.35rem, env(safe-area-inset-right, 0px));
  bottom: max(0.65rem, env(safe-area-inset-bottom, 0px));
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 0.55rem;
  pointer-events: none;
}
.fab-rail .fab-stack,
.fab-rail .fab-overlay,
.fab-rail .fab-modal,
.fab-rail .fab-cs-pill {
  pointer-events: auto;
}

.fab-cs-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.62rem 1.2rem 0.62rem 0.95rem;
  margin: 0;
  border: none;
  border-radius: var(--radius-full);
  background: linear-gradient(180deg, #ff9a4d 0%, var(--cta-warm) 100%);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow:
    0 4px 6px rgba(230, 81, 0, 0.25),
    0 12px 28px rgba(230, 81, 0, 0.38);
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), filter 0.2s;
}
.fab-cs-pill:hover {
  filter: brightness(1.06);
  box-shadow:
    0 6px 10px rgba(230, 81, 0, 0.3),
    0 16px 36px rgba(230, 81, 0, 0.45);
  transform: translateY(-2px);
}
.fab-cs-pill:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.85);
  outline-offset: 3px;
}
.fab-cs-pill__icon {
  display: flex;
  flex-shrink: 0;
}
.fab-cs-pill__icon .iconfont {
  font-size: 1.375rem;
  line-height: 1;
}
.fab-cs-pill__text {
  white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
  .fab-cs-pill {
    animation: fabCsPulse 2.8s ease-in-out infinite;
  }
}
@keyframes fabCsPulse {
  0%,
  100% {
    box-shadow:
      0 4px 6px rgba(230, 81, 0, 0.25),
      0 12px 28px rgba(230, 81, 0, 0.38);
  }
  50% {
    box-shadow:
      0 4px 6px rgba(230, 81, 0, 0.3),
      0 14px 32px rgba(230, 81, 0, 0.5);
  }
}
@media (prefers-reduced-motion: reduce) {
  .fab-cs-pill {
    animation: none;
  }
}
.fab-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  overflow: hidden;
  box-shadow: -4px 8px 28px rgba(15, 23, 42, 0.12);
  border: 1px solid var(--line);
  border-right: none;
  background: var(--bg1);
}
.fab-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  width: 3.35rem;
  min-height: 3.5rem;
  padding: 0.45rem 0.25rem;
  margin: 0;
  border: none;
  border-bottom: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.15;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.fab-stack .fab-tile:last-child {
  border-bottom: none;
}
.fab-tile:hover {
  background: rgba(12, 110, 208, 0.08);
  color: var(--accent-dark);
  text-decoration: none;
}
.fab-tile:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  z-index: 1;
}
.fab-tile__icon {
  display: flex;
  color: var(--accent);
}
.fab-tile__icon .iconfont {
  font-size: 1.375rem;
  line-height: 1;
}
.fab-tile__text {
  display: block;
  max-width: 100%;
  text-align: center;
}
.fab-tile--link {
  color: inherit;
}
.fab-tile--top .fab-tile__icon {
  color: var(--nav-blue);
}

.fab-overlay {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(15, 23, 42, 0.35);
  backdrop-filter: blur(2px);
}
.fab-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 96;
  width: min(22rem, calc(100vw - 2rem));
  max-height: min(80vh, 28rem);
  overflow: auto;
  padding: 1.35rem 1.35rem 1.15rem;
  border-radius: var(--radius-xl);
  background: var(--bg1);
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
}
.fab-modal__close {
  position: absolute;
  top: 0.5rem;
  right: 0.55rem;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--faint);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fab-modal__close .iconfont {
  font-size: 1.05rem;
}
.fab-modal__close:hover {
  color: var(--text);
  background: var(--bg2);
}
.fab-modal__title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  margin: 0 0 0.75rem;
  padding-right: 1.5rem;
  color: var(--nav-blue);
}
.fab-modal__hi {
  margin: 0 0 0.65rem;
  font-size: 0.92rem;
  color: var(--text);
}
.fab-modal__phone {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  font-weight: 600;
}
.fab-modal__phone a {
  color: var(--accent);
  text-decoration: none;
}
.fab-modal__phone a:hover {
  text-decoration: underline;
}
.fab-modal__muted {
  margin: 0 0 1rem;
  font-size: 0.82rem;
  color: var(--faint);
  line-height: 1.55;
}
.fab-modal__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.55rem 1rem;
  border-radius: var(--radius-full);
  background: linear-gradient(180deg, #ff9a4d 0%, var(--cta-warm) 100%);
  color: #fff !important;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(230, 81, 0, 0.3);
}
.fab-modal__cta:hover {
  filter: brightness(1.05);
  text-decoration: none;
}
.fab-qr-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 8.5rem;
  margin: 0 0 1rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--bg0);
  color: var(--faint);
  font-size: 0.95rem;
}
.fab-qr-placeholder small {
  font-size: 0.72rem;
  opacity: 0.85;
}

@media (max-width: 719px) {
  .fab-rail {
    transform: scale(0.94);
    transform-origin: bottom right;
  }
  /* 小屏只保留客服圆钮，避免纵向工具条遮挡正文与产品视觉。 */
  .fab-stack { display: none; }
  .fab-tile {
    width: 3rem;
    min-height: 3.15rem;
    font-size: 0.6rem;
  }
  /* 移动端「咨询客服」收成纯图标圆钮，省占屏宽 */
  .fab-cs-pill {
    width: 3.4rem;
    height: 3.4rem;
    padding: 0;
    gap: 0;
  }
  .fab-cs-pill__text {
    display: none;
  }
  .fab-cs-pill__icon .iconfont {
    font-size: 1.55rem;
  }
}
@media print {
  .fab-rail {
    display: none !important;
  }
}

/* —— 首页大轮播（参考 B2B 门户全宽首屏） —— */
section.hero-carousel {
  max-width: none;
  margin: 0;
  padding: 0;
  border: none;
  border-top: none !important;
  border-bottom: none !important;
}
/* 轮播与下一区块衔接：去掉全局 section 顶部分割线，避免底边一条亮线 */
section.hero-carousel + section {
  border-top: none !important;
}
@media (prefers-reduced-motion: reduce) {
}
@keyframes heroKen {
  from {
    transform: scale(1.04) translate(0, 0);
  }
  to {
    transform: scale(1.1) translate(-1.5%, -1%);
  }
}
/* Hero 背景：image-set() 优先 AVIF → WebP，旧浏览器回落到第一条 PNG 声明。
   原 PNG 单图 1.2–1.8MB，AVIF 后约 50–115KB。 */
.hero-slide--a .hero-slide__bg {
  background-color: #061525;
  background-image:
    linear-gradient(to top left, rgba(0, 0, 0, 0.55) 0%, transparent 38%),
    linear-gradient(
      100deg,
      rgba(2, 10, 28, 0.92) 0%,
      rgba(2, 14, 36, 0.55) 38%,
      rgba(2, 18, 40, 0.22) 72%,
      rgba(0, 0, 0, 0.12) 100%
    ),
    url("/assets/images/hero-carousel-1.png");
  background-image:
    linear-gradient(to top left, rgba(0, 0, 0, 0.55) 0%, transparent 38%),
    linear-gradient(
      100deg,
      rgba(2, 10, 28, 0.92) 0%,
      rgba(2, 14, 36, 0.55) 38%,
      rgba(2, 18, 40, 0.22) 72%,
      rgba(0, 0, 0, 0.12) 100%
    ),
    image-set(
      url("/assets/images/hero-carousel-1.avif") type("image/avif"),
      url("/assets/images/hero-carousel-1.webp") type("image/webp"),
      url("/assets/images/hero-carousel-1.png") type("image/png")
    );
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero-slide__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1.5rem;
  border-radius: var(--radius-full);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.hero-slide__btn--primary {
  background: linear-gradient(180deg, #ff9a4d 0%, var(--cta-warm) 100%);
  color: #fff !important;
  box-shadow: 0 4px 20px rgba(230, 81, 0, 0.35);
  letter-spacing: 0.04em;
}
.hero-slide__btn--primary:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(230, 81, 0, 0.5);
}
.hero-slide__btn--ghost {
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #fff !important;
  background: rgba(255, 255, 255, 0.08);
}
.hero-slide__btn--ghost:hover {
  text-decoration: none;
  background: rgba(255, 255, 255, 0.16);
}

.jd-home-section-title {
  text-align: center;
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}
.jd-home-section-title .section-label {
  color: var(--accent);
}
@media (prefers-reduced-motion: no-preference) {
}

/* 首页：轮播下方「使命 · 愿景」（大字号突出 + 蓝青主题） */
.home-mission-vision {
  /* 通栏铺底：与上方通栏轮播同宽，消除「悬浮窄面板」的割裂感；
     内容仍由子元素自身 max-width 居中 */
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  border-top: none !important;
  /* 与 web4 / 产品带 / CTA 带统一的垂直留白节奏（V3 压紧）。
     V3：旧「承接轮播」深色下沉渐变移除——hv3 深色 hero 与浅色内容区改为干净的硬边界
     （苹果式分段），不再做段内深→浅烟雾过渡。 */
  padding: clamp(2.25rem, 5.5vw, 3.5rem) var(--space);
  background:
    radial-gradient(ellipse 85% 55% at 50% -5%, rgba(6, 52, 92, 0.08), transparent 55%),
    radial-gradient(ellipse 60% 45% at 0% 60%, rgba(12, 110, 208, 0.06), transparent 50%),
    linear-gradient(180deg, #eef3f9 0%, #f1f5fa 48%, var(--bg0) 100%);
}
.home-mission-vision .jd-home-section-title h2 {
  margin-bottom: 0;
  /* 该区块标题落在浅色背景上：改深色渐变 + 关闭 shimmer 扫光，
     原浅青渐变在亮底上漂移时会发虚、对比度不足，这里压深保证读得清。 */
  background: linear-gradient(100deg, #0b2d4a 0%, #0c6ed0 48%, #0d9488 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: none;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .home-mission-vision .jd-home-section-title h2 {
    color: #0b2d4a;
    -webkit-text-fill-color: #0b2d4a;
  }
}
/* 浅底上的「品牌」标签：压深防发虚，并按用户要求显著放大（高访问区，做成与标题呼应的大眉标） */
.home-mission-vision .jd-home-section-title .section-label {
  color: #0c6ed0;
  font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  letter-spacing: 0.16em;
  padding-left: 1.15rem;
  margin-bottom: 0.85rem;
}
.home-mission-vision .jd-home-section-title .section-label::before {
  width: 6px;
  border-radius: 3px;
}
.home-brand-intro {
  max-width: 72rem;
  margin: clamp(1.1rem, 2.5vw, 1.6rem) auto 0;
  font-size: clamp(0.96rem, 1.7vw, 1.08rem);
  line-height: 1.85;
  letter-spacing: 0.01em;
  color: var(--muted);
  text-wrap: pretty;
}
.home-brand-intro strong {
  color: #0b2d4a;
  font-weight: 700;
}
.home-mission-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  max-width: 72rem;
  margin: clamp(1.5rem, 3.5vw, 2.25rem) auto 0;
}
@media (min-width: 720px) {
  .home-mission-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}
/* ════════ 使命 · 愿景 卡片（2026-06 重做：编辑式，去 // 代码风与撑开的等宽标签）
   单一来源——旧 .home-mission-card__* 与 V2.2 水印层已并入这里。 ════════ */
.mv-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  max-width: 72rem;
  margin: clamp(1.6rem, 3.5vw, 2.4rem) auto 0;
}
@media (min-width: 760px) {
  .mv-grid { grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
}
.mv-card {
  --mv: var(--accent);
  --mv-soft: rgba(12, 110, 208, 0.1);
  position: relative;
  margin: 0;
  padding: clamp(1.6rem, 3.4vw, 2.4rem) clamp(1.5rem, 3vw, 2.2rem);
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background:
    linear-gradient(150deg, var(--mv-soft) 0%, rgba(255, 255, 255, 0.72) 48%, var(--bg1) 100%);
  box-shadow: 0 6px 30px rgba(15, 23, 42, 0.06);
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.3s var(--ease-out), box-shadow 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.mv-card--vision {
  --mv: var(--accent-teal);
  --mv-soft: rgba(13, 148, 136, 0.1);
}
/* 顶部一道品牌色压线，强化卡片身份 */
.mv-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--mv), transparent 85%);
}
@media (prefers-reduced-motion: no-preference) {
  .mv-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 48px rgba(12, 110, 208, 0.13);
  }
}
.mv-card__head {
  display: flex;
  align-items: center;
  gap: 0.72rem;
  margin-bottom: clamp(1.1rem, 2vw, 1.35rem);
}
.mv-card__no {
  font-family: var(--font-mono);
  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--mv);
}
.mv-card__tag {
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  font-weight: 700;
  letter-spacing: 0.045em;
  color: var(--nav-blue);
  line-height: 1.18;
}
.mv-card__tag i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mv);
  margin-top: 0.3rem;
}
.mv-card__text {
  margin: 0;
  max-width: 32em;
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.35vw, 1.16rem);
  font-weight: 500;
  line-height: 1.82;
  letter-spacing: 0.01em;
  color: #29445d;
  text-wrap: pretty;
}
/* 关键词高亮：品牌色 + 细底纹强调，不换行避免拆词 */
.mv-key {
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
  color: var(--mv);
}


.home-cta-band {
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(2.25rem, 5.5vw, 3.5rem) var(--space) !important;
  border-top: none !important;
  background:
    linear-gradient(135deg, #06345c 0%, #0a4a7a 50%, #0b2d4a 100%);
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.home-cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 50%, rgba(12, 110, 208, 0.3), transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(13, 148, 136, 0.2), transparent 50%);
  pointer-events: none;
}
.home-cta-inner {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin: 0 auto;
}
.home-cta-inner h2 {
  color: #fff;
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  margin-bottom: 0.75rem;
}
.home-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

/* Web4.0 Hero Section */
.web4-hero-section {
  background: linear-gradient(135deg, #0a1628 0%, #0f2744 50%, #0c3a5c 100%);
  color: #fff;
  padding: 5rem 2rem;
  position: relative;
  overflow: hidden;
}

.web4-hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(16, 185, 129, 0.08) 0%, transparent 50%);
  pointer-events: none;
}

.web4-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

.web4-badge {
  display: inline-block;
  padding: 0.5rem 1.5rem;
  background: rgba(6, 182, 212, 0.15);
  border: 1px solid rgba(6, 182, 212, 0.4);
  border-radius: 999px;
  color: #06b6d4;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  letter-spacing: 0.05em;
}

.web4-hero-section h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, #fff 0%, #e0f2fe 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.web4-desc {
  color: #94a3b8;
  max-width: 800px;
  margin: 0 auto 2.5rem;
  font-size: 1.125rem;
}

.web4-desc strong {
  color: #06b6d4;
}

.web4-diagram {
  margin: 2rem 0;
  width: 100%;
  overflow-x: auto;
}

.web4-svg {
  max-width: 100%;
  height: auto;
  min-width: 800px;
}

.web4-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
  text-align: left;
}

.web4-feature {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 1.5rem;
  transition: all 0.3s ease;
}

.web4-feature:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(6, 182, 212, 0.3);
  transform: translateY(-2px);
}

.web4-feature .feature-icon {
  font-size: 2rem;
  margin-bottom: 0.75rem;
  display: block;
}

.web4-feature h4 {
  color: #fff;
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
}

.web4-feature p {
  color: #64748b;
  font-size: 0.875rem;
  margin: 0;
}

@media (max-width: 768px) {
  .web4-hero-section {
    padding: 3rem 1rem;
  }
  .web4-features {
    grid-template-columns: 1fr;
  }
}

/* 汉堡菜单按钮 */
.mobile-menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin-left: auto;
}
.mobile-menu-btn span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text);
  margin: 3px 0;
  transition: all 0.3s ease;
}
/* 关闭态 X：先把上下两条平移到中线（间距 8px），再旋转，两条精确交于中心。
   原写法 rotate() 在前、translate() 在后（旋转坐标系内平移），导致 X 歪斜。 */
.mobile-menu-btn.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.mobile-menu-btn.active span:nth-child(2) {
  opacity: 0;
}
.mobile-menu-btn.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ===== 移动端自适应 ===== */
@media screen and (max-width: 768px) {
  body {
    overflow-x: hidden;
  }

  section {
    padding: 2.4rem 1rem;
  }

  h1 { font-size: clamp(1.75rem, 6vw, 3rem); }
  h2 { font-size: clamp(1.5rem, 5vw, 2.2rem); }
  h3 { font-size: clamp(1.1rem, 4vw, 1.5rem); }
  .lead { font-size: 1rem; line-height: 1.7; }
  .section-label {
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    padding-left: 0.8rem;
  }

  .nav-inner {
    flex-wrap: nowrap;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
  }
  .brand-block {
    min-width: 0;
    max-width: calc(100% - 3.25rem);
  }
  .brand-block .brand-logo {
    height: 36px;
  }
  .brand-block .brand-cn {
    display: none;
  }
  .site-nav-main {
    flex: 0 0 auto;
    min-width: auto;
  }
  .mobile-menu-btn {
    display: flex !important;
    flex: 0 0 auto;
  }
  .nav-links {
    display: none;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: auto;
    z-index: 70;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    /* 纯不透明背景：原 0.98 会透出页面正文虚影，移动端显得花乱 */
    background: #ffffff;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 1rem 1rem;
    box-shadow: 0 18px 36px rgba(11, 45, 74, 0.18);
    border-top: 1px solid var(--line);
  }
  .nav-links.active {
    display: flex;
  }
  .nav-links > li,
  .nav-dropdown {
    width: 100%;
  }
  .nav-links > li > a:not(.nav-dropdown-trigger),
  .nav-dropdown-trigger {
    width: 100%;
    justify-content: space-between;
    padding: 0.9rem 0;
    border-radius: 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  }
  /* 菜单为纯白底：首页 hero 上导航本是白字，展开后须强制深色才看得见。
     选择器带 .active 提高优先级，盖过 .is-stuck 那条 !important 白字规则。 */
  .nav-links.active > li > a,
  .nav-links.active .nav-dropdown-trigger,
  .site-header-wrap.is-stuck .nav-links.active > li > a,
  .site-header-wrap.is-stuck .nav-links.active .nav-dropdown-trigger {
    color: var(--text) !important;
  }
  .nav-links.active > li > a[aria-current="page"],
  .site-header-wrap.is-stuck .nav-links.active > li > a[aria-current="page"] {
    color: var(--accent-dark) !important;
  }
  /* 隐藏 hover 霓虹底条，避免菜单里出现整条彩色横杠 */
  .nav-links.active > li > a::after,
  .nav-links.active .nav-dropdown-trigger::after {
    display: none !important;
  }
  .mega-panel,
  .nav-dropdown:hover .mega-panel,
  .nav-dropdown:focus-within .mega-panel {
    display: none !important;
  }

  .hero-carousel-viewport,
  .hero-carousel-track,
  .hero-slide {
    /* 收一点高度，避免移动端首屏是一个大半屏空着、只剩底部圆点的盒子 */
    min-height: clamp(32rem, 80svh, 40rem);
  }
  .hero-slide {
    /* 内容垂直居中，上下留白对称，看起来是「排过」而不是文案堆在顶上 */
    align-items: center;
    padding: 3.75rem 1.25rem 4.5rem;
  }
  .hero-slide__inner {
    padding: 0;
    /* H5 / App 内置浏览器兜底：内置浏览器常节流定时器与动画，
       若有脚本把内容暂置为不可见而没及时恢复，这里强制显示，杜绝首屏空白。 */
    opacity: 1 !important;
  }
  .hero-slide__kicker {
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    padding: 0.28rem 0.7rem;
  }
  .hero-slide h2 {
    font-size: clamp(1.7rem, 7vw, 2.2rem);
    line-height: 1.22;
    max-width: 100%;
    /* H5 上禁用「渐变裁切文字 + 扫光动画」，标题改纯白实色——
       内置浏览器对 background-clip:text + 动画支持参差，纯色保证标题一定看得见。 */
    background: none !important;
    -webkit-text-fill-color: #fff !important;
    color: #fff !important;
    animation: none !important;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4);
  }
  .hero-slide .lead,
  .hero-slide__positioning,
  .hero-slide__sub {
    max-width: 100%;
    font-size: 0.96rem;
  }
  .hero-slide__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .hero-slide__btn {
    width: 100%;
    text-align: center;
    padding: 0.85rem 1.25rem;
    font-size: 0.92rem;
  }
  .hero-carousel-arrow {
    display: none;
  }
  .hero-carousel-ui {
    bottom: 0.9rem;
    gap: 0.5rem;
  }
  /* 移动端轮播圆点收小：按钮保留可点区域，圆点本体用 ::before 画到 6px。
     选择器带 .hero-carousel 前缀提高优先级，盖过后面带 !important 的描边规则。 */
  .hero-carousel .hero-carousel-dots {
    gap: 0.1rem;
  }
  .hero-carousel .hero-carousel-dots button {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px;
    min-height: 24px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }
  .hero-carousel .hero-carousel-dots button::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 1px solid rgba(34, 211, 238, 0.55);
    background: rgba(255, 255, 255, 0.28);
    transition: transform 0.2s var(--ease-out), background 0.2s var(--ease-out);
  }
  .hero-carousel .hero-carousel-dots button[aria-selected="true"] {
    background: transparent !important;
    box-shadow: none !important;
  }
  .hero-carousel .hero-carousel-dots button[aria-selected="true"]::before {
    background: var(--fx-cyan);
    border-color: var(--fx-cyan);
    box-shadow: 0 0 8px var(--fx-cyan);
    transform: scale(1.45);
  }

  .home-mission-grid,
  .card-grid,
  .hero-priority,
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .card-grid.card-grid--six {
    grid-template-columns: 1fr;
  }
  .card-grid.card-grid--five {
    grid-template-columns: 1fr;
  }
  .card-grid.card-grid--five .card:nth-child(n) {
    grid-column: auto;
  }
  .hero-priority-card,
  .card,
  .mv-card,
  .fit-teaser__inner,
  .jd-stat {
    padding: 1rem;
  }
  .jd-stats {
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
  }
  .jd-stat__num {
    font-size: 1.8rem;
  }

  .site-footer {
    padding: 2.5rem 1rem 1.25rem;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem 1.25rem;
    padding-bottom: 1.75rem;
  }
  .footer-brand {
    grid-column: 1 / -1;
    max-width: none;
  }
  .footer-legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    padding-top: 1.1rem;
  }
  .footer-legal__left,
  .footer-legal__right {
    gap: 0.3rem 0.85rem;
  }
  .copyright {
    margin-top: 1.25rem;
    padding-top: 1rem;
    text-align: left;
  }

  /* 架构图移动端：改用放射状紧凑图，整图自适应宽度，取消左右滑动 */
  .home-web4-diagram-wrap.web4-diagram {
    margin: 1.5rem 0;
    width: 100%;
    padding: 0;
    overflow-x: visible;
  }
  .home-web4-diagram-wrap .home-web4-svg {
    display: none;
  }
  .home-web4-diagram-wrap .home-web4-svg-mobile {
    display: block;
    width: 100%;
    max-width: 360px;
    height: auto;
    margin: 0 auto;
  }

  input,
  textarea,
  select {
    width: 100%;
    font-size: 16px;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  .desktop-only {
    display: none;
  }

  /* 触摸端点按反馈：卡片/按钮轻微下压回弹，增强科技触感 */
  .card,
  .mv-card,
  .hero-priority-card,
  .adv-pillar-card,
  .adv-feature-card,
  .fit-teaser__inner {
    transition:
      transform 0.18s var(--ease-out),
      box-shadow 0.18s var(--ease-out);
  }
  .card:active,
  .mv-card:active,
  .hero-priority-card:active,
  .adv-pillar-card:active,
  .adv-feature-card:active,
  .fit-teaser__inner:active {
    transform: scale(0.985);
  }
  .fab-tile:active {
    transform: scale(0.93);
    background: rgba(12, 110, 208, 0.1);
  }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .card:active,
  .mv-card:active,
  .hero-priority-card:active,
  .adv-pillar-card:active,
  .adv-feature-card:active,
  .fit-teaser__inner:active,
  .fab-tile:active {
    transform: none;
  }
}

@media screen and (max-width: 560px) {
}

/* 平板适配 */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .container {
    max-width: 90%;
  }
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .card-grid.card-grid--six {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .jd-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 大屏幕 */
@media screen and (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }
}

/* 触摸优化 */
@media (hover: none) and (pointer: coarse) {
  a, button {
    min-height: 44px;
    min-width: 44px;
  }
}

/* iOS安全区域 */
@supports (padding: env(safe-area-inset-bottom)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* 首页 Web4.0 深色带：协作图 + 三条核心运行逻辑 */
.home-web4-band {
  /* 通栏铺底（与 CTA 带一致）：内容由 .home-web4-inner 自身 max-width 居中 */
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  background: linear-gradient(135deg, #0a1628 0%, #0f2744 50%, #0c3a5c 100%);
  color: #fff;
  padding: clamp(2.25rem, 5.5vw, 3.5rem) var(--space); /* V3 压紧 */
  position: relative;
  overflow: hidden;
}
.home-web4-inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}
.home-web4-badge {
  display: inline-block;
  padding: 0.5rem 1.5rem;
  background: rgba(6, 182, 212, 0.15);
  border: 1px solid rgba(6, 182, 212, 0.4);
  border-radius: 999px;
  color: #06b6d4;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  letter-spacing: 0.05em;
}
.home-web4-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  margin: 0 0 1rem;
  line-height: 1.25;
  background: linear-gradient(135deg, #fff 0%, #e0f2fe 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-family: var(--font-display);
}
.home-web4-lead {
  color: #94a3b8;
  max-width: 46rem;
  margin: 0 auto 2rem;
  font-size: clamp(0.95rem, 1.6vw, 1.05rem);
  line-height: 1.7;
  text-align: left;
}
@media (min-width: 720px) {
  .home-web4-lead {
    text-align: center;
  }
}
.home-web4-lead strong {
  color: #e2e8f0;
}
.home-web4-diagram-wrap {
  margin: 2rem 0;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.home-web4-svg {
  max-width: 100%;
  height: auto;
  min-width: 800px;
  display: block;
  margin: 0 auto;
}
/* 移动端专用放射状图：默认隐藏，桌面端用宽幅图 */
.home-web4-svg-mobile {
  display: none;
}
.home-web4-cards-head {
  margin-top: 2.5rem;
  margin-bottom: 0.25rem;
}
.home-web4-cards-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #06b6d4;
  margin: 0 0 0.5rem;
}
.home-web4-cards-sub {
  font-size: 0.85rem;
  color: #64748b;
  margin: 0 auto;
  max-width: 36rem;
  line-height: 1.55;
}
.home-web4-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  margin-top: 1.25rem;
  text-align: left;
}
.home-web4-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 1.4rem 1.5rem;
  transition:
    transform 0.3s var(--ease-out),
    border-color 0.3s var(--ease-out),
    box-shadow 0.3s var(--ease-out);
}
@media (prefers-reduced-motion: no-preference) {
  .home-web4-card:hover {
    transform: translateY(-4px);
    border-color: rgba(6, 182, 212, 0.35);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
  }
}
.home-web4-card-icon {
  font-size: 1.85rem;
  margin-bottom: 0.65rem;
  display: block;
  line-height: 1;
}
.home-web4-card-icon .iconfont {
  color: rgba(6, 182, 212, 0.95);
}
.home-web4-card-kicker {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(6, 182, 212, 0.95);
  margin: 0 0 0.4rem;
}
.home-web4-card-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: #f8fafc;
  margin: 0 0 0.5rem;
  font-family: var(--font-body);
  line-height: 1.35;
}
.home-web4-card-desc {
  color: #94a3b8;
  font-size: 0.875rem;
  margin: 0;
  line-height: 1.65;
}
.home-web4-footnote {
  margin: 2rem auto 0;
  max-width: 40rem;
  font-size: 0.8rem;
  color: #64748b;
  line-height: 1.6;
  text-align: center;
}
.home-web4-footnote a {
  color: #38bdf8;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.home-web4-footnote a:hover {
  color: #7dd3fc;
}

/* Web4.0 拓扑图：静态细线 + SVG 路径微粒；CEO 仅慢速呼吸描边 */
@media (prefers-reduced-motion: no-preference) {
  .home-web4-svg .web4-node--ceo .web4-hub-ring {
    transform-origin: center;
    transform-box: fill-box;
    animation: web4HubBreath 5.5s ease-in-out infinite;
  }
  @keyframes web4HubBreath {
    0%,
    100% {
      stroke-opacity: 0.18;
    }
    50% {
      stroke-opacity: 0.4;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .home-web4-svg .web4-particles {
    display: none !important;
  }
  .home-web4-svg .web4-node--ceo .web4-hub-ring {
    animation: none !important;
  }
}

/* =========================================================
 * /advantages 页面专属样式（精装版）
 * ========================================================= */

/* —— Hero —— */
.adv-hero {
  position: relative;
  padding: 5.5rem 0 4rem;
  /* 必须保留左右 auto，否则会覆盖 section 的 margin: 0 auto，整块左贴齐 */
  margin: 0 auto 3rem;
  background:
    radial-gradient(1200px 520px at 10% 0%, rgba(12, 110, 208, 0.18), transparent 62%),
    radial-gradient(1100px 540px at 92% 18%, rgba(13, 148, 136, 0.13), transparent 62%),
    linear-gradient(180deg, #f5fbff 0%, #ffffff 100%);
  border-radius: 28px;
  overflow: hidden;
  isolation: isolate;
}
.adv-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(11, 45, 74, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 45, 74, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, #000 25%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 25%, transparent 78%);
  pointer-events: none;
  z-index: -1;
}
.adv-hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
  z-index: -1;
}
.adv-hero-orb--a {
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(12, 110, 208, 0.45) 0%, transparent 70%);
  top: -80px;
  left: -60px;
  animation: adv-orb-float 14s ease-in-out infinite;
}
.adv-hero-orb--b {
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(13, 148, 136, 0.32) 0%, transparent 70%);
  bottom: -120px;
  right: -80px;
  animation: adv-orb-float 18s ease-in-out infinite reverse;
}
@keyframes adv-orb-float {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(30px, -20px); }
}

.adv-hero-inner {
  position: relative;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.adv-hero-title {
  font-family: var(--font-display);
  margin: 0 0 1.2rem;
  letter-spacing: 0.02em;
}
.adv-hero-title .adv-hero-line1 {
  display: block;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  font-weight: 700;
  line-height: 1.1;
  background: linear-gradient(135deg, var(--nav-blue) 0%, var(--accent) 50%, var(--accent-teal) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 30px 60px rgba(12, 110, 208, 0.18);
}
.adv-hero-title .adv-hero-line2 {
  display: block;
  font-size: clamp(1.05rem, 2.4vw, 1.6rem);
  font-weight: 500;
  color: var(--nav-blue);
  margin-top: 0.85rem;
  letter-spacing: 0.06em;
}
.adv-hero-lead {
  max-width: 720px;
  margin: 0 auto 2.4rem;
  font-size: clamp(0.98rem, 1.5vw, 1.1rem);
  line-height: 1.85;
  color: #344b65;
}
.adv-hero-pillars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.1rem;
  max-width: 1040px;
  margin: 0 auto 2rem;
}
.adv-hero-pillar {
  position: relative;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(12, 110, 208, 0.2);
  border-radius: 18px;
  padding: 1.4rem 1rem 1.2rem;
  box-shadow: 0 18px 44px rgba(12, 110, 208, 0.12);
  text-align: center;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.adv-hero-pillar:hover {
  transform: translateY(-4px);
  border-color: rgba(12, 110, 208, 0.45);
  box-shadow: 0 26px 60px rgba(12, 110, 208, 0.22);
}
.adv-hero-pillar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 0.6rem;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-teal) 100%);
  color: #ffffff;
  box-shadow: 0 12px 24px rgba(12, 110, 208, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.adv-hero-pillar-icon svg {
  width: 26px;
  height: 26px;
}
.adv-hero-pillar strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--nav-blue);
  letter-spacing: 0.04em;
  margin-bottom: 0.2rem;
}
.adv-hero-pillar em {
  display: block;
  font-style: normal;
  font-size: 0.82rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.adv-hero-tagline {
  max-width: none;
  margin: 0 auto;
  font-size: 0.96rem;
  color: var(--muted);
  line-height: 1.85;
  white-space: nowrap;
}
.adv-br-mobile { display: none; }

/* —— 通用：副标题装饰线 —— */
.adv-subhead {
  position: relative;
  display: inline-block;
  padding-bottom: 0.5rem;
}
.adv-subhead::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-teal));
}

/* —— 一、自主优势：三大支柱卡 —— */
.adv-pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
  margin-top: 1.8rem;
}
.adv-pillar-grid--four {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.adv-pillar-card {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(11, 45, 74, 0.08);
  border-radius: 20px;
  padding: 2.2rem 1.6rem 1.6rem;
  box-shadow: 0 16px 44px rgba(11, 45, 74, 0.06);
  overflow: hidden;
  transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}
.adv-pillar-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-teal) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 320ms cubic-bezier(.4,.2,.2,1);
}
.adv-pillar-card:hover {
  transform: translateY(-6px);
  border-color: rgba(12, 110, 208, 0.35);
  box-shadow: 0 28px 72px rgba(12, 110, 208, 0.20);
}
.adv-pillar-card:hover::before {
  transform: scaleX(1);
}
.adv-pillar-card .adv-pillar-num {
  font-family: var(--font-display);
  font-size: 4.2rem;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-teal) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.14;
  position: absolute;
  top: 0.4rem;
  right: 1rem;
  letter-spacing: -0.02em;
  pointer-events: none;
}
.adv-pillar-card h3 {
  margin: 0 0 0.8rem;
  font-size: 1.3rem;
  color: var(--nav-blue);
  letter-spacing: 0.02em;
}
.adv-pillar-card > p {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.75;
}
.adv-pillar-card .muted-list li {
  padding-left: 1.3rem;
  position: relative;
}
.adv-pillar-card .muted-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-teal));
}
.adv-pillar-quote {
  margin: 1.1rem 0 0;
  padding: 0.85rem 1rem 0.85rem 1.1rem;
  background: linear-gradient(135deg, rgba(12, 110, 208, 0.08), rgba(13, 148, 136, 0.06));
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--nav-blue);
  line-height: 1.65;
}

/* —— 数据说话：指标卡（3 列） —— */
.adv-metric-grid {
  display: grid;
  gap: 1.1rem;
  margin: 1rem 0 2.4rem;
}
.adv-metric-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.adv-metric-card {
  position: relative;
  background: linear-gradient(160deg, #ffffff 0%, #ecf5ff 100%);
  border: 1px solid rgba(12, 110, 208, 0.18);
  border-radius: 18px;
  padding: 1.8rem 1.4rem 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  box-shadow: 0 14px 38px rgba(12, 110, 208, 0.10);
  overflow: hidden;
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.adv-metric-card::before {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(13, 148, 136, 0.18) 0%, transparent 70%);
  top: -60px;
  right: -50px;
  pointer-events: none;
}
.adv-metric-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 56px rgba(12, 110, 208, 0.20);
}
.adv-metric-value {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 3.3rem);
  font-weight: 800;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-teal) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  letter-spacing: -0.01em;
}
.adv-metric-value sup {
  font-size: 0.5em;
  margin-left: 2px;
  vertical-align: super;
}
.adv-metric-label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--nav-blue);
  margin-top: 0.3rem;
}
.adv-metric-foot {
  font-size: 0.78rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* —— 二、产品优势：四能力卡 —— */
.adv-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem;
  margin-top: 1.5rem;
}
.adv-feature-card {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(11, 45, 74, 0.08);
  border-radius: 20px;
  padding: 1.8rem 1.6rem 1.5rem;
  box-shadow: 0 14px 40px rgba(11, 45, 74, 0.06);
  transition: transform 240ms ease, box-shadow 240ms ease;
  overflow: hidden;
}
.adv-feature-card::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(12, 110, 208, 0.06) 0%, transparent 70%);
  bottom: -100px;
  right: -80px;
  pointer-events: none;
}
.adv-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 64px rgba(12, 110, 208, 0.18);
}
.adv-feature-icon {
  width: 60px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-teal) 100%);
  color: #ffffff;
  margin-bottom: 1rem;
  box-shadow: 0 14px 28px rgba(12, 110, 208, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  position: relative;
  z-index: 1;
}
.adv-feature-icon svg {
  width: 30px;
  height: 30px;
}
.adv-feature-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  color: var(--nav-blue);
}
.adv-feature-card > p {
  margin: 0 0 0.9rem;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.75;
}
.adv-feature-card .muted-list {
  position: relative;
  z-index: 1;
}
.adv-feature-card .muted-list li {
  padding: 0.18rem 0 0.18rem 1.3rem;
  position: relative;
}
.adv-feature-card .muted-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.18rem;
  color: var(--accent-teal);
  font-weight: 700;
}

/* —— 三、服务优势：四服务卡 —— */
.adv-service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
  margin-top: 1.5rem;
}
.adv-service-card {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #f6fbff 100%);
  border: 1px solid rgba(11, 45, 74, 0.08);
  border-radius: 18px;
  padding: 1.5rem 1.4rem 1.4rem;
  box-shadow: 0 12px 34px rgba(11, 45, 74, 0.06);
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.adv-service-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 56px rgba(12, 110, 208, 0.15);
}
.adv-service-card h3 {
  margin: 0 0 0.9rem;
}
.adv-service-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-teal) 100%);
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  box-shadow: 0 8px 18px rgba(12, 110, 208, 0.28);
}
.adv-service-card .muted-list li {
  padding: 0.22rem 0 0.22rem 1.4rem;
  position: relative;
}
.adv-service-card .muted-list li::before {
  content: "›";
  position: absolute;
  left: 0;
  top: 0.05rem;
  color: var(--accent);
  font-size: 1.1rem;
  font-weight: 700;
}

/* —— 四、对比表 —— */
.adv-compare {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 44px rgba(11, 45, 74, 0.08);
}
.adv-compare th,
.adv-compare td {
  text-align: center;
  padding: 1.1rem 1rem;
  font-size: 0.95rem;
  border-bottom: 1px solid rgba(11, 45, 74, 0.06);
}
.adv-compare thead th {
  background: #f4f9ff;
  color: var(--nav-blue);
  font-weight: 700;
  font-size: 0.96rem;
  letter-spacing: 0.04em;
  padding: 1.1rem 1rem;
}
.adv-compare thead th:last-child {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-teal) 100%);
  color: #ffffff;
  font-size: 1.05rem;
  position: relative;
  /* 顶部留白，承载「推荐」角标（避免负数 top 被表或外层 overflow 裁切） */
  padding: 2rem 1rem 1.1rem;
  vertical-align: middle;
}
.adv-compare thead th:last-child::after {
  content: "★ 推荐";
  position: absolute;
  top: 0.42rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.68rem;
  font-weight: 700;
  background: #ffffff;
  color: var(--accent);
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(12, 110, 208, 0.25);
  letter-spacing: 0.06em;
  white-space: nowrap;
  z-index: 2;
  line-height: 1.2;
}
.adv-compare th[scope="row"] {
  text-align: left;
  font-weight: 600;
  color: var(--nav-blue);
  background: #fafdff;
  letter-spacing: 0.02em;
}
.adv-compare tbody td:last-child {
  background: linear-gradient(180deg, rgba(12, 110, 208, 0.06), rgba(13, 148, 136, 0.05));
  border-left: 1px solid rgba(12, 110, 208, 0.18);
}
.adv-compare tbody tr:hover td {
  background: rgba(12, 110, 208, 0.03);
}
.adv-compare tbody tr:hover td:last-child {
  background: linear-gradient(180deg, rgba(12, 110, 208, 0.12), rgba(13, 148, 136, 0.08));
}
.adv-check {
  display: inline-block;
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 0.88rem;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #10b981 0%, #0d9488 100%);
  box-shadow: 0 4px 10px rgba(13, 148, 136, 0.28);
  white-space: nowrap;
}
/* 对比表中间列「部分具备」：扁平无投影，且用 ✓ 避免彩色 emoji 自带灰边/白底 */
.adv-check--compact {
  min-width: 2.25rem;
  padding: 0.28rem 0.5rem;
  text-align: center;
  font-size: 0.92rem;
  line-height: 1;
  box-shadow: none;
  font-family: var(--font-body), system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.adv-cross {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #f1f5f9;
  color: #94a3b8;
  font-size: 0.95rem;
  font-weight: 700;
}
/* 对比表中间列「部分具备/受限」：中性琥珀色文本胶囊，区别于 TotalClaw 的绿色 ✓ */
.adv-partial {
  display: inline-block;
  color: #b45309;
  font-weight: 600;
  font-size: 0.82rem;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  background: #fff7ed;
  border: 1px solid rgba(180, 83, 9, 0.22);
  white-space: nowrap;
}

/* —— 差异化对比带「凭什么不一样」 —— */
.adv-vs-grid {
  width: 100%;
  max-width: none;
  margin: 1.9rem 0 0;
}
.adv-vs-head,
.adv-vs-row {
  display: grid;
  grid-template-columns: 88px 1fr 1.18fr;
  gap: 0.9rem;
  align-items: stretch;
}
.adv-vs-head {
  padding: 0 0.2rem 0.55rem;
  align-items: end;
}
.adv-vs-head span {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.adv-vs-head .vs-h-them { color: #94a3b8; padding-left: 0; }
.adv-vs-head .vs-h-us {
  color: #0c6ed0;
  padding-left: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.adv-vs-row { margin-bottom: 0.75rem; }
.adv-vs-dim {
  display: flex;
  align-items: center;
  font-weight: 700;
  color: #0b2d4a;
  font-size: 0.96rem;
}
.adv-vs-them,
.adv-vs-us {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  border-radius: 12px;
  padding: 0.85rem 1rem;
  line-height: 1.55;
}
.adv-vs-them {
  background: #f5f7fa;
  color: #8a94a3;
  font-size: 0.9rem;
  border: 1px solid rgba(11, 45, 74, 0.06);
}
.adv-vs-us {
  background: linear-gradient(135deg, rgba(12, 110, 208, 0.09), rgba(13, 148, 136, 0.09));
  color: #0b2d4a;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid rgba(12, 110, 208, 0.24);
  box-shadow: 0 8px 22px rgba(12, 110, 208, 0.08);
}
.adv-vs-us strong { color: #0c6ed0; }
.adv-vs-ic { flex: none; margin-top: 0.1rem; }
.adv-vs-punch {
  max-width: 820px;
  margin: 1.7rem auto 0;
  text-align: center;
  font-size: 1.1rem;
  line-height: 1.7;
  color: #0b2d4a;
  font-weight: 600;
}
.adv-vs-punch strong { color: #0c6ed0; }
@media (max-width: 760px) {
  .adv-vs-head { display: none; }
  .adv-vs-row { grid-template-columns: 1fr; gap: 0.45rem; margin-bottom: 0.9rem; }
  .adv-vs-dim { margin-bottom: 0.1rem; font-size: 1rem; }
}

/* —— 五、收束 —— */
.adv-closing {
  margin-top: 3rem;
}
.adv-closing-card {
  position: relative;
  background:
    radial-gradient(800px 360px at 12% 5%, rgba(12, 110, 208, 0.32), transparent 65%),
    radial-gradient(900px 380px at 92% 95%, rgba(13, 148, 136, 0.28), transparent 65%),
    linear-gradient(160deg, #0b2d4a 0%, #0c4870 100%);
  color: #ffffff;
  border-radius: 28px;
  padding: clamp(2.2rem, 5vw, 3.8rem);
  text-align: center;
  box-shadow: 0 32px 80px rgba(11, 45, 74, 0.36);
  overflow: hidden;
  isolation: isolate;
}
.adv-closing-card::before,
.adv-closing-card::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: -1;
}
.adv-closing-card::before {
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(12, 110, 208, 0.6), transparent 70%);
  top: -120px;
  left: -80px;
}
.adv-closing-card::after {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(13, 148, 136, 0.45), transparent 70%);
  bottom: -140px;
  right: -100px;
}
.adv-closing-card h2 {
  color: #ffffff;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  margin: 0 0 1.4rem;
}
.adv-closing-card .lead {
  color: rgba(255, 255, 255, 0.92);
  max-width: 720px;
  margin: 0 auto 1.4rem;
  font-size: 1.05rem;
}
.adv-closing-card .lead strong {
  color: #ffffff;
}
.adv-closing-poem {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  line-height: 2.1;
  color: rgba(255, 255, 255, 0.96);
  margin: 1.2rem auto 2.2rem;
  letter-spacing: 0.06em;
}
.adv-closing-pledges {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  max-width: 760px;
  margin: 1.6rem auto;
}
.adv-closing-pledge {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  padding: 1rem 0.8rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform 220ms ease, background 220ms ease, border-color 220ms ease;
}
.adv-closing-pledge:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.32);
}
.adv-closing-pledge strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.04em;
}
.adv-closing-pledge em {
  display: block;
  font-style: normal;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 0.25rem;
  letter-spacing: 0.04em;
}
.adv-closing-sign {
  margin: 1rem 0 1.8rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.96rem;
  font-style: italic;
}
.adv-closing-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  justify-content: center;
}
.adv-closing-actions .btn-primary,
.adv-closing-actions .btn-ghost {
  display: inline-flex;
  align-items: center;
  padding: 0.95rem 1.9rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
}
.adv-closing-actions .btn-primary {
  background: linear-gradient(135deg, #ffffff 0%, #e6f4ff 100%);
  color: var(--nav-blue);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.32);
}
.adv-closing-actions .btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.42);
}
.adv-closing-actions .btn-ghost {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
}
.adv-closing-actions .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-3px);
}

/* —— section 间距 & 标题节奏 —— */
#adv-pillars,
#adv-product,
#adv-service,
#adv-compare {
  padding-top: 2.4rem;
  margin-top: 2.4rem;
  position: relative;
}
#adv-pillars > p.lead,
#adv-product > p.lead,
#adv-service > p.lead,
#adv-compare > p.lead {
  max-width: 760px;
  font-size: 1.02rem;
}

/* —— 响应式 —— */
@media (max-width: 1024px) {
  .adv-pillar-grid { grid-template-columns: 1fr 1fr; }
  .adv-hero-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; }
  .adv-metric-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .adv-hero-tagline { white-space: normal; max-width: 760px; }
}
@media (max-width: 820px) {
  .adv-hero { padding: 4rem 0 2.6rem; border-radius: 18px; }
  .adv-hero-pillars { grid-template-columns: 1fr; max-width: 420px; }
  .adv-pillar-grid { grid-template-columns: 1fr; }
  .adv-metric-grid--three { grid-template-columns: 1fr; }
  .adv-feature-grid { grid-template-columns: 1fr; }
  .adv-service-grid { grid-template-columns: 1fr; }
  .adv-closing-pledges { grid-template-columns: 1fr; max-width: 320px; }
  .adv-closing-card { border-radius: 18px; }
  .adv-compare { font-size: 0.84rem; }
  .adv-compare th, .adv-compare td { padding: 0.7rem 0.4rem; }
  .adv-br-mobile { display: block; }
}

/* =========================================================
 * TotalClaw FX — 全站炫酷化层（深度科幻 / 重度炫技）
 * ========================================================= */

:root {
  --fx-cyan: #22d3ee;
  --fx-blue: #3b82f6;
  --fx-teal: #14b8a6;
  --fx-indigo: #6366f1;
  --fx-glow: 0 0 24px rgba(59, 130, 246, 0.55);
  --fx-glow-soft: 0 0 12px rgba(34, 211, 238, 0.35);
}

/* ---------- 0. 顶部 scroll 进度条 ---------- */
.fx-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 9999;
  background: linear-gradient(90deg, var(--fx-cyan), var(--fx-blue) 50%, var(--fx-teal));
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.7);
  transition: opacity 200ms ease;
}

/* ---------- 0a. 全页 spotlight ---------- */
.fx-spotlight {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    600px circle at var(--fx-mx, -100%) var(--fx-my, -100%),
    rgba(59, 130, 246, 0.08),
    transparent 40%
  );
  mix-blend-mode: screen;
  transition: opacity 240ms ease;
}

/* ---------- 1. Reveal 揭幕 ----------
   初始隐藏只在 html.motion（JS 门控确认）下生效；揭幕由 GSAP ScrollTrigger 接管。
   禁 JS / 能力不足 / reduced-motion → 无 .motion → 正文始终可见（SEO 与降级同一机制）。 */
/* V3.1：纯淡入，零位移——整段 translateY 会在通栏背景间露出页底缝隙（衔接断带），
   且大面积 transform 图层让滚动发糊。 */
html.motion .reveal-section,
html.motion [data-fx-reveal] {
  opacity: 0;
}
.reveal-section.fx-in,
[data-fx-reveal].fx-in,
.reveal-section.is-visible {
  opacity: 1;
  transform: none;
}
/* 子元素错峰浮现 */
.reveal-section.fx-in > * { animation: fx-rise 700ms cubic-bezier(.4,.2,.2,1) both; }
.reveal-section.fx-in > *:nth-child(1) { animation-delay: 60ms; }
.reveal-section.fx-in > *:nth-child(2) { animation-delay: 120ms; }
.reveal-section.fx-in > *:nth-child(3) { animation-delay: 180ms; }
.reveal-section.fx-in > *:nth-child(4) { animation-delay: 240ms; }
.reveal-section.fx-in > *:nth-child(5) { animation-delay: 300ms; }
@keyframes fx-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 2a. 浮动光点装饰（GSAP 驱动，替代旧 canvas 粒子场） ---------- */
.fx-orb-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.fx-orb {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.9), rgba(59, 130, 246, 0) 70%);
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.55);
}
.fx-orb--teal {
  background: radial-gradient(circle, rgba(20, 184, 166, 0.9), rgba(20, 184, 166, 0) 70%);
  box-shadow: 0 0 12px rgba(20, 184, 166, 0.5);
}
/* SplitText 切出的字符容器：避免行内基线抖动。
   不常驻 will-change：每字独立合成层在部分 Chromium/GPU 上会产生黑色毛刺。 */
.fx-char { display: inline-block; }

/* ---------- 2. Hero 区粒子 canvas 容器 ---------- */
.fx-canvas-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  mask-image: radial-gradient(ellipse at center, #000 60%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 60%, transparent 100%);
}
/* 让 hero 容器内容浮在 canvas 上 */
.adv-hero > *:not(.fx-canvas-wrap):not(.adv-hero-orb) { position: relative; z-index: 1; }
.home-hero > *:not(.fx-canvas-wrap) { position: relative; z-index: 1; }

/* ---------- 3. 3D 卡片倾斜 ---------- */
.fx-tilt {
  transform-style: preserve-3d;
  transform: perspective(900px) rotateX(var(--fx-tilt-rx, 0deg)) rotateY(var(--fx-tilt-ry, 0deg));
  transition: transform 240ms cubic-bezier(.4,.2,.2,1);
  will-change: transform;
}

/* ---------- 4. 卡片描边扫光（conic 旋转） ---------- */
.adv-pillar-card,
.adv-feature-card,
.adv-service-card,
.adv-metric-card,
.adv-hero-pillar {
  position: relative;
  isolation: isolate;
}
.adv-pillar-card::before,
.adv-feature-card::before,
.adv-service-card::before,
.adv-hero-pillar::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--fx-edge-angle, 0deg),
    transparent 0%,
    transparent 60%,
    var(--fx-cyan) 72%,
    var(--fx-blue) 84%,
    var(--fx-teal) 96%,
    transparent 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 260ms ease;
  z-index: 3;
  pointer-events: none;
  animation: fx-edge-spin 5.5s linear infinite paused;
}
@property --fx-edge-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.adv-pillar-card:hover::before,
.adv-feature-card:hover::before,
.adv-service-card:hover::before,
.adv-hero-pillar:hover::before {
  opacity: 1;
  animation-play-state: running;
}
@keyframes fx-edge-spin {
  from { --fx-edge-angle: 0deg; }
  to   { --fx-edge-angle: 360deg; }
}
/* 不支持 @property 的浏览器降级：直接旋转背景图 */
@supports not (background: paint(something)) {
  .adv-pillar-card:hover::before,
  .adv-feature-card:hover::before,
  .adv-service-card:hover::before,
  .adv-hero-pillar:hover::before {
    background: linear-gradient(135deg, var(--fx-cyan), var(--fx-blue), var(--fx-teal));
  }
}

/* ---------- 5. 标题霓虹 hover ---------- */
.adv-pillar-card:hover h3,
.adv-feature-card:hover h3 {
  text-shadow: 0 0 18px rgba(59, 130, 246, 0.5);
}

/* ---------- 6. Header 滚动毛玻璃 ---------- */
.site-header-wrap {
  transition: background 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  border-bottom: 1px solid transparent;
}
/* 钉住后用深色不透明玻璃 + 高对比白字 + 青色辉光下边线 */
.site-header-wrap.is-stuck {
  isolation: isolate;
  background: linear-gradient(180deg, rgba(8, 18, 33, 0.985) 0%, rgba(11, 27, 46, 0.975) 100%);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.45), inset 0 -1px 0 rgba(34, 211, 238, 0.35);
  border-bottom-color: rgba(34, 211, 238, 0.35);
}
.site-header-wrap.is-stuck .nav.site-nav {
  background: transparent;
  border-bottom-color: transparent;
}
.site-header-wrap.is-stuck .nav-links > li > a,
.site-header-wrap.is-stuck .brand-cn,
.site-header-wrap.is-stuck .site-hotline,
.site-header-wrap.is-stuck .site-hotline a,
.site-header-wrap.is-stuck .site-topbar-link {
  color: rgba(255, 255, 255, 0.94) !important;
}
.site-header-wrap.is-stuck .brand-cn {
  border-left-color: rgba(255, 255, 255, 0.22);
}
.site-header-wrap.is-stuck .brand-cn > span {
  color: rgba(255, 255, 255, 0.94) !important;
}
.site-header-wrap.is-stuck .site-topbar {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.15));
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
/* 顶部 CTA 按钮：钉住时换青色描边玻璃态 */
.site-header-wrap.is-stuck .site-topbar-cta {
  background: linear-gradient(135deg, var(--fx-cyan), var(--fx-blue));
  color: #ffffff !important;
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(34, 211, 238, 0.45);
}
/* mega-panel 弹出仍为白色，钉住时强制保证可读 */
.site-header-wrap.is-stuck .mega-panel {
  background: rgba(255, 255, 255, 0.98);
  color: #0b2d4a;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}
.site-header-wrap.is-stuck .mega-panel a {
  color: #0b2d4a;
}
/* mobile menu 按钮：钉住时亮色 */
.site-header-wrap.is-stuck .mobile-menu-btn span {
  background: #ffffff;
}
/* 链接 hover 霓虹底条 */
.nav-links > li > a {
  position: relative;
}
.nav-links > li > a::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 6px;
  height: 2px;
  background: linear-gradient(90deg, var(--fx-cyan), var(--fx-blue), var(--fx-teal));
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 280ms cubic-bezier(.4,.2,.2,1), box-shadow 280ms ease;
  box-shadow: 0 0 0 transparent;
}
.nav-links > li > a:hover::after,
.nav-links > li > a[aria-current="page"]::after {
  transform: scaleX(1);
  box-shadow: 0 0 14px rgba(59, 130, 246, 0.6);
}

/* ---------- 7. 页脚扫光分隔 ---------- */
.site-footer {
  position: relative;
  isolation: isolate;
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(34, 211, 238, 0.6) 30%,
    rgba(99, 102, 241, 0.7) 50%,
    rgba(20, 184, 166, 0.6) 70%,
    transparent 100%
  );
  background-size: 220% 100%;
  background-position: 0 0;
  /* V3：扫光停掉，静态渐变线（用户反馈“抖动太厉害”，整站收敛常驻动效） */
  box-shadow: 0 0 14px rgba(59, 130, 246, 0.35);
}
.footer-logo-img {
  transition: transform 320ms cubic-bezier(.4,.2,.2,1), filter 320ms ease;
}
.footer-logo:hover .footer-logo-img {
  transform: rotate(-6deg) scale(1.08);
  filter: drop-shadow(0 0 12px rgba(59, 130, 246, 0.6));
}

/* ---------- 8. Hero 标题：渐变扫光 ---------- */
.adv-hero-title .adv-hero-line1 {
  background: linear-gradient(
    100deg,
    #0b2d4a 0%,
    var(--fx-blue) 30%,
    var(--fx-cyan) 50%,
    var(--fx-teal) 70%,
    #0b2d4a 100%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* V3：扫光停掉，静态渐变（整站收敛常驻动效） */
}

/* ---------- 9. Hero pillar 图标脉冲 ---------- */
.adv-hero-pillar-icon {
  position: relative;
  /* V3：浮动脉冲停掉 */
}
.adv-hero-pillar-icon::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.5), transparent 70%);
  filter: blur(8px);
  z-index: -1;
  opacity: 0.6;
  /* V3：光环脉冲停掉 */
}

/* ---------- 10. 指标数字：扫光数字光泽 ---------- */
.adv-metric-value {
  background: linear-gradient(
    100deg,
    var(--fx-blue) 0%,
    var(--fx-cyan) 35%,
    var(--fx-teal) 65%,
    var(--fx-blue) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* V3：扫光停掉，静态渐变 */
}

/* ---------- 11. 对比表勾选脉动 ---------- */
.adv-check {
  position: relative;
}
.adv-check::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(20, 184, 166, 0.5), transparent 70%);
  filter: blur(6px);
  z-index: -1;
  opacity: 0.5;
  /* V3：脉动停掉 */
}

/* ---------- 12. 收尾 closing 浮粒 ---------- */
.adv-closing-card {
  position: relative;
}
.adv-closing-card::before {
  background-size: 100% 100%;
}
.adv-closing-poem {
  position: relative;
}
.adv-closing-poem::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -20px;
  width: 60px;
  height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--fx-cyan), transparent);
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.6);
}

/* ---------- 13. 数据子标题霓虹下划线 ---------- */
.adv-subhead::after {
  height: 3px;
  background: linear-gradient(90deg, var(--fx-cyan), var(--fx-blue), var(--fx-teal));
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
}

/* ---------- 14. SVG path draw 默认透明蓝 ---------- */
[data-fx-draw] {
  fill: none;
  stroke: url(#fx-grad);
  stroke-width: 1.5;
  stroke-linecap: round;
}

/* ---------- prefers-reduced-motion 一键降级 ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .reveal-section,
  [data-fx-reveal] { opacity: 1; transform: none; }
  .fx-canvas-wrap { display: none; }
  .fx-spotlight { display: none; }
}

/* ---------- 移动端降级 ---------- */
@media (pointer: coarse), (max-width: 820px) {
  .fx-tilt { transform: none !important; }
  .fx-tilt::after { display: none; }
  .fx-spotlight { display: none; }
}

/* ---------- 15. 通用 [data-fx-particles] 容器（非 .adv-hero 页面） ---------- */
[data-fx-particles] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
/* 用 :where() 把这条规则的特异性降为 0，让任何已声明 position:absolute 的装饰元素（bracket / scanline / grain / chip 等）保持原值，不被反扑成 relative */
:where([data-fx-particles]) > :where(*:not(.fx-canvas-wrap)) {
  position: relative;
  z-index: 1;
}
[data-fx-particles] > .fx-canvas-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.55;
}

/* ---------- 16. 全站节奏：section 通用 hero 装饰 ---------- */
.fx-page-hero {
  position: relative;
  padding: clamp(3.75rem, 6vw, 4.5rem) clamp(2.75rem, 5vw, 3.5rem) clamp(2.5rem, 5vw, 3.25rem) !important;
  margin-bottom: 2.4rem;
  border-radius: 28px;
  background:
    radial-gradient(900px 380px at 8% 0%, rgba(34, 211, 238, 0.14), transparent 60%),
    radial-gradient(1000px 420px at 96% 24%, rgba(99, 102, 241, 0.12), transparent 60%),
    linear-gradient(180deg, #f5fbff 0%, #ffffff 100%);
  overflow: hidden;
}
.fx-page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(11, 45, 74, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 45, 74, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  pointer-events: none;
  z-index: 0;
}
.fx-page-hero > * { position: relative; z-index: 1; }
.fx-page-hero h2 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  background: linear-gradient(100deg, #0b2d4a, var(--fx-blue) 40%, var(--fx-cyan) 60%, #0b2d4a);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* V3：扫光停掉（整站零常驻动效） */
}

/* ---------- 17. advantages divider SVG ---------- */
.adv-divider-svg {
  display: block;
  width: 100%;
  height: 120px;
  margin: 2rem 0 0;
  pointer-events: none;
  overflow: visible;
}
.adv-divider-svg [data-fx-draw] {
  fill: none;
  stroke: url(#fx-grad);
  stroke-width: 1.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.55));
}

/* =========================================================
 * Hero 科幻深化层 — chip / scanline / grain / corner brackets / 大字 LOGO
 * ========================================================= */

/* —— TotalClaw 巨字处理 —— */
.adv-hero-title .adv-hero-line1 {
  font-family: var(--font-display);
  font-size: clamp(3.6rem, 9vw, 7rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 0.95 !important;
  background:
    linear-gradient(100deg,
      #0b2d4a 0%,
      var(--fx-blue) 25%,
      var(--fx-cyan) 50%,
      var(--fx-teal) 75%,
      #0b2d4a 100%) !important;
  background-size: 220% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  /* V3：扫光停掉（整站零常驻动效） */
  text-shadow: 0 30px 80px rgba(12, 110, 208, 0.25);
  position: relative;
  display: inline-block;
}
/* 巨字下面再加一行幽灵描边，制造 hologram 错位 */
.adv-hero-title .adv-hero-line1::before,
.adv-hero-title .adv-hero-line1::after {
  content: "TotalClaw";
  position: absolute;
  inset: 0;
  background: none;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px rgba(34, 211, 238, 0.18);
  pointer-events: none;
}
.adv-hero-title .adv-hero-line1::before {
  transform: translate(-3px, -2px);
  color: transparent;
}
.adv-hero-title .adv-hero-line1::after {
  -webkit-text-stroke: 1px rgba(99, 102, 241, 0.16);
  transform: translate(3px, 2px);
}

/* —— Hero chip 标签 —— */
.adv-hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 1rem 0.45rem 0.75rem;
  margin: 0 auto 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fx-blue);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(34, 211, 238, 0.4);
  border-radius: 999px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.6) inset,
    0 10px 28px rgba(34, 211, 238, 0.22),
    0 0 24px rgba(34, 211, 238, 0.18);
}
.adv-hero-chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fx-cyan);
  box-shadow: 0 0 12px var(--fx-cyan), 0 0 24px rgba(34, 211, 238, 0.6);
  animation: fx-chip-pulse 1.6s ease-in-out infinite;
}
@keyframes fx-chip-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.7; }
}
.adv-hero-chip-sep {
  opacity: 0.4;
  font-weight: 400;
}

/* —— Scanline 横向扫线 —— */
.adv-hero-scanline {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(34, 211, 238, 0.08) 49.5%,
    rgba(34, 211, 238, 0.18) 50%,
    rgba(34, 211, 238, 0.08) 50.5%,
    transparent 100%
  );
  background-size: 100% 8px;
  mix-blend-mode: screen;
  /* V3：扫描线滚动停掉，保留静态 CRT 纹理 */
  opacity: 0.45;
}

/* —— 细微噪点（grain）—— */
.adv-hero-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
  animation: fx-grain-shift 1.6s steps(4) infinite;
}
@keyframes fx-grain-shift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-6px, 4px); }
  50%  { transform: translate(4px, -2px); }
  75%  { transform: translate(-2px, -4px); }
  100% { transform: translate(0, 0); }
}

/* —— Corner brackets ⌜ ⌝ ⌞ ⌟ 装饰 —— */
/* !important：装饰角标必须脱离文档流，否则会被 `.adv-hero > *` /
   `.fx-page-hero > *` 的 position:relative 反扑成块级元素，撑出大段顶部空白 */
.adv-hero-bracket {
  position: absolute !important;
  width: 56px;
  height: 56px;
  border: 2px solid var(--fx-cyan);
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.45));
  opacity: 0.8;
}
.adv-hero-bracket--tl { top: 22px; left: 22px; border-right: none; border-bottom: none; border-top-left-radius: 8px; }
.adv-hero-bracket--tr { top: 22px; right: 22px; border-left: none; border-bottom: none; border-top-right-radius: 8px; }
.adv-hero-bracket--bl { bottom: 22px; left: 22px; border-right: none; border-top: none; border-bottom-left-radius: 8px; }
.adv-hero-bracket--br { bottom: 22px; right: 22px; border-left: none; border-top: none; border-bottom-right-radius: 8px; }
@media (max-width: 720px) {
  .adv-hero-bracket { display: none; }
  /* fx-page-hero 的横向 padding 用 clamp(2.75rem,5vw,3.5rem)，移动端会落到
     2.75rem(44px) 下限，左右共吃掉 88px，把标题挤到换行（如 workforce 的
     「层」单字成行）。移动端收紧到 1.1rem，与 section 的 1rem 节奏一致。 */
  .fx-page-hero {
    padding: clamp(2.5rem, 8vw, 3.25rem) 1.1rem clamp(1.75rem, 6vw, 2.25rem) !important;
    margin-bottom: 1.6rem;
    border-radius: 20px;
  }
}

/* —— Hero 容器更暗的科技底 —— */
.adv-hero {
  background:
    radial-gradient(1200px 520px at 10% 0%, rgba(34, 211, 238, 0.18), transparent 62%),
    radial-gradient(1100px 540px at 92% 18%, rgba(99, 102, 241, 0.15), transparent 62%),
    linear-gradient(180deg, #eef6ff 0%, #f8fbff 100%) !important;
}
/* 让 chip / line2 / lead 浮在 scanline 之上 */
.adv-hero-inner { z-index: 2; }

/* —— 主标题副行调整 —— */
.adv-hero-title .adv-hero-line2 {
  margin-top: 1.2rem !important;
  font-family: var(--font-mono);
  font-size: clamp(0.84rem, 1.5vw, 1.05rem) !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  color: rgba(11, 45, 74, 0.72) !important;
  text-transform: none;
}

/* =========================================================
 * 全站补强：terminal 字体、CTA neon、卡片角标记
 * ========================================================= */

/* 终端字体小细节：所有 .section-label 用等宽字 + chevron */
.section-label {
  font-family: var(--font-mono) !important;
  letter-spacing: 0.16em !important;
}
.section-label::after {
  content: "_";
  margin-left: 0.3rem;
  color: var(--fx-cyan);
  animation: fx-cursor 1s steps(2) infinite;
}
@keyframes fx-cursor {
  50% { opacity: 0; }
}

/* CTA 主按钮霓虹 hover */
.adv-closing-actions .btn-primary {
  position: relative;
  overflow: hidden;
}
.adv-closing-actions .btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(34, 211, 238, 0.5) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 700ms ease;
}
.adv-closing-actions .btn-primary:hover::after {
  transform: translateX(100%);
}

/* 卡片右上角小坐标记 (像 HUD 仪表) */
.adv-pillar-card,
.adv-feature-card {
  position: relative;
}
.adv-pillar-card::after,
.adv-feature-card::after {
  content: attr(data-card-id, "");
  position: absolute;
  top: 14px;
  right: 16px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: rgba(34, 211, 238, 0.55);
  pointer-events: none;
}

/* 指标卡顶部细线 */
.adv-metric-card {
  border-top: 2px solid transparent;
  background-image:
    linear-gradient(160deg, #ffffff 0%, #ecf5ff 100%),
    linear-gradient(90deg, var(--fx-cyan), var(--fx-blue), var(--fx-teal));
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

/* —— Hero CTA 区（如果有的话）增加 hover 光痕 —— */

/* ---------- divider "TotalClaw" 文字描线动画 ---------- */
.adv-divider {
  margin: 2rem 0 0;
  width: 100%;
}
.adv-divider-svg {
  display: block;
  width: 100%;
  height: 140px;
  overflow: visible;
  pointer-events: none;
}
.adv-divider-text {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0.06em;
  /* 静态层默认：直接填充渐变可见；描边动画初始态只在 html.motion 下生效 */
  fill: url(#fx-grad);
  stroke: url(#fx-grad);
  stroke-width: 0.8;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.6));
  paint-order: stroke fill;
  opacity: 0.92;
  transition: opacity 240ms ease;
}
html.motion .adv-divider-text {
  fill: none;
  stroke-width: 1.4;
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
  opacity: 0;
}
.adv-divider.fx-in .adv-divider-text {
  opacity: 1;
  animation: fx-text-draw 1.8s cubic-bezier(.4,.2,.2,1) 0.4s forwards,
             fx-text-fill 600ms ease-out 2.0s forwards;
}
@keyframes fx-text-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes fx-text-fill {
  to {
    fill: url(#fx-grad);
    stroke-width: 0.8;
    filter: drop-shadow(0 0 14px rgba(34, 211, 238, 0.7));
  }
}
@media (prefers-reduced-motion: reduce) {
  .adv-divider-text {
    opacity: 1;
    stroke-dashoffset: 0;
    fill: url(#fx-grad);
  }
}

/* =========================================================
 * 首页 Hero 轮播深度科幻化
 * ========================================================= */

section.hero-carousel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 0;
  /* 仅保留底部柔和投影；移除会在底边画出亮线、造成割裂感的青色内描边 */
  box-shadow: 0 30px 80px rgba(8, 22, 38, 0.45);
}
/* hero-carousel 内层 viewport 浮在装饰之上 */
.hero-carousel-viewport { position: relative; z-index: 2; }

/* 粒子 canvas 强制低层 */
section.hero-carousel > .fx-canvas-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.7;
  mix-blend-mode: screen;
}

/* —— Hero chip 标签（顶部居中） —— */
.hero-carousel-chip {
  position: absolute;
  top: 1.4rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.42rem 1rem 0.42rem 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(8, 18, 33, 0.88);
  border: 1px solid rgba(34, 211, 238, 0.5);
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(34, 211, 238, 0.2), 0 0 24px rgba(34, 211, 238, 0.16);
}
@media (max-width: 720px) {
  .hero-carousel-chip { font-size: 0.62rem; padding: 0.32rem 0.7rem 0.32rem 0.5rem; }
}

/* —— scanline + grain 套用 advantages 同款 —— */
.hero-carousel-scanline {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(34, 211, 238, 0.08) 49.5%,
    rgba(34, 211, 238, 0.14) 50%,
    rgba(34, 211, 238, 0.08) 50.5%,
    transparent 100%
  );
  background-size: 100% 8px;
  mix-blend-mode: screen;
  /* V3：扫描线滚动停掉 */
  opacity: 0.4;
  /* 底缘淡出，避免扫描线在轮播底部形成一条亮白横线 */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
}
.hero-carousel-grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.18;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
  animation: fx-grain-shift 1.6s steps(4) infinite;
}

/* hero-carousel 四角 bracket 用青色 + 提升层级 */
section.hero-carousel .adv-hero-bracket {
  z-index: 5;
  border-color: rgba(34, 211, 238, 0.85);
  width: 64px;
  height: 64px;
  filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.7));
}

/* —— Hero slide 标题 hologram 渐变扫光 —— */
.hero-slide h2 {
  background: linear-gradient(
    100deg,
    #ffffff 0%,
    var(--fx-cyan) 30%,
    #ffffff 50%,
    var(--fx-cyan) 70%,
    #ffffff 100%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* V3：扫光停掉（整站零常驻动效） */
  text-shadow: 0 30px 60px rgba(34, 211, 238, 0.18);
}

/* kicker 改成等宽字 + 终端光标 */
.hero-slide__kicker {
  font-family: var(--font-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.78rem;
}

/* CTA 主按钮：渐变 + neon 扫光 hover */
.hero-slide__btn--primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--fx-cyan) 0%, var(--fx-blue) 50%, var(--fx-teal) 100%) !important;
  box-shadow:
    0 6px 22px rgba(34, 211, 238, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.15) inset !important;
  letter-spacing: 0.06em !important;
  transition: transform 220ms ease, box-shadow 220ms ease !important;
}
.hero-slide__btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 700ms ease;
  pointer-events: none;
}
.hero-slide__btn--primary:hover {
  transform: translateY(-3px) !important;
  box-shadow:
    0 14px 38px rgba(34, 211, 238, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.25) inset !important;
}
.hero-slide__btn--primary:hover::after {
  transform: translateX(100%);
}

/* CTA ghost 按钮：青色描边 + 玻璃 */
.hero-slide__btn--ghost {
  border: 1.5px solid rgba(34, 211, 238, 0.6) !important;
  background: rgba(8, 18, 33, 0.72) !important;
  letter-spacing: 0.06em !important;
  transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease !important;
}
.hero-slide__btn--ghost:hover {
  background: rgba(34, 211, 238, 0.16) !important;
  border-color: rgba(34, 211, 238, 0.9) !important;
  box-shadow: 0 0 18px rgba(34, 211, 238, 0.45);
}

/* —— 轮播指示器换成发光圆点 —— */
.hero-carousel-dots button {
  border: 1px solid rgba(34, 211, 238, 0.5) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

/* 轮播箭头描青边 */
.hero-carousel-arrow {
  border-color: rgba(34, 211, 238, 0.55) !important;
  background: rgba(8, 18, 33, 0.55) !important;
}

/* =========================================================
 * 首页内部区块炫酷化
 * ========================================================= */

/* —— 全站 section h2 hologram 渐变（不覆盖 hero-slide h2） —— */
section.reveal-section > h2,
section.reveal-section > * > h2,
.jd-home-section-title h2 {
  background: linear-gradient(
    100deg,
    #0b2d4a 0%,
    var(--fx-blue) 30%,
    var(--fx-cyan) 50%,
    var(--fx-teal) 70%,
    #0b2d4a 100%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* V3：扫光停掉（整站零常驻动效） */
}
/* 排除：暗背景 section 的 h2 应保持白色，不要被覆盖 */
.home-cta-band h2,
.adv-closing-card h2 {
  background: none !important;
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
  animation: none !important;
}

/* —— 使命/愿景区块 —— */
.home-mission-vision {
  position: relative;
}
/* 轮播 ↔ 使命愿景 的接缝：一道发光青线作为衔接点缀，
   通栏后更像「上下两块由这条线缝合」 */
.home-mission-vision::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(140px, 26vw, 360px);
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--fx-cyan), transparent);
  box-shadow: 0 0 18px var(--fx-cyan);
  z-index: 1;
}
/* V3：旧 .home-mission-card 装饰块与 2px 渐变条 ::after 已删（重做为 .mv-card） */

/* —— "硬核产品能力" band 区 —— */
.home-product-band {
  position: relative;
  /* 通栏铺底：内容由 __inner 居中。
     V3：上方已是浅色行业章节，旧「承接 web4 深色」下沉渐变会在浅底上压出灰黑烟雾，
     连同青色描边/渐变线一并移除，改为干净浅蓝底。 */
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(900px 320px at 0% 50%, rgba(34, 211, 238, 0.05), transparent 60%),
    radial-gradient(900px 320px at 100% 50%, rgba(99, 102, 241, 0.05), transparent 60%),
    linear-gradient(180deg, #f4f8fc 0%, #eef3f9 100%);
}
.home-product-band__inner {
  max-width: var(--max);
  margin: 0 auto;
}
/* V3：产品带上下青色渐变线移除（浅-浅衔接处显脏） */

/* —— fit-teaser 区块 —— */
.fit-teaser .section-label {
  /* 等宽字 + 光标已在全局 .section-label 规则中应用 */
}

/* —— CTA band 改造为深空科技底 —— */
.home-cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 0;
  background:
    radial-gradient(900px 380px at 10% 5%, rgba(12, 110, 208, 0.35), transparent 65%),
    radial-gradient(1000px 400px at 95% 95%, rgba(13, 148, 136, 0.32), transparent 65%),
    linear-gradient(160deg, #0b2d4a 0%, #0c4870 100%) !important;
  box-shadow: 0 32px 80px rgba(8, 18, 33, 0.4), inset 0 0 0 1px rgba(34, 211, 238, 0.2);
}
.home-cta-band > .fx-canvas-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.55;
  mix-blend-mode: screen;
}
.home-cta-band .home-cta-inner {
  position: relative;
  z-index: 2;
}
.home-cta-band .adv-hero-bracket {
  border-color: rgba(34, 211, 238, 0.9);
  filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.7));
  z-index: 3;
}
.home-cta-band h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  letter-spacing: 0.02em;
}
.home-cta-band p.lead {
  position: relative;
  z-index: 2;
}

/* —— Web4 标题 hologram —— */
.home-web4-title {
  background: linear-gradient(
    100deg,
    #0b2d4a 0%,
    var(--fx-blue) 30%,
    var(--fx-cyan) 50%,
    var(--fx-teal) 70%,
    #0b2d4a 100%
  ) !important;
  background-size: 220% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  /* V3：扫光停掉（整站零常驻动效） */
}

/* =========================================================
 * fx-page-hero HUD 装饰内位（与 advantages 同款风格）
 * ========================================================= */
.fx-page-hero {
  position: relative;
  isolation: isolate;
}
.fx-page-hero .adv-hero-bracket {
  z-index: 2;
  width: 34px;
  height: 34px;
  border-color: rgba(34, 211, 238, 0.85);
  filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.7));
}
/* 角标紧贴四角，避免压住正文文字 */
.fx-page-hero .adv-hero-bracket--tl { top: 12px; left: 12px; }
.fx-page-hero .adv-hero-bracket--tr { top: 12px; right: 12px; }
.fx-page-hero .adv-hero-bracket--bl { bottom: 12px; left: 12px; }
.fx-page-hero .adv-hero-bracket--br { bottom: 12px; right: 12px; }
.fx-page-hero .hero-carousel-scanline,
.fx-page-hero .hero-carousel-grain {
  z-index: 0;
}
.fx-page-hero > .fx-canvas-wrap { z-index: 0; opacity: 0.55; }
.fx-page-hero h2 {
  text-shadow: 0 30px 60px rgba(12, 110, 208, 0.15);
}

/* =========================================================
 * 全站卡片 .card 也加 sci-fi 描边 + hover
 * ========================================================= */
.card {
  position: relative;
  isolation: isolate;
}
.card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--fx-edge-angle, 0deg),
    transparent 0%,
    transparent 60%,
    var(--fx-cyan) 72%,
    var(--fx-blue) 84%,
    var(--fx-teal) 96%,
    transparent 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 260ms ease;
  z-index: 3;
  pointer-events: none;
  animation: fx-edge-spin 5.5s linear infinite paused;
}
.card:hover::before {
  opacity: 1;
  animation-play-state: running;
}

/* compare 表格 sci-fi 化 */
.compare {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(11, 45, 74, 0.08), 0 0 0 1px rgba(34, 211, 238, 0.18);
}
.compare thead th {
  background: linear-gradient(180deg, rgba(34, 211, 238, 0.10), rgba(34, 211, 238, 0.04));
  color: var(--nav-blue);
  border-bottom: 1px solid rgba(34, 211, 238, 0.25);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.compare tbody tr:hover td {
  background: rgba(34, 211, 238, 0.04);
}

/* =========================================================
 * 全站 sci-fi 增强
 * ========================================================= */

/* body 底纹：极淡的 grid + 噪点（不影响阅读） */
body {
  position: relative;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(11, 45, 74, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 45, 74, 0.025) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: -1px -1px;
  mask-image: radial-gradient(ellipse at 50% 25%, #000 5%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 25%, #000 5%, transparent 75%);
  opacity: 0.85;
}

/* 全站按钮通用 hover 微光 */
a.btn-primary, a.btn-ghost,
.adv-closing-actions .btn-primary,
.adv-closing-actions .btn-ghost,
.hero-slide__btn--primary,
.hero-slide__btn--ghost {
  position: relative;
  isolation: isolate;
}

/* 链接 hover 渐变下划线（非导航的）*/
.lead a:not([class]),
.muted-list a:not([class]) {
  background: linear-gradient(90deg, var(--fx-cyan), var(--fx-blue)) bottom left / 0 1px no-repeat;
  transition: background-size 280ms ease;
}
.lead a:not([class]):hover,
.muted-list a:not([class]):hover {
  background-size: 100% 1px;
}

/* mega-panel 子菜单 sci-fi 顶部光条（装在 .mega-inner 上，避免覆盖 mega-panel 的 absolute 定位） */
.mega-inner {
  position: relative;
  isolation: isolate;
}
.mega-inner::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--fx-cyan), var(--fx-blue), var(--fx-teal));
  opacity: 0.85;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  pointer-events: none;
  z-index: 2;
}

/* skip 链接 sci-fi */
a.skip {
  background: linear-gradient(135deg, var(--fx-cyan), var(--fx-blue));
  color: #ffffff;
  border-radius: 999px;
}

/* ════════════════════════════════════════════════════════════════════
   2026-06 视觉升级 V2（首页基准） —— 大字号 / 编辑式排版 / mono 装饰
   规则：本层只做视觉加法；任何「先隐藏」初始态仍必须挂 html.motion。
   ════════════════════════════════════════════════════════════════════ */

/* ---------- V2.1 Hero 轮播：标题拉满 + mono kicker ---------- */
.hero-slide h2 {
  font-size: clamp(2.1rem, 5.5vw, 3.85rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.12;
}

/* V2.2 使命愿景旧层（// 代码风标签 + 巨号水印 + 旧 ::after）已删，重做并入基础层 .mv-card */

/* ---------- V2.3 数据指标：mono 巨号渐变数字 ---------- */
.jd-stat {
  text-align: left;
  padding: 1.6rem 1.4rem 1.45rem;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
}

/* ---------- V2.4 六大能力：bento 错格 + mono 序号 ---------- */
.card-grid--six { counter-reset: cap; }
.card-grid--six .card { position: relative; counter-increment: cap; }
.card-grid--six .card::after {
  content: "0" counter(cap);
  position: absolute;
  top: 1.1rem;
  right: 1.2rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(12, 110, 208, 0.45);
}
@media (min-width: 980px) {
  .card-grid.card-grid--six {
    grid-template-columns: repeat(4, 1fr);
  }
  .card-grid--six .card:nth-child(1),
  .card-grid--six .card:nth-child(6) { grid-column: span 2; }
  .card-grid--six .card:nth-child(1) {
    background: linear-gradient(150deg, rgba(12, 110, 208, 0.1) 0%, var(--bg1) 55%);
    border-color: rgba(12, 110, 208, 0.3);
  }
  .card-grid--six .card:nth-child(6) {
    background: linear-gradient(150deg, rgba(13, 148, 136, 0.09) 0%, var(--bg1) 55%);
    border-color: rgba(13, 148, 136, 0.28);
  }
}

/* ---------- V2.5 岗位墙：部门彩条（按文档内卡片顺序分组） ---------- */
.home-role-card { border-top: 3px solid transparent; }
.home-role-grid .home-role-card:nth-child(-n+2)              { border-top-color: #f59e0b; } /* 总裁办·战略 */
.home-role-grid .home-role-card:nth-child(n+3):nth-child(-n+6)  { border-top-color: #10b981; } /* 产品·研发 */
.home-role-grid .home-role-card:nth-child(n+7):nth-child(-n+9)  { border-top-color: #f97316; } /* 市场·运营 */
.home-role-grid .home-role-card:nth-child(n+10):nth-child(-n+12){ border-top-color: #06b6d4; } /* 销售·商务 */
.home-role-grid .home-role-card:nth-child(n+13):nth-child(-n+14){ border-top-color: #8b5cf6; } /* 财务·合规 */
.home-role-grid .home-role-card:nth-child(15)                { border-top-color: #ec4899; } /* 数据·智能 */
.home-role-card__dept {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
}

/* ---------- V2.6 CTA 收尾：超大标题 ---------- */
.home-cta-inner h2 {
  font-size: clamp(2rem, 5.2vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* ════════════════════════════════════════════════════════════════════
   2026-06 V3 —— 苹果式重做：全屏静态 hero（轮播退役）+ 故事章节 + 紧凑节奏
   动效原则：一次性慢入场（power2.out ≥0.8s）、滚动联动、无循环小动作。
   ════════════════════════════════════════════════════════════════════ */

/* ---------- V3.1 Hero：全屏深空大字 ---------- */
.hv3 {
  position: relative;
  max-width: none;
  margin: 0;
  padding: clamp(5.5rem, 12vh, 8rem) var(--space) clamp(2.5rem, 6vh, 4rem);
  min-height: min(92svh, 56rem);
  display: flex;
  align-items: center;
  border: none !important;
  overflow: hidden;
  background:
    radial-gradient(ellipse 90% 60% at 70% 12%, rgba(12, 110, 208, 0.28), transparent 55%),
    radial-gradient(ellipse 70% 55% at 18% 80%, rgba(13, 148, 136, 0.16), transparent 58%),
    linear-gradient(180deg, #050d18 0%, #081826 46%, #0a2236 78%, #081826 100%);
  color: #fff;
}
/* 细网格质感（静态，不动） */
.hv3::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(125, 211, 252, 0.05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(125, 211, 252, 0.04) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 85% 75% at 50% 40%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 40%, #000 30%, transparent 78%);
  pointer-events: none;
}
.hv3-glow {
  position: absolute;
  right: -12%;
  top: -18%;
  width: 58vw;
  height: 58vw;
  max-width: 56rem;
  max-height: 56rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.16) 0%, rgba(59, 130, 246, 0.1) 38%, transparent 68%);
  filter: blur(18px);
  pointer-events: none;
}
.hv3-inner {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
}
.hv3-kicker {
  display: inline-block;
  margin: 0 0 1.1rem;
  padding: 0.38rem 0.95rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: rgba(125, 211, 252, 0.95);
  border: 1px solid rgba(34, 211, 238, 0.32);
  border-radius: var(--radius-full);
  background: rgba(8, 47, 73, 0.45);
}
.hv3-title {
  margin: 0 0 1.4rem;
  font-family: var(--font-display);
  /* 上限按 hero 左栏宽度（≈640px）收敛，配合渐变行字号下调保证其单行不溢出/不被吉祥物遮挡 */
  font-size: clamp(1.7rem, 4.4vw, 3.4rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
}
.hv3-line { display: block; }
/* 第一行「AI 员工军团」作引子，比主标题小一档 */
.hv3-line--lead { font-size: 0.62em; opacity: 0.92; margin-bottom: 0.15em; }
/* 渐变行「创员工，建团队，拓业务，促经营」字数偏多，较主标题略收一档以保持单行不溢出；窄屏放开换行 */
.hv3-line--grad { white-space: nowrap; font-size: 0.78em; }
.hv3-line--grad {
  background: linear-gradient(95deg, #7dd3fc 0%, #3b82f6 45%, #2dd4bf 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .hv3-line--grad { color: #7dd3fc; -webkit-text-fill-color: #7dd3fc; }
}
.hv3-lead {
  max-width: 38em;
  margin: 0 0 0.5rem;
  font-size: clamp(1rem, 1.9vw, 1.2rem);
  line-height: 1.7;
  color: rgba(226, 240, 252, 0.88);
}
.hv3-lead strong { color: #fff; font-weight: 600; }
.hv3-sub {
  margin: 0 0 1.75rem;
  font-size: clamp(0.92rem, 1.6vw, 1.02rem);
  color: rgba(165, 200, 228, 0.75);
}
.hv3-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
  margin-bottom: clamp(2rem, 5vh, 3.25rem);
}
/* 数字条：横排 mono，细分隔线 */
.hv3-ticker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0;
  margin: 0;
  padding: 1.1rem 0 0;
  list-style: none;
  border-top: 1px solid rgba(125, 211, 252, 0.16);
}
.hv3-ticker li {
  padding: 0.35rem 1.25rem 0.35rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}
.hv3-ticker li + li {
  border-left: 1px solid rgba(125, 211, 252, 0.12);
  padding-left: 1.25rem;
}
.hv3-ticker strong {
  font-family: var(--font-mono);
  font-size: clamp(1.45rem, 2.7vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #7dd3fc;
}
.hv3-ticker span {
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: rgba(165, 200, 228, 0.7);
}
@media (max-width: 640px) {
  .hv3 { min-height: auto; padding-top: 4.75rem; }
  /* 窄屏放开渐变行换行，避免 15 字单行在小屏横向溢出 */
  .hv3-line--grad { white-space: normal; }
  .hv3-ticker { grid-template-columns: repeat(2, 1fr); }
  .hv3-ticker li:nth-child(odd) { border-left: none; padding-left: 0; }
  .hv3-ticker li { border-top: none; }
}
/* hero 后第一个区块免顶线 */
.hv3 + section { border-top: none !important; }

/* ---------- V3.2 行业故事章节 ---------- */
.hstory-inner { max-width: 56rem; }
.hstory-title {
  font-size: clamp(1.9rem, 4.6vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  margin: 0.35rem 0 0.8rem;
}
.hstory-lead { margin-bottom: 1.1rem; }
.hstory-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0 0 1.4rem;
  padding: 0;
  list-style: none;
}
.hstory-chips li {
  padding: 0.42rem 1rem;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--nav-blue);
  background: var(--bg1);
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
}
.hstory-chips__more { border-style: dashed; }
.hstory-chips__more a { color: var(--accent); text-decoration: none; font-weight: 600; }
.hstory-actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; }
/* 浅底上的 ghost 按钮转深色描边 */
.hstory-btn-ghost {
  border-color: rgba(11, 45, 74, 0.35) !important;
  color: var(--nav-blue) !important;
  background: transparent !important;
}
.hstory-btn-ghost:hover { background: rgba(11, 45, 74, 0.06) !important; }

/* ---------- V3.3 安全合规带 ---------- */
.hsecure {
  max-width: none;
  margin: 0;
  padding: clamp(2.25rem, 5.5vw, 3.5rem) var(--space);
  background:
    radial-gradient(ellipse 75% 70% at 85% 20%, rgba(13, 148, 136, 0.14), transparent 55%),
    linear-gradient(135deg, #081826 0%, #0a2236 55%, #0b2d4a 100%);
  color: #fff;
  border-top: none !important;
}
.hsecure-inner { max-width: var(--max); margin: 0 auto; }
.hsecure-label { color: #5eead4 !important; }
.hsecure-label::before { background: #5eead4 !important; }
.hsecure-title {
  color: #fff;
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0.3rem 0 0.7rem;
}
.hsecure-lead { color: rgba(226, 240, 252, 0.82); margin-bottom: 1.3rem; }
.hsecure-ticks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hsecure-ticks li {
  position: relative;
  padding: 0.85rem 1rem 0.85rem 2.35rem;
  font-size: 0.92rem;
  font-weight: 500;
  color: rgba(240, 250, 255, 0.92);
  background: rgba(125, 211, 252, 0.06);
  border: 1px solid rgba(125, 211, 252, 0.16);
  border-radius: var(--radius);
}
.hsecure-ticks li::before {
  content: "✓";
  position: absolute;
  left: 0.95rem;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  color: #2dd4bf;
}

/* ---------- V3.4 全局节奏微调 ---------- */
.card-grid { gap: 1rem; }
.jd-home-section-title + * { margin-top: 1.5rem; }

/* ---------- V3.5 科技感动效（全部挂 html.motion，reduced-motion 自动豁免） ---------- */
/* hero 渐变行：极慢呼吸漂移（8s 级，苹果 Hello 式） */
@media (prefers-reduced-motion: no-preference) {
  html.motion .hv3-line--grad {
    background-size: 220% 100%;
    animation: hv3GradDrift 9s ease-in-out infinite alternate;
  }
}
@keyframes hv3GradDrift {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}
/* 计数完成：一次性辉光衰减 */
@media (prefers-reduced-motion: no-preference) {
  html.motion .fx-count-done {
    animation: fxCountGlow 1.4s ease-out 1;
  }
}
@keyframes fxCountGlow {
  0%   { text-shadow: 0 0 22px rgba(125, 211, 252, 0.85); }
  100% { text-shadow: 0 0 0 rgba(125, 211, 252, 0); }
}

/* ---------- V3.6 内页迷你 hero（.phero）：与 hv3 同族的深空大字页头 ---------- */
.phero {
  position: relative;
  max-width: none;
  margin: 0;
  padding: clamp(4.75rem, 10vh, 6.5rem) var(--space) clamp(2.25rem, 5vh, 3.25rem);
  border: none !important;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(ellipse 80% 60% at 75% 0%, rgba(12, 110, 208, 0.26), transparent 55%),
    radial-gradient(ellipse 60% 50% at 12% 100%, rgba(13, 148, 136, 0.14), transparent 58%),
    linear-gradient(180deg, #050d18 0%, #081826 52%, #0a2236 100%);
}
.phero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(125, 211, 252, 0.05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(125, 211, 252, 0.04) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 85% 80% at 50% 30%, #000 25%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 85% 80% at 50% 30%, #000 25%, transparent 78%);
  pointer-events: none;
}
.phero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin: 0 auto;
}
.phero .section-label {
  font-family: var(--font-mono);
  letter-spacing: 0.22em;
  color: #7dd3fc;
}
.phero .section-label::before { background: #22d3ee; }

@media (min-width: 901px) and (max-width: 1360px) {
  .brand-block .brand-cn { display: none; }
}
/* 英文 / 阿语的品牌副标题与导航标签都比中文长一截（Model Guide vs 模型推荐、
   الحلول vs 解决方案）。注意 .nav-inner 被 --max(76rem≈1216px) 卡死宽度，
   **再宽的屏也不会给导航更多空间**，所以这里不能按视口宽度做断点——中文放得下、
   英/阿放不下是恒定的，副标题会直接压到 Home / Product 上（已复现）。
   副标题纯装饰，logo + TotalClaw 字标已经承载品牌，非中文语言一律不显示。 */
html:not([lang="zh-CN"]) .brand-block .brand-cn { display: none; }
@media (min-width: 1024px) {
  .nav-links > li > a,
  .nav-dropdown-trigger { white-space: nowrap; }
}

/* 窄桌面 / 横屏平板：桌面导航在 769–1100px 会挤成两行，部分浏览器缩放后
   还会与品牌文案重叠。该区间统一切换为轻量汉堡菜单。 */
@media screen and (min-width: 769px) and (max-width: 1100px) {
  .nav-inner {
    flex-wrap: nowrap;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
  }
  .brand-block {
    min-width: 0;
    max-width: calc(100% - 3.5rem);
  }
  .brand-block .brand-cn { display: none; }
  .site-nav-main {
    flex: 0 0 auto;
    min-width: auto;
  }
  .mobile-menu-btn {
    display: flex !important;
    flex: 0 0 auto;
  }
  .nav-download { display: none !important; }
  .nav-links {
    display: none;
    position: fixed;
    top: 66px;
    left: 0;
    right: 0;
    z-index: 70;
    max-height: calc(100vh - 66px);
    overflow-y: auto;
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 1.25rem 1rem;
    box-shadow: 0 18px 36px rgba(11, 45, 74, 0.18);
    border-top: 1px solid var(--line);
  }
  .nav-links.active { display: flex; }
  .nav-links > li,
  .nav-dropdown { width: 100%; }
  .nav-links > li > a:not(.nav-dropdown-trigger),
  .nav-dropdown-trigger {
    width: 100%;
    justify-content: space-between;
    padding: 0.85rem 0;
    border-radius: 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  }
  .nav-links.active > li > a,
  .nav-links.active .nav-dropdown-trigger,
  .site-header-wrap.is-stuck .nav-links.active > li > a,
  .site-header-wrap.is-stuck .nav-links.active .nav-dropdown-trigger {
    color: var(--text) !important;
  }
  .nav-links.active > li > a[aria-current="page"],
  .site-header-wrap.is-stuck .nav-links.active > li > a[aria-current="page"] {
    color: var(--accent-dark) !important;
  }
  .nav-links.active > li > a::after,
  .nav-links.active .nav-dropdown-trigger::after,
  .mega-panel,
  .nav-dropdown:hover .mega-panel,
  .nav-dropdown:focus-within .mega-panel {
    display: none !important;
  }
}

/* ===================== 首页模块间下载分隔带 ===================== */
.module-download {
  position: relative;
  max-width: min(var(--max), calc(100% - 2 * var(--space)));
  min-height: 88px;
  margin: clamp(0.3rem, 1.2vw, 0.8rem) auto;
  padding: 0.9rem clamp(1rem, 3vw, 2rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.4rem, 4vw, 4rem);
  overflow: hidden;
  color: #dbeafe;
  background:
    radial-gradient(circle at 15% 0%, rgba(34, 211, 238, 0.2), transparent 32%),
    linear-gradient(105deg, #071c31 0%, #0b2d4a 56%, #0b3b62 100%);
  border: 1px solid rgba(96, 165, 250, 0.22);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(8, 35, 59, 0.16);
  isolation: isolate;
}
.module-download::before,
.module-download::after {
  content: "";
  position: absolute;
  width: 140px;
  height: 1px;
  top: 50%;
  background: linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.5));
}
.module-download::before { left: 0; }
.module-download::after { right: 0; transform: rotate(180deg); }
.module-download__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.module-download__copy span {
  color: #67e8f9;
  font: 600 0.68rem/1.2 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.module-download__copy strong {
  margin-top: 0.34rem;
  color: #fff;
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  letter-spacing: -0.01em;
}
.module-download__btn {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.48rem;
  min-width: 190px;
  padding: 0.7rem 1rem;
  color: #fff !important;
  background: linear-gradient(135deg, #0c6ed0, #1284eb);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 22px rgba(12, 110, 208, 0.34);
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none !important;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), background 0.2s var(--ease-out);
}
.module-download__btn:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #1681e9, #2799f5);
  box-shadow: 0 12px 28px rgba(12, 110, 208, 0.45);
}
.module-download__btn small {
  margin-left: auto;
  color: #bfdbfe;
  font-size: 0.65rem;
  font-weight: 500;
}
.module-download__icon {
  display: grid;
  width: 1.5rem;
  height: 1.5rem;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  font-family: var(--font-mono);
}
.module-download--dark { background: linear-gradient(105deg, #061622, #082740 58%, #0d3656); }
.module-download--light {
  color: var(--text);
  background:
    radial-gradient(circle at 15% 0%, rgba(14, 165, 233, 0.12), transparent 35%),
    linear-gradient(105deg, rgba(255, 255, 255, 0.96), rgba(239, 246, 255, 0.94));
  border-color: rgba(12, 110, 208, 0.18);
  box-shadow: 0 10px 28px rgba(30, 64, 175, 0.08);
}
.module-download--light::before,
.module-download--light::after {
  background: linear-gradient(90deg, transparent, rgba(12, 110, 208, 0.28));
}
.module-download--light .module-download__copy span { color: var(--accent-dark); }
.module-download--light .module-download__copy strong { color: var(--nav-blue); }
.module-download--compact {
  max-width: var(--max);
  min-height: 0;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 2.5rem);
  margin-block: clamp(0.4rem, 1.2vw, 0.9rem);
  padding: 1.25rem var(--space);
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.module-download--compact::before,
.module-download--compact::after {
  display: none;
}
.module-download--compact .module-download__copy span {
  color: var(--accent-dark);
}
.module-download--compact .module-download__copy strong {
  color: var(--nav-blue);
}
.module-download--compact .module-download__btn {
  min-width: 176px;
}
.module-download--trial .module-download__btn {
  background: linear-gradient(135deg, #0d9488, #0f766e);
  box-shadow: 0 8px 22px rgba(13, 148, 136, 0.24);
}
.module-download--trial .module-download__btn:hover {
  background: linear-gradient(135deg, #14a89a, #0d9488);
  box-shadow: 0 12px 28px rgba(13, 148, 136, 0.32);
}

.hv3-download {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
}
.hv3-download small {
  padding-left: 0.75rem;
  color: rgba(255, 255, 255, 0.76);
  border-left: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 0.66rem;
  font-weight: 500;
}

/* ===================== 模型推荐页 ===================== */
.model-hero {
  max-width: none;
  min-height: min(760px, calc(100vh - 78px));
  display: flex;
  align-items: center;
  background:
    radial-gradient(circle at 78% 28%, rgba(14, 165, 233, 0.18), transparent 27%),
    radial-gradient(circle at 18% 0%, rgba(37, 99, 235, 0.17), transparent 32%),
    linear-gradient(150deg, #061625 0%, #0a2741 58%, #0b3354 100%);
  color: #fff;
}
.model-hero__inner {
  width: min(var(--max), 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
}
.model-hero .section-label { color: #67e8f9; }
.model-hero__copy h1 {
  margin: 0.8rem 0 1.15rem;
  color: #fff;
  font-size: clamp(2.6rem, 5.7vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -0.055em;
}
.model-hero__copy h1 span {
  color: transparent;
  background: linear-gradient(95deg, #60a5fa, #67e8f9 60%, #a7f3d0);
  -webkit-background-clip: text;
  background-clip: text;
}
.model-hero__lead {
  max-width: 48rem;
  margin: 0;
  color: #cbd5e1;
  font-size: clamp(1rem, 1.5vw, 1.14rem);
}
.model-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.55rem; }
.model-hero__facts {
  display: flex;
  gap: clamp(1rem, 3vw, 2.4rem);
  margin: 2rem 0 0;
  padding: 1.15rem 0 0;
  border-top: 1px solid rgba(148, 163, 184, 0.2);
  list-style: none;
}
.model-hero__facts li { display: flex; flex-direction: column; }
.model-hero__facts strong { color: #fff; font: 700 1rem/1.2 var(--font-mono); }
.model-hero__facts span { color: #94a3b8; font-size: 0.75rem; }
.model-hero__panel {
  padding: clamp(1.4rem, 3vw, 2rem);
  background: rgba(7, 28, 49, 0.94);
  border: 1px solid rgba(103, 232, 249, 0.18);
  border-radius: var(--radius-xl);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.3);
}
.model-hero__panel-label {
  margin: 0 0 1rem;
  color: #67e8f9;
  font: 700 0.72rem/1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.model-hero__steps { margin: 0; padding: 0; list-style: none; }
.model-hero__steps li { display: grid; grid-template-columns: 2.1rem 1fr; gap: 0.85rem; padding: 0.9rem 0; border-top: 1px solid rgba(148, 163, 184, 0.14); }
.model-hero__steps li > span { color: #38bdf8; font: 600 0.72rem/1.6 var(--font-mono); }
.model-hero__steps strong { color: #fff; font-size: 0.94rem; }
.model-hero__steps p { margin: 0.15rem 0 0; color: #94a3b8; font-size: 0.8rem; }
.model-hero__download {
  margin-top: 1rem;
  padding: 0.82rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: rgba(12, 110, 208, 0.14);
  border: 1px solid rgba(96, 165, 250, 0.25);
  border-radius: var(--radius);
}
.model-hero__download-copy { display: flex; flex-direction: column; }
.model-hero__download-copy small { color: #94a3b8; font: 500 0.65rem/1.4 var(--font-mono); }
.model-hero__download-copy strong { color: #fff; font-size: 0.84rem; }
.model-hero__download-action { display: flex; align-items: center; gap: 0.35rem; color: #67e8f9; font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
.model-hero__download-action:hover { color: #fff; text-decoration: none; }

.model-scenarios,
.model-picker,
.model-routing { padding-top: clamp(3.5rem, 7vw, 6rem); padding-bottom: clamp(3.5rem, 7vw, 6rem); }
.model-scenario-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}
.model-scenario-card {
  position: relative;
  min-height: 210px;
  padding: 1.35rem;
  display: flex;
  flex-direction: column;
  color: var(--text);
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.model-scenario-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, #0c6ed0, #22d3ee, transparent 78%);
  opacity: 0.72;
}
.model-scenario-card::after { content: "→"; position: absolute; right: 1.25rem; bottom: 1.2rem; color: var(--accent); font: 700 1.1rem/1 var(--font-mono); }
.model-scenario-card:hover { transform: translateY(-4px); border-color: rgba(12, 110, 208, 0.35); box-shadow: var(--shadow-md); text-decoration: none; }
.model-scenario-card__glyph {
  position: absolute;
  top: 1.05rem;
  right: 1.05rem;
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  color: #075985;
  background: linear-gradient(135deg, #e0f2fe, #dbeafe);
  border: 1px solid rgba(12, 110, 208, 0.13);
  border-radius: 0.85rem;
  font: 800 0.9rem/1 var(--font-mono);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.model-scenario-card:nth-child(2) .model-scenario-card__glyph { color: #4338ca; background: linear-gradient(135deg, #eef2ff, #e0e7ff); }
.model-scenario-card:nth-child(3) .model-scenario-card__glyph { color: #9a3412; background: linear-gradient(135deg, #fff7ed, #ffedd5); }
.model-scenario-card:nth-child(4) .model-scenario-card__glyph { color: #047857; background: linear-gradient(135deg, #ecfdf5, #ccfbf1); }
.model-scenario-card:nth-child(5) .model-scenario-card__glyph { color: #7e22ce; background: linear-gradient(135deg, #faf5ff, #f3e8ff); }
.model-scenario-card:nth-child(6) .model-scenario-card__glyph { color: #be123c; background: linear-gradient(135deg, #fff1f2, #ffe4e6); }
.model-scenario-card__no { color: var(--accent); font: 600 0.68rem/1 var(--font-mono); }
.model-scenario-card strong { margin-top: 1rem; font-size: 1.05rem; }
.model-scenario-card p { margin: 0.45rem 0 1rem; color: var(--muted); font-size: 0.84rem; }
.model-scenario-card em { margin-top: auto; color: var(--accent-dark); font: 600 0.76rem/1.3 var(--font-mono); font-style: normal; }

.model-picker__head { display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
.model-picker__head h2 { margin: 0.2rem 0 0; }
.model-picker__head > p { max-width: 32rem; margin: 0; color: var(--muted); font-size: 0.86rem; }
.model-filter { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 2rem; }
.model-filter button {
  padding: 0.58rem 0.95rem;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  font: 600 0.78rem/1 var(--font-body);
  cursor: pointer;
  transition: 0.2s var(--ease-out);
}
.model-filter button:hover { color: var(--accent); border-color: rgba(12, 110, 208, 0.35); }
.model-filter button.is-active { color: #fff; background: var(--accent); border-color: var(--accent); box-shadow: 0 6px 18px rgba(12, 110, 208, 0.24); }
.model-filter__result { margin: 1rem 0 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--muted); font-size: 0.78rem; }
.model-filter__result strong { color: var(--accent); font-family: var(--font-mono); }
.model-filter__result small { color: var(--faint); font-size: 0.68rem; }
.model-card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.15rem; margin-top: 1rem; }
.model-card {
  position: relative;
  overflow: hidden;
  padding: clamp(1.2rem, 2.5vw, 1.65rem);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.9));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.model-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, rgba(12, 110, 208, 0.85), rgba(34, 211, 238, 0.68), transparent 74%);
  opacity: 0.55;
}
.model-card:hover { transform: translateY(-3px); border-color: rgba(12, 110, 208, 0.24); box-shadow: 0 18px 44px rgba(15, 23, 42, 0.1); }
.model-card[hidden] { display: none !important; }
.model-card--featured { background: linear-gradient(155deg, #fff, #eef7ff); border-color: rgba(12, 110, 208, 0.38); box-shadow: 0 15px 40px rgba(12, 110, 208, 0.1); }
.model-card__top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.model-provider { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--faint); font: 600 0.65rem/1 var(--font-mono); letter-spacing: 0.07em; text-transform: uppercase; }
.model-provider::before { content: ""; width: 0.48rem; height: 0.48rem; border-radius: 50%; background: linear-gradient(135deg, var(--accent), #22d3ee); box-shadow: 0 0 0 3px rgba(12, 110, 208, 0.08); }
.model-badge { padding: 0.3rem 0.55rem; color: #075985; background: #e0f2fe; border-radius: var(--radius-full); font-size: 0.65rem; font-weight: 700; }
.model-badge--quality { color: #7c2d12; background: #ffedd5; }
.model-badge--balanced { color: #115e59; background: #ccfbf1; }
.model-badge--code { color: #4338ca; background: #e0e7ff; }
.model-badge--speed { color: #166534; background: #dcfce7; }
.model-badge--value { color: #9f1239; background: #ffe4e6; }
.model-badge--local { color: #6b21a8; background: #f3e8ff; }
.model-card h3 { margin: 1rem 0 0.2rem; font-size: 1.3rem; }
.model-card code { color: var(--accent-dark); font: 500 0.7rem/1.4 var(--font-mono); }
.model-card > p:not(.model-card__tip) { margin: 0.8rem 0; color: var(--muted); font-size: 0.88rem; }
.model-card ul { margin: 0.7rem 0 1.1rem; padding-left: 1.1rem; color: var(--text); font-size: 0.82rem; }
.model-card li::marker { color: var(--accent); }
.model-card__meters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.65rem; }
.model-card__meters span { display: flex; flex-direction: column; gap: 0.32rem; color: var(--faint); font-size: 0.65rem; }
.model-card__meters i { position: relative; display: block; height: 4px; overflow: hidden; background: #dbe3ec; border-radius: 99px; }
.model-card__meters i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--meter); background: linear-gradient(90deg, var(--accent), #22d3ee); border-radius: inherit; }
.model-card__tip { margin: 1rem 0 0; padding-top: 0.85rem; color: var(--muted); border-top: 1px solid var(--line); font-size: 0.78rem; }
.model-card__tip strong { color: var(--text); }

.model-routing { max-width: none; background: #071c31; color: #fff; }
.model-routing > * { width: min(var(--max), 100%); margin-left: auto; margin-right: auto; }
.model-routing .section-label { color: #67e8f9; }
.model-routing h2 { color: #fff; }
.model-routing .lead { color: #94a3b8; }
.model-routing__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; counter-reset: model-route; }
.model-routing__grid article { position: relative; overflow: hidden; padding: 1.4rem; background: linear-gradient(145deg, rgba(15, 46, 75, 0.88), rgba(9, 35, 59, 0.86)); border: 1px solid rgba(96, 165, 250, 0.16); border-radius: var(--radius-lg); counter-increment: model-route; }
.model-routing__grid article::after { content: "0" counter(model-route); position: absolute; right: 1rem; top: 0.65rem; color: rgba(103, 232, 249, 0.12); font: 800 3.2rem/1 var(--font-mono); }
.model-routing__grid span { color: #67e8f9; font: 600 0.68rem/1 var(--font-mono); }
.model-routing__grid h3 { margin: 0.85rem 0 0.55rem; color: #fff; font-size: 1rem; }
.model-routing__grid p { margin: 0; color: #94a3b8; font-size: 0.82rem; }
.model-routing__note { margin-top: 1rem; padding: 1rem 1.2rem; color: #cbd5e1; background: rgba(251, 191, 36, 0.07); border: 1px solid rgba(251, 191, 36, 0.18); border-radius: var(--radius); font-size: 0.82rem; }
.model-routing__note strong { color: #fcd34d; }

.model-final-cta {
  margin-top: clamp(1.5rem, 4vw, 3rem);
  margin-bottom: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(2rem, 5vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  background:
    radial-gradient(circle at 95% 0%, rgba(34, 211, 238, 0.12), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(239, 246, 255, 0.92));
  border: 1px solid rgba(12, 110, 208, 0.18);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}
.model-final-cta h2 { margin: 0.35rem 0; }
.model-final-cta p { max-width: 46rem; margin: 0; color: var(--muted); }
.model-final-cta__actions { display: flex; flex: 0 0 auto; gap: 0.65rem; }

@media (max-width: 1020px) {
  .model-hero__inner { grid-template-columns: 1fr; }
  .model-hero__panel { max-width: 42rem; }
  .model-scenario-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .module-download { display: none; }
  .hv3-download,
  .home-cta-actions [data-dl-primary] { display: none; }
  .model-hero__download { display: none; }
  .model-final-cta__actions [data-dl-primary] { display: none; }
}
@media (max-width: 700px) {
  .model-hero { min-height: auto; padding-top: 3.25rem; padding-bottom: 3.25rem; }
  .model-hero__copy h1 { font-size: clamp(2.25rem, 11vw, 3.4rem); }
  .model-hero__facts { flex-direction: column; gap: 0.75rem; }
  .model-scenario-grid,
  .model-card-grid,
  .model-routing__grid { grid-template-columns: 1fr; }
  .model-picker__head,
  .model-final-cta { align-items: flex-start; flex-direction: column; }
  .model-filter { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.35rem; scrollbar-width: none; }
  .model-filter::-webkit-scrollbar { display: none; }
  .model-filter button { flex: 0 0 auto; }
  .model-final-cta__actions { width: 100%; }
  .model-filter__result { align-items: flex-start; flex-direction: column; gap: 0.2rem; }
}
.phero h2 {
  margin: 0.4rem 0 1rem;
  font-size: clamp(2.1rem, 5.5vw, 3.7rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: #fff;
}
.phero .lead {
  max-width: 46em;
  color: rgba(226, 240, 252, 0.88);
}
.phero .lead strong { color: #fff; }
.phero .lead a { color: #7dd3fc; }
.phero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
  margin-top: 1.5rem;
}
.phero + section { border-top: none !important; }

/* ---------- V3.7 防 FOUC：above-fold 编排元素 CSS 预隐藏（首帧前生效） ----------
   没有这层，真实网络下会「先可见 → deferred GSAP 把它闪没 → 重播入场」。
   由 GSAP fromTo/set 显式点亮；SplitText 缺席或任何失败路径都会兜底恢复可见。 */
/* 枚举制：只隐藏入场时间线会逐个点亮的元素（与 home.html tcMotionPage 一一对应）。
   不用 .hv3-inner > * 全量隐藏——新增子元素时它会静默隐形且无报错。 */
html.motion .hv3-kicker,
html.motion .hv3-title,
html.motion .hv3-lead,
html.motion .hv3-sub,
html.motion .hv3-actions,
html.motion .hv3-mascot,
html.motion .hv3-props li,
html.motion .hv3-ticker { opacity: 0; }
html.motion [data-fx-split] { opacity: 0; }

/* ---------- V3.8 Hero 双栏：右栏吉祥物 + 原轮播价值主张回首屏 ---------- */
@media (min-width: 981px) {
  .hv3-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    grid-template-areas: "main side" "ticker ticker";
    column-gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
  }
  .hv3-main { grid-area: main; }
  .hv3-side { grid-area: side; }
  .hv3-ticker { grid-area: ticker; }
  .hv3-actions { margin-bottom: 0; }
  .hv3-ticker { margin-top: clamp(1.75rem, 4vh, 2.75rem); }
}
.hv3-side {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  min-width: 0;
}
.hv3-mascot {
  display: block;
  width: auto;
  height: clamp(180px, 30vh, 300px);
  filter: drop-shadow(0 22px 44px rgba(34, 211, 238, 0.18));
  user-select: none;
  -webkit-user-drag: none;
}
.hv3-props {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  width: 100%;
  max-width: 30rem;
}
.hv3-props a {
  position: relative;
  display: block;
  padding: 0.62rem 2.1rem 0.62rem 0.95rem;
  border: 1px solid rgba(125, 211, 252, 0.18);
  border-radius: var(--radius);
  background: rgba(8, 47, 73, 0.38);
  text-decoration: none;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s var(--ease-out);
}
.hv3-props a::after {
  content: "›";
  position: absolute;
  right: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.1rem;
  color: rgba(125, 211, 252, 0.65);
  transition: transform 0.25s var(--ease-out), color 0.25s ease;
}
.hv3-props a:hover {
  border-color: rgba(34, 211, 238, 0.45);
  background: rgba(8, 47, 73, 0.6);
  transform: translateX(3px);
}
.hv3-props a:hover::after { color: #22d3ee; transform: translateY(-50%) translateX(2px); }
.hv3-props strong {
  display: block;
  font-size: 0.94rem;
  font-weight: 700;
  color: #f0f9ff;
  line-height: 1.4;
}
.hv3-props span {
  display: block;
  margin-top: 0.12rem;
  font-size: 0.74rem;
  color: rgba(165, 200, 228, 0.72);
  line-height: 1.5;
}
@media (max-width: 980px) {
  .hv3-side { margin: 1.5rem 0 0.25rem; }
  .hv3-mascot { height: clamp(140px, 22vh, 200px); }
  .hv3-ticker { margin-top: 1.25rem; }
}
@media (max-width: 640px) {
  /* 移动端：吉祥物收小居右上角化为点缀，三卡保留（内容优先） */
  .hv3-side { flex-direction: column; }
  .hv3-mascot { height: 120px; align-self: flex-end; margin-top: -0.5rem; }
}

/* ---------- Header 品牌：logo 下加「泰途AI」字标（2026-06 用户要求） ---------- */
.brand-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
/* 总高保持 ~62px：logo 让出空间给字标，header 高度不变。
   logo 原图底部 ~22% 烧着「泰途AI」字样，缩小后糊成色块——用 object-fit 裁掉，
   文字由下方 .brand-mark-text 以系统字体清晰呈现。 */
.brand-block .brand-logo {
  height: 46px;
  width: calc(46px * 892 / 810);
  object-fit: cover;
  object-position: top;
}
.brand-mark-text {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  line-height: 1;
  color: #0b2d4a;
  white-space: nowrap;
}
.site-header-wrap.is-stuck .brand-mark-text { color: rgba(255, 255, 255, 0.94); }
@media (max-width: 820px) {
  .brand-block .brand-logo { height: 28px; width: calc(28px * 892 / 810); }
  .brand-mark-text { font-size: 0.52rem; letter-spacing: 0.14em; }
}

/* ---------- 服务与生态：4 列卡片 + 立即联系条 ---------- */
.card-grid.card-grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1100px) {
  .card-grid.card-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .card-grid.card-grid--four { grid-template-columns: 1fr; }
}
.svc-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-top: clamp(1.5rem, 3.5vw, 2.25rem);
  padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.4rem, 3vw, 2rem);
  border: 1px solid rgba(12, 110, 208, 0.22);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(ellipse 60% 120% at 0% 50%, rgba(12, 110, 208, 0.08), transparent 60%),
    linear-gradient(135deg, rgba(12, 110, 208, 0.06), rgba(13, 148, 136, 0.05));
}
.svc-contact__text {
  margin: 0;
  font-size: clamp(1rem, 2vw, 1.18rem);
  font-weight: 600;
  color: var(--nav-blue);
}
.svc-contact__text strong { color: var(--accent-dark); }
.svc-contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
/* 浅底上的 ghost 按钮：深色描边版（覆盖默认白字版） */
.svc-contact__cs {
  border: 1px solid rgba(12, 110, 208, 0.5) !important;
  color: var(--accent-dark) !important;
  background: #fff !important;
  cursor: pointer;
}
.svc-contact__cs:hover {
  background: rgba(12, 110, 208, 0.08) !important;
  border-color: var(--accent) !important;
}
@media (max-width: 600px) {
  .svc-contact { flex-direction: column; align-items: stretch; text-align: center; }
  .svc-contact__actions { justify-content: center; }
}