/* ============================================================
   Dayun Links · 前台主样式（手写，零构建、零 CDN、零外部字体）
   ------------------------------------------------------------
   设计方向：工业精密 + 温和可亲 + 国际大厂感
     深墨蓝 / 深靛主色（精密制造、可信赖）
     精炼青绿 · 冰蓝（技术信号）
     黄铜 / 精炼琥珀（CTA，替代廉价促销橙）
     分层冷调中性色阶

   全部使用 CSS 逻辑属性（margin-inline / padding-inline / inset-inline-*
   / border-inline-*），RTL（阿拉伯语）自动镜像，不维护两套样式表。

   顺序：令牌 → reset → 多语言排版层 → 工具类 → 按钮 → 布局组件
        → 页面组件 → 响应式 → RTL → 打印

   ⚠ 令牌契约：public/assets/css/admin.css 直接消费本文件的
     --c-bg / --c-primary-dark / --c-text / --c-border / --c-primary
     --c-muted / --c-warn / --radius-card / --shadow-card / --font-sans
     等令牌。**只能新增令牌，不得删除或改名**，否则后台会失去配色。
   ============================================================ */

/* ============================================================
   1. 设计令牌
   ============================================================ */
:root{
  /* ---- 主色：深墨蓝（工业精密、可信赖） ---- */
  --c-primary:#0A2540;            /* 不变：白字 15.54:1 */
  --c-primary-dark:#061729;       /* 不变：白字 18.07:1，active / 页脚 / 遮罩最深端 */
  --c-primary-600:#16456E;        /* 提亮 8%：与 base 拉开可辨的 0.038 亮度差，hover 才有"被点亮"手感 */
  --c-primary-050:#EDF2F8;        /* 加深 1 档：原来与 #FFF 只差 0.04，导航 hover 底 / badge 底看不出有底 */
  --c-primary-100:#DCE6F1;        /* 卡片 hover / 时间轴连接线的第二档浅色 */

  /* ---- 技术信号色：仪器青 / 冰蓝（190° 是信号·洁净·医疗的通用色相） ---- */
  --c-accent:#0F6E80;             /* 白底 5.89:1（原 5.35 余量偏薄） */
  --c-accent-dark:#0A5666;        /* hover 文字，白底 8.28:1 */
  --c-accent-050:#E7F1F4;         /* 去绿 4°：原色偏绿，与陶土色同框会撞成"医院绿" */
  --c-accent-glow:#8AD9E9;        /* 深色底冰蓝文字 / 轮播指示器，#071C31 上 10.81:1 */

  /* ---- 温润：陶土暖沙（§1 判断 2 —— 温度只放在图标底 / 时间轴 / 卡片顶条三处小面积上） ----
     hsl(23°) 低饱和 + 中明度：在 navy 边上读作"材料 / 陶 / 织物"，不是婴儿粉也不是促销橙。
     饱和度 41% 是刻意压的 —— 再高 15 个点就变成"双十一"。 */
  --c-warm:#B0714A;               /* 只做图形：白底 3.96:1 / 暖沙底 3.54:1，均达 1.4.11 的 3:1 */
  --c-warm-deep:#8A5537;          /* 暖调文字：白底 6.11:1 */
  --c-warm-050:#FAF1E8;           /* 暖调浅底：与 #FFF 差 0.089 亮度 */
  --c-warm-100:#F0DCC8;           /* 暖调描边 / 分隔线（装饰，不参与 1.4.11） */

  /* ---- CTA：精炼黄铜（全站唯一琥珀；38° 金色相 + 61% 饱和是"抛光黄铜"而非"警示黄"的临界值） ----
     ★ 实心 CTA 一律配 --c-cta-ink 深墨字：白字在 #C08A2E 上只有 2.87:1，永远不可接受。
       浅色底上的琥珀**文字**用 --c-cta-deep（5.69:1）。二者比例由 tools/contrast_check.py 实测。 */
  --c-cta:#C08A2E;
  --c-cta-ink:#1A1206;            /* 不变：配 #C08A2E 6.10:1 */
  --c-cta-hover:#CF9839;          /* ★ 方向反转：hover 由"变暗"改为"变亮"+"上抬"+"内高光" → 7.24:1 */
  --c-cta-active:#B07F28;         /* 按下态 5.22:1 —— 这是把它卡在这里而不是更深的唯一原因 */
  --c-cta-deep:#8A5E14;           /* 不变：浅底琥珀文字 */

  /* WhatsApp 深绿：原 #25D366 上白字仅 1.98:1（不达标），改为深林绿 5.40:1 */
  --c-wa:#177A3D;

  /* ---- 语义色 ---- */
  --c-ok:#15803D;
  --c-warn:#B45309;               /* ⚠ 名字必须保留：admin.css 直接消费 */
  --c-danger:#B91C1C;
  --c-info:#1D4ED8;

  /* ---- 中性色阶（冷调，分层清晰） ---- */
  --c-bg:#EFF2F6;                 /* ★ 本次最重要的改值：白卡片在原 #F4F6F9 上只有 1.083:1，根本浮不起来 */
  --c-bg-alt:#E4EAF1;             /* 交替 section，比 body 更深一档 */
  --c-surface:#FFFFFF;
  --c-surface-alt:#FAFBFD;
  --c-surface-warm:#FDFAF5;       /* 卡片内小面积暖底（图片占位 / MOQ 卡）。★ 不用它铺满页面 */
  --c-text:#131C27;               /* 不变：白底 17.17:1 */
  --c-text-soft:#3C4A5A;          /* 不变：9.05:1 */
  --c-muted:#54606F;              /* 不变：白底 6.40:1 / 交替底 5.29:1 */
  --c-muted-inv:#C9D6E4;          /* 深色底上的次要文字，深底 12.24:1 */
  --c-border:#D8E1EB;             /* 装饰性描边，加深 2 档让卡片轮廓不依赖阴影 */
  --c-border-strong:#78889B;      /* 交互控件描边：白底 3.62:1 / 页面底 3.23:1（原 3.30 余量只有 0.3） */

  /* ---- 圆角（令牌名保留：--radius-card 被 admin.css 消费，改值后后台卡片同步收 2px，预期内） ---- */
  --radius-card:12px;
  --radius-btn:8px;
  --radius-img:12px;
  --radius-sm:6px;
  --radius-pill:999px;

  /* ---- 层次化低透明度阴影（冷调 navy，不用纯灰 + 带负 spread 做柔和落层） ---- */
  --shadow-xs:0 1px 2px rgba(10,37,64,.06);
  --shadow-card:0 1px 2px rgba(10,37,64,.05),
                0 6px 14px -4px rgba(10,37,64,.09),
                0 18px 36px -18px rgba(10,37,64,.12);
  --shadow-hover:0 2px 4px rgba(10,37,64,.06),
                 0 12px 24px -8px rgba(10,37,64,.13),
                 0 32px 56px -24px rgba(10,37,64,.18);
  --shadow-header:0 1px 0 rgba(10,37,64,.06),
                  0 8px 24px -10px rgba(10,37,64,.18);
  --shadow-pop:0 4px 8px -2px rgba(10,37,64,.10),
               0 16px 36px -12px rgba(10,37,64,.22);
  /* ★ 只留给深色卡片：原值 rgba(255,255,255,.65) 是"卡片顶部高光"，但白卡片上的白高光等于零。
       卡片的"浮起"改由加深的页面底 + 描边 + 阴影三者共同承担（§2.1）。 */
  --ring-inset:inset 0 1px 0 rgba(255,255,255,.10);
  --ring-focus:0 0 0 3px rgba(15,110,128,.28);        /* focus 柔光圈 */

  /* ---- 布局 ---- */
  --container:1240px;             /* 原 1200 → 1240：1280–1535 区间导航余量 +44px（§7.2） */
  --gutter:24px;
  /* sticky header 高度：**全断点统一 104px**。
     ≤767 隐藏 .topbar-text 那一行之后，移动端实测 131px → 104px，首屏多出 56px（§9.3 #14 方案 A）。
     锚点 scroll-margin-top 依赖它 —— 改这个值之前先跑到流量池里量一遍。 */
  --header-h:104px;

  /* Hero 轮播高度：用 clamp 锁死，**不依赖图片加载**，因此不会 CLS（§8.2） */
  --hero-h:clamp(460px,52vh,560px);
  --hero-h-sm:clamp(480px,84vh,600px);
  --dur-slide:700ms;              /* 轮播切换时长：< 500ms 显得跳，> 900ms 点击后等待感明显 */
  --ease-slide:cubic-bezier(.4,0,.2,1);

  /* ---- 流体排版（320px → 1920px） · 见 design-spec §3.2 ---- */
  /* ★ 上限 3.25rem(52px) → 3.125rem(50px)（2026-10-25 实测改值，别凭印象调回去）。
       原因：en H1 第 2 行 `Manufacturer & Factory in China` 在 52px 下实测 842.5px，
       而 .hero-inner 920px 减左右 padding 后内容盒只有 872px —— 余量 29.5px ≈ 3.4%。
       但 --font-sans 是**纯系统字体栈**：Arial / Helvetica / Liberation Sans / 思源黑体
       之间的字宽差异实测能到 2–5%，3.4% 的余量小于字体差异本身，
       换一台机器/换一个系统就可能把 2 行翻成 3 行。
       降到 50px 后第 2 行约 810px，余量约 62px（≈7.1%），大于字体差异上限。
       视觉代价：首屏 H1 小 2px，52px 与 50px 在首屏几乎看不出差异，压场感不减。
     ★ 移动端不受影响：375px 下 clamp 走的是中段（1.05rem + 3.4vw ≈ 29.55px），
       远未触到上限，所以 375 档的行数与改前一致。 */
  --fs-hero-title:clamp(1.75rem,1.05rem + 3.4vw,3.125rem);     /* 28 → 50px · 700 · -0.01em */
  --fs-page-title:clamp(1.5rem,1.05rem + 2.2vw,2.5rem);        /* 24 → 40px（H1 上限由 37.6 提到 40） */
  /* ★ 下限 1.4rem(22.4px) → 1.65rem(26.4px)（§3.2 P1）：
       ① 22.4px 在 375px 屏上只比 16px 正文大 1.40×，长滚动页里各区块分不开，26.4px = 1.65× 才立得住；
       ② 它直接决定首页 4 处 eyebrow 能否成立 —— H2 随断点缩小而 eyebrow 恒 13px 不缩，
          移动端是 eyebrow/H2 比值最差的断点。

     ★ 实测口径（375px / 10 语 × 4 区块 = 40 条，用 Range API 量**文字**宽而非块盒宽 ——
       块盒永远等于容器宽，量出来全是 1.00，是假的）：
         改前 1.4rem：超 0.70 判定线 28 条，其中超 0.85 的 16 条（最差 ru 业务 1.45）
         改后 1.65rem：超 0.70 的 7 条，其中超 0.85 的 4 条
         单改这一条只降一半，剩下 4 条由下面 .section-eyebrow 的字距/大写化那条接着降。 */
  --fs-section-title:clamp(1.65rem,1.08rem + 1.5vw,2rem);      /* 26.4 → 32px */
  --fs-card-title:clamp(1.15rem,1.05rem + .5vw,1.35rem);       /* 18.4 → 21.6px */
  --fs-h4:clamp(1.05rem,1rem + .25vw,1.15rem);                 /* 16.8 → 18.4px */
  --fs-hero-sub:clamp(1rem,.95rem + .5vw,1.25rem);             /* 16 → 20px */
  --fs-lead:clamp(1rem,.97rem + .35vw,1.125rem);               /* 16 → 18px */
  --fs-stat:clamp(1.5rem,1.1rem + 1.8vw,2.25rem);              /* 24 → 36px · tabular-nums */
  --fs-stat-xl:clamp(1.55rem,1.1rem + 2.1vw,2.25rem);
  --fs-panel-title:clamp(1.25rem,1.05rem + 1.1vw,1.65rem);
  --fs-block-title:clamp(1.15rem,1.02rem + .78vw,1.45rem);
  --fs-product-title:clamp(1.3rem,1.06rem + 1.5vw,2rem);
  --fs-sub:.875rem;                                            /* 辅助 caption 14px */
  /* 默认标题级别（未被 .hero-title / .page-title 覆盖时的兜底，取值对齐上面的语义令牌） */
  --fs-h1:clamp(1.5rem,1.05rem + 2.2vw,2.5rem);
  --fs-h2:clamp(1.65rem,1.08rem + 1.5vw,2rem);   /* 与 --fs-section-title 同步，别只改一个 */
  --fs-h3:clamp(1.15rem,1.05rem + .5vw,1.35rem);

  /* ---- 字体栈（纯系统字体，零 CDN / 零外部字体） ----
     补入中日韩系统字体，避免 CJK 回落到字形不匹配的后备。 */
  --font-sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,
              "PingFang SC","Hiragino Sans GB","Microsoft YaHei",
              "Noto Sans SC","Noto Sans JP","Noto Sans KR","Malgun Gothic",sans-serif;
  --font-ar:"Segoe UI",Tahoma,"Noto Sans Arabic","Dubai",Arial,sans-serif;
}

