/* ============================================================
   CHIPREAL · Minimal Design System
   UI Designer (像素君) — 极简 · 留白 · 排版主导 · 单一科技紫
   保留：科技紫主色 + 全部 section 内容 + 白/灰交替
   去掉：HUD 角标 / 电路网格 / 晶圆节点 / 虚线箭头 / 卡片阴影堆叠
   ============================================================ */

/* 字体源改为中国可达官方镜像（fonts.googleapis.cn → 返回指向 fonts.gstatic.cn 的 @font-face），
   规避 GFW 导致品牌字体（Space Grotesk / IBM Plex Sans / JetBrains Mono）在大陆不显示。
   注：沙箱无外网出口无法打包 woff2 真自托管；如需字体文件落本服务器，部署阶段由 dev 服务器拉取（见部署清单可选步骤）。 */
@import url('https://fonts.googleapis.cn/css2?family=Space+Grotesk:wght@300;400;500;600&family=IBM+Plex+Sans:wght@300;400;500&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+SC:wght@200;300;400;500&display=swap');

:root {
  /* 单一科技紫强调色（保留品牌主色） */
  --accent:        oklch(54% 0.15 286);
  --accent-soft:   oklch(95% 0.04 286);
  --accent-line:   oklch(89% 0.05 286);

  /* 冷调近白纸面 + 墨色文字 */
  --paper:    oklch(98.6% 0.003 256);
  --surface:  oklch(100% 0 0);
  --surface-2:oklch(97% 0.004 256);
  --line:     oklch(92% 0.005 256);
  --line-2:   oklch(86% 0.008 256);
  --ink:      oklch(28% 0.015 262);
  --ink-soft: oklch(46% 0.012 262);
  --ink-faint:oklch(62% 0.01 262);

  --bg: var(--paper);
  --text: var(--ink);
  --text-soft: var(--ink-soft);
  --text-faint: var(--ink-faint);
  --border: var(--line);
  --brand: var(--accent);
  /* 实底按钮/激活态填充色：须保证白字 WCAG AA；深色下比 --accent(用于文字/链接) 更深 */
  --accent-solid: oklch(52% 0.15 286);

  /* 品牌光晕：浅色极淡，仅作页面景深微染，破解「全浅」的平淡感 */
  --glow:   oklch(54% 0.15 286 / 0.08);
  --glow-2: oklch(60% 0.12 250 / 0.05);

  /* 内容色块（xmind 范式）：低饱和、品牌协调的柔色面板 —— 用色块承托内容，而非整段灰白交替 */
  --tint-purple: oklch(96.5% 0.028 286);
  --tint-blue:   oklch(96.5% 0.030 250);
  --tint-teal:   oklch(97% 0.026 175);
  --tint-amber:  oklch(97.5% 0.035 88);
  --tint-rose:   oklch(97% 0.032 12);
  --tint-line:   oklch(86% 0.02 286 / 0.55);
  /* 深色品牌带（对标 xmind 靛蓝带）：承托「企业简介」做整页深色锚点 */
  --band:       oklch(30% 0.07 286);
  --band-ink:   oklch(97% 0.008 286);
  --band-soft:  oklch(82% 0.05 286);
  --band-line:  oklch(72% 0.08 286 / 0.22);

  --font-display: 'Space Grotesk', 'Noto Sans SC', sans-serif;
  --font-body: 'IBM Plex Sans', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --fs-eyebrow: 0.72rem;
  --fs-body: 1rem;
  --fs-lead: clamp(1rem, 0.96rem + 0.3vw, 1.15rem);
  --fs-h3: clamp(1.1rem, 1.04rem + 0.4vw, 1.3rem);
  --fs-h2: clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem);
  --fs-hero: clamp(2.3rem, 1.45rem + 4vw, 4.4rem);

  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.25rem; --s-6: 1.5rem; --s-7: 1.75rem; --s-8: 2rem;
  --s-10: 2.5rem; --s-12: 3rem; --s-14: 3.5rem; --s-16: 4rem; --s-18: 4.5rem;
  --s-24: 6.5rem;

  --r-sm: 6px; --r-xs: 4px;
  --shadow-sm: 0 1px 2px rgb(28 24 56 / .06), 0 2px 8px rgb(28 24 56 / .05);
  --shadow-md: 0 6px 18px rgb(28 24 56 / .10), 0 2px 6px rgb(28 24 56 / .06);
  --shadow-lg: 0 18px 48px rgb(28 24 56 / .16);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --t-fast: 140ms; --t-med: 260ms;

  --maxw: 1180px;

  /* Plyr 播放器品牌色（覆盖默认深灰，接科技紫；自动跟随深浅色 theme）。
     主色用高亮低饱和版本（同色相 286，明度 80% / 饱和 0.07），
     避免在视频画面（深色）上大面积出现深紫色显得突兀；页面其他位置的 brand 仍保留饱和版。 */
  --plyr-color-main: oklch(80% .07 286);
  --plyr-video-background: #0b0c14;
  --plyr-video-control-color: #ece9f7;
  --plyr-video-control-color-hover: #ffffff;
  --plyr-range-fill-background: oklch(80% .07 286);
  --plyr-menu-background: rgba(22, 19, 40, 0.96);
  --plyr-menu-color: #ffffff;
  --plyr-tooltip-background: rgba(22, 19, 40, 0.96);
  --plyr-tooltip-color: #ffffff;
  --plyr-control-radius: 6px;
}

/* 中央播放按钮：白底 + 紫色图标 + 玻璃化
   与视频画面（深色）柔和对比，不再"一大坨紫"突兀 */
.plyr__control--overlaid {
  background: oklch(98% 0 0 / 0.92);
  color: oklch(54% .15 286);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid oklch(100% 0 0 / 0.3);
}

:root[data-theme="dark"] {
  /* 深岩灰 / 午夜蓝分层基底（非死黑）+ 品牌紫调，营造景深，破解「一黑到底」 */
  --accent:      oklch(72% 0.14 286);
  --accent-soft: oklch(24% 0.05 286);
  --accent-line: oklch(36% 0.07 286);

  --paper:    oklch(15% 0.012 264);   /* 页面基底：深岩灰蓝 */
  --surface:  oklch(19% 0.014 266);   /* 卡片：略抬升 */
  --surface-2:oklch(23% 0.015 266);   /* 交替段：再抬升 */
  --line:     oklch(30% 0.012 266);
  --line-2:   oklch(38% 0.012 266);
  --ink:      oklch(94% 0.005 266);
  --ink-soft: oklch(78% 0.008 266);
  --ink-faint:oklch(62% 0.008 266);

  /* 实底按钮深色填充（白字 AA）：比文字用 --accent 更深，保留品牌紫调 */
  --accent-solid: oklch(52% 0.17 286);

  /* 品牌光晕：深色下较浓，作为页面景深 */
  --glow:   oklch(62% 0.18 286 / 0.18);
  --glow-2: oklch(55% 0.14 250 / 0.12);

  /* 内容色块（深色版）：低明度同色相面板，在深底上仍可辨；品牌带更深 */
  --tint-purple: oklch(25% 0.04 286);
  --tint-blue:   oklch(25% 0.045 250);
  --tint-teal:   oklch(25% 0.035 175);
  --tint-amber:  oklch(27% 0.04 88);
  --tint-rose:   oklch(28% 0.04 12);
  --tint-line:   oklch(42% 0.02 286 / 0.4);
  --band:       oklch(20% 0.05 286);
  --band-ink:   oklch(96% 0.008 286);
  --band-soft:  oklch(80% 0.06 286);
  --band-line:  oklch(70% 0.1 286 / 0.28);

  --shadow-sm: 0 1px 2px rgb(0 0 0 / .4), 0 2px 8px rgb(0 0 0 / .3);
  --shadow-md: 0 6px 18px rgb(0 0 0 / .5), 0 2px 6px rgb(0 0 0 / .35);
  --shadow-lg: 0 18px 48px rgb(0 0 0 / .6);
}

/* 统一表格：表头为中性 surface-2（深浅色自动适配），无需单独加深色品牌描边 */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.7;
  color: var(--text); background-color: var(--bg);
  /* 品牌光晕景深层：浅色极淡、深色较浓，固定视口顶部，破解「全浅 / 一黑到底」 */
  background-image:
    radial-gradient(115% 70% at 50% -18%, var(--glow), transparent 55%),
    radial-gradient(75% 55% at 102% -5%, var(--glow-2), transparent 55%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  transition: background-color var(--t-med) var(--ease-out-quart), color var(--t-med) var(--ease-out-quart);
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 2px; }

.skip-link { position: absolute; left: var(--s-4); top: -60px; background: var(--accent-solid); color: #fff; padding: var(--s-2) var(--s-4); border-radius: var(--r-sm); z-index: 100; transition: top var(--t-fast); }
.skip-link:focus { top: var(--s-4); }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--s-6); }

/* 白/灰交替 + 极简分隔线（沿用 14% 深灰，比发丝线更可见但克制） */
.section { padding-block: clamp(var(--s-18), 9vw, var(--s-24)); position: relative; isolation: isolate; }
.section--alt { background: var(--surface-2); }
/* 浅浅的背景修饰：极淡点阵 + 柔光晕，做科技质感而不喧宾夺主（纯装饰，不影响对比度） */
.section::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(var(--tint-line) 1px, transparent 1.5px);
  background-size: 24px 24px; opacity: 0.45;
  -webkit-mask-image: radial-gradient(125% 85% at 50% -5%, #000 25%, transparent 72%);
  mask-image: radial-gradient(125% 85% at 50% -5%, #000 25%, transparent 72%);
}
.section::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(85% 60% at 100% 0%, var(--glow-2), transparent 60%); opacity: 0.6;
}
.section--band::before { background-image: radial-gradient(rgb(255 255 255 / 0.10) 1px, transparent 1.5px); opacity: 0.35; }
.section--band::after { background: radial-gradient(90% 120% at 0% 100%, rgb(255 255 255 / 0.06), transparent 60%); opacity: 0.8; }
.section ~ .section,
.hero-slider ~ .section { border-top: 1px solid color-mix(in oklch, var(--text) 12%, transparent); }

/* ---------- 内容色块系统（xmind 范式）：用色块承托内容，去掉整段灰白交替 ---------- */
/* 企业简介：深色品牌带，整页深色锚点（对标 xmind 靛蓝带） */
.section--band { background: var(--band); color: var(--band-ink); }
.section--band .eyebrow { color: var(--band-soft); }
.section--band .company__lead { color: var(--band-ink); }
.section--band .company__lead strong { color: #fff; }
.section--band .company__num { color: #fff; }
.section--band .company__num-unit { color: var(--band-soft); }
.section--band .company__label { color: var(--band-soft); }
.section--band .company__stats { border-top-color: var(--band-line); }
.section--band .video-card { background: rgba(255,255,255,0.05); border-color: var(--band-line); }

/* ---------- 排版基元 ---------- */
.eyebrow {
  font-family: var(--font-mono); font-size: var(--fs-eyebrow);
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--brand);
}
.section-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -0.02em;
  margin-top: var(--s-3); max-width: 22ch;
}
.section-head { margin-bottom: var(--s-12); }
.section-sub { margin-top: var(--s-3); max-width: 52ch; color: var(--text-soft); font-size: 1.05rem; line-height: 1.5; }

/* ---------- 按钮 / 链接 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font-weight: 500; font-size: 0.95rem; padding: 0.8rem 1.6rem; min-height: 44px;
  border-radius: var(--r-sm); background: var(--accent-solid); color: #fff;
  transition: opacity var(--t-fast), transform var(--t-fast) var(--ease-out-quart);
}
.btn:hover { transform: translateY(-1px); opacity: 0.9; }
.btn--ghost { background: transparent; color: var(--text); border: 1px solid var(--line-2); }
.btn--ghost:hover { border-color: var(--brand); }
.btn--sm { padding: 0.55rem 1.1rem; min-height: 40px; font-size: 0.88rem; }
.link { color: var(--brand); font-weight: 500; font-size: 0.9rem; transition: opacity var(--t-fast); }
.link:hover { opacity: 0.7; }

/* ---------- NAV ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: color-mix(in oklch, var(--bg) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: var(--s-6); }
.brand { display: inline-flex; align-items: center; }
.brand__img { height: 40px; width: auto; display: block; border-radius: 4px; }
.nav__links { display: flex; align-items: center; justify-content: center; gap: var(--s-5); height: 100%; flex: 1 1 auto; }
.nav__links > li { position: relative; height: 100%; display: flex; align-items: center; list-style: none; }
/* 同时按类名和"菜单位置"匹配：WP 的 wp_nav_menu() 不认 link_class 参数，
   即使 filter 失效也能靠 .nav__links > li > a 兜底，不至于整片导航没样式 */
.nav__link,
.nav__links > li > a {
  display: inline-block;
  font-size: 0.92rem;
  color: var(--text-soft);
  padding-block: 4px;
  text-decoration: none;
  transition: color var(--t-fast);
}
/* 悬停 / 选中：下划线贴到 nav 栏最底部（与下方 border-bottom 对齐）——
   ::after 挂在 li 上（li 撑满 nav__inner 高度），不依赖 a 的 padding 偏移 */
.nav__links > li::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--t-med) var(--ease-out-quart);
}
.nav__link:hover,
.nav__links > li > a:hover { color: var(--brand); }
/* 鼠标经过 li 时下划线展开 */
.nav__links > li:hover::after { transform: scaleX(1); }
/* 选中项：li 上的 aria-current 来自 wp_nav_menu 渲染到 a 上，通过 :has() 把状态映射到 li；
   .current-menu-item 是 WP 给当前菜单项 li 加的类，最稳 */
.nav__link[aria-current="page"],
.nav__links > li > a[aria-current="page"] { color: var(--brand); }
.nav__links > li.current-menu-item::after,
.nav__links > li:has(> a[aria-current="page"])::after { transform: scaleX(1); }

/* ---------- 语言切换 ---------- */
.lang-switch { position: relative; flex: 0 0 auto; }
.lang-switch__btn {
  display: inline-flex;
  /* 显式横排：全局 `img, svg { display: block }` 会把按钮内三个子元素撑成竖排 */
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  white-space: nowrap;
  line-height: 1;
  font: inherit;
  font-size: .85rem;
  color: var(--text-soft);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: .35rem .6rem;
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.lang-switch__btn > svg { flex: 0 0 auto; display: block; }
.lang-switch__current { line-height: 1; }
.lang-switch__btn:hover { color: var(--brand); border-color: var(--brand); }
.lang-switch__caret { transition: transform var(--t-fast); }
.lang-switch.is-open .lang-switch__caret { transform: rotate(180deg); }
.lang-switch__menu {
  position: absolute;
  top: calc(100% + .4rem);
  right: 0;
  min-width: 124px;
  margin: 0;
  padding: .25rem;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  box-shadow: 0 8px 24px color-mix(in oklch, var(--ink) 12%, transparent);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
  z-index: 60;
}
.lang-switch.is-open .lang-switch__menu { opacity: 1; visibility: visible; transform: none; }
.lang-switch__menu a {
  display: block;
  padding: .4rem .6rem;
  border-radius: calc(var(--r-sm) - 2px);
  font-size: .85rem;
  color: var(--text-soft);
  text-decoration: none;
  transition: color var(--t-fast), background var(--t-fast);
}
.lang-switch__menu a:hover { color: var(--brand); background: var(--surface-2); }
.lang-switch__menu a.is-active { color: var(--brand); }

/* 登录按钮（高度对齐 .lang-switch__btn ~30px，覆盖 btn--sm 默认的 40px） */
.nav__login {
  text-decoration: none;
  padding: 0 0.85rem;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  font-size: 0.85rem;
  line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
  .nav__link::after,
  .nav__links > li > a::after { transition: none; }
  .lang-switch__menu { transition: none; }
}
.nav__actions { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--s-3); }
.nav__actions > * { flex: 0 0 auto; }
.theme-toggle {
  /* 与语言按钮同高（30px），改用方框保持与左右按钮视觉一致 */
  position: relative; width: 30px; height: 30px;
  padding: 0; margin: 0; line-height: 0; font: inherit;
  border-radius: var(--r-sm); border: 1px solid var(--border);
  background: transparent; cursor: pointer;
  color: var(--text-soft);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.theme-toggle:hover { color: var(--brand); border-color: var(--brand); }
/* 两个图标绝对居中（不受 grid/svg block 行为影响），由下面的 display: none 控制谁显示 */
.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
  position: absolute; top: 50%; left: 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  display: block;
}
/* 主题切换图标：代表「点击后会变成什么」——
   浅色时显示月亮（点击切到深色），深色时显示太阳（点击切到浅色） */
.theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }

/* 桌面端：登录/用户菜单绝对定位到顶部右侧，右边缘与 .page-sidebar 对齐 */
@media (min-width: 1024px) {
  .nav__inner { padding-right: 12rem; }
  /* 登录态账户区含「新增」下拉按钮 + 用户菜单(约 220px)，加宽预留位避免与居中导航重叠 */
  .logged-in .nav__inner { padding-right: 16rem; }
  .nav__actions {
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
  }
}

/* ---------- HERO（极简：纯文字 + 留白 + 右上角淡紫光晕，无背景图） ---------- */
.hero { position: relative; overflow: hidden; min-height: clamp(440px, 60vh, 540px); display: flex; align-items: center; }
.hero::before {
  content: ""; position: absolute; top: -25%; right: -12%; width: 65%; height: 150%;
  background: radial-gradient(58% 58% at 70% 25%, color-mix(in oklch, var(--brand) 9%, transparent), transparent 72%);
  pointer-events: none;
}
/* 机械手装饰：作为右下视觉点缀融入 hero，不抢标题/列表——左/上边缘 mask 渐隐融入空白，
   主体不抢「全周期陪伴服务」列表（z-index:0 在 .hero__inner 之下） */
