/*
Theme Name: 炬泓新材料 JUHONG
Theme URI: https://www.gdjhxc.com/
Author: JUHONG
Description: 炬泓新材料官网主题 —— 面向 POK 聚酮工程塑料代理商的 B2B 展示型主题，包含产品库、应用领域、技术支持与询价表单。
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: juhong
*/

/* =========================================================================
   1. 设计变量
   ========================================================================= */
:root {
	--ink:        #0A1B22;
	--ink-800:    #0E262F;
	--ink-700:    #123039;
	--ink-600:    #1B4450;
	--ink-500:    #2A5B67;

	/*
	 * 深色区块的渐变用色。
	 *
	 * 2026-11-11 统一 UI 时收进来的：此前 hero / page-hero / product-hero / cta-band /
	 * 页脚各自调了不同的渐变中间值（#0E2A33 / #102C36 / #0F2A34 / #0E262F），
	 * 而且都是硬编码。单看每一块都还行，并排上下滚动时能看出底色在「换档」——
	 * 尤其是从深色 hero 滚到深色 CTA 条，会有一次非常轻微的色阶跳变。
	 * 现在全站深色渐变只允许用这三个变量拼，不允许再出现裸色值。
	 */
	--ink-deep:   #08141B;  /* 最深，用于图片遮罩的收敛点 */
	--ink-wash:   #0E2A33;  /* 渐变中段，比 --ink 略亮一档 */
	--ink-softer: #102C36;  /* 渐变中段偏右上，用于大面积深色背景 */

	--paper:      #F7F5F0;
	--paper-2:    #EFEBE2;
	--paper-3:    #E4DED2;
	--white:      #FFFFFF;

	/*
	 * 铜色与灰色（部署前可读性终审统一调深）。
	 *
	 * 起因：用 CDP 实测全站文字对比度，发现两类系统性不足 ——
	 *   ① 铜色 #B0653A 用在 .label（11px）、.pcard-grade（11.5px）、
	 *      .pm figcaption span（10px）这类小字上，对 #F7F5F0 米纸底只有
	 *      4.04:1，对 #FFFFFF 是 4.40:1，都够不到 WCAG AA 的 4.5:1。
	 *   ② --muted-2 #8A9BA0 更差，白底 2.89:1、米纸底 2.65:1 —— 这个灰
	 *      原本设计是给「分隔线级」的装饰文字用的，结果被大量 10px 标签复用。
	 *
	 * 调法：不换色相，只压明度。
	 *   --copper   #B0653A → #A0562F   米纸 4.93 / 白 5.37
	 *   --copper-dk 同步压深，保持与主色的层次差
	 *   --muted    #5E747A → #556B71   米纸 5.17 / 白 5.63（正文级）
	 *   --muted-2  #8A9BA0 → #6B8186   米纸 3.94 / 白 4.30
	 *
	 * --muted-2 不能再往深压了：它要跟 --muted(#556B71) 保持肉眼可辨的层次差，
	 * 再深两档就并成同一个灰，注释性小字与正文的层级会塌掉。所以剩下的
	 * 硬缺口（说明性小字仍在 4.0 左右）用「哪些地方允许用它」来管：
	 * 只承载注释、编号、装饰点，不承载用户必须读到才能决策的信息。
	 * 需要读的说明文字（表注、字段标签、联系号码）一律改用 --muted。
	 *
	 * 新加的 --copper-pop 保留原来的 #B0653A，专供按钮底色与图标笔画这类
	 * 「非小字」场景 —— 那里反正不靠对比度读，明度低一点反而更沉。
	 */
	--copper:     #A0562F;
	--copper-2:   #C9814F;
	--copper-lt:  #E3B58C;
	--copper-dk:  #8A4A28;
	--copper-dim: rgba(176, 101, 58, .12);
	--copper-pop: #B0653A;

	--text:       #14262C;
	--muted:      #556B71;
	--muted-2:    #6B8186;

	/*
	 * 语义色。原先只散在 .notice-ok / .notice-err 两条规则里的裸色值，
	 * 收进变量是为了以后加「提交成功」「资料已发出」之类提示时直接复用，
	 * 不至于每加一处就再调一个绿。
	 */
	--ok:         #2E7D5A;
	--err:        #A03A3A;

	/* 卡片 hover 的暖白，比 --white 低 1 个明度，避免在米纸上「亮得跳出来」 */
	--surface-hi: #FFFDF9;

	--line:       rgba(10, 27, 34, .13);
	--line-soft:  rgba(10, 27, 34, .07);
	--line-dark:  rgba(255, 255, 255, .13);

	/*
	 * 深色底上的白色透明度梯级（2026-11-11 统一 UI 时建立）。
	 *
	 * 起因：全站原本散着 32 种白色透明度（.55 / .56 / .58 / .6 / .62 / .68 / .7 / .72 / .74 …），
	 * 数值只差 0.01~0.02，肉眼却看得出「同一层级的两行字亮度不同」——
	 * 典型如顶栏定位语与页脚正文，本该是同一档的次要文字，实际一个是 .72 一个是 .55。
	 *
	 * 现在只允许用下面 6 档，按语义命名而不是按数值命名：
	 *   --on-dark-1     主要文字（标题、正文）
	 *   --on-dark-2     次要文字（说明、列表项）
	 *   --on-dark-3     弱化文字（脚注、单位、标签）
	 *   --on-dark-4     装饰性描边、按钮边框
	 *   --on-dark-fill  极淡底纹
	 *   --on-dark-line  分隔线
	 * 新增深色区块样式时从这里挑，不要再写裸 rgba()。
	 */
	--on-dark-1:  rgba(255, 255, 255, .92);
	--on-dark-2:  rgba(255, 255, 255, .66);
	--on-dark-3:  rgba(255, 255, 255, .48);
	--on-dark-4:  rgba(255, 255, 255, .30);
	--on-dark-fill:  rgba(255, 255, 255, .06);
	--on-dark-line:  rgba(255, 255, 255, .12);

	--sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
	        "Hiragino Sans GB", "Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
	--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	--wrap: 1240px;
	--pad: 32px;
	--radius: 2px;

	/*
	 * 纵向间距标尺（2026-11-11 统一 UI 时建立）。
	 *
	 * 收口前各区块自己写 clamp()，上限值散成 112 / 116 / 84 / 76 / 72 / 68 六种。
	 * 单看每块都合理，但相邻两个区块一个 116、一个 112 时，滚动中能感到节奏"差半拍"，
	 * 又说不上哪里不对 —— 这正是「整体不够统一」最难修的一类问题。
	 *
	 * 现在只留三档，按语义使用：
	 *   --sp-section  常规内容区块（首页各 section、关于、应用领域…）
	 *   --sp-tight    紧凑区块（/support/ 的快速联系条、条目较少的板块）
	 *   --sp-hero     大块头（hero、page-hero、product-hero、CTA 条）
	 * 改间距只改这里，全站同步。
	 */
	--sp-section: clamp(64px, 8vw, 112px);
	--sp-tight:   clamp(48px, 5.5vw, 76px);
	--sp-hero:    clamp(52px, 6vw, 84px);

	/*
	 * 全牌号速查表的可视范围。
	 * 84 个牌号全展开约 4200px 高，把页面拉得极长；这里限制成 6 行数据，
	 * 其余在表格内部滚动（表头常驻）。
	 * 改行数只动 --quick-rows。
	 *
	 * 下面两个高度是**实测值**，不是估的（用 getBoundingClientRect 量的）：
	 *   --quick-row-h  50px：12px 上内边距 + 13.5px×1.85 行高 + 12px 下内边距 + 1px 分隔线
	 *   --quick-head-h 45.3px：同上但字号 11px、字重 600，且只有一条底边线
	 *
	 * ⚠️ 表头取 48 而不是 45.3，是刻意留的 2.7px 余量：
	 * 容器 max-height 是「边框盒」高度，其中 1px 被 border-bottom 占掉，
	 * 真正能放内容的只有 clientHeight = max-height − 1。
	 * 按 45.3 算：45.3 + 6×50 = 345.3 > 344 → 第 6 行会被切掉最后 1px，
	 * 单看文字不明显，但「原生」小标签的边框会被削平，一眼就能看出是切过的。
	 * 48 + 300 = 348 → clientHeight 347，剩 1.7px 余量，6 行完整。
	 *
	 * 估小了会把最后一行切掉半截（第一次写 47/39 就踩了这个坑），
	 * 所以以后改字号或内边距，务必重新量一遍再改这两个数。
	 */
	--quick-rows: 6;
	--quick-row-h: 50px;
	--quick-head-h: 48px;

	--ease: cubic-bezier(.22, .61, .36, 1);
	--dur: .55s;
}

/* =========================================================================
   2. 基础
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 96px;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--text);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.85;
	font-weight: 400;
	letter-spacing: .01em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

body.nav-open { overflow: hidden; }

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; transition: color .25s var(--ease); }
a:hover { color: var(--copper); }

h1, h2, h3, h4, h5 {
	margin: 0 0 .6em;
	font-weight: 600;
	line-height: 1.24;
	letter-spacing: -.015em;
	color: var(--ink);
	text-wrap: balance;
}

h1 { font-size: clamp(2.3rem, 4.4vw, 4rem); font-weight: 600; letter-spacing: -.03em; }
h2 { font-size: clamp(1.7rem, 2.7vw, 2.6rem); letter-spacing: -.025em; }
h3 { font-size: clamp(1.1rem, 1.4vw, 1.3rem); }
h4 { font-size: 1rem; }

p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1.2em; padding-left: 1.2em; }
li { margin-bottom: .35em; }

strong { font-weight: 600; color: inherit; }
em { font-style: normal; }

::selection { background: var(--copper); color: #fff; }

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 var(--pad);
}

.skip {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--ink);
	color: #fff;
	padding: 12px 20px;
	z-index: 999;
}
.skip:focus { left: 8px; top: 8px; color: #fff; }

/* =========================================================================
   2.1 键盘焦点（2026-11-11 收口时补）
   =========================================================================
   收口前全站只有 5 处零星写了 :focus-visible（跳过链接、表单、证书放大、
   返回顶部），导航链接、按钮、产品卡、页脚链接统统是 outline-style: none ——
   键盘用户按 Tab 时屏幕上没有任何变化，属于正式版不该带出去的可访问性缺口。

   策略：
   - 只在 :focus-visible 生效（键盘导航），鼠标点击不出现焦点环，不干扰视觉；
   - 统一 2px 铜色描边 + 3px 偏移，在浅色底上清楚，在深色底上也够亮；
   - 深色区块单独一档（页面换个更亮的颜色），避免铜色压在深墨绿上看不清。
   ========================================================================= */
:focus-visible {
	outline: 2px solid var(--copper);
	outline-offset: 3px;
	border-radius: 1px;
}
/* 深色表面上换成浅铜，对比度更高 */
.section-ink :focus-visible,
.hero :focus-visible,
.page-hero :focus-visible,
.product-hero :focus-visible,
.cta-band :focus-visible,
.site-footer :focus-visible,
.topbar :focus-visible,
.pok-figure :focus-visible {
	outline-color: var(--copper-lt);
}
/* 卡片整块可点，焦点环画在卡片内侧，免得被相邻卡片的边框裁掉 */
.pcard:focus-visible,
.al:focus-visible,
.mat:focus-visible,
.app:focus-visible {
	outline-offset: -3px;
}
/* 用鼠标点击时不要焦点环（:focus-visible 已保证这点，这条是给老浏览器的兜底） */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
	outline: none;
}

.ico { flex: 0 0 auto; }

/* 通用标签 */
.label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--copper);
	margin-bottom: 18px;
}
.label::before {
	content: "";
	width: 22px;
	height: 1px;
	background: currentColor;
	opacity: .7;
}
.label-light { color: var(--copper-lt); }

.num-tag {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .16em;
	color: var(--muted);
}

/* =========================================================================
   3. 按钮
   ========================================================================= */
.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 26px;
	border: 1px solid transparent;
	border-radius: var(--radius);
	font-size: 14.5px;
	font-weight: 500;
	letter-spacing: .04em;
	line-height: 1;
	cursor: pointer;
	overflow: hidden;
	transition: background .3s var(--ease), color .3s var(--ease),
	            border-color .3s var(--ease), transform .3s var(--ease);
}
.btn .btn-ar { display: inline-flex; transition: transform .35s var(--ease); }
.btn:hover .btn-ar { transform: translateX(4px); }

.btn-primary {
	background: var(--ink);
	color: #fff;
	border-color: var(--ink);
}
.btn-primary:hover {
	background: var(--copper);
	border-color: var(--copper);
	color: #fff;
	transform: translateY(-2px);
}