/* ============================================================
   2. Reset
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-gutter:stable}
body{margin:0;font-family:var(--font-sans);color:var(--c-text);background:var(--c-bg);
     font-size:16px;line-height:1.7;            /* §3.2：1.65 → 1.7（CJK 覆盖见 3.3 节） */
     /* ★ 中文/德/俄长词兜底：任何单词都不能撑破容器 —— 这是"重叠"投诉的根因 */
     overflow-wrap:break-word;overflow-x:hidden}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--c-primary);text-decoration:none}
/* ★ 全站链接 hover 用技术色而不是琥珀 —— 琥珀是 CTA 专属，链接抢色会稀释转化按钮（§5.1 #29） */
a:hover{color:var(--c-accent-dark)}
/* ★ 正文内的链接必须保留下划线：WCAG 1.4.1「不靠颜色单独表意」的落地动作。
     有独立视觉容器承载的形态（导航 / 卡片 / 按钮 / 面包屑 / 分页 / 表格）刻意不加。 */
.rich-text a,.page-desc a,.lead a,.business-desc a,.why-desc a,.qc-card p a,.team-card p a,
.news-excerpt a,.product-summary a,.about-intro p a,.form-privacy a,.footer-intro a,
.cert-empty a,.section-sub a,.alert a{
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
/* 行高随字号递减 + 大字放宽字距（§3.2 / §3.3）—— 这是"精密感"的来源之一 */
h1,h2,h3,h4{margin:0 0 .6em;color:var(--c-primary)}
h1{font-size:var(--fs-h1);line-height:1.18;letter-spacing:-.01em}
h2{font-size:var(--fs-h2);line-height:1.22;letter-spacing:-.005em}
h3{font-size:var(--fs-h3);line-height:1.35}
h4{font-size:var(--fs-h4);line-height:1.4}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-inline-start:1.4em}
hr{border:0;border-top:1px solid var(--c-border);margin:24px 0}
table{border-collapse:collapse;width:100%}
th,td{border:1px solid var(--c-border);padding:10px 12px;text-align:start;
      /* ★ 表格单元格：德语长复合词不撑大列宽 */
      overflow-wrap:anywhere}
th{background:var(--c-bg);font-weight:600}
button{font:inherit}

/* ---- 统一焦点态（保留原 .form-input:focus 之外，全站交互元素补齐） ---- */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--c-accent);outline-offset:2px}
:where(.topbar a,.site-footer a,.hero a,.cta-bar a,.mobile-cta a,[data-toggle]):focus-visible{
  outline-color:var(--c-accent-glow)}

/* ---- 锚点跳转偏移：修正被 sticky header 盖住 ---- */
[id]{scroll-margin-top:calc(var(--header-h) + 12px)}
h2[id],h3[id],section[id]{scroll-margin-top:calc(var(--header-h) + 20px)}

/* ============================================================
   3. 多语言排版层（i18n typography）
   ------------------------------------------------------------
   ★ 一律用 :lang() 伪类而不是 [lang="xx"] 属性选择器：
     本项目中文输出 lang="zh-CN"，[lang="zh"] 匹配不到，:lang(zh) 可以。
   ============================================================ */

/* 3.1 标题 / 正文的现代断行（老浏览器自动忽略，无害） */
h1,h2,h3,h4,.hero-title,.section-title,.page-title,.product-title,.block-title,
.cta-panel-title,.trust-value,.lead-value,.moq-card-value,.product-card-title,
.news-title,.footer-title,.business-title,.why-title,.qc-title,.team-title,
.process-title,.timeline-title{text-wrap:balance}
p,li,dd,.product-card-desc,.news-excerpt,.rich-text,.card p,.fc-label,
.product-summary,.lead,.page-desc{text-wrap:pretty}

/* 3.2 有连字符词典的语言 → 自动断字
       依赖 <html lang> 正确输出（config/languages.php 已确认：de/es/fr/it/ru…） */
:lang(de),:lang(nl),:lang(ru),:lang(fr),:lang(it),:lang(es),:lang(pt),
:lang(pl),:lang(cs),:lang(sv),:lang(tr),:lang(el),:lang(da),:lang(nb),
:lang(fi),:lang(hu),:lang(ro),:lang(uk){
  -webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;
  hyphenate-limit-chars:6 3 3}
/* 德语/荷兰语/俄语超长复合词：宁可早断，不可重叠 */
:lang(de) h1,:lang(de) h2,:lang(de) h3,:lang(de) .hero-title,
:lang(ru) h1,:lang(ru) h2,:lang(ru) h3,:lang(nl) h1,:lang(nl) h2{
  hyphens:manual;overflow-wrap:break-word}

/* 3.3 CJK 专项 */
:lang(zh),:lang(ja),:lang(ko){
  line-break:strict;                /* 中文标点不挤压、不出现在行首 */
  overflow-wrap:break-word;
  letter-spacing:.01em}
:lang(zh) body,:lang(zh){line-height:1.75}
:lang(ja){line-height:1.9}          /* 假名 / 汉字混排需要更大行距 */
:lang(ko){word-break:keep-all}      /* 韩语按词断，不在词内断开 */
:lang(ja) h1,:lang(ja) h2,:lang(ja) h3,
:lang(zh) h1,:lang(zh) h2,:lang(zh) h3,
:lang(ko) h1,:lang(ko) h2,:lang(ko) h3{line-height:1.35;letter-spacing:.01em}
:lang(ja) .product-card-desc,:lang(ja) .news-excerpt,
:lang(ko) .product-card-desc,:lang(ko) .news-excerpt{line-break:loose}

/* 3.3b eyebrow 在 CJK / 阿语下不得加字距、不得大写化（§3.3）
       —— CJK 的 uppercase 是空操作，但 .08em 字距会在 13px 小字间插空隙，像排版事故；
          阿语严禁字距（会切断连写）。 */
:lang(zh) .section-eyebrow,
:lang(ja) .section-eyebrow,
:lang(ko) .section-eyebrow,
:lang(ar) .section-eyebrow{letter-spacing:0;text-transform:none}

/* 3.4 会参与布局计算的盒子：允许任意处断行，min-content 才能收缩 */
th,td,.product-meta dt,.product-meta dd,.chip,.badge,.pager-link,
.nav-item> a,.dropdown li a,.footer-links li,.footer-contact li,
.contact-list li,.form-label,.fc-label,.check-item,.timeline-year,
.cert-name,.cert-market,.gallery-thumbs,.checklist-item{
  overflow-wrap:anywhere}

/* ============================================================
   4. 工具类
   ============================================================ */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
/* §4.2：桌面 56px 是 SaaS 后台密度；制造厂官网的区块需要"呼吸"。按断点覆盖（22. 响应式）。 */
.section{padding-block:64px}
.section-alt{background:var(--c-bg-alt)}
/* ★ eyebrow 排印（§3.3 P1）：字距 .1em → .02em、去掉 uppercase。
   原因：现在的值是**短语型**（20–32 字符），而 .1em 字距按字符数累加 —— 26 字符就是 2.6em（34px），
   再叠 uppercase（拉丁小写→大写平均宽 27%），一条英文 eyebrow 会被撑到比 32px 的 H2 还宽，
   层级直接倒置。

   ★ 同上口径实测（375px / 40 条，Range API 量文字宽）：
       两条都不改（1.4rem + .1em + uppercase）：超 0.70 的 28 条，超 0.85 的 16 条
       两条都改（1.65rem + .02em + 无 uppercase）：超 0.70 的 7 条，超 0.85 的 4 条
     —— 两条是乘性关系，只改一条都收不到这个数。

   ★ 剩下的 4 条（en 业务 1.00 / fr 业务 1.02 / ru 业务 1.04 / it 产品 0.87）是**文案长度问题不是 CSS 问题**：
     它们的值本身就比同区块 H2 长（ru「OEM · ODM · Своя пресс-форма」30 字符）。
     继续调 CSS 会误伤其余 36 条，已上报 ui-designer / content-strategist 走文案截断。
   大写 + 宽字距只留给 ≤12 字符的单词型标签 —— 本项目现在没有这种值了，所以整体关掉。 */
.section-eyebrow{font-size:.8125rem;line-height:1.5;font-weight:600;
                 color:var(--c-accent);
                 letter-spacing:.02em;text-transform:none;margin-bottom:8px}
/* 区块标题 → 内容 24px（§4.3 内部节奏） */
.section-title{font-size:var(--fs-section-title);margin-bottom:24px}
.section-head{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;justify-content:space-between}
.section-sub{color:var(--c-muted);font-size:var(--fs-lead);max-width:70ch;margin:0}
.block{margin-top:40px}
.block-title{font-size:var(--fs-block-title);margin-bottom:16px}
.page-title{font-size:var(--fs-page-title);margin-bottom:12px}
.page-desc{max-width:70ch}
.lead{font-size:var(--fs-lead);color:var(--c-muted)}
.muted{color:var(--c-muted)}
.text-center{text-align:center}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-40{margin-top:40px}
.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}.mb-40{margin-bottom:40px}
.py-24{padding-block:24px}.py-48{padding-block:48px}

.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* ★ grid 子项默认 min-width:auto 会被长词撑破 —— 显式归零 */
.grid> *{min-width:0}
.flex{display:flex;gap:16px}
.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.justify-center{justify-content:center}

.skip-link{position:absolute;inset-inline-start:-9999px;top:0;background:var(--c-primary);
           color:#fff;padding:10px 16px;z-index:99;border-end-end-radius:var(--radius-sm)}
.skip-link:focus{inset-inline-start:0}

/* ============================================================
   5. 按钮
   ============================================================ */
/* 四种按钮共用：min-height 44px（移动端 48px），≥24px 命中区由 min-height + padding 保证 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
     min-height:44px;padding:12px 22px;border-radius:var(--radius-btn);border:1px solid transparent;
     font-size:1rem;font-weight:600;line-height:1.2;cursor:pointer;text-decoration:none;
     overflow-wrap:anywhere;
     transition:background-color .18s var(--ease-slide),color .18s var(--ease-slide),
                border-color .18s var(--ease-slide),
                box-shadow .18s var(--ease-slide),transform .18s var(--ease-slide)}
@media (max-width:767px){.btn{min-height:48px}}

/* ---- 主按钮：navy 实心 ---- */
.btn-primary{background:var(--c-primary);color:#fff;border-color:var(--c-primary);
             box-shadow:var(--shadow-xs)}
.btn-primary:hover{background:var(--c-primary-600);color:#fff;border-color:var(--c-primary-600);
                   box-shadow:var(--shadow-card);transform:translateY(-1px)}
.btn-primary:active{background:var(--c-primary-dark);color:#fff;border-color:var(--c-primary-dark);
                    transform:translateY(0);box-shadow:inset 0 2px 4px rgba(6,23,41,.35)}
.btn-primary[disabled],.btn-primary[disabled]:hover{background:var(--c-primary);opacity:.55;
                       transform:none;box-shadow:none;cursor:not-allowed}

/* ---- CTA：黄铜底 + 深墨字（6.10:1），比"白字橙底"高级且达标 ----
   ★ hover 变亮 + active 变暗 = "照亮 → 按下"两段式，这是黄铜质感的关键。
     内高光 inset 0 1px 0 rgba(255,255,255,.28) 是"抛光面"的来源，不能省（§5.1）。 */
.btn-cta{background:var(--c-cta);color:var(--c-cta-ink);border-color:var(--c-cta);
         box-shadow:var(--shadow-xs)}
.btn-cta:hover{background:var(--c-cta-hover);color:var(--c-cta-ink);border-color:var(--c-cta-hover);
               box-shadow:var(--shadow-card),inset 0 1px 0 rgba(255,255,255,.28);
               transform:translateY(-1px)}
.btn-cta:active{background:var(--c-cta-active);color:var(--c-cta-ink);border-color:var(--c-cta-active);
                transform:translateY(1px);box-shadow:inset 0 2px 4px rgba(26,18,6,.22)}
.btn-cta[disabled],.btn-cta[disabled]:hover{background:var(--c-cta);opacity:.55;
                   transform:none;box-shadow:none;cursor:not-allowed}

/* ---- 次按钮：hover 只「底色变浅 + 描边加深」，**不反白** ----
   ★ 改前 hover 是 background:var(--c-primary);color:#fff —— 整个反白后和 .btn-primary 长得一模一样，
     两个按钮的层级在 hover 瞬间塌缩。改后三个按钮的视觉重量恒定：琥珀 > 实心 > 描边（§5.1 #27）。 */
.btn-outline{background:transparent;color:var(--c-primary);border-color:var(--c-border-strong)}
.btn-outline:hover{background:var(--c-primary-050);color:var(--c-primary);border-color:var(--c-primary)}
.btn-outline:active{background:var(--c-primary-100);color:var(--c-primary);border-color:var(--c-primary)}

/* ---- 深色底上的次按钮（Hero / CTA 条 / 页脚）：hover 半透明白，不闪纯白块 ----
   ★ 改前 hover 是 #fff 实心 —— 在深色 Hero 上突然闪出一块纯白，既刺眼又盖住身后的轮播图（#28）。 */
.btn-outline-light{color:#fff;border-color:rgba(255,255,255,.60)}
.btn-outline-light:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#fff}
.btn-outline-light:active{background:rgba(255,255,255,.20);color:#fff;border-color:#fff}

/* ★ .btn-sm 保留但收紧到 36px —— design-spec §9.5 #31 原话是"删除"，
     但后台 180+ 个调用点（admin/**）全依赖它，删掉会让后台所有按钮膨胀到 44px。
     这里按该条自己的兜底方案处理：保留为非转化路径的紧凑按钮，min-height 36px（> 2.5.8 的 24px）。 */
.btn-sm{min-height:36px;padding:8px 12px;font-size:.85rem}
.btn-block{width:100%}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.6;cursor:not-allowed}
.text-link{font-weight:600;color:var(--c-accent)}
.text-link:hover{color:var(--c-accent-dark)}
.text-link .ic-arrow{display:inline-block;transition:transform .18s var(--ease-slide)}
.text-link:hover .ic-arrow{transform:translateX(3px)}
[dir="rtl"] .text-link:hover .ic-arrow{transform:translateX(3px) scaleX(-1)}

/* ============================================================
   6. 基础组件
   ============================================================ */
/* ★ 白卡片上去掉 --ring-inset：原值是白色高光，在白色卡片上等于零收益还多一层渲染。
     卡片的"浮起"改由加深后的页面底色（1.123:1）+ 描边 + 三层阴影共同承担（§2.1 / §5.3）。
   ★ hover 只动阴影 + 上抬 2px，**不动描边**：描边瞬间从 1.32:1 跳到 3.62:1 是廉价的 hover，
     层次提升应该靠"浮起来"而不是"描边加粗"（#21）。
   ★ padding 20px → 24px：20px 不在 4 基数刻度上（§4.1）。 */
.card{background:var(--c-surface);border:1px solid var(--c-border);
      border-radius:var(--radius-card);padding:24px;
      box-shadow:var(--shadow-card);
      transition:box-shadow .2s var(--ease-slide),transform .2s var(--ease-slide)}
.card:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px)}
.badge{display:inline-block;padding:2px 10px;border-radius:var(--radius-pill);
       font-size:.8rem;background:var(--c-primary-050);color:var(--c-primary);
       border:1px solid var(--c-border)}