.hero__arm {
  position: absolute;
  right: clamp(-30px, -2vw, 10px);
  bottom: 10px;
  width: clamp(240px, 26vw, 360px);
  height: auto;
  pointer-events: none;
  z-index: 0;
  opacity: .85;
  filter: drop-shadow(0 0 32px color-mix(in oklch, var(--brand) 22%, transparent))
          drop-shadow(0 8px 20px color-mix(in oklch, #000 6%, transparent));
  /* 照片版边缘融入更柔：左上 ~22% 渐显（让机械臂尾端融入 hero 留白），右下保留 */
  -webkit-mask-image: linear-gradient(135deg, transparent 22%, black 80%);
          mask-image: linear-gradient(135deg, transparent 22%, black 80%);
  animation: jr-hero-arm-in .9s var(--ease-out-quart) both;
}
@keyframes jr-hero-arm-in {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to   { opacity: .85; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__arm { animation: none; }
}
@media (max-width: 768px) {
  /* 移动端列表下移到 hero__process 下方，不再有右半空白 → 机械手隐藏避免拥挤 */
  .hero__arm { display: none; }
}
.hero__inner { position: relative; z-index: 1; width: 100%; display: flex; justify-content: space-between; align-items: flex-start; gap: clamp(var(--s-8), 5vw, var(--s-16)); padding-block: var(--s-8); }
.hero__text { max-width: 46rem; }
.hero__descriptor { font-weight: 300; font-size: clamp(1.35rem, 1.15rem + .8vw, 1.75rem); color: var(--text-soft); margin-top: var(--s-5); letter-spacing: .06em; }
.hero h1 {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: var(--fs-hero);
  line-height: 1.2;
  letter-spacing: 0;
  margin-top: var(--s-3);
  color: var(--brand);  /* 整段紫色（原稿 wordmark 风格） */
  white-space: nowrap;  /* wordmark 强制单行，每个字下方都挂装饰线 */
}
/* 极简 wordmark：每个字下方一条细装饰线，长度交错，形成"刻意设计"的节奏感 */
.hero h1 .char { display: inline-block; position: relative; }
.hero h1 .char::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -0.18em;
  width: var(--mark-w, 50%);
  height: 1px;
  background: var(--brand);
  transform: translateX(-50%);
  opacity: .55;
}
.hero h1 .char:nth-child(1) { --mark-w: 80%; }
.hero h1 .char:nth-child(2) { --mark-w: 40%; }
.hero h1 .char:nth-child(3) { --mark-w: 70%; }
.hero h1 .char:nth-child(4) { --mark-w: 55%; }
.hero h1 .char:nth-child(5) { --mark-w: 85%; }
.hero h1 .char:nth-child(6) { --mark-w: 45%; }
.hero h1 .char:nth-child(7) { --mark-w: 30%; }
/* 末尾标点（句号）下不画装饰线，避免"."下挂一根线的怪样 */
.hero h1 .char.is-punct::after,
.hero h1 .char:last-child::after { opacity: 0; }
.hero__apps { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); margin-top: var(--s-7); }
.hero__apps li { position: relative; padding-left: var(--s-4); font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-soft); letter-spacing: .02em; }
.hero__apps li::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 1px; background: var(--brand); }

/* 全周期流程：极简 1×4 横排，编号 + 文字，无虚线箭头 */
.hero__process { flex: 0 0 auto; max-width: 22rem; }
.process__label { font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: 0.2em; text-transform: uppercase; color: var(--brand); margin-bottom: var(--s-5); }
.process__steps { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-7); }
.step { display: inline-flex; align-items: baseline; gap: var(--s-2); }
.step__num { font-family: var(--font-mono); font-size: 0.72rem; color: var(--brand); font-weight: 500; }
.step__label { font-size: 0.92rem; color: var(--text); }

/* ---------- HERO CAROUSEL（3 张淡入淡出，高度跟最高那张走，切换不抖） ---------- */
/* 三张幻灯全部 grid-area: stack 重叠在同一格；grid 行高 = 内容最高的子项（visibility:hidden 仍占空间），
   解决 banner 内容超出 brand hero 时被 overflow:hidden 裁切底部的问题 */
.hero-slider { position: relative; background: var(--bg); overflow: hidden; display: grid; grid-template-areas: "stack"; grid-template-columns: 100%; }
.hero-slider > .hero-slide {
  grid-area: stack;
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-med) var(--ease-out-quart), visibility 0s linear var(--t-med);
}
.hero-slider > .hero-slide.is-active {
  opacity: 1; visibility: visible;
  transition: opacity var(--t-med) var(--ease-out-quart), visibility 0s linear 0s;
}
.hero-dots {
  position: absolute; left: 50%; bottom: var(--s-5);
  transform: translateX(-50%); z-index: 5;
  display: flex; gap: var(--s-3);
}
.hero-dot {
  width: 9px; height: 9px; padding: 0; border-radius: 999px;
  background: color-mix(in oklch, var(--text) 30%, transparent);
  transition: width var(--t-med) var(--ease-out-quart), background var(--t-med);
}
.hero-dot.is-active { width: 26px; background: var(--brand); }
.hero-dot:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* ---------- HERO SLIDE 2：TMF8829 产品 Banner（沿用页面令牌，兼容深色模式） ---------- */
.banner { position: relative; overflow: hidden; background: transparent; }
.banner::before {
  content: ""; position: absolute; top: -120px; right: -120px;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
  opacity: .06; pointer-events: none;
}
.banner__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: var(--s-12); align-items: center;
  padding-block: var(--s-10) var(--s-8);
  min-height: 0;
}
.banner__eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent); font-weight: 500; margin-bottom: var(--s-5);
}
.banner__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.5rem, 1.6rem + 3.6vw, 3.8rem);
  letter-spacing: -.02em; line-height: 1; color: var(--text);
}
.banner__title .sub {
  display: block; font-size: .28em; font-weight: 500; letter-spacing: .06em;
  color: var(--text-faint); margin-top: var(--s-3); font-family: var(--font-mono);
}
.banner__tagline {
  margin-top: var(--s-4); font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.05rem, .95rem + .6vw, 1.35rem); color: var(--text);
}
.banner__desc { margin-top: var(--s-3); max-width: 62ch; color: var(--text-soft); font-size: .95rem; }
.banner__stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5);
  margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line);
}
.stat { display: flex; flex-direction: column; gap: var(--s-1); }
.stat__num {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem);
  color: var(--brand); line-height: 1; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.stat__unit { font-size: .5em; font-weight: 500; margin-left: 1px; color: var(--brand); }
.stat__label { font-size: .78rem; color: var(--text-soft); letter-spacing: .01em; }
.banner__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.btn--primary { background: var(--accent-solid); color: #fff; }
.banner__visual { display: flex; justify-content: center; align-items: center; }
.sensor, .topo { width: 100%; max-width: 420px; height: auto; display: block; }
.sensor .fov { fill: url(#fovGrad); stroke: var(--accent-line); stroke-width: 1; }
.sensor .pixel { fill: var(--text-faint); opacity: .26; }
.sensor .target-glow { fill: var(--accent); opacity: .16; }
.sensor .target { fill: var(--accent); }
.sensor .range { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 4; opacity: .4; }
.sensor .module { fill: var(--surface); stroke: var(--accent); stroke-width: 1.5; }
.sensor .emitter { fill: var(--accent); }
.sensor .svg-label { fill: var(--text-soft); font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; }
.sensor .svg-cap { fill: var(--text-faint); font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; }
/* AX58101 拓扑示意图 */
.topo .topo-field { stroke: color-mix(in oklch, var(--accent) 35%, transparent); stroke-width: 1; }
.topo .node { stroke-width: 1.5; }
.topo .node--master { fill: var(--surface); stroke: var(--line-2); }
.topo .node--esc { fill: url(#chipGrad); stroke: var(--accent); stroke-width: 1.5; }
.topo .node--slave { fill: var(--surface); stroke: var(--line-2); }
.topo .link { stroke: var(--accent); stroke-width: 1.4; fill: none; opacity: .55; }
.topo .port { fill: var(--accent); }
.topo .pin { stroke: var(--line-2); stroke-width: 1; }
.topo .dot { fill: var(--accent); opacity: .85; }
.topo .tick { stroke: var(--accent); stroke-width: 1.5; opacity: .55; }
.topo .dc { fill: color-mix(in oklch, var(--accent) 14%, var(--surface)); stroke: var(--accent); stroke-width: 1.5; }
.topo .dc-inner { fill: none; stroke: color-mix(in oklch, var(--accent) 35%, transparent); stroke-width: 1; stroke-dasharray: 2 3; }
.topo .svg-label { fill: var(--text-soft); font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; }
.topo .svg-cap { fill: var(--text-faint); font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em; }
.topo .svg-port { fill: var(--brand); font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .04em; font-weight: 500; }
.topo .svg-esc { fill: var(--brand); font-family: var(--font-display); font-weight: 600; font-size: 16px; letter-spacing: .04em; }

/* Banner 响应式：≤900px 单列、视觉置顶并压缩，保证契合第一张主视觉高度 */
@media (max-width: 900px) {
  .banner__grid { grid-template-columns: 1fr; gap: var(--s-4); padding-block: var(--s-6) var(--s-5); min-height: 0; }
  .banner__visual { order: -1; }
  .sensor, .topo { max-width: 150px; }
  .banner__title { font-size: clamp(1.9rem, 1.4rem + 2.6vw, 2.6rem); }
  .banner__tagline { margin-top: var(--s-3); font-size: clamp(.95rem, .9rem + .4vw, 1.1rem); }
  .banner__desc { margin-top: var(--s-2); }
  .banner__stats { grid-template-columns: repeat(2, 1fr); gap: var(--s-4); margin-top: var(--s-4); padding-top: var(--s-4); }
  .banner__cta { margin-top: var(--s-4); }
  .banner__desc { max-width: none; }
  .hero-dots { bottom: var(--s-3); }
}
@media (max-width: 520px) {
  .banner__cta .btn { flex: 1 1 100%; justify-content: center; }
}

/* ---------- MAIN BUSINESS（3 卡 + 底部 4 项 feature 横排） ---------- */
.business__grid { display: flex; gap: var(--s-10); align-items: flex-start; }
/* 等宽三列：flex:1 让三卡同宽，图标均居列左缘，图标间距像素级相等 */
.biz { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s-3);
  background: var(--tint-purple); border: 1px solid var(--tint-line); border-radius: 14px;
  padding: var(--s-8) var(--s-6) var(--s-6);
  transition: transform var(--t-med) var(--ease-out-quart), box-shadow var(--t-med) var(--ease-out-quart), border-color var(--t-fast); }
.biz:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: color-mix(in oklch, var(--accent) 45%, var(--tint-line)); }
.biz:nth-child(5n+1) { background: var(--tint-purple); }
.biz:nth-child(5n+2) { background: var(--tint-amber); }
.biz:nth-child(5n+3) { background: var(--tint-blue); }
.biz:nth-child(5n+4) { background: var(--tint-teal); }
.biz:nth-child(5n+5) { background: var(--tint-rose); }
/* 主营业务：照片底色块（参考稿：紫调压暗 + 白字 + 大序号 + SCENE 标签） */
.biz.biz--photo { position: relative; isolation: isolate; overflow: hidden; min-height: 400px; justify-content: flex-end; background: var(--band); }
.biz__bg { position: absolute; inset: 0; z-index: -2; }
.biz__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.biz.biz--photo::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(185deg, oklch(35% 0.10 286 / .55) 0%, oklch(27% 0.09 286 / .9) 72%);
  transition: background var(--t-med) var(--ease-out-quart);
}
.biz__num { position: absolute; top: var(--s-5); left: var(--s-6); font-family: var(--font-display); font-weight: 600; font-size: 2rem; line-height: 1; color: #fff; letter-spacing: .02em; }
.biz__body { display: flex; flex-direction: column; gap: var(--s-2); }
.biz.biz--photo .biz__title { color: #fff; }
.biz.biz--photo .biz__sub { color: rgb(255 255 255 / .75); }
.biz.biz--photo .biz__scene { display: inline-flex; align-items: center; gap: var(--s-2); margin-top: var(--s-3); color: rgb(255 255 255 / .85); }
.biz.biz--photo .biz__scene svg { width: 15px; height: 15px; flex: 0 0 auto; }
.biz.biz--photo:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.biz.biz--photo:hover::after { background: linear-gradient(185deg, oklch(40% 0.12 286 / .48) 0%, oklch(29% 0.10 286 / .86) 72%); }
@media (max-width: 860px) { .biz.biz--photo { min-height: 300px; } }
.biz__visual { position: relative; width: 100%; max-width: 200px; aspect-ratio: 80 / 56; color: var(--brand); margin-bottom: var(--s-2); }
.biz__visual svg { width: 100%; height: 100%; display: block; opacity: .85; transition: opacity var(--t-fast); }
.biz:hover .biz__visual svg { opacity: 1; }
.biz__title { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); }
.biz__sub { color: var(--text-soft); font-size: 0.88rem; letter-spacing: 0.02em; }
/* SCENE 已上移到顶部，不再需要 margin-top */
.biz__scene { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.18em; color: var(--text-faint); text-transform: uppercase; }
.biz__features { list-style: none; padding: var(--s-6) 0 0; margin: var(--s-12) 0 0; display: flex; flex-wrap: wrap; gap: var(--s-5) var(--s-8); border-top: 1px solid var(--line-2); justify-content: space-between; }
.biz__features li { display: flex; align-items: center; gap: var(--s-3); font-size: 0.92rem; color: var(--text-soft); }
.biz__features li svg { width: 18px; height: 18px; color: var(--brand); flex-shrink: 0; }

/* ---------- SOLUTIONS（极简卡片：发丝线顶边 + 留白，无圆角堆叠） ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-10); }
.card { padding-top: var(--s-5); border-top: 1px solid var(--line-2); transition: transform var(--t-med) var(--ease-out-quart), border-color var(--t-fast); }
.card:hover { transform: translateY(-3px); border-color: var(--brand); }
.card__idx { font-family: var(--font-mono); font-size: 0.78rem; color: var(--brand); }
.card__title { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); margin-top: var(--s-3); }
.card__desc { color: var(--text-soft); font-size: var(--fs-lead); margin-top: var(--s-3); }
/* 「热门产品线速览」3×2 紧凑卡片（不影响其他 .card） */
.section[id="lines"] .card { padding-top: var(--s-4); }
.section[id="lines"] .card__idx { font-size: 0.72rem; }
.section[id="lines"] .card__title { font-size: 1.15rem; margin-top: var(--s-2); letter-spacing: -0.01em; }
.section[id="lines"] .card__desc { font-size: 0.9rem; margin-top: var(--s-2); line-height: 1.55; }
.section[id="lines"] .grid-3 { gap: var(--s-4) var(--s-6); }

/* SOLUTIONS：用柔色块面板承托方案卡（色相轮换），替代原整段灰底 */
.section[id="solutions"] .card--link {
  border: 1px solid var(--tint-line); border-top: 1px solid var(--tint-line);
  border-radius: 14px; padding: var(--s-6) var(--s-6) var(--s-7);
  background: var(--tint-purple); box-shadow: var(--shadow-sm);
}
.section[id="solutions"] .card--link:nth-child(5n+1) { background: var(--tint-blue); }
.section[id="solutions"] .card--link:nth-child(5n+2) { background: var(--tint-rose); }
.section[id="solutions"] .card--link:nth-child(5n+3) { background: var(--tint-purple); }
.section[id="solutions"] .card--link:nth-child(5n+4) { background: var(--tint-amber); }
.section[id="solutions"] .card--link:nth-child(5n+5) { background: var(--tint-teal); }
.section[id="solutions"] .card--link:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: color-mix(in oklch, var(--accent) 45%, var(--tint-line)); }

/* ---------- SEARCH TEASER ---------- */
.search { display: flex; flex-direction: column; gap: var(--s-5); max-width: 46rem; }
.search__bar { display: flex; align-items: center; gap: var(--s-3); font-family: var(--font-mono); font-size: 0.9rem; color: var(--text-faint); padding: var(--s-4) var(--s-5); border: 1px solid var(--line-2); border-radius: var(--r-sm); }
.search__bar .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.search__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip { font-family: var(--font-mono); font-size: 0.76rem; padding: 0.35rem 0.8rem; border-radius: var(--r-sm); border: 1px solid var(--line-2); color: var(--text-soft); }
.chip--active { border-color: var(--brand); color: var(--brand); }

/* ---------- COMPANY INTRO（左文右视频） ---------- */
.company { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--s-12) var(--s-16); align-items: center; }
.company__text { display: flex; flex-direction: column; gap: var(--s-5); }
.company__lead { color: var(--text); font-size: var(--fs-lead); line-height: 1.75; }
.company__lead strong { font-weight: 600; }
.company__brand { color: var(--brand); font-weight: 600; }
.company__stats { list-style: none; padding: 0; margin: var(--s-3) 0 0; display: flex; flex-wrap: wrap; gap: var(--s-8); border-top: 1px solid var(--line-2); padding-top: var(--s-5); }
.company__stats--grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-7) var(--s-8); }
.company__stats li { display: flex; flex-direction: column; gap: 4px; }
.company__num { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); color: var(--text); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.company__num-unit { font-family: var(--font-body); font-weight: 500; font-size: 0.42em; color: var(--brand); margin-left: 2px; }
.company__label { font-family: var(--font-body); font-size: 0.82rem; letter-spacing: 0.04em; color: var(--text-faint); }

/* VIDEO CARD */
.company__media { display: flex; }
.video-card { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: var(--r-sm); overflow: hidden; background: oklch(20% .06 280); box-shadow: 0 24px 60px -28px rgb(0 0 0 / .22); cursor: pointer; transition: transform var(--t-med) var(--ease-out-quart), box-shadow var(--t-med) var(--ease-out-quart); }
.video-card:hover { transform: translateY(-3px); box-shadow: 0 32px 80px -28px rgb(0 0 0 / .3); }
.video-card__poster { position: absolute; inset: 0; }
.video-card__poster svg { width: 100%; height: 100%; display: block; }