.btn-line {
	border-color: var(--line);
	color: var(--ink);
	background: transparent;
}
.btn-line:hover { border-color: var(--ink); background: var(--ink); color: #fff; }

/*
 * 主按钮底色（部署前终审调整）。
 * 原来用 --copper #B0653A，白字压在上面只有 4.40:1 —— 刚好卡在 AA 线下
 * 一点点，属于「看起来没问题、过机检就挂」的那种。改用 #A0562F（5.43:1），
 * 与正文铜色同一个值，hover 再压深一档，层次反而比原来清楚。
 */
.btn-solid {
	background: var(--copper);
	color: #fff;
	border-color: var(--copper);
}
.btn-solid:hover { background: var(--copper-dk); border-color: var(--copper-dk); color: #fff; transform: translateY(-2px); }

.btn-ghost-light {
	border-color: rgba(255, 255, 255, 0.30);
	color: #fff;
	background: transparent;
}
.btn-ghost-light:hover {
	background: #fff;
	color: var(--ink);
	border-color: #fff;
	transform: translateY(-2px);
}

/* 文字链 */
.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 500;
	color: var(--ink);
	border-bottom: 1px solid var(--line);
	padding-bottom: 3px;
	transition: color .25s var(--ease), border-color .25s var(--ease);
}
.link-arrow .ico { transition: transform .3s var(--ease); }
.link-arrow:hover { color: var(--copper); border-color: var(--copper); }
.link-arrow:hover .ico { transform: translateX(4px); }

/* =========================================================================
   4. 顶栏 / 页头
   ========================================================================= */
.topbar {
	background: var(--ink);
	color: rgba(255, 255, 255, 0.66);
	font-size: 12.5px;
	letter-spacing: .02em;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.topbar-in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 38px;
}
/*
 * 顶栏左右两栏。
 *
 * 2026-11-11 语言切换移进 .topbar-r 之后，这一条在 320px 下会横向溢出 23px：
 * flex 子项的 min-width 默认是 auto（= min-content），而 .tb-item 是 nowrap，
 * 左侧那句「韩国晓星 HYOSUNG · POKETONE 中国区总代理」整句撑着缩不下来，
 * 于是右侧语言切换被顶出视口。
 *
 * 修法：左栏吃掉剩余空间并允许收缩（min-width:0 + flex:1），右栏 flex:none 定死不动。
 * 左栏内部再让文字省略号截断——宁可截定位语，也不能截掉「中 / EN」这两个字。
 */
.topbar-l, .topbar-r { display: flex; align-items: center; gap: 18px; }
.topbar-l { flex: 1 1 auto; min-width: 0; gap: 0; }
.topbar-r { flex: none; }
.tb-item { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
/*
 * 左栏内的条目允许收缩。
 * .topbar-l 的 gap 已归零，间距改由 .tb-item 的 margin 提供 —— 否则 flex 的 gap
 * 不参与收缩计算，收缩后仍会多出一段空白。
 */
.topbar-l .tb-item { min-width: 0; }
.topbar-l .tb-item + .tb-item { margin-left: 18px; }
/*
 * 品牌定位语是「可牺牲」的那一项：优先保住右侧的「原厂授权 · 自有改性工厂」和语言切换。
 *
 * display 必须从 inline-flex 改回 block —— .tb-brand 里只有纯文本，不需要 flex 排版，
 * 而 text-overflow: ellipsis 对 flex 容器本身**不生效**（它只作用于块级/行内块的文本溢出，
 * flex 容器内的文本被包成匿名 flex 项，省略号出不来），实测表现就是英文版硬切成
 * 「Authorized Dis」后面直接断开，没有任何省略号。
 */
.topbar-l .tb-brand {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 0 1 auto;
}
.topbar a.tb-item:hover { color: #fff; }
.tb-brand { color: rgba(255, 255, 255, 0.92); font-weight: 500; }
.tb-sep { width: 1px; height: 12px; background: rgba(255, 255, 255, 0.12); padding: 0; }
.topbar .ico { opacity: .6; }

.site-header {
	position: sticky;
	top: 0;
	z-index: 90;
	background: rgba(247, 245, 240, .92);
	backdrop-filter: saturate(160%) blur(14px);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	border-bottom: 1px solid var(--line-soft);
	transition: box-shadow .3s var(--ease), background .3s var(--ease);
}
.site-header.is-stuck {
	box-shadow: 0 1px 24px rgba(10, 27, 34, .07);
	background: rgba(247, 245, 240, .97);
}
.header-in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	min-height: 78px;
}

.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand-mark { color: var(--copper); display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text strong {
	font-size: 20px;
	font-weight: 600;
	letter-spacing: .08em;
	color: var(--ink);
	white-space: nowrap;
}
.brand-text em {
	margin-top: 5px;
	font-family: var(--mono);
	font-size: 9.5px;
	letter-spacing: .17em;
	color: var(--muted);
}

.nav-list {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.nav-list li { position: relative; margin: 0; }
.nav-list > li > a {
	position: relative;
	display: block;
	padding: 10px 14px;
	font-size: 15px;
	font-weight: 500;
	color: var(--ink);
	letter-spacing: .01em;
}
.nav-list > li > a::after {
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 4px;
	height: 1px;
	background: var(--copper);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s var(--ease);
}
.nav-list > li > a:hover::after,
.nav-list > li.current-menu-item > a::after,
.nav-list > li.current-menu-parent > a::after,
.nav-list > li.current_page_parent > a::after { transform: scaleX(1); }
.nav-list > li.current-menu-item > a { color: var(--copper); }

/* 二级菜单 */
.nav-list .sub-menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	min-width: 216px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: #fff;
	border: 1px solid var(--line-soft);
	box-shadow: 0 18px 44px rgba(10, 27, 34, .12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
	z-index: 10;
}
.nav-list li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-list .sub-menu li { margin: 0; }
.nav-list .sub-menu a {
	display: block;
	padding: 9px 12px;
	font-size: 14px;
	color: var(--text);
	border-radius: 2px;
}
.nav-list .sub-menu a:hover { background: var(--paper-2); color: var(--copper); }

.header-cta { display: flex; align-items: center; }
.header-cta .btn { padding: 13px 22px; font-size: 14px; }

.nav-mobile-extra { display: none; }

.burger {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--line);
	background: transparent;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 5px;
}
.burger span {
	display: block;
	width: 18px;
	height: 1.5px;
	background: var(--ink);
	transition: transform .3s var(--ease), opacity .2s;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* =========================================================================
   5. 首屏
   ========================================================================= */
.hero {
	position: relative;
	background: var(--ink);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 90% at 78% 18%, rgba(176, 101, 58, .26) 0%, rgba(176, 101, 58, 0) 58%),
		radial-gradient(90% 80% at 10% 100%, rgba(42, 91, 103, .5) 0%, rgba(42, 91, 103, 0) 62%),
		linear-gradient(165deg, var(--ink) 0%, var(--ink-wash) 52%, var(--ink) 100%);
	z-index: -2;
}
.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
	background-size: 84px 84px;
	mask-image: radial-gradient(100% 80% at 50% 40%, #000 20%, transparent 78%);
	-webkit-mask-image: radial-gradient(100% 80% at 50% 40%, #000 20%, transparent 78%);
	z-index: -1;
	pointer-events: none;
}

.hero-in {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: 48px;
	align-items: center;
	/*
	 * ⚠️ 这里只能用 padding-top / padding-bottom，绝不能用 padding 简写。
	 *
	 * .hero-in 是「.wrap hero-in」组合，.wrap 提供了 padding: 0 var(--pad)。
	 * 一旦写简写 `padding: A 0 B`，左右就被显式改成 0，把 .wrap 的横向内边距
	 * 整个覆盖掉（两者同权重，.hero-in 在文件后面，胜出）。
	 *
	 * 桌面端 --wrap 居中、左右各有富余留白，看不出问题；到 390px 手机上
	 * --pad 只有 20px，标题「专注 POK 聚酮」、正文、按钮组全部贴到屏幕边缘
	 * （距边 0px），而页头 logo、顶栏是 20px —— 一眼就能看出没对齐。
	 * 这个 BUG 一直存在，只是之前截图工具视口算错（mobile=True → clientWidth
	 * 恒为 980），假 390 截图看不出来。
	 */
	padding-top: var(--sp-section);
	padding-bottom: clamp(48px, 6vw, 76px);
	position: relative;
}

.hero-copy { max-width: 620px; }
.hero h1 {
	color: #fff;
	margin-bottom: 22px;
	font-weight: 600;
	letter-spacing: -.035em;
	line-height: 1.12;
}
.hero h1 .accent {
	display: block;
	color: var(--copper-lt);
}
.hero-lead {
	max-width: 540px;
	font-size: clamp(15px, 1.15vw, 17px);
	line-height: 1.95;
	color: rgba(255, 255, 255, 0.66);
	margin-bottom: 34px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.hero-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin-top: 40px;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.48);
}
.hero-meta span { display: inline-flex; align-items: center; gap: 7px; }
.hero-meta .ico { color: var(--copper-lt); opacity: .9; }

/* 首屏右侧分子图 */
.hero-visual { position: relative; display: flex; justify-content: center; align-items: center; }
.hero-visual svg { width: 100%; max-width: 520px; height: auto; }
.mol-rot { transform-origin: 260px 260px; animation: molspin 60s linear infinite; }
@keyframes molspin { to { transform: rotate(360deg); } }
.mol-dash { stroke-dasharray: 3 7; animation: dashmove 3.5s linear infinite; }
@keyframes dashmove { to { stroke-dashoffset: -40; } }
.hero-visual .mol-pulse { animation: molpulse 4s ease-in-out infinite; }
@keyframes molpulse { 0%, 100% { opacity: .25; } 50% { opacity: .85; } }

.hero-visual-tag {
	position: absolute;
	right: 0;
	bottom: 4%;
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: .18em;
	color: rgba(255, 255, 255, 0.30);
	writing-mode: vertical-rl;
}

/* 首屏数据条 */
.hero-stats {
	/* 分隔线用 --on-dark-line（.12）：归并脚本一度把它压到 .06，几乎看不见。
	   这条线是 hero 与数据条的分界，太淡会让数据条像"浮"在深色里。 */
	border-top: 1px solid var(--on-dark-line);
	background: rgba(0, 0, 0, .18);
}
.hero-stats-in {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
.hstat {
	padding: 26px 24px 26px 0;
	border-right: 1px solid var(--on-dark-line);
}
.hstat:last-child { border-right: 0; }
.hstat:not(:first-child) { padding-left: 30px; }
.hstat-num {
	display: flex;
	align-items: baseline;
	gap: 4px;
	font-size: clamp(1.7rem, 2.6vw, 2.4rem);
	font-weight: 600;
	letter-spacing: -.03em;
	color: #fff;
	line-height: 1.1;
}
.hstat-num i {
	font-style: normal;
	font-family: var(--mono);
	font-size: .5em;
	color: var(--copper-lt);
	letter-spacing: 0;
}
.hstat-lbl {
	margin-top: 8px;
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.48);
	letter-spacing: .04em;
	/*
	 * word-break: keep-all —— 中文默认可以在任意两字之间断行，
	 * 地名这种专有名词被拆开（「重」/「庆」分两行）非常不专业。
	 * keep-all 让断行只发生在空格、间隔号这类真正的分词点。
	 *
	 * 2026-11-11 部署前复核：地名串补成「中国香港」后，第四格
	 * 可用宽度 240px、文字实测 240px —— 正好卡在边界上，字体渲染
	 * 差半个像素就会把「重庆」挤到第二行，而且看不出是为什么。
	 * 这里把字距从 .04em 收到 0（正文 221px + 字距 19px 才凑满 240px），
	 * 再把字号压到 12px，实测单行 221px，留出 19px 安全余量。
	 * 三格短文案的观感不受影响：这行本来就是极小的辅助信息。
	 */
	letter-spacing: 0;
	font-size: 12px;
	word-break: keep-all;
	overflow-wrap: anywhere;
}

/* =========================================================================
   6. 区块通用
   ========================================================================= */
.section { padding: var(--sp-section) 0; position: relative; }
.section-paper { background: var(--paper); }
.section-white { background: var(--white); }
.section-2 { background: var(--paper-2); }
.section-ink { background: var(--ink); color: rgba(255, 255, 255, 0.66); }
.section-ink h2, .section-ink h3, .section-ink h4 { color: #fff; }
.section-ink .label { color: var(--copper-lt); }
.section-tight { padding: var(--sp-tight) 0; }

.sec-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
	gap: 24px 64px;
	align-items: end;
	margin-bottom: clamp(36px, 4.5vw, 60px);
}
.sec-head h2 { margin-bottom: 0; max-width: 100%; line-height: 1.28; }
.sec-head-r { padding-bottom: 6px; }
.sec-head-r p {
	color: var(--muted);
	font-size: 15px;
	line-height: 1.9;
	margin: 0;
	max-width: 46ch;
}
.sec-head-center { grid-template-columns: 1fr; text-align: center; }
.sec-head-center h2 { margin: 0 auto; }
.sec-head-center .sec-head-r p { margin: 16px auto 0; }

.section-ink .sec-head-r p { color: rgba(255, 255, 255, 0.66); }

.sec-foot {
	margin-top: clamp(32px, 4vw, 52px);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	padding-top: 22px;
	border-top: 1px solid var(--line-soft);
}

/* 细线编号标题 */
.rule-title {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--line);
	margin-bottom: 28px;
}

/* =========================================================================
   7. 首屏下方滚动牌号带
   ========================================================================= */
.ticker {
	background: var(--ink-800);
	color: rgba(255, 255, 255, 0.30);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	overflow: hidden;
	padding: 13px 0;
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: .12em;
	white-space: nowrap;
}
.ticker-track {
	display: inline-flex;
	gap: 40px;
	animation: tick 46s linear infinite;
	will-change: transform;
}
.ticker-track span { display: inline-flex; align-items: center; gap: 0; }
.ticker-track span::after {
	content: "";
	width: 4px;
	height: 4px;
	background: var(--copper);
	opacity: .7;
	display: inline-block;
	margin-right: 40px;
}
@keyframes tick { to { transform: translateX(-50%); } }
.ticker:hover .ticker-track { animation-play-state: paused; }

/* =========================================================================
   8. 什么是 POK
   ========================================================================= */
.pok-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 80px);
	align-items: center;
}
.pok-body p { color: var(--muted); font-size: 15.5px; line-height: 1.95; }
.pok-body p strong { color: var(--ink); }

.pok-eq {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 28px 0 0;
	padding: 20px 22px;
	border: 1px solid var(--line);
	background: var(--white);
	font-family: var(--mono);
	font-size: 13px;
	letter-spacing: .04em;
	color: var(--ink);
	flex-wrap: wrap;
}
.pok-eq b { color: var(--copper); font-weight: 600; }
.pok-eq .eq-arrow { color: var(--muted-2); }

.pok-figure {
	position: relative;
	background: linear-gradient(150deg, var(--ink-800), var(--ink-700) 60%, var(--ink));
	padding: clamp(28px, 4vw, 46px);
	overflow: hidden;
}
.pok-figure::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
	background-size: 46px 46px;
	opacity: .55;
	pointer-events: none;
}
.pok-figure svg { position: relative; z-index: 1; width: 100%; height: auto; }
.pok-figure-cap {
	position: relative;
	z-index: 1;
	margin-top: 22px;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: .16em;
	color: rgba(255, 255, 255, 0.48);
	display: flex;
	justify-content: space-between;
	gap: 12px;
}

/* --- 材料实证条：真实结构式 + 本色粒子 --- */
.pok-material {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 18px;
	margin: clamp(26px, 3.4vw, 42px) 0 0;
}
.pm {
	display: flex;
	flex-direction: column;
	margin: 0;
	border: 1px solid var(--line);
	background: var(--white);
}
.pm-media {
	position: relative;
	height: clamp(150px, 15vw, 206px);
	overflow: hidden;
	background: #fff;
}
.pm-media img { display: block; width: 100%; height: 100%; }
.pm--mol .pm-media {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 clamp(18px, 3vw, 44px);
}
.pm--mol .pm-media img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
}
.pm--pellet .pm-media img { object-fit: cover; object-position: 50% 62%; }
.pm figcaption { padding: 13px 18px 15px; border-top: 1px solid var(--line-soft); }
.pm figcaption span {
	display: block;
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: .12em;
	color: var(--copper);
	margin-bottom: 6px;
}
.pm figcaption p { margin: 0; font-size: 12.5px; line-height: 1.7; color: var(--muted); }

/* 特性网格 */
.props-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border-top: 1px solid var(--line);
	border-left: 1px solid var(--line);
}
/* 只有两格时用两列（page-about 的授权说明）。不要用内联样式写死列数 */
.props-grid.props-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.prop {
	position: relative;
	padding: 34px 30px 32px;
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	background: transparent;
	transition: background .35s var(--ease);
}
.prop:hover { background: var(--white); }
.prop-ico {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--line);
	color: var(--copper);
	margin-bottom: 20px;
	transition: background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}
.prop:hover .prop-ico { background: var(--copper); border-color: var(--copper); color: #fff; }
.prop h3 { font-size: 16.5px; margin-bottom: 10px; letter-spacing: -.01em; }
.prop p { font-size: 13.8px; line-height: 1.85; color: var(--muted); margin: 0; }
.prop-metric {
	margin-top: 16px;
	font-family: var(--mono);
	font-size: 11.5px;
	letter-spacing: .08em;
	color: var(--copper);
	padding-top: 12px;
	border-top: 1px dashed var(--line);
}

/* =========================================================================
   9. 对比表
   ========================================================================= */
.cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp {
	width: 100%;
	min-width: 640px;
	border-collapse: collapse;
	font-size: 14px;
}
.cmp th, .cmp td {
	padding: 15px 16px;
	text-align: left;
	border-bottom: 1px solid var(--line-soft);
	vertical-align: middle;
}
.cmp thead th {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted);
	font-weight: 500;
	border-bottom: 1px solid var(--line);
	padding-bottom: 12px;
}
.cmp tbody tr { transition: background .25s var(--ease); }
.cmp tbody tr:hover { background: rgba(176, 101, 58, .05); }
.cmp td:first-child { font-weight: 500; color: var(--ink); }
.cmp .col-pok { background: rgba(176, 101, 58, .06); font-weight: 600; color: var(--copper); }
.cmp thead .col-pok { color: var(--copper); }