.alert{padding:12px 16px;border-radius:var(--radius-btn);margin-block:16px;border:1px solid transparent}
.alert-ok{background:#ECFDF5;border-color:#A7F3D0;color:#065F46}
.alert-error{background:#FEF2F2;border-color:#FECACA;color:#991B1B}
.alert-warn{background:#FFFBEB;border-color:#FDE68A;color:#92400E}
.alert-info{background:#EFF6FF;border-color:#BFDBFE;color:#1E40AF}
.flash-wrap{padding-block:8px}
.empty-state{padding-block:48px;text-align:center}
.empty-title{margin-bottom:8px}

/* ============================================================
   7. 顶栏
   ============================================================ */
.site-header{position:sticky;top:0;z-index:40;background:var(--c-surface);
             border-bottom:1px solid var(--c-border);transition:box-shadow .2s ease}
.site-header.is-stuck{box-shadow:var(--shadow-header)}
.topbar{background:var(--c-primary);color:#fff;font-size:.85rem;
        background-image:linear-gradient(90deg,var(--c-primary),var(--c-primary-600))}
.topbar-inner{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;
              padding-block:6px}
.topbar-text{margin:0;opacity:.9;overflow-wrap:anywhere}
.topbar-links{display:flex;flex-wrap:wrap;gap:16px;list-style:none;margin:0;padding:0}
.topbar-links a{color:#fff;opacity:.9}
.topbar-links a:hover{color:var(--c-accent-glow);opacity:1}
.topbar-wa{font-weight:600}

.nav-inner{display:flex;align-items:center;gap:24px;justify-content:space-between;padding-block:12px}
.brand img{height:40px;width:auto}
.site-nav{margin-inline-start:auto}
/* ★ 顶栏菜单项之间的呼吸感（2026-10-26 用户反馈「字间距偏窄，所有语言都窄」）：
   原来 gap:4px + 每项 padding:12px，文字之间只有 28px；桌面全屏下德/俄/日等长词几乎连成一片。
   放宽到 12px（+ letter-spacing）→ 文字之间约 36px，中文四项（品质认证/新闻资讯…）也不再贴身。
   仅放宽 gap 不改 padding，命中区与 hover 底色宽度保持原样，不影响 44px 触控高度。 */
.nav-list{display:flex;align-items:center;gap:14px;list-style:none;margin:0;padding:0}
/* ★ min-height:44px —— 实测改前 39px（10px padding + 18px 行高），不达 2.5.5 / 2.5.8（#3）
   ★ white-space:nowrap **必须保留**（§7.4 第 1 条）：一旦允许换行，header 高度会随德语/俄语矩阵
     跳变，--header-h 立刻失效，全站锚点跳转全部错位。
   ★ 超长的最后防线是 max-width:22ch + ellipsis + HTML 上的 title 全称，**不是换行**。
   ★ text-overflow 对 flex 容器无效（子元素被块级化成 flex item），所以 header.php 把每条导航文案
.nav-item> a{display:inline-flex;align-items:center;gap:4px;padding:12px;
    min-height:44px;max-width:22ch;
    font-size:1rem;font-weight:600;letter-spacing:.015em;color:var(--c-text);background:none;border:0;cursor:pointer;
    border-radius:var(--radius-sm);white-space:nowrap;overflow:hidden;
    transition:color .16s var(--ease-slide),background-color .16s var(--ease-slide)}
.nav-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ★ 视觉同样由 aria-current 派生（与下拉 / 面包屑 / 分页同一套路）：
   .is-active 类和 aria-current 属性在 header.php 里由同一个三元表达式输出，
   理论上不会漂，但把属性也写进选择器，之后谁只改一半都不会静默失效。 */
.nav-item.is-active> a,
.nav-item> a[aria-current]{color:var(--c-primary);font-weight:700;
    /* ★ 当前项不能只靠颜色区分 —— 色觉障碍用户看不出来 navy 与 text 的差别。
         加 2px 下划线作为第二个非颜色线索（WCAG 1.4.1）。 */
    border-block-end:2px solid var(--c-accent)}
.nav-item> a:hover{color:var(--c-accent);background:var(--c-primary-050)}
/* ★ 下拉顶层 = 真链接 + 独立箭头按钮两个元素（§7.1.1），所以用 flex 把两者并排。
     改前整块是一个 <button>，JS 失效时下拉里的 9 个目标在桌面端全是死链。 */
.nav-item.has-dropdown{position:relative;display:flex;align-items:center}
.nav-item.has-dropdown> .nav-link{padding-inline-end:8px}
/* 箭头按钮：视觉只有 14×14，但命中区要 44 高（与整行同高）、28 宽 —— 它是独立可点目标，
   和前面的链接不是嵌套关系。 */
.nav-caret{display:inline-flex;align-items:center;justify-content:center;
           width:28px;height:44px;padding:0;flex:0 0 auto;
           background:none;border:0;border-radius:var(--radius-sm);cursor:pointer;
           color:var(--c-muted);
           transition:color .16s var(--ease-slide),background-color .16s var(--ease-slide)}
.nav-caret:hover{color:var(--c-accent);background:var(--c-primary-050)}
.nav-caret .ic-arrow{flex:0 0 auto;transition:transform .2s var(--ease-slide)}
.nav-caret[aria-expanded="true"] .ic-arrow{transform:rotate(180deg)}
/* ★ 开合双通道：hover / :focus-within 与 JS 点击叠加，不能只做点击。
     —— JS 未加载时悬停也能看到菜单；键盘 Tab 进箭头按钮时 :focus-within 生效。
     与 app.js 的 .is-open 叠加不冲突（两个条件任一为真就显示）。 */
.nav-item.has-dropdown:hover> .dropdown,
.nav-item.has-dropdown:focus-within> .dropdown{display:block}
/* ★ 下拉面板（§7.5）：min-width 260px 起，上限锁在视口内 ——
     改前 min-width:0 + width:max-content 会让"关于我们"在俄语下被压成一条窄条。 */
.dropdown{position:absolute;inset-inline-start:0;top:100%;
          min-width:260px;max-width:min(320px,calc(100vw - 32px));
          background:var(--c-surface);border:1px solid var(--c-border);
          border-radius:var(--radius-card);box-shadow:var(--shadow-pop);
          list-style:none;margin:0;padding:6px 0;display:none;z-index:50}
.dropdown.is-open{display:block}
.dropdown li a{display:flex;align-items:center;gap:10px;min-height:40px;
               padding-block:9px;padding-inline:18px;margin-inline:6px;border-radius:var(--radius-sm);
               color:var(--c-text);font-size:.95rem;font-weight:500;
               overflow-wrap:anywhere;
               transition:background-color .16s var(--ease-slide),color .16s var(--ease-slide)}
.dropdown li a:hover{background:var(--c-primary-050);color:var(--c-accent-dark)}
/* ★ 下拉内当前项的视觉表现**由 aria-current 属性派生**，不靠 .is-current 类（§7.1.2）。
   改前只有 .dropdown li.is-current a 这一条，而类只加在 Contact 那个 <li> 上 ——
   「全部产品」和 About 组标题两个 <li> 有 aria-current="true" 却没有任何视觉表现，
   读屏念得出「当前」，键盘用户和色觉障碍用户看不出来（WCAG 1.4.1 禁止只靠颜色传达）。
   用属性选择器后，类和属性不可能再各走各的：谁有 aria-current 谁就有表现。
   非颜色信号 = font-weight:700（字重，不是色相）+ 逻辑起点侧 3px 竖条。 */
.dropdown li.is-current a,
.dropdown li a[aria-current]{color:var(--c-primary);font-weight:700}
.dropdown li a[aria-current]{position:relative;
    box-shadow:inset 3px 0 0 var(--c-accent)}

/* ---- About 下拉的 3 组结构（§7.5）------------------------------- */
/* 组标题行：兼作指向 About 总览页的链接 */
.dropdown-group> a{font-weight:700;color:var(--c-primary);border-end-end-radius:0}
/* 分组分隔线（忌.Media 用 <hr>：列表里 hr 不是合法子项，用 li + role=separator） */
.dropdown-sep{height:1px;background:var(--c-border);margin:6px 12px;border:0;list-style:none}
/* 转化项 Contact：陶土色信封 + 暖沙底 hover，把它从"又一个链接"里拎出来 */
.dropdown-cta> a{color:var(--c-primary);font-weight:600}
.dropdown-cta-icon{flex:0 0 auto;color:var(--c-warm)}
.dropdown-cta> a:hover{background:var(--c-warm-050);color:var(--c-primary)}

.nav-actions{display:flex;align-items:center;gap:12px}
.lang-switch{position:relative}
/* ★ min-height:44px —— 实测改前 35px（#5） */
.lang-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
          padding:8px 12px;min-height:44px;min-width:58px;
          border:1px solid var(--c-border-strong);border-radius:var(--radius-btn);
          background:var(--c-surface);cursor:pointer;font-weight:700;color:var(--c-text);
          max-width:min(140px,40vw);overflow-wrap:anywhere}
.lang-btn:hover{border-color:var(--c-accent);color:var(--c-accent)}
/* ★ 语言按钮只显示两字母缩写（EN / ZH / DE …）—— 改前显示母语全称，
   「العربية」「Русский」在 1024–1279px 段把导航条挤到溢出。
   缩写后十语宽度恒定，min-width:58px 保证切换语言时按钮不跳动。 */
.lang-code{letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
/* 下拉项：左「缩写」右「本族名」两段（母语名是认出语言的唯一线索，不能省） */
.dropdown-lang .lang-code{flex:0 0 auto;min-width:2.2em;font-weight:700;
               color:var(--c-primary);opacity:.85}
.dropdown-lang .lang-name{flex:1 1 auto;min-width:0}
/* ★ 语言下拉贴导航栏末端（自动适配 LTR/RTL），不再向 inline-start 溢出视口 */
.dropdown-lang{inset-inline-start:auto;inset-inline-end:0;
               min-width:min(180px,calc(100vw - 2 * var(--gutter)));
               max-height:60vh;overflow:auto}
/* ★ 汉堡按钮 44×44 —— 改前 38px 高，而它是移动端最高频控件（#4） */
.nav-toggle{display:none;flex-direction:column;gap:4px;width:44px;height:44px;align-items:center;
            justify-content:center;background:none;border:1px solid var(--c-border-strong);
            border-radius:var(--radius-sm);cursor:pointer}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--c-primary);
                 transition:transform .2s var(--ease-slide),opacity .2s var(--ease-slide)}
/* 打开时三根线 → X：上下两根各旋转 ±45°、中间一根透明（§6 第 8 条）。
   用 [aria-expanded] 而不是额外 JS：existing app.js 已经在 toggle 这个属性。 */
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ============================================================
   8. Hero
   ============================================================ */
/* ============================================================
   8. Hero 多图轮播（design-spec §8）
   ------------------------------------------------------------
   ★ 图片必须是 <img> 而不是 CSS background-image，三个硬理由：
     ① LCP 元素只有 <img> 能被浏览器提前发现并 <link rel=preload>；
     ② 只有 <img> 有 alt（无名图片对读屏用户等于不存在）；
     ③ 改前 home.php 用内联 style="background-image:url(…)" 会把下面的
        background:linear-gradient 整条覆盖 —— 有图时渐变就没了，换 <img> 后这个 bug 自然消失。

   类名说明：本实现采用 team-lead 交付骨架里的 .hero-overlay / .hero-nav / .hero-toggle /
   .hero-dots 命名（对应规范 §8 的 .hero-scrim / .hero-arrow / .hero-playpause / .hero-dots），
   两者像素值完全一致，仅选择器命名不同。
   ============================================================ */

/* ---- 8.2 布局与防 CLS ----
   min-height 由 clamp 锁死，**不依赖图片加载** → 不会 CLS。
   isolation:isolate 给 z-index 建层，避免 Hero 的 z-index 泄漏到后面的 section。 */
.hero{position:relative;isolation:isolate;display:flex;align-items:center;overflow:hidden;
      min-height:var(--hero-h);padding-block:0;
      background:linear-gradient(135deg,var(--c-primary) 0%,var(--c-primary-600) 45%,
                                 var(--c-primary-dark) 100%);
      color:#fff}
.hero-slides{position:absolute;inset:0;z-index:0}
.hero-slide{position:absolute;inset:0;margin:0;opacity:0;
            transition:opacity var(--dur-slide) var(--ease-slide)}
.hero-slide.is-active{opacity:1}
/* ★ Ken Burns 只加 3% 的缓推（> 5% 会晃眼），且只跑在当前项上。
      用 animation 而不是 transform + transition：切换一次触发一次，回到静止状态不会倒放。 */
.hero-slide.is-active .hero-img{animation:hero-kenburns 9000ms linear forwards}
@keyframes hero-kenburns{from{transform:scale(1)}to{transform:scale(1.03)}}
/* <picture> 默认是 inline 盒子，不撑满会把 height:100% 的 <img> 算成 0 高 */
.hero-slide picture{display:block;width:100%;height:100%}
.hero-img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
/* 移动端用 3:4 竖版构图，兴趣点上移到画面上部 42% 处，避开底部文案区（§8.1） */
@media (max-width:767px){
  .hero-img{object-position:50% 42%}
}

/* ---- 8.3 遮罩渐变（本规范里最不能打折的一条）----
   ★ 改前是单层 .hero::after{background:rgba(6,23,41,.60)}：够黑但把整张工厂照片糊成一团，
     白做了轮播。两层渐变 = 左边能读字，右边能看图。
   ★ 实测最坏情况（图片纯白 #FFFFFF）：标题左侧 13.65:1 / 正文区 10.78:1 / 文字列最右 6.64:1。
     反例：单层 linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,.15)) 在最亮图上只有 4.22:1。 */
.hero-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(96deg,
      rgba(7,28,49,.88) 0%,
      rgba(7,28,49,.66) 40%,
      rgba(7,28,49,.34) 100%),
    linear-gradient(180deg,
      rgba(6,23,41,.30) 0%,
      rgba(6,23,41,.55) 100%)}
/* ≤767：竖向压，底部最重（按钮在那里） */
@media (max-width:767px){
  .hero-overlay{background:linear-gradient(180deg,
      rgba(7,28,49,.62) 0%, rgba(7,28,49,.85) 100%)}
}

/* ★ max-width 860px → 920px（2026-10-25 实测改值，别凭印象调回去）。
   原因：H1 里 `Manufacturer & Factory in China` 这半句实测 842px，
   而 860px 的盒减掉左右各 24px padding 后**内容盒只有 812px** —— 差 30px，
   就卡在这一口气上被挤成 3 行（实测 [652, 414, 413] @1440，右重左轻）。
   放宽到 920px 后内容盒 872px，842 ≤ 872，实测降到 2 行（[682.4, 842]）。

   为什么是 920 不是更大：再宽就只是让 H1 白占首屏横向空间，而 2 行已经是这个文案的行数下限。

   为什么用放大容器而不是砍文案：`& Factory` 是转化核心词（买家搜 "baby monitor factory"），
   为凑行数砍掉它是拿转化换排版。容器侧 60px 的代价远小于丢一个核心词。

   实测范围（真实 DOM，Range.getClientRects()）：
     en 54 字符：1440/1200/992/768 = 2 行，375 = 3 行，五档溢出 0
     de 44 字符：1440/1200/992/768 = 2 行，375 = 3 行，五档溢出 0
     ru / ar：五档 doc 与 H1 溢出均为 0
   ≤968px 时 max-width 不再生效（容器被视口限住），所以移动端完全不受影响。
   副作用已核：.hero-subtitle 仍受自己的 max-width:60ch 约束（704px，未跟着变）；
   H1 右边界距视口右侧仍有 27–291px 余量；打印样式不涉及 .hero-inner。 */
.hero-inner{position:relative;z-index:2;max-width:920px}
/* .hero-eyebrow 的 CSS 规则保留（§9.2 #10）：当前已不再渲染（原内容是自我指涉的"首页 / Home"），
   留给未来放真实信息。 */
.hero-eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:var(--fs-sub);
              color:var(--c-accent-glow);font-weight:600;margin-bottom:12px}
:lang(zh) .hero-eyebrow,:lang(ja) .hero-eyebrow,
:lang(ko) .hero-eyebrow,:lang(ar) .hero-eyebrow{letter-spacing:0;text-transform:none}
.hero-title{color:#fff;font-size:var(--fs-hero-title);margin-bottom:16px;
            line-height:1.16;letter-spacing:-.01em}

/* ---- 品牌词断行保护（design-spec §14.12） ----
   content-strategist 把 `OEM / ODM`（带空格的斜杠）定为全站写法，但带空格的 `/`
   会让浏览器在斜杠处断行，把品牌词对劈成两半。§14.12 说的两种难看断法
   **现网同时存在**，实测首屏 H1 @375px（关掉本规则时的样子）：
     · ja（2 行）→ "ベビーモニター OEM" / "/ ODM 中国メーカー"
       —— 第 2 行**以 "/ " 开头**，这是最糟的那一种。
     · en（3 行）→ "Baby Monitor OEM /" / "ODM Manufacturer" / "& Factory in China"
       —— 第 1 行**行尾**挂着 `OEM /`，品牌对被拆到两行。
     · de（3 行）→ "Babymonitor-" / "Hersteller (OEM /" / "ODM) aus China"
   锁 nowrap 后品牌对永远整块换行，三种形态一起消失。

   ★ 代价（实测，别假装没有）：**en / de / ja 三语**在 375px 下各多 1 行
     （en 3→4、de 3→4、ja 2→3），因为 336px 的内容盒装不下 "Baby Monitor OEM / ODM"（约 385px）。
     其余 7 语（zh/es/fr/it/ru/ar/ko）行数不变 —— 这条是逐语对比量出来的，不是推断。
     4 行仍在"移动端 ≤4 行"的判定线内，且品牌对独占一行读起来是整块，比跨行劈开好。
     ja 那一行买的不是锦上添花，是修掉上面那个正在发生的行首斜杠。
     若以后判定线收紧到 3 行，正确做法是**改文案**（去掉 & Factory 那半句），
     不是把这条 nowrap 删掉。

   ★ 保护范围**只限斜杠分隔的拉丁缩写对**，由 brand_duo() 只认 `/` 来保证：
     ① ko 用的是 `OEM · ODM`，`·` 是分隔符不是品牌词的一部分，绝不能一起锁 ——
        整串 nowrap 会变成约 227px 的不可断块，直接撞 §14.8 硬门槛 1；
        （实测 ru 的 eyebrow 整串就是 227.3px，正是 ui-designer 预估的那个数，
         而 brand_duo() 不认 `·`，所以 eyebrow 一条都没被包 —— 已验证。）
     ② 也别把这条规则推广成 `.hero-title{white-space:nowrap}`，那会让整句不换行直接溢出。

   ★ 溢出风险已实测排除：375px 下 `OEM / ODM` 宽 178.5px（内容盒 336px），
     320px 下内容盒 281px 仍装得下。nowrap 的代价是**整段不可断**，所以
     若以后新增语种的品牌词对明显更长（比如带本族语词），必须重测最窄档。 */
.brand-duo{white-space:nowrap}
.hero-subtitle{font-size:var(--fs-hero-sub);color:rgba(255,255,255,.92);margin-bottom:28px;
               max-width:60ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}

/* ---- 8.4 左右箭头 ----
   ★ 底色 rgba(6,23,41,.72) 不能降到 .55 —— 降到 .55 时最亮图上白图标只剩 4.06:1，余量太薄。
   ★ 圆角 8px 而不是圆形 —— 圆形会读成"视频播放器按钮"。
   ★ ≤767 隐藏：触屏用滑动手势 + 圆点按钮，圆点就是"非手势替代操作"，满足 WCAG 2.5.7。 */
.hero-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radius-btn);border:1px solid rgba(255,255,255,.22);
  background:rgba(6,23,41,.72);color:#fff;cursor:pointer;padding:0;
  transition:background-color .18s var(--ease-slide),border-color .18s var(--ease-slide)}