/* 视频铺满卡片（修原生 <video> 默认 300×150 偏小 bug） */
.video-card__frame { width: 100%; height: 100%; display: block; background: #000; object-fit: cover; }
/* 真实视频卡片：比例交给 Plyr 控制（视频+控制条），不锁死 16:9，否则控制条被裁 */
.video-card--embed { display: flex; flex-direction: column; aspect-ratio: auto; overflow: visible; background: #000; }
.video-card--embed .plyr { width: 100%; border-radius: var(--r-sm) var(--r-sm) 0 0; overflow: hidden; }
.video-card--embed .plyr__video-wrapper { background: #000; }
/* 视频卡的 caption 形式：脱离视频画面、Plyr 控制条不再被挡 */
.video-card--embed .video-card__meta { position: static; margin: 0; padding: var(--s-3) var(--s-4); border-radius: 0 0 var(--r-sm) var(--r-sm); background: var(--surface); color: var(--text); backdrop-filter: none; box-shadow: none; }
.video-card__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 72px; height: 72px; border-radius: 50%; background: color-mix(in oklch, var(--accent-solid) 92%, transparent); color: #fff; border: none; display: grid; place-items: center; cursor: pointer; box-shadow: 0 12px 32px -8px color-mix(in oklch, var(--accent-solid) 60%, transparent); transition: transform var(--t-fast) var(--ease-out-quart), background var(--t-fast); }
.video-card__play:hover { transform: translate(-50%, -50%) scale(1.06); background: var(--accent-solid); }
.video-card__play svg { margin-left: 3px; }   /* 视觉上 triangle 居中 */
.video-card__meta { position: absolute; left: var(--s-4); right: var(--s-4); top: var(--s-4); bottom: auto; display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); background: color-mix(in oklch, #000 45%, transparent); backdrop-filter: blur(6px); color: #fff; }
.video-card__title { font-family: var(--font-body); font-size: 0.85rem; font-weight: 500; }
.video-card__dur { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; opacity: 0.85; }

/* 方案section 标题中的「方案。」独占一行 + 加粗 */
.title-emph { display: block; font-weight: 700; letter-spacing: -0.02em; }

/* 文章卡片：统一加边框/底纹/悬停（无论是否整卡可点都生效） */
.posts { gap: var(--s-8); }
.post {
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--surface);
  overflow: hidden;
  transition: transform var(--t-med) var(--ease-out-quart), border-color var(--t-fast), box-shadow var(--t-fast);
}
.post:hover { transform: translateY(-3px); border-color: var(--brand); box-shadow: 0 14px 32px -26px color-mix(in oklch, var(--brand) 55%, transparent); }
/* 封面贴边（顶部圆角由卡片 overflow:hidden 裁切） */
.post__cover { aspect-ratio: 16/10; border-radius: 0; overflow: hidden; background: var(--surface-2); margin: 0 0 var(--s-3); }
.post__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-med) var(--ease-out-quart); }
.post__cover-fallback { width: 100%; height: 100%; background: linear-gradient(135deg, var(--brand), color-mix(in oklch, var(--brand) 38%, #1a1030)); position: relative; }
.post__cover-fallback::after { content: "CHIPREAL"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: .22em; color: color-mix(in oklch, white 82%, transparent); opacity: .55; }
.post:hover .post__cover img { transform: scale(1.04); }
/* 内容区左右缩进；统一用 margin-bottom 控制间距（不论是否被 .post__link 包裹都一致对齐） */
.post__meta { display: flex; gap: var(--s-4); padding: 0 var(--s-4); margin: 0 0 var(--s-3); font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: .04em; color: var(--text-faint); }
.post__title { font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; line-height: 1.35; transition: color var(--t-fast); padding: 0 var(--s-4); margin: 0 0 var(--s-3); }
.post:hover .post__title { color: var(--brand); }
/* 整卡可点：post__link 仅接管链接语义；间距由子元素 margin 控制（避免 flex gap 与 margin 叠加） */
.post__link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.post__link:hover .post__cta { color: var(--brand); }
.post__cta {
  font-size: .9rem;
  color: var(--text-soft);
  display: inline-flex;
  align-items: center;
  gap: .4em;
  width: fit-content;
  padding: 0 var(--s-4) var(--s-4);
  transition: color var(--t-fast);
}

/* ---------- CTA ---------- */
.cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-6); }
.cta__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); letter-spacing: -0.02em; max-width: var(--maxw); }
.cta__sub { display: block; margin-top: var(--s-2); }
.cta--inline { margin-top: var(--s-14); padding-top: var(--s-10); border-top: 1px solid var(--line-2); }

/* ---------- FOOTER ---------- */
.footer { border-top: 1px solid var(--border); background: var(--surface-2); }
.footer__inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: var(--s-10); padding-block: var(--s-14); }
.footer__brand-img { height: 56px; width: auto; display: block; margin-bottom: var(--s-4); border-radius: 4px; }
.footer__col p { color: var(--text-soft); font-size: 0.9rem; max-width: 34ch; }
.footer__col h4 { font-size: 0.82rem; font-weight: 600; letter-spacing: .04em; margin-bottom: var(--s-4); }
.footer__col a { display: block; color: var(--text-soft); font-size: 0.9rem; padding-block: var(--s-1); transition: color var(--t-fast); }
.footer__col a:hover { color: var(--brand); }
.footer__bottom { padding-block: var(--s-6); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); font-size: 0.8rem; color: var(--text-faint); font-family: var(--font-mono); }

/* ---------- 滚动揭示（与 app.js 配合） ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--t-med) var(--ease-out-quart), transform var(--t-med) var(--ease-out-quart); transition-delay: calc(var(--i, 0) * 80ms); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
  .nav__links { display: none; }
  .hero__inner { flex-direction: column; gap: var(--s-10); }
  .hero__process { max-width: none; width: 100%; }
  .grid-3 { grid-template-columns: 1fr; gap: var(--s-8); }
  .business__grid { flex-direction: column; gap: var(--s-8); }
  .biz { flex: 0 0 auto; }
  .biz__features { justify-content: flex-start; }
  .company { grid-template-columns: 1fr; gap: var(--s-8); }
  .company__lead { max-width: none; }
  .company__stats--grid { grid-template-columns: repeat(2, 1fr); }
  .video-card__play { width: 60px; height: 60px; }
  .footer__inner { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
}
@media (max-width: 560px) {
  .hero__apps { flex-direction: column; gap: var(--s-2); }
  .process__steps { gap: var(--s-2) var(--s-5); }
  .company__stats { gap: var(--s-5); }
  .company__stats--grid { grid-template-columns: 1fr; }
  .video-card__meta { font-size: 0.8rem; }
  .footer__inner { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   PRODUCT CENTER（产品中心页，复用首页令牌与 section 体系）
   ============================================================ */

/* 内页页头：静态 band，不轮播 */
.page-hero {
  position: relative;
  z-index: 0;
  overflow: hidden;
  padding-block: clamp(var(--s-16), 7vw, var(--s-24));
  background: var(--bg);
  border-bottom: 1px solid var(--line-2);
}
/* page-hero 装饰：右上品牌柔光 + 细点阵质感 */
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(46% 72% at 84% 4%, color-mix(in oklch, var(--brand) 12%, transparent), transparent 70%),
    radial-gradient(circle, color-mix(in oklch, var(--text) 12%, transparent) 1px, transparent 1.6px);
  background-size: auto, 30px 30px;
  opacity: .55;
}
.page-hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-hero);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-top: var(--s-3);
}
.page-hero__desc {
  margin-top: var(--s-5);
  max-width: 54ch;
  color: var(--text-soft);
  font-size: 1.05rem;
  line-height: 1.7;
}
/* 双列 hero：左文右图（仅 .page-hero--with-media 触发，不影响其他页的单列 hero） */
.page-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(var(--s-6), 5vw, var(--s-12));
  align-items: center;
}
.page-hero__text { min-width: 0; }
.page-hero__media { min-width: 0; justify-self: end; align-self: end; }
.page-hero__media img {
  width: 100%;
  height: auto;
  display: block;
  /* 无背景/无圆角/无投影：让图自带柔落影融入 hero 留白；不用 box-shadow 否则会叠双层阴影 */
  border-radius: 0;
  box-shadow: none;
  max-width: 280px;
  max-height: 220px;
  margin-left: auto;
  margin-right: 0;
}
/* with-media：右图脚贴近 hero 下边界（与产品中心一致的标题栏高度）
   方案：inner 行高由图决定 → 文字垂直居中、图贴行底；
   再用 relative top 把图下推一个「底部 padding」量，使其脚落到 hero 下边框。
   不裁剪、不溢出（hero 仍 overflow:hidden）。 */
.page-hero--with-media .page-hero__inner { align-items: stretch; }
.page-hero--with-media .page-hero__text { align-self: center; }
.page-hero--with-media .page-hero__media {
  align-self: end;
  position: relative;
  top: clamp(var(--s-16), 7vw, var(--s-24));
}
/* 服务与支持 / 关于我们 / 产品中心 / 技术方案：具象化插画 hero —— 收窄顶部留白 + 插图放大贴底
   测量值（1440px 视口，support）：titleTop≈214，heroBottom≈487 → mediaH≈273。
   为避免拉高后撑高整个 hero（grid 行高会随图变大），这四页的 media 改成绝对定位：
   以 .page-hero__inner 为参照，right:0 对齐右栏，bottom:-padding 让插图画底贴 hero 下边框，
   图高 310px 让插图更大。文字流不受影响。
   注：产品中心是 shop post type 归档页，body class 为 post-type-archive-shop，不是 page-id。 */
@media (min-width: 1024px) {
  .page-id-6366 .page-hero,
  .page-id-6726 .page-hero,
  .post-type-archive-shop .page-hero,
  .page-id-6746 .page-hero,
  .page-id-6733 .page-hero {
    padding-top: clamp(var(--s-8), 3.5vw, var(--s-12)); /* 收窄顶部留白 */
  }
  .page-id-6366 .page-hero__inner,
  .page-id-6726 .page-hero__inner,
  .post-type-archive-shop .page-hero__inner,
  .page-id-6746 .page-hero__inner,
  .page-id-6733 .page-hero__inner {
    position: relative;
    min-height: 240px; /* 保持行高，避免 absolute 后 hero 被文字撑矮、插图被裁 */
  }
  .page-id-6366 .page-hero__media,
  .page-id-6726 .page-hero__media,
  .post-type-archive-shop .page-hero__media,
  .page-id-6746 .page-hero__media,
  .page-id-6733 .page-hero__media {
    position: absolute;
    right: 0;
    bottom: calc(-1 * clamp(var(--s-16), 7vw, var(--s-24)));
    top: auto;
    align-self: auto;
    justify-self: auto;
  }
  .page-id-6366 .page-hero__media img,
  .page-id-6726 .page-hero__media img,
  .post-type-archive-shop .page-hero__media img,
  .page-id-6746 .page-hero__media img,
  .page-id-6733 .page-hero__media img {
    width: auto;
    max-width: 310px;
    max-height: 310px;
  }
  /* 技术方案插图偏横版，310px 上限下高度只有 244px；放宽到 360px 使高度≈284px，
     底部仍贴 hero 下边框时顶部正好与标题顶线对齐。 */
  .page-id-6746 .page-hero__media img {
    max-width: 360px;
    max-height: 360px;
  }
  /* 产品中心同理：原图 594×511，放宽到 330px 使高度≈284px，顶部对齐标题、底部贴 hero 下边框。 */
  .post-type-archive-shop .page-hero__media img {
    max-width: 330px;
    max-height: 360px;
  }
}
/* 公司简介下方照片墙：4 张同排一行，等比 3:2，整组收敛居中 */
.profile-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-8);
  max-width: 56rem;
  margin-inline: auto;
}
.profile-gallery__photo,
.profile-gallery__wide {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 2;
  max-height: 170px;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--line-2);
  background: var(--surface-2);
}
.profile-gallery__photo img,
.profile-gallery__wide img {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
  transition: transform var(--t-med) var(--ease-out-quart);
}
.profile-gallery__photo:hover img,
.profile-gallery__wide:hover img { transform: scale(1.03); }
.profile-gallery__cap {
  position: absolute;
  left: var(--s-3); bottom: var(--s-3);
  margin: 0;
  padding: 0.3em 0.7em;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: #fff;
  background: color-mix(in oklch, #000 50%, transparent);
  backdrop-filter: blur(6px);
  border-radius: 999px;
}

/* ===== 文章详情页 ===== */
.article-hero { padding-bottom: var(--s-6); }
/* 文章 hero 上下内边距对称：面包屑到顶 = meta 到底 = --s-6(24px)，消除顶部留白过大。
   文章详情页(.article-hero--full)与产品详情页(.article-hero--grid)统一：顶部压缩到与
   meta 底部间距一致（--s-6），保持上下对称。 */
.article-hero--full,
.article-hero--grid { padding-block: var(--s-6); }
.article-back {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-size: .85rem;
  color: var(--text-soft);
  text-decoration: none;
  margin-bottom: var(--s-5);
}
.article-back:hover { color: var(--brand); }
.article-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.7rem, 1.2rem + 2.4vw, 2.8rem);
  line-height: 1.22;
  letter-spacing: -0.01em;
  margin-top: var(--s-3);
  /* 标题用满 .wrap 宽度（≈1180px），与 page-hero 同宽；正文保持 46rem 窄阅读栏 */
  max-width: var(--maxw);
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6em;
  margin-top: var(--s-5);
  color: var(--text-faint);
  font-size: .9rem;
}
.article-meta__dot { color: var(--line-2); }
/* 新分隔符命名（与 __dot 同效） */
.article-meta__sep  { color: var(--line-2); }

/* 产品详情 meta 行：日期 · 作者 · 阅读 · 点赞，SVG 图标 + 数字加粗 */
.article-meta--post {
  margin-top: var(--s-4);
  font-size: .85rem;
  gap: .55em;
}
.article-meta--post > span,
.article-meta--post > button { display: inline-flex; align-items: center; gap: .35em; }
.article-meta--post .ico-eye,
.article-meta--post .ico-thumb,
.article-meta--post .ico-cal,
.article-meta--post .ico-user {
  width: 14px; height: 14px;
  opacity: .8;
  flex: 0 0 auto;
}
.article-meta--post strong { color: var(--text); font-weight: 600; }

/* 点赞按钮：原生 button 重置 + 交互态 */
button.article-meta__likes {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: opacity var(--t-fast), color var(--t-fast);
}
button.article-meta__likes:hover   { opacity: 1; color: var(--brand); }
button.article-meta__likes:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}
button.article-meta__likes.is-liked {
  color: var(--brand);
}
button.article-meta__likes.is-liked .ico-thumb { fill: currentColor; opacity: 1; }
button.article-meta__likes.is-loading { opacity: .55; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  button.article-meta__likes { transition: none; }
}

/* 面包屑（产品详情 / 分类归档）：产品中心 › 品牌/品类
   每项为 hash 色 pill 标签（复用 .attr-tag 的 --tag-h 配色机制——
   文字/边框/背景同色相，深浅色经设计变量自动适配）。
   与 attr-tag 区分：面包屑用 body 字体、不 uppercase、略大字号（导航可读性）。 */
.article-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin-bottom: var(--s-3);
  font-family: var(--font-body);
  font-size: .82rem;
  letter-spacing: normal;
  text-transform: none;
}
.article-crumb__link,
.article-crumb__current {
  display: inline-flex;
  align-items: baseline;
  padding: .28em .72em;
  border-radius: 999px;
  border: 1px solid hsl(var(--tag-h, 250) 42% 86%);
  background: hsl(var(--tag-h, 250) 64% 95%);
  color: hsl(var(--tag-h, 250) 62% 26%);
  font-size: .78rem;
  line-height: 1.5;
  white-space: nowrap;
  text-decoration: none;
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.article-crumb__link:hover {
  transform: translateY(-1px);
  border-color: hsl(var(--tag-h, 250) 48% 74%);
  box-shadow: 0 4px 10px -4px hsl(var(--tag-h, 250) 50% 40% / .45);
  text-decoration: none;
}
.article-crumb__link:focus-visible {
  outline: 2px solid hsl(var(--tag-h, 250) 55% 45%);
  outline-offset: 2px;
}
.article-crumb__sep {
  color: var(--text-faint);
  font-size: .9em;
  user-select: none;
  padding: 0 .15rem;
}
/* 多分类并列：同一层级平铺，pill 之间留小缝，不再用 › 串联 */
.article-crumb__cats {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
}
:root[data-theme="dark"] .article-crumb__link,
:root[data-theme="dark"] .article-crumb__current {
  border-color: hsl(var(--tag-h, 250) 30% 34%);
  background: hsl(var(--tag-h, 250) 30% 17%);
  color: hsl(var(--tag-h, 250) 72% 83%);
}
@media (prefers-reduced-motion: reduce) {
  .article-crumb__link, .article-crumb__link:hover { transition: none; transform: none; }
}

/* 产品详情 hero：左侧信息流 + 右侧封装示意图（粘性定位） */
.article-hero--grid .article-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  gap: clamp(1.5rem, 1.5vw + .8rem, 3rem);
  align-items: start;
}
.article-hero__main { min-width: 0; }
.article-hero__package {
  position: sticky;
  top: var(--s-6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .6rem;
  background: transparent;
  border: 0;
  color: var(--text-soft);
}
/* 产品 hero 右侧产品图（取自后台「设置特色图片」）；列宽由 .article-hero__grid 的右列 minmax(220px,320px) 约束。透明底图直接坐落在 section 背景上，不另加卡片框 */
.article-hero__fig {
  width: 100%;
  margin: 0;
}
.article-hero__fig img {
  display: block;
  width: 100%;
  height: auto;
}
.hero__package-svg {
  width: 100%;
  max-width: 240px;
  height: auto;
  color: var(--brand);
}
.hero__package-name {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .08em;
  color: var(--text-soft);
}
.article-meta__date strong,
.article-meta__author strong {
  color: var(--text);
  font-weight: 600;
}

/* hero 内部两列布局：h1（主列）/ meta（右列）同行；lead 单独下一行跨两列，与 meta 右边界对齐 */
.article-hero__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1rem;
  row-gap: .5rem;
  align-items: end;
}
.article-hero__main > .article-crumb { grid-column: 1 / -1; }
.article-hero__main > .article-title  { grid-column: 1; }
.article-hero__main > .article-lead   { grid-column: 1 / -1; max-width: 100%; }
.article-meta--right {
  grid-column: 2;
  justify-self: end;
  align-self: end;
  text-align: right;
}
/* 文章详情页 hero（.article-hero--full）：标题/摘要通栏拉满（右缘与 meta 行对齐），
   meta 独占一行右对齐。产品页（--grid）不受影响，仍保持 h1 左 / meta 右同行。 */
