:root {
    /* 版心：正文沿用改版前的 1200 / 22px，整幅只用在一级导航上（--nav-gutter）。
       试过正文也整幅，反馈是"太宽了，眼睛看着好累"，已经退回来 */
    --wrap: 1200px;
    --gutter: 22px;
    --nav-gutter: clamp(20px, 2.4vw, 44px);
    --bg: #fafbfd;
    --bg-tint: #edf3fa;
    --card: #ffffff;
    --ink: #101d33;
    --ink-2: #4e5f79;
    --ink-3: #8594ab;
    --brand: #0a58ca;
    --accent: #0a84ff;
    --cyan: #23b8e4;
    --copper: #d9560b;
    --copper-bg: #fdeee1;
    --navy: #0a1c36;
    --navy-card: #12294b;
    --ink-on-navy: #eaf1fa;
    --ink2-on-navy: #93a9c6;
    --cyan-on-navy: #4fc3ec;
    --hairline: rgba(16, 29, 51, .1);
    --hairline-navy: rgba(255, 255, 255, .14);
    --nav-bg: rgba(250, 251, 253, .8);
    --shadow: 0 10px 34px rgba(16, 29, 51, .08);
    --grad-a: #0a84ff;
    --grad-b: #23b8e4;
    --grad-c: #64d8f5;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #070c16;
      --bg-tint: #0d1524;
      --card: #131e33;
      --ink: #e8eef8;
      --ink-2: #9fb0c8;
      --ink-3: #6c7d96;
      --brand: #4b9fff;
      --accent: #3d9bff;
      --copper: #ff8a3d;
      --copper-bg: rgba(255, 138, 61, .14);
      --navy: #060e1c;
      --navy-card: #101f3a;
      --hairline: rgba(232, 238, 248, .12);
      --nav-bg: rgba(7, 12, 22, .75);
      --shadow: 0 10px 34px rgba(0, 0, 0, .5);
    }
  }
  :root[data-theme="dark"] {
    --bg: #070c16;
    --bg-tint: #0d1524;
    --card: #131e33;
    --ink: #e8eef8;
    --ink-2: #9fb0c8;
    --ink-3: #6c7d96;
    --brand: #4b9fff;
    --accent: #3d9bff;
    --copper: #ff8a3d;
    --copper-bg: rgba(255, 138, 61, .14);
    --navy: #060e1c;
    --navy-card: #101f3a;
    --hairline: rgba(232, 238, 248, .12);
    --nav-bg: rgba(7, 12, 22, .75);
    --shadow: 0 10px 34px rgba(0, 0, 0, .5);
  }
  :root[data-theme="light"] {
    --bg: #fafbfd;
    --bg-tint: #edf3fa;
    --card: #ffffff;
    --ink: #101d33;
    --ink-2: #4e5f79;
    --ink-3: #8594ab;
    --brand: #0a58ca;
    --accent: #0a84ff;
    --copper: #d9560b;
    --copper-bg: #fdeee1;
    --navy: #0a1c36;
    --navy-card: #12294b;
    --hairline: rgba(16, 29, 51, .1);
    --nav-bg: rgba(250, 251, 253, .8);
    --shadow: 0 10px 34px rgba(16, 29, 51, .08);
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  /* v12.4：平滑滚动等 load 之后再开（s16 末尾加 html.smooth-scroll）。全局一直开着时，刷新恢复滚动位置的过程
     也会被做成动画：页面没加载全先停在当前最底部，再一路滑回原位 */
  html.smooth-scroll { scroll-behavior: smooth; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro SC", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", "Segoe UI", sans-serif;
    background: var(--bg); color: var(--ink);
    -webkit-font-smoothing: antialiased;
    font-size: 17px; line-height: 1.6;
  }
  a { color: inherit; text-decoration: none; }
  img { max-width: 100%; display: block; }
  /* v12.0：图片拖不出去、iOS 长按不弹「存储图像」（右键另存在 s16 末尾的脚本里拦）。
     二维码除外：微信里长按识别二维码要用到长按菜单 */
  img:not([alt*="二维码"]):not([alt*="QR code"]):not(.qr-img) { -webkit-user-drag: none; -webkit-touch-callout: none; }
  button { font: inherit; cursor: pointer; }
  a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

  /* ---------- Nav ---------- */
  .nav {
    position: sticky; top: 0; z-index: 100;
    background: var(--nav-bg);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--hairline);
  }
  .nav-inner {
    max-width: 2000px; margin: 0 auto; padding: 0 var(--nav-gutter);
    height: 76px; display: flex; align-items: center; gap: 8px;
  }
  /* 左侧整块标识：厂标 + 公司中英文名 + 股票代码 920634 · 北交所锌粉第一股 */
  .nav-logo { margin-right: auto; display: flex; align-items: center; }
  /* max-width:none 是必须的：全局 img 规则会在窄屏把它按容器宽度截断，
     而高度又被写死，结果厂标被横向压扁 */
  .nav-logo img { height: 46px; width: auto; max-width: none; flex: none; }
  .nav-logo .lk-dark { display: none; }
  :root[data-theme="dark"] .nav-logo .lk-light { display: none; }
  :root[data-theme="dark"] .nav-logo .lk-dark { display: block; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .nav-logo .lk-light { display: none; }
    :root:not([data-theme="light"]) .nav-logo .lk-dark { display: block; }
  }
  @media (max-width: 1240px) { .nav-logo img { height: 38px; } }
    @media (max-width: 880px) { .nav-inner { height: 64px; } .nav-logo img { height: 42px; } }
  @media (max-width: 600px) { .nav-logo img { height: 34px; } }
  @media (max-width: 420px) { .nav-logo img { height: 27px; } }

  /* 一级导航：整格高的方块，悬停/选中时底色自下而上升满（参照设计公司稿） */
  .nav-links { display: flex; align-self: stretch; font-size: 15px; color: var(--ink-2); }
  .nav-links a {
    position: relative; z-index: 0;   /* 建立层叠上下文，::before 才能垫在文字下面又盖住导航底色 */
    display: flex; align-items: center; padding: 0 17px; white-space: nowrap; border-radius: 0;
    overflow: hidden; transition: color .28s ease;
  }
  /* 底色块用 transform 缩放，不用 background-size：
     父级 .nav 有 backdrop-filter，动画 background 容易留下没重绘干净的半截色块 */
  .nav-links a::before {
    content: ""; position: absolute; inset: 0; z-index: -1; background: var(--accent);   /* 与二级导航同色 */
    transform: scaleY(0); transform-origin: bottom; transition: transform .28s ease;
  }
  .nav-links a:hover::before { transform: scaleY(1); }
  .nav-links a:hover { color: #fff; }
  /* 选中态是"当前在哪一页"的状态，直接落位，不做过渡 */
  .nav-links a.on { color: #fff; font-weight: 600; transition: none; }
  .nav-links a.on::before { transform: scaleY(1); transition: none; }
  /* 880–1150 之间放大后的厂标和六个栏目会挤到溢出，把栏目间距与字号收一收给厂标让位。
     这条必须写在上面 .nav-links a 之后，否则同优先级被覆盖，等于没写 */
  @media (max-width: 1200px) { .nav-links { font-size: 14px; } .nav-links a { padding: 0 11px; } }
  @media (max-width: 1100px) { .nav-links { display: none; } }
  /* 语种切换 */
  .lang-switch {
    display: flex; align-self: center; margin-left: 14px; flex: none;
    border: 1px solid var(--hairline); border-radius: 7px; overflow: hidden;
    background: transparent; padding: 0; font-size: 12.5px; line-height: 1;
  }
  .lang-switch span { padding: 7px 10px; color: var(--ink-2); transition: background .22s ease, color .22s ease; }
  .lang-switch span.on { background: var(--accent); color: #fff; font-weight: 600; }
  .lang-switch:hover span:not(.on) { color: var(--ink); }
  @media (max-width: 420px) { .lang-switch { margin-left: 8px; font-size: 11.5px; } .lang-switch span { padding: 6px 8px; } }
  @media (prefers-reduced-motion: reduce) { .nav-links a { transition: none; } }

  /* ---------- Hero ---------- */
  .hero {
    position: relative; overflow: hidden; text-align: center;
    padding: clamp(84px, 13vh, 150px) 22px clamp(64px, 9vh, 110px);
    background:
      radial-gradient(1100px 460px at 50% -140px, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
      var(--bg);
  }
  .hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  .hero > div { position: relative; }
  .eyebrow {
    display: inline-flex; align-items: center; gap: 12px;
    font-size: 18px; font-weight: 600; letter-spacing: .01em; line-height: 1;
    color: var(--ink);
    border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); border-radius: 980px;
    padding: 12px 12px 12px 20px; margin-bottom: 30px;
    background: color-mix(in srgb, var(--accent) 9%, var(--card));
    box-shadow: 0 6px 22px color-mix(in srgb, var(--accent) 17%, transparent);
  }
  /* 前面点一颗灯，把"上市公司"从一行小字变成一个标识 */
  .eyebrow::before {
    content: ""; width: 9px; height: 9px; border-radius: 50%; flex: none;
    background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);
  }
  .eyebrow b {
    color: #fff; background: var(--accent); font-weight: 700; font-size: 17px;
    letter-spacing: .07em; font-variant-numeric: tabular-nums;
    padding: 8px 13px; border-radius: 980px;
  }
  @media (max-width: 480px) {
    .eyebrow { font-size: 15.5px; gap: 9px; padding: 10px 10px 10px 16px; }
    .eyebrow b { font-size: 15px; padding: 7px 11px; }
  }
  .hero h1 {
    font-size: clamp(46px, 8.5vw, 100px);
    font-weight: 700; line-height: 1.07; letter-spacing: -0.025em; text-wrap: balance;
    background: linear-gradient(98deg, var(--grad-a) 8%, var(--grad-b) 55%, var(--grad-c) 92%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    /* v13.0：渐变只画在盒子里，行高 1.07 让 p/g/y 的下伸部分落到盒外被截；底部补 0.2em 再等量收回，版面不动 */
    padding-bottom: .2em; margin-bottom: -.2em;
  }
  .hero p.sub {
    font-size: clamp(19px, 2.4vw, 26px); font-weight: 500;
    color: var(--ink-2); margin-top: 20px; letter-spacing: -0.01em; text-wrap: balance;
  }
  /* v9.9：首页三个入口是我们最希望访客点的地方，原来太轻 —— 加粗、字号大一档、竖线分隔 */
  .hero-links { margin-top: 32px; display: flex; gap: 0 28px; justify-content: center; font-size: 19px; flex-wrap: wrap; }
  .hero-links a { color: var(--accent); font-weight: 600; position: relative; }
  .hero-links a + a::before {
    content: ""; position: absolute; left: -14px; top: .2em; bottom: .2em;
    width: 1px; background: color-mix(in srgb, var(--ink-3) 55%, transparent);
  }
  @media (max-width: 560px) {
    .hero-links { flex-direction: column; align-items: center; gap: 14px; }
    .hero-links a + a::before { display: none; }
  }
  .hero-links a:hover { text-decoration: underline; }
  .hero-links a::after { content: " ›"; }

  /* ---------- Stats ---------- */
  .stats {
    max-width: var(--wrap); margin: 0 auto; padding: 16px var(--gutter) 88px;
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
  }
  @media (max-width: 1000px) { .stats { grid-template-columns: repeat(3, 1fr); } }
  .stat { text-align: center; padding: 26px 8px; }
  .stat .num {
    font-size: clamp(30px, 4vw, 44px); font-weight: 700; letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums; line-height: 1.1; color: var(--brand);
  }
  .stat .num em { font-style: normal; font-size: .5em; font-weight: 600; color: var(--ink-2); margin-left: 2px; }
  .stat .label { font-size: 14px; color: var(--ink-2); margin-top: 8px; }
  @media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); padding-bottom: 56px; } }

  /* ---------- Section head ---------- */
  .section-head { text-align: center; max-width: 1000px; margin: 0 auto 52px; padding: 0 22px; }
  .section-head .kicker { font-size: 13px; letter-spacing: .2em; color: var(--copper); font-weight: 700; margin-bottom: 14px; }
  .section-head .kicker.blue { color: var(--accent); }
  .section-head h2 {
    font-size: clamp(30px, 4.8vw, 54px); font-weight: 700;
    letter-spacing: -0.02em; line-height: 1.12; text-wrap: balance;
  }
  .section-head p { color: var(--ink-2); margin-top: 16px; font-size: 18px; }

  /* ---------- Applications ---------- */
  .apps { padding: 96px 0 104px; background: var(--bg-tint); }
  .app-grid {
    max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  }
  .app-card {
    background: var(--card); border-radius: 20px; overflow: hidden;
    box-shadow: var(--shadow); display: flex; flex-direction: column;
    transition: transform .3s ease;
  }
  .app-card:hover { transform: translateY(-4px); }
  .app-media { aspect-ratio: 3 / 2; overflow: hidden; }
  .app-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
  .app-card:hover .app-media img { transform: scale(1.05); }
  .app-body { padding: 17px 20px 20px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
  /* v9.9：摘要有的一行有的两行，把「查看应用详情」压到卡片底部，一排三张的链接才齐平 */
  .app-body .app-more { margin-top: auto; padding-top: 3px; }
  .app-tag {
    align-self: flex-start; font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
    color: var(--copper); background: var(--copper-bg); border-radius: 980px; padding: 4px 12px;
  }
  .app-body h4 { font-size: 17px; font-weight: 600; letter-spacing: -0.008em; line-height: 1.4; }
  /* v12.3：锌铬涂层（达克罗）/无铬锌铝涂层专用片状锌粉 —— 17px 一行放不下，只在「/」后的零宽空格处断成两行 */
  .app-card[data-app="7"] .app-body h4 { word-break: keep-all; text-wrap: wrap; }
  /* v12.3：英文标签收字距（中文仍 .1em），1200 以上宽屏五项的标签也排一行，胶囊不折成两行 */
  html[lang="en"] .app-tag { letter-spacing: .03em; }
  .app-body p { font-size: 13px; color: var(--ink-2); line-height: 1.6; }
  @media (max-width: 860px) { .app-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px) { .app-grid { grid-template-columns: 1fr; } }


  /* 应用卡片：整张可点，右下角一条"查看应用详情" */
  .app-card { cursor: pointer; }
  .app-body { position: relative; }
  .app-more {
    margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--accent);
    display: inline-flex; align-items: center; gap: 4px;
  }
  .app-more::after { content: "›"; font-size: 15px; line-height: 1; transition: transform .25s ease; }
  .app-card:hover .app-more::after { transform: translateX(3px); }
  .app-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

  /* 应用详情弹窗 */
  .amodal[hidden] { display: none; }
  .amodal { position: fixed; inset: 0; z-index: 215; display: flex; align-items: center; justify-content: center; padding: 24px 18px; }
  .amodal-mask { position: absolute; inset: 0; background: rgba(4,10,20,.72); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
  .amodal-card {
    position: relative; width: min(900px, 100%); max-height: 88vh; display: flex; flex-direction: column;
    background: var(--card); border-radius: 24px; overflow: hidden;
    box-shadow: 0 30px 80px rgba(4,10,20,.45); animation: amPop .3s cubic-bezier(.2,.8,.3,1);
  }
  @keyframes amPop { from { opacity: 0; transform: translateY(14px) scale(.985); } }
  @media (prefers-reduced-motion: reduce) { .amodal-card { animation: none; } }
  .amodal-hero { position: relative; flex: none; aspect-ratio: 1120 / 250; background: var(--navy); }
  .amodal-hero img { width: 100%; height: 100%; object-fit: cover; }
  .amodal-heroscrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,16,32,.92) 4%, rgba(6,16,32,.42) 52%, rgba(6,16,32,.1) 100%); }
  .amodal-herotxt { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 26px 16px; color: #fff; }
  .amodal-herotxt .app-tag { background: rgba(255,255,255,.16); color: #ffd9bd; margin-bottom: 8px; display: inline-block; }
  .amodal-herotxt h3 { font-size: clamp(19px, 2.6vw, 25px); font-weight: 700; letter-spacing: -0.015em; }
  .amodal-x {
    position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; padding: 0; border: 0;
    border-radius: 50%; background: rgba(10,20,36,.42); color: #fff; font-size: 17px; line-height: 1;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  .amodal-x:hover { background: rgba(10,20,36,.68); }
  .amodal-body { overflow-y: auto; padding: 24px 30px 4px; }
  .amodal-body h4 {
    font-size: 12px; font-weight: 700; letter-spacing: .16em; color: var(--copper);
    margin-bottom: 10px;
  }
  .amodal-body h4 + p { font-size: 14.5px; line-height: 1.95; color: var(--ink-2); }
  .amodal-body .gap { margin-top: 24px; }
  .amodal-body ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
  .amodal-body li {
    position: relative; padding-left: 26px; font-size: 14px; line-height: 1.85; color: var(--ink-2);
  }
  .amodal-body li::before {
    content: ""; position: absolute; left: 2px; top: 9px; width: 9px; height: 9px; border-radius: 3px;
    background: var(--accent); opacity: .85;
  }
  .amodal-foot {
    flex: none; display: flex; gap: 10px; justify-content: flex-end;
    padding: 18px 30px 22px; border-top: 1px solid var(--hairline); margin-top: 22px;
  }
  @media (max-width: 620px) {
    .amodal { padding: 0; }
    .amodal-card { max-height: 100vh; height: 100%; border-radius: 0; }
    .amodal-body { padding: 20px 20px 4px; }
    .amodal-foot { padding: 14px 20px 18px; }
    /* v12.8：1120:250 在手机上只有 88px 高，两行标题把领域小胶囊顶出画面、✕ 压住标题 */
    .amodal-hero { aspect-ratio: auto; height: clamp(210px, 58vw, 260px); }
    .amodal-herotxt { padding: 18px 20px 16px; }
    /* 达克罗那条标题只在「涂层」后的零宽空格处断，不出「专用片 / 状锌粉」 */
    html:not([lang="en"]) #appmTitle { word-break: keep-all; }
  }


  /* 产品信息弹窗：复用应用详情的壳，头部换成纯文字 */
  .amodal-head { flex: none; position: relative; padding: 26px 30px 18px; border-bottom: 1px solid var(--hairline); }
  .amodal-head .kick { font-size: 11px; font-weight: 700; letter-spacing: .16em; color: var(--copper); }
  .amodal-head h3 { font-size: clamp(19px, 2.6vw, 24px); font-weight: 700; letter-spacing: -0.015em; margin-top: 9px; }
  .amodal-head .amodal-x { background: var(--bg-tint); color: var(--ink-2); }
  .amodal-head .amodal-x:hover { background: var(--hairline); color: var(--ink); }
  .amodal-body li b { color: var(--ink); font-weight: 600; }
  .amodal-body li b::after { content: "："; font-weight: 400; color: var(--ink-3); }
  :root[lang="en"] .amodal-body li b::after { content: " — "; }

  /* ---------- Configurator / 选购 ---------- */
  .buy { padding: 96px 0; }
  .buy .section-head { margin-bottom: 26px; }
  .buy .section-head p { margin-top: 12px; font-size: 16.5px; }
  .buy-wrap {
    max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
    display: grid; grid-template-columns: 5fr 7fr; gap: 22px; align-items: stretch;
  }
  .buy-summary {
    position: sticky; top: 86px;
    background: linear-gradient(160deg, var(--navy), var(--navy-card));
    color: var(--ink-on-navy); border-radius: 24px; padding: 28px 26px;
    display: flex; flex-direction: column; gap: 12px;
  }
  .buy-summary .glyph { height: 88px; }
  /* v9.9：左卡与右侧四张卡等高，按钮压到底部，中间留白由图标与标题分担 */
  .buy-summary .buy-ctas { margin-top: auto; }
  .buy-summary .cfg-label { font-size: 11px; letter-spacing: .18em; color: var(--cyan-on-navy); font-weight: 700; }
  .buy-summary h3 { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25;
    font-feature-settings: "halt"; }
  .buy-summary .cfg-line { font-size: 15px; color: var(--ink2-on-navy); font-variant-numeric: tabular-nums; }
  .buy-summary .divider { border: 0; border-top: 1px solid var(--hairline-navy); margin: 4px 0; }
  .spec-rows { display: flex; flex-direction: column; }
  .spec-row { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--hairline-navy); font-size: 13.5px; }
  .spec-row:last-child { border-bottom: 0; }
  .spec-row .k { color: var(--ink2-on-navy); flex: none; }
  .spec-row .v { text-align: right; font-variant-numeric: tabular-nums; }
  .buy-ctas { display: flex; gap: 12px; margin-top: 6px; flex-wrap: wrap; }
  .btn-primary {
    background: var(--accent); color: #fff; border: 0; border-radius: 980px;
    padding: 11px 26px; font-size: 15px; font-weight: 600; transition: filter .2s;
  }
  .btn-primary:hover { filter: brightness(1.12); }
  .btn-ghost {
    background: transparent; color: var(--cyan-on-navy); border: 1px solid var(--hairline-navy);
    border-radius: 980px; padding: 11px 22px; font-size: 15px;
  }
  .btn-ghost:hover { border-color: var(--cyan-on-navy); }
  /* 三个系列的完整产品介绍都在这个弹窗里，不能和「下载技术资料」一样弱；
     但也不抢「询价试样」这个主行动点，所以用描边+浅底的次级样式 */
  #pinfoBtn {
    border-color: var(--cyan-on-navy); font-weight: 600;
    background: color-mix(in srgb, var(--cyan-on-navy) 15%, transparent);
  }
  #pinfoBtn::before { content: "\24D8"; margin-right: 6px; font-size: 15px; line-height: 1; }
  #pinfoBtn:hover { background: color-mix(in srgb, var(--cyan-on-navy) 26%, transparent); }

  .buy-steps { display: flex; flex-direction: column; gap: 10px; }
  .step { background: var(--card); border: 1px solid var(--hairline); border-radius: 20px; padding: 12px 20px 14px; }
  .step .step-title { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
  .step .step-title b { font-size: 17px; font-weight: 700; letter-spacing: -0.005em; }
  .step .step-title span { font-size: 12.5px; color: var(--ink-3); }
  .opt-row { display: flex; flex-wrap: wrap; gap: 10px; }
  .opt {
    border: 1.5px solid var(--hairline); background: transparent; color: var(--ink);
    border-radius: 13px; padding: 7px 14px; font-size: 14.5px;
    transition: border-color .15s, background .15s; text-align: left;
    /* button 的内容默认垂直居中：同一行里小字换成两行的按钮会被撑高，
       其余按钮跟着 stretch 到同高后把产品名居中，第一行就参差不齐了，改成顶对齐 */
    display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
  }
  .opt[hidden] { display: none; }
  .opt:hover { border-color: var(--ink-3); }
  .opt.sel { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); font-weight: 600; }
  .opt small { display: block; font-size: 11.5px; color: var(--ink-3); font-weight: 400; margin-top: 2px; }
  .opt-wide { flex: 1 1 150px; }
  /* v9.9：四个包装按钮排一行（「其他包装·支持定制」原来折成两行），文字居中不再顶左 */
  .opt-row[data-group="pack"] .opt-wide { flex: 1 1 auto; align-items: center; text-align: center; white-space: nowrap; }
  .step-note { font-size: 12.5px; color: var(--ink-3); margin-top: 11px; }
  .std-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 9px; }
  .std-line .step-note, .std-line .std-chips { margin-top: 0; }
  .std-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
  .std-chip {
    font-size: 12px; color: var(--ink-2); border: 1px solid var(--hairline);
    border-radius: 980px; padding: 4px 12px; font-variant-numeric: tabular-nums;
  }
  /* v10.1：规格下方的标准说明，三个系列各一句，按 html[data-series] 显隐（同 .ms-*） */
  .std-note { font-size: 12.5px; color: var(--ink-3); line-height: 1.6; margin-top: 10px; }
  .std-note + .std-note { margin-top: 2px; }
  .std-note .kp { display: inline-block; font-feature-settings: "halt"; }
  .std-note .kp + .kp:not(:last-child) { margin-left: 2px; }
  .std-flk, .std-atm { display: none; }
  html[data-series="flake"] .std-ball, html[data-series="atom"] .std-ball { display: none; }
  html[data-series="flake"] .std-flk, html[data-series="atom"] .std-atm { display: block; }
  @media (max-width: 900px) {
    .buy-wrap { grid-template-columns: 1fr; }
    .buy-summary { position: static; }
  }

  /* ---------- 选型卡里的检测圆窗（v10.0，原为选购区下方的「实物与检测」长卡） ---------- */
  /* 上下各留 auto：图标+标题在上、按钮在下，两个圆窗落在中间那片空白里 */
  .buy-qc { margin-top: auto; padding-top: 4px; }
  .qc-figs { position: relative; display: flex; justify-content: center; gap: clamp(22px, 3vw, 44px);
    --qcs: clamp(124px, 10.4vw, 150px); }
  /* 图注和圆窗同宽：英文图注（Distilled spherical zinc dust, SEM）比圆窗宽，会把整个 figure 撑宽、圆窗偏到左边 */
  .buy-qc .qc-fig { width: var(--qcs); }
  /* v10.5 圆窗下的系列说明：系列名亮白加粗，其余浅灰；中文两段各不断开，放不下在「·」后换行 */
  .buy-qc .qc-series { margin-top: 14px; text-align: center; font-size: 12.5px; line-height: 1.6;
    color: rgba(255,255,255,.76); letter-spacing: .02em; }
  .buy-qc .qc-series b { color: #fff; font-weight: 600; }
  html:not([lang="en"]) .buy-qc .qc-series b { margin-right: .3em; }
  html:not([lang="en"]) .buy-qc .qc-series > span { white-space: nowrap; }
  .buy-qc .qc-series .qs-tip { white-space: nowrap; }
  /* 中文图注电脑端一行排完：「蒸馏法球状锌粉 SEM 形貌」比圆窗略宽，允许左右探出、以圆窗为中心；
     手机上放不下才换行，keep-all + 不断行空格保证只断在系列名后面（第二行是「SEM 形貌」）。
     英文图注长得多（Distilled spherical zinc dust, SEM），照常在圆窗宽度内折行 */
  html:not([lang="en"]) .buy-qc .qc-fig figcaption {
    white-space: nowrap; width: max-content; position: relative; left: 50%; transform: translateX(-50%);
  }
  @media (max-width: 560px) {
    html:not([lang="en"]) .buy-qc .qc-fig figcaption {
      white-space: normal; word-break: keep-all; width: auto; left: 0; transform: none;
    }
  }
  .qc-fig { text-align: center; margin: 0; }
  /* 圆窗本身是个按钮：悬停放大 + 出现放大镜角标，点开进灯箱看大图 */
  .qc-lens {
    position: relative; display: block; width: var(--qcs); height: var(--qcs);
    padding: 0; border: 0; background: transparent; border-radius: 50%; cursor: zoom-in;
    transition: transform .28s cubic-bezier(.2,.7,.3,1);
  }
  .qc-lens img {
    position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%;
    object-fit: cover; display: block; opacity: 0; transition: opacity .45s ease;
    border: 3px solid rgba(255,255,255,.5); box-shadow: 0 12px 32px rgba(0,0,0,.4); background: #0d1524;
  }
  /* 粒度报告是白底宽图，圆窗里按整幅缩放而不是裁切，曲线才看得全 */
  .qc-lens img.fit { object-fit: contain; background: #fff; }
  #qcCard[data-series="ball"]  .qc-lens img.k-ball  { opacity: 1; }
  #qcCard[data-series="atom"]  .qc-lens img.k-atom  { opacity: 1; }
  #qcCard[data-series="flake"] .qc-lens img.k-flake { opacity: 1; }
  .qc-lens::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
    box-shadow: inset 0 0 0 0 rgba(255,255,255,0); transition: box-shadow .28s ease;
  }
  .qc-lens:hover { transform: scale(1.07); }
  .qc-lens:hover::after { box-shadow: inset 0 0 0 3px rgba(255,255,255,.9); }
  .qc-lens:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
  .qc-zoom {
    position: absolute; right: 4px; bottom: 4px; width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1;
    color: #0b1626; background: rgba(255,255,255,.92); box-shadow: 0 4px 14px rgba(0,0,0,.35);
    opacity: 0; transform: scale(.72); transition: opacity .22s ease, transform .22s ease;
  }
  .qc-lens:hover .qc-zoom, .qc-lens:focus-visible .qc-zoom { opacity: 1; transform: scale(1); }
  .qc-fig figcaption { font-size: 12px; color: rgba(255,255,255,.86); margin-top: 12px; letter-spacing: .04em; }
  /* ≤900 选购器变单栏，左卡撑满整行，圆窗按屏宽算 */
  @media (max-width: 900px) { .qc-figs { --qcs: clamp(116px, 30vw, 164px); } }
  @media (prefers-reduced-motion: reduce) { .qc-lens img, .qc-lens, .qc-zoom { transition: none; } .qc-lens:hover { transform: none; } }

  /* 包装方式：标题右侧的「看实景」链接 + 实景弹窗 */
  /* 原来是一行小字，客户容易划过去；改成带底色的描边胶囊 */
  .step-link {
    cursor: pointer; font-family: inherit; white-space: nowrap;
    display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 600;
    color: var(--accent); border-radius: 980px; padding: 5px 13px;
    background: color-mix(in srgb, var(--accent) 11%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 36%, transparent);
    transition: background .18s ease, border-color .18s ease;
  }
  .step-link::before { content: "\25F1"; margin-right: 6px; font-size: 12px; line-height: 1; opacity: .85; }
  .step-link:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); border-color: var(--accent); }
  .step-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .step-link .arw { margin-left: 3px; display: inline-block; transition: transform .2s ease; }
  /* v9.8：三个系列各一套产品规格选项，按 html[data-series]（syncFields 写）显隐 */
  .ms-flk, .ms-atm { display: none; }
  html[data-series="flake"] .ms-ball, html[data-series="atom"] .ms-ball { display: none; }
  html[data-series="flake"] .ms-flk, html[data-series="atom"] .ms-atm { display: flex; }
  /* v12.7：干法片状 PCF6004/6010/6015 先只在中文页显示（英文宣传册未更新） */
  html[lang="en"][data-series="flake"] .opt-row[data-group="mesh"] .ms-cn { display: none; }
  /* 型号胶囊与目数比起来字更宽，收一点内边距，选购器这一列（612px）里六个排一行 */
  html[data-series="flake"] .opt-row[data-group="mesh"] { gap: 8px; }
  .opt-row[data-group="mesh"] .ms-flk { padding-left: 11px; padding-right: 11px; }
  /* v10.1：球状 6 档目数 + 定制，胶囊收窄才排得进一行（中文页 612px 一列；英文 mesh 字长，照常折行） */
  html:not([lang="en"]) .opt-row[data-group="mesh"] .ms-ball { padding-left: 10px; padding-right: 10px; }   /* v12.6：WL 牌号略宽，11→10 */
  /* v10.2：雾化 8 档目数胶囊等宽、文字居中；定制项放不下自然落到第二行 */
  html:not([lang="en"]) .opt-row[data-group="mesh"] .ms-atm:not(:last-child) { min-width: 66px; padding-left: 10px; padding-right: 10px; align-items: center; }
  html:not([lang="en"]):not([data-series="flake"]):not([data-series="atom"]) .opt-row[data-group="mesh"] { gap: 8px; }
  /* 规格参数表弹窗：四张图（球/片 × 中/英）都在 DOM 里，按系列与语种显一张 */
  .spec-fig { margin: 0; }
  .spec-fig .sp-shot { display: none; width: 100%; padding: 0; border: 1px solid var(--hairline); border-radius: 14px; overflow: hidden; background: #fff; cursor: zoom-in; }
  html:not([lang="en"]):not([data-series="flake"]) .spec-fig .sp-ball.sp-cn,
  html[lang="en"]:not([data-series="flake"]) .spec-fig .sp-ball.sp-en,
  html:not([lang="en"])[data-series="flake"] .spec-fig .sp-flk.sp-cn,
  html[lang="en"][data-series="flake"] .spec-fig .sp-flk.sp-en { display: block; }
  .spec-fig .sp-shot img { display: block; width: 100%; height: auto; }
  .spec-fig figcaption { margin-top: 8px; font-size: 12.5px; color: var(--ink-3); text-align: center; }
  .step-link:hover .arw { transform: translateX(2px); }
  .pack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .pack-shot { margin: 0; }
  .pack-shot button {
    display: block; width: 100%; padding: 0; border: 0; background: var(--bg-tint);
    border-radius: 14px; overflow: hidden; cursor: zoom-in; aspect-ratio: 4 / 3;
  }
  .pack-shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
  .pack-shot button:hover img { transform: scale(1.05); }
  .pack-shot figcaption { font-size: 12.5px; color: var(--ink-2); margin-top: 9px; line-height: 1.6; text-align: center; }
  .pack-shot figcaption b { display: block; color: var(--ink); font-weight: 600; font-size: 13.5px; margin-bottom: 2px; }
  .pack-note { font-size: 13px; color: var(--ink-2); line-height: 1.85; margin-top: 20px; }
  @media (max-width: 640px) { .pack-grid { grid-template-columns: 1fr; } }
  @media (prefers-reduced-motion: reduce) { .pack-shot button:hover img { transform: none; } }

  /* ---------- Bases ---------- */
  .bases { padding: 104px 0; background: var(--bg-tint); }
  .base-cards { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .base-card { background: var(--card); border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
  .base-visual { aspect-ratio: 3 / 2; overflow: hidden; position: relative; }
  .base-visual img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
  .base-card:hover .base-visual img { transform: scale(1.04); }
  .base-visual .pill-row {
    position: absolute; top: 14px; left: 14px; right: 14px;
    display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  }
  .base-visual .loc-pill {
    position: static;
    background: rgba(8, 18, 36, .6); color: #fff; font-size: 12px; letter-spacing: .1em;
    border-radius: 980px; padding: 6px 14px;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  .base-body { padding: 24px 26px 30px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
  .base-body h3 { font-size: 14.5px; font-weight: 600; letter-spacing: -0.005em; color: var(--ink); }
  /* 三行结构：产能数字 → 公司全称 → 履历。履历比原先的一句话长得多，行高放松一点 */
  .base-body .cap { line-height: 1.05; margin-bottom: 2px; }
  .base-body p { line-height: 1.75; }
  .base-body p { flex: 1; }
  .base-visual .status-pill {
    position: static;
    background: rgba(217, 86, 11, .88); color: #fff; font-size: 12px; letter-spacing: .1em;
    border-radius: 980px; padding: 6px 14px;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  .base-body .cap { font-size: clamp(32px, 3.6vw, 42px); font-weight: 700; letter-spacing: -0.02em; color: var(--brand); font-variant-numeric: tabular-nums; }
  .base-body .cap em { font-style: normal; font-size: .42em; font-weight: 500; color: var(--ink-2); margin-left: 4px; }
  .base-body p { color: var(--ink-2); font-size: 14.5px; }
  .base-facts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
  .fact-chip { font-size: 12px; color: var(--ink-2); background: var(--bg-tint); border-radius: 980px; padding: 5px 13px; }
  :root[data-theme="dark"] .fact-chip { background: rgba(255,255,255,.07); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fact-chip { background: rgba(255,255,255,.07); } }
  /* 英文角标比中文长得多，去掉给中文排的字距、字号略收，两枚才排得开 */
  :root[lang="en"] .base-visual .loc-pill,
  :root[lang="en"] .base-visual .status-pill { font-size: 11.5px; letter-spacing: .02em; padding: 6px 12px; }
  @media (max-width: 900px) { .base-cards { grid-template-columns: 1fr; } }

  /* ---------- Standards & honors ---------- */
  .cred { padding: 104px 0 96px; }
  .cred-grid { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; }
  .cred-main { background: var(--card); border: 1px solid var(--hairline); border-radius: 24px; padding: 40px 38px; display: flex; flex-direction: column; gap: 16px; }
  .cred-main h3 { font-size: 25px; font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; }
  .cred-main p { color: var(--ink-2); font-size: 15px; max-width: 42em; }
  .std-list { display: flex; flex-direction: column; margin-top: 4px; }
  .std-item { display: flex; gap: 16px; padding: 15px 0; border-top: 1px solid var(--hairline); align-items: baseline; }
  .std-item .code { font-size: 13px; font-weight: 700; color: var(--brand); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .std-item .name { font-size: 15px; }
  .honor-stack { display: flex; flex-direction: column; gap: 16px; }
  .honor {
    background: var(--card); border: 1px solid var(--hairline); border-radius: 18px;
    padding: 22px 26px; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 4px;
  }
  .honor b { font-size: 16px; font-weight: 600; }
  /* 必须是直接子选择器：<b> 里的 .kp 也是 span，写成 .honor span 会被压成 13px 灰字 */
  .honor > span { font-size: 13px; color: var(--ink-2); }
  @media (max-width: 860px) { .cred-grid { grid-template-columns: 1fr; } }
  .cert-strip {
    max-width: var(--wrap); margin: 26px auto 0; padding: 4px var(--gutter) 12px;
    display: grid; grid-auto-flow: column; grid-auto-columns: 250px; gap: 14px;
    overflow-x: auto; scroll-snap-type: x proximity;
  }
  .cert {
    margin: 0; scroll-snap-align: start;
    background: var(--card); border: 1px solid var(--hairline); border-radius: 16px;
    overflow: hidden; display: flex; flex-direction: column;
  }
  .cert .cert-img {
    aspect-ratio: 4 / 3; background: #eceef2; display: flex;
    align-items: center; justify-content: center; padding: 10px;
  }
  :root[data-theme="dark"] .cert .cert-img { background: #0d1524; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cert .cert-img { background: #0d1524; } }
  .cert img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }
  .cert figcaption { font-size: 12.5px; color: var(--ink-2); padding: 11px 14px 14px; line-height: 1.5; flex: 1; }
  /* 发明专利墙：固定扇形排布，刻意不做交互也不放大——
     要的是"看得出有很多"，不是让人逐项细读 */
  /* .rd-patent-head 的下外边距是 -8px（原来紧贴证书条），中间插进这段文字要把间距补回来 */
  /* 中文按字断行，换行点常落在词中间。把每个短语裹成 .kp（keep phrase）不可断，
     换行就只会发生在标点处；窄屏放开，免得短语比一行还长撑破版面 */
  .kp { white-space: nowrap; }
  @media (max-width: 560px) { .kp { white-space: normal; } }
  .pat-note { font-size: 15px; line-height: 1.95; color: var(--ink-2); max-width: 62em; margin-top: 24px; }
  /* 专利墙：横排，中间一张最大（能看清），往两侧逐级缩小（自然看不清具体条款）。
     不加模糊、不可点击、不可放大——领导要的是"看得出很多"而不是让人逐项细读。
     整排只由 --u（中间那张的宽度）一个变量驱动：每张的宽度与位移都是它的倍数，
     --u 跟着容器宽度线性缩放，所以不需要断点，任何宽度下比例都一样 */
  .pat-row {
    /* 0.197 是反推出来的：半幅 2.4044u 要塞进「容器宽/2 - 30px（留给投影）」，
       两侧证书一张都不许被裁；重叠固定取较小那张宽度的 8%，是不裁切前提下最小的量 */
    --u: calc(min(1156px, 100vw - 2 * var(--gutter)) * 0.197);
    position: relative; height: calc(var(--u) * 1.414); margin-top: 18px;
    overflow: hidden;                      /* 最外侧两张有意被裁掉一角，暗示"还有更多" */
    pointer-events: none; user-select: none; -webkit-user-select: none;
  }
  .pat-row img {
    position: absolute; top: 50%;
    width: calc(var(--u) * var(--s)); height: auto;
    left: calc(50% + var(--u) * var(--dx) - var(--u) * var(--s) / 2);
    transform: translateY(-50%);
    border-radius: 4px; background: #fff;
    box-shadow: 0 10px 26px rgba(16, 29, 51, .20);
    -webkit-user-drag: none;
  }
  :root[data-theme="dark"] .pat-row img { box-shadow: 0 10px 26px rgba(0, 0, 0, .55); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pat-row img { box-shadow: 0 10px 26px rgba(0, 0, 0, .55); } }
  /* 窄屏不能靠裁切来腾地方（两侧必须完整），改成少摆几张、把剩下的放大：
     ≤820 收成五张，≤560 收成三张，中间那张始终尽可能大 */
  @media (max-width: 820px) {
    .pat-row { --u: calc(min(1156px, 100vw - 2 * var(--gutter)) * 0.233); }
    .pat-row img:nth-child(1), .pat-row img:nth-child(7) { display: none; }
  }
  @media (max-width: 560px) {
    .pat-row { --u: calc(min(1156px, 100vw - 2 * var(--gutter)) * 0.321); }
    .pat-row img:nth-child(2), .pat-row img:nth-child(6) { display: none; }
  }
  .cert-hint { max-width: var(--wrap); margin: 8px auto 0; padding: 0 var(--gutter); font-size: 12.5px; color: var(--ink-3); text-align: right; }
  /* 首页的证书墙只负责交代「有很多」，看清具体内容是二级页「荣誉资质」的事。
     去掉卡壳与说明文字、只留缩略图，高度从 268px 收到约 130px，
     跟上面的专利墙拉开主次，也不再和它撞成两排同类画面。
     只能改 CSS：二级页那排是从这份 markup 克隆过去的，动 markup 会把二级页一起改了 */
  .cert-mini {
    grid-auto-columns: 190px; gap: 12px; margin-top: 22px;
    /* 内边距不能留在滚动容器上：卡片带 scroll-snap-align:start，浏览器会把 scrollLeft
       吸到 22 好让第一张贴住滚动视口起始边，padding 等于被滚走，视觉上整条比上面的
       荣誉卡左右各宽出一个 gutter。改成盒子自己收窄，左右边界就和 .cred-wrap 的内容区重合。
       width 那条是给窄屏的：那时 max-width 不起作用，只靠 100%-2*gutter 顶住 */
    max-width: calc(var(--wrap) - 2 * var(--gutter));
    width: calc(100% - 2 * var(--gutter));
    padding-left: 0; padding-right: 0;
  }
  .cert-mini .cert { background: none; border: 0; border-radius: 0; }
  .cert-mini .cert figcaption { display: none; }
  .cert-mini .cert .cert-img { border-radius: 10px; padding: 6px; }
  @media (max-width: 560px) { .cert-mini { grid-auto-columns: 150px; } }

  @media (max-width: 700px) { .cert-hint { text-align: left; } }

  /* ---------- Partners ---------- */
  .partners { padding: 0 0 104px; }
  .partner-grid {
    max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
    display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px;
  }
  .partner {
    background: #ffffff; border: 1px solid var(--hairline); border-radius: 14px;
    aspect-ratio: 2 / 1; display: flex; align-items: center; justify-content: center; padding: 4px 6px;
  }
  .partner img {
    width: 100%; height: 100%; object-fit: contain;
  }
  /* LOGO 墙摆 40 家（v11.8），下面这排点告诉访客「还有很多」——
     三个点自己呼吸，比一句小字更像「未完待续」 */
  .partner-more {
    max-width: var(--wrap); margin: 22px auto 0; padding: 0 var(--gutter);
    /* v7.9：居中会被当成「可以左右翻页」的指示，改为左对齐 */
    /* v8.5：点与说明同一行，窄屏放不下再换行 */
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  }
  .partner-more .pm-dots { display: flex; align-items: center; gap: 7px; }
  .partner-more .pm-dots i {
    width: 7px; height: 7px; border-radius: 50%; background: var(--brand); opacity: .3;
    animation: pmBreathe 2.4s ease-in-out infinite;
  }
  .partner-more .pm-dots i:nth-child(2) { animation-delay: .28s; }
  .partner-more .pm-dots i:nth-child(3) { animation-delay: .56s; }
  .partner-more .pm-dots i:nth-child(4) { animation-delay: .84s; }
  .partner-more .pm-dots i:nth-child(5) { animation-delay: 1.12s; }
  .partner-more .pm-dots i:nth-child(6) { animation-delay: 1.4s; }
  @keyframes pmBreathe { 0%, 100% { opacity: .26; transform: scale(1); } 50% { opacity: .85; transform: scale(1.28); } }
  @media (prefers-reduced-motion: reduce) {
    .partner-more .pm-dots i { animation: none; opacity: .5; }
  }
  .partner-more .pm-cap {
    font-size: 12.5px; letter-spacing: .16em; color: var(--ink-3);
  }
    /* v10.2：颜色字号与大标题下方说明（.section-head p）同级，比大标题弱一级；只让数字跳出来 */
  .partner-note {
    text-align: center; color: var(--ink-2); font-size: clamp(16px, 1.4vw, 18px);
    line-height: 1.7; margin-top: 30px; padding: 0 22px;
  }
  .partner-note .pn-num {
    font-size: 2.1em; font-weight: 800; color: var(--accent); letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums; line-height: 1; margin: 0 .1em; vertical-align: -0.1em;
  }
  @media (max-width: 1100px) { .partner-grid { grid-template-columns: repeat(5, 1fr); } }
  @media (max-width: 600px) { .partner-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; } .partner { border-radius: 10px; padding: 3px 4px; } }
  /* v12.8：iOS（WebKit）里 img 的 height:100% 不认 aspect-ratio 算出的高，格子被 logo 原图撑高撑宽，
     第四列出屏、下面的说明压到 logo 上。手机上 img 绝对定位铺满格子，格子尺寸只由列宽决定 */
  @media (max-width: 600px) {
    .partner-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .partner { position: relative; min-width: 0; overflow: hidden; }
    .partner img { position: absolute; top: 3px; left: 4px; width: calc(100% - 8px); height: calc(100% - 6px); }
    .partner-note { margin-top: 36px; }
  }

  /* ---------- News ---------- */
  .news { padding: 0 0 104px; }
  .news-grid { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .news-card {
    background: var(--card); border: 1px solid var(--hairline); border-radius: 18px;
    padding: 26px 26px; display: flex; flex-direction: column; gap: 12px; transition: transform .25s ease;
  }
  .news-card:hover { transform: translateY(-3px); }
  .news-card .cat { font-size: 11px; letter-spacing: .16em; color: var(--accent); font-weight: 700; }
  .news-card h4 { font-size: 17.5px; font-weight: 600; line-height: 1.45; flex: 1; }
  .news-card time { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
  @media (max-width: 760px) { .news-grid { grid-template-columns: 1fr; } }

  /* ---------- Investor ---------- */
  .investor { background: linear-gradient(170deg, var(--navy), var(--navy-card)); color: var(--ink-on-navy); text-align: center; padding: 96px 22px; }
  .investor .kicker { font-size: 13px; letter-spacing: .2em; color: var(--cyan-on-navy); font-weight: 700; margin-bottom: 16px; }
  .investor h2 { font-size: clamp(30px, 4.5vw, 46px); font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
  .investor .ticker {
    display: inline-flex; align-items: baseline; gap: 14px; margin-top: 26px;
    border: 1px solid var(--hairline-navy); border-radius: 16px; padding: 16px 32px;
    font-variant-numeric: tabular-nums; background: rgba(255, 255, 255, .04);
  }
  .investor .ticker b { font-size: 32px; font-weight: 700; letter-spacing: .04em; }
  .investor .ticker span { font-size: 14px; color: var(--ink2-on-navy); }
  .investor p.note { color: var(--ink2-on-navy); margin-top: 20px; font-size: 15px; }
  .investor a.link { color: var(--cyan-on-navy); font-size: 17px; display: inline-block; margin-top: 10px; }
  .investor a.link::after { content: " ›"; }
  .investor a.link:hover { text-decoration: underline; }

  /* ---------- 询价试样弹窗 ---------- */
  .modal[hidden] { display: none; }
  .modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
  .modal-mask { position: absolute; inset: 0; background: rgba(6, 14, 28, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .modal-card {
    position: relative; width: min(520px, 100%); max-height: 88vh; overflow-y: auto;
    background: var(--card); border: 1px solid var(--hairline); border-radius: 22px;
    padding: 32px clamp(22px, 4vw, 34px) 28px; box-shadow: 0 30px 70px rgba(6, 14, 28, .3);
    animation: modalIn .28s cubic-bezier(.2, .8, .3, 1);
  }
  @keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
  .modal-x { position: absolute; top: 13px; right: 15px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: transparent; color: var(--ink-3); font-size: 20px; line-height: 1; }
  .modal-x:hover { background: var(--bg-tint); color: var(--ink); }
  .modal-card h3 { font-size: 21px; font-weight: 700; letter-spacing: -0.012em; }
  .modal-sub { font-size: 13.5px; color: var(--ink-2); margin-top: 8px; line-height: 1.7; }
  .inq-cfg { margin-top: 16px; padding: 13px 16px; border-radius: 13px; background: var(--bg-tint); font-size: 13px; color: var(--ink-2); line-height: 1.75; }
  .inq-cfg b { color: var(--ink); font-weight: 600; }
  :root[data-theme="dark"] .inq-cfg { background: rgba(255,255,255,.05); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .inq-cfg { background: rgba(255,255,255,.05); } }
  .inq-field { display: block; margin-top: 15px; }
  /* 作者样式的 display 会盖掉浏览器默认的 [hidden]{display:none}，必须显式写一条 */
  .inq-field[hidden] { display: none; }
  .inq-field > span { display: block; font-size: 12.5px; color: var(--ink-2); margin-bottom: 6px; }
  .inq-field .req { color: var(--copper); margin-left: 2px; }
  .inq-field input, .inq-field textarea {
    width: 100%; font: inherit; font-size: 14.5px; color: var(--ink); background: transparent;
    border: 1.5px solid var(--hairline); border-radius: 12px; padding: 10px 13px; transition: border-color .18s ease;
  }
  .inq-field textarea { resize: vertical; line-height: 1.6; }
  .inq-field input:focus, .inq-field textarea:focus { outline: none; border-color: var(--accent); }
  .inq-field.err input, .inq-field.err textarea { border-color: #e5484d; }
  .inq-field > .inq-err { font-size: 12px; color: #e5484d; margin-top: 5px; display: none; }
  .inq-field.err > .inq-err { display: block; }
  /* 蜜罐：移出视口，真人与读屏软件都碰不到，机器人解析 DOM 会填 —— 别改成 display:none */
  .inq-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .inq-send-err { font-size: 13px; color: #e5484d; line-height: 1.6; margin-top: 12px; }
  .inq-note { font-size: 12px; color: var(--ink-3); line-height: 1.75; margin-top: 16px; }
  .inq-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
  .btn-ghost2 { background: transparent; color: var(--ink-2); border: 1px solid var(--hairline); border-radius: 980px; padding: 11px 22px; font-size: 14.5px; }
  .btn-ghost2:hover { border-color: var(--ink-3); color: var(--ink); }
  .inq-done { text-align: center; padding: 12px 0 4px; }
  .inq-done .tick { width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 16px; background: color-mix(in srgb, #16a34a 16%, transparent); color: #16a34a; display: flex; align-items: center; justify-content: center; font-size: 25px; }
  .inq-done h4 { font-size: 18px; font-weight: 700; }
  .inq-done p { font-size: 13.5px; color: var(--ink-2); margin-top: 9px; line-height: 1.75; }

  /* 选型摘要的产品形态图随系列切换 */
  .glyph-wrap { position: relative; height: 96px; }
  .glyph-wrap .glyph { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .45s ease; }
  .buy-summary[data-series="ball"] .glyph-ball { opacity: 1; }
  .buy-summary[data-series="atom"] .glyph-atom { opacity: 1; }
  .buy-summary[data-series="flake"] .glyph-flake { opacity: 1; }
  body.subpage .side-nav { display: none; }
  @media (prefers-reduced-motion: reduce) { .modal-card { animation: none; } .glyph-wrap .glyph { transition: none; } }


  /* ============ 联系我们 ============ */
  /* 左图右卡。地址卡是网格不是单列 —— 以后新增基地只是多占一格，
     不会像单列那样把右栏越拉越长、把地图下方空出一大片 */
  .geo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; }
  .geo-map {
    background: var(--card); border: 1px solid var(--hairline); border-radius: 26px;
    padding: 10px 12px 6px; box-shadow: var(--shadow);
  }
  .geo-list {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(198px, 1fr));
    gap: 10px; align-content: start;
  }
  .geo-card {
    background: var(--card); border: 1px solid var(--hairline); border-radius: 18px;
    padding: 15px 17px 14px; cursor: pointer; display: flex; flex-direction: column;
    transition: border-color .2s ease, box-shadow .2s ease;
  }
  .geo-card:hover { border-color: color-mix(in srgb, var(--brand) 45%, transparent); }
  .geo-card.on { border-color: var(--brand); box-shadow: var(--shadow); }
  .geo-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
  .gc-label { font-size: 11.5px; font-weight: 600; letter-spacing: .12em; color: var(--brand); }
  .geo-card h3 { font-size: 14px; font-weight: 600; color: var(--ink); margin-top: 5px; }
  .gc-addr { font-size: 12.5px; line-height: 1.65; color: var(--ink-2); margin-top: 6px; flex: 1; }
  /* 电话与地图链接各占一行 —— 都用 inline-block 会挤成一串 */
  .gc-tel {
    display: block; margin-top: 8px; font-size: 14.5px; font-weight: 700;
    color: var(--ink); letter-spacing: .02em; font-variant-numeric: tabular-nums;
  }
  .gc-go { display: block; margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--brand); }
  .gc-go:hover { text-decoration: underline; }
  /* 同一排卡片的「标签 / 单位名 / 地址 / 地图链接」四行共用行轨：公司名一张两行、一张一行时，
     地址上沿仍齐平（subgrid；不支持的浏览器退回原来的 flex 竖排） */
  @supports (grid-template-rows: subgrid) {
    .geo-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
    .geo-card > * { align-self: start; }
    .geo-card .gc-go { align-self: end; }
  }

  /* 部门直通 + 公众号并成一行，原来公众号自己占一整段，信息不多却拉得很长 */
  .reach-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .dept-card {
    background: var(--card); border-radius: 22px; box-shadow: var(--shadow);
    padding: 22px 22px 20px; display: flex; flex-direction: column;
  }
  .dept-card h3 { font-size: 14.5px; font-weight: 600; color: var(--ink); letter-spacing: .04em; }
  .dept-tel {
    display: block; margin-top: 9px; font-size: clamp(19px, 2.1vw, 23px); font-weight: 700;
    letter-spacing: -0.01em; color: var(--brand); font-variant-numeric: tabular-nums;
  }
  .dept-tel:hover { text-decoration: underline; }
  .dept-card p { font-size: 13px; line-height: 1.7; color: var(--ink-2); margin-top: 9px; flex: 1; }
  .dept-time {
    margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--hairline);
    font-size: 11.5px; color: var(--ink-3); letter-spacing: .04em;
  }
  .qr-card .qr-img {
    width: 100%; max-width: 132px; aspect-ratio: 1/1; object-fit: contain;
    background: #fff; border: 1px solid var(--hairline); border-radius: 12px;
    padding: 6px; margin-top: 10px;
  }
  .qr-card p { margin-top: 9px; flex: 0; }
  .qr-card .qr-img { margin-inline: auto; }   /* v9.0：二维码在卡片里居中 */

  @media (max-width: 1080px) {
    .reach-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 900px) {
    .geo { grid-template-columns: 1fr; }
  }
  @media (max-width: 620px) {
    .reach-grid { grid-template-columns: 1fr; }
    .qr-card .qr-img { margin-inline: auto; }
  }

  .cn-map { width: 100%; height: auto; display: block;
    --cn-land-a: #dbe7f5; --cn-land-b: #b9cfe8;
    --cn-edge: #8fb0d4; --cn-shadow: rgba(16,40,80,.22); }
  .cn-map .extrude path { fill: #9db8d8; transform: translateY(5px); }
  .cn-map .land path { fill: url(#cnLand); stroke: var(--cn-edge); stroke-width: .9;
    stroke-linejoin: round; }
  .cn-map .link { fill: none; stroke: #d9560b; stroke-width: 1.7;
    stroke-dasharray: 4 4; opacity: .62; stroke-linecap: round; }
  .cn-map .pin-lead { stroke: #24405f; stroke-width: 1; opacity: .5; }
  .cn-map .pin-true { fill: #24405f; opacity: .55; }
  .cn-map .pin-shadow { fill: rgba(8,20,40,.28); }
  .cn-map .pin-body { fill: url(#cnPin); }
  .cn-map .hq .pin-body { fill: url(#cnPinHq); }
  .cn-map .pin-eye { fill: #fff; }
  .cn-map .pin-tx { fill: #24405f; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; }
  .cn-map .hq .pin-tx { fill: #0a2f52; font-weight: 700; }
  .cn-map { --cn-pin-a: #4aa3e0; --cn-pin-b: #1d6486;
            --cn-hq-a: #ff9c4a; --cn-hq-b: #d9560b; }
  /* 南海诸岛附图：合规必需，刻意压低视觉重量 —— 线细、点小、参照海岸线半透明 */
  .cn-map .nh-box { fill: rgba(143,176,212,.07); stroke: var(--cn-edge); stroke-width: .7; opacity: .75; }
  .cn-map .nh-ref { fill: none; stroke: var(--cn-edge); stroke-width: .7; opacity: .45;
    stroke-linejoin: round; stroke-linecap: round; }
  .cn-map .nh-line { stroke: #5b7fa6; stroke-width: 1.1; stroke-linecap: round; opacity: .85; }
  .cn-map .nh-isl { fill: #5b7fa6; opacity: .8; }
  /* 图注右对齐到附图框的右边缘：英文「South China Sea Islands」有 108 个单位宽，
     居中的话会顶出 viewBox 右边界被切掉（中文只有 35 宽，看不出来）*/
  .cn-map .nh-cap { fill: #24405f; font-size: 8px; letter-spacing: .1em; opacity: .7;
    text-anchor: end; }
  /* ---------- 人才招募 ---------- */
  /* 招聘信息：岗位卡片，点开是完整岗位说明 */
  .job-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .job-card {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; text-align: left;
    background: var(--card); border: 1px solid var(--hairline); border-radius: 18px;
    padding: 24px 26px; font-family: inherit; cursor: pointer;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  }
  .job-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: transparent; }
  .job-main b { display: block; font-size: 17.5px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
  .job-main i { display: block; font-style: normal; font-size: 13px; color: var(--ink-3); margin-top: 7px; }
  .job-more { flex: none; font-size: 13px; font-weight: 600; color: var(--accent); white-space: nowrap; }
  .job-more .arw { margin-left: 3px; display: inline-block; transition: transform .2s ease; }
  .job-card:hover .job-more .arw { transform: translateX(2px); }
  #jobModal0 .amodal-body ul, #jobModal1 .amodal-body ul { counter-reset: jr; }
  @media (max-width: 760px) { .job-list { grid-template-columns: 1fr; } }
  .join-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .join-card { background: var(--card); border: 1px solid var(--hairline); border-radius: 18px; padding: 26px 26px 28px; }
  .join-card h4 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
  .join-card p { font-size: 13.5px; color: var(--ink-2); line-height: 1.75; margin-top: 10px; }
  @media (max-width: 860px) { .join-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px) { .join-grid { grid-template-columns: 1fr; } }

  /* 团队生活 · 图片墙 */
  /* 宽度跟着图片墙走：大图占 3 列里的 2 列（gap 12px），导语右边界与它齐平 */
  .life-lead { font-size: clamp(16.5px, 1.7vw, 19px); color: var(--ink-2); line-height: 1.85; max-width: calc((200% - 12px) / 3); margin: -4px 0 26px; text-wrap: pretty; }
  /* 版块导语：只有一句话，34em 会把它挤成两行，放开到版心宽 */
  .sec-lead { font-size: clamp(15.5px, 1.5vw, 17.5px); color: var(--ink-2); line-height: 1.8; margin: -4px 0 26px; text-wrap: pretty; }
  /* v8.9：企业风貌导语右缘对齐第二张相册「车间管理」（3 列、gap 16px）；相册变两列时不限宽 */
  #ab-culture .sec-lead { max-width: calc((200% - 16px) / 3); }
  @media (max-width: 860px) { #ab-culture .sec-lead { max-width: none; } }
  .life-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .life-shot {
    position: relative; overflow: hidden; border-radius: 18px; margin: 0;
    background: var(--bg-tint); aspect-ratio: 4 / 3;
  }
  .life-shot.wide { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
  .life-shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
  .life-shot:hover img { transform: scale(1.045); }
  .life-shot figcaption {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 15px 12px;
    font-size: 12.5px; font-weight: 600; line-height: 1.5; color: #fff;
    background: linear-gradient(to top, rgba(0,0,0,.66), rgba(0,0,0,.28) 45%, rgba(0,0,0,0));
  }
  .life-shot.wide figcaption { font-size: 15px; padding: 46px 24px 20px; }
  @media (max-width: 860px) {
    /* 两列下 6 张会剩一张落单，让首尾两张各占满一行 */
    .life-wall { grid-template-columns: repeat(2, 1fr); }
    .life-shot.wide, .life-wall .life-shot:last-child { grid-column: span 2; grid-row: span 1; aspect-ratio: 16 / 10; }
  }
  @media (max-width: 560px) {
    .life-wall { grid-template-columns: 1fr; }
    .life-shot.wide, .life-wall .life-shot:last-child { grid-column: span 1; aspect-ratio: 4 / 3; }
    .life-shot.wide figcaption { font-size: 13px; padding: 30px 15px 12px; }
  }
  @media (prefers-reduced-motion: reduce) { .life-shot:hover img { transform: none; } }

  /* ---------- Footer ---------- */
  footer { background: var(--bg-tint); font-size: 12.5px; color: var(--ink-2); }
  .foot-inner { max-width: var(--wrap); margin: 0 auto; padding: 46px var(--gutter) 38px; }
  .foot-cols { display: grid; grid-template-columns: repeat(5, auto); justify-content: space-between; gap: 24px; padding-bottom: 26px; border-bottom: 1px solid var(--hairline); }
  .foot-cols h5 { font-size: 12.5px; color: var(--ink); margin-bottom: 12px; font-weight: 700; }
  .foot-cols ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
  .foot-cols a:hover { text-decoration: underline; }
  .foot-legal { padding-top: 20px; display: flex; flex-wrap: wrap; gap: 6px 22px; color: var(--ink-3); }
  /* 备案号按规定要链到 beian.miit.gov.cn，但样式要和旁边的灰字一致，别跳出来 */
  .foot-legal a { color: inherit; text-decoration: none; }
  .foot-legal a:hover { color: var(--accent); text-decoration: underline; }
  @media (max-width: 820px) { .foot-cols { grid-template-columns: repeat(3, 1fr); justify-content: stretch; } }
  @media (max-width: 700px) { .foot-cols { grid-template-columns: repeat(2, 1fr); } }

  /* ---------- 侧边悬浮菜单 ---------- */
  .side-nav {
    position: fixed; left: 16px; top: 50%; transform: translateY(-50%);
    z-index: 90; display: flex; flex-direction: column; gap: 4px;
  }
  .side-nav a {
    display: flex; align-items: center; justify-content: flex-end; flex-direction: row-reverse;
    gap: 10px; padding: 5px 0;
  }
  .side-nav .lbl {
    font-size: 12px; color: var(--ink-2); white-space: nowrap;
    background: var(--card); border: 1px solid var(--hairline); border-radius: 980px;
    padding: 4px 12px; box-shadow: var(--shadow);
    opacity: 0; transform: translateX(-8px); pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
  }
  .side-nav .dot {
    width: 8px; height: 8px; border-radius: 50%; flex: none;
    background: var(--ink-3); opacity: .45;
    transition: transform .25s ease, background .25s ease, opacity .25s ease;
  }
  .side-nav a:hover .lbl { opacity: 1; transform: none; }
  .side-nav a:hover .dot { opacity: .9; }
  .side-nav a.active .dot { background: var(--accent); opacity: 1; transform: scale(1.4); }
  .side-nav a.active .lbl { color: var(--accent); font-weight: 600; }
  @media (max-width: 1180px) { .side-nav { display: none; } }
  @media (prefers-reduced-motion: reduce) { .side-nav .lbl, .side-nav .dot { transition: none; } }
  /* ---------- 侧边服务栏 ---------- */
  .dock {
    /* 垂直居中，但中心线不得高于 400px：最高的「产品咨询」浮层以图标为中心向上伸 309.5px，
       再加一级导航 77px + 12px 间距 = 398.5。窗口高度 ≥800px 时 50% 本来就更大，位置不变；
       矮窗口（用户实测约 620px）才整体下移，免得浮层上沿钻到导航（z-index 100）底下被切掉。
       ≤1180px 的媒体查询里 .dock 是 top:auto / bottom:18px，手机端不受这条影响。 */
    position: fixed; right: 18px; top: max(400px, 50%); transform: translateY(-50%);
    z-index: 95; display: flex; flex-direction: column;
    background: var(--nav-bg);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid var(--hairline); border-radius: 20px;
    box-shadow: var(--shadow);
  }
  .dock-item {
    position: relative; width: 68px; padding: 12px 5px 10px;
    color: var(--ink-2); cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    border-bottom: 1px solid var(--hairline);
    transition: color .2s ease, background .2s ease;
  }
  .dock-item:first-child { border-radius: 19px 19px 0 0; }
  .dock-item:last-child { border-bottom: 0; border-radius: 0 0 19px 19px; }
  .dock-item:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); }
  .dock-item svg {
    width: 22px; height: 22px; display: block;
    stroke: currentColor; fill: none; stroke-width: 1.6;
    stroke-linecap: round; stroke-linejoin: round;
  }
  /* v10.1：图标下的文字常显（原来要悬停整条才展开，只有图标时访客看不懂是做什么的）；浮层仍是悬停单项才出 */
  .dock-item .cap {
    font-size: 10.5px; line-height: 1.25; letter-spacing: .01em; text-align: center; white-space: nowrap;
  }

  .dock-pop {
    position: absolute; right: calc(100% + 12px); top: 50%;
    transform: translate(8px, -50%); width: 238px; text-align: left;
    background: var(--card); border: 1px solid var(--hairline); border-radius: 16px;
    box-shadow: var(--shadow); padding: 18px 20px;
    opacity: 0; pointer-events: none; visibility: hidden;
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
  }
  .dock-item:hover .dock-pop, .dock-item:focus-visible .dock-pop {
    opacity: 1; transform: translate(0, -50%); visibility: visible; pointer-events: auto;
  }
  .dock-pop::after { content: ""; position: absolute; left: 100%; top: 0; width: 14px; height: 100%; }
  .dock-pop h6 { font-size: 11px; font-weight: 700; letter-spacing: .16em; color: var(--copper); margin-bottom: 9px; }
  .dock-pop .tel {
    font-size: 19px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums; line-height: 1.3;
  }
  .dock-pop p { font-size: 12.5px; color: var(--ink-2); line-height: 1.6; margin-top: 7px; }
  /* v7.9：整句话用 .tel 会太大，单独收一档 */
  .dock-pop .tel.tel-sm { font-size: 14px; font-weight: 600; line-height: 1.5; }
  /* v8.8：中文整句 13px 正好一行（198px 内容宽）；「点击此处」另起一行。英文句子长，照常折行 */
  .dock-pop .tel.tel-sm, .dock-pop .tel.tel-sm + .hint { display: block; }
  :root:not([lang="en"]) .dock-pop .tel.tel-sm { font-size: 13px; white-space: nowrap; }
  .dock-pop .hint { font-size: 12.5px; color: var(--accent); margin-top: 11px; font-weight: 600; }
  .dock-pop .qr {
    width: 118px; height: 118px; border-radius: 10px; margin: 2px auto 0;
    border: 1px solid var(--hairline); background: #fff; padding: 5px;
  }
  .dock-pop .qr img { width: 100%; height: 100%; object-fit: contain; }
  /* v7.9：二维码说明移到图下方一行 */
  .dock-pop .qr-cap { display: block; text-align: center; font-size: 12.5px;
    color: var(--ink-2); margin-top: 6px; }
  .dock-pop .center { text-align: center; }

  @media (max-width: 1180px) {
    .dock { right: 12px; top: auto; bottom: 18px; transform: none; }
    .dock-item { width: 50px; padding: 11px 4px; }
    .dock-item .cap, .dock-pop { display: none; }
    /* 窄屏没有 hover 这回事，上面那条把浮层整个关掉了。「公司社媒」这一项的全部内容
       就是那张二维码，关掉等于按钮点了没反应 —— 单独给它开「点按切换」（v5.6）。
       其余四项点下去本来就有动作，不动。
       浮层在桌面是垂直居中挂在左侧的；这里改成**底边与按钮对齐**，
       否则二维码那一坨 200px 高从屏幕下沿溢出去 */
    .dock-item.dock-tap { cursor: pointer; }
    .dock-item.dock-tap.pop-open {
      color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent);
    }
    .dock-item.dock-tap.pop-open .dock-pop {
      display: block; opacity: 1; visibility: visible; pointer-events: auto;
      right: calc(100% + 10px); left: auto; top: auto; bottom: 0; transform: none;
      width: min(238px, calc(100vw - 86px));
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .dock-item, .dock-pop { transition: none; }
  }
  /* ---------- 锚点落位留白 ---------- */
  /* 导航是 sticky，滚动落点的上沿会被它盖住。每类跳转目标配一个 scroll-margin-top，
     落位后标题才不会贴着导航条。实测未加之前：一级导航切页只剩 19px，
     产品中心的「应用领域」是 -2px —— 标题整个压在导航条下面 */
  /* 落位后的呼吸空间 = scroll-margin-top + 目标自身的上内边距 − 粘顶总高。
     一级导航 77px（窄屏 64），二级页再叠一条 47px 的二级导航。
     首页不设：它的版块高度是按满屏排的，一旦往下挪就会把下一块的底色露出来一条，
     画面显得割裂——v3.6 加过 24px，已撤回 */
  #top { scroll-margin-top: 77px; }              /* 落点回到 scrollY=0，与初次载入一致 */
  .page-head { scroll-margin-top: 30px; }        /* 96 − 47 ≈ 49px 呼吸 */
  .apps, .buy { scroll-margin-top: 64px; }       /* 120 − 60 = 60px 呼吸 */
  /* 首页里这三个例外：.partners / .news 的上内边距是 0、页脚也是，
     标题紧贴版块顶边，落位后被导航条整个盖住（实测 −77px，v3.5 及更早都有）。
     只给这三个补偏移，生产基地、技术与资质仍按原样不动 */
  #partners, #news { scroll-margin-top: 127px; }
  #contact { scroll-margin-top: 81px; }          /* 页脚自己有 46px 上内边距 */
  @media (max-width: 880px) {
    #top { scroll-margin-top: 64px; }
    .page-head { scroll-margin-top: 18px; }
    .apps, .buy { scroll-margin-top: 51px; }
    #partners, #news { scroll-margin-top: 114px; }
    #contact { scroll-margin-top: 68px; }
  }

  /* ---------- 多页面与二级页 ---------- */
  .page[hidden] { display: none; }
  body.subpage .side-nav { display: none; }

  .page-head {
    text-align: center; padding: clamp(66px, 9vh, 96px) 22px clamp(30px, 4vh, 44px);
    background:
      radial-gradient(900px 380px at 50% -120px, color-mix(in srgb, var(--accent) 11%, transparent), transparent 70%),
      var(--bg);
  }
  /* 英文版：.eng 是给中文版配的英文点缀，翻译后会和标题撞成两遍
     （Products/Products、Profile/Profile、About Welllink/About Us…），整体隐藏 */
  html[lang="en"] .eng,
  html[lang="en"] .rd-patent-head span { display: none; }
  /* 英文版：Request a quote / Product info / Datasheet 三个按钮原来 518px 排不下 405px 的栏宽，
     折成两行。收紧左右内边距与间距后 376px，一行放得下（Datasheet 已由词表精简） */
  html[lang="en"] .buy-ctas { flex-wrap: nowrap; gap: 8px; }
  html[lang="en"] .buy-ctas > * { padding-left: 14px; padding-right: 14px; white-space: nowrap; }
  /* 上面那条 376px 是按桌面 405px 栏宽算的。≤900px 选购器变单栏，卡片内可用宽 = 视口 − 112，
     低于 516px 三个按钮（实测 404px）必然溢出，把整页撑宽。窄屏放开换行，内边距仍收着 */
  @media (max-width: 560px) { html[lang="en"] .buy-ctas { flex-wrap: wrap; } }


  .page-head .eng { font-size: 12px; letter-spacing: .28em; color: var(--ink-3); font-weight: 600; text-transform: uppercase; }
  .page-head h1 {
    font-size: clamp(34px, 5.4vw, 60px); font-weight: 700; letter-spacing: -0.025em;
    line-height: 1.12; margin-top: 12px; text-wrap: balance;
  }
  .page-head p { color: var(--ink-2); font-size: 17px; margin-top: 14px; max-width: 620px; margin-inline: auto; text-wrap: balance; }

  .subnav {
    position: sticky; top: 76px; z-index: 80;
    background: var(--nav-bg);
    -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--hairline);
  }
  @media (max-width: 880px) { .subnav { top: 64px; } }
  .subnav-inner {
    max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); height: 46px;
    display: flex; align-items: stretch; overflow-x: auto; scrollbar-width: none;
  }
  .subnav-inner::-webkit-scrollbar { display: none; }
  /* 与一级导航同一套形状语言：整格高的矩形，底色自下而上升满 */
  .subnav a {
    position: relative; z-index: 0; display: flex; align-items: center;
    font-size: 13.5px; color: var(--ink-2); padding: 0 16px; border-radius: 0;
    white-space: nowrap; transition: color .28s ease;
  }
  .subnav a::before {
    content: ""; position: absolute; inset: 0; z-index: -1; background: var(--accent);
    transform: scaleY(0); transform-origin: bottom; transition: transform .28s ease;
  }
  .subnav a:hover::before { transform: scaleY(1); }
  .subnav a:hover { color: #fff; }
  .subnav a.on { color: #fff; font-weight: 600; transition: none; }
  .subnav a.on::before { transform: scaleY(1); transition: none; }
  @media (prefers-reduced-motion: reduce) { .subnav a, .subnav a::before { transition: none; } }
  /* 窄屏排不下时这一条是横向滚动的（走进新威凌 8 项、投资者关系与人才招募各 4 项）。
     光能滚不够，用户不知道右边还有东西，也不知道自己读到哪一节了。两件事配合：
     ① 两端渐隐遮罩——被切掉的半个栏目本身就是「这边还有」的提示，到头就撤掉；
     ② 高亮项跟着阅读位置自动滚进视野（见脚本里的 keepVisible）。
     产品中心只有 2 项，天然排得下，sn-l/sn-r 都不会加上，遮罩自己不出现，不必按页面分支 */
  .subnav-inner.sn-l.sn-r {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
  }
  .subnav-inner.sn-l:not(.sn-r) {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26px);
            mask-image: linear-gradient(90deg, transparent 0, #000 26px);
  }
  .subnav-inner.sn-r:not(.sn-l) {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent 100%);
            mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent 100%);
  }

  /* ---------- 窄屏一级导航：汉堡面板（v5.5 新增） ----------
     880px 以下 .nav-links 整条隐藏，在此之前没有任何替代入口：六个一级栏目里
     只有 about/products/ir/join 能从页脚走到，「新闻中心」在手机上完全没有入口。
     注意 .nav 带 backdrop-filter —— 它已经是绝对/固定定位后代的包含块，
     面板和蒙版一律用 absolute 挂在 .nav 上，别写 position:fixed（参照系不是视口，行为不直觉） */
  .nav-burger, .nav-menu, .nav-scrim { display: none; }
  /* v6.9：断点 880 → 1100。881–1180 宽时厂标 + 7 个栏目 + 中/EN 放不下，中/EN 被挤出屏幕。
     这里与 .nav-links 的隐藏断点、脚本里两处 innerWidth 判断必须一致 */
  @media (max-width: 1100px) {
    .nav-burger {
      display: flex; flex-direction: column; justify-content: center; gap: 5px;
      flex: none; margin-left: 10px; width: 38px; height: 38px; padding: 0 7px;
      background: transparent; border: 0; border-radius: 10px;
    }
    .nav-burger span {
      display: block; height: 1.8px; border-radius: 2px; background: var(--ink);
      transition: transform .26s cubic-bezier(.4,0,.2,1), opacity .18s ease;
    }
    .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.8px) rotate(45deg); }
    .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.8px) rotate(-45deg); }

    .nav-scrim {
      display: block; position: absolute; top: 100%; left: 0; right: 0; height: 100vh;
      background: rgba(3, 10, 20, .34);
      opacity: 0; pointer-events: none; transition: opacity .26s ease;
    }
    .nav-menu {
      display: block; position: absolute; top: 100%; left: 0; right: 0;
      background: var(--nav-bg);
      -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
      border-bottom: 1px solid var(--hairline);
      padding: 2px var(--nav-gutter) 10px;
      /* 收起时用 visibility 而不是只调 opacity：读屏与 Tab 键都不该走进一条看不见的导航。
         visibility 不要参与插值（离散属性，靠时机翻转不可靠），改成 0s 延时：
         展开时立刻可见，收起时等淡出走完再隐藏 */
      visibility: hidden; opacity: 0; transform: translateY(-8px);
      transition: opacity .24s ease, transform .24s cubic-bezier(.4,0,.2,1), visibility 0s .24s;
    }
    .nav.menu-open .nav-scrim { opacity: 1; pointer-events: auto; }
    .nav.menu-open .nav-menu {
      visibility: visible; opacity: 1; transform: none;
      transition: opacity .24s ease, transform .24s cubic-bezier(.4,0,.2,1), visibility 0s;
    }
    /* :not(.lang-switch) 是必须的：多页版里中/EN 也是 <a>，被挪进面板后会吃到这条 */
    .nav-menu a:not(.lang-switch) {
      display: block; padding: 13px 2px; font-size: 16px; color: var(--ink);
      border-bottom: 1px solid var(--hairline);
    }
    .nav-menu a:not(.lang-switch).on { color: var(--accent); font-weight: 600; }
    /* 371px 的导航条放不下「厂标 259 + 中/EN 72 + 汉堡 38 + 左右留白 40」＝ 409px，
       硬挤就会把整条导航撑出屏幕——正是这一版要修的那类横向溢出。窄屏把中/EN 收进面板，
       腾出 80px 就正好够。挪动由脚本完成（挪的是同一个节点，不是副本） */
    .nav-inner > .lang-switch { display: none; }
    .nav-menu > .lang-switch { display: inline-flex; margin: 16px 0 2px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .nav-burger span, .nav-menu, .nav-scrim { transition: none; }
  }

  .sec { max-width: var(--wrap); margin: 0 auto; padding: 72px var(--gutter) 0; scroll-margin-top: 77px; }
  @media (max-width: 880px) { .sec { scroll-margin-top: 89px; } }   /* 粘顶总高 64 + 47 */
  .sec-title { display: flex; align-items: baseline; gap: 14px; margin-bottom: 26px; }
  .sec-title h2 { font-size: clamp(24px, 3.2vw, 34px); font-weight: 700; letter-spacing: -0.02em; }
  .sec-title .eng { font-size: 12px; letter-spacing: .2em; color: var(--ink-3); font-weight: 600; text-transform: uppercase; }

  /* 企业简介 */
  .profile-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px; align-items: stretch; }
  .profile-text {
    background: var(--card); border: 1px solid var(--hairline); border-radius: 22px; padding: 34px 36px;
  }
  .profile-text p { font-size: 15px; line-height: 1.9; color: var(--ink-2); max-width: 43em; }
  .profile-text p + p { margin-top: 16px; }
  .profile-text strong { color: var(--ink); font-weight: 600; }

  /* 宣传片按 16:9 占住右列上半，四项数字两两一排垫在下面把右列填满 */
  .profile-stats { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: 12px; flex: 1; }
  .pstat {
    background: var(--card); border: 1px solid var(--hairline); border-radius: 18px; padding: 18px 20px;
    display: flex; flex-direction: column; justify-content: center;
  }
  .pstat b { display: block; font-size: 24px; font-weight: 700; color: var(--brand); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
  .pstat b em { font-style: normal; font-size: .5em; font-weight: 600; color: var(--ink-2); margin-left: 3px; }
  .pstat span { display: block; font-size: 12.5px; color: var(--ink-2); margin-top: 5px; }
  @media (max-width: 860px) { .profile-grid { grid-template-columns: 1fr; } }
  @media (max-width: 520px) { .profile-stats { grid-template-columns: 1fr; } }

  /* 企业宣传片 */
  .profile-side { display: flex; flex-direction: column; gap: 12px; }
  .promo {
    position: relative; flex: none; margin: 0; width: 100%; aspect-ratio: 16 / 9; cursor: pointer;
    border-radius: 22px; overflow: hidden; background: var(--navy);
    display: flex; align-items: flex-end;
  }
  .promo-cover { position: absolute; inset: 0; background-size: cover; background-position: center; }
  .promo-scrim {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(6,16,32,.88) 0%, rgba(6,16,32,.3) 46%, rgba(6,16,32,0) 78%);
  }
  /* 封面是片头标题卡，正中是 LOGO，播放键得让开——挪到左下角与片名排成一条 */
  .promo-play {
    position: absolute; left: 24px; bottom: 20px;
    width: 52px; height: 52px; border-radius: 50%; border: 0; padding: 0;
    background: rgba(255,255,255,.93); color: var(--brand);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 24px rgba(6,16,32,.42);
    transition: transform .25s ease, background .25s ease;
  }
  .promo-play svg { width: 19px; height: 19px; fill: currentColor; margin-left: 3px; }
  .promo:hover .promo-play { transform: scale(1.09); background: #fff; }
  .promo figcaption { position: relative; padding: 22px 24px 24px 90px; color: #fff; }
  .promo figcaption b { display: block; font-size: 16px; font-weight: 700; letter-spacing: -0.005em; }
  .promo figcaption span { display: block; font-size: 12.5px; color: rgba(255,255,255,.72); margin-top: 5px; }
  @media (max-width: 520px) {
    .promo-play { left: 16px; bottom: 16px; width: 44px; height: 44px; }
    .promo figcaption { padding: 18px 18px 20px 72px; }
  }
  @media (prefers-reduced-motion: reduce) { .promo-play { transition: none; } }

  /* 宣传片灯箱：封面卡是竖长的，16:9 的片子就地播会上下压黑边，所以另开一层放 */
  .vbox[hidden] { display: none; }
  .vbox { position: fixed; inset: 0; z-index: 210; display: flex; align-items: center; justify-content: center; padding: 24px; }
  .vbox-mask { position: absolute; inset: 0; background: rgba(4,10,20,.86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .vbox-inner {
    position: relative; width: min(1180px, 100%, calc((100vh - 120px) * 960 / 544)); aspect-ratio: 960 / 544;
    background: #000; border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.6);
  }
  .vbox-inner video { width: 100%; height: 100%; display: block; border-radius: 16px; }
  .vbox-x {
    position: absolute; top: -42px; right: 0; width: 34px; height: 34px; padding: 0;
    border: 0; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; font-size: 19px; line-height: 1;
  }
  .vbox-x:hover { background: rgba(255,255,255,.3); }
  @media (max-width: 560px) { .vbox-x { top: auto; bottom: -42px; } }

  /* 董事长寄语 */
  .letter {
    background: linear-gradient(165deg, var(--navy), var(--navy-card)); color: var(--ink-on-navy);
    border-radius: 26px; padding: 46px clamp(26px, 5vw, 58px) 40px; position: relative; overflow: hidden;
  }
  .letter::before {
    content: "\201C"; position: absolute; top: -34px; left: 24px;
    font-size: 190px; line-height: 1; color: var(--cyan-on-navy); opacity: .16; font-family: Georgia, serif;
  }
  /* 董事长寄语：左信件右名片。
     人物朝左，名片放右栏他才是「看回信件」这一侧 —— 镜像真人官方肖像属于篡改，不做。
     外层 .sec 已经给了版心和左右留白，这里只管分栏 */
  .chair-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start;
  }
  .chair-card {
    position: sticky; top: 140px;   /* v8.9：一级 77 + 二级 47 导航之下再留 16px（原 96px 上沿被二级导航盖住） */
    background: var(--card); border-radius: 26px; box-shadow: var(--shadow);
    padding: 24px 22px 26px;
  }
  /* 照片放回 v6.0 的大尺寸。素材 PNG 本身就是圆形裁切、四角透明，
     所以按正圆处理，描边与投影贴着圆走，不会像套方框那样四角发空 */
  .chair-photo {
    display: block; width: 100%; max-width: 258px; aspect-ratio: 1 / 1;
    margin: 2px auto 0; border-radius: 50%; background: var(--bg-tint);
    box-shadow: 0 0 0 5px var(--bg-tint), 0 10px 26px rgba(16, 29, 51, .16);
  }
  /* v8.9：矮窗口照片跟着视口高度缩，让整张名片放得下（中文名片除照片外约 519px，英文约 660px）；
     缩到 170px 还放不下就由脚本加 .no-stick 随页面滚动，免得上沿或下沿被切掉一截 */
  .chair-photo { max-width: clamp(170px, calc(100vh - 676px), 258px); }
  :root[lang="en"] .chair-photo { max-width: clamp(170px, calc(100vh - 816px), 258px); }
  .chair-card.no-stick { position: static; }
  /* v9.9：名片比窗口高时（英文 844px + top 140 > 900），改按下沿吸附，
     往下读时名片始终贴着窗口底边，不再整块随页面滚走 */
  .chair-card.stick-bottom { top: auto; bottom: 16px; }
  .chair-name { margin-top: 20px; text-align: center; }
  .chair-name b { font-size: 25px; font-weight: 700; letter-spacing: .12em; color: var(--ink); }
  /* 三项身份：竖线分隔，比胶囊安静得多，也天然排得下一行。
     360px 卡片减 44px 内边距 = 316px，18 个汉字 @12px + 分隔留白约 264px */
  .chair-roles {
    display: flex; flex-wrap: nowrap; justify-content: center;
    margin-top: 11px;
  }
  .chair-roles span {
    font-size: 12px; font-weight: 500; color: var(--ink-2);
    white-space: nowrap; padding: 0 8px; line-height: 1.4;
  }
  .chair-roles span + span { border-left: 1px solid var(--hairline); }
  .chair-hd {
    margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--hairline);
    font-size: 13px; font-weight: 600; color: var(--ink); letter-spacing: .06em;
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  }
  .chair-hd i { font-style: normal; font-size: 11px; font-weight: 400; color: var(--ink-3); letter-spacing: .04em; }
  /* 荣誉按获授时间由远及近，竖线由浅到深，读下来就是一条成长路径 */
  .chair-honors { list-style: none; margin: 12px 0 0; padding: 0 0 0 18px; position: relative; }
  .chair-honors::before {
    content: ""; position: absolute; left: 3px; top: 6px; bottom: 6px; width: 2px; border-radius: 2px;
    background: linear-gradient(to bottom, var(--hairline), var(--brand));
  }
  .chair-honors li {
    position: relative; font-size: 12.5px; line-height: 1.6; color: var(--ink-2);
    padding: 0 0 10px; text-wrap: pretty;
  }
  .chair-honors .kp { white-space: nowrap; }   /* 窄屏 .kp 会放开，这里「项目总指挥长」始终不拆 */
  .chair-honors li:last-child { padding-bottom: 0; color: var(--ink); font-weight: 500; }
  .chair-honors li::before {
    content: ""; position: absolute; left: -18px; top: 6px; box-sizing: border-box;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--card); border: 2px solid var(--brand); opacity: .45;
  }
  .chair-grid .letter { border-radius: 26px; }
  @media (max-width: 900px) {
    .chair-grid { grid-template-columns: 1fr; }
    .chair-card { position: static; order: -1; }   /* 窄屏名片回到信件上方 */
  }

  /* v9.7：取消双栏 —— 读完左栏要往回滚才能接右栏，和阅读习惯相反。
     行长由下面的 max-width: 38em 兜着，单栏后一行的字数不变 */
  .letter-body { position: relative; }
  /* 允许段落跨栏续排：只有 8 个段落且长短悬殊，整段不可断会让右栏比左栏矮一大截 */
  /* v9.9：不再限行长 —— 原来正文卡在 38em(551px)，卡片内容区约 614px，右边空出一截，
     左右不对称。放宽到卡片宽度后左右边距相等，整封信也短一截 */
  .letter-body p { font-size: 14.5px; line-height: 2; color: var(--ink2-on-navy); orphans: 2; widows: 2; }
  .letter-body p + p { margin-top: 13px; }
  .letter-body p.lead { color: var(--ink-on-navy); font-size: 16px; font-weight: 500; }
  /* 落款排在正文流末尾并横跨两栏，紧贴文章结束的位置，不再靠预留空白把它推到很远 */
  .letter-sign {
    column-span: all; break-inside: avoid;
    margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--hairline-navy);
    display: flex; align-items: center; justify-content: flex-end; gap: 46px; text-align: right;
  }
  .letter-portrait {
    width: 192px; height: 192px; border-radius: 50%; object-fit: cover; flex: none;
    margin-top: -94px;   /* 上探到正文右下角的空档里，顶部高过最后一行约 20px */
    background: rgba(255,255,255,.06); border: 3px solid rgba(255,255,255,.2);
    box-shadow: 0 16px 38px rgba(0, 0, 0, .34);
  }
  @media (max-width: 760px) { .letter-portrait { width: 116px; height: 116px; margin-top: -44px; } .letter-sign { margin-top: 24px; gap: 20px; } }
  /* 头像上探得比正文最后一行还高，落款不能跟着抬，否则会撞到"友谊长存"那行；让它老实待在分割线下方 */
  .letter-sign > div { margin-bottom: 0; }
  .letter-sign b { font-size: 21px; font-weight: 700; letter-spacing: .06em; }
  .letter-sign span { display: block; font-size: 12.5px; color: var(--ink2-on-navy); margin-top: 5px; letter-spacing: .1em; }

  /* 研发创新 */
  .rd-lead { font-size: clamp(16.5px, 1.7vw, 19px); line-height: 1.85; color: var(--ink-2); max-width: calc((100% - 18px) * 1.15 / 2.15); margin-bottom: 24px; text-wrap: pretty; }
  /* v8.9：右缘对齐下方「实验平台」大图（rd-grid 左栏 1.15fr、gap 18px）；短语不再整块不拆，否则这个宽度里右边参差很大 */
  .rd-lead .kp { white-space: normal; }
  @media (max-width: 900px) { .rd-lead { max-width: none; } }
  .rd-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .rd-stat { background: var(--card); border: 1px solid var(--hairline); border-radius: 18px; padding: 20px 22px; }
  .rd-stat b { display: block; font-size: 27px; font-weight: 700; color: var(--brand); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
  .rd-stat b em { font-style: normal; font-size: .48em; font-weight: 600; color: var(--ink-2); margin-left: 3px; }
  .rd-stat span { display: block; font-size: 12.5px; color: var(--ink-2); margin-top: 6px; }
  @media (max-width: 760px) { .rd-stats { grid-template-columns: repeat(2, 1fr); } }

  .rd-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; margin-top: 16px; align-items: stretch; }
  .rd-visual { display: grid; grid-template-rows: 1.62fr 1fr; gap: 12px; }
  .rd-shot { position: relative; margin: 0; border-radius: 20px; overflow: hidden; background: var(--bg-tint); }
  .rd-shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
  .rd-shot:hover img { transform: scale(1.04); }
  .rd-shot figcaption {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 16px 12px; color: #fff;
    font-size: 12.5px; font-weight: 600;
    background: linear-gradient(to top, rgba(6,16,32,.72), rgba(6,16,32,0));
  }
  .rd-sub { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .rd-card { background: var(--card); border: 1px solid var(--hairline); border-radius: 20px; padding: 26px 26px 28px; display: flex; flex-direction: column; gap: 10px; }
  .rd-grid > div:last-child { display: flex; flex-direction: column; gap: 16px; }
  .rd-grid > div:last-child .rd-card { flex: 1; }
  .rd-card .eng { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--copper); font-weight: 700; }
  .rd-card h4 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
  .rd-card p { font-size: 14px; color: var(--ink-2); line-height: 1.9; }
  @media (max-width: 900px) { .rd-grid { grid-template-columns: 1fr; } .rd-visual { grid-template-rows: auto auto; } .rd-shot { aspect-ratio: 3 / 2; } }
  @media (max-width: 560px) { .rd-sub { grid-template-columns: 1fr; } }
  .rd-patent-head { display: flex; align-items: baseline; gap: 12px; margin: 30px 0 -8px; }
  .rd-patent-head b { font-size: 16px; font-weight: 700; }
  .rd-patent-head span { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
  /* v4.5 首页「技术与资质」：专利 / 标准 / 荣誉 三段递进。
     这三个小标题一度复用 .rd-patent-head，被它的 margin-bottom:-8px 顶得压在下面的
     横线与卡片上，里面的 <span class="kp"> 又被 .rd-patent-head span 的 10.5px
     小型大写字规则劫走，同一句话字号一大一小。现在是独立类，英文点缀走站内通用的 .eng。
     整块必须留在 .rd-patent-head 定义之后：同权重靠先后决胜负 */
  .cred-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
  .cred-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 54px 0 20px; }
  .section-head + .cred-wrap .cred-head { margin-top: 0; }   /* :first-of-type 不行，同级第一个 div 是 .section-head */
  .cred-head > b { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
  .cred-head > .eng { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
  .cred-head > i { font-style: normal; font-size: 14.5px; color: var(--ink-2); margin-left: auto; text-align: right; }
  /* 一句话一枚：拆成好几块小数据会看腻，整句放进胶囊里，只把数字挑出来加重 */
  .cred-fact {
    margin-left: auto; max-width: 50em;
    font-size: 14px; line-height: 1.6; color: var(--ink-2);
    background: var(--card); border: 1px solid var(--hairline); border-radius: 999px;
    padding: 8px 20px;
  }
  .cred-fact b { font-size: 17px; font-weight: 700; color: var(--brand); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
  .cred-fact strong { color: var(--ink); font-weight: 600; }
  /* 四栏排的荣誉卡内边距收一点，「湖南省制造业单项冠军产品」桌面端才排得下一行 */
  .honor-row .honor { padding: 20px 20px; }
  @media (max-width: 820px) {
    /* 窄屏胶囊换行摆到标题下面，整句可能占两行，圆角收一点免得像被拉长的药丸 */
    .cred-head > i, .cred-fact { margin-left: 0; flex-basis: 100%; max-width: none; }
    .cred-fact { border-radius: 16px; }
  }
  /* 首页这面专利墙比二级页小一号：--u 上限从 1156 收到 1000，不裁切的前提不变 */
  .pat-home { --u: calc(min(1000px, 100vw - 2 * var(--gutter)) * 0.197); margin-top: 4px; }
  /* 说明性文字一律靠右：左边留给正经内容，注解不跟它抢视线起点 */
  .cred-capline { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 6px 14px; margin-top: 16px; }
  .cred-cap { font-size: 13px; color: var(--ink-3); line-height: 1.7; text-align: right; }
  .cred-more { font-size: 13.5px; font-weight: 600; color: var(--accent); white-space: nowrap; }
  .cred-more:hover { text-decoration: underline; }
  @media (max-width: 700px) { .cred-capline { justify-content: flex-start; } .cred-cap { text-align: left; } }
  .std-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; }
  @media (max-width: 760px) { .std-grid { grid-template-columns: 1fr; } }
  .honor-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
  @media (max-width: 980px) { .honor-row { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px) { .honor-row { grid-template-columns: 1fr; } }


  /* 发展历程 */
  .timeline { position: relative; padding-left: 26px; }
  .timeline::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; background: var(--hairline); }
  .tl-item { position: relative; padding: 0 0 26px 0; display: grid; grid-template-columns: 116px 1fr; gap: 18px; align-items: baseline; }
  .tl-item::before {
    content: ""; position: absolute; left: -26px; top: 7px; width: 12px; height: 12px; border-radius: 50%;
    background: var(--bg); border: 2.5px solid var(--ink-3);
  }
  .tl-item.key::before { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
  .tl-year { font-size: 14px; font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
  .tl-item.key .tl-year { color: var(--accent); }
  .tl-text { font-size: 14.5px; color: var(--ink-2); line-height: 1.7; }
  .tl-item.key .tl-text { color: var(--ink); font-weight: 500; }
  @media (max-width: 640px) { .tl-item { grid-template-columns: 1fr; gap: 4px; } }

  /* 企业风貌 */
  .culture-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .cul-card { background: var(--card); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); }
  .cul-card .ph { aspect-ratio: 16 / 9; overflow: hidden; }
  .cul-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
  .cul-card:hover img { transform: scale(1.04); }
  .cul-card figcaption { padding: 15px 20px 18px; font-size: 13.5px; color: var(--ink-2); }
  @media (max-width: 700px) { .culture-grid { grid-template-columns: 1fr; } }

  /* 企业文化：五段并列胶囊 —— 平时只露类目，指上去才展开内容 */
  .cvals {
    position: relative; border-radius: 26px; overflow: hidden; isolation: isolate;
    background-color: #060d1c; background-size: cover; background-position: center 46%;
    box-shadow: 0 26px 60px rgba(6, 18, 38, .28);
  }
  .cvals::after {                 /* 压一层渐变，任何配图上文字都读得清 */
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(4,10,22,.60), rgba(4,10,22,.26) 44%, rgba(4,10,22,.72));
  }
  .cvals-row {
    position: relative; z-index: 1; height: clamp(360px, 33vw, 412px);
    display: grid; grid-template-columns: repeat(5, 1fr);
  }
  .cvals-item {
    position: relative; overflow: hidden; text-align: center; color: #fff;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px;
    padding: 30px 18px; transition: background .32s ease;
  }
  .cvals-item + .cvals-item::before {             /* 五段之间只留一道极淡的分隔 */
    content: ""; position: absolute; left: 0; top: 15%; bottom: 15%; width: 1px;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,.20), transparent);
  }
  .cvals-item:hover, .cvals-item:focus-visible, .cvals-item:focus-within { background: rgba(255,255,255,.075); outline: none; }
  .cvals-ico { color: var(--cyan-on-navy); transition: transform .32s ease, color .32s ease; }
  .cvals-ico svg { display: block; width: 34px; height: 34px; }
  .cvals-item:hover .cvals-ico, .cvals-item:focus-within .cvals-ico { color: #fff; transform: translateY(-2px) scale(1.06); }
  .cvals-name { font-size: 16.5px; font-weight: 700; letter-spacing: .04em; }
  .cvals-name::after {
    content: ""; display: block; height: 2px; width: 20px; border-radius: 2px; margin: 13px auto 0;
    background: var(--cyan-on-navy); opacity: .55; transition: width .34s ease, opacity .34s ease;
  }
  .cvals-item:hover .cvals-name::after, .cvals-item:focus-within .cvals-name::after { width: 46px; opacity: 1; }
  .cvals-body {
    max-width: 21em; max-height: 0; overflow: hidden; opacity: 0; transform: translateY(10px);
    transition: opacity .34s ease, transform .34s ease, max-height .42s ease;
  }
  .cvals-item:hover .cvals-body, .cvals-item:focus-within .cvals-body { max-height: 24em; opacity: 1; transform: none; }
  .cvals-body p { font-size: 13.5px; line-height: 1.95; color: rgba(255,255,255,.86); }
  .cvals-lead { font-size: 15px; font-weight: 700; letter-spacing: .05em; color: var(--cyan-on-navy); margin-bottom: 9px; }
  .cvals-stmt { font-size: 14px; line-height: 1.9; color: rgba(255,255,255,.92); text-wrap: balance; }
  .cvals-item .vals-words { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px 10px; }
  .cvals-item .vals-words i { font-style: normal; display: flex; flex-direction: column; align-items: center; gap: 8px; }
  .cvals-item .vals-words i b {
    font-size: 14px; font-weight: 600; letter-spacing: .08em; white-space: nowrap;
    padding-right: .08em;                       /* 扣掉末字字距，视觉居中 */
  }
  .cvals-item .vals-words i::after { content: ""; width: 16px; height: 2px; border-radius: 2px; background: var(--cyan-on-navy); opacity: .45; }
  :root[lang="en"] .cvals-item .vals-words { grid-template-columns: 1fr; gap: 9px; }
  :root[lang="en"] .cvals-item .vals-words i b { font-size: 12.5px; letter-spacing: .01em; white-space: normal; }
  :root[lang="en"] .cvals-item .vals-words i::after { display: none; }
  /* 英文六个精神词在 195px 窄栏里会凑出「Unity + Pragmatism」这种两两一行的参差，一律单列 */
  :root[lang="en"] .cvals-item .val-chips { flex-direction: column; align-items: center; gap: 7px; }
  .cvals-item .val-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .cvals-item .val-chips span {
    font-size: 13.5px; font-weight: 600; letter-spacing: .1em; color: #fff;
    background: rgba(255,255,255,.13); border-radius: 10px;
    padding: 7px calc(13px - .1em) 7px 13px;
  }
  /* 触屏没有 hover，直接把内容摊开 */
  @media (hover: none) { .cvals-body { max-height: 24em; opacity: 1; transform: none; } }
  @media (max-width: 1000px) {
    .cvals-row { height: auto; grid-template-columns: 1fr; }
    .cvals-item { padding: 26px 24px; gap: 12px; }
    .cvals-body { max-height: 24em; opacity: 1; transform: none; }
    .cvals-item + .cvals-item::before {
      left: 8%; right: 8%; top: 0; bottom: auto; width: auto; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
    }
    .cvals-item .vals-words { grid-template-columns: repeat(4, 1fr); }
  }
  @media (max-width: 560px) { .cvals-item .vals-words { grid-template-columns: repeat(2, 1fr); } }
  /* v8.8 工作准则：四句各占一行（中英同一套），不要短横装饰 */
  .cvals-item .vals-words.vals-rows { grid-template-columns: 1fr; gap: 10px; }
  .cvals-item .vals-words.vals-rows i::after { display: none; }

  /* 企业风貌：主题相册 */
  .alb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .alb-card {
    /* 按钮会把内容垂直居中，卡片被网格拉高后图片上方会露出一条白底，改成纵向 flex 让内容顶边对齐 */
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
    text-align: left; padding: 0; border: 1px solid var(--hairline);
    background: var(--card); border-radius: 20px; overflow: hidden; cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .alb-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
  .alb-ph { display: block; aspect-ratio: 3 / 2; overflow: hidden; position: relative; }
  .alb-ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
  .alb-card:hover .alb-ph img { transform: scale(1.05); }
  .alb-ph::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(6,16,32,.42), rgba(6,16,32,0) 55%);
  }
  .alb-body { display: block; padding: 18px 20px 20px; }
  .alb-body b { display: block; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
  .alb-body i { display: block; font-style: normal; font-size: 13px; color: var(--ink-2); margin-top: 6px; line-height: 1.6; }
  .alb-body em {
    display: inline-block; font-style: normal; font-size: 11.5px; font-weight: 600; margin-top: 10px;
    color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent);
    border-radius: 980px; padding: 4px 11px;
  }
  @media (max-width: 860px) { .alb-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 560px) { .alb-grid { grid-template-columns: 1fr; } }
  @media (prefers-reduced-motion: reduce) { .alb-card, .alb-ph img { transition: none; } }

  /* 相册灯箱 */
  .lbx[hidden] { display: none; }
  .lbx { position: fixed; inset: 0; z-index: 220; display: flex; align-items: center; justify-content: center; padding: 24px; }
  .lbx-mask { position: absolute; inset: 0; background: rgba(4,10,20,.88); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .lbx-inner { position: relative; width: min(1000px, 100%); }
  .lbx-frame { position: relative; aspect-ratio: 3 / 2; background: #000; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
  .lbx-frame img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .lbx-bar { display: flex; align-items: center; gap: 14px; margin-top: 14px; color: #fff; }
  .lbx-bar .cap { flex: 1; font-size: 14px; color: rgba(255,255,255,.86); }
  .lbx-bar .idx { font-size: 12.5px; color: rgba(255,255,255,.6); font-variant-numeric: tabular-nums; }
  /* 翻页键放在两侧遮罩区，不压在图上；浅色照片时也不会糊成一片 */
  .lbx-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 52px; height: 52px; padding: 0; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.14); color: #fff;
    font-size: 26px; line-height: 1; display: flex; align-items: center; justify-content: center;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    transition: background .2s ease, transform .2s ease;
  }
  .lbx-nav:hover { background: rgba(255,255,255,.3); }
  /* 紧贴图片外缘；窄屏放不下时退回画面内 */
  .lbx-prev { left: max(12px, calc(50% - 566px)); }
  .lbx-next { right: max(12px, calc(50% - 566px)); }
  .lbx-prev:hover { transform: translateY(-50%) translateX(-2px); }
  .lbx-next:hover { transform: translateY(-50%) translateX(2px); }
  @media (prefers-reduced-motion: reduce) { .lbx-nav, .lbx-prev:hover, .lbx-next:hover { transition: none; transform: translateY(-50%); } }
  .lbx-x { position: absolute; top: -42px; right: 0; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
    background: rgba(255,255,255,.16); color: #fff; font-size: 19px; line-height: 1; }
  .lbx-x:hover { background: rgba(255,255,255,.3); }
  .lbx-nav[hidden] { display: none; }
  .lbx-frame.light { background: #fff; }
  .lbx-title { position: absolute; top: -38px; left: 0; color: #fff; font-size: 14px; font-weight: 600; }
  @media (max-width: 560px) { .lbx-x { top: auto; bottom: -44px; } .lbx-title { top: -32px; font-size: 13px; } }

  /* 新闻列表 */
  .nw-list { display: flex; flex-direction: column; border-top: 1px solid var(--hairline); }
  .nw-row {
    display: grid; grid-template-columns: 104px 1fr auto; gap: 20px; align-items: center;
    padding: 22px 8px; border-bottom: 1px solid var(--hairline);
    transition: background .2s ease, padding .2s ease;
  }
  .nw-row:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); padding-left: 16px; }
  .nw-date { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
  .nw-row h3 { font-size: 16.5px; font-weight: 600; line-height: 1.55; letter-spacing: -0.005em; }
  .nw-row:hover h3 { color: var(--accent); }
  .nw-cat { font-size: 11px; color: var(--copper); background: var(--copper-bg); border-radius: 980px; padding: 4px 11px; white-space: nowrap; font-weight: 600; }
  @media (max-width: 700px) {
    .nw-row { grid-template-columns: 1fr; gap: 8px; }
    .nw-cat { justify-self: start; }
  }
  .pager { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 34px 0 0; }
  .pager button {
    min-width: 36px; height: 36px; padding: 0 11px; border-radius: 10px;
    border: 1px solid var(--hairline); background: var(--card); color: var(--ink-2);
    font-size: 13.5px; font-variant-numeric: tabular-nums; transition: all .18s ease;
  }
  .pager button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
  .pager button.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
  .pager button:disabled { opacity: .38; cursor: default; }

  /* 投资者关系 */
  .ir-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .ir-stat { background: var(--card); border: 1px solid var(--hairline); border-radius: 18px; padding: 20px 22px; }
  .ir-stat span { font-size: 12px; color: var(--ink-2); letter-spacing: .04em; }
  .ir-stat b { display: block; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin-top: 7px; font-variant-numeric: tabular-nums; }
  /* v9.1：上一条 .ir-stat span 是给小标题的，别让它染到数值里的 span（地址卡「麓谷麓龙路 199 号」的 .kp） */
  .ir-stat b span { font-size: inherit; color: inherit; letter-spacing: inherit; }
  .ir-stat b em { font-style: normal; font-size: .48em; font-weight: 600; color: var(--ink-2); margin-left: 3px; }
  .ir-stat.up b { color: #16a34a; }
  @media (max-width: 760px) { .ir-stats { grid-template-columns: repeat(2, 1fr); } }

  .chart-card { background: var(--card); border: 1px solid var(--hairline); border-radius: 22px; padding: 26px 26px 18px; margin-top: 14px; }
  .chart-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; }
  .chart-head h3 { font-size: 17px; font-weight: 600; }
  .chart-head .src { font-size: 11.5px; color: var(--ink-3); }

  /* 分时图：昨收基准线上方红、下方绿；下半幅为分时成交量 */
  .quote-strip {
    display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 10px 0 4px;
    font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums;
  }
  .quote-strip b { font-weight: 600; color: var(--ink); margin-left: 5px; }
  .ir-stat b.up { color: #e5342a; }
  .ir-stat b.down { color: #0f9b5a; }
  .ir-live {
    display: inline-flex; align-items: center; gap: 5px;
  }
  .ir-live i {
    width: 6px; height: 6px; border-radius: 50%; background: #0f9b5a; display: block;
    animation: irPulse 1.8s ease-in-out infinite;
  }
  .ir-live.off i { background: var(--ink-3); animation: none; }
  @keyframes irPulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
  @media (prefers-reduced-motion: reduce) { .ir-live i { animation: none; } }

  .chart-wrap { overflow-x: auto; }
  .chart-wrap svg { display: block; width: 100%; min-width: 520px; height: auto; }

  /* 股权架构 */
  .org { overflow-x: auto; padding-bottom: 8px; }
  .org-inner { min-width: 780px; }
  .org-row { display: grid; gap: 12px; }
  .org-row.top { grid-template-columns: repeat(3, 1fr); max-width: 660px; margin: 0 auto; }
  .org-row.subs { grid-template-columns: repeat(6, 1fr); }
  .org-box {
    background: var(--navy-card); color: var(--ink-on-navy); border-radius: 12px;
    padding: 15px 13px; text-align: center; font-size: 13px; line-height: 1.5; font-weight: 500;
  }
  .org-box.sub { background: var(--card); color: var(--ink); border: 1px solid var(--hairline); font-size: 12.5px; }
  .org-main {
    background: linear-gradient(120deg, var(--navy), var(--navy-card)); color: var(--ink-on-navy);
    border-radius: 14px; padding: 20px 18px; text-align: center;
  }
  .org-main b { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
  .org-main span { display: block; font-size: 12.5px; color: var(--cyan-on-navy); margin-top: 6px; font-variant-numeric: tabular-nums; }
  .org-link { height: 26px; position: relative; }
  .org-link::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1.5px; background: var(--hairline); transform: translateX(-50%); }
  /* 第一层 → 第二层：三位股东各自下引，汇入横梁，再由中点单线接入公司 */
  .org-rail { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 660px; margin: 0 auto; height: 30px; }
  .org-rail i { position: relative; }
  .org-rail i::before { content: ""; position: absolute; left: 50%; top: 0; height: 50%; width: 1.5px; background: var(--hairline); transform: translateX(-50%); }
  .org-rail::before { content: ""; position: absolute; top: 50%; height: 1.5px; background: var(--hairline); left: calc((100% - 24px) / 6); right: calc((100% - 24px) / 6); }
  .org-rail::after { content: ""; position: absolute; left: 50%; top: 50%; height: 50%; width: 1.5px; background: var(--hairline); transform: translateX(-50%); }
  /* 第二层 → 第三层：公司单线下引，横梁分出六路分别指向各子公司 */
  .org-rail2 { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; height: 34px; }
  .org-rail2 i { position: relative; }
  .org-rail2::before { content: ""; position: absolute; left: 50%; top: 0; height: 50%; width: 1.5px; background: var(--hairline); transform: translateX(-50%); }
  .org-rail2::after { content: ""; position: absolute; top: 50%; height: 1.5px; background: var(--hairline); left: calc((100% - 60px) / 12); right: calc((100% - 60px) / 12); }
  .org-rail2 i::before { content: ""; position: absolute; left: 50%; top: 50%; height: 50%; width: 1.5px; background: var(--hairline); transform: translateX(-50%); }
  .org-pct { text-align: center; font-size: 11.5px; color: var(--brand); font-weight: 700; padding: 6px 0 4px; font-variant-numeric: tabular-nums; }

  /* 公告列表 */
  .ann-list { display: flex; flex-direction: column; border-top: 1px solid var(--hairline); }
  .ann-row {
    display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: baseline;
    padding: 15px 8px; border-bottom: 1px solid var(--hairline); transition: background .18s ease;
  }
  .ann-row:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
  .ann-row time { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
  .ann-row p { font-size: 14px; line-height: 1.6; color: var(--ink); }
  .ann-row:hover p { color: var(--accent); }
  @media (max-width: 640px) { .ann-row { grid-template-columns: 1fr; gap: 4px; } }
  .more-btn {
    display: inline-flex; align-items: center; gap: 7px; margin: 26px auto 0;
    background: var(--accent); color: #fff; border-radius: 980px; padding: 11px 26px;
    font-size: 14.5px; font-weight: 600; transition: filter .2s;
  }
  .more-btn:hover { filter: brightness(1.12); }
  .btn-row { display: flex; justify-content: center; }
  .sec-note { font-size: 12px; color: var(--ink-3); margin-top: 14px; line-height: 1.7; max-width: 62em; }
  #irNote { text-wrap: balance; }

  .honor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  /* v10.6：3×5 共 15 张。46px 高用户嫌太挤，放回约 58px；1440×900 仍与证书条同屏，1280×800 放不下（用户取舒展） */
  .honor-grid .honor { padding: 16px 22px; border-radius: 14px; }
  #ab-honor .cert-strip { margin-top: 20px; grid-auto-columns: 270px; }
  html:not([lang="en"]) #ab-honor .cert figcaption { white-space: nowrap; }
  @media (min-width: 761px) { html:not([lang="en"]) #join-top p, html:not([lang="en"]) #about-top p { max-width: none; white-space: nowrap; } }
  .honor-grid .honor b { font-size: 15.5px; }
  @media (max-width: 860px) { .honor-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px) { .honor-grid { grid-template-columns: 1fr; } }
  /* 子页面通栏底色：消除"孤零零一根内容柱"的观感 */
  .band { background: var(--bg-tint); }

  /* ---------- 社会责任 ---------- */
  /* 底衬用公司自己的四川基地鸟瞰（厂区被农田环抱），压暗后白字可读 */
  .csr-card { position: relative; border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); }
  .csr-strip { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
  .csr-strip i { display: block; background-size: cover; background-position: center 42%; }
  .csr-scrim {
    position: absolute; inset: 0;
    /* v5.1：原来 .9/.78/.56，左中两张底图几乎全黑，中间那张（捡拾垃圾）根本认不出。
       整体提亮一档，配合下面正文的投影，白字仍然立得住 */
    background: linear-gradient(105deg, rgba(6,18,32,.85) 0%, rgba(6,18,32,.7) 52%, rgba(6,18,32,.48) 100%);
  }
  .csr-body { position: relative; padding: clamp(30px, 4vw, 46px) clamp(24px, 4vw, 50px); }
  .csr-body p {
    color: rgba(255,255,255,.9); font-size: clamp(14.5px, 1.6vw, 16.5px); line-height: 2;
    max-width: none; text-wrap: pretty;   /* v8.8：桌面每段一行 */
    text-shadow: 0 1px 12px rgba(3,10,20,.75);   /* 蒙版提亮后靠它保住可读性 */
  }
  .band > .sec { padding-bottom: 56px; }
  .band + .band { margin-top: 0; }
  .page-tail { height: 96px; }

  /* ---------- 应用领域独立页（v5.7） ----------
     九个应用各有一页。版式沿用二级页那套（page-head + sec），
     只多一条面包屑和一个「大图 + 正文」的两栏。窄屏并成一栏。 */
  .crumb {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    justify-content: center; font-size: 13px; color: var(--ink-3); margin-bottom: 18px;
  }
  .crumb a { color: var(--ink-2); }
  .crumb a:hover { color: var(--accent); }
  .crumb .sep { color: var(--ink-3); opacity: .6; }
  .crumb b { color: var(--ink); font-weight: 600; }

  .appx { display: grid; grid-template-columns: 1fr 1.25fr; gap: 30px; align-items: start; }
  @media (max-width: 900px) { .appx { grid-template-columns: 1fr; gap: 22px; } }
  .appx-fig { margin: 0; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); }
  .appx-fig img { width: 100%; display: block; aspect-ratio: 3 / 2; object-fit: cover; }
  .appx-tag {
    display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
    color: var(--copper); background: var(--copper-bg); padding: 4px 10px; border-radius: 980px;
  }
  .appx-body h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; margin: 20px 0 10px; }
  .appx-body h2:first-child { margin-top: 12px; }
  .appx-body p { font-size: 15px; line-height: 1.9; color: var(--ink-2); }
  .appx-body ul { margin: 10px 0 0; padding-left: 20px; }
  .appx-body li { font-size: 14.5px; line-height: 1.85; color: var(--ink-2); margin: 9px 0; }
  .appx-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
  /* 同页其他应用的入口：既是给访客的导航，也是把九个页面串起来的内链 */
  .appx-more { max-width: var(--wrap); margin: 46px auto 0; padding: 0 var(--gutter); }
  .appx-more h3 { font-size: 15px; font-weight: 600; margin: 0 0 14px; color: var(--ink-2); }
  .appx-links { display: flex; flex-wrap: wrap; gap: 9px; }
  .appx-links a {
    font-size: 13.5px; color: var(--ink-2); border: 1px solid var(--hairline);
    border-radius: 980px; padding: 6px 14px; transition: color .2s ease, border-color .2s ease;
  }
  .appx-links a:hover { color: var(--accent); border-color: var(--accent); }
  /* 行尾全角标点悬挂：不计入行宽，使中文部分真正居中 */
  .hang { margin-right: -1em; }
  /* 英文孤字先靠浏览器自己收一道；中文断行到处都能断，pretty 基本不起作用，
     所以另有「末行守卫」脚本兜底。已经写了 text-wrap:balance 的标题不在此列 */
  .profile-text p, .letter p, .rd-lead, .app-body p, .app-body h4, .base-body p, .base-body h3,
  .cert figcaption, .join-card p, .join-card h4, .news-card h4, .honor b, .honor > span,
  .life-shot figcaption, .qc-text p, .qc-fig figcaption, .step-note, .sec-note,
  .amodal-body p, .amodal-body li, .cred-main p, .std-item .name, .foot-cols li {
    text-wrap: pretty;
  }
  .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
  .reveal.in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    html.smooth-scroll { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; transition: none; }
    .app-card:hover, .news-card:hover { transform: none; }
    .app-card:hover .app-media img, .base-card:hover .base-visual img { transform: none; }
  }

  /* ---------- 窄屏断行守卫（v5.4） ----------
     v5.3 及以前没有 viewport 声明，手机一直按 980px 布局再缩放，中文在真实窄屏下的
     断行问题被掩盖着。补上 viewport 之后，这些定宽小块常把末行剩成一两个字。
     text-wrap:balance 由浏览器把各行长度匀开，不改盒子宽度，正适合这类短块；
     长正文不要用它（没意义，浏览器还会限制参与平衡的行数）。 */
  .org-box, .cred-fact, .cred-cap, .honor > b, .honor > span,
  .fact-chip, .ann-row p, .nw-row h3, .base-body h3, .join-card h4, .tl-text {
    text-wrap: balance;
  }
  @media (max-width: 640px) {
    /* 窄屏把正文也交给浏览器匀行长。桌面的行长是逐页调过的，不动。
       悬挂标点模块管的那些标题已经把断点固化成 <br>，balance 对它们无效，不会打架；
       超过六行的长段落浏览器本来就不参与平衡，也不会有副作用 */
    p, li, .rd-lead, .rd-note, .sec-note { text-wrap: balance; }
    /* 数字和它的单位不能拆开：「3.2 万吨」断在万/吨之间最难看。
       **只能给中文用**：英文词表里同一个 <strong> 包的是整句而不是一个数量词，
       nowrap 会把它变成 400~530px 的不可断盒子，把 .profile-grid 连同整页一起撑宽，
       手机上表现为「企业简介没适配屏宽」＋「导航条底色滚出去就没了」（v5.5 修） */
    html:not([lang="en"]) .profile-text strong,
    html:not([lang="en"]) .tl-text strong { white-space: nowrap; }
    /* 投资者专线那四块装的是文字不是数字（电话、简称、挂牌年份、办公地址），
       窄屏两栏只有 114px，「2022 北交所上市」正好挤出一个「市」字单独一行。
       字号写在元素 inline style 上、又是中英词表键的一部分，动不得，改成整行铺开 */
    #ir-contact .ir-stats { grid-template-columns: 1fr; }
  }
  /* ---------- v6.3 ---------- */
  /* 侧边栏浮层里的条目：左边类目、右边动作 */
  .dock-pop .dp-row {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 9px 0; border-top: 1px solid var(--hairline);
  }
  .dock-pop h6 + .dp-row { border-top: 0; padding-top: 0; }
  .dock-pop .dp-k { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
  .dock-pop .dp-v { font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }
  .dock-pop .dp-tel { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
  .dock-pop .dp-act {
    font: inherit; font-size: 13.5px; font-weight: 600; color: var(--accent);
    background: none; border: 0; padding: 0; cursor: pointer; white-space: nowrap;
  }
  .dock-pop .dp-act:hover, .dock-pop .dp-tel:hover { text-decoration: underline; }
  .dock-pop .dp-row + .qr { margin-top: 0; }
  /* 右侧文字较长时允许折行、靠右，不把浮层撑宽 */
  .dock-pop .dp-wrap { white-space: normal; text-align: right; line-height: 1.45; }
  /* 首页技术优势大标题：两半各成一块，要断只断在「写在」前（手机上 .kp 会放开，靠 inline-block 兜住） */
  #cred .section-head h2 .kp { display: inline-block; }
  /* 生产基地大标题（英文值带 .kp）：要么一行，要么逗号后整句换行 —— balance 会断成 supply / you can count on. */
  #bases .section-head h2 .kp { display: inline-block; }
  /* 手机上后半句 30px 要 351px，390 宽屏的标题只有 331px —— 字号跟屏宽走，保证后半句一行放得下 */
  @media (max-width: 430px) { html[lang="en"] #bases .section-head h2 { font-size: min(30px, calc((100vw - 60px) / 12)); } }
  /* 桶装重量随系列：片状锌粉松装密度小，25kg/桶；球状与雾化 50kg/桶 */
  /* v6.9：改由 <html data-pack> 驱动（syncFields 同步写入）—— 包装实景弹窗不在 .buy 里，兄弟选择器够不着 */
  html[data-pack="flake"] .pk-std, html:not([data-pack="flake"]) .pk-flake { display: none; }
  /* 英文版董事长名片三项身份：英文比中文长得多，nowrap 一行会把名片撑出屏幕 —— 英文允许折行 */
  html[lang="en"] .chair-roles { flex-wrap: wrap; row-gap: 4px; }
  /* 侧边栏浮层二维码框：.qr 是 <span>，原规则的 118px 宽高对行内元素不生效，
     图片按浮层内容宽撑到约 198px，边框碎成两截露在左边（测试站手机截图发现）。补 display:block */
  .dock-pop .qr { display: block; }
  .dock-pop .dp-row + .qr { margin-top: 4px; }
  /* 联系我们单位卡片：「有限公司」整体换行，不出现单字成行（≤560px .kp 会放开，靠 inline-block 兜住） */
  .geo-card h3 .kp { display: inline-block; }
  .gc-addr .kp { display: inline-block; }   /* 地址末段整段折行，不留「号」「东」单字行 */
  html[lang="en"] .gc-addr { text-wrap: balance; }   /* 英文地址连写后各行均衡，不出「Zone,」这种半截行 */
  /* 悬挂标点（.hang 负 1em 外边距）在 inline-block 块末会把块宽吃掉一个字，后半句压到逗号上 —— 这句不悬挂 */
  #cred .section-head h2 .kp .hang { margin-right: 0; }
  /* 逗号恢复占宽后整句约 1005px（54px 字号），默认标题区内容宽 956px 会在「写在」前折行。
     用户首选一行：这一段标题区放到 1080px（内容 1036px）。字号随 4.8vw 缩，614px 以上都排得下一行 */
  #cred .section-head { max-width: 1080px; }
  /* 董事长寄语抬头 */
  .letter-body p.salute { color: var(--ink-on-navy); font-size: 16px; font-weight: 600; }
  /* 发明专利与标准：两行，蓝色小字类目 + 竖线 */
  .pat-note + .pat-note { margin-top: 6px; }
  .pat-note .pn-k { color: var(--brand); font-size: 13px; font-weight: 700; letter-spacing: .06em; white-space: nowrap; }
  .pat-note .pn-k::after {
    content: ""; display: inline-block; width: 1px; height: .95em; background: currentColor;
    opacity: .5; margin: 0 11px; vertical-align: -.1em;
  }
  /* 团队风采两段 */
  .life-lead + .life-lead { margin-top: -12px; }
  /* ≤860px 图片墙变两列、大图占满整行，导语跟着放满 */
  @media (max-width: 860px) { .life-lead { max-width: 100%; } }
  /* 投资者服务五张卡：宽屏一排五张；中屏 3 + 2，地址那张占两格 */
  @media (min-width: 1200px) {
    /* v9.2：五张等宽（第三张居页面正中）；「长沙高新开发区麓谷麓龙路 199 号」一行要 200.7px，
       卡宽 221.6px，只把地址卡左右内边距收到 8px（内容 205.6px）。英文地址本来就四行，不收 */
    #ir-contact .ir-stats { grid-template-columns: repeat(5, 1fr); }
    :root:not([lang="en"]) #ir-contact .ir-stat:last-child { padding-left: 8px; padding-right: 8px; }
  }
  /* 1101–1199 版心还没到 1156，五列太挤（地址三行、电话日期也折行）→ 沿用 3 + 2 */
  @media (min-width: 761px) and (max-width: 1199px) {
    #ir-contact .ir-stats { grid-template-columns: repeat(3, 1fr); }
    #ir-contact .ir-stat:last-child { grid-column: span 2; }
  }
  /* v9.4：英文电话「+86 731 8890 0355」一行要 181px，≥1200 时卡片内容区只有 173–176 → 五张英文卡
     内边距一起收到 16px（仍等宽）。中文地址卡 8px 那条规则只管中文，互不影响 */
  @media (min-width: 1200px) {
    :root[lang="en"] #ir-contact .ir-stat { padding-left: 16px; padding-right: 16px; }
  }
  /* v9.4：加入我们联系卡四列在 761–1099 时内容区 121–206px、≤560 两列时 114–199px，
     电话（中 155 / 英 181px）会折成两行 → 这两档改两列 / 单列 */
  @media (min-width: 761px) and (max-width: 1099px) { #jn-contact .ir-stats { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px) { #jn-contact .ir-stats { grid-template-columns: 1fr; } }

  /* v12.8/v12.9：手机上的中文断行（只 ≤600px、只中文页）。
     v12.8 按 em 定宽在 iPhone 上失效：PingFang 的「，」在 WebKit 里不足 1em，量测时逗号后的字还挤得进第一行，
     s08 把断点固化在它后面，真实排版又放不下 → 「保」「筑」单字成行。v12.9 起一律用段内 br.mbr 写死断点，
     这几处再从 balance 改回顺排 wrap，免得 WebKit 在明确断点之外再匀一刀 */
  .mbr { display: none; }
  @media (max-width: 600px) {
    .mbr { display: inline; }
    html:not([lang="en"]) #bases .section-head h2,
    html:not([lang="en"]) #partners .section-head h2,
    html:not([lang="en"]) #prod-top p,
    html:not([lang="en"]) #about-top p,
    html:not([lang="en"]) #apps .section-head p { text-wrap: wrap; }
    /* 「我们的不懈努力，/ 写在…」：两个 .kp 各占一行，逗号恢复悬挂，文字部分居中（桌面同一行时悬挂要关，见 v6.5） */
    html:not([lang="en"]) #cred .section-head h2 .kp { display: block; }
    html:not([lang="en"]) #cred .section-head h2 .kp .hang { margin-right: -1em; }
    /* 分时图说明：balance 会把整段压成一条窄栏，手机上改回顺排铺满 */
    #irNote { text-wrap: wrap; }
  }
  /* 多页版：中英切换键从 <button> 变成 <a>，去掉链接默认样式 */
  a.lang-switch { text-decoration: none; cursor: pointer; }