/* ============================================================
   企业官网模板 · 共享设计系统
   所有模板复用本文件，再由各版式覆盖自己的视觉语言。
   重点：排版节奏、响应式断点、移动端触控与安全区、动效克制。
   ============================================================ */

/* ---------- 变量（由模板内联覆盖） ---------- */
:root {
    --p: #2f6bff;
    --a: #12b886;
    --ink: #141b2d;
    --ink-2: #3d4659;
    --ink-3: #6b7488;
    --ink-4: #9aa2b4;
    --line: #e6e9f0;
    --line-2: #f1f3f8;
    --bg: #ffffff;
    --bg-2: #f7f8fb;
    --bg-3: #eef1f7;
    --white: #fff;
    --radius: 8px;
    --radius-lg: 15px;
    --radius-sm: 4.4px;
    --wrap: 1200px;
    --head-h: 72px;
    --font-sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, system-ui, sans-serif;
    --font-serif: "Songti SC", "Noto Serif SC", "Source Han Serif SC", Georgia, "Times New Roman", serif;
    --shadow-s: 0 1px 2px rgba(20, 27, 45, .05), 0 2px 8px rgba(20, 27, 45, .04);
    --shadow-m: 0 4px 12px rgba(20, 27, 45, .07), 0 12px 32px rgba(20, 27, 45, .06);
    --shadow-l: 0 18px 48px rgba(20, 27, 45, .12);
    --ease: cubic-bezier(.22, .61, .36, 1);
    --sp: clamp(56px, 7vw, 104px);

    /* 浅色浮层的 hover / 当前项高亮底色。
       ⚠️ 必须是「锚定白色」的混色，不能用 --bg-2 / --bg-3：
       那两个变量的语义是「页面第二层背景」，会随版式深浅翻转 —— techdark 把它定成
       #0e141e、panel 定成 #111720（都是深色）。放进底色较浅的浮层里，就成了
       「浅色面板上一个深色方块」，而项文字又是偏深的主色，深底压深字，几乎看不清。
       锚定 var(--white) 之后，任何版式下都是「浅底 + 淡主题色」。
       它们只作为下面 --pop-hl / --pop-hl-2 的默认值出现，规则里不要再直接引用。 */
    --hl: color-mix(in srgb, var(--p) 8%, var(--white));
    --hl-2: color-mix(in srgb, var(--p) 14%, var(--white));

    /* 「浅色底上的主色文字」专用色：把 --p 往深里拉一档。
       --p 的职责是「填充」—— 按钮底色配白字、色块、图标；不少版式会把它给得很亮。
       一旦直接拿 --p 当文字色放在浅底上，对比度就不够：实测 story 版式只有 2.78:1
       （WCAG AA 正文要 4.5:1，连大字的 3:1 都没到），语言面板 hover 时几乎看不清。
       所以**浅底上的主色文字一律用 --p-ink，不要直接用 --p**。 */
    --p-ink: color-mix(in srgb, var(--p) 70%, #0b1020);

    /* 浅色浮层的文字 / 描边色。仍然不能用 --ink / --ink-2 / --line-2 ——
       它们是「页面底色上的文字 / 线条」语义，会随版式深浅整体翻转
       （techdark 的 --ink-2 是 #c3ccdb、panel 是 #bcc6d6）。
       这两个变量现在只是下面 --pop-ink / --pop-line 的默认值来源。 */
    --ink-on-white: #3d4659;
    --line-on-white: color-mix(in srgb, #0b1020 10%, var(--white));

    /* ---------- 顶栏语言控件 + 顶栏浮层配色（第十轮新增） ----------
       设计原则：**顶栏里的控件跟着顶栏自身的深浅走**，不再一律白底。
       用户反馈的原始问题是「背景是黑的，语言下拉框来个白色的，太显眼」。

       实测（见 _darkhd11_out.txt）：全站 20 个版式里只有 5 个是深色顶栏 ——
         industrial / construction / finance / techdark / panel
       这 5 个版式下的 92 个模板，顶栏合成底色亮度全部落在 0.005~0.165；
       其余 15 个版式的顶栏恒为 rgb(255,255,255)、亮度 1。
       所以判定「顶栏深浅」不需要逐模板判断，**看版式就够**：
       那 5 个版式在自己的 :root 里整组覆盖下面这些变量，语言控件与浮层
       就一起变成深色表面；浅色顶栏的版式一个字节都不用改（默认值 = 原行为）。

       ⚠️ 为什么改成「整组变量」而不是像第八/九轮那样逐条覆盖 .langsw-* 规则：
       逐条覆盖是 6 条规则 × 5 个版式 = 30 处，改一处漏一处 ——
       第八轮漏掉默认态、第九轮才发现，就是这么来的。
       整组变量只有一处定义、各版式一处引用，机制不会漂移。

       ⚠️ 语言面板与导航下拉 .nav .sub 共用同一组 --pop-*：
       两者都是「从顶栏里弹出的浮层」，本来就该同款。以前各写各的，
       结果 industrial / construction / finance 的导航下拉一直是白底
       （和用户这次反馈的是同源缺陷），techdark / panel 却是深底 —— 两套走样。

       ⚠️ ① 的 --hd-cur-bg 是半透明色，算对比度时必须先叠到 ① 的底色上合成，
       直接拿它的色值算会得出 1.1:1 这种毫无意义的数字（第九轮踩过）。 */

    /* ① 语言按钮（药丸） */
    --hd-btn-bg:      var(--white);
    --hd-btn-ink:     var(--ink-on-white);
    --hd-btn-ink-hi:  var(--p-ink);
    --hd-btn-line:    var(--line-on-white);
    --hd-btn-line-hi: color-mix(in srgb, var(--p) 34%, var(--line-on-white));
    /* ② 语言代码胶囊（叠在 ① 之上） */
    --hd-cur-bg:      color-mix(in srgb, var(--p) 11%, transparent);
    --hd-cur-ink:     var(--p-ink);
    /* ③ 顶栏浮层：导航下拉 + 语言面板 */
    --pop-bg:         var(--white);
    --pop-ink:        var(--ink-on-white);
    --pop-ink-hi:     var(--p-ink);
    --pop-line:       var(--line-on-white);
    --pop-hl:         var(--hl);
    --pop-hl-2:       var(--hl-2);
    --pop-shadow:     var(--shadow-l);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* scroll-padding-top：页内锚点（如 /about#history）跳转时，浏览器会把目标元素顶到视口最上沿，
   而 .hd 是 sticky 覆在内容之上的，于是目标区块的头 72px 被顶栏整块盖住 —— 用户看到的现象就是
   「点了跳了，但没跳到该到的地方」。这里让滚动容器预留出「顶栏高 + 一点余量」的安全区，
   所有锚点跳转（含跨页锚点）都会自动避开吸顶栏，无需给每个 id 单独写 scroll-margin-top。 */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 20px); }
body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.75;
    color: var(--ink-2);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}
body.no-scroll { overflow: hidden; }
img, svg { max-width: 100%; display: block; }
h1, h2, h3, h4, h5 { margin: 0; color: var(--ink); line-height: 1.3; font-weight: 700; letter-spacing: -.01em; font-family: var(--font-h, var(--font-sans)); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; transition: color .25s var(--ease), opacity .25s var(--ease); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 2px solid var(--a); outline-offset: 3px; border-radius: 4px; }
::selection { background: color-mix(in srgb, var(--p) 22%, transparent); }

/* ---------- 布局 ---------- */
/* 小屏最小留白取 18px（而不是 12~16px）：中文正文在手机上贴到 12px 会有明显"挤"的感觉。
   注意：任何同时带 .container 的类，都只能用 padding-top/bottom 追加竖向留白，
   一旦写成「padding: X 0」简写，就会把这里的左右留白抹成 0。 */
.container { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(18px, 4.5vw, 32px); }
.container--wide { max-width: calc(var(--wrap) + 120px); }
.section { padding: var(--sp) 0; }
.section--tight { padding: calc(var(--sp) * .62) 0; }
.section--soft { background: var(--bg-2); }
.section--tint { background: var(--bg-3); }
.section--dark { background: var(--ink); color: rgba(255, 255, 255, .74); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }

/* ---------- 排版 ---------- */
.lead { font-size: clamp(16px, 1.6vw, 18px); line-height: 1.85; }
.muted { color: var(--ink-3); }
.small { font-size: 13.5px; }
.mono { font-variant-numeric: tabular-nums; }
.serif { font-family: var(--font-serif); }