.article-hero--full .article-hero__main > .article-title { grid-column: 1 / -1; }
.article-hero--full .article-hero__main > .article-meta--right {
  grid-column: 1 / -1;
  justify-self: end;
}

/* ===== 资讯中心归档页（template-news.php） ===== */
.news-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-8);
}
.news-filter__chip {
  font-family: var(--font-mono);
  font-size: .82rem;
  padding: .42rem .95rem;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  color: var(--text-soft);
  text-decoration: none;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.news-filter__chip:hover { border-color: var(--brand); color: var(--brand); }
.news-filter__chip.is-active {
  border-color: hsl(var(--tag-h, 286) 45% 58%);
  color: hsl(var(--tag-h, 286) 52% 38%);
  background: hsl(var(--tag-h, 286) 70% 95%);
}
:root[data-theme="dark"] .news-filter__chip.is-active {
  background: hsl(var(--tag-h, 286) 35% 24%);
  color: hsl(var(--tag-h, 286) 62% 84%);
}
.news-filter__count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--text-faint);
  white-space: nowrap;
}
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-6);
}
.news-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: calc(var(--r-sm) * 1.6);
  overflow: hidden;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.02);
  transition: transform var(--t-med) var(--ease-out-quart), border-color var(--t-fast), box-shadow var(--t-fast);
}
.news-card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in oklch, var(--brand) 55%, var(--line));
  box-shadow: var(--shadow-lg);
}
.news-card__thumb {
  display: block;
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface-2);
}
.news-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.news-card:hover .news-card__thumb img { transform: scale(1.05); }
.news-card__fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: hsl(var(--tag-h, 286) 45% 42%);
  background:
    radial-gradient(120% 120% at 80% 0%, hsl(var(--tag-h, 286) 60% 90%), hsl(var(--tag-h, 286) 55% 94%));
}
:root[data-theme="dark"] .news-card__fallback {
  color: hsl(var(--tag-h, 286) 55% 78%);
  background:
    radial-gradient(120% 120% at 80% 0%, hsl(var(--tag-h, 286) 35% 28%), hsl(var(--tag-h, 286) 32% 22%));
}
/* 分类标签：封面左上角浮层（与 wiki 卡片同源），半透白模糊底保证在任意封面上可读 */
.news-card__cat {
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  z-index: 2;
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .02em;
  padding: .26rem .62rem;
  border-radius: 999px;
  color: hsl(var(--tag-h, 286) 55% 34%);
  background: hsl(var(--tag-h, 286) 80% 96% / 0.9);
  backdrop-filter: blur(6px);
  border: 1px solid hsl(var(--tag-h, 286) 60% 80% / 0.9);
}
:root[data-theme="dark"] .news-card__cat {
  color: hsl(var(--tag-h, 286) 62% 86%);
  background: hsl(var(--tag-h, 286) 35% 22% / 0.9);
  border-color: hsl(var(--tag-h, 286) 50% 45% / 0.9);
}
.news-card__body {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: var(--s-5);
  flex: 1 1 auto;
}
.news-card__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.14rem;
  line-height: 1.42;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card:hover .news-card__title { color: var(--brand); }
.news-card__excerpt {
  color: var(--text-soft);
  font-size: .9rem;
  line-height: 1.62;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card__meta {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: .7rem;
  border-top: 1px solid var(--line-2);
  font-size: .76rem;
  color: var(--text-faint);
  font-family: var(--font-mono);
}
.news-card__dot { color: var(--line); }
/* 分页：品牌化胶囊按钮 */
.news-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-10);
}
.news-pager .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 .6rem;
  font-family: var(--font-mono);
  font-size: .84rem;
  color: var(--text-soft);
  text-decoration: none;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--surface);
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.news-pager .page-numbers:hover {
  color: var(--brand);
  border-color: var(--brand);
  transform: translateY(-1px);
}
.news-pager .page-numbers.current {
  color: #fff;
  background: var(--brand);
  border-color: var(--brand);
  cursor: default;
}
.news-pager .page-numbers.dots { border: 0; background: none; min-width: 1rem; color: var(--text-faint); }
@media (max-width: 980px) {
  .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .news-grid { grid-template-columns: 1fr; }
}

/* ===== 品牌页（single-brand / archive-brand） ===== */
/* hero 右侧 Logo 卡（叠在 .page-hero--with-media 通用规则之上） */
.brand-hero__logo {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
/* 品牌页 hero 作用域：文字列/Logo 列顶端对齐（Logo 由 JS 精确对到标题顶端），标题单行自适应缩小 */
.page-hero--brand .page-hero__text  { align-self: start; }
.page-hero--brand .page-hero__media { align-self: start; top: 0; }
.page-hero--brand .page-hero__title { white-space: nowrap; }
.brand-hero__logo img {
  max-width: 200px;
  max-height: 120px;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* 品牌介绍：直接挂在 hero 品牌名下 */
.brand-hero__intro {
  margin-top: var(--s-4);
  max-width: 56ch;
  color: var(--text-soft);
  font-size: 1rem;
  line-height: 1.8;
}
.brand-hero__intro p { margin: 0; }
.brand-hero__intro > * + * { margin-top: var(--s-3); }
.brand-hero__intro a { color: var(--brand); }

/* 主要的产品应用：方块背景卡 + 场景插画 */
.brand-apps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--s-5);
}
.brand-app-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-6) var(--s-4);
  border-radius: var(--r-md);
  background: hsl(var(--tag-h, 250) 70% 96%);
  border: 1px solid hsl(var(--tag-h, 250) 50% 88%);
  transition: transform var(--t-med) var(--ease-out-quart), box-shadow var(--t-med) var(--ease-out-quart);
}
.brand-app-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px -18px hsl(var(--tag-h, 250) 50% 45% / .35);
}
.brand-app-card__art { width: 100px; height: 75px; object-fit: contain; }
.brand-app-card__label {
  font-weight: 600;
  font-size: .95rem;
  color: hsl(var(--tag-h, 250) 60% 34%);
  text-align: center;
}

.brand-pm {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-6);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--surface-2);
  max-width: 46rem;
}
.brand-pm__avatar {
  flex: 0 0 auto;
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 1.4rem; font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), color-mix(in oklch, var(--brand) 65%, #000));
}
.brand-pm__info { min-width: 0; }
.brand-pm__name { font-size: 1.1rem; font-weight: 600; margin: 0; display: flex; align-items: center; gap: .5rem; }
.brand-pm__role {
  font-size: .75rem; font-weight: 500; color: var(--brand);
  background: color-mix(in oklch, var(--brand) 10%, #fff);
  border: 1px solid color-mix(in oklch, var(--brand) 22%, transparent);
  padding: .1rem .5rem; border-radius: 99px;
}
.brand-pm__line { display: flex; align-items: center; gap: .5rem; margin: .4rem 0 0; color: var(--text-soft); }
.brand-pm__line a { color: var(--text); text-decoration: none; font-weight: 500; }
.brand-pm__line a:hover { color: var(--brand); }
.brand-pm__ico { width: 18px; height: 18px; color: var(--brand); flex: 0 0 auto; }

.brand-card__logo {
  height: 80px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--s-3);
}
.brand-card__logo img { max-height: 80px; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.brand-empty { color: var(--text-soft); text-align: center; padding: var(--s-12) 0; }

@media (max-width: 640px) {
  .brand-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-hero__logo img { max-width: 150px; max-height: 90px; }
}

@media (max-width: 768px) {
  .article-hero--grid .article-hero__grid {
    grid-template-columns: 1fr;
  }
  .article-hero__package {
    position: static;
    order: 2;
  }
  .article-hero__main { grid-template-columns: 1fr; row-gap: .75rem; }
  .article-hero__main > .article-title { grid-column: 1; }
  .article-meta--right {
    grid-column: 1;
    justify-self: start;
    align-self: auto;
    text-align: left;
  }
  .article-hero--full .article-hero__main > .article-meta--right {
    justify-self: start;
    text-align: left;
  }
  /* Hero 双列在窄屏堆叠为单列，图片在文字下方 */
  .page-hero--with-media .page-hero__inner {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }
  .page-hero--with-media .page-hero__media { order: 2; justify-self: stretch; }
  .page-hero--with-media .page-hero__media img { margin-left: auto; margin-right: auto; }
}

/* 产品属性标签：色相由属性名稳定 hash 得出，文字亮度固定以确保 WCAG AA 对比度 */
.attr-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: var(--s-5);
}
.attr-tag {
  display: inline-flex;
  align-items: baseline;
  padding: .26em .62em;
  border-radius: 999px;
  border: 1px solid hsl(var(--tag-h, 250) 42% 86%);
  background: hsl(var(--tag-h, 250) 64% 95%);
  color: hsl(var(--tag-h, 250) 62% 26%);
  font-size: .72rem;
  line-height: 1.55;
  white-space: nowrap;
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.attr-tag--link { text-decoration: none; }
.attr-tag--link:hover {
  transform: translateY(-1px);
  border-color: hsl(var(--tag-h, 250) 48% 74%);
  box-shadow: 0 4px 10px -4px hsl(var(--tag-h, 250) 50% 40% / .45);
}
.attr-tag--link:focus-visible {
  outline: 2px solid hsl(var(--tag-h, 250) 55% 45%);
  outline-offset: 2px;
}
/* 日期：中性描边，不参与配色 */
.attr-tag--date {
  background: transparent;
  border-color: var(--line-2);
  color: var(--text-faint);
}
:root[data-theme="dark"] .attr-tag {
  border-color: hsl(var(--tag-h, 250) 30% 34%);
  background: hsl(var(--tag-h, 250) 30% 17%);
  color: hsl(var(--tag-h, 250) 72% 83%);
}
:root[data-theme="dark"] .attr-tag--date {
  background: transparent;
  border-color: var(--line-2);
  color: var(--text-faint);
}
/* 密集场景（列表卡片）：更小一档 */
.attr-tags--sm { gap: .4rem; margin-top: var(--s-3); }
.attr-tags--sm .attr-tag { font-size: .74rem; padding: .3em .66em; }
/* .article-crumb__current 现为 hash 色 pill 标签，样式见上方「面包屑」块，勿覆盖 */
@media (prefers-reduced-motion: reduce) {
  .attr-tag, .attr-tag--link:hover { transition: none; transform: none; }
}
.article-lead {
  margin-top: var(--s-6);
  /* 副标题与标题同宽（≈.wrap 内容宽），破出 46rem 阅读栏，保证视觉统一 */
  max-width: var(--maxw);
  font-size: 1.08rem;
  line-height: 1.85;
  color: var(--text-soft);
  border-left: 3px solid var(--brand);
  padding-left: var(--s-5);
}
.article-lead strong { color: var(--text); }

.article__wrap { max-width: 46rem; margin-inline: auto; }
.article p {
  font-size: 1.02rem;
  line-height: 1.95;
  color: var(--text);
  margin: var(--s-5) 0;
  text-wrap: pretty;
  hanging-punctuation: first allow-end;
}
.article-h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.6rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  margin: var(--s-12) 0 var(--s-4);
  padding-top: var(--s-8);
  border-top: 1px solid var(--line);
  text-wrap: balance;
}
.article-h2:first-of-type { border-top: 0; padding-top: 0; margin-top: var(--s-6); }
.callout {
  margin: var(--s-5) 0;
  padding: var(--s-4) var(--s-5);
  background: color-mix(in oklch, var(--brand) 7%, var(--surface));
  border: 1px solid color-mix(in oklch, var(--brand) 18%, transparent);
  border-radius: var(--r-sm);
  font-size: .98rem;
  line-height: 1.85;
}
.callout strong { color: var(--brand); }
.article-list {
  margin: var(--s-5) 0;
  padding-left: 0;
  list-style: none;
}
.article-list li {
  position: relative;
  padding-left: 1.4em;
  margin: var(--s-3) 0;
  line-height: 1.85;
}
.article-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .7em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand);
}
.article-list strong { color: var(--text); }
.article-fig { margin: var(--s-8) 0; }
.article-fig__ph {
  aspect-ratio: 16 / 9;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  background:
    radial-gradient(circle at 30% 30%, color-mix(in oklch, var(--brand) 12%, transparent), transparent 60%),
    var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .05em;
}
.article-fig figcaption {
  margin-top: var(--s-3);
  font-size: .85rem;
  color: var(--text-faint);
  text-align: center;
}
.article-fig img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 32rem;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  background: var(--surface);
  padding: .5rem;
  box-shadow: var(--shadow-sm);
}
.article-fig-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
  margin: var(--s-8) 0;
}
.article-end {
  margin-top: var(--s-12) !important;
  padding-top: var(--s-8);
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--text-soft);
}

/* 关键规格网格 */
.spec-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
  margin: var(--s-8) 0;
}
.spec {
  padding: var(--s-4) var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  text-align: center;
}
.spec__val {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem);
  color: var(--brand);
  line-height: 1.1;
}
.spec__label { margin-top: .4em; font-size: .8rem; color: var(--text-faint); }

/* 文章页响应式 */
@media (max-width: 720px) {
  .spec-grid { grid-template-columns: repeat(2, 1fr); }
  .article-fig-pair { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .spec-grid { grid-template-columns: repeat(2, 1fr); }
  .article-title { max-width: none; }
}

/* ============================================================
   文章正文图片 · 边框修饰 + 多图处理（2026-09-16 升级）
   仅作用于 .article__body（hero 特色图走 .article-fig，不受影响）
   ============================================================ */

/* 单图：留白卡纸式边框（mat），透明底图也显雅致；保留自然比例，不强制裁切 */
.article__body img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--r-sm);
  cursor: zoom-in;          /* 正文图可点击放大（配合 app.js 灯箱模块） */
}
.article__body img:active { cursor: zoom-out; }
.article__body .wp-block-image,
.article__body figure:not(.article-fig) {
  margin: var(--s-7) 0;
}
.article__body .wp-block-image > img,
.article__body .wp-block-image figure > img,
.article__body p > img,
.article__body > img {
  padding: .5rem;
  background: var(--surface);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t-fast) var(--ease-out-quart);
}
.article__body .wp-block-image:hover > img,
.article__body .wp-block-image:hover figure > img,
.article__body p > img:hover,
.article__body > img:hover {
  box-shadow: var(--shadow-md);
}

/* 图注 */
.article__body .wp-block-image figcaption,
.article__body figure figcaption {
  margin-top: var(--s-3);
  font-size: .85rem;
  line-height: 1.6;
  color: var(--text-faint);
  text-align: center;
}
.article__body .wp-block-image.aligncenter { text-align: center; }
.article__body .wp-block-image.aligncenter > img { display: inline-block; }

/* 宽图 / 通栏：在 46rem 阅读栏内适度出血，增强视觉冲击（不触发横向滚动） */
.article__body .alignwide,
.article__body .alignfull {
  width: min(64rem, 94vw);
  margin-left: 50%;
  transform: translateX(-50%);
}

/* 多图画廊：固定 3 列（一行三张），不出血、与正文同宽——每张宽度 = 内容栏宽扣除间距后均分，
   高度按原图等比例（不做 4:3 裁切、不变形）。
   ⚠️ WP core 会给 .has-nested-images 的内层 figure 设显式 width:calc(...)（实测把图压成 ~106px），
   故 figure/img 的 width 必须 !important 压回，格子才能撑满。 */
.article__body .wp-block-gallery,
.article__body .wp-block-gallery.is-layout-flex {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
  margin: var(--s-6) 0;
  width: 100%;
}
.article__body .wp-block-gallery figure {
  width: auto !important;
  margin: 0 !important;
}
.article__body .wp-block-gallery figure img {
  width: 100% !important;
  height: auto !important;
  max-width: 100%;
  object-fit: fill;
  padding: 0;
  border-radius: var(--r-xs);
  display: block;
}

/* 双图并排（.article-fig-pair）：统一卡纸框，去掉硬裁切 */
.article__body .article-fig-pair .article-fig img {
  aspect-ratio: auto;
  object-fit: initial;
}

@media (max-width: 720px) {
  .article__body .alignwide,
  .article__body .alignfull {
    width: 100%;
    margin-left: 0;
    transform: none;
  }
  /* 画廊移动端降级：2 列 */
  .article__body .wp-block-gallery,
  .article__body .wp-block-gallery.is-layout-flex {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .article__body .wp-block-gallery,
  .article__body .wp-block-gallery.is-layout-flex {
    grid-template-columns: 1fr;
  }
}

/* —— 图片灯箱：点击放大，←/→ 切换，Esc/点背景关闭（配合 app.js 同名模块） —— */
.jr-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgb(16 12 34 / .92);
}
.jr-lightbox.is-open { display: flex; }
.jr-lightbox__fig {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
}
.jr-lightbox__fig img {
  max-width: 100%;
  max-height: 82vh;
  width: auto;
  height: auto;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-lg);
  background: var(--surface);
}
.jr-lightbox__fig figcaption {
  color: rgb(255 255 255 / .78);
  font-size: .9rem;
  line-height: 1.6;
  text-align: center;
  max-width: 80vw;
}
.jr-lightbox__close,
.jr-lightbox__nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgb(255 255 255 / .25);
  border-radius: 50%;
  background: rgb(255 255 255 / .08);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.jr-lightbox__close:hover,
.jr-lightbox__nav:hover { background: color-mix(in oklch, var(--brand) 70%, transparent); border-color: transparent; }
.jr-lightbox__close { top: 1rem; right: 1.25rem; }
.jr-lightbox__nav { top: 50%; transform: translateY(-50%); font-size: 1.8rem; padding-bottom: .15em; }
.jr-lightbox__prev { left: 1rem; }
.jr-lightbox__next { right: 1rem; }
.jr-lightbox__count {
  position: absolute;
  bottom: 1.1rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgb(255 255 255 / .65);
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .08em;
}
@media (max-width: 720px) {
  .jr-lightbox__nav { width: 38px; height: 38px; }
  .jr-lightbox__prev { left: .5rem; }
  .jr-lightbox__next { right: .5rem; }
}

/* ============================================================
   PRODUCT DETAIL（产品详情页，product-ax58101.html 等模板）
   复用 .article / .article__wrap / .article-h2 阅读栏体系
   ============================================================ */