.bar-cell { display: flex; align-items: center; gap: 12px; min-width: 140px; }
.bar {
	position: relative;
	flex: 1;
	height: 6px;
	background: var(--paper-3);
	overflow: hidden;
}
.bar i {
	position: absolute;
	inset: 0 auto 0 0;
	background: var(--ink-600);
	width: 0;
	transition: width 1.1s var(--ease);
}
.cmp .col-pok .bar i { background: var(--copper); }
.bar-val { font-family: var(--mono); font-size: 11.5px; color: var(--muted); min-width: 34px; }
.cmp .col-pok .bar-val { color: var(--copper); }

/* 定性圆点评级 */
.dots {
	display: inline-block;
	font-size: 12px;
	letter-spacing: 1.5px;
	color: var(--copper);
	line-height: 1;
	white-space: nowrap;
}
.dots.dim { color: var(--muted); opacity: .85; }
.cmp .col-pok .dots { color: var(--copper); }

/* =========================================================================
   10. 产品卡
   ========================================================================= */
.pgrid {
	display: grid;
	/*
	 * 用 minmax(0, 1fr) 而不是 1fr。
	 * 裸 1fr 等价 minmax(auto, 1fr)，下限是 min-content ——
	 * 卡片里若有 nowrap 的牌号串（如「PK JH960G3 / G6 / JH900G8 / G10」），
	 * 轨道会被顶宽，超过容器后靠 overflow: hidden 硬裁，右侧内容被切掉。
	 */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	border-top: 1px solid var(--line);
	border-left: 1px solid var(--line);
}
.pcard {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 30px 28px 28px;
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	background: transparent;
	min-height: 240px;
	transition: background .35s var(--ease), transform .35s var(--ease);
	overflow: hidden;
}
.pcard::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 2px;
	background: var(--copper);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .45s var(--ease);
}
.pcard:hover { background: var(--white); color: inherit; }
.pcard:hover::before { transform: scaleX(1); }

/*
 * 产品卡配图：出血到卡片内边距之外，做到与卡片边框齐平。
 * 素材长宽比不统一（312×230 / 326×286 / 740×630），统一用 3:2 + object-fit:cover 裁切。
 */
.pcard-media {
	position: relative;
	z-index: 1;
	flex: none;
	margin: -30px -28px 22px;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--paper-2);
}
.pcard-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .7s var(--ease);
}
.pcard:hover .pcard-media img { transform: scale(1.04); }
/* 顶部铜线在配图之上，否则会被图片盖住 */
.pcard::before { z-index: 2; }
.pcard-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 18px;
}
.pcard-cat {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	/* 10px + muted-2 白底只有 2.89:1，改成正文级 --muted（5.63:1）并 +0.5px */
	color: var(--muted);
}
.pcard-arrow {
	color: var(--muted-2);
	transition: color .3s var(--ease), transform .3s var(--ease);
}
.pcard:hover .pcard-arrow { color: var(--copper); transform: translate(3px, -3px); }
.pcard h2,
.pcard h3 {
	font-size: 17px;
	margin-bottom: 8px;
	letter-spacing: -.01em;
	line-height: 1.4;
}
.pcard-grade {
	font-family: var(--mono);
	font-size: 11.5px;
	letter-spacing: .06em;
	color: var(--copper);
	margin-bottom: 12px;
}
.pcard-desc {
	font-size: 13.5px;
	line-height: 1.8;
	color: var(--muted);
	margin: 0 0 18px;
	flex: 1;
}
.pcard-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.pcard-tags span {
	font-size: 11.5px;
	padding: 3px 9px;
	border: 1px solid var(--line);
	color: var(--muted);
	letter-spacing: .02em;
}

/* 数量不固定时改用独立卡片，避免矩阵边框出现缺口 */
.pgrid-gap {
	gap: 16px;
	border: 0;
	grid-template-columns: repeat(3, 1fr);
}
.pgrid-gap .pcard {
	border: 1px solid var(--line);
	background: var(--white);
}
.pgrid-gap .pcard:hover { border-color: rgba(176, 101, 58, .45); }

/* 填格用的引导卡 */
.custom-band {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
	margin-top: 24px;
	padding: 28px 30px;
	border: 1px dashed var(--line);
	background: rgba(255, 255, 255, 0.48);
}
.custom-band h3 { font-size: 19px; margin-bottom: 8px; }
.custom-band p { font-size: 13.5px; color: var(--muted); line-height: 1.8; margin: 0; max-width: 62ch; }

/* 筛选 */
.filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 32px;
}
.filter button {
	padding: 9px 18px;
	border: 1px solid var(--line);
	background: transparent;
	color: var(--muted);
	font-family: var(--sans);
	font-size: 13.5px;
	cursor: pointer;
	transition: all .25s var(--ease);
}
.filter button:hover { border-color: var(--ink); color: var(--ink); }
.filter button.is-active {
	background: var(--ink);
	border-color: var(--ink);
	color: #fff;
}

/* =========================================================================
   11. 应用领域
   ========================================================================= */
.apps-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--line-soft);
	border: 1px solid var(--line-soft);
}
.app {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 34px 30px 30px;
	background: var(--paper);
	color: inherit;
	transition: background .35s var(--ease), color .35s var(--ease);
	overflow: hidden;
	min-height: 210px;
}
.app:hover { background: var(--ink); color: rgba(255, 255, 255, 0.66); }
.app:hover .app-t { color: #fff; }
.app-num {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: .16em;
	color: var(--muted);
	margin-bottom: 26px;
	display: block;
}
.app:hover .app-num { color: var(--copper-lt); }
.app .app-t { display: block; font-size: 18px; margin-bottom: 10px; transition: color .35s var(--ease); }
.app p { font-size: 13.5px; line-height: 1.8; color: var(--muted); margin: 0 0 18px; transition: color .35s var(--ease); }
.app:hover p { color: rgba(255, 255, 255, 0.66); }
.app-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 4px; }
.app-tags span {
	font-size: 11px;
	padding: 2px 8px;
	border: 1px solid var(--line);
	color: var(--muted);
	transition: border-color .35s var(--ease), color .35s var(--ease);
}
.app:hover .app-tags span { border-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.66); }
.app-ico {
	position: absolute;
	right: 24px;
	top: 26px;
	color: rgba(176, 101, 58, .22);
	transition: color .35s var(--ease), transform .45s var(--ease);
}
.app:hover .app-ico { color: rgba(255, 255, 255, 0.12); transform: scale(1.08); }

/* 应用卡配实拍图：出血到内距之外，与卡片边框齐平 */
.app-media {
	flex: none;
	margin: -34px -30px 24px;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--paper-2);
}
.app-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .7s var(--ease);
}
.app:hover .app-media img { transform: scale(1.04); }
.app--media { min-height: 0; }
.app--media .app-num { margin-bottom: 14px; }

/* 首页实物条：三张自有实拍，等高等比 */
.proof-strip {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
}
.proof { margin: 0; background: var(--paper); }
.proof-shot {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--paper-2);
}
.proof-shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.proof figcaption { padding: 18px 20px 24px; }
.proof figcaption span {
	display: block;
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: .12em;
	color: var(--copper);
	margin-bottom: 9px;
}
.proof figcaption p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.8;
	color: var(--muted);
}

/* =========================================================================
   12. 流程
   ========================================================================= */
.steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	counter-reset: step;
	border-top: 1px solid var(--line-dark);
}
.step {
	position: relative;
	padding: 32px 28px 8px 0;
	border-right: 1px solid var(--line-dark);
}
.step:last-child { border-right: 0; }
.step:not(:first-child) { padding-left: 28px; }
.step-n {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .16em;
	color: var(--copper-lt);
	margin-bottom: 18px;
	display: block;
}
.step h3 { font-size: 17px; color: #fff; margin-bottom: 10px; }
.step p { font-size: 13.5px; line-height: 1.85; color: rgba(255, 255, 255, 0.48); margin: 0; }

/* =========================================================================
   13. 关于 / 资质
   ========================================================================= */
.about-split {
	display: grid;
	grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
}
.about-quote {
	border-left: 2px solid var(--copper);
	padding-left: 22px;
	font-size: clamp(17px, 1.6vw, 21px);
	line-height: 1.75;
	color: var(--ink);
	font-weight: 500;
	margin-bottom: 26px;
	letter-spacing: -.01em;
}
.about-body p { font-size: 15px; color: var(--muted); line-height: 1.95; }

.cert-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--line-soft);
	border: 1px solid var(--line-soft);
	margin-top: 36px;
}
.cert {
	background: var(--white);
	padding: 20px 18px;
	text-align: center;
}
.cert strong {
	display: block;
	font-family: var(--mono);
	font-size: 13px;
	letter-spacing: .08em;
	color: var(--ink);
	margin-bottom: 4px;
}
.cert span { font-size: 11.5px; color: var(--muted); line-height: 1.6; display: block; }

/* 据点 */
/*
 * 2026-11-11：改为「深圳总部（详细）+ 区域据点（只列区域名）」两栏。
 * 左栏信息多、右栏信息少，所以用 1.45 : 1 而不是等分，避免右栏被拉出一大片空白。
 */
.branches {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
	gap: 20px;
	/* 两张卡等高（默认 stretch）：右栏内容少，若各自按内容撑高会一高一矮，看着像没对齐 */
	align-items: stretch;
}
.branch {
	padding: 26px 24px;
	border: 1px solid var(--line);
	background: var(--white);
}
.branch h3 { font-size: 15px; margin-bottom: 14px; color: var(--ink); }
.branch ul { list-style: none; margin: 0; padding: 0; }
.branch li {
	display: flex;
	gap: 9px;
	font-size: 13px;
	line-height: 1.75;
	color: var(--muted);
	margin-bottom: 8px;
}
.branch li .ico { margin-top: 4px; color: var(--copper); opacity: .8; }

/* 区域名做成标签块：只有地名，不承载地址与电话 */
.branch-regions .region-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 16px;
}
.branch-regions .region-list li {
	margin: 0;
	padding: 7px 16px;
	border: 1px solid var(--line);
	background: var(--paper);
	font-size: 13px;
	line-height: 1.5;
	color: var(--ink);
	letter-spacing: .04em;
}
.region-note {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--muted);
}

/* =========================================================================
   14. CTA 带
   ========================================================================= */
.cta-band {
	position: relative;
	background: var(--ink-800);
	color: rgba(255, 255, 255, 0.66);
	padding: var(--sp-hero) 0;
	overflow: hidden;
}
.cta-band::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(70% 130% at 96% 46%, rgba(176, 101, 58, .17), transparent 58%);
	pointer-events: none;
	z-index: 0;
}
.cta-band-in {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
	gap: 40px;
	align-items: center;
}
.cta-band h2 { color: #fff; margin-bottom: 14px; font-size: clamp(1.6rem, 2.4vw, 2.3rem); }
.cta-band p { font-size: 14.5px; color: rgba(255, 255, 255, 0.48); margin: 0; max-width: 52ch; }
/*
 * 右栏操作区：按钮 + 电话。
 *
 * 2026-11-11 统一 UI 修正。原来这里是 align-items: flex-start，
 * 而 .cta-band-in 的右栏只占 .75fr（1440px 下约 380px），
 * 内容却全挤在右栏左边缘 → 按钮和电话悬在版心中间偏左，
 * 右侧 200 多 px 完全空着，整块 CTA 的视觉重心塌向左侧。
 *
 * 改为靠右对齐：按钮与电话的**右边缘**贴齐 wrap 右边界，
 * 与页头按钮、页脚右列形成同一条右基准线。左栏文案仍然左对齐，
 * 一左一右各自吃满两端，中间留白居中 —— 这是 B2B 官网 CTA 的常规版式。
 *
 * 注意 justify-content 之外还要 text-align: right：电话那行是 inline-flex，
 * 里面的文字靠自身对齐，单靠 flex 的 end 不会让「技术咨询」标签跟着贴右。
 */
.cta-band-act {
	display: flex;
	flex-direction: column;
	gap: 18px;
	align-items: flex-end;
	text-align: right;
	/*
	 * justify-self: end 不能少。
	 *
	 * align-items: flex-end 只对齐 flex 的**交叉轴**（这里是水平方向）——
	 * 但它作用在 .cta-band-act 自身内部，前提是这一栏已经有确定宽度。
	 * 作为 grid 项目时，宽度默认由内容撑开（fit-content），
	 * 于是整块仍然贴着自己那格的左边缘，右侧照样空一截。
	 * justify-self: end 把这一格里的项目推到右边缘，宽度才真正吃满。
	 */
	justify-self: end;
}
/* 按钮定宽下限，避免右对齐后按钮宽度随文字长短忽大忽小（中英文切换时尤其明显） */
.cta-band-act .btn { min-width: 208px; justify-content: center; }
.cta-tel {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	/* 上下留一点内边距：手机上这块是"点一下就拨号"的区域，贴着字太难点 */
	padding: 6px 0;
	color: #fff;
}
.cta-tel:hover { color: var(--copper-lt); }
.cta-tel .ico { color: var(--copper-lt); flex: none; }
.cta-tel span { display: flex; flex-direction: column; gap: 3px; line-height: 1.15; align-items: flex-end; }
.cta-tel em {
	font-size: 12px;
	font-style: normal;
	color: rgba(255, 255, 255, 0.48);
	letter-spacing: .12em;
	font-family: var(--mono);
}
/*
 * 号码是这一栏真正的"行动号召"，原来的 18px 夹在大标题和按钮之间显得偏弱，
 * 提到 22–28px（随视口缩放），并加 tabular-nums：
 * 数字等宽，字体回退或逐位变化时不会左右抖动。
 */
.cta-tel strong {
	/* 18px → 22~26px：比原来看得清，又不至于压过上面的 h2（约 37px） */
	font-size: clamp(22px, 1.9vw, 26px);
	letter-spacing: .01em;
	font-weight: 600;
	color: #fff;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

/* =========================================================================
   15. 页脚
   ========================================================================= */
.site-footer {
	position: relative;
	background: var(--ink);
	color: rgba(255, 255, 255, 0.48);
	padding: var(--sp-hero) 0 0;
	overflow: hidden;
	font-size: 13.5px;
}
/*
 * 页脚四列。
 *
 * 2026-11-11 统一 UI 调整列宽：
 * 原比例 1.5 / .8 / .8 / 1.2 —— 品牌列最宽但内容只有 3 行简介，
 * 「联系炬泓」的地址最长却被压到 1.2fr，结果地址在 1440px 下也要折成两行，
 * 而品牌列右侧空着一大块。现在改成 1.35 / .85 / .85 / 1.45：
 * 品牌列收一点，联系列放宽，让那条长地址有机会单行排下。
 */
.footer-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr) minmax(0, .85fr) minmax(0, 1.45fr);
	gap: 40px;
	padding-bottom: 48px;
	position: relative;
	z-index: 1;
}
.brand-footer { color: #fff; margin-bottom: 20px; }
.brand-footer .brand-text strong { color: #fff; }
.brand-footer .brand-text em { color: rgba(255, 255, 255, 0.30); }
.footer-desc { font-size: 13px; line-height: 1.9; color: rgba(255, 255, 255, 0.48); max-width: 34ch; margin-bottom: 20px; }
.footer-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.footer-badges span {
	font-size: 11px;
	padding: 3px 9px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.48);
}
.footer-col h3 {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	/*
	 * 标题亮度 .30 太暗，在深色页脚上几乎读不到，和 13.5px/0.66 的列表项
	 * 形成了「标题比正文弱」的反向层次。提到 .48（--on-dark-3）并加一条
	 * 短下划线，让列标题有明确的"这一列从这里开始"的信号。
	 */
	color: rgba(255, 255, 255, 0.48);
	font-weight: 500;
	margin-bottom: 18px;
	padding-bottom: 10px;
	position: relative;
}
.footer-col h3::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 18px;
	height: 1px;
	background: var(--copper);
	opacity: .55;
}
.footer-list { list-style: none; margin: 0; padding: 0; }
.footer-list li { margin-bottom: 11px; }
.footer-list a { color: rgba(255, 255, 255, 0.66); font-size: 13.5px; display: inline-block; }
.footer-list a:hover { color: var(--copper-lt); }
/*
 * 手机上把链接撑成可点区域。
 * 桌面端 18px 高的文字链配上 11px 间距足够（鼠标精度高），
 * 但触屏上 18px 高、相邻仅隔 11px，点「应用领域」很容易误触到「什么是 POK」。
 * 用 padding 把每个链接的可点高度提到 ~40px，同时把 li 的 margin 收掉，
 * 视觉行距基本不变，但手指命中区翻倍。
 */