.hero-prev{inset-inline-start:12px}
.hero-next{inset-inline-end:12px}
.hero-nav:hover{background:rgba(6,23,41,.88);border-color:rgba(255,255,255,.42)}
.hero-nav:active{transform:translateY(-50%) scale(.94)}
.hero-nav:focus-visible{outline:2px solid var(--c-accent-glow);outline-offset:2px}
@media (max-width:767px){.hero-nav{display:none}}

/* ---- 8.4 暂停 / 播放（WCAG 2.2.2 强制：自动更新超 5s 必须可暂停）----
   位置在右下角，与左右箭头、底部居中的圆点形成三角，互不重叠。 */
.hero-toggle{position:absolute;inset-inline-end:12px;bottom:16px;z-index:3;
  width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radius-btn);border:1px solid rgba(255,255,255,.22);
  background:rgba(6,23,41,.72);color:#fff;cursor:pointer;padding:0;
  transition:background-color .18s var(--ease-slide),border-color .18s var(--ease-slide)}
.hero-toggle:hover{background:rgba(6,23,41,.88);border-color:rgba(255,255,255,.42)}
.hero-toggle:focus-visible{outline:2px solid var(--c-accent-glow);outline-offset:2px}
/* 图标由 aria-pressed 驱动切换，不需要 JS 加 class */
.hero-toggle .hero-toggle-play{display:none}
.hero-toggle[aria-pressed="true"] .hero-toggle-pause{display:none}
.hero-toggle[aria-pressed="true"] .hero-toggle-play{display:block}
@media (max-width:767px){.hero-toggle{bottom:60px}}

/* ---- 8.4 指示器：圆点（选中态由 8px 圆点变形成 28×8 长条）----
   ★ 不选进度条的三条理由：① 3–5 张的官网 Banner 上底部像视频播放器，与"精密仪器"气质不搭；
     ② 进度条视觉高 4px，要满足 44px 命中区得套 20px 透明 padding，视觉与命中区错位 5 倍；
     ③ "圆点 → 长条"这一个形变同时承载了"第几张"和"当前第几张"两个信息。
   ★ 命中区 48×44（padding:18px 6px），视觉尺寸与命中区分离。
   ★ 选中靠**形状**区分（8px → 28px，宽度差 3.5 倍），不靠颜色 → 满足 1.4.1。 */
/* ★ pointer-events:none —— 容器是 inset-inline:0 的整条横带，会把右下角的暂停按钮整个盖住
     （实测：点暂停时命中的是 .hero-dots 而不是按钮）。只让圆点本身接收点击。 */
.hero-dots{position:absolute;inset-inline:0;bottom:24px;z-index:3;
           display:flex;justify-content:center;align-items:center;gap:0;
           pointer-events:none}
/* ★ 命中区 28×44（未选）/ 48×44（选中，圆点变 28px 宽）。
     改前 padding:18px 6px + gap:8px 的命中区只有 20px 宽 —— 低于 WCAG 2.5.8 AA 的 24×24。
     现在改成 padding-inline:10px + gap:0：圆点中心间距仍是 28px（视觉与规范完全一致），
     但每个圆的命中区宽度变成「圆点宽 + 20px」。 */
.hero-dot{padding:18px 10px;background:none;border:0;cursor:pointer;line-height:0;
          pointer-events:auto}
.hero-dot i{display:block;width:8px;height:8px;border-radius:var(--radius-pill);
            background:rgba(255,255,255,.60);
            transition:width .3s var(--ease-slide),background-color .3s var(--ease-slide)}