/* 标题下方副标：块级换行显示，弱化于主标题 */
.product-sub {
  display: block;
  margin-top: var(--s-3);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.12rem);
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--text-soft);
}

/* 核心优势网格（3 列卡片，发丝线 + 留白） */
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  margin: var(--s-8) 0;
}
.benefit {
  position: relative;
  padding: var(--s-6) var(--s-5) var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  transition: border-color var(--t-fast), transform var(--t-med) var(--ease-out-quart), box-shadow var(--t-med) var(--ease-out-quart);
}
.benefit:hover {
  border-color: color-mix(in oklch, var(--brand) 45%, transparent);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px -20px color-mix(in oklch, var(--brand) 60%, transparent);
}
.benefit__no {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  color: var(--brand);
}
.benefit__title {
  margin-top: var(--s-3);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.08rem;
  line-height: 1.4;
  color: var(--text);
}
.benefit__desc {
  margin-top: var(--s-2);
  color: var(--text-soft);
  font-size: 0.92rem;
  line-height: 1.7;
}

/* ============================================================
   统一表格组件（全站通用）
   覆盖：产品规格表 .spec-table / 对比表 .compare-table /
        产品列表 .prodlist-table / Gutenberg .wp-block-table table
   设计：圆角发丝线边框 + 品牌浅底表头 + 行 hover 高亮；
        深浅色经设计变量自动适配（:root[data-theme="dark"]）。
   ============================================================ */
/* 统一表格组件：视觉规范对齐 products.html 的 .prod-table
   —— 圆角发丝线边框(--line-2) + 中性表头(文字-soft / 底色 surface-2，mono+uppercase+0.08em)
      + 行 hover 品牌 6% 淡色；深浅色经设计变量自动适配。
   覆盖：.spec-table / .compare-table / .prodlist-table / .wp-block-table table / .prod-table（参考类同名） */
.jbr-table,
.spec-table,
.compare-table,
.prodlist-table,
.wp-block-table table,
.prod-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: var(--s-7) 0;
  font-size: 0.92rem;
  line-height: 1.6;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--surface);
  font-variant-numeric: tabular-nums;
}
.jbr-table th, .jbr-table td,
.spec-table th, .spec-table td,
.compare-table th, .compare-table td,
.prodlist-table th, .prodlist-table td,
.wp-block-table th, .wp-block-table td,
.prod-table th, .prod-table td {
  padding: var(--s-3) var(--s-4);
  text-align: left;
  border-bottom: 1px solid var(--line-2);
  vertical-align: middle;
}
.jbr-table thead th,
.spec-table thead th,
.compare-table thead th,
.prodlist-table thead th,
.wp-block-table thead th,
.prod-table thead th {
  position: sticky; top: 0; z-index: 2;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
  background: var(--surface-2);
  white-space: nowrap;
}
.jbr-table tbody tr:last-child th,
.jbr-table tbody tr:last-child td,
.spec-table tbody tr:last-child th,
.spec-table tbody tr:last-child td,
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td,
.prodlist-table tbody tr:last-child th,
.prodlist-table tbody tr:last-child td,
.wp-block-table tbody tr:last-child th,
.wp-block-table tbody tr:last-child td,
.prod-table tbody tr:last-child th,
.prod-table tbody tr:last-child td {
  border-bottom: 0;
}
.jbr-table tbody tr:hover td,
.spec-table tbody tr:hover td,
.compare-table tbody tr:hover td,
.prodlist-table tbody tr:hover td,
.wp-block-table tbody tr:hover td,
.prod-table tbody tr:hover td {
  background: color-mix(in oklch, var(--brand) 6%, transparent);
}
.jbr-table caption,
.spec-table caption,
.compare-table caption,
.prodlist-table caption,
.wp-block-table caption,
.prod-table caption {
  caption-side: bottom;
  padding-top: var(--s-3);
  color: var(--text-faint);
  font-size: 0.82rem;
  text-align: left;
}

/* 技术规格表：键值对，首列为参数名（行表头，无 thead）
   中性 surface-2 底区分标签列，正文用 body 字体、不 uppercase（与数据表头区分） */
.spec-table th {
  width: 38%;
  font-weight: 500;
  color: var(--text-soft);
  background: var(--surface-2);
  text-transform: none;
  letter-spacing: normal;
  font-family: var(--font-body);
  font-size: 0.92rem;
}
.spec-table td {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.9rem;
}

/* 对比表（横向多列，可横向滚动；外观由统一表格组件提供） */
.table-wrap {
  overflow-x: auto;
}
.compare-table { min-width: 480px; }
.compare-table th,
.compare-table td { white-space: nowrap; }
.compare-table tbody td:first-child {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text);
}
/* 当前型号高亮行：整行品牌浅底 + 左缘品牌竖线 */
.compare-table .is-current td {
  background: color-mix(in oklch, var(--brand) 8%, transparent);
}
.compare-table .is-current td:first-child {
  color: var(--brand);
  box-shadow: inset 3px 0 0 var(--brand);
}

/* 更多特性清单（紫色实心对勾圆点） */
.check-list {
  list-style: none;
  margin: var(--s-8) 0;
  padding: 0;
}
.check-list li {
  position: relative;
  padding-left: 1.8em;
  margin: var(--s-3) 0;
  line-height: 1.8;
  color: var(--text);
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 1.05em; height: 1.05em;
  border-radius: 50%;
  background: color-mix(in oklch, var(--brand) 14%, transparent);
}
.check-list li::after {
  content: "";
  position: absolute;
  left: 0.4em; top: 0.85em;
  width: 0.3em; height: 0.52em;
  border: solid var(--brand);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* 典型应用网格（3 列卡片，呼应 .benefit） */
.app-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  margin: var(--s-8) 0;
}
.app {
  padding: var(--s-5) var(--s-6);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--surface);
  transition: border-color var(--t-fast), transform var(--t-med) var(--ease-out-quart);
}
.app:hover {
  border-color: var(--brand);
  transform: translateY(-3px);
}
.app__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.02rem;
  color: var(--text);
}
.app__desc {
  margin-top: var(--s-2);
  color: var(--text-soft);
  font-size: 0.88rem;
  line-height: 1.6;
}

/* 产品详情页响应式 */
@media (max-width: 720px) {
  .benefit-grid { grid-template-columns: repeat(2, 1fr); }
  .app-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .benefit-grid { grid-template-columns: 1fr; }
  .app-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   PRODUCT TABS（产品详情页签 + 5 个子模块）
   产品简介 / 应用指南 / 相关下载 / 产品问答 / 产品留言
   ============================================================ */

/* 标签条：粘性贴在 64px 高的 nav 之下 */
.product-tabs {
  position: sticky;
  top: 64px;
  z-index: 5;
  background: color-mix(in oklch, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-2);
}
.product-tabs__inner {
  display: flex;
  gap: var(--s-1);
  overflow-x: auto;
  scrollbar-width: none;
}
.product-tabs__inner::-webkit-scrollbar { display: none; }
.product-tab {
  position: relative;
  padding: var(--s-4);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-soft);
  background: transparent;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--t-fast);
}
.product-tab:hover { color: var(--text); }
.product-tab:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 4px;
  border-radius: 4px;
}
.product-tab.is-active { color: var(--brand); }
.product-tab.is-active::after {
  content: "";
  position: absolute;
  left: var(--s-4);
  right: var(--s-4);
  bottom: -1px;
  height: 2px;
  background: var(--brand);
  border-radius: 2px 2px 0 0;
}

/* tab pane 切换淡入（hidden → visible 时播放一次） */
.tab-pane[hidden] { display: none; }
.tab-pane:not([hidden]) {
  animation: pane-fade var(--t-med) var(--ease-out-quart);
}
@keyframes pane-fade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
/* 每个 pane 首个 h2 取消顶边线、收紧顶部间距 */
.tab-pane .article-h2:first-of-type {
  border-top: 0;
  padding-top: 0;
  margin-top: var(--s-6);
}

/* 产品页：tab 紧接的阅读栏把顶部留白收一收，把内容上移
   （.section 默认 padding-top 72~104px 太宽） */
.product-tabs + .article { padding-top: clamp(var(--s-6), 4vw, var(--s-10)); }

/* 应用指南：拓扑卡片网格 */
/* 应用指南：文章列表（新文章直接追加 .guide-article 即可） */
.guide-articles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
  margin: var(--s-8) 0;
}
.guide-more {
  margin-top: var(--s-6);
  text-align: right;
}
/* 平板：两列过早会挤压 200px 封面，提前塌为单列 */
@media (max-width: 900px) {
  .guide-articles { grid-template-columns: 1fr; }
}
.guide-article {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
  align-content: start;
  padding: var(--s-4);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--t-fast), transform var(--t-med) var(--ease-out-quart), box-shadow var(--t-med) var(--ease-out-quart);
}
.guide-article:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -20px color-mix(in oklch, var(--brand) 55%, transparent);
}
.guide-article__cover {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-sm);
  overflow: hidden;
  background:
    radial-gradient(60% 80% at 30% 20%, color-mix(in oklch, var(--brand) 22%, transparent), transparent 70%),
    color-mix(in oklch, var(--brand) 8%, var(--surface-2));
}
.guide-article__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, color-mix(in oklch, var(--text) 10%, transparent) 1px, transparent 1.6px);
  background-size: 18px 18px;
  opacity: .5;
}
.guide-article__cover--alt {
  background:
    radial-gradient(60% 80% at 70% 30%, color-mix(in oklch, var(--brand) 16%, transparent), transparent 70%),
    color-mix(in oklch, var(--text) 5%, var(--surface-2));
}
.guide-article__tag {
  position: absolute;
  left: var(--s-2);
  top: var(--s-2);
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: #fff;
  background: color-mix(in oklch, var(--brand) 78%, #000);
  padding: 0.25em 0.7em;
  border-radius: 999px;
}
.guide-article__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.08rem;
  line-height: 1.4;
  color: var(--text);
}
.guide-article__excerpt {
  margin: var(--s-2) 0 0;
  color: var(--text-soft);
  font-size: 0.9rem;
  line-height: 1.6;
}
.guide-article__meta {
  display: flex;
  gap: 0.5em;
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--text-faint);
}
.guide-article__meta .dot { color: var(--line-2); }
.guide-article__arrow {
  display: none;
  color: var(--text-faint);
  font-size: 1.1rem;
  transition: color var(--t-fast), transform var(--t-fast);
}
.guide-article:hover .guide-article__arrow {
  color: var(--brand);
  transform: translateX(3px);
}
.guide-article__main { min-width: 0; }
.guide-article__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.guide-back {
  margin-top: 2rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--brand);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.guide-back p { margin: 0; color: var(--text-soft); }
.guide-note {
  margin: var(--s-6) 0 var(--s-8);
  padding: var(--s-4) var(--s-5);
  border-left: 3px solid var(--brand);
  background: color-mix(in oklch, var(--brand) 5%, transparent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 0.92rem;
  color: var(--text-soft);
  line-height: 1.7;
}

/* 相关下载工具栏（计数 + 下载全部） */
.download-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin: var(--s-6) 0 var(--s-5);
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--surface);
}
.download-toolbar__count {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text-soft);
}
.download-all {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--brand);
  padding: 0.5em 1.1em;
  border: 1px solid color-mix(in oklch, var(--brand) 35%, transparent);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.download-all:hover { background: var(--accent-solid); color: #fff; }
.download-all:disabled { opacity: 0.55; cursor: default; }

/* 代码块 */
.code-block {
  margin: var(--s-8) 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--surface);
}
.code-block__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-3) var(--s-5);
  background: color-mix(in oklch, var(--brand) 4%, var(--surface));
  border-bottom: 1px solid var(--line-2);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-soft);
  letter-spacing: 0.04em;
}
.code-block__copy {
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--text-soft);
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.code-block__copy:hover {
  color: var(--brand);
  border-color: color-mix(in oklch, var(--brand) 40%, transparent);
}
.code-block__pre {
  margin: 0;
  padding: var(--s-5);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.7;
  overflow-x: auto;
  color: var(--text);
  background: var(--surface);
}
.code-block__pre code {
  font-family: inherit;
  white-space: pre;
  display: block;
}

/* 下载列表 */
.download-list {
  list-style: none;
  margin: var(--s-8) 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.download-item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-5);
  border-bottom: 1px solid var(--line-2);
  transition: background var(--t-fast);
}
.download-item:last-child { border-bottom: 0; }
.download-item:hover {
  background: color-mix(in oklch, var(--brand) 4%, transparent);
}
.download-item__icon {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--brand);
  border: 1px solid color-mix(in oklch, var(--brand) 30%, transparent);
  border-radius: var(--r-sm);
  padding: 0.5em 0;
  text-align: center;
  background: color-mix(in oklch, var(--brand) 6%, transparent);
}
.download-item__icon--zip {
  color: #fff;
  background: var(--brand);
  border-color: var(--brand);
}
.download-item__main { min-width: 0; }
.download-item__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.02rem;
  color: var(--text);
  margin: 0;
  line-height: 1.4;
}
.download-item__meta {
  margin-top: 0.25em;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-faint);
  letter-spacing: 0.02em;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
}
.download-item__chip {
  display: inline-block;
  padding: 0.1em 0.55em;
  border: 1px solid color-mix(in oklch, var(--text-faint) 35%, transparent);
  border-radius: 3px;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--text-soft);
  background: color-mix(in oklch, var(--surface-2) 70%, transparent);
  white-space: nowrap;
}
.download-item__desc {
  margin-top: 0.4em;
  font-size: 0.88rem;
  color: var(--text-soft);
  line-height: 1.6;
}
.download-item__btn {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--brand);
  padding: 0.45em 1.1em;
  border: 1px solid color-mix(in oklch, var(--brand) 35%, transparent);
  border-radius: 999px;
  transition: background var(--t-fast), color var(--t-fast);
  white-space: nowrap;
  text-decoration: none;
}
.download-item__btn:hover {
  background: var(--brand);
  color: #fff;
}

/* FAQ accordion */
.faq-list {
  margin: var(--s-8) 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  transition: border-color var(--t-fast);
}
.faq-item[open] {
  border-color: color-mix(in oklch, var(--brand) 35%, transparent);
}
.faq-item__q {
  list-style: none;
  cursor: pointer;
  padding: var(--s-5) var(--s-6) var(--s-5) var(--s-5);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  border-radius: var(--r-sm);
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q > span:first-child { flex: 1; }
.faq-item__icon {
  flex: 0 0 14px;
  width: 14px; height: 14px;
  position: relative;
  transition: transform var(--t-fast);
}
.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: var(--brand);
  transform: translate(-50%, -50%);
  transition: transform var(--t-fast), opacity var(--t-fast);
}
.faq-item__icon::before { width: 14px; height: 1.5px; }
.faq-item__icon::after { width: 1.5px; height: 14px; }
.faq-item[open] .faq-item__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}
.faq-item__a {
  padding: 0 var(--s-5) var(--s-5);
  color: var(--text-soft);
  font-size: 0.96rem;
  line-height: 1.85;
}
.faq-item__a p { margin: 0 0 var(--s-3); }
.faq-item__a p:last-child { margin-bottom: 0; }
.faq-item__a strong { color: var(--text); }

/* 留言表单 */
.comment-form {
  margin: var(--s-8) 0;
  padding: var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.form-field__label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-soft);
}
.req { color: var(--brand); }
.form-input {
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--bg);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.form-input:hover { border-color: var(--text-faint); }
.form-input:focus {
  outline: none;
  border-color: var(--brand);
  background: var(--surface);
}
.form-input--select {
  appearance: none;
  padding-right: var(--s-8);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-soft) 50%),
    linear-gradient(135deg, var(--text-soft) 50%, transparent 50%);
  background-position: calc(100% - 18px) center, calc(100% - 12px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.form-input--textarea {
  resize: vertical;
  min-height: 120px;
  font-family: var(--font-body);
  line-height: 1.7;
}
.form-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-5);
  flex-wrap: wrap;
}
.form-note {
  font-size: 0.8rem;
  color: var(--text-faint);
  line-height: 1.6;
  max-width: 48ch;
  margin: 0;
}
.link-btn {
  background: transparent;
  border: 0;
  color: var(--brand);
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--t-fast);
}
.link-btn:hover { color: color-mix(in oklch, var(--brand) 70%, var(--text)); }

/* 产品页签响应式 */
@media (max-width: 720px) {
  .guide-articles {
    grid-template-columns: 1fr;
  }
  .guide-article {
    grid-template-columns: 1fr;
    gap: var(--s-3);
  }
  .guide-article__cover { aspect-ratio: 16 / 7; }
  .guide-article__arrow { display: none; }
  .form-row { grid-template-columns: 1fr; }
  .download-item {
    grid-template-columns: 48px 1fr;
    grid-template-rows: auto auto;
  }
  .download-item__btn {
    grid-column: 1 / -1;
    justify-self: end;
  }
  .form-foot {
    flex-direction: column;
    align-items: stretch;
  }
  .form-submit { width: 100%; }
}

/* 产品分类卡片（3 列，呼应 .biz/.card 发丝线 + 留白） */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-8);
}
.prod-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-8) var(--s-7);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--bg);
  transition: border-color var(--t-fast), transform var(--t-med) var(--ease-out-quart);
}
.prod-card:hover { border-color: var(--brand); transform: translateY(-3px); }
.prod-card__icon {
  width: 38px; height: 38px;
  color: var(--brand);
  margin-bottom: var(--s-2);
}
.prod-card__icon svg { width: 100%; height: 100%; display: block; }
.prod-card__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: 1.2;
}
.prod-card__sub {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.prod-card__desc {
  margin-top: var(--s-2);
  color: var(--text-soft);
  font-size: 0.92rem;
  line-height: 1.65;
}
.prod-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-4);
}
.prod-card__tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 0.28rem 0.65rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  color: var(--text-soft);
}
.prod-card__link {
  margin-top: var(--s-5);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
}