@media (max-width: 620px) {
	.footer-list li { margin-bottom: 0; }
	.footer-list a { display: block; padding: 10px 0; }
}
.footer-list-contact li { display: flex; gap: 10px; line-height: 1.75; color: rgba(255, 255, 255, 0.48); }
.footer-list-contact .ico { margin-top: 3px; color: var(--copper-lt); opacity: .8; flex: none; }
/*
 * 地址断行。
 *
 * 原来地址会被断成「…华强创意产」/「业园 1 栋 A 座 1502」——
 * 把「产业」这个词从中间劈开，是中文排版里最不该出现的一种断法。
 * word-break: keep-all 让中文只在真正的分词点（空格、标点）断行。
 *
 * 同时给 span 加 min-width: 0：flex 子项默认 min-width: auto（= min-content），
 * 不收缩；配合 keep-all 之后 min-content 变成「最长的不可断片段」，
 * 遇到超长无空格字符串（英文地址、长邮箱）会把列撑破。
 */
.footer-list-contact span {
	min-width: 0;
	word-break: keep-all;
	overflow-wrap: anywhere;
}

.footer-bottom {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	padding: 20px 0 26px;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	font-size: 12px;
	color: rgba(255, 255, 255, 0.30);
}
.footer-bottom p { margin: 0; }
.footer-legal { display: flex; align-items: center; gap: 10px; }
.footer-legal a { color: rgba(255, 255, 255, 0.30); }
.footer-legal a:hover { color: var(--copper-lt); }
.dot-sep { width: 3px; height: 3px; background: currentColor; opacity: .5; border-radius: 50%; }

.footer-watermark {
	position: absolute;
	left: 50%;
	bottom: -4.2vw;
	transform: translateX(-50%);
	font-family: var(--mono);
	font-size: 13vw;
	font-weight: 700;
	letter-spacing: .02em;
	color: rgba(255, 255, 255, 0.06);
	line-height: 1;
	pointer-events: none;
	white-space: nowrap;
	z-index: 0;
}

/* =========================================================================
   16. 内页头
   ========================================================================= */
.page-hero {
	position: relative;
	background: var(--ink);
	color: #fff;
	padding: var(--sp-tight) 0 clamp(40px, 5vw, 64px);
	overflow: hidden;
}
.page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(80% 120% at 82% 0%, rgba(176, 101, 58, .2), transparent 60%),
		linear-gradient(170deg, var(--ink), var(--ink-softer) 70%, var(--ink));
}
.page-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
	background-size: 72px 72px;
	mask-image: linear-gradient(to bottom, #000, transparent 90%);
	-webkit-mask-image: linear-gradient(to bottom, #000, transparent 90%);
}
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero h1 {
	color: #fff;
	font-size: clamp(1.9rem, 3.4vw, 3rem);
	margin-bottom: 14px;
	max-width: 26ch;
}
.page-hero .ph-sub {
	max-width: 62ch;
	font-size: 15px;
	line-height: 1.9;
	color: rgba(255, 255, 255, 0.66);
	margin: 0;
}
.page-hero-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin-top: 26px;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .12em;
	color: rgba(255, 255, 255, 0.48);
}

.crumb { padding: 16px 0; border-bottom: 1px solid var(--line-soft); background: var(--paper); }
.crumb ol {
	/*
	 * 面包屑是直接挂在 <body> 下的，不在 .wrap 里。
	 * 只写 padding:16px 0 会让它在宽屏上贴浏览器左边缘（内容却在 132px 处），
	 * 所以这里自己复刻一份 .wrap 的宽度与内边距。
	 */
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 var(--pad);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	list-style: none;
	font-size: 12.5px;
	color: var(--muted);
}
.crumb li { display: flex; align-items: center; gap: 8px; margin: 0; }
.crumb li + li::before {
	content: "/";
	color: var(--muted-2);
	opacity: .6;
}
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--copper); }
.crumb [aria-current] { color: var(--ink); }

/* =========================================================================
   17. 正文内容
   ========================================================================= */
.entry { padding: var(--sp-tight) 0; }
.entry-inner { max-width: 780px; margin: 0 auto; }
/* 正文颜色统一到 --text：原先这里是 #2C3E44，比全局正文浅一档，长文读起来发灰 */
.entry-inner p, .entry-inner li { font-size: 16px; line-height: 1.95; color: var(--text); }
.entry-inner h2 {
	font-size: clamp(1.4rem, 2vw, 1.85rem);
	margin: 2.2em 0 .8em;
	padding-top: 1.1em;
	border-top: 1px solid var(--line-soft);
}
.entry-inner h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.entry-inner h3 { font-size: 1.15rem; margin: 1.8em 0 .6em; }
.entry-inner ul, .entry-inner ol { padding-left: 1.3em; }
.entry-inner li { margin-bottom: .5em; }
.entry-inner blockquote {
	margin: 1.8em 0;
	padding: 20px 24px;
	border-left: 2px solid var(--copper);
	background: var(--paper-2);
	font-size: 15px;
	color: var(--muted);
}
.entry-inner img { margin: 1.6em 0; }
.entry-inner a { color: var(--copper); border-bottom: 1px solid rgba(176, 101, 58, .3); }
.entry-inner table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.6em 0;
	font-size: 14px;
}
.entry-inner th, .entry-inner td {
	padding: 11px 14px;
	border: 1px solid var(--line-soft);
	text-align: left;
}
.entry-inner th { background: var(--paper-2); font-weight: 600; color: var(--ink); }

/* =========================================================================
   18. 产品详情
   ========================================================================= */
.product-hero {
	background: var(--ink);
	color: #fff;
	padding: var(--sp-hero) 0;
	position: relative;
	overflow: hidden;
}
.product-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(70% 110% at 90% 10%, rgba(176, 101, 58, .2), transparent 58%),
		linear-gradient(160deg, var(--ink), var(--ink-softer));
}
.product-hero .wrap { position: relative; z-index: 1; }
.product-hero-in {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
	gap: 40px;
	align-items: end;
}
.product-hero h1 { color: #fff; margin-bottom: 12px; font-size: clamp(1.9rem, 3vw, 2.7rem); }
.product-grade {
	font-family: var(--mono);
	font-size: 13px;
	letter-spacing: .12em;
	color: var(--copper-lt);
	margin-bottom: 18px;
	display: inline-block;
	padding: 4px 12px;
	border: 1px solid rgba(227, 181, 140, .3);
}
.product-hero p {
	font-size: 15px;
	line-height: 1.9;
	color: rgba(255, 255, 255, 0.66);
	max-width: 62ch;
	margin: 0;
}
/*
 * 产物详情页的操作按钮组（索取样品 / 下载 TDS）。
 *
 * 2026-11-11 统一 UI：与首页 CTA 条同一个病根 —— 右栏只有 .65fr，
 * 按钮组却从右栏左边缘开始排，右半边空着，视觉重心塌向左边。
 * 处理方式也一致：justify-self: end 推到右边界，按钮统一最小宽度。
 * 产品页还要求「底部与左侧标题对齐」（父级 align-items: end），
 * 所以这里不能用 flex-end 改纵向，只让横向贴右。
 */
.product-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	justify-self: end;
}
.product-actions .btn { min-width: 232px; justify-content: center; }

.product-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: clamp(32px, 4vw, 64px);
	padding: var(--sp-tight) 0;
	align-items: start;
}
.product-main > section { margin-bottom: clamp(36px, 4vw, 56px); }
.product-main > section:last-child { margin-bottom: 0; }
.product-main .entry-inner { max-width: 74ch; margin: 0; }
.product-main .entry-inner p { font-size: 15.5px; }
.product-main h2 {
	font-size: 1.35rem;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--line);
	margin-bottom: 22px;
	display: flex;
	align-items: baseline;
	gap: 12px;
}
.product-main h2 .num-tag { font-size: 10.5px; }

.spec-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}
.spec-table tr { border-bottom: 1px solid var(--line-soft); }
.spec-table tr:hover { background: rgba(176, 101, 58, .04); }
.spec-table th {
	width: 40%;
	padding: 13px 16px 13px 0;
	text-align: left;
	font-weight: 400;
	color: var(--muted);
	vertical-align: top;
}
.spec-table td {
	padding: 13px 0;
	color: var(--ink);
	font-family: var(--mono);
	font-size: 13px;
	letter-spacing: .02em;
}

.grade-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.grade-table thead th {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--muted);
	font-weight: 500;
	text-align: left;
	padding: 0 14px 12px 0;
	border-bottom: 1px solid var(--line);
}
.grade-table tbody td {
	padding: 12px 14px 12px 0;
	border-bottom: 1px solid var(--line-soft);
	color: var(--muted);
}
.grade-table tbody td:first-child {
	font-family: var(--mono);
	color: var(--ink);
	font-weight: 500;
	letter-spacing: .02em;
	white-space: nowrap;
}
.grade-table tbody tr:hover td { background: rgba(176, 101, 58, .04); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span {
	font-size: 12.5px;
	padding: 6px 13px;
	border: 1px solid var(--line);
	color: var(--muted);
	background: var(--white);
}

.product-aside {
	position: sticky;
	top: 104px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
/* 详情页侧栏产品实拍 */
.aside-shot {
	margin: 0;
	border: 1px solid var(--line);
	background: var(--white);
	overflow: hidden;
}
.aside-shot-media {
	aspect-ratio: 3 / 2;
	max-height: 208px;
	overflow: hidden;
	background: var(--paper-2);
}
.aside-shot-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .7s var(--ease);
}
.aside-shot:hover .aside-shot-media img { transform: scale(1.04); }
.aside-shot figcaption {
	padding: 11px 16px 12px;
	border-top: 1px solid var(--line-soft);
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: .12em;
	color: var(--muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.aside-card {
	border: 1px solid var(--line);
	background: var(--white);
	padding: 24px 22px;
}
.aside-card h3 {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 16px;
	font-weight: 500;
}
.aside-card ul { list-style: none; margin: 0; padding: 0; }
.aside-card li { margin-bottom: 10px; font-size: 13.5px; }
.aside-card li a {
	color: var(--muted);
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
}
.aside-card li a:hover { color: var(--copper); }
.aside-card li a > span {
	font-family: var(--mono);
	font-size: 10.5px;
	color: var(--muted);
	flex: 0 1 auto;
	min-width: 0;
	max-width: 56%;
	text-align: right;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.aside-card li a { min-width: 0; }
.aside-cta { background: var(--ink); color: rgba(255, 255, 255, 0.66); border-color: var(--ink); }
.aside-cta h3 { color: rgba(255, 255, 255, 0.48); }
.aside-cta p { font-size: 13px; line-height: 1.8; color: rgba(255, 255, 255, 0.66); margin-bottom: 18px; }
.aside-cta .btn { width: 100%; }

/* =========================================================================
   19. 联系页
   ========================================================================= */
.contact-layout {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	gap: clamp(32px, 4vw, 64px);
	align-items: start;
	padding: var(--sp-tight) 0;
}
.contact-info-list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line); }
.ci {
	display: flex;
	gap: 16px;
	padding: 22px 0;
	border-bottom: 1px solid var(--line-soft);
}
.ci-ico {
	width: 38px;
	height: 38px;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--line);
	color: var(--copper);
}
.ci-body strong {
	display: block;
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--muted-2);
	font-weight: 500;
	margin-bottom: 6px;
}
.ci-body p { margin: 0; font-size: 15px; color: var(--ink); line-height: 1.7; }
.ci-body a { color: var(--ink); }
.ci-body a:hover { color: var(--copper); }
.ci-body small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 4px; }

/* -------------------------------------------------------------------------
   快速联系条（/support/ 合并「联系我们」后新增）
   给「只想找人」的访客一条最短路径：三格 = 电话 / 邮箱 / 地址，
   不必滚到页尾表单。图标与文字排版复用 .ci-ico / .ci-body，只重写容器。
   ---------------------------------------------------------------------- */
.contact-quick {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border: 1px solid var(--line);
	background: var(--white);
}
.cq {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 26px 26px 24px;
	border-right: 1px solid var(--line);
	transition: background .3s var(--ease);
}
.cq:last-child { border-right: 0; }
.cq .ci-body { display: block; flex: 1; min-width: 0; }
.cq-line {
	display: block;
	font-size: 15px;
	line-height: 1.6;
	color: var(--ink);
	overflow-wrap: break-word;
	transition: color .25s var(--ease);
}
a.cq:hover { background: var(--paper); }
a.cq:hover .cq-line { color: var(--copper); }
a.cq:hover .ci-ico { border-color: var(--copper); color: var(--copper); }

/* 合并页里的两栏：外层 section 已经有上下留白，这里不要再叠一层 */
.contact-layout.contact-layout-flush { padding: 0; }
.contact-h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); margin-bottom: 24px; }