.hero-dot:hover i{background:rgba(255,255,255,.85)}
.hero-dot[aria-selected="true"] i{width:28px;background:var(--c-accent-glow)}
.hero-dot:focus-visible{outline:2px solid var(--c-accent-glow);outline-offset:-2px}
@media (max-width:767px){.hero-dots{bottom:16px}}

/* ---- 8.5 尊重减弱动效偏好 ----
   不自动播放由 JS 判断（reduce → 初始 paused），这里只管视觉：直接切、无 Ken Burns。 */
@media (prefers-reduced-motion:reduce){
  .hero-slide{transition-duration:.001ms}
  .hero-slide.is-active .hero-img{animation:none}
}

/* ============================================================
   9. 信任条
   ============================================================ */
.trust-list{list-style:none;margin:0;padding:0}
/* padding 20px → 24px（4 基数刻度，§4.1）；去掉 --ring-inset（白高光在白卡片上等于零） */
.trust-item{background:var(--c-surface);border:1px solid var(--c-border);
            border-radius:var(--radius-card);padding:24px;text-align:center;
            box-shadow:var(--shadow-card)}
/* ★ 750 是 system-ui 下的合成字重，不同 OS 渲染不一致 → 收到 700（§3.1）。
      数字的分层靠字号 + tabular-nums，不靠字重。 */
.trust-value{display:block;font-size:var(--fs-stat);font-weight:700;color:var(--c-primary);
             line-height:1.15;font-variant-numeric:tabular-nums}
.trust-label{display:block;color:var(--c-muted);font-size:var(--fs-sub);margin-top:6px}

/* ============================================================
   10. 卡片类
   ============================================================ */
.business-card,.why-card,.qc-card,.team-card,.lead-card,.moq-card{height:100%}
.business-no,.qc-no{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
    border-radius:50%;background:var(--c-primary-050);color:var(--c-primary);font-weight:700;
    margin-bottom:12px;border:1px solid var(--c-border)}
.business-title,.why-title,.qc-title,.team-title{font-size:var(--fs-card-title)}
.business-desc,.why-desc,.qc-card p,.team-card p{color:var(--c-muted)}
/* ★ 2026-10-26：OEM/ODM/现货 三卡文案拉平后，用 flex 列让「了解更多」贴底对齐，
      避免短卡下方留大片空白、三卡 CTA 高低不齐（用户截图反馈排版不匹配）。 */
.business-card{display:flex;flex-direction:column}
.business-card .business-desc{flex:1 1 auto}
.business-card .text-link{align-self:flex-start}
.why-icon{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;
          border-radius:var(--radius-card);background:var(--c-accent-050);color:var(--c-accent);
          margin-bottom:12px}
/* ★ .qc-card / .why-card 硬指标 → 冷（仪器青）；.team-card 讲的是**人** → 暖（陶土）。
      改前 3 类全用同一个青色，冷得没有分工（§5.4）。 */
.why-grid .card,.qc-card,.team-grid .card{border-top:3px solid var(--c-accent)}
.team-card{border-top-color:var(--c-warm)}

.chip-list{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0 0 24px;padding:0}
/* ★ 高度 33.6px → 40px：chip 出现在产品页顶部，是手指会去点的地方（§5.5）。
      满足 WCAG 2.5.8 AA 的 24×24 且接近 44 目标。 */
.chip{display:inline-flex;align-items:center;justify-content:center;min-height:40px;
      padding:8px 16px;border:1px solid var(--c-border);
      border-radius:var(--radius-pill);font-size:.9rem;font-weight:600;
      color:var(--c-text);background:var(--c-surface);max-width:100%;
      transition:border-color .16s var(--ease-slide),color .16s var(--ease-slide)}
.chip:hover{border-color:var(--c-accent);color:var(--c-accent-dark)}
.chip.is-active{background:var(--c-primary);border-color:var(--c-primary);color:#fff}
.result-count{font-size:var(--fs-sub);margin-top:16px;color:var(--c-muted)}

/* ---- 客户口碑 ---- */
.testimonial-card{margin:0;display:flex;flex-direction:column;gap:12px}
.testimonial-quote{margin:0;color:var(--c-text-soft);font-size:var(--fs-lead)}
.testimonial-meta{display:flex;align-items:center;gap:12px;color:var(--c-muted);
                  font-size:var(--fs-sub);margin-block-start:auto}
/* ★ 陶土色引号：暖调的第三个落点（#46）。用 --c-warm-100 而不是更强的暖色 ——
      引号是装饰，不能盖过引言正文。 */
.testimonial-quote::before{content:"\201C";color:var(--c-warm-100);font-size:1.6em;line-height:0;
                           vertical-align:-.2em;margin-inline-end:2px}
.testimonial-meta small{display:block;color:var(--c-muted);font-size:.8125rem}
.testimonial-meta strong{color:var(--c-text)}
/* ★ 头像：上传图优先；未上传时由视图渲染 .testimonial-avatar-fallback（公司首字母圆头像） */
.testimonial-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.testimonial-avatar-fallback{display:inline-flex;align-items:center;justify-content:center;
                   background:var(--c-surface-warm);color:var(--c-accent-dark);
                   font-weight:700;font-size:.92rem;letter-spacing:.02em;border:1px solid var(--c-border)}

/* ---- 合作案例（来自长期 B2B 伙伴）---- */
.case-grid{margin-top:8px}
.case-card{display:flex;flex-direction:column;gap:14px}
.case-head{display:flex;align-items:center;gap:14px}
.case-logo{width:56px;height:56px;border-radius:var(--radius-sm,10px);object-fit:cover;
           border:1px solid var(--c-border);background:var(--c-surface);flex:0 0 auto}
.case-head-text{min-width:0}
.case-partner{margin:0;font-size:var(--fs-card-title);color:var(--c-text);line-height:1.25}
.case-tags{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0;padding:0;list-style:none}
.case-tag{display:inline-block;font-size:.75rem;line-height:1;padding:5px 9px;border-radius:999px;
          background:var(--c-surface-warm);color:var(--c-accent-dark);font-weight:600}
.case-tag-ghost{background:transparent;border:1px solid var(--c-border-strong);color:var(--c-muted);font-weight:500}
.case-title{margin:0;font-size:1.02rem;color:var(--c-text);line-height:1.4}
.case-summary{margin:0;color:var(--c-text-soft);font-size:.92rem;line-height:1.6}
.case-product{margin:0;font-size:.82rem;letter-spacing:.02em}
.case-result{display:flex;align-items:baseline;gap:8px;margin:auto 0 0;padding-top:10px;
             border-top:1px dashed var(--c-border)}
.case-result-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--c-muted)}
.case-result-value{font-size:.98rem;font-weight:700;color:var(--c-cta)}

/* ============================================================
   11. 产品
   ============================================================ */
.product-grid{margin-top:8px}
.product-card{display:flex;flex-direction:column;overflow:hidden;padding:0}
.product-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px)}
/* ★ 4/3 + cover 会把监护器机身裁掉 —— B2B 采购看的是产品**全貌**，不是氛围图（#24）。
     改 1:1 + contain + 16px padding + 暖白底，产品完整可见，卡片高度还能降下来。 */
.product-card-media{display:block;aspect-ratio:1/1;overflow:hidden;
                    background:var(--c-surface-warm);padding:16px}
.product-card-media img{width:100%;height:100%;object-fit:contain}
/* ★ 删掉改前的 .product-card:hover img{transform:scale(1.04)}：
     改成 contain 后 scale 会把产品推出卡片边缘。hover 行为统一为"卡片上抬 + 阴影"。 */
.product-card-body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.product-model{color:var(--c-muted);font-size:var(--fs-sub);letter-spacing:.04em;margin:0}
.product-card-title{font-size:var(--fs-card-title);margin:0}
.product-card-title a{color:var(--c-primary)}
.product-card-title a:hover{color:var(--c-accent-dark)}
.product-card-desc{color:var(--c-muted);font-size:.92rem;margin:0}
.product-card-link{margin-top:auto;font-weight:600;color:var(--c-accent);font-size:.92rem}
.product-card:hover .product-card-link{color:var(--c-accent-dark)}

.product-detail-grid{display:grid;gap:32px;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:start}
.product-gallery{min-width:0}
.gallery-main{border:1px solid var(--c-border);border-radius:var(--radius-img);overflow:hidden;
              background:var(--c-surface-alt);box-shadow:var(--shadow-card)}
.gallery-main img{width:100%;aspect-ratio:1/1;object-fit:contain}
.gallery-thumbs{display:flex;gap:10px;list-style:none;margin:12px 0 0;padding:0;flex-wrap:wrap}
.gallery-thumb{padding:0;border:2px solid var(--c-border);border-radius:var(--radius-sm);
               overflow:hidden;background:var(--c-surface);cursor:pointer;transition:border-color .16s ease}
.gallery-thumb:hover{border-color:var(--c-border-strong)}
.gallery-thumb.is-active{border-color:var(--c-cta)}
.gallery-thumb img{width:76px;height:76px;object-fit:cover}
.product-title{font-size:var(--fs-product-title);margin-bottom:12px}
.product-model-no{font-size:1rem;font-weight:600;color:var(--c-muted)}
.product-summary{color:var(--c-text-soft);margin-bottom:20px}
.product-meta{display:grid;gap:8px;margin:0 0 20px}
/* ★ 修掉 min-width:120px 陷阱：允许换行并用比例宽度，不再撑爆 */
.product-meta div{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.product-meta dt{flex:0 0 auto;max-width:min(48%,200px);
                 font-weight:700;margin:0;color:var(--c-text);
                 overflow-wrap:anywhere}
.product-meta dd{margin:0;min-width:0;flex:1 1 45%}
.point-list{list-style:none;margin:0 0 20px;padding:0}
.point-list li{position:relative;padding-inline-start:24px;margin-bottom:8px}
.point-list li::before{content:"✓";position:absolute;inset-inline-start:0;
                       color:var(--c-accent);font-weight:700}
.product-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

.point-cards{list-style:none;padding:0;margin:0}
.point-card{font-size:.95rem;color:var(--c-muted)}

/* ============================================================
   12. 表格
   ------------------------------------------------------------
   4 张表在视图里已全部包了 .table-wrap（about / oem_odm / quality /
   products/show），滚动能力本来就存在；此处把 min-width 从死值改 min()，
   并给单元格 overflow-wrap:anywhere，让德语长复合词不再撑大固有宽度。
   ============================================================ */
.table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
            border:1px solid var(--c-border);border-radius:var(--radius-card);
            background:var(--c-surface);box-shadow:var(--shadow-xs)}
.table-wrap::-webkit-scrollbar{height:8px}
.table-wrap::-webkit-scrollbar-thumb{background:var(--c-border-strong);border-radius:var(--radius-pill)}
.spec-table,.facts-table,.oem-table,.matrix-table{border:0;width:100%;
     min-width:min(520px,100%)}
/* 多列的表仍需要横向滚动（由 .table-wrap 提供），上限锁死不越界 */
.oem-table,.matrix-table{min-width:min(640px,100%)}
.spec-table th,.facts-table th,.oem-table th,.matrix-table th{width:38%;background:var(--c-bg-alt);
     font-weight:600;color:var(--c-primary)}
.spec-table td,.facts-table td,.oem-table td,.matrix-table td{vertical-align:top}
.oem-table thead th,.matrix-table thead th{background:var(--c-primary);color:#fff;
     border-color:var(--c-primary-600)}
.oem-table tbody th{width:22%}

/* ============================================================
   13. OEM
   ============================================================ */
.checklist{list-style:none;margin:0;padding:0}
.checklist-item{background:var(--c-surface);border:1px solid var(--c-border);
                border-radius:var(--radius-btn);padding:12px 16px;
                display:flex;gap:10px;align-items:flex-start;box-shadow:var(--shadow-xs)}
.check-mark{color:var(--c-accent);font-weight:700;flex:0 0 auto}
.moq-card{text-align:center;padding-block:28px}
.moq-card-title{font-weight:700;color:var(--c-muted);margin:0}
.moq-card-value{font-size:var(--fs-stat-xl);font-weight:700;color:var(--c-primary);margin:8px 0;
                font-variant-numeric:tabular-nums}
.moq-card-note{color:var(--c-muted);font-size:.92rem}
.process-list{list-style:none;margin:0;padding:0;counter-reset:step}
.process-step{display:flex;gap:16px;padding-block:16px;border-bottom:1px solid var(--c-border)}
.process-step:last-child{border-bottom:0}
.process-no{flex:0 0 36px;height:36px;border-radius:50%;
            background:linear-gradient(140deg,var(--c-primary-600),var(--c-primary));
            color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700}
.process-title{font-size:var(--fs-card-title);margin-bottom:4px}
.lead-card{text-align:center}
.lead-value{font-size:var(--fs-stat-xl);font-weight:700;color:var(--c-primary);margin:0;
            font-variant-numeric:tabular-nums}