/* 授权代理品牌条：宽度随内容自适应（满内容宽自动换行，不强制等列） */
.brand-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8) var(--s-10);
}
.brand-chip {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--s-4);
  flex: 0 0 auto;
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-2);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.brand-chip:hover,
.brand-chip:focus-visible {
  border-top-color: var(--brand);
  transform: translateY(-2px);
}
.brand-chip:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.brand-chip__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.brand-chip__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
/* 品牌 chip 定位区：每个关键词一个 hash 色 pill，复用 attr-tag / crumb 的 --tag-h 机制（crc32%360） */
.brand-chip__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
.brand-chip__tag {
  display: inline-block;
  font-size: 0.7rem;
  line-height: 1.5;
  border-radius: 999px;
  padding: 0.12em 0.6em;
  background: hsl(var(--tag-h, 250) 64% 95%);
  color: hsl(var(--tag-h, 250) 62% 26%);
  border: 1px solid hsl(var(--tag-h, 250) 42% 86%);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}
:root[data-theme="dark"] .brand-chip__tag {
  background: hsl(var(--tag-h, 250) 30% 17%);
  color: hsl(var(--tag-h, 250) 72% 83%);
  border-color: hsl(var(--tag-h, 250) 30% 34%);
}
.brand-chip__logo {
  display: block;
  flex: 0 0 auto;
  height: 56px;
  max-width: 200px;
  width: auto;
  object-fit: contain;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: transform var(--t-fast), border-color var(--t-fast);
}
.brand-chip:hover .brand-chip__logo {
  transform: translateY(-1px);
  border-color: var(--brand);
}

/* 合作伙伴（客户）版：5 列网格 + 注释行（独立 display:grid，不受上方 flex 自适应影响） */
.brand-strip.brand-strip--partners {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.brand-strip--partners .brand-chip {
  padding-top: var(--s-4);
  align-items: center;
  text-align: center;
}
.brand-strip--partners .brand-chip__name {
  font-size: 1rem;
  letter-spacing: -0.005em;
}
/* 合作伙伴 LOGO 图片版：白底 logo 套一层细边框卡片，避免在灰段上突兀 */
.brand-chip--logo {
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: var(--s-4) var(--s-3);
  background: color-mix(in oklch, var(--surface) 45%, transparent);
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.brand-chip--logo:hover {
  border-color: var(--brand);
  background: var(--surface);
  transform: translateY(-1px);
}
.brand-chip__img {
  display: block;
  max-height: 56px;
  max-width: 80%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(0.1);
  transition: filter var(--t-fast), opacity var(--t-fast);
  opacity: 0.92;
}
.brand-chip--logo:hover .brand-chip__img { opacity: 1; filter: grayscale(0); }
.brand-strip__note {
  margin: var(--s-7) auto 0;
  max-width: 56ch;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-faint);
  letter-spacing: 0.02em;
}

/* 产品中心响应式 */
@media (max-width: 900px) {
  .prod-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); }
  .brand-strip { grid-template-columns: repeat(2, 1fr); }
  .brand-strip.brand-strip--partners { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .prod-grid { grid-template-columns: 1fr; }
  .brand-strip { grid-template-columns: 1fr; }
  .brand-strip.brand-strip--partners { grid-template-columns: repeat(2, 1fr); }
  .page-hero__desc { font-size: 1rem; }
}

/* ============================================================
   ABOUT（关于我们页，复用首页令牌与 section 体系）
   ============================================================ */

/* 发展历程：自动滑动轮播（年份大字 + 标题 + 描述） */
.ms { position: relative; }
.ms__viewport { overflow: hidden; }
.ms__track {
  display: flex;
  transition: transform var(--t-med) var(--ease-out-quart);
  will-change: transform;
}
.ms__slide {
  flex: 0 0 100%;
  min-width: 0;
  padding: var(--s-4) 0;
  box-sizing: border-box;
}
.ms__year {
  display: block;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(2.6rem, 1.6rem + 4.5vw, 4.4rem);
  color: var(--brand);
  line-height: 1;
  letter-spacing: 0.01em;
}
.ms__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem);
  line-height: 1.3;
  margin-top: var(--s-5);
  color: var(--text);
}
.ms__desc {
  margin-top: var(--s-3);
  color: var(--text-soft);
  font-size: 1rem;
  line-height: 1.75;
  max-width: 60ch;
}
.ms__dots {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  justify-content: center;
  margin-top: var(--s-9);
}
.ms__dot {
  width: 9px; height: 9px;
  padding: 0; border: none; border-radius: 50%;
  background: var(--line-2);
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast), width var(--t-fast);
}
.ms__dot:hover { background: var(--text-faint); }
.ms__dot.is-active { background: var(--brand); transform: scale(1.2); width: 22px; border-radius: 999px; }

/* 公司动态列表 */
.news-list { list-style: none; padding: 0; margin: 0; }
.news-item {
  display: grid;
  grid-template-columns: 152px 96px 1fr 24px;
  gap: var(--s-6);
  align-items: center;
  padding: var(--s-5) 0;
  border-top: 1px solid var(--line-2);
  transition: background var(--t-fast);
}
.news-item:last-child { border-bottom: 1px solid var(--line-2); }
.news-item:hover { background: color-mix(in oklch, var(--brand) 4%, transparent); }
.news-item__date {
  font-family: var(--font-mono);
  color: var(--text-faint);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}
.news-item__tag {
  justify-self: start;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--brand);
  border: 1px solid color-mix(in oklch, var(--brand) 35%, transparent);
  border-radius: 999px;
  padding: 0.25em 0.85em;
  white-space: nowrap;
}
.news-item__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--text);
  line-height: 1.4;
}
.news-item__arrow {
  color: var(--text-faint);
  text-decoration: none;
  font-size: 1.1rem;
  transition: color var(--t-fast), transform var(--t-fast);
}
.news-item:hover .news-item__arrow { color: var(--brand); transform: translateX(3px); }

/* 联系我们（左地址 / 右产品线组） */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-12);
}
.contact-col__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.15rem;
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line-2);
}
.contact-block { margin-bottom: var(--s-6); }
.contact-block__city { font-weight: 600; color: var(--text); margin-bottom: var(--s-1); }
.contact-block__addr { color: var(--text-soft); font-size: 0.95rem; line-height: 1.7; }
.contact-group {
  padding: var(--s-4) 0;
  border-top: 1px solid var(--line-2);
}
.contact-group:first-of-type { border-top: none; padding-top: 0; }
.contact-group__name { font-weight: 500; color: var(--text); margin-bottom: var(--s-1); }
.contact-group__line {
  color: var(--text-soft);
  font-size: 0.9rem;
  line-height: 1.6;
  font-family: var(--font-mono);
}

/* 关于我们页 profile：纯文字介绍（无视频/无数据 → 单列居中、限宽 64rem） */
.company--text-only {
  grid-template-columns: minmax(0, 64rem);
  justify-content: center;
}

/* ============================================================
   关于我们页装饰：柔光 + 点阵质感 + 里程碑同心圆母题
   装饰层 z-index:-1，置于灰底之上、文字/logo 之下（section 已建 stacking context）
   ============================================================ */
#profile, #milestones, #brands, #news, #contact {
  position: relative;
  z-index: 0;
  overflow: hidden;
}
#profile::before, #milestones::before, #brands::before, #news::before, #contact::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

/* #profile：左下品牌柔光 */
#profile::before {
  right: auto; left: -14%; bottom: -34%; top: auto;
  width: 62%; height: 150%;
  background: radial-gradient(50% 50% at 30% 70%, color-mix(in oklch, var(--brand) 9%, transparent), transparent 72%);
}

/* #milestones：右上同心圆环（呼应主视觉同心圆母题） */
#milestones::before {
  top: 5%; right: 2%;
  width: 340px; height: 340px;
  border-radius: 50%;
  border: 1px solid color-mix(in oklch, var(--brand) 18%, transparent);
  opacity: .5;
}
#milestones::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  top: 13%; right: 9%;
  width: 200px; height: 200px;
  border-radius: 50%;
  border: 1px solid color-mix(in oklch, var(--brand) 12%, transparent);
  opacity: .4;
}

/* #brands：右下品牌柔光 + 细点阵 */
#brands::before {
  inset: 0;
  background:
    radial-gradient(42% 60% at 93% 90%, color-mix(in oklch, var(--brand) 7%, transparent), transparent 70%),
    radial-gradient(circle, color-mix(in oklch, var(--text) 10%, transparent) 1px, transparent 1.6px);
  background-size: auto, 32px 32px;
  opacity: .5;
}

/* #news：左上细点阵 */
#news::before {
  inset: 0;
  background: radial-gradient(circle, color-mix(in oklch, var(--text) 9%, transparent) 1px, transparent 1.6px);
  background-size: 32px 32px;
  opacity: .45;
}

/* #contact：右侧品牌柔光 */
#contact::before {
  left: auto; right: -16%; top: -22%; bottom: auto;
  width: 56%; height: 140%;
  background: radial-gradient(50% 50% at 70% 30%, color-mix(in oklch, var(--brand) 8%, transparent), transparent 72%);
}

/* 关于我们页响应式 */
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: var(--s-10); }
}
@media (max-width: 720px) {
  .news-item {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "date arrow"
      "title title"
      "tag tag";
    gap: var(--s-2) var(--s-4);
  }
  .news-item__date { grid-area: date; }
  .news-item__arrow { grid-area: arrow; align-self: center; }
  .news-item__title { grid-area: title; }
  .news-item__tag { grid-area: tag; }
  /* 同心圆环在窄屏缩小，避免占据过多 */
  #milestones::before { width: 220px; height: 220px; }
  #milestones::after { width: 130px; height: 130px; top: 8%; right: 4%; }
  /* 公司简介照片墙：窄屏 2×2，高度更小 */
  .profile-gallery { grid-template-columns: repeat(2, 1fr); }
  .profile-gallery__photo,
  .profile-gallery__wide { aspect-ratio: 4/3; max-height: 140px; }
}
@media (max-width: 560px) {
  /* 极小屏隐藏圆环，仅保留柔光，避免局促 */
  #milestones::before, #milestones::after { display: none; }
  /* 公司简介照片墙：手机仍 2×2，避免拉成 4 行长条 */
  .profile-gallery { grid-template-columns: repeat(2, 1fr); }
  .profile-gallery__photo,
  .profile-gallery__wide { aspect-ratio: 3/2; max-height: 130px; }
}
@media (max-width: 560px) {
  /* 极小屏隐藏圆环，仅保留柔光，避免局促 */
  #milestones::before, #milestones::after { display: none; }
}

/* ============================================================
   服务与支持中心 (support.html)
   聚合导航：三大入口 + 四维度资源卡（文档/问答/视频）
   （站内搜索已移除，统一走全站全局搜索）
   ============================================================ */

/* 三大主入口 */
.entry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); margin-top: var(--s-10); }
.entry-card {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-6); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--surface); text-decoration: none; color: inherit;
  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.entry-card:hover {
  border-color: var(--brand); transform: translateY(-3px);
  box-shadow: 0 18px 40px -30px color-mix(in oklch, var(--brand) 60%, transparent);
}
.entry-card__icon {
  width: 46px; height: 46px; border-radius: var(--r-sm); display: grid; place-items: center;
  color: var(--brand); background: color-mix(in oklch, var(--brand) 9%, transparent);
}
.entry-card__title { font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; }
.entry-card__desc { color: var(--text-soft); font-size: 0.95rem; flex: 1; }
.entry-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-2); }
.entry-card__count { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-faint); }
.entry-card__go { color: var(--brand); font-weight: 500; font-size: 0.9rem; }
.entry-card:hover .entry-card__go { text-decoration: underline; }

/* 资源聚合卡（主应用 / 详细应用 / 品牌 / 型号） */
.res-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: var(--s-5); }
.res-card {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-5); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--surface); text-decoration: none; color: inherit;
  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.res-card:hover {
  border-color: var(--brand); transform: translateY(-2px);
  box-shadow: 0 14px 32px -26px color-mix(in oklch, var(--brand) 55%, transparent);
}
.res-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.res-card__title { font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; }
.res-card__badge {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em;
  color: var(--brand); background: color-mix(in oklch, var(--brand) 10%, transparent);
  border-radius: 999px; padding: 0.18rem 0.6rem; white-space: nowrap;
}
.res-card__desc { color: var(--text-soft); font-size: 0.9rem; min-height: 2.6em; }
.res-card__stats { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--line); }
.res-stat { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--text-soft); }
.res-stat svg { color: var(--brand); flex: none; }
.res-stat__n { font-family: var(--font-mono); font-weight: 500; color: var(--text); }
.res-stat--none { color: var(--text-faint); }
.res-stat--none svg { color: var(--text-faint); }
.res-stat--none .res-stat__n { color: var(--text-faint); font-weight: 400; }
.res-note { color: var(--text-faint); font-size: 0.9rem; margin-top: var(--s-3); }

/* 展开更多 */
.res-more { display: flex; justify-content: center; margin-top: var(--s-8); }
.res-more__btn {
  border: 1px solid var(--line-2); border-radius: 999px; padding: 0.6rem 1.6rem;
  font-size: 0.9rem; color: var(--text-soft); background: var(--surface);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.res-more__btn:hover { color: var(--brand); border-color: var(--brand); }

/* 无结果提示 */
@media (max-width: 720px) {
  .entry-grid { grid-template-columns: 1fr; }
  .entry-card { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .entry-card__desc { flex-basis: 100%; }
  .entry-card__foot { flex-basis: 100%; }
}

/* ============================================================
   知识库列表页 (document-wiki.html)
   类型筛选 tab + 搜索 + 可筛选条目列表（技术文档 / FAQ / 视频）
   单一科技紫约束：类型仅用图标 + 品牌色 pill 区分，不引入新色相
   ============================================================ */
.kb-toolbar {
  position: sticky; top: 64px; z-index: 20;
  background: color-mix(in oklch, var(--surface) 90%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-2);
  padding-block: var(--s-4);
}
.kb-toolbar .wrap { display: flex; flex-direction: column; gap: 0; position: relative; } /* gap 0：tab 指示条底缘压在 .kb-tabs-row 的虚线上（轨道式）；relative 作为筛选抽屉的定位参照 */

/* 类型筛选 tab：下划线标签式（非胶囊），与下方维度筛选的 pill 形成形态对比 */
.kb-tabs { display: flex; flex-wrap: wrap; gap: var(--s-5); }
.kb-tab {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.95rem; font-weight: 500; color: var(--text-soft);
  border: 0; border-radius: 0; padding: 0.55rem 0.15rem;
  background: transparent; cursor: pointer;
  transition: color var(--t-fast);
}
.kb-tab::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; border-radius: 2px; background: var(--brand);
  transform: scaleX(0); transform-origin: center;
  transition: transform var(--t-fast);
}
.kb-tab:hover { color: var(--brand); }
.kb-tab.is-active { color: var(--brand); font-weight: 600; }
.kb-tab.is-active::after { transform: scaleX(1); }
.kb-tab__n { font-family: var(--font-mono); font-size: 0.78rem; opacity: 0.7; }
.kb-tab.is-active .kb-tab__n { opacity: 0.85; }

/* 多维筛选（方案 A）：与类型 tab 同一行右置；每维一个下拉按钮，点开浮层选值；常驻 1 行，长维度两列网格 + 滚动封顶 */
.kb-filters {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s-2);
  margin-left: auto;
}
.kb-dd { position: relative; }
.kb-dd__btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.8rem; font-weight: 500; color: var(--text-soft);
  border: 1px solid var(--line-2); border-radius: 999px;
  padding: 0.3rem 0.8rem; background: var(--surface); cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.kb-dd__btn:hover { color: var(--brand); border-color: var(--brand); }