.form-card {
	border: 1px solid var(--line);
	background: var(--white);
	padding: clamp(24px, 3vw, 38px);
}
.form-card h2 { font-size: 1.4rem; margin-bottom: 8px; }
.form-card > p { font-size: 13.5px; color: var(--muted); margin-bottom: 26px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field-full { grid-column: 1 / -1; }
.field label {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--muted);
}
.field label .req { color: var(--copper); }
.field input, .field select, .field textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--line);
	background: var(--paper);
	color: var(--text);
	font-family: var(--sans);
	font-size: 14.5px;
	line-height: 1.6;
	border-radius: 0;
	transition: border-color .25s var(--ease), background .25s var(--ease);
}
.field textarea { min-height: 108px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
	outline: none;
	border-color: var(--copper);
	background: #fff;
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted-2); }
.form-foot { margin-top: 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.form-note { font-size: 12px; color: var(--muted-2); line-height: 1.7; max-width: 34ch; }

.notice {
	padding: 14px 18px;
	border: 1px solid;
	font-size: 13.5px;
	margin-bottom: 22px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.notice-ok { border-color: rgba(46, 125, 90, .35); background: rgba(46, 125, 90, .07); color: var(--ok); }
.notice-err { border-color: rgba(176, 60, 60, .3); background: rgba(176, 60, 60, .06); color: var(--err); }

.map-frame {
	margin-top: 8px;
	border: 1px solid var(--line);
	background: var(--paper-2);
	aspect-ratio: 16 / 5.5;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.map-tag {
	position: absolute;
	left: 18px;
	top: 16px;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .16em;
	color: var(--muted-2);
}
.map-frame::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(var(--line-soft) 1px, transparent 1px),
		linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
	background-size: 40px 40px;
}
.map-inner { position: relative; text-align: center; padding: 24px; }
.map-inner .ico { color: var(--copper); margin: 0 auto 12px; }
.map-inner strong { display: block; font-size: 15px; color: var(--ink); margin-bottom: 6px; }
.map-inner span { font-size: 13px; color: var(--muted); }

/* =========================================================================
   20. 技术支持 / 下载
   ========================================================================= */
.doc-list { border-top: 1px solid var(--line); }
.doc {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 20px 4px;
	border-bottom: 1px solid var(--line-soft);
	transition: background .25s var(--ease), padding .25s var(--ease);
}
.doc:hover { background: rgba(176, 101, 58, .04); padding-left: 12px; }
.doc-ico {
	width: 38px;
	height: 38px;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--paper-2);
	color: var(--copper);
}
.doc-body { flex: 1; min-width: 0; }
.doc-body h3 { font-size: 15px; margin-bottom: 3px; font-weight: 500; }
.doc-body span { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: .05em; }
.doc-act { flex: 0 0 auto; color: var(--muted); }
.doc:hover .doc-act { color: var(--copper); }

.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line-soft); }
.faq-q {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 22px 4px;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
	font-family: var(--sans);
	font-size: 15.5px;
	font-weight: 500;
	color: var(--ink);
	transition: color .25s var(--ease);
}
.faq-q:hover { color: var(--copper); }
.faq-q .ico { flex: 0 0 auto; color: var(--muted); transition: transform .35s var(--ease); }
.faq-item.is-open .faq-q .ico { transform: rotate(45deg); color: var(--copper); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .45s var(--ease); }
.faq-a-inner { padding: 0 4px 24px; font-size: 14.5px; line-height: 1.95; color: var(--muted); max-width: 76ch; }

/* FAQ 收尾：读完还没解决的问题，给一条回表单的路（/support/ 合并后才有） */
.faq-foot {
	margin-top: 34px;
	padding: 22px 26px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	background: var(--white);
	border: 1px solid var(--line-soft);
	border-left: 3px solid var(--copper);
}
.faq-foot p { margin: 0; font-size: 13.5px; color: var(--muted); }
.faq-foot .link-arrow { font-size: 13px; }

/* =========================================================================
   表格速查（全牌号速查表）
   =========================================================================
   2026-11-11 修两个问题：

   ① **表头文字压在数据行上**（截图里 M330A 那一行，表头的「牌号 / 分类 / 体系 /
      特征 / 典型应用」与数据行重叠成一团）。根因：thead th 写了
      `position: sticky; top: 78px`，但滚动容器 .cmp-wrap 当时只有 `overflow-x: auto`
      —— overflow-y 仍是 visible，于是 sticky 的参照物变成了**视口**而非表格容器，
      78px 正好落在表体范围内，滚到那儿表头就叠在数据行上了。

      修法：给 .cmp-wrap 加高度上限 + `overflow: auto`，它就成了真正的滚动容器，
      表头 `top: 0` 只在自己这个框里吸顶，不再跑到整页上乱吸。
      这样表头常驻、列宽仍由同一张表决定，不会出现「表头与表体列宽对不齐」的老毛病
      （那是把 thead/tbody 拆成两个 display:block 的常见副作用）。

   ② **表格太长**（38 个牌号约 2000px 高，把整页拉得很长）。
      需求：只显示 6 行，其余用滚动条查看。
      做法：max-height = 表头高 + 6 × 行高，滚动的部分正好是 6 行数据。
      两个数都放在 :root 里，以后要改成 8 行只动 --quick-rows。
   ========================================================================= */
.cmp-wrap {
	/* 高度 = 表头 + N 行数据；超出的牌号在这个框内滚动 */
	max-height: calc(var(--quick-head-h) + var(--quick-rows) * var(--quick-row-h));
	overflow: auto;              /* 两个方向都成为滚动容器，sticky 才有正确的参照物 */
	-webkit-overflow-scrolling: touch;
	border-bottom: 1px solid var(--line);
	/* 留出滚动条位置，避免滚动条出现时「典型应用」列被压掉几个像素 */
	scrollbar-gutter: stable;
}
/*
 * 「看全」变体：行数本来就不多、且需要整体对比的表（如 /pok/ 的九系列表）
 * 不该被 6 行上限截掉尾巴 —— 只有 9 行还要滚动，反而让人以为表没做完。
 * 产品速查表有 84 行，仍然走上面的默认上限。
 */
.cmp-wrap.cmp-tall {
	max-height: none;
	overflow-x: auto;   /* 手机端仍需要横滚，所以不能写 overflow: visible */
	overflow-y: hidden;
}
/*
 * ⚠️ border-collapse 必须是 separate，不能是 collapse。
 *
 * 这是这次踩得最深的一个坑：在 Chrome 里，表格用 `border-collapse: collapse` 时，
 * 给 <th> 加 `position: sticky` 会**静默失效** —— 不报错、不警告，
 * 表现就是表头跟着表体一起滚走（实测 scrollTop=400 时表头跑到容器外 -280px）。
 *
 * 原因：collapse 模式下边框由表格统一绘制，浏览器会把单元格当成"边框的一部分"，
 * sticky 的定位上下文就没了。改成 separate + border-spacing: 0 之后，
 * 每个单元格恢复成独立盒子，sticky 正常生效，视觉上和 collapse 没有区别
 * （所有分隔线本来就是用 td 的 border-bottom 画的，不依赖边框合并）。
 */
.quick-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 13.5px;
}

/*
 * ⚠️ sticky 必须挂在 <thead> 上，不能挂在 <th> 上。
 *
 * 这是这次踩得最深的一个坑，试了三轮才定位：
 *
 *   ① 最初 `th { position: sticky; top: 78px }` + 容器只有 overflow-x: auto
 *      → sticky 参照物变成视口，表头叠在数据行上（用户截图看到的那个问题）。
 *   ② 改成容器 `overflow: auto` + `th { top: 0 }`，同时 `border-collapse: collapse`
 *      → sticky 静默失效（Chrome 在 collapse 模式下不认单元格的 sticky）。
 *   ③ 再改 `border-collapse: separate`，样式全部正确（position/top/z-index
 *      计算值都对），但实测 scrollTop=400 时表头仍然跟着滚走（delta = -400）。
 *
 *   ③ 的真正原因：**sticky 元素只能在它的父元素盒子范围内移动**。
 *   <th> 的父级是 <tr>，而 <tr> 只有一行高（50px）——
 *   于是表头最多只能"吸"50px，超出就被 tr 的边界带走了。
 *   把 sticky 挂到 <thead>（父级是 table，高度 = 整表 1944px）就能全程吸顶。
 *
 * 另外 border-collapse 仍必须是 separate：collapse 模式下 thead 的 sticky
 * 同样不可靠，两个条件缺一不可。
 */
.quick-table thead {
	position: sticky;
	top: 0;
	z-index: 2;
}
.quick-table thead th {
	background: var(--paper);
	font-family: var(--mono);
	/*
	 * 10.5px + --muted 的表头在米纸上太淡了（截图里几乎要凑近才读得出），
	 * 而它是这张表唯一的列名来源。提到 11px、颜色改用 --ink-600，
	 * 仍比数据行轻，但一眼能认出是表头。
	 */
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-600);
	font-weight: 600;
	text-align: left;
	padding: 12px 14px 12px 0;
	border-bottom: 1px solid var(--line);
	/* 吸顶后下方内容会从边缘"穿过去"，加一道很淡的投影把层次拉开 */
	box-shadow: 0 1px 0 var(--line);
}
.quick-table tbody td {
	padding: 12px 14px 12px 0;
	border-bottom: 1px solid var(--line-soft);
	color: var(--muted);
	vertical-align: top;
}
.quick-table tbody td:first-child {
	font-family: var(--mono);
	color: var(--ink);
	font-weight: 500;
	white-space: nowrap;
}
.quick-table tbody tr:hover td { background: rgba(176, 101, 58, .04); }
.quick-table .t-cat {
	font-size: 11px;
	padding: 2px 8px;
	border: 1px solid var(--line);
	color: var(--muted);
	white-space: nowrap;
}

/* 滚动条：默认细条在米纸上几乎看不见，这里染色加宽 */
.cmp-wrap::-webkit-scrollbar { width: 10px; height: 10px; }
.cmp-wrap::-webkit-scrollbar-track { background: var(--paper-2); }
.cmp-wrap::-webkit-scrollbar-thumb {
	background: rgba(10, 27, 34, .18);
	border: 2px solid var(--paper-2);
}
.cmp-wrap::-webkit-scrollbar-thumb:hover { background: rgba(10, 27, 34, .3); }
/* Firefox */
.cmp-wrap { scrollbar-width: thin; scrollbar-color: rgba(10, 27, 34, .2) var(--paper-2); }

/*
 * 「还有更多」提示条。
 * 只露出 6 行时，访客很容易以为总共就这 6 个牌号 ——
 * 这条明说总数与滚动方式，放在表格正下方。
 */
.quick-more {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 14px;
	font-family: var(--mono);
	/*
	 * 颜色从 --muted-2 改到 --muted：提示条底是 --paper-2，
	 * --muted-2(#8A9BA0) 压在上面对比度只有约 2.3:1，远低于可读下限，
	 * 缩略图里几乎看不见这行字 —— 而它恰恰是"还有 32 个牌号"的唯一提示。
	 */
	font-size: 11.5px;
	letter-spacing: .08em;
	color: var(--muted);
	background: var(--paper-2);
	border-top: 1px solid var(--line);
}
.quick-more b { color: var(--copper); font-weight: 600; }

/* =========================================================================
   21. 归档 / 列表
   ========================================================================= */
.archive-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	border-top: 1px solid var(--line);
	border-left: 1px solid var(--line);
}

.pagination { margin-top: 48px; display: flex; justify-content: center; }
.pagination .nav-links { display: flex; gap: 6px; }
.pagination a, .pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--line);
	font-family: var(--mono);
	font-size: 12.5px;
	color: var(--muted);
}
.pagination .current { background: var(--ink); border-color: var(--ink); color: #fff; }
.pagination a:hover { border-color: var(--ink); color: var(--ink); }

.empty-state {
	padding: 80px 20px;
	text-align: center;
	color: var(--muted);
	border: 1px dashed var(--line);
}
.empty-state h2 { font-size: 1.4rem; margin-bottom: 10px; }

/* =========================================================================
   22. 入场动画
   ========================================================================= */
/*
 * 入场动画的可见性兜底（部署前终审时加）。
 *
 * 原实现直接把 .reveal 写成 opacity:0，靠 JS 加 .is-in 才显示。
 * 这在「JS 正常」时没问题，但一旦脚本没跑到（CDN/缓存层挡掉、CSP 拦截、
 * 用户禁用 JS、站点.js 报错中断），所有 .reveal 区块会永久隐形 ——
 * 页面出现大片空白，而 DOM 里元素明明在（还占着高度）。
 *
 * 现在反过来：默认可见，只有 <html> 带 .js 时（由内联脚本在 <head> 里立刻打上）
 * 才允许隐藏等待动画。JS 挂了，内容是完整的。
 */
.reveal {
	opacity: 1;
	transform: none;
}
.js .reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; }
.reveal-d4 { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
	.js .reveal { opacity: 1; transform: none; transition: none; }
	.mol-rot, .mol-dash, .mol-pulse, .ticker-track { animation: none !important; }
	html { scroll-behavior: auto; }
}

/* =========================================================================
   22.5 授权证书 / 关键数据 / 牌号体系 / 认证矩阵 / 场景 / 配套材料
   ========================================================================= */