/* ---------- 区块标题 ---------- */
.sec-head { max-width: 760px; margin-bottom: clamp(32px, 4vw, 56px); }
.sec-head.is-center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-kicker {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--p); margin-bottom: 14px;
}
.sec-kicker i { width: 22px; height: 2px; background: var(--a); border-radius: 2px; flex: none; }
.sec-head.is-center .sec-kicker i:last-child { display: none; }
.sec-title { font-size: clamp(24px, 3.4vw, 40px); line-height: 1.28; letter-spacing: -.02em; }
.sec-title em { font-style: normal; color: var(--p); }
.sec-title small { display: block; font-size: .5em; font-weight: 500; color: var(--ink-4); margin-top: 10px; letter-spacing: 0; }
.sec-sub { margin-top: 16px; font-size: clamp(14.5px, 1.5vw, 16.5px); color: var(--ink-3); line-height: 1.85; }
.sec-extra { margin-top: 24px; }
.sec-head.is-light .sec-title, .sec-head.is-light .sec-sub { color: #fff; }
.sec-head.is-light .sec-sub { color: rgba(255, 255, 255, .68); }

/* ---------- 按钮 ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 48px; padding: 0 26px; border-radius: var(--radius-sm);
    font-size: 15px; font-weight: 600; letter-spacing: .01em;
    white-space: nowrap; position: relative; overflow: hidden;
    /* 关键：overflow 非 visible 的 flex item，其「自动最小尺寸」按 Flexbox 规范退化为 0，
       于是按钮会被压得比文字还窄，再由 overflow:hidden 把文字直接裁掉（窄屏 CTA 条上实测差 4~17px）。
       这里显式给出 max-content 下限，按钮永不小于自己的文字宽度；空间不够时改为换行显示。 */
    min-width: max-content;
    transition: transform .28s var(--ease), box-shadow .28s var(--ease), background .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease);
}
.btn .ic { flex: none; transition: transform .28s var(--ease); }
.btn:hover .ic { transform: translateX(3px); }
.btn--sm { height: 40px; padding: 0 18px; font-size: 14px; }
.btn--lg { height: 54px; padding: 0 34px; font-size: 16px; }
.btn--block { width: 100%; }
.btn--primary { background: var(--p); color: #fff; box-shadow: 0 6px 18px color-mix(in srgb, var(--p) 28%, transparent); }
.btn--primary:hover { background: color-mix(in srgb, var(--p) 88%, #000); transform: translateY(-2px); box-shadow: 0 10px 26px color-mix(in srgb, var(--p) 34%, transparent); }
.btn--accent { background: var(--a); color: #fff; box-shadow: 0 6px 18px color-mix(in srgb, var(--a) 30%, transparent); }
.btn--accent:hover { transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn--ghost:hover { border-color: var(--p); color: var(--p); background: color-mix(in srgb, var(--p) 5%, transparent); }
.btn--light { background: #fff; color: var(--ink); box-shadow: var(--shadow-s); }
.btn--light:hover { transform: translateY(-2px); box-shadow: var(--shadow-m); }
.btn--onlight { background: rgba(255, 255, 255, .14); color: #fff; border: 1.5px solid rgba(255, 255, 255, .3); backdrop-filter: blur(6px); }
.btn--onlight:hover { background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .5); }
.btn--text { height: auto; padding: 0; color: var(--p); font-weight: 600; }
.btn--text:hover { gap: 12px; }

/* ---------- 图标 ---------- */
.ic { flex: none; }
.ic-solid path { fill: currentColor; stroke: none; }

/* ---------- 面包屑 ---------- */
.crumb { border-bottom: 1px solid var(--line-2); background: var(--bg-2); }
.crumb .container { display: flex; align-items: center; gap: 8px; height: 52px; font-size: 13.5px; color: var(--ink-3); overflow-x: auto; }
.crumb a:hover { color: var(--p); }
.crumb-sep { color: var(--ink-4); }
.crumb-cur { color: var(--ink); font-weight: 600; }

/* ---------- 顶栏 ---------- */
.hd {
    position: sticky; top: 0; z-index: 90;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.hd.is-stuck { border-color: var(--line); box-shadow: 0 2px 20px rgba(20, 27, 45, .06); }
/* 容器查询上下文建立在「实际可用宽度」这一层，也就是 .container 那一格，
   而不是整条满宽的 .hd。各版式 --wrap 1160~1320 各不相同，
   而 .hd 的宽度恒等于视口宽 —— 拿它当基准的话，1440 视口下容器报 1440、
   真实可用只有 1200，压缩规则永远慢半拍，导航就会一直压着热线。
   容器不能给自身设样式，所以 .hd-in 退到里层，由 .hd-box 兼职容器。 */
.hd-box { container-type: inline-size; container-name: hd; }
.hd-in { display: flex; align-items: center; gap: var(--hd-gap, clamp(16px, 2.4vw, 36px)); height: var(--head-h); }

.brand { display: flex; align-items: center; gap: 11px; flex: none; min-width: 0; }
.brand-mark { flex: none; width: 42px; height: 42px; display: grid; place-items: center; }
.brand-mark svg { width: 100%; height: 100%; }
/* 品牌文字块：--bw 为该处允许的最大宽度，按所在区域分别收紧或放宽。
   顶栏需要给导航留空间故限宽，页脚 / 抽屉空间充足则放宽，避免品牌口号被省略号截断。 */
.brand-txt { display: flex; flex-direction: column; min-width: 0; --bw: 190px; }
.brand-txt b { font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: var(--bw); }
.brand-txt i { font-style: normal; font-size: 11.5px; color: var(--ink-4); letter-spacing: .06em; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: var(--bw); }
.ft-brand .brand-txt { --bw: 260px; }      /* 页脚：整列展示品牌口号（1440px 下该列约 300px） */
.drawer-top .brand-txt { --bw: 180px; }    /* 抽屉：360px 窄屏下可用约 220px，留足余量 */

.nav { margin-left: auto; min-width: 0; }
.nav > ul { display: flex; align-items: center; flex-wrap: nowrap; gap: var(--nav-gap, 4px); }
.nav > ul > li { position: relative; }
.nav > ul > li > a {
    display: flex; align-items: center; gap: 4px;
    padding: 10px var(--nav-pad, 14px); font-size: var(--nav-fs, 15px); font-weight: 600; color: var(--ink-2); border-radius: var(--radius-sm);
    /* 中文在 flex 收缩下最小宽度只有 1 个字，会被逐字折行，必须禁止换行 */
    white-space: nowrap;
}
/* hover / 当前项用 --p-ink 而不是 --p —— 与语言控件同一个道理：
   --p 的职责是「填充」，不少版式给得很亮，直接当浅底上的文字色会不达标。
   实测浅色顶栏版式下 --p 当文字色：story 2.99:1、mosaic 3.82:1、magazine 4.07:1
   （AA 正文要 4.5:1）。--p-ink 是「浅底上的主色文字」专用色，仍是品牌色、只是更深。
   ⚠️ 深色顶栏的版式（techdark / panel / industrial / construction / finance）不受影响：
   它们用 .hd .nav > ul > li > a:hover（特异性 0,3,3）覆盖成 #fff / rgba(255,255,255,.9)，
   高于这两条（0,2,3），且注入顺序更靠后。 */
.nav > ul > li > a:hover { color: var(--p-ink); background: color-mix(in srgb, var(--p) 6%, transparent); }
.nav > ul > li.on > a { color: var(--p-ink); }
.nav > ul > li.on > a::after {
    content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px; background: var(--a); border-radius: 2px;
}
.nav .sub {
    position: absolute; top: calc(100% + 10px); left: 0; min-width: 190px;
    background: var(--pop-bg); border-radius: var(--radius); box-shadow: var(--pop-shadow);
    padding: 8px; opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: all .28s var(--ease); border: 1px solid var(--pop-line);
}
.nav > ul > li:hover .sub { opacity: 1; visibility: visible; transform: translateY(0); }
.nav .sub a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; font-size: 14.5px; border-radius: var(--radius-sm); color: var(--pop-ink); white-space: nowrap; }
/* 导航下拉与语言面板同款：底色 --pop-bg / 文字 --pop-ink / hover --pop-hl（见 :root 注释） */
.nav .sub a:hover { background: var(--pop-hl); color: var(--pop-ink-hi); }
.nav .sub a .ic { opacity: 0; transform: translateX(-4px); transition: all .25s var(--ease); }
.nav .sub a:hover .ic { opacity: 1; transform: translateX(0); }

/* 顶栏空间自适应的容器查询见文件后面「顶栏空间自适应」一节。
   注意它必须写在 .hd-act / .hd-tel 这些基础规则之后 —— 容器查询里的
   display:none 与基础规则同为单类选择器，靠源码顺序分胜负，
   写在前面会被后面的 display:flex 直接盖掉（这条曾经让「窄顶栏收起热线文字」
   整整一段规则完全失效）。 */

.hd-act { display: flex; align-items: center; gap: 14px; flex: none; }
.hd-tel { display: flex; align-items: center; gap: 9px; }
.hd-tel-ico { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--p) 10%, transparent); color: var(--p); flex: none; }
.hd-tel span:last-child { display: flex; flex-direction: column; }
.hd-tel i { font-style: normal; font-size: 11px; color: var(--ink-4); line-height: 1.3; }
.hd-tel b { font-size: 15px; font-weight: 800; color: var(--ink); letter-spacing: .01em; line-height: 1.3; font-variant-numeric: tabular-nums; }
.hd-tel:hover b { color: var(--p); }

/* ---------- 语言切换 ----------
   Lang::switcher() 输出 .langsw / -btn / -cur / -name / -caret / -list / -tick。
   这一组样式原先一条都不存在：<ul> 就是浏览器默认列表，在 flex 顶栏里
   自然高度 168px（整个控件 198px，而顶栏只有 72px），下拉项常驻可见，
   直接把导航和电话压住。所以这里两件事必须都做：
     ① 给「关」的状态一个明确的视觉定义（不是只改 opacity —— 那样仍占位、仍能被 Tab 聚焦）；
     ② 面板相对按钮绝对定位，控件自身高度就等于按钮高度。

   配色（第十轮重构）**全部走 --hd-* / --pop-* 变量族**，不再写死白底：
   浅色顶栏版式用默认值（白药丸 + 白面板 + 深字，与以前完全一致）；
   深色顶栏版式（industrial / construction / finance / techdark / panel）
   在各自的 :root 里整组覆盖，控件就跟着顶栏一起转深。
   变量定义与判定依据见文件顶部 :root 里那段注释。

   ⚠️ 历史教训：第八轮只改了 hover 与当前项两态，默认态照旧引用 --ink-2，
   而深色版式下 --ink-2 是浅灰，落在白面板上对比度 1.62:1 几乎看不见；
   第九轮又只盯着语言控件，没注意到「白底浮层」这个前提本身就不成立 ——
   用户要的是跟顶栏搭配，不是永远白底。所以本轮的判据改成
   「浮层底色必须与它所在的顶栏同深浅」，并逐态断言（见 probe-lang10.js）。 */
.langsw { position: relative; flex: none; }
.langsw-btn {
    display: inline-flex; align-items: center; gap: 7px;
    height: 38px; padding: 0 11px;
    border: 1px solid var(--hd-btn-line); border-radius: 100px;
    background: var(--hd-btn-bg); color: var(--hd-btn-ink);
    font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1;
    cursor: pointer; white-space: nowrap;
    transition: border-color .24s var(--ease), color .24s var(--ease), box-shadow .24s var(--ease);
}
.langsw-btn:hover { border-color: var(--hd-btn-line-hi); color: var(--hd-btn-ink-hi); }
.langsw-btn:focus-visible { outline: 2px solid var(--p); outline-offset: 2px; }
.langsw-cur {
    display: inline-grid; place-items: center; flex: none;
    min-width: 26px; height: 20px; padding: 0 5px;
    border-radius: 100px; background: var(--hd-cur-bg);
    color: var(--hd-cur-ink); font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
    text-transform: uppercase;
}
.langsw-name { line-height: 1; }
.langsw-caret {
    width: 7px; height: 7px; flex: none; margin-left: 1px;
    border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .24s var(--ease);
}
/* ------------------------------------------------------------
   ⚠️ 展开条件只能有**一个**事实源：.langsw[data-open="1"]（由 site.js 的 toggle 控制）。
   这里原本还并列写着第二条 `:focus-within` —— 它和点击 toggle 直接打架：
   点按钮 → 按钮获得焦点 → :focus-within 成立 → 面板一直显示，
   于是「再点一次收起」看起来没反应（data-open 已被 JS 移除，但焦点还留在按钮里撑着），
   只有点页面空白让按钮失焦才收得起来。**两个条件表达同一件事，必然互相拆台。**
   现在 :focus-within 降级为**无 JS 兜底**（html:not(.js)）：JS 可用时 data-open 说了算，
   JS 不可用时仍能 Tab 聚焦展开，不丢渐进增强。
   键盘链路由 site.js 兜住：Enter/Space 触发原生 click 走 toggle、Esc 收起并回焦、
   焦点离开整个控件时自动收起。 */
.langsw[data-open="1"] .langsw-caret { transform: translateY(1px) rotate(-135deg); }
html:not(.js) .langsw:focus-within .langsw-caret { transform: translateY(1px) rotate(-135deg); }

.langsw-list {
    position: absolute; top: calc(100% + 10px); right: 0;
    min-width: 178px; max-height: min(64vh, 420px); overflow-y: auto;
    margin: 0; padding: 6px; list-style: none; text-align: left;
    background: var(--pop-bg); border: 1px solid var(--pop-line);
    border-radius: var(--radius); box-shadow: var(--pop-shadow);
    opacity: 0; visibility: hidden; transform: translateY(8px); pointer-events: none;
    transition: opacity .24s var(--ease), transform .24s var(--ease), visibility .24s;
    z-index: 60;
}
.langsw[data-open="1"] .langsw-list {
    opacity: 1; visibility: visible; transform: none; pointer-events: auto;
}
/* 无 JS 兜底（有 JS 时走上一条，data-open 是唯一事实源，见上面的注释） */
html:not(.js) .langsw:focus-within .langsw-list {
    opacity: 1; visibility: visible; transform: none; pointer-events: auto;
}
/* 三态（默认 / hover / 当前项）全部走 --pop-*，深浅由版式决定。
   第九轮的教训：只修了 hover 与当前项，默认态照旧引用会在深色版式下变浅灰的 --ink-2，
   于是白面板上是 1.62:1 的浅灰字。**浮层里每一个文字态都要有断言**，
   不能只测「正在改的那两个态」（见 probe-lang10.js 的 A3/A4/A7）。 */
.langsw-list a {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 9px 12px; border-radius: var(--radius-sm);
    color: var(--pop-ink); font-size: 14px; font-weight: 500; white-space: nowrap;
    transition: background .2s var(--ease), color .2s var(--ease);
}
/* hover 与「当前项」用同一族底色（--pop-hl 浅、--pop-hl-2 稍深），
   文字用 --pop-ink-hi（浅色浮层下是 --p-ink，深色浮层下是 #fff）。 */
.langsw-list a:hover { background: var(--pop-hl); color: var(--pop-ink-hi); }
.langsw-list a.on { color: var(--pop-ink-hi); font-weight: 700; background: var(--pop-hl-2); }
.langsw-tick {
    width: 6px; height: 11px; flex: none;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
}
/* ============================================================
   顶栏空间自适应
   ------------------------------------------------------------
   基准是 .hd-box 的宽度，也就是「去掉左右留白、封顶于 --wrap」之后的
   真实可用宽度；不是视口宽度。各版式 --wrap 1160~1320 不统一，
   以视口为基准的话宽屏下会少算 200px 以上，压缩规则永不触发。

   这段必须写在 .hd-act / .hd-tel / .langsw 的基础规则之后：
   容器查询里的 display:none 与基础规则同为单类选择器，靠源码顺序决胜。
   ============================================================ */
@container hd (max-width: 1340px) {
    .hd-in { --nav-pad: 10px; --nav-fs: 14.5px; --nav-gap: 3px; --hd-gap: 22px; }
}
/* 语言切换器占了约 124px，热线文字在这一档先收成图标 ——
   不收的话导航的 <ul> 会被压到比自己内容还窄，末几项直接压到热线上去。 */
@container hd (max-width: 1220px) {
    .hd-in { --nav-pad: 8px; --nav-fs: 14px; --nav-gap: 3px; --hd-gap: 16px; }
    .hd-tel span:last-child { display: none; }   /* 只保留电话图标 */
    .hd-act .btn--sm { padding: 0 14px; }
}
@container hd (max-width: 1110px) {
    .hd-in { --nav-pad: 7px; --nav-fs: 13.5px; --nav-gap: 2px; --hd-gap: 14px; }
    .hd-tel { display: none; }
    .langsw-name { display: none; }              /* 语言只留两位代码 */
    .langsw-btn { padding: 0 9px; gap: 5px; }
}

/* 兜底：不支持容器查询的旧浏览器按视口宽度近似降级。
   .container 左右各 24px 留白、--wrap 按最大的 1320 估，故阈值整体上抬约 240px。 */
@supports not (container-type: inline-size) {
    @media (max-width: 1580px) { .hd-in { --nav-pad: 10px; --nav-fs: 14.5px; --nav-gap: 3px; --hd-gap: 22px; } }
    @media (max-width: 1460px) {
        .hd-in { --nav-pad: 8px; --nav-fs: 14px; --nav-gap: 3px; --hd-gap: 16px; }
        .hd-tel span:last-child { display: none; }
        .hd-act .btn--sm { padding: 0 14px; }
    }
    @media (max-width: 1350px) {
        .hd-in { --nav-pad: 7px; --nav-fs: 13.5px; --nav-gap: 2px; --hd-gap: 14px; }
        .hd-tel { display: none; }
        .langsw-name { display: none; }
        .langsw-btn { padding: 0 9px; gap: 5px; }
    }
}

/* 汉堡按钮 */
.burger { display: none; width: 44px; height: 44px; position: relative; flex: none; border-radius: 10px; }
.burger span {
    position: absolute; left: 11px; width: 22px; height: 2px; background: var(--ink); border-radius: 2px;
    transition: transform .32s var(--ease), opacity .24s var(--ease), top .32s var(--ease);
}
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 27px; }
.burger[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

/* ---------- 移动端抽屉 ---------- */
.drawer-mask {
    position: fixed; inset: 0; background: rgba(11, 15, 26, .5); z-index: 98;
    opacity: 0; transition: opacity .3s var(--ease); backdrop-filter: blur(2px);
}
.drawer-mask.is-open { opacity: 1; }
.drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 99;
    width: min(87vw, 380px); background: var(--white);
    display: flex; flex-direction: column;
    transform: translateX(100%); transition: transform .36s var(--ease);
    box-shadow: -12px 0 44px rgba(11, 15, 26, .18);
    padding-bottom: env(safe-area-inset-bottom);
}
.drawer.is-open { transform: translateX(0); }
/* [hidden] 必须显式生效：.drawer 自己声明了 display:flex，作者样式优先级高于浏览器默认的
   [hidden] { display: none }，会让带 hidden 属性的抽屉仍然被渲染 —— 虽然被 translateX(100%)
   移到屏幕外看不见，但其中的链接依旧留在 Tab 焦点链和无障碍读屏树里。
   显式关闭后，site.js 的 open()/shut() 通过切换 hidden 属性控制显示，滑出动画不受影响。 */
.drawer[hidden], .drawer-mask[hidden] { display: none; }
.drawer-top {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 18px 20px; border-bottom: 1px solid var(--line-2); flex: none;
}
.drawer-top .brand-txt b { font-size: 16px; }
.drawer-close { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: var(--ink-3); background: var(--bg-2); flex: none; }
.drawer-close:hover { color: var(--ink); }
.drawer-nav { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px 12px 20px; -webkit-overflow-scrolling: touch; }
.drawer-nav > ul > li { border-bottom: 1px solid var(--line-2); }
.drawer-nav > ul > li > a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 10px; font-size: 16.5px; font-weight: 600; color: var(--ink);
}
.drawer-nav > ul > li > a .ic { color: var(--ink-4); transition: transform .3s var(--ease); }
.drawer-nav > ul > li.has-sub.is-open > a .ic { transform: rotate(180deg); color: var(--p); }
.drawer-sub { display: none; padding: 0 0 12px 10px; }
.drawer-nav > ul > li.is-open .drawer-sub { display: block; }
.drawer-sub li a { display: block; padding: 11px 12px; font-size: 14.5px; color: var(--ink-3); border-left: 2px solid var(--line); }
.drawer-sub li a:active, .drawer-sub li a:hover { color: var(--p); border-color: var(--p); }
.drawer-foot { flex: none; padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-2); display: grid; gap: 10px; }
.drawer-btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border-radius: var(--radius-sm); font-weight: 600; font-size: 15.5px; }
.drawer-btn--ghost { border: 1.5px solid var(--line); color: var(--ink); }
.drawer-btn--solid { background: var(--p); color: #fff; }

/* ---------- 统计 ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 2vw, 28px); }
.stats--bordered { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(22px, 3vw, 36px); background: var(--white); }
.stat-num { display: flex; align-items: baseline; gap: 3px; white-space: nowrap; }
.stat-num b { font-size: clamp(28px, 4vw, 44px); font-weight: 800; color: var(--p); line-height: 1.1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stat-num i { font-style: normal; font-size: clamp(13px, 1.4vw, 16px); font-weight: 700; color: var(--ink-3); }
.stat-t { margin-top: 8px; font-size: 15px; font-weight: 600; color: var(--ink); }
.stat-d { margin-top: 4px; font-size: 12.5px; color: var(--ink-4); }
.section--dark .stat-num b { color: #fff; }
.section--dark .stat-num i, .section--dark .stat-d { color: rgba(255, 255, 255, .55); }
.section--dark .stat-t { color: rgba(255, 255, 255, .88); }

/* ---------- 优势卡片 ---------- */
.feats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 24px); }
.feat {
    position: relative; padding: clamp(24px, 2.6vw, 34px); border-radius: var(--radius-lg);
    background: var(--white); border: 1px solid var(--line-2);
    transition: transform .38s var(--ease), box-shadow .38s var(--ease), border-color .38s var(--ease);
    display: flex; flex-direction: column;
}
.feat:hover { transform: translateY(-6px); box-shadow: var(--shadow-m); border-color: transparent; }
.feat-ico {
    width: 54px; height: 54px; border-radius: var(--radius); display: grid; place-items: center;
    background: color-mix(in srgb, var(--p) 9%, transparent); color: var(--p); margin-bottom: 20px;
    transition: background .38s var(--ease), color .38s var(--ease), transform .38s var(--ease);
}
.feat:hover .feat-ico { background: var(--p); color: #fff; transform: scale(1.06) rotate(-4deg); }
.feat h3 { font-size: 17.5px; margin-bottom: 10px; }
.feat p { font-size: 14.5px; color: var(--ink-3); line-height: 1.8; flex: 1; }
.feat-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-size: 14px; font-weight: 600; color: var(--p); }
.feat-link .ic { transition: transform .28s var(--ease); }
.feat-link:hover .ic { transform: translateX(4px); }