.kb-dd__icon { width: 14px; height: 14px; flex: none; color: var(--brand); opacity: 0.75; }
.kb-dd__label { white-space: nowrap; }
.kb-dd__val { color: var(--brand); font-weight: 600; white-space: nowrap; }
.kb-dd__chevron { width: 13px; height: 13px; flex: none; transition: transform var(--t-fast); }
.kb-dd.is-open .kb-dd__btn { color: var(--brand); border-color: var(--brand); background: color-mix(in oklch, var(--brand) 6%, transparent); }
.kb-dd.is-open .kb-dd__chevron { transform: rotate(180deg); }
.kb-dd.is-selected .kb-dd__btn { border-color: var(--brand); color: var(--brand); }
/* 浮层 popover：默认隐藏，打开为网格；max-height 滚动封顶避免长维度拉得很长 */
.kb-dd__panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  display: none; grid-template-columns: 1fr; gap: var(--s-1);
  min-width: 168px; max-height: 280px; overflow: auto;
  padding: var(--s-2);
  background: var(--surface);
  border: 1px solid var(--line-2); border-radius: 12px;
  box-shadow: var(--shadow-lg);
  animation: kbPopIn var(--t-fast) ease;
}
.kb-dd.is-open .kb-dd__panel { display: grid; }
.kb-dd--long .kb-dd__panel { grid-template-columns: 1fr 1fr; min-width: 280px; }
/* 筛选行右置后，最右下拉的浮层向左展开，避免溢出视口右缘 */
.kb-filters > .kb-dd:last-of-type .kb-dd__panel { left: auto; right: 0; }
.kb-dd__tag {
  display: inline-flex; align-items: center; justify-content: flex-start;
  font-size: 0.8rem; font-weight: 500; color: var(--text-soft);
  border: 1px solid var(--line-2); border-radius: 8px; padding: 0.34rem 0.7rem;
  background: var(--surface); cursor: pointer; text-align: left; white-space: nowrap;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.kb-dd__tag:hover { color: var(--brand); border-color: var(--brand); }
.kb-dd__tag.is-active { color: #fff; background: var(--accent-solid); border-color: var(--accent-solid); }
@keyframes kbPopIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.kb-filter__clear-btn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.8rem; font-weight: 500; color: var(--brand);
  background: color-mix(in oklch, var(--brand) 8%, transparent);
  border: 0; border-radius: 999px; padding: 0.3rem 0.9rem; cursor: pointer;
  transition: background var(--t-fast);
}
.kb-filter__clear-btn:hover { background: color-mix(in oklch, var(--brand) 15%, transparent); }
.kb-filter__clear-btn[hidden] { display: none; }

@media (max-width: 720px) {
  /* 移动端筛选按钮较多，吸顶太占视口 → 取消吸顶 */
  .kb-toolbar { position: static; }
  /* 窄屏浮层贴左并限制最大宽度，避免溢出右缘 */
  .kb-dd__panel { left: 0; right: auto; max-width: calc(100vw - 24px); }
  .kb-dd--long .kb-dd__panel { grid-template-columns: 1fr; }
}

/* 条目列表 */
.kb-list { list-style: none; margin: 0; padding: 0; }
/* list 视图：flex 列向（cards 不会被 columns 接管） */
.kb-list.view-list { display: flex; flex-direction: column; gap: var(--s-3); }
.kb-item {
  display: grid;
  grid-template-columns: 96px 96px 1fr auto 24px;
  align-items: center; gap: var(--s-5);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--surface); text-decoration: none; color: inherit;
  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.kb-item:hover {
  border-color: var(--brand); transform: translateY(-2px);
  box-shadow: 0 14px 32px -26px color-mix(in oklch, var(--brand) 55%, transparent);
}
.kb-item[hidden] { display: none; }
.kb-item__type {
  display: inline-flex; align-items: center; gap: 0.4rem;
  justify-self: start; align-self: center; /* grid 拉伸会让浅紫底撑满整列/整行（列表视图 FAQ 徽标过长），收紧贴内容 */
  font-size: 0.78rem; font-weight: 500; color: var(--brand);
  background: color-mix(in oklch, var(--brand) 9%, transparent);
  border-radius: 999px; padding: 0.3rem 0.7rem; white-space: nowrap;
}
.kb-item__type svg { width: 14px; height: 14px; flex: none; }
.kb-item__date {
  font-family: var(--font-mono); font-size: 0.84rem; color: var(--text-faint);
  white-space: nowrap;
}
.kb-item__date--dur { color: var(--text-soft); }
.kb-item__title {
  font-family: var(--font-display); font-weight: 500; font-size: 1rem; line-height: 1.45;
}
.kb-item__tags { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: flex-end; }
.kb-item__tag {
  font-size: 0.72rem; color: var(--text-soft);
  border: 1px solid var(--line-2); border-radius: 999px; padding: 0.2rem 0.6rem; white-space: nowrap;
}
.kb-item__arrow { color: var(--text-faint); font-size: 1.2rem; transition: color var(--t-fast), transform var(--t-fast); }
.kb-item:hover .kb-item__arrow { color: var(--brand); transform: translateX(3px); }

/* 无结果 */
.kb-empty { display: none; text-align: center; color: var(--text-faint); padding: var(--s-12) 0; }
.kb-empty.is-visible { display: block; }
.kb-empty__icon { color: var(--brand); margin-bottom: var(--s-3); }

@media (max-width: 720px) {
  .kb-item {
    grid-template-columns: auto auto 1fr;
    grid-template-areas:
      "type date arrow"
      "title title title"
      "tags tags tags";
    gap: var(--s-2) var(--s-4);
  }
  .kb-item__type { grid-area: type; }
  .kb-item__date { grid-area: date; }
  .kb-item__arrow { grid-area: arrow; align-self: center; }
  .kb-item__title { grid-area: title; }
  .kb-item__tags { grid-area: tags; justify-content: flex-start; }
}

/* 视图切换：与 kb-tabs 同一行右上角，纯图标（无文字） */
.kb-tabs-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); flex-wrap: wrap;
}
.kb-tabs-row > .kb-tabs { flex: 1 1 auto; min-width: 0; align-self: stretch; } /* stretch：tab 拉到整行高，激活指示条 ::after 稳定落在行底 */
.kb-view { display: flex; gap: var(--s-2); flex: none; }
.kb-view__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  color: var(--text-soft);
  border: 1px solid var(--line-2); border-radius: 8px;
  background: var(--surface); cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.kb-view__btn:hover { color: var(--brand); border-color: var(--brand); }
.kb-view__btn.is-active { color: #fff; background: var(--accent-solid); border-color: var(--accent-solid); }
.kb-view__btn svg { width: 15px; height: 15px; }

/* 卡片式（瀑布流多列） */
.kb-list.view-card { columns: 4; column-gap: var(--s-8); }
.kb-list.view-card > li { break-inside: avoid; margin-bottom: var(--s-5); }
.kb-list.view-card .kb-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3);
  position: relative;
}
.kb-list.view-card .kb-item__title { width: 100%; }
.kb-list.view-card .kb-item__tags { justify-content: flex-start; width: 100%; margin-top: auto; }
.kb-list.view-card .kb-item__arrow {
  position: absolute; top: var(--s-4); right: var(--s-5); transform: none;
}
.kb-list.view-card .kb-item:hover .kb-item__arrow { transform: translateX(3px); }

@media (max-width: 1100px) {
  .kb-list.view-card { columns: 3; }
}
@media (max-width: 820px) {
  .kb-list.view-card { columns: 2; }
}
@media (max-width: 560px) {
  .kb-list.view-card { columns: 1; }
  /* 移动端：view 切换换行到 tabs 下方右侧；筛选组整体换到下一行左对齐 */
  .kb-tabs-row > .kb-tabs { flex-basis: 100%; }
  .kb-view { width: 100%; justify-content: flex-end; }
  .kb-filters { flex-basis: 100%; justify-content: flex-start; order: 3; }
}

/* 卡片式瀑布流封面：矩阵式"不对齐"靠封面高度差驱动
   - 同心圆 + 135° 品牌渐变（呼应 about 页里程碑母题）
   - 类型决定基础高宽比（技术文档 4/3、FAQ 4/5 偏长、视频 16/9 偏扁）
   - nth-child 3/5/7n 随机覆盖 aspect，打破规律、强化"随机布局" */
.kb-list.view-card .kb-item {
  position: relative;
  padding: 0 var(--s-5) var(--s-5);
  gap: var(--s-3);
  overflow: hidden;
}
.kb-list.view-card .kb-item::before {
  content: "";
  display: block;
  width: calc(100% + var(--s-5) * 2);
  margin: 0 calc(var(--s-5) * -1) 0;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  background:
    radial-gradient(circle, color-mix(in oklch, var(--brand) 30%, transparent) 0 2.5%, transparent 3.5%),
    radial-gradient(circle, transparent 22%, color-mix(in oklch, var(--brand) 24%, transparent) 23% 25%, transparent 26%),
    radial-gradient(circle, transparent 46%, color-mix(in oklch, var(--brand) 18%, transparent) 47% 49%, transparent 50%),
    linear-gradient(135deg, color-mix(in oklch, var(--brand) 13%, var(--surface)) 0%, color-mix(in oklch, var(--brand) 4%, var(--surface)) 100%);
  background-repeat: no-repeat;
  background-size: 72% 72%, 72% 72%, 72% 72%, 100% 100%;
  background-position: 50% 50%, 50% 50%, 50% 50%, 0 0;
}
/* 封面统一为横向比例带（呼应首页行业洞察卡片 16/10），不再用 4/5 特长封面 → 卡片尺寸与 insights 卡片一致
   nth-child 轻微错落保留"瀑布流"观感，但都限制在 landscape 区间，避免个别卡片过高显得突兀 */
.kb-list.view-card .kb-item[data-type="doc"]::before { aspect-ratio: 16 / 10; }
.kb-list.view-card .kb-item[data-type="faq"]::before { aspect-ratio: 4 / 3; }
.kb-list.view-card .kb-item[data-type="video"]::before { aspect-ratio: 16 / 9; }
.kb-list.view-card .kb-item:nth-child(3n)::before { aspect-ratio: 3 / 2; }
.kb-list.view-card .kb-item:nth-child(5n)::before { aspect-ratio: 16 / 10; }
.kb-list.view-card .kb-item:nth-child(7n)::before { aspect-ratio: 4 / 3; }

/* 卡片视图：箭头改为封面右上角圆形浮按钮，blurred 半透白底保证在彩色封面上可读 */
.kb-list.view-card .kb-item__arrow {
  position: absolute; top: var(--s-3); right: var(--s-3);
  width: 30px; height: 30px; border-radius: 50%;
  background: color-mix(in oklch, var(--surface) 70%, transparent);
  color: var(--brand); font-size: 1.15rem;
  display: grid; place-items: center;
  backdrop-filter: blur(6px);
  border: 1px solid color-mix(in oklch, var(--brand) 18%, transparent);
  transform: none;
}
.kb-list.view-card .kb-item:hover .kb-item__arrow {
  background: var(--accent-solid); color: #fff; border-color: var(--accent-solid);
  transform: none;
}

/* 卡片视图：类型徽标移到封面左上角悬浮，与右上角圆形箭头钮对称；
   半透白模糊底与箭头钮同款，保证在彩色封面上可读 */
.kb-list.view-card .kb-item__type {
  position: absolute; top: var(--s-3); left: var(--s-3); z-index: 2;
  background: color-mix(in oklch, var(--surface) 78%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid color-mix(in oklch, var(--brand) 18%, transparent);
}

/* ============================================================
   产品列表 / 料号表格（products.html）
   延续极简设计系统：科技紫单色强调、发丝线、圆角、hover 品牌紫
   ============================================================ */
.prod-toolbar {
  position: sticky; top: 64px; z-index: 40;
  background: color-mix(in oklch, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-2);
}
.prod-toolbar .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap;
  padding-block: var(--s-4);
}
.prod-tabs { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.prod-tab {
  font-family: var(--font-mono); font-size: 0.8rem;
  padding: 0.45rem 0.85rem; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--surface);
  color: var(--text-soft); cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.45rem;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.prod-tab:hover { color: var(--brand); border-color: var(--brand); }
.prod-tab.is-active { color: #fff; background: var(--accent-solid); border-color: var(--accent-solid); }
.prod-tab__n { font-size: 0.7rem; opacity: 0.85; }
.prod-tab.is-active .prod-tab__n { opacity: 0.9; }

.prod-search {
  display: flex; align-items: center; gap: var(--s-3);
  flex: 1 1 240px; max-width: 380px; min-width: 200px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-4); background: var(--surface);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.prod-search:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--brand) 12%, transparent);
}
.prod-search svg { color: var(--text-faint); flex: none; width: 18px; height: 18px; }
.prod-search input {
  flex: 1; min-width: 0; border: none; background: transparent; outline: none;
  font-family: var(--font-body); font-size: 0.95rem; color: var(--text); padding: 0.35rem 0;
}
.prod-search input::placeholder { color: var(--text-faint); }

.prod-count {
  font-family: var(--font-mono); font-size: 0.82rem;
  color: var(--text-faint); margin-bottom: var(--s-4);
}

/* 表格：横向滚动容器（边框/圆角由统一表格组件提供，避免双重边框） */
.table-scroll {
  overflow-x: auto;
}

/* .prod-table 基础样式已并入上方「统一表格组件」，此处仅保留产品列表专属小组件 */
.prod-table__pn { font-family: var(--font-mono); font-weight: 500; white-space: nowrap; }
.prod-table__pn a { color: var(--brand); text-decoration: none; }
.prod-table__pn a:hover { text-decoration: underline; }
.prod-table__desc { color: var(--text-soft); max-width: 38ch; }
.prod-table__dl { white-space: nowrap; text-align: center; }

.prod-tag {
  display: inline-flex; align-items: center;
  font-size: 0.76rem; font-weight: 500; color: var(--brand);
  background: color-mix(in oklch, var(--brand) 9%, transparent);
  border-radius: 999px; padding: 0.25rem 0.6rem; white-space: nowrap;
}

.prod-dl {
  display: inline-flex; align-items: center; gap: 0.35rem;
  color: var(--text-soft); text-decoration: none;
  border: 1px solid var(--line-2); border-radius: 999px;
  padding: 0.3rem 0.7rem; font-size: 0.8rem;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.prod-dl:hover {
  color: var(--brand); border-color: var(--brand);
  background: color-mix(in oklch, var(--brand) 8%, transparent);
}
.prod-dl svg { width: 14px; height: 14px; }

/* 无结果 */
.prod-empty { display: none; text-align: center; color: var(--text-faint); padding: var(--s-12) 0; }
.prod-empty.is-visible { display: block; }
.prod-empty__icon { color: var(--brand); margin-bottom: var(--s-3); }

@media (max-width: 720px) {
  .prod-toolbar .wrap { gap: var(--s-3); }
  .prod-search { max-width: none; flex-basis: 100%; }
}

/* 选择栏：计数 + 已选筛选 */
.prod-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-4);
}
.prod-meta .prod-count { margin-bottom: 0; }
.prod-selection {
  display: flex; align-items: center; gap: var(--s-4);
  font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-soft);
}
.prod-selection__toggle {
  display: inline-flex; align-items: center; gap: var(--s-2);
  cursor: pointer; user-select: none;
}
.prod-selection__toggle input {
  accent-color: var(--brand); width: 15px; height: 15px; cursor: pointer; margin: 0;
}
.prod-selection__n {
  min-width: 1.4em; text-align: center; color: var(--brand); font-weight: 600;
  background: color-mix(in oklch, var(--brand) 12%, transparent);
  border-radius: 999px; padding: 0.04rem 0.5rem;
}
.prod-selection__clear {
  border: 1px solid var(--line-2); background: var(--surface);
  color: var(--text-soft); border-radius: 999px;
  padding: 0.32rem 0.85rem; font-family: var(--font-mono); font-size: 0.8rem;
  cursor: pointer; transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.prod-selection__clear:hover { color: var(--brand); border-color: var(--brand); }
.prod-selection__clear[hidden] { display: none; }

/* 复选框（自定义外观，保留原生可访问性） */
.prod-table__check { width: 1%; white-space: nowrap; text-align: center; }
.prod-check {
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; line-height: 0;
}
.prod-check__input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.prod-check__input:focus-visible + .prod-check__box {
  outline: 2px solid var(--brand); outline-offset: 2px;
}
.prod-check__box {
  width: 18px; height: 18px; border-radius: 5px;
  border: 1.5px solid var(--line-2); background: var(--surface);
  display: inline-block; position: relative;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.prod-check__input:checked + .prod-check__box {
  background: var(--brand); border-color: var(--brand);
}
.prod-check__input:checked + .prod-check__box::after {
  content: ""; position: absolute; left: 5px; top: 1.5px;
  width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.prod-check--head .prod-check__box {
  border-color: color-mix(in oklch, var(--brand) 45%, var(--line-2));
}

/* 选中行高亮 */
.prod-table tbody tr.is-selected { background: color-mix(in oklch, var(--brand) 9%, transparent); }
.prod-table tbody tr.is-selected:hover { background: color-mix(in oklch, var(--brand) 13%, transparent); }

/* 产品详情列 */
.prod-table__detail { white-space: nowrap; text-align: center; }
.prod-link {
  display: inline-flex; align-items: center; gap: 0.3rem;
  color: var(--brand); text-decoration: none; font-weight: 500;
  font-family: var(--font-mono); font-size: 0.84rem;
  transition: gap var(--t-fast), text-decoration var(--t-fast);
}
.prod-link svg { width: 14px; height: 14px; }
.prod-link:hover { text-decoration: underline; gap: 0.5rem; }

/* ====================================================================
   页脚社交行（简睿设置 → 社交链接 驱动）
   ==================================================================== */
.footer__social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.4rem 2rem;
  padding: 1rem 0 0.4rem;
  border-top: 1px solid color-mix(in oklch, var(--text) 10%, transparent);
  margin-top: 1.6rem;
}
.footer__social > * { font-size: 0.92rem; color: var(--text-soft); }

.footer-social__link {
  color: var(--text-soft);
  text-decoration: none;
  transition: color var(--t-fast);
}
.footer-social__link:hover { color: var(--brand); }

/* ====================================================================
   首页「技术方案」卡片 → 可点击链接 + 方案归档三列布局
   ==================================================================== */
.card--link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.card--link:hover { transform: translateY(-3px); border-color: var(--brand); }
.card--link:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.card__more {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: auto;
  padding-top: var(--s-4);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--brand);
  transition: gap var(--t-fast);
}
.card--link:hover .card__more { gap: 0.55rem; }

/* 方案归档：文章 / 产品 / 技术支持 三列 */
.sol-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-6);
}
@media (max-width: 920px) {
  .sol-cols { grid-template-columns: 1fr; }
}

.sol-col {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-med);
}
.sol-col:hover {
  border-color: var(--brand);
  box-shadow: 0 12px 30px -14px rgb(0 0 0 / 0.22);
}
.sol-col__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-5);
  border-bottom: 1px solid var(--line-2);
  background: var(--surface-2);
}
.sol-col__icon { display: inline-flex; color: var(--brand); }
.sol-col__icon svg { width: 20px; height: 20px; }
.sol-col__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
}
.sol-col__count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--brand);
  background: color-mix(in oklch, var(--brand) 12%, transparent);
  border-radius: 999px;
  padding: 0.12rem 0.6rem;
  min-width: 2.4em;
  text-align: center;
}
.sol-col__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  flex: 1;
}
.sol-item {
  display: block;
  text-decoration: none;
  color: var(--text);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.sol-item:hover {
  border-color: var(--brand);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -10px rgb(0 0 0 / 0.25);
  background: color-mix(in oklch, var(--brand) 5%, var(--surface));
}
.sol-item:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.sol-item__title { display: block; font-weight: 500; font-size: 0.95rem; line-height: 1.45; }
.sol-item__meta {
  display: block;
  margin-top: 0.25rem;
  color: var(--text-faint);
  font-size: 0.78rem;
  font-family: var(--font-mono);
}
.sol-col__empty {
  margin: 0;
  color: var(--text-faint);
  font-size: 0.85rem;
  line-height: 1.7;
}

/* 方案中心总归档：方案词卡片 */
.sol-index { margin-top: var(--s-2); }
.sol-term { gap: var(--s-3); }
.sol-term__pill {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: hsl(var(--tag-h) 70% 36%);
  background: hsl(var(--tag-h) 82% 95%);
  border: 1px solid hsl(var(--tag-h) 60% 86%);
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
}
.sol-term__count {
  margin-top: auto;
  padding-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-soft);
}
.sol-term .card__more { margin-top: 0; }

/* 区块标题两侧布局（标题 + 右侧链接） */
.section-head--split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.section-head--split .link { white-space: nowrap; padding-bottom: 0.4rem; }