/* --- 首屏授权入口 --- */
.hero-meta .hm-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--copper-lt);
	border-bottom: 1px solid rgba(227, 181, 140, .35);
	padding-bottom: 2px;
	transition: color .25s var(--ease), border-color .25s var(--ease);
}
.hero-meta .hm-link:hover { color: #fff; border-color: rgba(255, 255, 255, 0.48); }

/* --- 授权证书区块 --- */
.cert-sec {
	--c-fg: #fff;
	--c-mut: rgba(255, 255, 255, 0.48);
	--c-line: rgba(255, 255, 255, 0.06);
	--c-surface: rgba(255, 255, 255, 0.06);
}
.cert-sec-paper {
	--c-fg: var(--ink);
	--c-mut: var(--muted);
	--c-line: var(--line);
	--c-surface: var(--white);
}

.cert-in {
	display: grid;
	grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
}

.cert-shot { position: relative; }

.cert-img {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	box-shadow: 0 26px 60px -28px rgba(0, 0, 0, .55);
	transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.cert-img img {
	width: 100%;
	height: auto;
	border: 1px solid var(--c-line);
	background: #fff;
}
.cert-img:hover { transform: translateY(-4px); box-shadow: 0 34px 70px -30px rgba(0, 0, 0, .6); }
.cert-img:focus-visible { outline: 2px solid var(--copper); outline-offset: 6px; }

.cert-zoom {
	position: absolute;
	left: 50%;
	bottom: 18px;
	transform: translate(-50%, 8px);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	background: rgba(10, 27, 34, .82);
	color: #fff;
	font-size: 11.5px;
	letter-spacing: .06em;
	opacity: 0;
	transition: opacity .35s var(--ease), transform .35s var(--ease);
	pointer-events: none;
	white-space: nowrap;
}
.cert-img:hover .cert-zoom,
.cert-img:focus-visible .cert-zoom { opacity: 1; transform: translate(-50%, 0); }

.cert-stamp {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 14px;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .14em;
	color: var(--c-mut);
}
.cert-stamp-l { display: inline-flex; align-items: center; gap: 6px; }

.cert-body h2 { margin-bottom: 18px; }
.cert-lead {
	font-size: 15px;
	line-height: 1.95;
	color: var(--c-mut);
	margin: 0 0 26px;
}
.cert-lead strong { color: var(--c-fg); font-weight: 600; }

.cert-facts { margin: 0 0 24px; }
.cert-facts > div {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr);
	gap: 16px;
	padding: 11px 0;
	border-top: 1px solid var(--c-line);
}
.cert-facts dt {
	margin: 0;
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: .12em;
	color: var(--c-mut);
	padding-top: 2px;
}
.cert-facts dd { margin: 0; font-size: 14px; color: var(--c-fg); line-height: 1.7; }
.cert-facts dd span { display: block; font-size: 12px; color: var(--c-mut); margin-top: 2px; }

.cert-note {
	font-size: 12.5px;
	line-height: 1.85;
	color: var(--c-mut);
	border-left: 2px solid var(--copper);
	padding-left: 14px;
	margin: 0 0 26px;
}

.cert-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.link-arrow.is-light { color: rgba(255, 255, 255, 0.66); border-color: rgba(255, 255, 255, 0.12); }
.link-arrow.is-light:hover { color: #fff; border-color: #fff; }

/* --- 证书放大层 --- */
.lightbox {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: grid;
	place-items: center;
	padding: 24px;
}
.lightbox[hidden] { display: none; }
.lb-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(5, 14, 18, .92);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.lb-panel {
	position: relative;
	max-width: min(560px, 92vw);
	max-height: 92vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	animation: lbIn .38s var(--ease) both;
}
@keyframes lbIn {
	from { opacity: 0; transform: translateY(14px) scale(.985); }
	to   { opacity: 1; transform: none; }
}
.lb-panel img {
	max-height: calc(92vh - 60px);
	width: auto;
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .8);
}
.lb-cap {
	margin: 14px 0 0;
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: .12em;
	color: rgba(255, 255, 255, 0.48);
	text-align: center;
}
.lb-close {
	position: absolute;
	top: -46px;
	right: 0;
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
	cursor: pointer;
	transition: background .25s var(--ease), transform .25s var(--ease);
}
.lb-close .ico { transform: rotate(45deg); }
.lb-close:hover { background: rgba(255, 255, 255, 0.12); }

/* --- 关键数据 --- */
.kdata {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
}
.kd { background: var(--white); padding: 28px 26px; }
.kd-num {
	font-size: clamp(1.9rem, 3vw, 2.5rem);
	font-weight: 600;
	letter-spacing: -.03em;
	line-height: 1;
	color: var(--ink);
	margin-bottom: 12px;
}
.kd-num i { font-style: normal; font-size: 15px; letter-spacing: 0; color: var(--copper); margin-left: 5px; }
.kd-lbl {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .12em;
	color: var(--muted);
	display: block;
	margin-bottom: 8px;
}
.kd p { margin: 0; font-size: 12.5px; line-height: 1.75; color: var(--muted); }

/* --- 牌号体系表 --- */
.mono-tag {
	display: inline-block;
	font-family: var(--mono);
	font-size: 11.5px;
	letter-spacing: .02em;
	color: var(--ink);
	background: var(--paper);
	border: 1px solid var(--line);
	padding: 2px 8px;
	margin: 2px 4px 2px 0;
	white-space: nowrap;
}
.muted-tag {
	display: inline-block;
	font-family: var(--mono);
	font-size: 11px;
	color: var(--muted);
	border: 1px dashed var(--line);
	padding: 2px 8px;
	white-space: nowrap;
}
.grade-tbl td:nth-child(2) { color: var(--muted); }
.grade-tbl tr.is-special td:first-child strong { color: var(--copper); }
.tbl-note {
	margin: 16px 0 0;
	font-size: 12.5px;
	line-height: 1.8;
	color: var(--muted);
}

/* --- 认证矩阵 --- */
.cert-matrix {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
}
.cm-item {
	background: var(--white);
	padding: 20px 18px;
	display: flex;
	gap: 11px;
	align-items: flex-start;
}
.cm-tick { color: var(--copper); flex: 0 0 auto; margin-top: 4px; }
.cm-item h3 { font-size: 13.5px; margin: 0 0 3px; letter-spacing: 0; }
.cm-tag {
	display: block;
	font-family: var(--mono);
	font-size: 9.5px;
	letter-spacing: .1em;
	color: var(--copper);
	margin-bottom: 6px;
}
.cm-item p { margin: 0; font-size: 12px; line-height: 1.7; color: var(--muted); }
.cm-filler { background: var(--white); }

.cert-callout {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	flex-wrap: wrap;
	margin-top: 28px;
	padding: 26px 28px;
	border: 1px solid var(--line);
	background: var(--white);
}
.cert-callout h3 { font-size: 15px; margin: 0 0 6px; }
.cert-callout p { margin: 0; font-size: 13px; line-height: 1.85; color: var(--muted); max-width: 62ch; }

/* --- 上游时间线 --- */
.up-split {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
}
.up-body p { font-size: 15px; line-height: 1.95; color: var(--muted); margin: 0 0 18px; }
.up-body p:last-child { margin-bottom: 0; }
.up-body strong { color: var(--ink); }

.tl {
	list-style: none;
	margin: 0;
	padding: 0 0 0 26px;
	border-left: 1px solid var(--line);
}
.tl li { position: relative; padding: 0 0 26px; }
.tl li:last-child { padding-bottom: 0; }
.tl li::before {
	content: "";
	position: absolute;
	left: -31px;
	top: 7px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--white);
	border: 1px solid var(--copper);
}
.tl li.tl-now::before { background: var(--copper); box-shadow: 0 0 0 4px var(--copper-dim); }
.tl-y {
	display: block;
	font-family: var(--mono);
	font-size: 11.5px;
	letter-spacing: .12em;
	color: var(--copper);
	margin-bottom: 4px;
}
.tl h3 { font-size: 15px; margin: 0 0 4px; }
.tl p { margin: 0; font-size: 13px; line-height: 1.8; color: var(--muted); }

/* --- 上游实景：工厂 + 现场（等高出血图，说明文字压在渐变上） --- */
.up-shots {
	display: grid;
	grid-template-columns: 1.34fr 1fr;
	gap: 18px;
	aspect-ratio: 2.05 / 1;
	margin: clamp(34px, 4.4vw, 62px) 0 0;
}
.ushot {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	margin: 0;
	overflow: hidden;
	background: var(--ink);
}
.ushot-media { position: absolute; inset: 0; }
.ushot-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .9s var(--ease);
}
.ushot--plant .ushot-media img { object-position: 54% 44%; }
.ushot--team .ushot-media img { object-position: 26% 50%; }
.ushot:hover .ushot-media img { transform: scale(1.035); }
.ushot figcaption {
	position: relative;
	z-index: 2;
	padding: 64px 22px 20px;
	background: linear-gradient(to top, rgba(8, 20, 27, .88) 0%, rgba(8, 20, 27, .55) 42%, rgba(8, 20, 27, 0) 100%);
}
.ushot figcaption span {
	display: block;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .15em;
	color: var(--copper-lt);
	margin-bottom: 7px;
}
.ushot figcaption p {
	margin: 0;
	font-size: 13px;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.66);
	max-width: 46ch;
}

/* --- 场景深读 --- */
.cases { border-top: 1px solid var(--line); }
.case {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) minmax(150px, 210px);
	gap: clamp(16px, 3vw, 40px);
	padding: clamp(24px, 3vw, 36px) 0;
	border-bottom: 1px solid var(--line-soft);
	transition: background .3s var(--ease);
}
.case:hover { background: rgba(176, 101, 58, .03); }
.case-n {
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: .1em;
	color: var(--copper);
	padding-top: 5px;
}
.case-main h3 { font-size: 19px; margin: 0 0 5px; }
.case-sub {
	margin: 0 0 12px;
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: .1em;
	color: var(--muted);
	text-transform: uppercase;
}
.case-main p:last-child { margin: 0; font-size: 14.5px; line-height: 1.95; color: var(--muted); }
.case-side { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; }
.case-side-l {
	width: 100%;
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: .12em;
	color: var(--muted);
	margin-bottom: 2px;
}

/* --- 配套材料 --- */
.mats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
}
.mat {
	background: var(--white);
	padding: 26px 24px;
	display: flex;
	flex-direction: column;
	transition: background .3s var(--ease);
}
.mat:hover { background: var(--surface-hi); }
.mat h3 { font-size: 17px; margin: 0 0 3px; }
.mat-sub {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: .08em;
	color: var(--copper);
	margin-bottom: 12px;
}
.mat p { margin: 0 0 16px; font-size: 13px; line-height: 1.8; color: var(--muted); }
.mat-use {
	margin-top: auto;
	padding-top: 11px;
	border-top: 1px dashed var(--line);
	font-size: 12px;
	line-height: 1.7;
	color: var(--muted);
}

/* =========================================================================
   23. 响应式
   ========================================================================= */
/*
 * 统计条单独一档断点（1180）。
 *
 * 为什么不是塞进下面的 1080：四列布局每格窄于约 250px 就会折行 ——
 * 「汽车 / 电子 / 工业 / 食品 / 水务 / 消费」和六个地名会各自断开，
 * 单字「消费」「重庆」落到第二行。实测 1140 还在犯，1180 才安全。
 * 与 1080 档拆开写，是为了让这个数字有据可依，而不是跟着别的规则凑。
 */
@media (max-width: 1180px) {
	.hero-stats-in { grid-template-columns: 1fr 1fr; }
	.hstat { padding: 22px 22px 22px 0; }
	/* 右列（第 2、4 格）不要右边线：右边已经到容器边界了 */
	.hstat:nth-child(2), .hstat:nth-child(4) { border-right: 0; }
	.hstat:nth-child(1), .hstat:nth-child(2) {
		border-bottom: 1px solid var(--on-dark-line);
	}
	.hstat:nth-child(3) { padding-left: 0; }
}

@media (max-width: 1080px) {
	:root { --pad: 26px; }
	.header-in { gap: 20px; }
	.nav-list > li > a { padding: 10px 10px; font-size: 14.5px; }
	.header-cta .btn { padding: 12px 16px; font-size: 13px; }
	/*
	 * 单列也必须写 minmax(0, 1fr)。裸 1fr 的下限是 min-content，
	 * 侧栏牌号列表里 white-space:nowrap 的 <span> 会把整条轨道顶到 342px，
	 * 320px 视口下产品详情页溢出 42px。
	 */
	.product-layout { grid-template-columns: minmax(0, 1fr); }
	.product-aside { position: static; }
	.footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}

@media (max-width: 900px) {
	.topbar-l .tb-sep, .topbar-l .tb-item:nth-child(3) { display: none; }

	.burger { display: flex; }
	.header-cta { display: none; }

	/*
	 * ⚠️ 2026-11-12 修复：手机端汉堡菜单抽屉只有 128px 高，菜单 7 项只能看到 1 项。
	 *
	 * 根因不是 .nav 自己写错，而是 .site-header 上的 backdrop-filter 建了「包含块」。
	 * CSS 规范里 backdrop-filter 的值非 none 时，该元素会成为其 fixed 后代的包含块
	 * （与 filter / transform / will-change 同一类）。于是 .nav 的 position:fixed
	 * 不再相对视口，而是相对 <header class="site-header"> 的 padding box 定位：
	 * 实测 top:0 / bottom:0 被解析成 top:35（header 顶）× 高 128px（header 高 67 + 剩余）。
	 * 抽屉里 7 个菜单项 + 联系我们 + 电话共 667px 高，全被压进 128px 的可滚动区。
	 *
	 * 修法：在 ≤900px 断点里把 .site-header 的 backdrop-filter 关掉。
	 * 移动端本来就不需要这个毛玻璃（页面顶部有 topbar 深色条挡着，视觉上看不出差别），
	 * 关掉后 .nav 重新以视口为包含块，top:0/bottom:0 才能撑满全屏。
	 * 同时补 min-height：.nav 是 flex 列容器，再加一道高度保险。
	 */
	.site-header {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background: var(--paper);
	}

	/*
	 * 关闭态用 right 位移，不用 transform: translateX()。
	 *
	 * 抽屉右边缘本来就贴视口右边，关闭态只要写 translateX(26px)，
	 * 右边缘就被推到视口外 26px → 文档 scrollWidth 从 390 变 417，
	 * 整站可横向拖动，.to-top 也会被顶出 11px（它按祖先宽度定位）。
	 * translateX(100%) 更糟。改成动画 right（26px → 0）就永远不越界。
	 *
	 * 也不能靠 html { overflow-x: clip } 兜底：实测 Chrome 里它会让
	 * .site-header 的 position: sticky 直接失效（滚到 900px 时 headerTop
	 * 从 0 变 -900），overflow-x: hidden 同理。溢出一律从源头解决。
	 */
	.nav {
		position: fixed;
		top: 0;
		bottom: 0;
		left: auto;
		right: 26px;
		width: min(86vw, 380px);
		/* 高度保险：即使将来某个祖先又加了 transform/filter，也不会被压扁 */
		height: 100vh;
		height: 100dvh;
		background: var(--paper);
		border-left: 1px solid var(--line);
		padding: 96px 28px 32px;
		transform: none;
		opacity: 0;
		visibility: hidden;
		transition: right .42s var(--ease), opacity .32s var(--ease), visibility .42s;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		z-index: 95;
		display: flex;
		flex-direction: column;
	}
	.nav.is-open { right: 0; opacity: 1; visibility: visible; }
	.nav-list { flex-direction: column; align-items: stretch; gap: 0; }
	.nav-list > li { border-bottom: 1px solid var(--line-soft); }
	.nav-list > li > a { padding: 15px 0; font-size: 16px; }
	.nav-list > li > a::after { display: none; }
	.nav-list .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		background: transparent;
		padding: 0 0 10px 12px;
		min-width: 0;
	}
	.nav-list .sub-menu a { padding: 7px 0; font-size: 14px; color: var(--muted); }
	.nav-mobile-extra { display: flex; flex-direction: column; gap: 16px; margin-top: 28px; }
	.nav-mobile-extra .btn { width: 100%; }
	.nav-mobile-tel {
		display: flex;
		align-items: center;
		gap: 8px;
		font-family: var(--mono);
		font-size: 13px;
		color: var(--muted);
		margin: 0;
	}

	/*
	 * 低矮视口压缩（1080P 竖屏 = 360×640 CSS）。
	 *
	 * 实测 360×640：padding 96+32、.nav-list 424.2、.nav-mobile-extra 106.5，
	 * scrollHeight 687 > clientHeight 640 → 溢出 47px，
	 * 「联系我们」按钮底部被切。1080×1920（DPR3）是最主流机型，必须首屏可见。
	 *
	 * 只收紧垂直节奏，不动字号与横向间距：
	 *   顶部留白 96 → 76（header 实高 67，仍留 9px 余量）
	 *   菜单行距 15 → 12（触控热区仍 ≥44px：12*2+字号行高 ≈ 48px）
	 *   附加区上间距 28 → 20、内部 gap 16 → 12
	 * 合计节省约 60px，640 高下可全量露出。
	 */
	@media (max-height: 700px) {
		.nav { padding: 76px 24px 24px; }
		.nav-list > li > a { padding: 12px 0; }
		.nav-list .sub-menu { padding: 0 0 8px 12px; }
		.nav-list .sub-menu a { padding: 6px 0; }
		.nav-mobile-extra { gap: 12px; margin-top: 20px; }
	}

	.hero-in { grid-template-columns: 1fr; gap: 36px; padding-top: 48px; }
	.hero-visual { order: 2; max-width: 420px; margin: 0 auto; }
	.hero-visual-tag { display: none; }
	.hero-stats-in { grid-template-columns: 1fr 1fr; }
	.hstat { padding: 20px 16px 20px 0; }
	.hstat:not(:first-child) { padding-left: 0; }
	.hstat:nth-child(2) { border-right: 0; }
	.hstat:nth-child(1), .hstat:nth-child(2) { border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
	.hstat:nth-child(3) { padding-left: 0; }

	.sec-head { grid-template-columns: 1fr; gap: 16px; align-items: start; }
	.sec-head h2 { max-width: none; }

	.pok-split { grid-template-columns: 1fr; }
	.props-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.apps-grid { grid-template-columns: repeat(2, 1fr); }
	.steps { grid-template-columns: repeat(2, 1fr); }
	.step { padding: 26px 20px 26px 0; }
	.step:nth-child(2) { border-right: 0; }
	.step:nth-child(3), .step:nth-child(4) { border-top: 1px solid var(--line-dark); }
	.step:nth-child(3) { padding-left: 0; }
	.about-split { grid-template-columns: 1fr; }
	.cert-row { grid-template-columns: repeat(2, 1fr); }
	.branches { grid-template-columns: minmax(0, 1fr); }
	.cta-band-in { grid-template-columns: 1fr; gap: 28px; }
	.contact-layout { grid-template-columns: minmax(0, 1fr); }
	/* 快速联系条在窄屏改单列，右边框换成下边框 */
	.contact-quick { grid-template-columns: minmax(0, 1fr); }
	.cq { border-right: 0; border-bottom: 1px solid var(--line); }
	.cq:last-child { border-bottom: 0; }
	.product-hero-in { grid-template-columns: 1fr; align-items: start; }
	/*
	 * 900px 以下 .product-hero-in 塌成单列，但桌面端为「右栏贴右」写的
	 * justify-self: end 还在生效 —— 它会让按钮组先按 max-content 撑宽、
	 * 再被列宽夹住，结果是两个 232px 按钮各占一行、左侧空出 100 多 px，
	 * 和上方左对齐的标题完全对不上节奏。
	 *
	 * 这里改成 stretch + flex 均分：768 平板两个按钮并排各占一半，
	 * 390 手机因为 232+232+10 超出内容宽会自动换行、各自撑满整行。
	 */
	.product-actions { flex-direction: row; flex-wrap: wrap; justify-self: stretch; }
	.product-actions .btn { flex: 1 1 232px; min-width: 0; }
	/*
	 * CTA 条同一个病：桌面端右栏的 align-items/text-align 都是 flex-end，
	 * 塌成单列后标题在左、按钮和电话却甩到右边，一屏里出现两种对齐轴。
	 * 单列时统一回左对齐，按钮撑到 360px 上限（再宽就成了横幅，太重）。
	 */
	.cta-band-act {
		align-items: stretch;
		text-align: left;
		justify-self: stretch;
	}
	.cta-band-act .btn { width: 100%; max-width: 360px; min-width: 0; }
	.cta-tel { justify-content: flex-start; }
	.cta-tel span { align-items: flex-start; }
	.archive-grid { grid-template-columns: repeat(2, 1fr); }
	/*
	 * 这里原本有一条 `.quick-table thead th { top: 70px; }`，
	 * 是当年表头吸在视口上时用来避让吸顶页头的补偿值。
	 * 2026-11-11 起表头改为吸在 .cmp-wrap 内部（top: 0），
	 * 这个补偿值已经无意义，留着反而会把表头顶到框外，已删除。
	 */

	/*
	 * 速查表在窄屏改为**横向滚动**。
	 *
	 * 5 列（牌号/分类/体系/特征/典型应用）在 390px 里硬挤的后果实测过：
	 * 「典型应用」被压成每行 2 个字，「通用注塑件、结构件」竖排成 4 行，
	 * 行高从 50px 涨到 100px+，一屏只能看 2 个牌号 —— 完全没法用。
	 *
	 * 给表格一个最小宽度，让它比容器宽、由 .cmp-wrap 横向滚动
	 * （它本来就是 overflow: auto：纵向滚表体、横向滚列，两个方向互不干扰，
	 *  表头 sticky 在纵向仍然有效）。
	 *
	 * ⚠️ 2026-11-11 牌号表扩到 84 条后，min-width 从 720 提到 820、断点从 620 提到 900：
	 * 新牌号的「特征」文案变长（如「增强自润滑（含 JH960G3MS2-1）」），720px 下
	 * 84 行里有 16 行被挤成两行（行高 50→75），表格看起来参差不齐，
	 * 而且第 6 行正好落在半截位置、被容器切掉一半。
	 * 820px 下换行的只剩 6 行，前 6 行全部是 50px，正好完整显示 6 行。
	 *
	 * 代价：768px 平板会多出约 100px 的横向滚动。这是有意的取舍 ——
	 * 数据表横向滚动是常规交互，而参差不齐的行高和切半的第 6 行看起来像 BUG。
	 */
	.quick-table { min-width: 820px; }
}