/* ---------- 卡片 ---------- */
.cards { display: grid; gap: clamp(16px, 2vw, 26px); }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--4 { grid-template-columns: repeat(4, 1fr); }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
/* 横排列表：条目本身是整行（图左文右），容器必须是单列。
   这里同时声明容器查询上下文，让 prod-row 能按「自身可用宽度」决定是否改成上下堆叠 ——
   媒体查询只看视口宽度，做不到这件事（同一视口下不同版式的容器宽度并不相同）。 */
.cards--list { grid-template-columns: 1fr; container-type: inline-size; container-name: plist; }
.card {
    position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--white);
    border: 1px solid var(--line-2); display: flex; flex-direction: column;
    transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-m); border-color: transparent; }
.card-media { position: relative; aspect-ratio: 10 / 7; overflow: hidden; background: var(--bg-3); }
.card-media img, .card-media svg { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.card:hover .card-media img, .card:hover .card-media svg { transform: scale(1.06); }
.card-tag {
    position: absolute; top: 14px; left: 14px; padding: 5px 12px; border-radius: 100px;
    background: rgba(255, 255, 255, .94); color: var(--p); font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
    box-shadow: var(--shadow-s); backdrop-filter: blur(6px);
}
.card-date {
    position: absolute; top: 14px; left: 14px; width: 56px; padding: 8px 0; text-align: center;
    background: var(--p); color: #fff; border-radius: var(--radius-sm); box-shadow: var(--shadow-s);
}
.card-date b { display: block; font-size: 20px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.card-date i { display: block; font-style: normal; font-size: 10.5px; opacity: .82; letter-spacing: .04em; }
.card-body { padding: clamp(18px, 2vw, 26px); display: flex; flex-direction: column; flex: 1; }
.card-title { font-size: 17px; line-height: 1.5; margin-bottom: 9px; transition: color .3s var(--ease); }
.card:hover .card-title { color: var(--p); }
.card-sum { font-size: 14.5px; color: var(--ink-3); line-height: 1.78; flex: 1; }
.card-result { display: flex; align-items: center; gap: 6px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); font-size: 13.5px; font-weight: 700; color: var(--a); }
.card-meta { display: flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 12.5px; color: var(--ink-4); }
.card-cover { position: absolute; inset: 0; z-index: 2; }

/* 横向滑动（移动端） */
@media (max-width: 720px) {
    .cards--swipe {
        display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
        margin: 0 calc(-1 * clamp(16px, 4vw, 32px)); padding: 4px clamp(16px, 4vw, 32px) 16px;
        -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    .cards--swipe::-webkit-scrollbar { display: none; }
    .cards--swipe > .card { flex: 0 0 78%; scroll-snap-align: center; }
}

/* ---------- 流程步骤 ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 26px); }
.steps--dense { grid-template-columns: repeat(5, 1fr); }
.step { position: relative; padding-top: 30px; }
.step-n {
    display: block; font-size: 13px; font-weight: 800; letter-spacing: .1em;
    color: var(--p); margin-bottom: 12px; font-variant-numeric: tabular-nums;
}
.step::before {
    content: ""; position: absolute; top: 6px; left: 0; width: 100%; height: 1px;
    background: linear-gradient(90deg, var(--line), transparent);
}
.step::after {
    content: ""; position: absolute; top: 1px; left: 0; width: 11px; height: 11px;
    border-radius: 50%; background: var(--p); box-shadow: 0 0 0 4px color-mix(in srgb, var(--p) 14%, transparent);
}
.step h4 { font-size: 16.5px; margin-bottom: 8px; }
.step p { font-size: 14px; color: var(--ink-3); line-height: 1.78; }
.step-line { display: none; }

/* ---------- 常见问题 ---------- */
.faq { display: grid; gap: 12px; max-width: 940px; }
.faq-item {
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--white);
    overflow: hidden; transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.faq-item[open] { border-color: color-mix(in srgb, var(--p) 34%, var(--line)); box-shadow: var(--shadow-s); }
.faq-item summary {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 19px clamp(18px, 2.4vw, 26px); cursor: pointer; list-style: none;
    font-size: 16px; font-weight: 600; color: var(--ink); transition: color .25s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--p); }
.faq-item summary .ic { color: var(--ink-4); transition: transform .32s var(--ease); flex: none; }
.faq-item[open] summary .ic { transform: rotate(180deg); color: var(--p); }
.faq-a { padding: 0 clamp(18px, 2.4vw, 26px) 22px; }
.faq-a p { font-size: 14.8px; color: var(--ink-3); line-height: 1.9; }

/* ---------- 客户评价 ---------- */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 26px); }
.quote {
    margin: 0; padding: clamp(24px, 2.8vw, 36px); border-radius: var(--radius-lg);
    background: var(--white); border: 1px solid var(--line-2); position: relative;
    display: flex; flex-direction: column;
}
.quote-mark { color: color-mix(in srgb, var(--p) 22%, transparent); margin-bottom: 14px; }
.quote blockquote { margin: 0; font-size: 15.2px; line-height: 1.9; color: var(--ink-2); flex: 1; }
.quote figcaption { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line-2); }
.quote-av { flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; }
.quote-av svg { width: 100%; height: 100%; }
.quote figcaption b { display: block; font-size: 15px; color: var(--ink); }
.quote figcaption i { font-style: normal; font-size: 12.5px; color: var(--ink-4); }