.footer-social__wechat {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}
.footer-social__chip {
  color: var(--text-soft);
  user-select: none;
}
.footer-social__wechat:hover .footer-social__qr { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.footer-social__qr {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  width: 132px;
  height: 132px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  box-shadow: 0 8px 24px color-mix(in oklch, var(--text) 18%, transparent);
  opacity: 0;
  transform: translate(-50%, 6px);
  pointer-events: none;
  transition: opacity var(--t-fast), transform var(--t-fast);
  z-index: 5;
}

.footer__bottom { gap: 0.5rem 1.2rem; flex-wrap: wrap; }
.footer__bottom a { color: var(--text-soft); text-decoration: none; }
.footer__bottom a:hover { color: var(--brand); }
.footer__psb-icon { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }

/* ====================================================================
   页脚：公司名称 + Slogan（分两行显示）
   ==================================================================== */
.footer__company {
  margin: 0.9rem 0 0.25rem;
  font-weight: 600;
  color: var(--text);
}
.footer__slogan {
  margin: 0;
  color: var(--text-soft);
}

/* ====================================================================
   页脚：二维码（微信公众号 / 集佰睿小程序）
   并入左列 .footer__col--brand 的 slogan 下方，由 .footer-qr__row 横排两枚
   后台未上传图片时显示虚线占位框
   ==================================================================== */
.footer-qr__row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 1.6rem;
  margin-top: var(--s-7);
}
.footer-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.footer-qr__box {
  width: 108px;
  height: 108px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 内边距压到 2px：让二维码尽可能撑满框，避免「白边太厚」观感 */
  padding: 2px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  overflow: hidden;
}
.footer-qr__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* 占位：尚未上传二维码图片 */
.footer-qr__ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: 1px dashed var(--line-2);
  border-radius: 6px;
  background: color-mix(in oklch, var(--text) 3%, transparent);
  font-size: 0.72rem;
  color: var(--text-faint);
  text-align: center;
}
.footer-qr__label {
  font-size: 0.8rem;
  color: var(--text-soft);
}

/* ====================================================================
   克制动效（首页"有生气但不闹"）
   原则：位移 ≤ 12px、时长 ≤ .6s、只用 ease-out 缓动、无回弹/无无限循环
   ==================================================================== */

/* Hero 内容错峰入场：靠 .is-active 触发，轮播切页时会重放一次 */
@keyframes jr-hero-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.hero-slide.is-active .hero__text > *,
.hero-slide.is-active .hero__process,
.hero-slide.is-active .banner__content > *,
.hero-slide.is-active .banner__visual {
  animation: jr-hero-in .55s var(--ease-out-quart) both;
}
.hero-slide.is-active .hero__text > *:nth-child(1),
.hero-slide.is-active .banner__content > *:nth-child(1) { animation-delay: .04s; }
.hero-slide.is-active .hero__text > *:nth-child(2),
.hero-slide.is-active .banner__content > *:nth-child(2) { animation-delay: .10s; }
.hero-slide.is-active .hero__text > *:nth-child(3),
.hero-slide.is-active .banner__content > *:nth-child(3) { animation-delay: .16s; }
.hero-slide.is-active .hero__text > *:nth-child(4),
.hero-slide.is-active .banner__content > *:nth-child(4) { animation-delay: .22s; }
.hero-slide.is-active .banner__content > *:nth-child(5) { animation-delay: .28s; }
.hero-slide.is-active .hero__process,
.hero-slide.is-active .banner__visual { animation-delay: .28s; }

/* 主业务特性行：hover 时图标轻微放大，给静态列表一点反馈 */
.biz__features li svg { transition: transform var(--t-med) var(--ease-out-quart); }
.biz__features li:hover svg { transform: scale(1.12); }

/* 尊重系统"减少动态效果"：全部关掉，直接显示终态 */
@media (prefers-reduced-motion: reduce) {
  .hero-slide.is-active .hero__text > *,
  .hero-slide.is-active .hero__process,
  .hero-slide.is-active .banner__content > *,
  .hero-slide.is-active .banner__visual { animation: none; }
  .biz:hover, .card:hover { transform: none; }
  .biz__features li svg { transition: none; }
  .biz__features li:hover svg { transform: none; }
  .inquiry-modal__card, .inquiry-modal__backdrop { transition: none; }
}

/* ====================================================================
   聊聊合作 modal（jbr-inquiry 插件渲染，本主题只负责样式 + JS 交互）
   ==================================================================== */
.inquiry-modal {
  position: fixed; inset: 0; z-index: 100;
  display: none;
  align-items: center; justify-content: center;
  padding: var(--s-6);
}
.inquiry-modal.is-open { display: flex; }
.inquiry-modal__backdrop {
  position: absolute; inset: 0;
  background: color-mix(in oklch, var(--ink) 50%, transparent);
  backdrop-filter: blur(4px);
  opacity: 0; transition: opacity var(--t-fast) var(--ease-out-quart);
}
.inquiry-modal.is-open .inquiry-modal__backdrop { opacity: 1; }

.inquiry-modal__card {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100dvh - var(--s-12));
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: clamp(var(--s-8), 5vw, var(--s-12));
  box-shadow: 0 32px 80px -16px color-mix(in oklch, var(--ink) 30%, transparent);
  opacity: 0; transform: translateY(12px);
  transition: opacity var(--t-med) var(--ease-out-quart), transform var(--t-med) var(--ease-out-quart);
}
.inquiry-modal.is-open .inquiry-modal__card { opacity: 1; transform: none; }

.inquiry-modal__close {
  position: absolute; top: var(--s-3); right: var(--s-3);
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: transparent; border: none; cursor: pointer;
  font-size: 24px; line-height: 1; color: var(--text-soft);
  border-radius: var(--r-sm);
  transition: color var(--t-fast), background var(--t-fast);
}
.inquiry-modal__close:hover { color: var(--text); background: var(--surface-2); }
.inquiry-modal__close:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.inquiry-modal__title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.8rem);
  font-weight: 600;
  margin: var(--s-3) 0 var(--s-2);
  letter-spacing: -0.02em;
}
.inquiry-modal__sub {
  color: var(--text-soft);
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0 0 var(--s-6);
}
.inquiry-modal__sub strong { color: var(--brand); font-weight: 500; }

/* ---------- 表单 ---------- */
.inquiry-form { display: flex; flex-direction: column; gap: var(--s-4); }
.inquiry-form__row { display: flex; flex-direction: column; gap: var(--s-4); }
@media (min-width: 540px) {
  .inquiry-form__row:not(:only-child) { flex-direction: row; }
  .inquiry-form__row:not(:only-child) .inquiry-form__field { flex: 1; min-width: 0; }
}
.inquiry-form__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.inquiry-form__label {
  font-size: 0.82rem;
  color: var(--text-soft);
  letter-spacing: 0.02em;
}
.inquiry-form__req { color: var(--brand); margin-right: 2px; }
.inquiry-form__field input,
.inquiry-form__field select,
.inquiry-form__field textarea {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  font-size: 0.95rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.inquiry-form__field textarea { resize: vertical; min-height: 110px; line-height: 1.55; }
.inquiry-form__field input:focus-visible,
.inquiry-form__field select:focus-visible,
.inquiry-form__field textarea:focus-visible {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--brand) 20%, transparent);
}
.inquiry-form__field input[aria-invalid="true"],
.inquiry-form__field select[aria-invalid="true"],
.inquiry-form__field textarea[aria-invalid="true"] {
  border-color: #e53935;
  box-shadow: 0 0 0 3px color-mix(in oklch, #e53935 18%, transparent);
}

/* Honeypot：视觉上藏起来，但 screen reader 仍能跳过（aria-hidden） */
.inquiry-form__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important; height: 1px !important;
  opacity: 0 !important;
}

.inquiry-form__actions {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--s-3);
  margin-top: var(--s-2);
}
.inquiry-form__submit { min-width: 140px; }
.inquiry-form__submit[disabled] { opacity: 0.6; cursor: not-allowed; }
.inquiry-form__hint { color: var(--text-faint); font-size: 0.78rem; margin: 0; }

.inquiry-form__msg {
  margin-top: var(--s-2);
  padding: 12px 14px;
  border-radius: var(--r-sm);
  font-size: 0.9rem;
  line-height: 1.5;
  display: none;
}
.inquiry-form__msg.is-error { display: block; background: #fdecea; color: #b71c1c; border: 1px solid #f5c2c0; }
.inquiry-form__msg.is-ok    { display: block; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.inquiry-form__msg strong  { color: var(--brand); }

/* 移动端：modal 几乎占满 */
@media (max-width: 540px) {
  .inquiry-modal { padding: var(--s-3); align-items: flex-end; }
  .inquiry-modal__card {
    max-height: 92dvh;
    border-radius: var(--r-md) var(--r-md) 0 0;
  }
}

/* ============================================================
   资讯中心（原「行业洞察」）：三板块 = 行业新闻 / 公司动态 / 技术方案
   每板取 post 分类法对应词最新 3 篇；板标题用 hash 色（与方案 pill 同源）。
   ============================================================ */
.insight-boards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-6);
}
.insight-board {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: calc(var(--r-sm) * 1.5);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
}
.insight-board__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.insight-board__title {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 600;
  color: hsl(var(--tag-h, 286) 45% 35%);
}
:root[data-theme="dark"] .insight-board__title {
  color: hsl(var(--tag-h, 286) 60% 82%);
}
.insight-board__more {
  font-size: .82rem;
  color: var(--text-faint);
  white-space: nowrap;
  text-decoration: none;
}
.insight-board__more:hover { color: var(--brand); }
.insight-board__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.insight-item { border-bottom: 1px dashed var(--line-2); }
.insight-item:last-child { border-bottom: 0; }
.insight-item__link {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: .55rem 0;
  text-decoration: none;
  color: var(--text);
}
.insight-item__thumb {
  flex: 0 0 auto;
  width: 76px;
  height: 56px;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: calc(var(--r-sm) * 0.8);
  overflow: hidden;
  background: var(--surface-2);
}
.insight-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s cubic-bezier(.2, .7, .3, 1);
}
.insight-item__thumb-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: hsl(var(--tag-h, 286) 45% 42%);
  background: hsl(var(--tag-h, 286) 60% 92%);
  transition: transform .35s cubic-bezier(.2, .7, .3, 1);
}
.insight-item__link:hover .insight-item__thumb img,
.insight-item__link:hover .insight-item__thumb-fallback {
  transform: scale(1.08);
}
:root[data-theme="dark"] .insight-item__thumb-fallback {
  color: hsl(var(--tag-h, 286) 55% 78%);
  background: hsl(var(--tag-h, 286) 35% 24%);
}
.insight-item__body {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  min-width: 0;
}
.insight-item__title {
  font-size: .92rem;
  line-height: 1.4;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--t-fast);
}
.insight-item__link:hover .insight-item__title { color: var(--brand); }
.insight-item__date {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--text-faint);
}
@media (max-width: 860px) {
  .insight-boards { grid-template-columns: 1fr; gap: var(--s-5); }
}

/* ===== 技术方案中心：方案模块铺开（与产品中心同款策展思路） ===== */
.sol-module__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-6);
  flex-wrap: wrap;
}
.sol-module__head .section-sub { margin-top: var(--s-3); }
.sol-module__more { flex: 0 0 auto; white-space: nowrap; }
.sol-articles { margin-top: var(--s-10); }

/* 文章卡片：复用 .card 基础，补 type tag + 内边距微调 */
.sol-article-card { display: flex; flex-direction: column; gap: var(--s-3); padding-top: var(--s-4); }
.sol-article-card__tag {
  align-self: flex-start;
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  padding: 2px 9px; border-radius: 99px;
  color: var(--brand);
  background: color-mix(in oklch, var(--brand) 9%, #fff);
  border: 1px solid color-mix(in oklch, var(--brand) 20%, transparent);
}
.sol-article-card .card__title { font-size: 1.05rem; margin-top: 0; }
.sol-article-card .card__title a { color: var(--text); text-decoration: none; }
.sol-article-card .card__title a:hover { color: var(--brand); }
.sol-article-card .card__excerpt { color: var(--text-soft); font-size: .9rem; line-height: 1.55; margin: 0; }
.sol-article-card .link { margin-top: auto; }

/* 空态提示 */
.empty { color: var(--text-soft); font-size: .95rem; }
.empty .link { margin-left: 4px; }

@media (max-width: 768px) {
  .sol-module__head { align-items: flex-start; }
  .sol-module__more { margin-top: var(--s-4); }
}

/* ===========================================================================
   右侧浮动工具条（.page-sidebar）
   搜索 / 深浅色 / 语言 由顶部导航移入此处，仿正式站右侧竖向工具条。
   适配深/浅色，移动端收为底部横条。
   =========================================================================== */
.page-sidebar {
  position: fixed;
  top: 50%;
  right: 1.25rem;
  transform: translateY(-50%);
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  pointer-events: none; /* 仅工具本身可点，避免遮挡内容 */
}
.page-sidebar > * { pointer-events: auto; }

/* 圆形工具按钮（搜索 / 深浅色共用） */
.page-sidebar .sidebar-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-soft);
  cursor: pointer;
  font: inherit;
  line-height: 0;
  box-shadow: 0 6px 18px color-mix(in oklch, var(--ink) 14%, transparent);
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.page-sidebar .sidebar-tool:hover {
  color: var(--brand);
  border-color: var(--accent-line);
  box-shadow: 0 8px 22px color-mix(in oklch, var(--brand) 26%, transparent);
}
.page-sidebar .sidebar-tool:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
/* 深浅色按钮保留 44px 圆（覆盖 .theme-toggle 的 30px 方框设定） */
.page-sidebar .theme-toggle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
}

/* 语言切换：侧栏内改为图标圆形按钮，隐藏文字/箭头以贴合竖向工具条 */
.page-sidebar .lang-switch { flex: 0 0 auto; }
.page-sidebar .lang-switch__btn {
  width: 44px;
  height: 44px;
  padding: 0;
  gap: 0;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-soft);
  box-shadow: 0 6px 18px color-mix(in oklch, var(--ink) 14%, transparent);
  justify-content: center;
}
.page-sidebar .lang-switch__btn:hover {
  color: var(--brand);
  border-color: var(--accent-line);
  box-shadow: 0 8px 22px color-mix(in oklch, var(--brand) 26%, transparent);
}
.page-sidebar .lang-switch__current,
.page-sidebar .lang-switch__caret { display: none; }

/* 语言菜单：桌面端向左展开（侧栏贴右缘，避免溢出视口右侧） */
.page-sidebar .lang-switch__menu {
  right: calc(100% + .8rem);
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
}
.page-sidebar .lang-switch.is-open .lang-switch__menu {
  transform: translateY(-50%) translateX(0);
}

/* 移动端：收为底部居中横条，避免遮挡正文右侧 */
@media (max-width: 768px) {
  .page-sidebar {
    top: auto;
    bottom: 0;
    right: 0;
    left: 0;
    transform: none;
    flex-direction: row;
    justify-content: center;
    gap: .75rem;
    padding: .55rem .75rem calc(.55rem + env(safe-area-inset-bottom, 0px));
    background: color-mix(in oklch, var(--surface) 92%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 18px color-mix(in oklch, var(--ink) 10%, transparent);
  }
  /* 语言菜单在底部条上方向左展开 */
  .page-sidebar .lang-switch__menu {
    right: 0;
    left: auto;
    top: auto;
    bottom: calc(100% + .4rem);
    transform: translateY(6px);
  }
  .page-sidebar .lang-switch.is-open .lang-switch__menu {
    transform: translateY(0);
  }
}

/* 附件链接 chip 样式
 * WangEditor 5 的 HTML 净化会剥掉自定义 class/属性，故改用「文件后缀属性选择器」
 * （净化后 href 保留）。对编辑器预览(.w-e-text)与发布正文(.article__body/.entry-content)统一生效。
 * i 修饰符使后缀大小写不敏感(.PDF/.Zip 等)。 */
:is(.w-e-text, .article__body, .entry-content) a[href$=".pdf" i],
:is(.w-e-text, .article__body, .entry-content) a[href$=".zip" i],
:is(.w-e-text, .article__body, .entry-content) a[href$=".rar" i],
:is(.w-e-text, .article__body, .entry-content) a[href$=".7z" i],
:is(.w-e-text, .article__body, .entry-content) a[href$=".doc" i],
:is(.w-e-text, .article__body, .entry-content) a[href$=".docx" i],
:is(.w-e-text, .article__body, .entry-content) a[href$=".xls" i],
:is(.w-e-text, .article__body, .entry-content) a[href$=".xlsx" i],
:is(.w-e-text, .article__body, .entry-content) a[href$=".ppt" i],
:is(.w-e-text, .article__body, .entry-content) a[href$=".pptx" i],
:is(.w-e-text, .article__body, .entry-content) a[href$=".txt" i],
:is(.w-e-text, .article__body, .entry-content) a[href$=".csv" i] {
  display: inline-flex; align-items: center; gap: .35rem;
  margin: .25rem .4rem .25rem 0; padding: .42rem .72rem;
  background: #efeaff; color: #5b3fd6; border: 1px solid #d9c9ff;
  border-radius: 8px; text-decoration: none; font-size: .85rem; font-weight: 500;
  transition: filter .15s ease, box-shadow .15s ease;
}
:is(.w-e-text, .article__body, .entry-content) a[href$=".pdf" i]:hover,
:is(.w-e-text, .article__body, .entry-content) a[href$=".zip" i]:hover,
:is(.w-e-text, .article__body, .entry-content) a[href$=".rar" i]:hover,
:is(.w-e-text, .article__body, .entry-content) a[href$=".7z" i]:hover,
:is(.w-e-text, .article__body, .entry-content) a[href$=".doc" i]:hover,
:is(.w-e-text, .article__body, .entry-content) a[href$=".docx" i]:hover,
:is(.w-e-text, .article__body, .entry-content) a[href$=".xls" i]:hover,
:is(.w-e-text, .article__body, .entry-content) a[href$=".xlsx" i]:hover,
:is(.w-e-text, .article__body, .entry-content) a[href$=".ppt" i]:hover,
:is(.w-e-text, .article__body, .entry-content) a[href$=".pptx" i]:hover,
:is(.w-e-text, .article__body, .entry-content) a[href$=".txt" i]:hover,
:is(.w-e-text, .article__body, .entry-content) a[href$=".csv" i]:hover {
  filter: brightness(.97); box-shadow: 0 2px 8px rgba(91, 63, 214, .18);
  text-decoration: none;
}