.lead-label{color:var(--c-muted)}
.cta-panel{background:var(--c-surface);border:1px solid var(--c-border);
           border-radius:var(--radius-card);padding:32px;margin-top:40px;
           box-shadow:var(--shadow-card)}
.cta-panel-inner{max-width:760px}
.cta-panel-title{font-size:var(--fs-panel-title)}

/* ============================================================
   14. 证书墙
   ============================================================ */
.cert-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
           list-style:none;margin:0;padding:0}
.cert-grid-lg{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:24px}
.cert-item{border:1px solid var(--c-border);border-radius:var(--radius-card);
           background:var(--c-surface);padding:14px;text-align:center;
           box-shadow:var(--shadow-card);
           transition:box-shadow .2s var(--ease-slide),transform .2s var(--ease-slide)}
/* hover 补位移：与全站卡片的 hover 语言统一（#26） */
.cert-item:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px)}
.cert-item img{width:100%;aspect-ratio:5/7;object-fit:contain;background:var(--c-bg-alt);
               border-radius:var(--radius-sm)}
.cert-name{display:block;font-size:.92rem;font-weight:600;margin-top:10px}
.cert-market{display:block;font-size:.82rem;color:var(--c-muted)}
.cert-empty{padding-block:40px;text-align:center}

/* ============================================================
   15. 新闻
   ============================================================ */
.news-card{display:flex;flex-direction:column;overflow:hidden;padding:0}
.news-media{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--c-bg-alt)}
.news-media img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.news-card:hover .news-media img{transform:scale(1.03)}
.news-card .news-date,.news-card .news-title,.news-card .news-excerpt,
.news-card .text-link{padding-inline:18px}
.news-date{font-size:var(--fs-sub);margin:12px 0 4px;color:var(--c-muted)}
.news-title{font-size:var(--fs-card-title);margin-bottom:8px}
.news-title a{color:var(--c-primary)}
.news-title a:hover{color:var(--c-accent-dark)}
.news-excerpt{color:var(--c-muted);font-size:.92rem;flex:1}
.news-card .text-link{margin-bottom:18px}
.news-detail .news-cover{width:100%;aspect-ratio:2/1;object-fit:cover;
                         border-radius:var(--radius-img);margin-bottom:24px}
.news-meta{margin-bottom:16px;color:var(--c-muted);font-size:var(--fs-sub)}
.news-body{max-width:78ch}
.rich-text{max-width:78ch;font-size:1.02rem}
.rich-text h2{margin-top:28px}
.rich-text h3{margin-top:24px}
.rich-text img{border-radius:var(--radius-img);margin-block:16px}
.rich-text ul,.rich-text ol{margin-bottom:16px}
.rich-text blockquote{border-inline-start:4px solid var(--c-accent);margin-inline-start:0;
                      padding-inline-start:16px;color:var(--c-text-soft)}

/* ============================================================
   16. 关于我们
   ============================================================ */
.about-intro p{margin-bottom:16px}
.timeline{list-style:none;margin:0;padding:0}
.timeline-item{display:grid;grid-template-columns:96px minmax(0,1fr);gap:20px;margin-bottom:20px}
.timeline-year{font-size:var(--fs-stat);font-weight:700;color:var(--c-accent);
               font-variant-numeric:tabular-nums}
.timeline-body{min-width:0}
.timeline-title{font-size:var(--fs-card-title);margin-bottom:6px}

/* ============================================================
   16b. FAQ 折叠列表（About 页 FAQ 板块 / 通用 GEO 问答区块）
   ------------------------------------------------------------
   ★ 折叠态完全依赖原生 <details>/<summary> 语义：
     浏览器把 <summary> 映射为可聚焦的 button 并暴露展开状态给辅助技术。
     因此这里**不写 aria-expanded**（会引入第二个状态源，JS 失败时与原生状态打架）。
     .faq-item__icon 是纯装饰（aria-hidden），其形态由 `details[open]` 驱动。
   ★ 全部使用既有设计令牌，不写死颜色 / 尺寸字面量。
   ★ 逻辑属性（inline-start / margin-inline / padding-block）→ RTL 自动镜像。
   ============================================================ */
.faq-list{display:flex;flex-direction:column;gap:12px;max-width:900px}

.faq-item{background:var(--c-surface);border:1px solid var(--c-border);
          border-radius:var(--radius-card);box-shadow:var(--shadow-xs);
          overflow:hidden}
.faq-item[open]{border-color:var(--c-border-strong);box-shadow:var(--shadow-card)}

/* summary 默认是 display:list-item，带原生 marker —— 隐藏 marker，
   改由自绘的 .faq-item__icon 表达展开/折叠。 */
.faq-item__q{display:flex;align-items:flex-start;gap:12px;
             padding:16px 20px;cursor:pointer;list-style:none;
             font-weight:600;line-height:1.5;color:var(--c-text)}
.faq-item__q::-webkit-details-marker{display:none}
.faq-item__q::marker{content:""}
.faq-item__q:hover{background:var(--c-surface-alt)}
.faq-item__text{flex:1 1 auto;min-width:0}

/* 纯装饰展开指示器：细横杠 → 展开时旋转 90° 成竖杠。
   aria-hidden，不承载任何语义状态。 */
.faq-item__icon{flex:0 0 auto;width:14px;height:14px;margin-top:4px;
                position:relative;color:var(--c-accent)}
.faq-item__icon::before,.faq-item__icon::after{
  content:"";position:absolute;inset-block-start:50%;inset-inline:0;
  height:2px;border-radius:2px;background:currentColor;
  transform:translateY(-50%)}
.faq-item__icon::after{transform:translateY(-50%) rotate(90deg);
                       transition:transform .2s var(--ease-slide, ease)}
.faq-item[open] .faq-item__icon::after{transform:translateY(-50%) rotate(0deg)}

.faq-answer{padding:0 20px 18px 20px}
.faq-answer p{margin:0;color:var(--c-text-soft);line-height:1.7}

/* ============================================================
   17. 联系页 / 表单
   ============================================================ */
.contact-grid{display:grid;gap:32px;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start}
.contact-list{list-style:none;margin:0;padding:0}
.contact-list li{display:flex;flex-direction:column;gap:2px;padding-block:10px;
                 border-bottom:1px solid var(--c-border)}
.contact-list li:last-child{border-bottom:0}
.fc-label{font-weight:700;color:var(--c-muted);font-size:var(--fs-sub)}
.contact-aside,.contact-form-wrap{background:var(--c-surface);border:1px solid var(--c-border);
    border-radius:var(--radius-card);padding:24px;
    box-shadow:var(--shadow-card)}
.inquiry-form{margin-top:8px}
.form-row{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}
.form-input,.form-select,.form-textarea{width:100%;min-height:44px;padding:11px 14px;
    border:1px solid var(--c-border-strong);border-radius:var(--radius-btn);
    font:inherit;background:var(--c-surface);color:var(--c-text);
    transition:border-color .16s var(--ease-slide),box-shadow .16s var(--ease-slide)}
.form-textarea{min-height:120px}
.form-input:focus,.form-select:focus,.form-textarea:focus{
    outline:2px solid var(--c-accent);outline-offset:1px;
    border-color:var(--c-accent);box-shadow:var(--ring-focus)}
/* ★ 错误态是新增的（§5.2 / §11 第 5 条）：改前表单只有一行红色文字，输入框本身不变色。
      颜色 + 文字 + 边框三重编码才算满足 WCAG 1.4.1「不靠颜色单独表意」。
      HTML 侧需同时给 aria-invalid="true" + aria-describedby="<错误提示 id>"。 */
.form-input.is-invalid,.form-select.is-invalid,.form-textarea.is-invalid{
    border-color:var(--c-danger);background:#FEF8F8}
.form-input.is-invalid:focus,.form-select.is-invalid:focus,.form-textarea.is-invalid:focus{
    border-color:var(--c-danger);box-shadow:0 0 0 3px rgba(185,28,28,.22)}
.form-input::placeholder,.form-textarea::placeholder{color:var(--c-muted)}
.form-group{margin-bottom:16px;min-width:0}
.form-label{display:block;font-weight:600;margin-bottom:6px;font-size:.95rem}
.form-error{color:var(--c-danger);font-size:.85rem;margin-top:4px;margin-bottom:0}
.form-hint{color:var(--c-muted);font-size:.85rem;margin:6px 0 0}
.form-privacy{font-size:.85rem;color:var(--c-muted)}
.req{color:var(--c-cta-deep)}
.check-grid{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}
.check-item{display:flex;gap:8px;align-items:flex-start;font-size:.95rem;cursor:pointer}
/* ★ 原生 checkbox 在 10 个 OS 上长得都不一样 —— 至少统一主色与尺寸（#36）。
      命中区由 <label class="check-item"> 撑到 36px+。 */
.check-item input{width:20px;height:20px;accent-color:var(--c-accent);flex:0 0 auto;margin:2px 0 0}
.hp-field{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}
.thanks-wrap{max-width:760px;margin-inline:auto}
.thanks-card{text-align:center;padding-block:48px}
.thanks-icon{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;
             border-radius:50%;background:#ECFDF5;color:var(--c-ok);font-size:2rem;font-weight:700}
.thanks-title{margin-top:16px}
.thanks-promise{font-weight:600;color:var(--c-accent-dark)}
.thanks-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:24px}

/* ============================================================
   18. 面包屑
   ============================================================ */
.breadcrumb{background:var(--c-surface-alt);border-bottom:1px solid var(--c-border);
            font-size:var(--fs-sub)}
.breadcrumb-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding-block:10px}
.breadcrumb-item:not(:last-child)::after{content:"/";margin-inline-start:8px;color:var(--c-muted)}
.breadcrumb-item a{color:var(--c-muted)}
.breadcrumb-item a:hover{color:var(--c-accent)}
/* ★ 面包屑末项：同样由 aria-current 派生（§7.1.2）。
   末项是 <span> 不是 <a>，"不可点"本身已是一种区别，但那对键盘用户不可见 ——
   补 font-weight:600 作为非颜色信号。 */
.breadcrumb-item span[aria-current]{color:var(--c-text);font-weight:700}

/* ============================================================
   19. 分页
   ============================================================ */
.pager{margin-top:32px}
.pager-list{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0;justify-content:center}
.pager-link{display:inline-flex;align-items:center;justify-content:center;
            min-width:44px;height:44px;            /* ★ 触摸目标 ≥44px */
            padding-inline:10px;border:1px solid var(--c-border-strong);
            border-radius:var(--radius-btn);font-weight:600;color:var(--c-text);
            background:var(--c-surface);transition:border-color .16s ease,color .16s ease}
.pager-link:hover{border-color:var(--c-accent);color:var(--c-accent-dark)}
/* 当前页码：实心填充（vs 其它页的描边）已是形状差异，再叠 font-weight:700，
   色觉障碍用户靠字重和填充也能分辨（§7.1.2 / WCAG 1.4.1） */