/* ---------- 合作伙伴 ---------- */
.partners { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; }
.partner {
    display: grid; place-items: center; min-height: 92px; padding: 16px 12px;
    background: var(--white); transition: background .3s var(--ease);
}
.partner span {
    font-size: 14.5px; font-weight: 700; color: var(--ink-4); letter-spacing: .01em;
    text-align: center; transition: color .3s var(--ease);
}
.partner:hover { background: var(--bg-2); }
.partner:hover span { color: var(--p); }

/* ---------- 荣誉 ---------- */
.honors { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 2vw, 22px); }
.honor { display: flex; align-items: flex-start; gap: 16px; padding: clamp(20px, 2.4vw, 28px); border-radius: var(--radius-lg); background: var(--white); border: 1px solid var(--line-2); transition: transform .34s var(--ease), box-shadow .34s var(--ease); }
.honor:hover { transform: translateY(-4px); box-shadow: var(--shadow-m); }
.honor-ico { flex: none; width: 52px; height: 52px; border-radius: var(--radius); display: grid; place-items: center; background: color-mix(in srgb, var(--a) 12%, transparent); color: var(--a); }
.honor b { display: block; font-size: 16px; color: var(--ink); line-height: 1.5; }
.honor i { display: inline-block; font-style: normal; font-size: 12.5px; color: var(--ink-4); margin-top: 4px; }
.honor p { font-size: 13.8px; color: var(--ink-3); margin-top: 6px; line-height: 1.75; }