@media (max-width: 620px) {
	:root { --pad: 20px; }
	body { font-size: 15.5px; }

	/*
	 * 顶栏在手机上原本整条隐藏（里面只有电话/邮箱，手机上已经能在抽屉和页脚找到）。
	 * 2026-11-11 语言切换移进顶栏后不能再隐藏——否则手机上没有切换语言的入口了。
	 * 改为保留，只把左侧定位语压成一行短版。
	 */
	.topbar { font-size: 11.5px; }
	.topbar-in { min-height: 34px; gap: 12px; }
	.topbar-l .tb-item { overflow: hidden; text-overflow: ellipsis; }
	.header-in { min-height: 66px; }
	.brand-text strong { font-size: 17px; }
	.brand-text em { font-size: 8.5px; letter-spacing: .13em; }
	.brand-mark svg { width: 36px; height: 36px; }

	.hero h1 { font-size: 2rem; }
	.hero-lead { font-size: 14.5px; }
	.hero-actions .btn { flex: 1 1 auto; justify-content: center; }
	.hero-meta { gap: 6px 16px; font-size: 11.5px; }

	/*
	 * minmax(0, 1fr) 而不是 1fr：1fr 等价 minmax(auto, 1fr)，
	 * 列宽有 min-content 下限，320px 窄屏 + 英文长单词会把列撑出去
	 * （实测 /products/pok-gf30/ 溢出 4px）。
	 */
	.props-grid { grid-template-columns: minmax(0, 1fr); }
	.props-grid.props-2 { grid-template-columns: minmax(0, 1fr); }
	.pgrid { grid-template-columns: minmax(0, 1fr); }
	.pcard { min-height: 0; }
	.apps-grid { grid-template-columns: minmax(0, 1fr); }
	.steps { grid-template-columns: minmax(0, 1fr); }
	/* 3 列实拍条在 320~390 会挤成 100px 一格，英文长单词直接顶出去 → 单列 */
	.proof-strip { grid-template-columns: minmax(0, 1fr); }
	.step { border-right: 0; border-top: 1px solid var(--line-dark); padding: 24px 0; }
	.step:first-child { border-top: 0; }
	.step:not(:first-child) { padding-left: 0; }
	.cert-row { grid-template-columns: repeat(2, 1fr); }
	.footer-grid { grid-template-columns: 1fr; gap: 32px; }
	.footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
	.archive-grid { grid-template-columns: 1fr; }
	.form-grid { grid-template-columns: 1fr; }
	.product-main h2 { font-size: 1.2rem; }
	.sec-foot { flex-direction: column; align-items: flex-start; }
	.doc { gap: 14px; }
	.footer-watermark { font-size: 22vw; bottom: -1vw; }
}

/* =========================================================================
   24. 新增区块响应式
   ========================================================================= */
@media (max-width: 1080px) {
	.kdata { grid-template-columns: repeat(2, 1fr); }
	.cert-matrix { grid-template-columns: repeat(2, 1fr); }
	.mats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
	.cert-in { grid-template-columns: 1fr; gap: 34px; }
	.cert-shot { max-width: 340px; }
	.up-split { grid-template-columns: 1fr; gap: 36px; }
	.up-shots { grid-template-columns: 1fr; aspect-ratio: auto; gap: 14px; }
	.ushot { aspect-ratio: 5 / 4; }
	.ushot--team { aspect-ratio: 3 / 2; }
	.pok-material { grid-template-columns: 1fr; gap: 14px; }
	.pm-media { height: clamp(150px, 34vw, 220px); }
	.case { grid-template-columns: 1fr; gap: 12px; padding: 26px 0; }
	.case-n { padding-top: 0; }
	.case-side { margin-top: 4px; }
}

@media (max-width: 620px) {
	.kdata,
	.cert-matrix,
	.mats { grid-template-columns: 1fr; }
	.cert-facts > div { grid-template-columns: 1fr; gap: 3px; padding: 12px 0; }
	.cert-facts dt { padding-top: 0; }
	.cert-actions { gap: 14px; }
	.cert-shot { max-width: 280px; }
	.cert-callout { padding: 22px 20px; }
	.lightbox { padding: 16px; }
	.lb-close { top: -42px; right: 0; width: 34px; height: 34px; }
	.kd { padding: 22px 20px; }
	.mat { padding: 22px 20px; }
}

/* =========================================================================
   25. 语言切换
   ========================================================================= */
.lang-sw {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex: 0 0 auto;
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: .04em;
}
.lang-sw a {
	color: var(--muted-2);
	padding: 4px 2px;
	transition: color .25s var(--ease);
}
.lang-sw a.is-on { color: var(--ink); font-weight: 600; }
.lang-sw a:hover { color: var(--copper); }
.lang-sep { width: 1px; height: 11px; background: var(--line); }

/*
 * 顶栏版本（2026-11-11 从页头按钮旁移上来）。
 * 深色底上不能沿用 .lang-sw 的 --muted-2 / --ink，那两个是给浅色背景定的，
 * 放到 --ink 深底上等于隐形。这里整套换成白色系。
 */
.lang-sw-top { font-size: 12px; letter-spacing: .06em; }
.lang-sw-top a { color: rgba(255, 255, 255, 0.48); padding: 2px 3px; }
.lang-sw-top a.is-on { color: #fff; font-weight: 600; }
.lang-sw-top a:hover { color: var(--copper-lt); }
.lang-sw-top .lang-sep { background: rgba(255, 255, 255, 0.12); }

@media (max-width: 900px) {
	/*
	 * 语言切换已移到顶栏，这里不再需要 margin-left:auto 把抽屉/按钮往右推。
	 * 顶栏只有 38px 高、内容又短，手机上保留完整两句定位语 + 语言切换放得下。
	 */
	.lang-sw { font-size: 12.5px; }
	.lang-sw a { padding: 8px 4px; }
	/*
	 * 手机上语言切换是**唯一**的语言入口，实测触摸区只有 23×29px，
	 * 低于 44×44 的可点建议值，手指容易点不中。
	 * 顶栏高度固定 34~35px，纵向不可能做到 44，于是改成：
	 * 让整条 .topbar-r 撑满顶栏高度，内部 <a> 再 height:100%，
	 * 触摸区变成约 35×34 —— 已经是这条细带能给到的最大值。
	 *
	 * ⚠️ 光给 .lang-sw-top 加 align-self: stretch 没用：
	 * 它的父级 .topbar-r 自己没撑满高度，子元素 stretch 也只是撑到父级那么高。
	 * 所以必须先在 .topbar-r 上 stretch，再往下传。
	 */
	.topbar-r { align-self: stretch; }
	.lang-sw-top {
		align-self: stretch;
		display: flex;
		align-items: center;
		height: 100%;
	}
	.lang-sw-top a { padding: 0 10px; display: flex; align-items: center; height: 100%; }
}

/* -------------------------------------------------------------------------
 * 25.1 英文版排版适配
 * 英文标签普遍比中文长（"Technical Support" 约等于 4 个中文字宽），
 * 沿用中文的字号与内距会在 1100–1440px 之间把导航挤成两行。
 * <html lang> 已经跟着语言切换，所以直接用 html[lang="en"] 做定向收缩。
 * ---------------------------------------------------------------------- */
.nav-list > li > a { white-space: nowrap; }
.header-cta .btn { white-space: nowrap; }

html[lang="en"] .nav-list > li > a {
	font-size: 14px;
	padding: 10px 11px;
	letter-spacing: 0;
}

@media (max-width: 1180px) {
	html[lang="en"] .nav-list > li > a { font-size: 13.5px; padding: 10px 9px; }
	html[lang="en"] .header-in { gap: 22px; }
}

/* 901–1080px 之间英文导航 + CTA 按钮放不下，先收掉按钮（首屏 hero 里已有主 CTA） */
@media (max-width: 1080px) and (min-width: 901px) {
	html[lang="en"] .header-cta { display: none; }
	html[lang="en"] .nav-list > li > a { font-size: 13px; padding: 10px 8px; }
	html[lang="en"] .nav-list { gap: 0; }
}

/* 英文顶栏两句定位语比中文长，1080px 以下先收成一句，避免把语言切换挤出视口 */
@media (max-width: 1080px) {
	html[lang="en"] .topbar-l .tb-sep,
	html[lang="en"] .topbar-l .tb-item:nth-child(3) { display: none; }
}

/* 手机段：顶栏只剩「定位语 + 语言切换」，中文那句仍然放不下，收成短版 */
@media (max-width: 620px) {
	.topbar-l .tb-sep,
	.topbar-l .tb-item:nth-child(3) { display: none; }
}

/*
 * 1000px 以下：品牌名不允许换行后，页头一行放不下「品牌 + 导航 + CTA + 语言切换」，
 * 语言切换的 EN 会被裁到视口外。先收掉页头 CTA（抽屉里与首屏都另有入口）。
 */
@media (max-width: 1000px) {
	.header-cta { display: none; }
}

/* =========================================================================
   26. 返回顶部
   浮在视口右下角，滚过首屏才出现；白底细边是为了在浅色区块与深色页脚上
   都能看清（页脚是 --ink，深色按钮会糊在里头）。
   ========================================================================= */
.to-top {
	position: fixed;
	right: 26px;
	bottom: calc(26px + env(safe-area-inset-bottom, 0px));
	z-index: 80;
	width: 46px;
	height: 46px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--line);
	background: var(--white);
	color: var(--ink);
	cursor: pointer;
	opacity: 0;
	transform: translateY(12px);
	pointer-events: none;
	box-shadow: 0 10px 26px -16px rgba(10, 27, 34, .5);
	transition:
		opacity .4s var(--ease),
		transform .4s var(--ease),
		background .3s var(--ease),
		border-color .3s var(--ease),
		color .3s var(--ease);
}
.to-top .ico { display: block; transition: transform .35s var(--ease); }
.to-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--copper-lt);
}
.to-top:hover .ico { transform: translateY(-2px); }
.to-top:active { transform: translateY(1px); }
.to-top:focus-visible {
	outline: 2px solid var(--copper);
	outline-offset: 3px;
}

@media (max-width: 620px) {
	.to-top {
		right: 16px;
		bottom: calc(16px + env(safe-area-inset-bottom, 0px));
		width: 42px;
		height: 42px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.to-top { transition: opacity .2s linear; transform: none; }
	.to-top .ico { transition: none; }
}

/* =========================================================================
   27. 首页精简：应用领域紧凑条 + 授权横条
   首页只留钩子，图片与细节交给 /applications/ 与 /about/。
   ========================================================================= */

/* --- 应用领域：六格图标条（不放图） --- */
.apps-line {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	/* 1240 以上（--wrap 满宽生效）收窄分隔线与格内留白，让标签排得进一行 */
	gap: 3px;
	background: var(--line);
	border: 1px solid var(--line);
}
.al {
	display: block;
	background: var(--white);
	padding: 26px 16px 24px;
	transition: background .3s var(--ease);
}
.al:hover { background: var(--paper); }
.al-ico { color: var(--copper); margin-bottom: 16px; line-height: 0; }
.al h3 { font-size: 15px; margin: 0 0 11px; letter-spacing: -.01em; }
.al ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
/*
 * 标签字号与颜色（部署前可读性修订）。
 *
 * 原为 10px + var(--muted-2) #8A9BA0：这两个值单独看都合理，
 * 叠在一起就是「浅灰 10px 中文」—— 中文没有小写字母的 x-height 撑高度，
 * 10px 下笔画会糊成一团；#8A9BA0 在白底上的对比度只有约 2.6:1，
 * 远低于 WCAG AA 的 4.5:1。结果就是六格里那排标签几乎读不出来。
 *
 * 现在：字号 +1px、颜色换成正文级 --muted（#5E747A，白底约 5.4:1）。
 * 代价是「耐燃油 / 低吸水 / 尺寸稳定」这一组变成 163px，超过桌面卡片
 * 可用的 154px，会折成两行。所以只在 1240 以上的宽断点把六格间距和内距
 * 各收 1px，把 9px 让回来（见下方 .apps-line 的 gap 与 padding）——
 * 1280 及以下自动退化成两行，不硬挤。
 */
.al li {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0;
	color: var(--muted);
	border: 1px solid var(--line);
	padding: 3px 5px;
	white-space: nowrap;
}

/* --- 授权横条 --- */
.cert-bar {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr) auto;
	gap: clamp(24px, 3.5vw, 48px);
	align-items: center;
}
.cert-bar-shot {
	position: relative;
	display: block;
	width: 180px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: #fff;
	cursor: zoom-in;
	overflow: hidden;
	transition: border-color .3s var(--ease);
}
.cert-bar-shot img { display: block; width: 100%; height: auto; }
.cert-bar-shot:hover { border-color: var(--copper-lt); }
.cert-bar-zoom {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 7px 0;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .1em;
	color: #fff;
	background: rgba(10, 27, 34, .84);
	transform: translateY(100%);
	transition: transform .3s var(--ease);
}
.cert-bar-shot:hover .cert-bar-zoom,
.cert-bar-shot:focus-visible .cert-bar-zoom { transform: none; }