.pager-item.is-active .pager-link{background:var(--c-primary);border-color:var(--c-primary);
                                  color:#fff;font-weight:700}
.pager-link.is-disabled{opacity:.5;cursor:not-allowed}

/* ============================================================
   20. 底部 CTA 与页脚
   ============================================================ */
/* ★ .cta-bar 与 .site-footer 都是 navy 且上下相邻，两块糊成一整块，页面收口没有节奏（#37）。
      一条 3px 琥珀线把两块切开，同时强化 CTA；页脚再加一条极淡的上边线，两块 navy 各自成立。 */
.cta-bar{background:linear-gradient(120deg,var(--c-primary) 0%,var(--c-primary-600) 55%,
                                    var(--c-primary-dark) 100%);
         border-block-end:3px solid var(--c-cta);
         color:#fff;padding-block:40px}
.cta-bar-inner{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.cta-bar-text h2{color:#fff;margin-bottom:8px}
.cta-bar-text p{color:rgba(255,255,255,.90);margin:0}
.cta-bar-actions{display:flex;flex-wrap:wrap;gap:12px}

.site-footer{background:linear-gradient(180deg,var(--c-primary) 0%,var(--c-primary-dark) 100%);
             border-block-start:1px solid rgba(255,255,255,.12);
             color:var(--c-muted-inv);padding-top:48px}
/* ★ 四等分时「品牌栏（简介 + 社媒）挤、分类栏空」→ 按内容量分配栏宽（#38） */
.footer-grid{display:grid;gap:32px;grid-template-columns:1.4fr 1fr 1fr 1.2fr}
.footer-col{min-width:0}
.footer-brand img{height:36px;width:auto;margin-bottom:16px}
.footer-intro{font-size:.92rem;margin-bottom:16px}
.footer-title{color:#fff;font-size:1rem;margin-bottom:14px;font-weight:600}
.footer-links,.footer-contact,.social-list{list-style:none;margin:0;padding:0}
.footer-links li,.footer-contact li{margin-bottom:8px;font-size:.92rem}
/* ★ 改前 .footer-contact li 是纵向堆叠：7 行联系信息各占两行，第四栏比别人高一倍（#40）。
      桌面端让标签与值同行，只有窄屏（≤767）才折行。 */
@media (min-width:768px){
  .footer-contact li{display:flex;flex-wrap:wrap;gap:2px 8px;align-items:baseline}
}
.footer-links a,.footer-contact a,.social-list a{color:var(--c-muted-inv)}
.footer-links a:hover,.footer-contact a:hover,.social-list a:hover{color:var(--c-accent-glow)}
.social-list{display:flex;flex-wrap:wrap;gap:12px}
.footer-bottom{margin-top:32px;border-top:1px solid rgba(201,214,228,.22);
               padding-block:16px;font-size:var(--fs-sub)}
.footer-bottom-inner{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between}
.footer-icp{opacity:.85}

/* ============================================================
   21. 移动端悬浮条
   ============================================================ */
.mobile-cta{display:none;position:fixed;inset-inline:0;bottom:0;z-index:60;gap:8px;padding:8px;
            background:rgba(255,255,255,.96);border-top:1px solid var(--c-border);
            box-shadow:0 -6px 20px -8px rgba(10,37,64,.18);
            padding-bottom:max(8px,env(safe-area-inset-bottom))}
/* ★ 移动端悬浮条是全站最高频的转化控件，实测改前 42px < 44px（#34） */
.mobile-cta a{flex:1;display:inline-flex;align-items:center;justify-content:center;
              min-height:48px;padding:12px 8px;
              border-radius:var(--radius-btn);font-weight:700;font-size:.92rem;min-width:0}
.mobile-cta-wa{background:var(--c-wa);color:#fff}
.mobile-cta-quote{background:var(--c-cta);color:var(--c-cta-ink)}

/* ============================================================
   22. 响应式断点（改前 4 档 → 改后 11 档）
   ============================================================ */

/* ---- 22.1 超大屏 1536+ · section 96px / hero 560px / grid gap 28px（§4.2 / §6） ---- */
@media (min-width:1536px){
  :root{--container:1320px;--gutter:32px;--hero-h:560px}
  .grid{gap:28px}
  .section{padding-block:96px}
  .footer-grid{gap:40px}
}

/* ---- 22.2 大屏 1280+ · section 80px / hero 520px ---- */
@media (min-width:1280px){
  :root{--container:1240px;--hero-h:520px}
  .section{padding-block:80px}
}

/* ---- 22.3 小笔记本 1024–1279 · **紧凑模式**（§7.3）----
   俄语那一行满载 50 单位时这里只有 226px 余量，所以在这一档降半号字 + 收紧 padding，
   语言按钮只显示 2 字码。这些都是"留余量"，不是"硬塞"。 */
@media (min-width:1024px) and (max-width:1279px){
  :root{--container:1100px;--hero-h:480px}
  .section{padding-block:64px}
  /* 溢出兜底：让导航在窄断点**收缩**，不加 flex-wrap（换行会让 header 高度翻倍 →
     --header-h 失效 → 全站锚点错位）。字号保持 16px，ui-designer 复算后余量足够。 */
  .nav-item> a{padding:10px 8px}
  .nav-caret{width:24px}
  /* 紧凑档同样放宽菜单项间距（2px → 8px）：此处为留余量而收紧过 gap/padding，
     是「所有语言都嫌窄」在 1024–1279 段的主因。俄语满载仍有余量，不会溢出。 */
  .nav-list{gap:10px}
  .nav-inner{gap:16px}
  .brand img{height:36px}
  /* ★ 语言按钮已改成两字母缩写（定宽 58px），不再需要 .lang-current 的 2.4em 截断兜底 */
  .footer-grid{gap:24px}
  .grid-4{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---- 22.4 ≤1023px：平板竖屏 / 移动 nav 抽屉（形态见 §6） ---- */
@media (max-width:1023px){
  :root{--container:900px;--hero-h:460px}
  .section{padding-block:64px}
  /* 形态 = 从 header 下方下滑的面板，不是全屏遮罩也不是侧滑；max-height 用 dvh 更准 */
  .site-nav{display:none;position:absolute;inset-inline:0;top:100%;background:var(--c-surface);
            border-bottom:1px solid var(--c-border);box-shadow:var(--shadow-pop);padding:12px 0;
            max-height:calc(100dvh - var(--header-h));overflow-y:auto;overscroll-behavior:contain}
  .site-nav.is-open{display:block}
  .nav-list{flex-direction:column;align-items:stretch;gap:0}
  /* 抽屉里恢复换行（不再受"单行不许换行"约束 —— 那是桌面协议的约束，抽屉是竖排堆叠） */
  .nav-item> a{display:flex;width:100%;justify-content:space-between;
      min-height:48px;padding-inline:var(--gutter);max-width:100%;border-radius:0}
  .nav-label{white-space:normal;overflow:visible;text-overflow:clip}
  /* ★ 下拉项在抽屉里排成「链接占满剩余宽度 + 箭头 44×48 满格」一行，菜单整块换到下一行。
       箭头是独立可点目标（点它展开手风琴），链接点它直接跳页。 */
  .nav-item.has-dropdown{flex-wrap:wrap}
  .nav-item.has-dropdown> .nav-link{flex:1 1 auto;width:auto;padding-inline:var(--gutter)}
  .nav-caret{width:44px;height:48px}
  .nav-item.has-dropdown> .dropdown{flex:0 0 100%;width:100%}
  /* 当前项：逻辑起点处 3px 仪器青竖条 + navy 加粗（§6 第 4 条） */
  .nav-item.is-active> a,
  .nav-item> a[aria-current]{position:relative;color:var(--c-primary);font-weight:700}
  .nav-item.is-active> a::before,
  .nav-item> a[aria-current]::before{
      content:"";position:absolute;inset-block:6px;inset-inline-start:0;width:3px;
      background:var(--c-accent);border-radius:0 var(--radius-pill) var(--radius-pill) 0}
  .nav-item.has-dropdown .dropdown{position:static;box-shadow:none;border:0;border-radius:0;
      padding-inline-start:16px;min-width:0;max-width:100%;width:100%}
  .nav-item.has-dropdown .dropdown li a{padding-inline-start:0}
  .nav-toggle{display:inline-flex}
  /* ★ 桌面删除 .nav-quote 后，移动端的转化入口由抽屉底部 CTA 区 + 底部悬浮条共同承载（§6 第 6 条） */
  .nav-drawer-cta{display:block;padding:16px var(--gutter);
                  border-top:1px solid var(--c-border)}
  .nav-drawer-cta .btn{width:100%}
  .product-detail-grid,.contact-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .timeline-item{grid-template-columns:80px minmax(0,1fr);gap:16px}
}
/* 桌面不渲染抽屉 CTA（只有 ≤1023 的抽屉形态需要它） */
.nav-drawer-cta{display:none}

/* ---- 22.5 平板竖屏专属 768–1023 ---- */
@media (min-width:768px) and (max-width:1023px){
  .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contact-aside,
  .contact-form-wrap{padding:20px}
  .cert-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
}

/* ---- 22.6 ≤767px：手机 · section 48px / hero 420px ---- */
@media (max-width:767px){
  :root{--container:100%;--hero-h:var(--hero-h-sm)}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .grid-4{grid-template-columns:1fr}
  .section{padding-block:48px}
  .container{padding-inline:16px}
  .topbar-links{gap:10px;font-size:.8rem}
  /* ★ ≤767 隐藏顶栏的「响应承诺」那一行 —— 它占的第二行是 --header-h 从 104px 变成
       实测 131px 的唯一原因。隐藏后 --header-h 全断点统一 104px，移动端首屏多出 56px，
       锚点跳转不再被 header 盖住（§9.3 #14 方案 A）。 */
  .topbar-text{display:none}
  .form-row{grid-template-columns:1fr}
  .check-grid{grid-template-columns:1fr}
  .timeline-item{grid-template-columns:1fr;gap:8px}
  .footer-grid{grid-template-columns:1fr}
  .cta-bar-inner{flex-direction:column;align-items:flex-start}
  .cta-bar-actions{gap:8px}
  .cta-bar-actions .btn{flex:1 1 auto}
  .mobile-cta{display:flex}
  body{padding-bottom:64px}
  .cta-panel{padding:20px}
  .cert-grid-lg{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
  /* dt/dd 纵向堆叠：德语长标签不再挤压值列 */
  .product-meta div{flex-direction:column;gap:2px}
  .product-meta dt{max-width:100%}
  .product-meta dd{flex:1 1 auto}
  .gallery-thumb img{width:64px;height:64px}
}

/* ---- 22.6b Why 区块按条数切版式（§13.1.1） ----
   条数由 settings.show_high_tech 决定：=1 是 6 项，=0 是 5 项（8 语整块回落 en，条数跟着 en 走）。
   grid-3 装 5 项是 3+2，末行右下角空 1 格（实测 381px）—— 白底上就是"这块没做完"，必须切版式。

   ★ 整段必须放在 .grid-3 的响应式覆盖（1039 / 1056 行）之后，且依赖 [data-count] 属性：
     ① 带 [data-count] 的选择器优先级 (0,2,0) 高于 .grid-3 (0,1,0)，放哪都不会被盖掉；
     ② 但**没有 data-count 就绝不能写这段** —— 那两条 span 规则会把 6 项排成 2+2+1+1，比不做还乱。
        属性由 home.php 的 data-count="<?= count($whyItems) ?>" 输出。

   ★ 两条"别当 bug 修"的：
     ① 不做 text-align:center 让宽卡"好看点" —— 首行窄卡和次行宽卡的文字左边缘会立刻对不齐。
        RTL 靠 dir="rtl" + 逻辑属性，不手写 text-align。
     ② 不做 -webkit-line-clamp 让卡片等高 —— 那会把德语卖点描述截掉半句，
        而卡片高度本来就该由 grid 行高自平衡。宁可卡片高 40px，不能少半句话。 */
/* ★ 桌面 5/6 项的全部规则锁进 min-width:1024 —— 这是实测出来的，不是照抄。
   原写法把 nth-child 的 span 规则放在无媒体查询的顶层，优先级 (0,4,0)
   压过了响应式块里 .why-grid[data-count="5"]>.why-card{grid-column:span 1} 的 (0,3,0)，
   于是 1023 / 375 档仍按桌面跨度排：1023 实测卡 1/2/3/5 宽 828 而卡 4 宽 852（24px 错位），
   375 实测卡 4 宽 336 而卡 5 宽 304（32px 错位）。收进 min-width:1024 后跨度规则在窄屏根本不生成。 */
@media (min-width:1024px){
  .why-grid[data-count="6"]{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* 5 项：6 列轨，首行 3 张各占 2 列、次行 2 张各占 3 列 —— 桌面不留空格 */
  .why-grid[data-count="5"]{grid-template-columns:repeat(6,minmax(0,1fr))}
  .why-grid[data-count="5"]>.why-card:nth-child(-n+3){grid-column:span 2}
  .why-grid[data-count="5"]>.why-card:nth-child(n+4){grid-column:span 3}
}
/* 兜底：条数既不是 5 也不是 6（运营以后增删项）时退回自动填充，不出现空格也不出现孤儿列 */
.why-grid:not([data-count="5"]):not([data-count="6"]){
  grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}

@media (max-width:1023px){
  .why-grid[data-count="6"],
  .why-grid[data-count="5"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* 5 项在 2 列下末行只剩 1 张，让它占满整行，不留右半空格 */
  .why-grid[data-count="5"]>.why-card:last-child{grid-column:span 2}
}
@media (max-width:767px){
  .why-grid[data-count="6"],
  .why-grid[data-count="5"]{grid-template-columns:1fr}
  .why-grid[data-count="5"]>.why-card:last-child{grid-column:span 1}
}

/* ---- 22.7 ≤400px：超小屏（iPhone SE 375 / Galaxy 360） · section 40px / gutter 12px ---- */
@media (max-width:400px){
  :root{--gutter:12px}
  .container{padding-inline:12px}
  .section{padding-block:40px}
  .grid{gap:16px}
  .card{padding:16px;border-radius:var(--radius-btn)}
  .btn{padding:11px 16px;font-size:.95rem}
  .btn-sm{padding:6px 10px;font-size:.8rem;min-height:36px}
  .nav-actions{gap:8px}
  .lang-btn{padding:7px 9px;font-size:.85rem;min-width:52px;max-width:46vw}
  .hero-actions{gap:8px}
  .hero-actions .btn{width:100%}
  .topbar{font-size:.78rem}
  .topbar-inner{padding-block:5px}
  /* ★ ≤400px 隐藏邮箱：email + phone + WhatsApp 三项在 375px 上实测需 360px 而只有 336px，
       会折成两行把顶栏从 34px 顶到 64px，--header-h 随之从 104px 变成 133px —— 锚点跳转
       又会被 header 盖住（这正是 §9.3 #14 要根治的那个 bug）。
       邮箱在页脚与联系页都有，是手机上最不常用的一项；电话与 WhatsApp 保留（可直接点）。 */
  .topbar-email{display:none}
  .trust-item{padding:16px}
  .footer-grid{gap:24px}
  .gallery-thumb img{width:56px;height:56px}
  .thanks-card{padding-block:32px}
}

/* ---- 22.8 移动端不显示悬浮条 ---- */
@media (min-width:768px){
  .mobile-cta{display:none!important}
}

/* ---- 22.9 仅在真正支持 hover 的设备上调色，避免触摸粘滞 hover ----
   ★ 卡片类不再在这里改描边色 —— hover 时描边从 1.32:1 跳到 3.62:1 会把卡片边"啪"地变重，
     卡片 hover 统一交给「阴影 + 上抬」（§5.3 / #21）。 */
@media (hover:hover) and (pointer:fine){
  .product-card-link,.chip,.pager-link{transition:color .16s var(--ease-slide)}
}


/* ---- 22.10 尊重系统的减弱动效偏好 ---- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ============================================================
   23. RTL（阿拉伯语）—— 改前 4 条 → 改后 30+ 条
   ------------------------------------------------------------
   基础法则：尽量用逻辑属性，让浏览器自动镜像；
   仅在「方向性语义」（箭头、渐变方向、分隔符号）处显式覆盖。
   ============================================================ */

/* 23.1 阿语字形 / 排版：不能被字距拆开、需要更大行距 */
[lang="ar"],[lang="fa"],[lang="he"]{font-family:var(--font-ar)}
[dir="rtl"]{letter-spacing:0}
[dir="rtl"] body,[dir="rtl"] p,[dir="rtl"] li,[dir="rtl"] .card p{line-height:1.85}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4{line-height:1.4}
[dir="rtl"] .trust-value,[dir="rtl"] .lead-value,[dir="rtl"] .moq-card-value,
[dir="rtl"] .timeline-year{font-variant-numeric:tabular-nums;unicode-bidi:isolate}

/* 23.2 方向性图形：箭头 / 勾选 / 面包屑分隔符 */
[dir="rtl"] .ic-arrow{transform:scaleX(-1)}
/* ★ 电话 / 邮箱 / WhatsApp 号在 RTL 下必须锁成 LTR 岛（§10）。
   这些串里的 "+" "-" 空格是 bidi 中性字符，落在 RTL 段落里会被算法重新分配方向，
   实测 /ar/ 页逐字符 x 坐标：
     "+86 189 2686 4578" → 336 319 328 315 289 297 306 284 250 ... 237
       数字分组被整段倒排，视觉上读成「4578 2686 189 +86」
     "+86-0755-89357215" → 298 175 182 ... 290
       "+" 被甩到整串最右侧，和号码分家
   号码和邮箱是必须逐字符照读的标识符，不是散文，方向不能让 bidi 猜。
   用属性选择器命中，不依赖类名 —— 这三个 href 前缀是语义本身。 */
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href^="mailto:"],
[dir="rtl"] a[href*="wa.me"]{direction:ltr;unicode-bidi:isolate}
/* 下拉当前项的 3px 竖条：inset 盒阴影是物理属性，RTL 下必须翻到右侧，
   否则竖条会出现在阿语阅读终点的反面 */
[dir="rtl"] .dropdown li a[aria-current]{box-shadow:inset -3px 0 0 var(--c-accent)}
[dir="rtl"] .breadcrumb-item:not(:last-child)::after{content:"\\"}
[dir="rtl"] .point-list li::before{inset-inline-start:auto;inset-inline-end:0}
[dir="rtl"] .product-card-link .ic-arrow,[dir="rtl"] .text-link .ic-arrow{display:inline-block}
[dir="rtl"] .point-list li{padding-inline-start:0;padding-inline-end:24px}
[dir="rtl"] .check-mark{unicode-bidi:isolate}

/* 23.3 渐变方向镜像（否则深色端跑错一侧） */
[dir="rtl"] .hero{background-image:linear-gradient(225deg,var(--c-primary) 0%,
                  var(--c-primary-600) 45%,var(--c-primary-dark) 100%)}
[dir="rtl"] .cta-bar{background-image:linear-gradient(240deg,var(--c-primary) 0%,
                     var(--c-primary-600) 55%,var(--c-primary-dark) 100%)}
[dir="rtl"] .process-no{background-image:linear-gradient(220deg,var(--c-primary-600),var(--c-primary))}

/* 23.3b Hero 轮播的 RTL 专项（§10.2 新增 4 条）---------------------------------

   对照表（哪些必须显式镜像，哪些交给逻辑属性）：
     箭头按钮位置   → 不需要（inset-inline-start/end 自动镜像，已是逻辑属性）
     箭头内的 chevron → 必须 scaleX(-1)
     横向渐变遮罩   → 必须 96deg → 264deg（否则重色端跑到错的一侧，文字区对比度塌）
     竖向渐变 / 卡片顶条 → 不需要（垂直方向无手性）
     圆点组顺序     → 不需要（flex 自动镜像，"第 1 张"在最右才是正确的）
     竖排 ▾ 下拉箭头 → 不需要（垂直无手性） */
[dir="rtl"] .hero-overlay{
  background:
    linear-gradient(264deg,
      rgba(7,28,49,.88) 0%,
      rgba(7,28,49,.66) 40%,
      rgba(7,28,49,.34) 100%),
    linear-gradient(180deg,
      rgba(6,23,41,.30) 0%,
      rgba(6,23,41,.55) 100%)}
/* 箭头按钮位置由 inset-inline-* 自动镜像，只有里面的 chevron 图形需要翻 */
[dir="rtl"] .hero-nav svg{transform:scaleX(-1)}
/* 控件组内在方向跟随书写方向 */
[dir="rtl"] .hero-dots{direction:rtl}
/* 连写文字禁止字距（会切断字母连接），uppercase 在阿语下也是空操作 */
[dir="rtl"] .section-eyebrow{letter-spacing:0;text-transform:none}

/* 23.4 下拉 / 弹出层：对齐到逻辑末端，不越视口 */
[dir="rtl"] .dropdown{inset-inline-start:auto;inset-inline-end:0}
[dir="rtl"] .nav-item.has-dropdown .dropdown{inset-inline-start:auto;inset-inline-end:0}
[dir="rtl"] .dropdown-lang{inset-inline-start:0;inset-inline-end:auto}
[dir="rtl"] .dropdown li a{text-align:start}

/* 23.5 移动端抽屉 + 汉堡按钮 */
[dir="rtl"] .nav-toggle{margin-inline-start:0}
[dir="rtl"] .nav-item> a{justify-content:space-between;letter-spacing:0}
/* ★ 语言按钮在 RTL 下**不再**用 row-reverse。
   改前按钮内容是「🌐 母语名 ▾」，row-reverse 是为了让地球图标在 RTL 里仍贴在左端；
   去掉图标后按钮只剩「缩写 ▾」，若保留 row-reverse，RTL 里就成了「缩写 ▾」左→右排列，
   与 LTR 完全一样 = 没有镜像（RTL 读者从右往左读，▾ 应在缩写的左边）。
   去掉该规则后 flex 的自然 RTL 行为给出「▾ 缩写」左→右，即缩写在右、▾ 在左 —— 正确镜像。 */

/* 23.6 卡片顶部强调条 → 逻辑属性（自动跟随书写方向）。
   ★ .card 不需要再单独设 border-inline-start：四边 border 已由 .card 自身给出（#6，冗余规则已删）。*/

/* 23.7 列表 / 时间轴 / 流程 / 表单行 */
[dir="rtl"] .checklist-item{direction:rtl}
[dir="rtl"] .checklist-item .check-mark{order:0}
[dir="rtl"] .timeline-item{grid-template-columns:minmax(0,1fr) 96px}
[dir="rtl"] .timeline-year{text-align:end;grid-column:2;grid-row:1}
[dir="rtl"] .timeline-body{grid-column:1;grid-row:1}
[dir="rtl"] .process-step{direction:rtl}
[dir="rtl"] .product-meta dt{text-align:start}
[dir="rtl"] .fc-label{text-align:start}
[dir="rtl"] .form-label{text-align:start}

/* 23.8 布局容器方向一致性 */
[dir="rtl"] .cta-bar-inner,[dir="rtl"] .hero-inner,[dir="rtl"] .section-head,
[dir="rtl"] .topbar-inner,[dir="rtl"] .footer-bottom-inner,
[dir="rtl"] .gallery-thumbs,[dir="rtl"] .trust-list,[dir="rtl"] .social-list,
[dir="rtl"] .footer-grid,[dir="rtl"] .chip-list,[dir="rtl"] .check-grid,
[dir="rtl"] .form-row,[dir="rtl"] .nav-actions,[dir="rtl"] .mobile-cta,
[dir="rtl"] .contact-list,[dir="rtl"] .thanks-actions,[dir="rtl"] .product-actions,
[dir="rtl"] .hero-actions,[dir="rtl"] .cta-bar-actions,
[dir="rtl"] .filter-list,[dir="rtl"] .pager-list,[dir="rtl"] .testimonial-meta{direction:rtl}

/* 23.9 表格：表头列的逻辑起点跟随书写方向 */
[dir="rtl"] th,[dir="rtl"] td{text-align:start}
[dir="rtl"] .skip-link{border-end-end-radius:0;border-end-start-radius:var(--radius-sm)}

/* 23.10 CJK 不需要任何额外方向处理，但禁用阿语的自动断字 */
[dir="rtl"] :lang(ar){hyphens:manual}

/* ============================================================
   24. 打印
   ============================================================ */
@media print{
  .mobile-cta,.cta-bar,.site-header,.nav-toggle,.topbar{display:none!important}
  a[href]::after{content:"";}
  body{background:#fff;color:#000}
  .card,.table-wrap{box-shadow:none;border-color:#999}
  .hero,.site-footer{background:#fff!important;color:#000!important}
  .hero-overlay{display:none}
  .hero-title,.hero-subtitle,.hero-eyebrow,.cta-bar-text h2,
  .cta-bar-text p,.footer-title{color:#000!important}
  /* 轮播在纸上只保留第 1 张（其余 opacity:0 已经不可见），控件一律不打印 */
  .hero-nav,.hero-toggle,.hero-dots{display:none!important}
}

/* ============================================================
   社媒图标（页尾）/ 关于页图片 / 质量页形象图
   ============================================================ */

/* 页尾社媒图标：后台启用并填 URL → 品牌色实心亮起；未配置 → 灰显占位 */
.social-icons{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  list-style:none;
  padding:0;
  margin:0;
}
.social-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:10px;
  background:var(--brand, #0A66C2);
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.social-icon svg{
  width:20px;
  height:20px;
  fill:#fff;
}
.social-icon:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(0,0,0,.18);
}
.social-icon.is-inactive{
  background:#e2e6ec;
  cursor:default;
}
.social-icon.is-inactive svg{
  fill:#9aa4b2;
}
.social-icon.is-inactive:hover{
  transform:none;
  box-shadow:none;
}

/* 关于页：工厂形象图 + 图集 */
.about-feature{
  margin:0 0 32px;
  border-radius:var(--radius-card, 14px);
  overflow:hidden;
  box-shadow:var(--shadow-card, 0 10px 30px rgba(6,23,41,.12));
}
.about-feature img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16 / 9;
  object-fit:cover;
}
.about-gallery .gallery-card{
  margin:0;
  overflow:hidden;
  padding:0;
}
.about-gallery .gallery-card img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:3 / 2;
  object-fit:cover;
  transition:transform .25s ease;
}
.about-gallery .gallery-card:hover img{
  transform:scale(1.04);
}

/* 质量页：工厂/质检实景图 */
.quality-hero{
  margin:0 0 32px;
  border-radius:var(--radius-card, 14px);
  overflow:hidden;
  box-shadow:var(--shadow-card, 0 10px 30px rgba(6,23,41,.12));
}
.quality-hero img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16 / 9;
  object-fit:cover;
}

/* 联系页：微信 / WhatsApp 二维码（图片由后台「站点设置」上传，替换即生效） */
.contact-qr{
  margin-block-start:24px;
  padding-block-start:20px;
  border-block-start:1px solid var(--c-border);
}
.contact-qr-title{
  margin:0 0 12px;
  font-size:1rem;
  font-weight:700;
  color:var(--c-primary);
}
.contact-qr-grid{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
}
.qr-card{
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:12px;
  background:#fff;
  border:1px solid var(--c-border);
  border-radius:var(--radius-card, 14px);
  box-shadow:0 4px 14px rgba(6,23,41,.06);
}
.qr-card img{
  display:block;
  width:132px;
  height:132px;
  object-fit:contain;
  border-radius:8px;
}
.qr-card figcaption{
  font-size:.85rem;
  font-weight:600;
  color:var(--c-muted);
  letter-spacing:.02em;
}
@media (max-width:520px){
  .contact-qr-grid{gap:12px}
  .qr-card{flex:1 1 0;padding:10px}
  .qr-card img{width:100%;height:auto;max-width:140px;aspect-ratio:1}
}