/* ---------- 表单 ---------- */
.cform { position: relative; }
.cform-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.fld { display: flex; flex-direction: column; gap: 8px; }
.fld--full { grid-column: 1 / -1; margin-top: 16px; }
.fld > span { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.fld > span i { color: #e03131; font-style: normal; }
.fld input, .fld textarea {
    width: 100%; padding: 13px 16px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
    background: var(--white); font-size: 16px; line-height: 1.6; resize: vertical;
    transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.fld input::placeholder, .fld textarea::placeholder { color: var(--ink-4); font-size: 15px; }
.fld input:focus, .fld textarea:focus {
    outline: none; border-color: var(--p);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--p) 11%, transparent);
}
.fld.is-error input, .fld.is-error textarea { border-color: #e03131; background: #fff6f6; }
.fld .fld-err { font-size: 12.5px; color: #e03131; }
.cform-foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 22px; }
.cform-note { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-4); }
.cform-msg { margin-top: 16px; font-size: 14.5px; }
.cform-msg.is-ok { color: #0b8a4b; font-weight: 600; }
.cform-msg.is-err { color: #e03131; font-weight: 600; }

/* ---------- 页脚 ---------- */
.ft { background: var(--ink); color: rgba(255, 255, 255, .62); margin-top: auto; }
.ft-main { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.4fr; gap: clamp(24px, 3.6vw, 56px); padding-top: clamp(48px, 6vw, 82px); padding-bottom: clamp(32px, 4vw, 52px); }
.ft-brand .brand--ft { margin-bottom: 18px; }
.brand--ft .brand-txt b { color: #fff; }
.brand--ft .brand-txt i { color: rgba(255, 255, 255, .5); }
.ft-desc { font-size: 14px; line-height: 1.9; color: rgba(255, 255, 255, .58); max-width: 380px; }
.ft-social { display: flex; gap: 10px; margin-top: 22px; }
.ft-social a {
    width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .78);
    transition: background .3s var(--ease), transform .3s var(--ease), color .3s var(--ease);
}
.ft-social a:hover { background: var(--a); color: #fff; transform: translateY(-3px); }
.ft-col h4 { font-size: 15px; color: #fff; margin-bottom: 20px; font-weight: 700; letter-spacing: .02em; }
.ft-col ul { display: grid; gap: 12px; }
.ft-col li { font-size: 14px; line-height: 1.7; display: flex; align-items: flex-start; gap: 9px; }
.ft-col li .ic { color: rgba(255, 255, 255, .38); margin-top: 3px; flex: none; }
.ft-col a:hover { color: #fff; }
.ft-bar { border-top: 1px solid rgba(255, 255, 255, .09); }
.ft-bar-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 20px; padding-bottom: 20px; font-size: 13px; color: rgba(255, 255, 255, .45); }
.ft-bar a { color: rgba(255, 255, 255, .55); }
.ft-bar a:hover { color: #fff; }

/* 外贸版式：页脚顶部的「交易条款带」。
   .ft-trade 的基础样式由 Sections::tradeCss() 提供，但那套配色是给浅底用的
   （--ink-4 / --line-2），直接放进深色页脚等于把字藏起来。
   这里用 .ft 前缀提高权重覆盖，不改基础层 —— 基础层还要在正文浅底上用。
   另外把 .ft-main 的上内边距收窄：条款带本身已经是一层留白，
   否则两条留白叠起来，页脚顶部会空出一大片。 */
.ft .ft-trade { padding-top: 26px; margin-top: 0; border-top: 0; gap: 10px 30px; }
.ft .ft-trade-l { color: rgba(255, 255, 255, .4); }
.ft .ft-trade i { color: rgba(255, 255, 255, .4); }
.ft .ft-trade b { color: rgba(255, 255, 255, .84); }
.ft-main--wm { padding-top: clamp(26px, 3.2vw, 40px); }

/* ---------- 悬浮操作条 ---------- */
.float-bar {
    position: fixed; right: 22px; bottom: 22px; z-index: 80;
    display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
    padding-bottom: env(safe-area-inset-bottom);
}
.fb-btn {
    display: flex; align-items: center; gap: 9px; height: 46px; padding: 0 18px;
    border-radius: 100px; background: var(--white); color: var(--ink); font-size: 14.5px; font-weight: 600;
    box-shadow: var(--shadow-m); transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
    border: 1px solid var(--line-2); white-space: nowrap;
}
.fb-btn:hover { transform: translateY(-3px); }
.fb-btn--main { background: var(--p); color: #fff; border-color: transparent; }
#toTop { opacity: 0; visibility: hidden; pointer-events: none; }
#toTop.is-show { opacity: 1; visibility: visible; pointer-events: auto; }

/* ---------- 电话号码提示卡（桌面端 tel: 兜底） ---------- */
/* tel: 是移动端协议，桌面浏览器点击后既不跳转也不报错，表现为「按钮坏了」。
   site.js 在桌面端拦截点击并弹出这张卡，号码可直接复制。 */
.tel-tip {
    position: absolute; z-index: 96;
    display: flex; flex-direction: column; gap: 2px;
    padding: 12px 16px 13px; min-width: 190px;
    background: var(--white); color: var(--ink);
    border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-l);
    opacity: 0; transform: translateY(-6px);
    transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.tel-tip.is-show { opacity: 1; transform: translateY(0); }
.tel-tip i { font-style: normal; font-size: 11.5px; color: var(--ink-4); letter-spacing: .06em; }
.tel-tip b { font-size: 19px; font-weight: 800; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.tel-tip-copy {
    margin-top: 7px; align-self: flex-start;
    padding: 5px 12px; border-radius: 100px; cursor: pointer;
    font-size: 12.5px; font-weight: 600; user-select: none;
    background: var(--bg-3); color: var(--ink-2);
    transition: background .2s var(--ease), color .2s var(--ease);
}
.tel-tip-copy:hover { background: var(--p); color: #fff; }
.tel-tip-copy.is-ok { background: var(--a); color: #fff; }

/* ---------- 内页头图 ---------- */
.page-hero { position: relative; overflow: hidden; isolation: isolate; }
.page-hero-bg { position: absolute; inset: 0; z-index: -1; }
.page-hero-bg img, .page-hero-bg svg { width: 100%; height: 100%; object-fit: cover; }
/* 这个元素同时带 .container，左右内边距由 .container 提供。
   绝不能用「padding: X 0」简写——简写会把左右一起写成 0，
   而它与 .container 特异性相同、又在文件里更靠后，于是静默抹掉页面左右留白，
   窄屏上标题就直接贴到屏幕边上。所以这里只写上下。 */
.page-hero-in { padding-top: clamp(56px, 8vw, 110px); padding-bottom: clamp(56px, 8vw, 110px); }
.page-hero h1 { font-size: clamp(26px, 4vw, 46px); color: #fff; letter-spacing: -.02em; max-width: 820px; }
.page-hero p { margin-top: 16px; font-size: clamp(14.5px, 1.6vw, 17px); color: rgba(255, 255, 255, .8); max-width: 680px; line-height: 1.85; }
.page-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(10, 14, 24, .72), rgba(10, 14, 24, .34)); z-index: -1; }

/* ---------- 动效 ---------- */
/* 渐进增强：仅当 JS 可用（html.js）时才隐藏，保证 JS 失效 / 搜索引擎抓取时内容始终可见 */
html.js [data-reveal] {
    opacity: 0; transform: translateY(26px);
    transition: opacity .72s var(--ease), transform .72s var(--ease);
    transition-delay: var(--d, 0ms);
    will-change: opacity, transform;
}
html.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
    html [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ---------- 通用栅格 ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.split--wide { grid-template-columns: 1.15fr 1fr; }
.split--narrow { grid-template-columns: 1fr 1.15fr; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 40px); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 30px); }
.flow > * + * { margin-top: 18px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 100px;
    background: var(--bg-3); color: var(--ink-3); font-size: 13px; font-weight: 600;
    white-space: nowrap; flex: none;
}
.chip--accent { background: color-mix(in srgb, var(--a) 14%, transparent); color: color-mix(in srgb, var(--a) 78%, #000); }
.divider { height: 1px; background: var(--line); }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 1100px) {
    .ft-main { grid-template-columns: 1fr 1fr; }
    .feats { grid-template-columns: repeat(2, 1fr); }
    .partners { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 980px) {
    :root { --head-h: 64px; }
    .nav, .hd-tel { display: none; }
    .burger { display: block; }
    .hd-act { margin-left: auto; }
    .cards--4 { grid-template-columns: repeat(2, 1fr); }
    .steps, .steps--dense { grid-template-columns: repeat(2, 1fr); }
    .quotes { grid-template-columns: 1fr; }
    .split, .split--wide, .split--narrow { grid-template-columns: 1fr; gap: clamp(28px, 5vw, 44px); }
    .honors { grid-template-columns: 1fr; }
}

@media (max-width: 780px) {
    body { font-size: 15.5px; }
    .section { padding: clamp(44px, 9vw, 64px) 0; }
    .cards--3, .cards--4, .cards--2 { grid-template-columns: 1fr; }
    .stats { grid-template-columns: repeat(2, 1fr); gap: 22px 16px; }
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .ft-main { grid-template-columns: 1fr; gap: 36px; padding-top: 48px; padding-bottom: 32px; }
    .ft-col ul { gap: 10px; }
    .ft-bar-in { flex-direction: column; align-items: flex-start; gap: 8px; }
    .partners { grid-template-columns: repeat(3, 1fr); }
    .partner { min-height: 78px; }
    .cform-grid { grid-template-columns: 1fr; }
    .float-bar {
        right: 0; left: 0; bottom: 0; flex-direction: row; gap: 0;
        border-top: 1px solid var(--line); background: var(--white);
        padding: 0 0 env(safe-area-inset-bottom);
        box-shadow: 0 -6px 24px rgba(20, 27, 45, .08);
    }
    .fb-btn {
        flex: 1; height: 56px; border-radius: 0; box-shadow: none; border: 0;
        justify-content: center; font-size: 15px;
    }
    .fb-btn:hover { transform: none; }
    .fb-btn--main { flex: 1.2; }
    #toTop { display: none; }
    /* 底部固定操作条是 fixed 的，不占文档流高度，页面最后一屏（含留言表单的提交按钮）
       会被它盖住。这里预留出等高的安全区；带刘海的机型再加 env() 的一段。
       取 57 而不是 56：横条自身还有 1px 上边框，只留 56 时页脚最后一像素仍会被压住。 */
    body { padding-bottom: calc(57px + env(safe-area-inset-bottom)); }
    .page-hero-in { padding-top: 48px; padding-bottom: 56px; }
    .sec-head { margin-bottom: 26px; }
    .step { padding-top: 26px; }
}

@media (max-width: 560px) {
    .stats--bordered { padding: 22px 16px; }
    .brand-txt b { font-size: 16px; }
    .hd .brand-txt { --bw: 150px; }   /* 仅顶栏收紧；页脚与抽屉保持各自宽度 */
    .brand-mark { width: 38px; height: 38px; }
    .hd-act .btn--primary { display: none; }
    .honor { padding: 18px; }
    .honor-ico { width: 44px; height: 44px; }
    .quote { padding: 22px; }
    .feats { grid-template-columns: 1fr; gap: 14px; }
    .feat { padding: 22px; }
    .btn--lg { height: 50px; padding: 0 24px; font-size: 15px; }
    .ft-social a { width: 38px; height: 38px; }
}

@media (max-width: 380px) {
    .stats { grid-template-columns: 1fr 1fr; }
    .stat-num b { font-size: 24px; }
    .partners { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   结构区块（版式共用结构，视觉由各版式覆盖）
   ============================================================ */

/* ---------- Hero 通用 ---------- */
.hero { position: relative; overflow: hidden; }
.hero-in { position: relative; z-index: 1; }
.hero-kicker {
    display: inline-flex; align-items: center; gap: 7px; padding: 7px 15px; border-radius: 100px;
    background: color-mix(in srgb, var(--p) 9%, transparent); color: var(--p);
    font-size: 13px; font-weight: 700; letter-spacing: .04em;
}
.hero-h1 { margin-top: 22px; font-size: clamp(28px, 4.2vw, 52px); line-height: 1.22; letter-spacing: -.025em; }
.hero-sub { margin-top: 20px; font-size: clamp(15px, 1.6vw, 17px); color: var(--ink-3); line-height: 1.9; max-width: 580px; }
.hero-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero .btn { pointer-events: auto; }
.hero-visual { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-l); }
.hero-visual img, .hero-visual > svg { width: 100%; height: 100%; object-fit: cover; }
.hero-badge {
    position: absolute; left: 18px; bottom: 18px; padding: 13px 19px; border-radius: var(--radius);
    background: rgba(255, 255, 255, .95); backdrop-filter: blur(10px); box-shadow: var(--shadow-m);
}
.hero-badge b { display: block; font-size: 25px; font-weight: 800; color: var(--p); line-height: 1.1; font-variant-numeric: tabular-nums; }
.hero-badge span { font-size: 12.5px; color: var(--ink-3); }
.hero-pts { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }
.hero-pts li { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: var(--ink-2); }
.hero-pts .ic { color: var(--a); }

/* hero: center */
.hero--center { text-align: center; padding: clamp(56px, 8vw, 118px) 0 0; }
.hero--center .hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero--center .hero-bg img, .hero--center .hero-bg svg { width: 100%; height: 100%; object-fit: cover; }
.hero--center::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 14, 24, .62), rgba(10, 14, 24, .78)); z-index: 0; }
.hero--center .hero-in { max-width: 880px; margin: 0 auto; padding-bottom: clamp(48px, 6vw, 82px); }
.hero--center .hero-kicker { background: rgba(255, 255, 255, .14); color: #fff; border: 1px solid rgba(255, 255, 255, .22); }
.hero--center .hero-h1 { color: #fff; }
.hero--center .hero-sub { color: rgba(255, 255, 255, .8); margin-left: auto; margin-right: auto; }
.hero--center .hero-acts { justify-content: center; }
.hero--center .hero-acts .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .38); }
.hero--center .hero-acts .btn--ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: #fff; }
.hero--center .hero-stats { position: relative; z-index: 1; padding-bottom: clamp(48px, 6vw, 76px); }
.hero--center .stats { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--radius-lg); padding: clamp(22px, 3vw, 34px); backdrop-filter: blur(10px); }
.hero--center .stat-num b, .hero--center .hero-h1 { color: #fff; }
.hero--center .stat-t { color: rgba(255, 255, 255, .9); }
.hero--center .stat-d { color: rgba(255, 255, 255, .5); }
.hero--center .stat-num i { color: var(--a); }
.hero-scroll { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); color: rgba(255, 255, 255, .55); animation: nudge 2.2s var(--ease) infinite; }
@keyframes nudge { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 7px); } }

/* hero: editorial */
.hero--editorial { padding: clamp(48px, 6vw, 92px) 0 clamp(48px, 6vw, 76px); }
.hero-ed-top { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(26px, 4vw, 64px); align-items: end; }
.hero-ed-meta .hero-sub { margin-top: 0; }
.hero-ed-media { margin-top: clamp(30px, 4vw, 52px); border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 21 / 8; }
.hero-ed-media img, .hero-ed-media svg { width: 100%; height: 100%; object-fit: cover; }
.hero-ed-foot { display: flex; flex-wrap: wrap; gap: 20px 44px; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }
.hero-ed-foot span { display: flex; align-items: baseline; gap: 10px; font-size: 14.5px; font-weight: 600; color: var(--ink-2); }
.hero-ed-foot b { font-size: 12.5px; font-weight: 800; color: var(--a); letter-spacing: .1em; }

/* hero: minimal */
.hero--minimal { padding: clamp(52px, 7vw, 100px) 0; }
.hm-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(24px, 4vw, 64px); align-items: end; }
.hm-right .hero-sub { margin-top: 0; }
.hm-line { height: 1px; background: var(--line); margin: clamp(30px, 4vw, 48px) 0; }
.hm-media { margin-top: clamp(30px, 4vw, 48px); border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 21 / 8; }
.hm-media img, .hm-media svg { width: 100%; height: 100%; object-fit: cover; }

/* hero: shop */
.hero--shop { padding-bottom: clamp(28px, 3vw, 44px); }
.shop-search { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 18px; border: 2px solid var(--p); border-radius: 100px; background: #fff; margin-bottom: 16px; }
.shop-search .ic { color: var(--p); flex: none; }
.shop-search input { flex: 1; border: 0; outline: none; font-size: 16px; background: transparent; min-width: 0; }
.shop-search .btn { border-radius: 100px; flex: none; }
.shop-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: none; }
.shop-tabs::-webkit-scrollbar { display: none; }
.shop-tabs .tab { flex: none; padding: 9px 18px; border-radius: 100px; font-size: 14.5px; font-weight: 600; color: var(--ink-3); background: var(--bg-2); transition: all .25s var(--ease); }
.shop-tabs .tab:hover, .shop-tabs .tab.is-on { background: var(--p); color: #fff; }
.shop-banner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 3vw, 48px); align-items: center; margin-top: clamp(20px, 2.6vw, 34px); padding: clamp(26px, 3.4vw, 46px); border-radius: var(--radius-lg); background: linear-gradient(115deg, color-mix(in srgb, var(--p) 9%, #fff), color-mix(in srgb, var(--a) 9%, #fff)); }
.shop-banner-img { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 11; box-shadow: var(--shadow-m); }
.shop-banner-img img, .shop-banner-img svg { width: 100%; height: 100%; object-fit: cover; }
.shop-promise { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 22px; background: var(--line-2); border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; }
.promise { display: flex; align-items: center; gap: 12px; padding: 18px; background: #fff; }
.promise .ic { color: var(--p); flex: none; }
.promise b { display: block; font-size: 14.5px; color: var(--ink); }
.promise span { font-size: 12.5px; color: var(--ink-4); }

/* ---------- 关于我们 ---------- */
.about-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 5vw, 68px); align-items: center; }
.about-vals { display: grid; gap: 11px; margin-top: 24px; }
.about-vals li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink-2); }
.about-vals .ic { color: var(--p); }
.about-acts { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.about-media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-m); aspect-ratio: 10 / 7; }
.about-media img, .about-media svg { width: 100%; height: 100%; object-fit: cover; }
.about-mini { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; margin-top: 18px; }
.mini { display: flex; align-items: center; gap: 12px; background: var(--bg); padding: 17px 18px; }
.mini .ic { color: var(--p); flex: none; }
.mini i { display: block; font-style: normal; font-size: 12px; color: var(--ink-4); }
.mini b { font-size: 14.5px; color: var(--ink); }

/* ---------- 品牌背书 ---------- */
.band-trust { border-bottom: 1px solid var(--line-2); }
.trust-title { text-align: center; font-size: 13.5px; color: var(--ink-4); letter-spacing: .1em; margin-bottom: 26px; }

/* ---------- CTA ---------- */
.cta-box {
    display: flex; align-items: center; justify-content: space-between; gap: clamp(24px, 4vw, 56px); flex-wrap: wrap;
    padding: clamp(32px, 4.4vw, 56px); border-radius: var(--radius-lg);
    background: linear-gradient(115deg, color-mix(in srgb, var(--p) 96%, #000), color-mix(in srgb, var(--p) 62%, var(--a)));
    color: #fff; position: relative; overflow: hidden;
}
.cta-box::after { content: ""; position: absolute; right: -70px; top: -70px; width: 280px; height: 280px; border-radius: 50%; background: rgba(255, 255, 255, .09); }
.cta-txt h2 { font-size: clamp(21px, 2.6vw, 32px); color: #fff; max-width: 640px; }
.cta-txt p { margin-top: 12px; color: rgba(255, 255, 255, .82); font-size: 15px; max-width: 640px; line-height: 1.85; }
.cta-acts { display: flex; gap: 12px; flex-wrap: wrap; position: relative; z-index: 1; }
.cta-box .btn--primary { background: #fff; color: var(--p); box-shadow: none; }
.cta-box .btn--primary:hover { background: #fff; color: var(--p); }

/* ---------- 联系 ---------- */
.contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.contact-info { display: grid; gap: 14px; }
.cinfo { display: flex; gap: 15px; padding: 20px 22px; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--line-2); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.cinfo:hover { transform: translateX(4px); box-shadow: var(--shadow-s); }
.cinfo .ic { color: var(--p); flex: none; margin-top: 2px; }
.cinfo i { display: block; font-style: normal; font-size: 12.5px; color: var(--ink-4); margin-bottom: 2px; }
.cinfo b { font-size: 15.5px; color: var(--ink); line-height: 1.6; }
.cinfo-social { display: flex; gap: 10px; margin-top: 6px; }
.cinfo-social a { width: 42px; height: 42px; border-radius: var(--radius); display: grid; place-items: center; background: var(--bg-2); color: var(--ink-3); }
.cinfo-social a:hover { background: var(--p); color: #fff; }
.contact-form { background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 38px); box-shadow: var(--shadow-s); }
.cf-title { font-size: 21px; }
.cf-sub { margin: 6px 0 22px; font-size: 14px; color: var(--ink-3); }

/* ---------- 产品横排 ---------- */
/* 用 minmax(0, …) 而不是固定 300px / 1fr：
   ① 图片列在窄容器里可以收窄，不会把文字列挤没；
   ② 文字列用 minmax(0,1fr)，避免「自动最小尺寸」把长英文/数字顶出去造成横向溢出。 */
.prod-row { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 26px; background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 20px; transition: box-shadow .34s var(--ease), transform .34s var(--ease); }
.prod-row:hover { box-shadow: var(--shadow-m); transform: translateY(-3px); }
.prod-row-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-3); }
.prod-row-media img, .prod-row-media svg { width: 100%; height: 100%; object-fit: cover; }
.prod-row-body { padding: 26px 26px 26px 0; }
.prod-row-body h3 { font-size: 19px; margin: 10px 0 8px; }
.prod-row-body p { font-size: 14.6px; color: var(--ink-3); line-height: 1.85; }
/* 容器自身宽度小于 640px 时改为上下堆叠（媒体查询无法覆盖「宽视口 + 窄容器」）。
   这里刻意写成 .cards--list 的后代选择器（特异性 0,2,0）：版式 CSS 是在 site.css 之后
   用 <style> 注入的，若用单类选择器(0,1,0)会被版式里同属性的规则盖掉，窄容器堆叠就失效了。 */
@container plist (max-width: 640px) {
    .cards--list .prod-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .cards--list .prod-row-media { aspect-ratio: 16 / 9; }
    .cards--list .prod-row-body { padding: 22px; }
}
.prod-row-pts { display: flex; gap: 18px; flex-wrap: wrap; margin: 14px 0 4px; }
.prod-row-pts li { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ink-2); }
.prod-row-pts .ic { color: var(--a); }
.band-more { text-align: center; margin-top: 34px; }

/* ---------- FAQ 栅格 ---------- */
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 4vw, 60px); align-items: start; }

/* ---------- 案例行 ---------- */
.cases-list { display: grid; gap: 26px; }
.case-row { display: grid; grid-template-columns: 1.1fr 1fr; border-radius: var(--radius-lg); overflow: hidden; background: var(--bg); border: 1px solid var(--line-2); }
.case-row.is-even { grid-template-columns: 1fr 1.1fr; direction: rtl; }
.case-row.is-even > * { direction: ltr; }
.case-row-media { aspect-ratio: 16 / 11; overflow: hidden; }
.case-row-media img, .case-row-media svg { width: 100%; height: 100%; object-fit: cover; }
.case-row-body { padding: clamp(26px, 3.4vw, 46px); display: flex; flex-direction: column; justify-content: center; }
.case-row-body h3 { font-size: clamp(19px, 2.1vw, 25px); margin: 12px 0; }
.case-row-body p { font-size: 15px; color: var(--ink-3); line-height: 1.9; }
.case-result { display: flex; align-items: center; gap: 9px; margin-top: 18px; padding: 13px 18px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--a) 10%, transparent); color: color-mix(in srgb, var(--a) 74%, #000); font-size: 15px; }
.case-result b { font-weight: 800; }

/* ---------- 文化 / 使命愿景 ---------- */
.cult { background: var(--bg); border-radius: var(--radius); padding: 28px 24px; border: 1px solid var(--line-2); transition: transform .34s var(--ease), box-shadow .34s var(--ease); }
.cult:hover { transform: translateY(-4px); box-shadow: var(--shadow-m); }
.cult-n { font-size: 13px; font-weight: 800; color: var(--a); letter-spacing: .12em; }
.cult h3 { font-size: 17px; margin: 10px 0 8px; }
.cult p { font-size: 14px; color: var(--ink-3); line-height: 1.8; }
.mv { background: var(--bg); border-radius: var(--radius-lg); padding: clamp(28px, 3.4vw, 44px); border: 1px solid var(--line-2); }
.mv-ico { width: 54px; height: 54px; border-radius: var(--radius); display: grid; place-items: center; background: color-mix(in srgb, var(--p) 9%, transparent); color: var(--p); margin-bottom: 18px; }
.mv h3 { font-size: 19px; margin-bottom: 10px; }
.mv p { font-size: 15px; color: var(--ink-3); line-height: 1.9; }

/* ---------- 时间轴 ---------- */
.timeline { max-width: 880px; margin: 0 auto; position: relative; padding-left: 28px; }
.timeline::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, var(--p), var(--a)); border-radius: 2px; }
.tl-item { position: relative; padding: 0 0 34px 22px; }
.tl-item::before { content: ""; position: absolute; left: -28px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 3px solid var(--p); }
.tl-year { display: inline-block; font-size: 15px; font-weight: 800; color: var(--p); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.tl-body h4 { font-size: 17px; margin: 6px 0; }
.tl-body p { font-size: 14.6px; color: var(--ink-3); line-height: 1.85; }

/* ---------- 资料下载 ---------- */
.dl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.dl { display: flex; align-items: center; gap: 16px; padding: 22px 24px; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--line-2); transition: all .3s var(--ease); }
.dl:hover { border-color: var(--p); transform: translateY(-3px); box-shadow: var(--shadow-s); }
.dl-ico { flex: none; width: 48px; height: 48px; border-radius: var(--radius); display: grid; place-items: center; background: color-mix(in srgb, var(--p) 9%, transparent); color: var(--p); }
.dl > div { flex: 1; }
.dl b { display: block; font-size: 15.5px; color: var(--ink); }
.dl span { font-size: 13px; color: var(--ink-4); }
.dl > .ic { color: var(--ink-4); }
.dl:hover > .ic { color: var(--p); }