.cert-bar-body .label { color: var(--copper-lt); }
.cert-bar-body h2 {
	font-size: clamp(21px, 2.3vw, 30px);
	line-height: 1.32;
	margin: 12px 0 14px;
	color: #fff;
}
.cert-bar-body p {
	margin: 0 0 20px;
	font-size: 14px;
	line-height: 1.85;
	color: rgba(255, 255, 255, 0.66);
	max-width: 62ch;
}
.cert-bar-facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 28px;
	margin: 0;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.cert-bar-facts > div { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 12.5px; }
.cert-bar-facts dt {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .1em;
	color: rgba(255, 255, 255, 0.30);
	flex: 0 0 auto;
}
.cert-bar-facts dd {
	margin: 0;
	color: rgba(255, 255, 255, 0.66);
	min-width: 0;
	overflow-wrap: anywhere;
}

.cert-bar-act { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }

@media (max-width: 1080px) {
	.apps-line { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.cert-bar { grid-template-columns: 150px minmax(0, 1fr); }
	.cert-bar-shot { width: 150px; }
	.cert-bar-act { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; }
}

@media (max-width: 620px) {
	.apps-line { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.al { padding: 20px 15px; }
	.al-ico { margin-bottom: 12px; }
	/*
	 * 窄屏不再把字号压到 9px。
	 *
	 * 原来这里为了「三个标签塞进一行」把字号降到 9px —— 但 9px 中文
	 * 在手机上基本等于不可读，而换行本身并不会让格子「高度不齐」：
	 * .apps-line 是 grid，同一行的格子本来就等高。
	 * 现在允许折行，只保证不溢出：字号提到 10.5px，内距回到 4px。
	 */
	.al ul { gap: 5px; }
	.al li { font-size: 10.5px; padding: 3px 5px; letter-spacing: 0; }
	.cert-bar { grid-template-columns: 1fr; }
	.cert-bar-shot { width: 132px; }
	.cert-bar-facts { grid-template-columns: 1fr; gap: 9px; }
	.cert-bar-facts > div { display: grid; grid-template-columns: 1fr; gap: 2px; }
	.cert-bar-body h2 br { display: none; }

	/*
	 * 触控目标高度（部署前终审补）。
	 *
	 * 起因：实测 390px 下 .link-arrow 只有 30px 高、.hero-meta .hm-link 只有 24px，
	 * 都低于 44×44 的推荐触控尺寸。桌面端鼠标精度高，30px 一条底线点击毫无问题；
	 * 手指按上去就会点空 —— 尤其 .sec-foot 里「查看全牌号速查表」这种
	 * 单独一个链接、周围没有别的东西可误点的位置，它恰恰是用户最想点的那个。
	 *
	 * 处理方式：不靠加粗下划线（会破坏现有的细线风格），而是用 padding
	 * 撑开点击热区，再用负 margin 把视觉位置拉回原处 —— 看得见的地方没变，
	 * 能点的地方变了。这是移动端做「视觉不动、热区变大」的标准做法。
	 */
	.link-arrow {
		padding-top: 8px;
		padding-bottom: 10px;
		margin-top: -8px;
		margin-bottom: -7px;
	}
	.hero-meta .hm-link {
		padding-top: 11px;
		padding-bottom: 11px;
		margin-top: -11px;
		margin-bottom: -11px;
	}
}

/* =========================================================================
   27.5 移动端等宽小标签字号兜底（1080P / 360px 档专项）

   1080×1920（DPR3 → 360×640 CSS）实测暴露的问题：
   .cm-tag 9.5px、.app-num / .mat-sub / dt 10.5px，在 360px 视口下
   是「等宽大写 + 宽字距」的组合，横向占位比同字号中文更宽，
   但字形高度一样矮 —— 手机上很难扫读。

   这几个都是信息型文字（材质牌号、应用序号、参数名），不是装饰，
   所以必须抬到可读区间：统一 11px，同时把字距收一档抵掉宽度增量，
   保证不撑破卡片也不产生横向滚动。

   桌面端一律不动（≥901px 仍是原设计）。
   ========================================================================= */
@media (max-width: 900px) {
	.cm-tag,
	.app-num,
	.mat-sub,
	.cert-facts dt {
		font-size: 11px;
		letter-spacing: .06em;
	}
	.app-num { letter-spacing: .1em; margin-bottom: 18px; }
	.cm-tag { margin-bottom: 5px; }

	/*
	 * 首页 .apps-line 的性能标签（耐燃油 / V0 阻燃 / KTW…）。
	 * 它们在 620 断点里已经是 10.5px（那次是从 9px 提上来的），
	 * 但 360px 视口下仍是全站最小的一批可见文字，且是每个行业的核心卖点，
	 * 不是装饰。再提一档到 11.5px，内距同步收 1px 抵掉横向增量。
	 */
	.al li { font-size: 11.5px; padding: 3px 5px; }

	/* 联系信息字段名（电话 / 手机、邮箱、深圳总部）—— 用户要靠它定位信息 */
	.ci-body strong { font-size: 11.5px; }

	/*
	 * 平板触控热区（768×1024 档专项，2026-11-12 终审补）。
	 *
	 * 起因：第 27 节的 .link-arrow / .hm-link 热区修复写在 @media (max-width: 620px)，
	 * 而 768×1024（iPad 竖屏）不在这个范围内 —— 实测该档仍只有 28~30px 高。
	 * 平板同样是纯触屏设备，手指精度和手机一样，没有理由用桌面端的 30px。
	 *
	 * 这里在 900 断点内再补一次（620 断点内已有的不冲突，值相同）。
	 * 同时给页脚链接撑开热区：实测页脚 .A 类链接只有 22~25px 高，
	 * 在 768px 下是整页最小的可点目标。用 padding 撑高 + 等量负 margin
	 * 保持视觉位置不变。
	 */
	.link-arrow {
		padding-top: 8px;
		padding-bottom: 10px;
		margin-top: -8px;
		margin-bottom: -7px;
	}
	.hero-meta .hm-link {
		padding-top: 11px;
		padding-bottom: 11px;
		margin-top: -11px;
		margin-bottom: -11px;
	}
	/*
	 * 页脚导航链接：实测 768px 下只有 22~25px 高（.footer-list a 原本 inline-block、
	 * 字号 13.5px，行高顶起来才 25px），是整页最小的可点目标。
	 *
	 * 做法与 620 断点已有的一致（li margin 归零 + a 块级化 + 上下 padding），
	 * 但 padding 提到 11px 保证总高 ≥44px（13.5px 字 × 行高 1.7 ≈ 23px + 22px = 45px）。
	 * 用 .footer-list 限定，不碰页脚里的品牌 logo 与按钮。
	 */
	.footer-list li { margin-bottom: 0; }
	.footer-list a { display: block; padding: 11px 0; }

	/*
	 * 版权行的备案号 / 证书链接（.footer-legal 内）。
	 * 实测 22.2px 高，是全页最小的可点目标。这两个链接信息价值低但确实可点
	 * （备案号要能核验），所以给到 44px：inline-block + 上下 padding，
	 * 用负 margin 抵掉，版权行整体高度不变。
	 */
	.footer-legal a {
		display: inline-block;
		padding: 11px 0;
		margin-top: -11px;
		margin-bottom: -11px;
	}
}

/* =========================================================================
   28. 文章详情（single.php）
   主题原先缺 single.php，文章会落到 index.php（列表模板）导致正文不显示。
   hero 复用 .product-hero，这里只补正文底部与标签的样式。
   ========================================================================= */
.post-foot {
	margin-top: 48px;
	padding-top: 26px;
	border-top: 1px solid var(--line-soft);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
}
.post-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.post-tags a {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .06em;
	color: var(--muted);
	border: 1px solid var(--line-soft);
	padding: 5px 10px;
	border-radius: 2px;
	transition: border-color .2s, color .2s;
}
.post-tags a:hover { border-color: var(--copper); color: var(--copper); }

/* 文章正文里的强调整句在窄屏下不要挤成一大块 */
.entry-inner strong { color: var(--ink); font-weight: 600; }

@media (max-width: 620px) {
	.post-foot { flex-direction: column; align-items: flex-start; }
}

/* =========================================================================
   29. 技术文章列表页（home.php）
   主题原先没有 home.php，也没设 page_for_posts，AI 发布的文章在前端没有入口。
   这里只补列表页特有的三块：栏目说明、卡片底部阅读时长、底部转化条。
   ========================================================================= */
.insight-intro {
	max-width: 76ch;
	margin: 0 0 44px;
	padding-bottom: 34px;
	border-bottom: 1px solid var(--line-soft);
}
.insight-intro p {
	font-size: 15px;
	line-height: 1.95;
	color: var(--muted);
	margin: 0 0 14px;
}
.insight-intro p:last-child { margin-bottom: 0; }

.pcard-meta {
	margin-top: auto;
	padding-top: 14px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .08em;
	color: var(--muted);
	opacity: .85;
}

.insight-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
	margin-top: 34px;
	padding: 30px 32px;
	background: var(--paper);
	border: 1px solid var(--line-soft);
	border-left: 3px solid var(--copper);
}
.insight-cta h3 {
	font-size: 18px;
	margin: 0 0 8px;
	color: var(--ink);
}
.insight-cta p {
	margin: 0;
	max-width: 62ch;
	font-size: 14px;
	line-height: 1.85;
	color: var(--muted);
}
.insight-cta-act { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 720px) {
	.insight-cta { padding: 24px 20px; }
	.insight-cta-act { width: 100%; }
	.insight-cta-act .btn { flex: 1; justify-content: center; }
}
.insight-more { margin-top: 36px; display: flex; justify-content: center; }

/* =========================================================================
   30. 手机端可用性修复（2026-11-12）
   =========================================================================
   来源：真机 390×844 视口实测（CDP Emulation.setDeviceMetricsOverride）。
   这里的规则全部只在 ≤900px 生效，不影响 PC 版。
   ========================================================================= */
@media (max-width: 900px) {
	/*
	 * (1) 面包屑点击区太小。
	 *     实测「首页」链接只有 25.3×23.1px，远低于 WCAG 2.5.8 要求的 24×24
	 *     与 Apple HIG 建议的 44×44。手指点在「首」「页」之间经常点空。
	 *     用负 margin + padding 把热区撑到 44px 高，视觉位置不变。
	 */
	.crumb { padding: 10px 0; }
	.crumb li { margin: -10px 0; padding: 10px 0; }
	.crumb a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding: 0 2px;
		margin: -10px 0;
	}

	/*
	 * (2) 语言切换「中 / EN」只有 34.8×34px。
	 *     顶栏整体只有 35px 高，撑不到 44，这里放到 40px 并保持视觉居中。
	 *     顶栏和语言切换是次要操作，40px 是这条约束下的合理折中。
	 */
	.lang-sw-top a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 40px;
		min-height: 40px;
		margin: -8px 0;
	}

	/*
	 * (3) 文章卡片上的日期/分类只有 10.5px，斜体等宽字体在手机上几乎看不清。
	 *     10.5px 是 PC 版的刻意设计（轻量元信息），手机端必须放大。
	 *     抬到 12px —— 正好踩住 iOS 正文可读下限，同时保持等宽的克制感。
	 */
	.pcard-cat { font-size: 12px; letter-spacing: .08em; }

	/* 授权牌匾说明文字同步放大，10.5px 在手机上不可读 */
	.lb-cap { font-size: 12px; }
}

/*
 * (4) 品牌英文副标题 8.5px。
 *     这是装饰性字标（「JUHONG · POK MATERIALS」），不是可读正文，
 *     低于 11px 也不影响信息传达——中文主名 20px 已经把品牌讲清楚了。
 *     保留原设计，此处仅记录结论，不做改动。
 */

/*
 * (5) 触控目标 ≥44px 的通用兜底。
 *     只作用于手机，且只补「明显是操作按钮」的那几个，避免影响排版。
 */
@media (max-width: 900px) {
	/* 返回顶部按钮 42px → 46px，手指更好按 */
	.to-top { width: 46px; height: 46px; }

	/* 电话号码与邮箱是 <a>，本身就是主要联系方式，撑到 44px */
	.footer-contact a,
	.nav-mobile-tel {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
}

/* =========================================================================
   31. 宽表格横向滚动提示（2026-11-12）
   =========================================================================
   问题：手机 390px 下，牌号速查表 .quick-table 固宽 820px，容器 .cmp-wrap
        只有 340px —— 右侧 480px（约 59%）被裁在视口外。PC 上有滚动条看得见，
        但 iOS Safari 与安卓 Chrome 的滚动条默认「滚动时才出现」，静止时完全不可见。
        用户看到表格右边正好被切在一列中间，第一反应是「表格坏了 / 只有两列」，
        不知道还能左右滑。
   做法：给容器加一个「右侧渐隐到纸色」的遮罩，暗示还有内容未完。
        纯 CSS，无 JS，不影响滚动。滚到最右端时遮罩自动消失（由 JS 加 is-end 类，
        没有 JS 时遮罩常驻 —— 宁可多一个提示，也不要让人看不出能滑）。
   ========================================================================= */
@media (max-width: 900px) {
	/*
	 * 做法：用 background-attachment: local 在容器右侧画一条 28px 的渐隐。
	 *
	 * 为什么是 local 而不是 fixed/scroll：
	 *   这正好是 CSS 里少见的「纯声明式」横滚价签效果 —— scroll 让背景固定在
	 *   元素盒子（视口）上，local 让背景跟随内容滚动。于是左滑时遮罩跟着内容
	 *   一起走，滑到最右端自然消失，不需要一行 JS，也不需要 is-end 类。
	 *   iOS Safari 9+ / 安卓 Chrome / Firefox 均支持 overflow 容器里的 local。
	 *
	 * 为什么不用 ::after 加绝对定位：.cmp-wrap 自己是滚动容器，::after 会
	 * 跟着内容一起滚，反而滚到中间就飘走了；要固定住得再加一层 shell 包装，
	 * 那要改 6 个 PHP 模板，代价远大于收益。
	 */
	.cmp-wrap {
		background-image:
			linear-gradient(to left, var(--paper) 0%, rgba(247, 245, 240, 0) 100%),
			linear-gradient(to right, var(--paper) 0%, rgba(247, 245, 240, 0) 100%);
		background-position: 100% 0, 0 0;
		background-size: 28px 100%, 12px 100%;
		background-repeat: no-repeat;
		background-attachment: local, local;
	}

	/*
	 * 再补一条右侧细边：万一某个浏览器不支持 local，遮罩会显得「糊了一块」，
	 * 这道 1px 内阴影仍然能提示「这里不是内容边界」。
	 * 用 box-shadow 而不是 border，避免挤压内部宽度引发重排。
	 */
	.cmp-wrap {
		box-shadow: inset -1px 0 0 var(--line-soft);
	}
}