/* ---------- 新闻 ---------- */
.news-feature { display: grid; grid-template-columns: 1.15fr 1fr; border-radius: var(--radius-lg); overflow: hidden; background: var(--bg); border: 1px solid var(--line-2); }
.news-feature-media { aspect-ratio: 16 / 10; overflow: hidden; }
.news-feature-media img, .news-feature-media svg { width: 100%; height: 100%; object-fit: cover; }
.news-feature-body { padding: clamp(26px, 3.4vw, 46px); display: flex; flex-direction: column; justify-content: center; }
.news-feature-body h2 { font-size: clamp(19px, 2.2vw, 26px); margin: 12px 0; line-height: 1.45; }
.news-feature-body p { font-size: 15px; color: var(--ink-3); line-height: 1.9; }

/* ---------- 结构区块响应式 ---------- */
@media (max-width: 1080px) {
    .shop-promise { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
    .about-grid, .contact-grid, .faq-grid, .case-row, .case-row.is-even,
    .news-feature, .hero-ed-top, .hm-grid, .shop-banner { grid-template-columns: 1fr; }
    .case-row.is-even { direction: ltr; }
    .prod-row { grid-template-columns: 1fr; gap: 0; }
    .prod-row-body { padding: 22px; }
    .hero--center .hero-in { padding-bottom: 40px; }
}
@media (max-width: 720px) {
    .hero-ed-media, .hm-media { aspect-ratio: 16 / 10; }
    .hero--center .stats { padding: 20px 16px; }
    .cta-box { flex-direction: column; align-items: flex-start; text-align: left; }
    .cta-acts { width: 100%; }
    .cta-acts .btn { flex: 1; }
    .contact-form { padding: 22px 18px; }
}
@media (max-width: 560px) {
    .about-mini { grid-template-columns: 1fr; }
    .hero-pts { gap: 9px 16px; }
    .dl-grid, .shop-promise { grid-template-columns: 1fr; }
    .timeline { padding-left: 22px; }
    .shop-search { padding-left: 14px; }
    .shop-search .btn span { display: none; }
}

/* ---------- 打印 ---------- */
@media print {
    .hd, .float-bar, .drawer, .drawer-mask, .tel-tip { display: none !important; }
    body { padding: 0; }
    .section { padding: 24px 0; }
}