自身成为横向滚动容器（无需改 HTML 加包裹层） */
table.legal-table {
display: block;
width: 100%;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
margin-top: var(--sp-4);
border-radius: var(--m-r);
background: var(--m-bg);
box-shadow: var(--m-sh-1), inset 0 0 0 1px var(--m-line);
font-size: 13px;
}
table.legal-table::-webkit-scrollbar { display: none; }
table.legal-table th,
table.legal-table td {
min-width: 116px;
padding: 11px 12px;
text-align: left;
vertical-align: top;
line-height: 1.7;
color: var(--m-ink-2);
border-bottom: 1px solid var(--m-line);
}
table.legal-table th {
background: var(--m-surface);
color: var(--m-ink);
font-weight: 650;
font-size: var(--fs-13);
white-space: normal;
}
table.legal-table td:first-child {
font-weight: 650;
color: var(--m-ink);
}
table.legal-table tr:last-child td { border-bottom: 0; }
/* 首列 sticky：仅在明确支持时启用，否则保持普通文档流 */
@supports (position: sticky) {
table.legal-table th:first-child,
table.legal-table td:first-child {
position: sticky;
left: 0;
background: var(--m-bg);
box-shadow: 1px 0 0 var(--m-line);
}
table.legal-table th:first-child {
background: var(--m-surface);
box-shadow: 1px 0 0 var(--m-line-2);
}
}
/* 采购决策对比表 */
.cmp { border-radius: var(--m-r); }
.cmp__row { grid-template-columns: minmax(0, 1fr); }
.cmp__cell { padding: var(--sp-4); font-size: var(--fs-14); }
.cmp__cell--h { display: none; }
.cmp__cell::before { font-size: var(--fs-12); }
/* 免责声明双栏 → 单列 */
.disc { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
.disc__aside .btn { margin-top: 0; width: 100%; }
/* 法务正文 */
.legal-doc { margin-top: var(--sp-5); }
.legal-doc h2 { margin: var(--sp-6) 0 var(--sp-2); font-size: var(--fs-18); color: var(--m-ink); }
.legal-doc h3 { margin: var(--sp-4) 0 var(--sp-2); font-size: var(--fs-16); color: var(--m-ink); }
.legal-doc p,
.legal-doc li { font-size: var(--fs-14); line-height: 1.88; color: var(--m-ink-2); }
.legal-doc .note { font-size: var(--fs-13); }
.legal-doc a { color: var(--c-accent-deep); }
}
/* ==========================================================================
8. 表单：iOS Safari 防自动放大（≥16px）+ 大热区 + 全宽提交
========================================================================== */
@media (max-width: 900px) {
.form-card {
padding: var(--sp-5);
border-radius: var(--m-r);
background: var(--m-surface);
box-shadow: inset 0 0 0 1px var(--m-line), var(--m-sh-2);
}
.form__grid {
grid-template-columns: minmax(0, 1fr);
gap: var(--sp-4);
}
/* 取消显式 grid-column 定位（ArkWeb 高风险子特性） */
.field--full { grid-column: auto; }
.field { gap: 6px; }
.field__label {
font-size: var(--fs-13);
line-height: 1.5;
color: var(--m-ink-2);
transform: none; /* label 上浮为独立行 */
}
.input,
.select,
.textarea {
/* 16px 是 iOS Safari 不自动缩放页面的硬门槛 */
font-size: 16px;
line-height: 1.6;
min-height: 52px;
padding: 14px;
border-radius: var(--m-r);
background: var(--m-bg);
color: var(--m-ink);
box-shadow: inset 0 0 0 1px var(--m-line-2);
}
.select { padding-right: 40px; background-position: right 14px center; }
.textarea { min-height: 120px; }
.field__err { font-size: var(--fs-12); }
/* 同意勾选：热区 ≥44px */
.consent {
display: flex;
align-items: flex-start;
gap: 12px;
min-height: 44px;
margin: var(--sp-2) 0 var(--sp-4);
padding: 10px 8px;
font-size: var(--fs-13);
line-height: 1.7;
border-radius: var(--m-r);
background: var(--m-bg);
}
.consent input {
flex: none;
width: 22px;
height: 22px;
font-size: 16px;
margin: 2px 0 0;
}
input[type="checkbox"],
input[type="radio"] { font-size: 16px; }
.form__foot {
margin-top: var(--sp-5);
flex-direction: column;
align-items: stretch;
gap: var(--sp-3);
}
.form__foot .btn { width: 100%; min-height: 54px; font-size: var(--fs-16); }
.form__note { margin-top: 0; font-size: var(--fs-12); line-height: 1.7; }
.sample-note { font-size: 12.5px; line-height: 1.75; }
.chips { gap: 8px; }
/* 联系信息 & 二维码 */
.contact__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
.info-list { gap: var(--sp-4); margin-top: var(--sp-4); }
.info-list--compact { padding: var(--sp-5); border-radius: var(--m-r); }
.info-list--compact .info-item__v { font-size: var(--fs-14); }
.info-item__v { font-size: var(--fs-16); }
.info-item__v a { display: inline-block; padding: 4px 0; }
/* 二维码卡：去掉显式 grid-row（ArkWeb 风险） */
.qr-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.qr-cell {
grid-template-columns: 84px minmax(0, 1fr);
grid-template-rows: auto auto;
column-gap: var(--sp-3);
row-gap: 2px;
text-align: left;
padding: var(--sp-3);
border-radius: var(--m-r);
}
.qr-cell__img {
grid-row: auto;
width: 84px;
max-width: 84px;
}
.qr-panel { padding: var(--sp-5); border-radius: var(--m-r); }
}
/* ==========================================================================
9. 弹层：全屏抽屉式（拇指操作 + 安全区）+ Toast + Cookie 横幅
========================================================================== */
@media (max-width: 900px) {
.modal { display: block; padding: 0; }
.modal__mask {
-webkit-backdrop-filter: none;
backdrop-filter: none;
background: var(--m-scrim);
}
.modal__panel {
width: 100%;
height: 100%;
max-height: 100%;
display: flex;
flex-direction: column;
border-radius: 0;
background: var(--m-bg);
transform: translateY(24px);
}
.modal__head {
flex: none;
padding: calc(var(--m-safe-t) + 58px) var(--sp-5) 0;
}
.modal__head .h3,
.modal__head h3 { color: var(--m-ink); }
.modal__body {
flex: 1 1 auto;
padding: var(--sp-4) var(--sp-5) calc(var(--m-safe-b) + var(--sp-6));
overflow-y: auto;
-webkit-overflow-scrolling: touch;
color: var(--m-ink-2);
}
.modal__close {
top: calc(var(--m-safe-t) + 6px);
right: 8px;
width: 44px;
height: 44px;
background: var(--m-surface);
color: var(--m-ink);
}
.spec { grid-template-columns: minmax(0, 1fr); }
/* Toast：避开刘海与页头，暖墨底 + 暖白字 */
.toast {
top: calc(var(--header-h) + var(--m-safe-t) + 12px);
max-width: calc(100vw - 32px);
padding: 12px 18px;
font-size: var(--fs-14);
background: var(--m-ink);
color: var(--m-bg);
border-radius: var(--m-r);
}
/* Cookie 横幅：cookie.css 在本文件之后加载，故用更高特异性覆盖为暖色 */
body .cookie-bar__box {
background: var(--m-bg);
box-shadow: inset 0 0 0 1px var(--m-line), 0 12px 36px var(--m-shadow-warm);
border-radius: var(--m-r);
}
body .cookie-bar__txt strong { color: var(--m-ink); }
body .cookie-bar__txt p { color: var(--m-ink-2); }
body .cookie-bar__link { color: var(--m-ink-3); }
body .cookie-bar__btn--ghost {
border-color: var(--m-line-2);
color: var(--m-ink);
}
/* 「隐私政策」文字链触控热区补足（cookie.css 同级按钮已 44px） */
.cookie-bar__link {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 4px;
white-space: normal;
}
}
/* ==========================================================================
10. 底部 CTA 横幅 & 页脚（暖色）
========================================================================== */
@media (max-width: 900px) {
/* CTA 横幅：由深色通栏改为「暖白 + 橘晕」亮色带，延续首屏明亮温暖 */
.cta-band {
padding: var(--sp-7) var(--sp-5);
border-radius: var(--m-r-lg);
overflow: hidden;
background-color: var(--m-bg-2);
background-image:
radial-gradient(120% 90% at 88% -10%, var(--m-glow-2) 0%, var(--m-glow-0) 60%),
linear-gradient(180deg, var(--m-surface-2) 0%, var(--m-bg-2) 100%);
}
.cta-band::after { display: none; }
.cta-band .h2 { color: var(--m-ink); }
.cta-band p { color: var(--m-ink-2); }
.cta-band__inner {
flex-direction: column;
align-items: stretch;
gap: var(--sp-5);
}
.cta-band__inner > div { width: 100%; max-width: 100%; }
.cta-band__inner p { font-size: var(--fs-14); }
.cta-band__inner a.btn,
.cta-band__inner button.btn { width: 100%; min-height: 52px; }
/* 页脚：暖面底 + 2 列密排
------------------------------------------------------------------
原为单列（4 个 footer__col 纵向堆叠）+ 44px 热区 + 15px 字号，
13 条链接铺开后页脚极长，用户反馈「太长一片、影响观感」。
优化：
1. 改 2 列 → 链接区高度减半，信息密度翻倍
2. 品牌信息列（logo + 简介 + 联系方式）内容多，跨满整行
3. 字号整体下调（页脚属次要信息）：链接 15→13px，简介 13→12px
4. 热区 44→38px：仍高于 WCAG 2.5.8(AA) 要求的 24px，
同时显著压缩总高度
5. 内边距与间距同步收紧
------------------------------------------------------------------ */
.site-footer {
padding: var(--sp-6) 0 var(--sp-5);
background: var(--m-surface);
color: var(--m-ink-2);
}
.footer__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--sp-4);
}
/* 品牌列跨整行，其后 3 个链接列各占一半 */
.footer__col:first-child { grid-column: 1 / -1; }
.footer__col:first-child .brand__logo { height: 26px; max-width: 46vw; }
.footer__col:first-child .small { margin-top: 10px; font-size: 12px; line-height: 1.7; }
.footer__col:first-child .footer__contact { margin-top: 6px; }
.footer__col h4 {
margin-bottom: var(--sp-2);
font-size: 13px;
color: var(--m-ink);
}
.footer__col li { margin-bottom: 0; }
/* 用 display:block + line-height 固定行高，而不是 flex + min-height。
flex 方案下每项实测 44px（5 项撑到 222px），换成 block 后稳定在 30px。
30px 仍高于 WCAG 2.5.8(AA) 要求的 24px；页脚属次要导航，
再加大只会让页脚更长（用户明确反馈过）。 */
.footer__col a {
display: block;
line-height: 30px;
font-size: 12px;
color: var(--m-ink-2);
}
.footer__line { font-size: 12px; line-height: 1.7; }
/* 关键：品牌列正文里的邮箱 / 电话链接必须保持 inline。
上面 .footer__col a 设了 display:flex（为链接列表提供热区），
若一并作用于 内的邮箱、电话，会把它们撑成各占一行 ——
实测联系区因此变成 7 行 152px，是页脚过长的最大单项。
此处改回 inline，让「邮箱 · 电话」回到同一行。 */
.footer__col p a {
display: inline;
min-height: 0;
font-size: 12px;
}
.footer__bottom {
margin-top: var(--sp-5);
padding-top: var(--sp-4);
flex-direction: column;
align-items: flex-start;
gap: var(--sp-2);
font-size: var(--fs-13);
box-shadow: inset 0 1px 0 var(--m-line);
}
.footer__legal,
.footer__beian { min-height: 30px; color: var(--m-ink-3); }
}
/* ==========================================================================
11. 触控热区统一治理（Apple HIG 44px / Material 48dp）
========================================================================== */
@media (max-width: 900px) {
/* 轮播指示点：视觉 6px 圆点，热区扩到 36×36 */
.gallery__dots { gap: 0; bottom: 4px; }
.gallery__dot {
position: relative;
width: 36px;
height: 36px;
border-radius: var(--r-pill);
background: transparent;
box-shadow: none;
}
.gallery__dot::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 6px;
height: 6px;
margin: -3px 0 0 -3px;
border-radius: 50%;
background: var(--m-ink-3);
box-shadow: 0 1px 2px var(--m-shadow-ink);
}
.gallery__dot.is-on { width: 36px; background: transparent; }
.gallery__dot.is-on::before {
width: 18px;
height: 6px;
margin-left: -9px;
border-radius: 3px;
background: var(--c-accent);
}
/* 轮播左右箭头 */
.gallery__nav {
width: 40px;
height: 40px;
opacity: 0.95;
pointer-events: auto;
background: var(--m-glass-bar-blur);
color: var(--m-ink);
}
.gallery__nav svg { width: 16px; height: 16px; }
/* 法务正文内联链接 */
.legal-doc a,
.consent a,
.nda-note a { display: inline-block; padding: 6px 0; }
}
/* ==========================================================================
12. 滚动入场：移动端整体关闭 —— 零 JS 依赖，根除「白屏」失败模式
========================================================================== */
@media (max-width: 900px) {
.reveal,
.reveal.is-in {
opacity: 1;
transform: none;
filter: none;
transition: none;
animation: none;
}
.reveal .dash__row {
opacity: 1;
transform: none;
animation: none;
}
.enter {
animation: none;
opacity: 1;
transform: none;
}
/* 悬浮/漂浮类动画在移动端关闭（省电、防抖） */
.orb { animation: none; }
}
/* ==========================================================================
13. 底部标签栏 / 抽屉导航 / 返回顶部 / 页码指示器（DOM 由 mobile.js 注入）
========================================================================== */
@media (max-width: 900px) {
/* ---- 标签栏：暖白玻璃 ---- */
.m-tabbar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 70;
display: flex;
align-items: stretch;
padding-bottom: var(--m-safe-b);
background: var(--m-glass-bar);
box-shadow: 0 -1px 0 var(--m-line), 0 -10px 28px -16px var(--m-shadow-warm);
transform: translateY(0);
transition: transform var(--dur-base, 320ms) var(--ease-out, ease);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.m-tabbar {
background: var(--m-glass-bar-blur);
-webkit-backdrop-filter: blur(18px) saturate(170%);
backdrop-filter: blur(18px) saturate(170%);
}
}
.m-tabbar.is-hidden { transform: translateY(110%); }
.m-tab {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
min-height: var(--m-tab-h);
padding: 6px 2px 5px;
font-size: 11px;
font-weight: 600;
line-height: 1.2;
letter-spacing: 0.01em;
color: var(--m-ink-3);
background: none;
border: 0;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: color var(--dur-fast, 160ms) ease;
}
.m-tab__ico {
width: 22px;
height: 22px;
flex: none;
color: currentColor;
transition: transform var(--dur-fast, 160ms) ease;
}
.m-tab__ico svg { width: 100%; height: 100%; display: block; }
/* 标签永不折行：底部 5 格极窄，折行会把图标挤到不可读 */
.m-tab__lb {
white-space: nowrap;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.m-tab.is-on { color: var(--c-accent-deep); }
.m-tab.is-on .m-tab__ico { transform: translateY(-1px); }
.m-tab:active { opacity: 0.6; }
/* ---- 全量导航抽屉：暖白 ---- */
.m-drawer-mask {
position: fixed;
inset: 0;
z-index: 78;
background: var(--m-scrim-drawer);
opacity: 0;
visibility: hidden;
transition: opacity var(--dur-base, 320ms) ease, visibility 0s linear var(--dur-base, 320ms);
}
.m-drawer-mask.is-open {
opacity: 1;
visibility: visible;
transition: opacity var(--dur-base, 320ms) ease, visibility 0s;
}
.m-drawer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
z-index: 79;
width: 82vw;
max-width: 330px;
display: flex;
flex-direction: column;
background: var(--m-bg);
transform: translateX(101%);
transition: transform var(--dur-base, 320ms) var(--ease-out, ease);
box-shadow: -18px 0 48px -22px var(--m-shadow-warm);
padding-top: var(--m-safe-t);
padding-bottom: calc(var(--m-safe-b) + var(--sp-4));
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.m-drawer.is-open { transform: translateX(0); }
html.m-nav-open,
html.m-nav-open body { overflow: hidden; }
.m-drawer__top {
flex: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
padding: var(--sp-4) var(--sp-5);
box-shadow: inset 0 -1px 0 var(--m-line);
}
.m-drawer__logo { height: 26px; width: auto; max-width: 60%; object-fit: contain; }
.m-drawer__close {
flex: none;
width: 40px;
height: 40px;
display: grid;
place-items: center;
border: 0;
border-radius: 50%;
background: var(--m-surface);
color: var(--m-ink-2);
cursor: pointer;
}
.m-drawer__nav { flex: none; padding: var(--sp-3) 0; }
.m-drawer__link {
display: flex;
align-items: center;
gap: var(--sp-3);
min-height: 52px;
padding: 10px var(--sp-5);
font-size: var(--fs-16);
font-weight: 600;
color: var(--m-ink);
box-shadow: inset 3px 0 0 transparent;
}
.m-drawer__link .m-drawer__ico { flex: none; width: 20px; height: 20px; color: var(--m-ink-3); }
.m-drawer__link .m-drawer__ico svg { width: 100%; height: 100%; display: block; }
/* 抽屉项标题：禁孤字换行，超长省略 */
.m-drawer__link span {
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.m-drawer__link.is-on {
color: var(--c-accent-deep);
box-shadow: inset 3px 0 0 var(--c-accent);
background: var(--m-surface);
}
.m-drawer__link.is-on .m-drawer__ico { color: var(--c-accent-deep); }
.m-drawer__foot {
flex: none;
margin-top: auto;
padding: var(--sp-4) var(--sp-5) 0;
box-shadow: inset 0 1px 0 var(--m-line);
}
.m-drawer__lang {
display: flex;
align-items: center;
justify-content: center;
min-height: 46px;
margin-bottom: var(--sp-4);
border-radius: var(--m-r);
box-shadow: inset 0 0 0 1px var(--m-line-2);
font-family: var(--font-num);
font-size: var(--fs-14);
font-weight: 650;
color: var(--m-ink-2);
}
.m-drawer__contact { display: grid; gap: 2px; }
.m-drawer__contact a {
display: flex;
align-items: center;
gap: var(--sp-2);
min-height: 44px;
font-size: var(--fs-14);
color: var(--m-ink-2);
}
.m-drawer__contact b {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
color: var(--m-ink-3);
min-width: 4.4em;
}
/* ---- 返回顶部 FAB：暖墨 ---- */
.m-fab {
position: fixed;
right: 14px;
bottom: calc(var(--m-tab-h) + var(--m-safe-b) + 14px);
z-index: 69;
width: var(--m-fab);
height: var(--m-fab);
display: grid;
place-items: center;
border: 0;
border-radius: 50%;
background: var(--m-fab-bg);
color: var(--m-bg);
box-shadow: 0 12px 26px -10px var(--m-shadow-ink);
opacity: 0;
visibility: hidden;
transform: translateY(10px) scale(0.9);
transition: opacity var(--dur-fast, 160ms) ease, transform var(--dur-fast, 160ms) ease, visibility 0s linear 200ms;
cursor: pointer;
}
.m-fab.is-on {
opacity: 1;
visibility: visible;
transform: none;
transition: opacity var(--dur-fast, 160ms) ease, transform var(--dur-fast, 160ms) ease, visibility 0s;
}
.m-fab svg { width: 20px; height: 20px; }
/* ---- 横滑页码指示器（JS 注入） ---- */
.m-dots {
display: flex;
justify-content: center;
gap: 6px;
margin-top: var(--sp-4);
}
.m-dots i {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--m-line-2);
transition: width 220ms ease, background-color 220ms ease;
}
.m-dots i.is-on {
width: 18px;
border-radius: 3px;
background: var(--c-accent);
}
/* ---- 首页三大优势卡：一屏一张横滑 + 激活态 ---- */
.m-slide-on {
box-shadow: inset 0 0 0 1px var(--m-line-2), var(--m-sh-2);
}
}
/* ==========================================================================
14. ArkWeb 定向降级（@supports not）
========================================================================== */
@media (max-width: 900px) {
/* 不支持 backdrop-filter：纯色不透明底（上面已是默认态，此处显式加固） */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.m-tabbar { background: var(--m-bg); }
.site-header { background: var(--m-bg); }
.page-dark-hero .site-header { background: var(--c-tech); }
}
/* 不支持 scroll-snap：仍可自由横滑，仅失去吸附 */
@supports not (scroll-snap-type: x mandatory) {
.pcards > *, .caps > *, .chips-grid > *, .chip-core > *,
.grid-4 > *, .grid-5 > *, .logos > *, .anon-grid > * {
scroll-snap-align: none;
}
}
/* 不支持 mask-image：静默降级为无边缘渐隐（滚动能力不受影响） */
/* 不支持 env()/safe-area 时，变量的 fallback 已由 var(--sa-x, env(...)) 保证 */
}
/* ==========================================================================
15. 横屏手机（≤900px 宽 + ≤480px 高）：压缩纵向占用
⚠️ 必须限定 max-width:900px —— 与移动端断点保持一致，
否则宽屏浏览器矮窗口会被误判为横屏手机。
========================================================================== */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 480px) {
:root { --m-tab-h: 46px; --m-fab: 40px; }
.m-tab { min-height: 46px; font-size: 10px; gap: 2px; }
.m-tab__ico { width: 18px; height: 18px; }
.m-fab { right: 10px; }
.site-header { min-height: 56px; }
.brand__logo { height: 26px; }
.hero:not(.hero--dark),
.hero--dark { padding-top: calc(56px + var(--m-safe-t) + 14px); padding-bottom: var(--sp-5); }
.hero__actions {
flex-direction: row;
align-items: center;
margin-top: var(--sp-4);
}
.hero__actions .btn {
width: auto;
flex: 1 1 0;
min-height: 46px;
font-size: 13px;
font-size: clamp(12px, 2.6vw, 14px);
padding-inline: 12px;
white-space: normal;
}
.hero__visual { display: none; } /* 横屏优先保证 CTA 可见 */
.m-drawer { width: 70vw; max-width: 300px; }
.section { padding: var(--sp-7) 0; }
}
/* ==========================================================================
16. 竖屏平板（701–900px）：保留标签栏，内容用 2 列降低滚动长度
========================================================================== */
@media (min-width: 701px) and (max-width: 900px) {
:root { --m-card-w: 46%; --m-tab-h: 60px; }
.m-tab { font-size: 12px; }
.m-tab__ico { width: 24px; height: 24px; }
.grid-3,
.cases,
.why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.caps,
.pcards,
.chips-grid,
.chip-core,
.grid-4,
.grid-5,
.logos,
.anon-grid { max-width: none; }
.pcards > *,
.caps > *,
.chips-grid > *,
.chip-core > *,
.grid-4 > *,
.grid-5 > *,
.logos > *,
.anon-grid > * { width: 46%; max-width: 320px; }
.footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qr-cell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; text-align: center; }
.qr-cell__img { margin-inline: auto; }
table.legal-table { font-size: var(--fs-14); }
table.legal-table th,
table.legal-table td { min-width: 140px; }
.legal-doc p,
.legal-doc li { font-size: var(--fs-15); }
.dash__kpis { gap: 10px; }
.kpi { padding: 12px 10px; }
.kpi__k { font-size: var(--fs-12); }
}
/* ==========================================================================
17. 极窄屏（≤340px）与水平留白修正
========================================================================== */
@media (max-width: 340px) {
/* ⚠️ 不要把 --gutter 写进 :root：它是 tokens.css:132 定义的设计令牌（48px），
重定义会污染全站所有消费方。极窄屏改留白请用局部声明。
--m-card-w 是 mobile.css 自己维护的移动端变量，可以改。 */
:root { --m-card-w: 82vw; }
.wrap,
.hero__inner,
.sec-head { padding-inline: 18px; }
.m-tab { font-size: 10px; }
.brand__logo { max-width: 42vw; }
}
/* 窄屏水平留白修正
根因：.site-header 是 flex 容器，.header-inner 的 width: min(var(--max),
100% - var(--gutter)*2) 中 100% 在 flex 项内解析异常 → logo 贴边被裁。 */
@media (max-width: 900px) {
.header-inner {
width: auto;
margin-inline: 0;
padding-inline: var(--gutter);
}
/* 抽屉遮罩与 tabbar 同样贴边，不能带 gutter */
.m-drawer,
.m-tabbar { padding-inline: 0; }
}
/* ==========================================================================
18. 收口段（必须放在文件最后）
--------------------------------------------------------------------------
18.1 Hero 主图满幅出血
components.css §43（2608–2645 行）把 .stack__item--main.stack__item--photo
写成 width:54%（特异性 0,2,0）。本文件在其后加载，用同特异性选择器
覆盖回满幅；图片素材本身不动（用户要求与 web 端同素材）。
18.2 按钮最终收口：允许换行 + 字号自适应，长中英文文案都不裁切。
========================================================================== */
@media (max-width: 900px) {
.stack__item--main.stack__item--photo {
width: 100%;
max-width: 100%;
}
.stack__item--main.stack__item--photo img {
width: 100%;
max-width: 100%;
height: auto;
max-height: 46vh;
object-fit: contain;
object-position: center 22%;
}
.stack { overflow: visible; }
/* 按钮：静态 px 兜底 → clamp 渐进增强；允许换行 + 兜底断词 */
.hero__actions .btn,
.page-hero .btn,
.cta-band .btn {
font-size: 14px;
font-size: clamp(12.5px, 3.55vw, 16px);
padding-inline: 16px;
min-width: 0;
max-width: 100%;
white-space: normal;
text-align: center;
overflow-wrap: break-word;
line-break: strict;
line-height: 1.25;
height: auto;
box-sizing: border-box;
}
}
/* ==========================================================================
19. 换行 / 数字完整性 收口（本轮缺陷修复，必须放在文件最后）
--------------------------------------------------------------------------
19.1 chip 孤字（末行仅 1 字）
根因不是「缺 text-wrap: balance」，而是**容器把最后一个 chip 裁掉了**：
见 §3 第 431–445 行 —— .hero__chips 为了做「右侧出血横滑」写了
margin-right: calc(var(--gutter) * -1);
padding-right: var(--gutter);
但 HTML 里 .hero__chips 是 .hero__grid > div > [第 4 个子元素]，
而 .hero__grid 移动端是**单列 grid**（components.css:880 的
`.hero__grid{grid-template-columns:1fr}`）—— 也就是说它本来就是
整行宽的，桌面端那套「grid 列 / 内层多空」的出血前提根本不存在。
实测（390px）：.wrap 宽 342、.hero__grid 列宽 342，
而 .hero__chips 实测 x=24 / w=366 / clientWidth=366，
比容器**宽出 24px**，于是最后一个 chip 的右半截被永久推出可视区，
用户看到的正是「末行只剩一个字」。
修法：在单列场景下把负 margin 归一化 —— margin-right: 0，
padding-right 回到 0（因为 .hero__grid > div 自身已无内边距，
不再需要「补回 gutter」），只保留右侧 peek。
真正的「末行只剩 1 字」由 text-wrap: balance 负责修，
静态兜底为 white-space: normal（老引擎不支持 balance 时
退化为自然换行，不会整条规则失效）。
-------------------------------------------------------------------------- */
@media (max-width: 900px) {
/* 19.1a 归一化出血：不再让 .hero__chips 溢出容器 */
.hero__grid > div > .hero__chips,
.hero__grid > div > .hero__chips--grid {
margin-right: 0;
padding-right: 0;
/* 首屏三个核心卖点应全部可见，不该藏在无视觉提示的横滑轨道里 */
flex-wrap: wrap;
overflow-x: visible;
padding-bottom: 4px;
}
/* 19.1b chip 换行治理：行长均衡 + 静态兜底 */
.hero__chips .chip,
.hero__chips--grid .chip {
/* 静态兜底：老引擎不认 text-wrap 时按自然换行 */
white-space: normal;
line-break: strict;
overflow-wrap: break-word;
/* 渐进增强：多行行长均衡，直接消灭「末行仅 1 字」 */
text-wrap: balance;
/* 78vw 在 360px 下 = 281px，恰好让部分文案「挤到只剩 1 字」，
收到 66vw 让长文案稳定走 3 行而不是「2 行 + 1 字」。
下限 200px 保证极窄屏仍能容下 12–13 个 CJK 字。 */
max-width: 200px;
max-width: min(66vw, 100%);
}
}
/* ==========================================================================
19.2 .stat__num 数字与单位被拆行
--------------------------------------------------------------------------
根因：§1 第 171–179 行先给了 `.stat__num{white-space:nowrap}`，
紧接着又用**同特异性**的后一条规则把断行能力还了回去：
.stat__num, .kpi__k { overflow-wrap: break-word; line-break: strict; }
而 `overflow-wrap: break-word` 对**可断字符**同样生效 —— CJK、
以及 `` 与数字之间的那个半角空格（HTML 里写的是 ` 项`），
都会在极窄的 1/2 列栅格（360px 下 .stat 内容宽仅 119px）里把
“128 项”拆成 “128” + “项”、“70M+”拆成 “70” + “M+”。
修法：
a) 恢复真正的 nowrap（连同 em 单位一起锁在一行）；
b) 极窄屏不靠「拆数字」防撑破，改为**缩字号**：
静态 30px 兜底 + clamp() 渐进降档，并在 360px 以下再兜一层；
c) 允许数字轻微溢出 .stat 内容盒（数字被卡片圆角裁掉一点点，
远好过拆成两行）—— .stat 本身有 overflow: visible（§6:902），
不需要额外声明。
-------------------------------------------------------------------------- */
@media (max-width: 900px) {
.stat__num,
.float-card__value,
.kpi__v {
/* 用 !important 压掉同特异性、且在本节之后仍可能生效的
`overflow-wrap: break-word; line-break: strict;`（§1 第 176–179 行）。
这两条是「极窄屏防撑破」的兜底，但它同时让 nowrap 失效，
属于设计冲突；此处显式收回。 */
white-space: nowrap !important;
overflow-wrap: normal !important;
word-break: keep-all;
}
/* 数字里的空格不允许成为换行点 */
.stat__num em,
.float-card__value em,
.kpi__v em { white-space: nowrap; }
/* 缩字号防撑破：静态兜底 → clamp 渐进 */
.stat__num {
font-size: 30px; /* 静态兜底 */
font-size: clamp(20px, 7.6vw, 30px); /* 360px → 27.4px；430px → 30px */
letter-spacing: -0.01em;
}
/* em（+ / 万+ / 项）随主体等比缩放，避免单位比数字还大 */
.stat__num em {
font-size: 16px; /* 静态兜底 */
font-size: clamp(12px, 3.9vw, 16px);
margin-left: 1px;
font-weight: 700;
font-style: normal;
}
}
/* 19.3 极窄屏（≤390px）再兜一层：此时 2 列栅格内容宽已不足 125px */
@media (max-width: 900px) and (max-width: 390px) {
.stat__num {
font-size: 26px; /* 静态兜底 */
font-size: clamp(19px, 6.9vw, 26px);
}
.stat__num em {
font-size: 14px; /* 静态兜底 */
font-size: clamp(11.5px, 3.6vw, 14px);
}
.stat { padding: var(--sp-4) 12px; }
}
/* ==========================================================================
19.4 chip 文字对比度收口
--------------------------------------------------------------------------
实测（整屏截图 → 元素 rect 裁剪 → 像素众数，非理论值）：
360/375/390/393/430 五视口 × 中英两页，chip 实际底色
· 中文页 = #fef4eb（--m-surface #fff5ec 之上叠了暖橘光晕后的实测值）
· 英文页中文时曾出现 #fffdfa（--m-bg，chip 自身底色未生效）
文字色 = #57534e（--m-ink-2）
对比度 7.03:1 ~ 7.51:1 —— **已经达标（≥4.5:1）**，无需改色。
但为了给「暖橘光晕更浓 / 未来调亮底色」留出安全边际，
把 chip 文字从 --m-ink-2 提到更深的 stone-700 档
（--m-ink #1c1917 与 --m-ink-2 #57534e 之间的中间值），
实测对比度提升到 ≈ 11:1，同时仍与标题的 --m-ink 拉开层次。
⚠️ 这里用就地色值而非新变量：mobile.css 只允许改本文件，
不新增令牌以免污染 tokens.css 语义。
========================================================================== */
@media (max-width: 900px) {
.hero:not(.hero--dark) .hero__chips .chip {
color: #3f3b38; /* stone-700 暖调，介于 --m-ink 与 --m-ink-2 之间 */
}
}
/* ==========================================================================
20. 本轮修复的记录（便于后续维护者理解为什么有这些 !important）
--------------------------------------------------------------------------
· 19.1 修 chip 孤字：本质是 .hero__chips 的负 margin 出血在**单列**
.hero__grid 下不成立，导致最后一枚 chip 被裁 → 看似孤字。
归一化 margin/padding 后，再用 text-wrap: balance 收行长。
· 19.2 修 .stat__num 拆行：§1 的 overflow-wrap: break-word 与
white-space: nowrap 自相矛盾，用 !important 收回 nowrap，
改用 clamp 缩字号防撑破。
· 19.3 对比度实测已达标（7.03–7.51:1），仍主动加深以留边际。
========================================================================== */
/* ==========================================================================
20. 换行收口（team-lead 直接落盘）
========================================================================== */
/* 20.1 标题
在移动端隐藏
---------------------------------------------------------------------------
text-wrap:balance 在含
的块上会被 Chrome 放弃均衡排版，把最后 1-2 个
字甩到末行 —— 这正是用户反馈的「最后一个字单独换行」。
对照实验（390px，仅内存移除
重测、未改文件）：
products.html:92 .h1 310/310/78/78/78 -> 233/233/233
platform.html:93 .h1 272/310/116/39/116 -> 233/233/233
partnership.html:92 .h1 233/310/116/78/116 -> 233/233/194
index.html:222 .h2 189/297/81 -> 270/297
platform.html:326 .h2 243/243/54/135/54 -> 270/270
注意：隐藏
是必要条件，改字号不能替代它 —— 保留
时不同页面需要
不同字号（products<=32 / partnership<=28 / platform<=28），且降到 26-28px
后 320px 窄屏又会产生新的短末行。
⚠️ 2026-10-16 修正（用户二次反馈）：
上面这套「隐藏 br」的推论对 .h2/.h3 成立，但**不能套用到 .h1**。
主标题的
是刻意设计的语义断行（首页「用 AI 重塑陪伴，/ 以科技定义
生长」、产品页「五大终端产品阵列 / 一套可复用的工程底座」）；一刀切隐藏后
浏览器按容器宽度机械断行，会把「以科技定义生长」拆成
「以科技定 / 义生长」这类破句，可读性反而更差 —— 用户反馈的
「HERO 标题也出现换行的问题」正是此因。
结论：行宽均衡（消灭孤字）与语义断行（不破句）冲突时，**优先语义断行**。
故 .h1 保留
，仅 .h2/.h3 隐藏。
--------------------------------------------------------------------------- */
@media (max-width: 900px) {
/* 仅对二级/三级标题隐藏
，让 text-wrap:balance 生效；
.h1 保留原设计的语义断行 */
.h2 br, .h3 br { display: none; }
/* .cta-h2-m 是移动端专用标题，其 4 行
为刻意设计，需保留。
它当前是独立 class（不带 .h2），此条为防御性保险，防止将来被加上 .h2 */
.cta-h2-m br { display: inline; }
/* 内页主标题字号：这是「保留
」能成立的前提。
保留
后，每个语义段必须能在一行内放完，否则仍会被机械断行
并甩出孤字（实测 products 段「一套可复用的工程底座」10 字被断成
「一套可复用的工程」+「底座」）。内页 .h1 原为 40px（base.css 的
clamp 下限），10–11 字约需 400–440px，远超容器 342px。
降到 clamp(22px, 7.2vw, 32px) 后（系数经 320/390/430 三档实测校准）：
430px 视口 → 31px，11 字 = 341px < 382px 可放下
390px 视口 → 28px，11 字 = 308px < 342px 可放下
320px 视口 → 23px，11 字 = 253px < 272px 可放下
（早前用 7.7vw 时 320px 算出 24.6px，11 字 = 271px 贴着 272px 的
临界值，实测仍会甩出「座」「枢纽」这类孤字，故下调系数。）
首页 .hero__title 走自己的 clamp（实测 29.64px），不在此列。 */
.h1:not(.hero__title) {
font-size: 28px; /* 静态兜底（老引擎不认 clamp 时） */
font-size: clamp(22px, 7.2vw, 32px);
line-height: 1.25;
}
}
/* 20.2 极窄屏英文导航项允许换行
en/privacy.html 与 en/terms.html 在 360/375 下：
a.mobile-nav__link scrollWidth=180 / clientWidth=160，
nowrap + overflow:hidden 导致「About GUROBOT」被裁 20px。
中文导航项均为 2-4 字，不会折行，故仅在 <=380px 放开。 */
@media (max-width: 380px) {
.mobile-nav__link {
white-space: normal;
overflow-wrap: break-word;
line-break: strict;
}
}
/* ==========================================================================
21. 首页三大核心优势卡横滑（≤700px）—— 由原 §5 嵌套 @media 摊平而来
--------------------------------------------------------------------------
原写法是 @media(max-width:700px) 嵌套在 @media(max-width:900px) 内，是全文件
唯一一处嵌套媒体查询。Chrome 支持，但鸿蒙 ArkWeb（自研内核）对 CSS Nesting
的支持无法在本机验证。≤700px 蕴含 ≤900px，摊平为独立顶层块是纯等价变换。
注意：701–900px 竖屏平板在 §16 用 2 列 grid，本块不得影响该区间。
========================================================================== */
@media (max-width: 700px) {
.band .grid-3 {
display: flex;
grid-template-columns: none;
gap: var(--sp-4);
margin-inline: calc(var(--gutter) * -1);
padding: 0 var(--gutter) var(--sp-2);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scroll-padding-left: var(--gutter);
scrollbar-width: none;
-ms-overflow-style: none;
}
.band .grid-3::-webkit-scrollbar { display: none; }
.band .grid-3 > .card {
flex: 0 0 auto;
width: 84vw;
max-width: 84vw;
scroll-snap-align: center;
scroll-snap-stop: always;
padding: var(--sp-5);
border-radius: var(--m-r-lg);
background: var(--m-bg);
box-shadow: inset 0 0 0 1px var(--m-line);
}
/* 当前卡片：暖橘描边 + 抬升，与未激活卡拉开层次 */
.band .grid-3 > .card.m-slide-on {
box-shadow: inset 0 0 0 1px var(--m-line-2), var(--m-sh-2);
transform: translateY(-2px);
}
.band .grid-3 > .card .card__index {
font-size: 26px;
line-height: 1;
color: var(--accent-a3);
}
.band .grid-3 > .card .card__title { font-size: 19px; line-height: 1.4; }
.band .grid-3 > .card .adv__lead,
.band .grid-3 > .card .adv__result { font-size: 14.5px; line-height: 1.78; }
}
/* ==========================================================================
22. 可读性与交互收口
========================================================================== */
@media (max-width: 900px) {
/* ------------------------------------------------------------------
22.1 HERO 副标题：语义分块恢复完整，不被从中间劈开
------------------------------------------------------------------
背景：§1 为防撑破把 .nb/.nw 一律降级为 white-space:normal，
副作用是「云端中台赋能」这类完整词组会在任意位置断行，
末行只剩「能」—— 用户反馈的「最后一个字换行」。
实测各分块长度：面向全球客户提供(8) / 高可靠(3) /
核心产品直供与(7) / 云端中台赋能(6) / 。(1)，
最长 8 字 ≈ 124px，远小于容器 272px(320屏) → nowrap 不会撑破。
选择器限定 .hero__sub 内，不波及页脚（页脚有个 118 字符的
英文 .nw，若一并 nowrap 会横向撑破，故必须限定作用域）。
------------------------------------------------------------------ */
.hero__sub .nb,
.hero__sub .nw {
white-space: nowrap;
}
/* ------------------------------------------------------------------
22.2 产品轮播图兜底：无 JS 时第一张可见
------------------------------------------------------------------
components.css:1200 让 .gallery__slide 默认 opacity:0，
只靠 JS 加 .is-on 才显示。叠加 loading="lazy"（浏览器对不可见
元素会推迟加载），一旦 JS 执行异常整组产品图全白。
此处让首张默认可见，作为渐进增强兜底。
------------------------------------------------------------------ */
.gallery__slide:first-child { opacity: 1; }
/* 有 JS 接管后，只保留 .is-on 那张（避免首张与当前张重叠） */
.m-js .gallery__slide:first-child:not(.is-on) { opacity: 0; }
/* ------------------------------------------------------------------
22.3 页脚版权与备案：浅灰在暖白底仅 2.34:1（全站 14 页）
------------------------------------------------------------------ */
.footer__legal,
.footer__beian {
color: var(--m-ink-2);
}
/* ------------------------------------------------------------------
22.4 深色区块文字：暖色改造后背景变浅，但这些区块仍为深色，
内部文字须为白色，否则深字配深底完全不可见
（platform 页 .tech 区「聚合 — 适配 — 赋能」实测 1.02:1）
------------------------------------------------------------------ */
/* 仅 .tech / .dash 是真深色区块（--c-tech #0f172a / tech 系渐变）。
⚠️ 不可用 .page-dark-hero 做选择器：它是 上的页面级标记
（原设计只用于让深色首屏上的页头导航变白），若用它写 .h2 会把
暖白区标题一并刷白，造成 1.02:1 的反向事故。 */
.tech .h2, .tech .h3, .tech .h4,
.dash .h2, .dash .h3, .dash .h4,
.why-card--dark .why-card__title { color: #ffffff; }
.tech .sec-desc, .tech .cap__desc, .tech p, .tech li,
.dash p, .dash li { color: rgba(232, 238, 247, 0.90); }
.tech .eyebrow, .dash .eyebrow { color: var(--c-accent); }
/* 品牌橙 #f97316 在暖白底约 2.61:1。作装饰性标签（序号、CAPABILITY 01、
.k 小标）时是强色相对比、视觉醒目，保留品牌色不变；
但 .chip-card__role 是产品卡说明性正文，改用深墨保证阅读。 */
.chip-card__role { color: var(--m-ink-2); }
/* ------------------------------------------------------------------
22.5 【关键修复】暖白统一底误伤深色卡片
------------------------------------------------------------------
本文件上方（约 671 行）有一组「暖色卡片统一底」规则：
.hv2-item, .why-card, ... { background: var(--m-surface); }
它把 .why-card--dark（合作页「强 · 研发保障」「长 · 持续维护」）
和 .hv2-item（关于页荣誉墙单项）连同浅色卡片一起刷成了暖白底
#fff5ec，但这些深色变体的文字仍是浅蓝白 rgba(232,238,247,*)，
于是「浅底 + 浅字」完全看不清 —— 用户反馈的正是这两处。
修法：给深色变体单独设深色底，覆盖掉暖白统一底。
选择器特异性同为 (0,1,0)，靠源序在后取胜，无需 !important。
用半透明深色而非纯色，可保留背后 honors-wall.jpg / why-bg-2.jpg
的质感，同时保证白字对比度。
------------------------------------------------------------------ */
/* 合作页「强」「长」两张深色卡 */
.why-card--dark {
background-color: #16223c;
background-image: linear-gradient(
180deg,
rgba(15, 23, 42, 0.90) 0%,
rgba(15, 23, 42, 0.96) 100%
);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12),
0 18px 34px -20px rgba(2, 6, 23, 0.55);
}
.why-card--dark .why-card__title { color: #ffffff; }
.why-card--dark .why-card__cure { color: rgba(240, 245, 252, 0.95); }
/* 标签保持橙底白字，深底上更醒目 */
.why-card--dark .why-card__tag { background: var(--c-accent); color: #ffffff; }
/* 关于页荣誉墙：单项默认就给深色底，不依赖点击/hover */
.hv2-item {
background: rgba(15, 23, 42, 0.62);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
border-radius: var(--m-r);
}
/* 原 hover 用 rgba(255,255,255,0.09)（白色）会让背景更浅、字更糊，
改为加深，形成「点击更清晰」的正向反馈 */
.hv2-item:hover {
background: rgba(15, 23, 42, 0.80);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.hv2-item__t { color: #ffffff; }
.hv2-item__d { color: rgba(238, 243, 252, 0.95); }
/* 编号原为 --c-accent-200，在深底上偏暗，改用琥珀金 */
.hv2-item__no { color: #fbbf24; }
/* 图标保持橙色，深底上可见 */
.hv2-item svg { color: #fb923c; }
/* 荣誉墙 / 使命卡：半透明白字加深一档（背景图亮部不再发虚） */
.honors-v2 .sec-desc { color: rgba(238, 243, 252, 0.95); }
.hv2-feature__desc { color: rgba(255, 255, 255, 0.94); }
.mission-card__label { color: rgba(255, 255, 255, 0.96); }
.mission-card__tagline { color: rgba(255, 255, 255, 0.98); }
/* 关于页「AI 实现 / 儿童教育平等」发虚（用户反馈）
结构：.mission-card__text（22px 白字）内含 .mission-hl 高亮块。
两个成因：
1. .mission-hl 的渐变中间色 rgba(251,146,60,0.55) 只有 55% 不透明，
叠在 mission-bg-43.jpg 背景图上后，白字在半透明橙底上发虚；
且带 missionHl 3s 无限流动动画，视觉上更显模糊。
→ 移动端改为不透明橙底 + 关闭动画。
2. .mission-card__text 是纯白大字直接压在背景图上，遇到背景亮部
对比不足。→ 加一层柔和深色投影托底（不改变字色）。 */
.mission-card__text {
color: #ffffff;
text-shadow: 0 2px 8px rgba(15, 23, 42, 0.55), 0 0 3px rgba(15, 23, 42, 0.38);
}
/* 用 .mission-card__text .mission-hl（特异性 0,2,0）而不是单类 .mission-hl
（0,1,0）—— components.css:2577 有一条
`.mission-hl, .card__index, .honor__no{ font-size: var(--fs-12) }`，
会把这句主标语压到 12–14px（父级 .mission-card__text 是 22px），
字太小在背景图上更显发虚。提高特异性可稳定覆盖，不必依赖加载顺序。 */
.mission-card__text .mission-hl {
background-color: #ea6a0b;
background-image: none;
animation: none;
color: #ffffff;
font-weight: 800;
text-shadow: none;
font-size: inherit; /* 跟随父级 22px */
}
/* ------------------------------------------------------------------
22.6 横滑提示箭头：悬浮在可横向滚动区域右侧，滑动后消失
------------------------------------------------------------------
由 mobile.js 动态插入到滚动容器的父节点（父节点 position:relative），
故箭头不随内容滚动。
箭头用 CSS 边框三角绘制，不用 SVG data-URI —— 避免 ArkWeb 下
的编码兼容问题，也少一个资源依赖。
------------------------------------------------------------------ */
.m-scroll-hint {
position: absolute;
right: 0;
width: 56px;
z-index: 3;
pointer-events: none;
background: linear-gradient(
90deg,
rgba(255, 253, 250, 0) 0%,
rgba(255, 253, 250, 0.72) 45%,
rgba(255, 253, 250, 0.96) 100%
);
opacity: 1;
transition: opacity 0.35s ease, visibility 0.35s ease;
animation: m-hint-nudge 1.9s ease-in-out infinite;
}
.m-scroll-hint.is-off {
opacity: 0;
visibility: hidden;
animation: none;
}
/* 圆形底盘 */
.m-scroll-hint::before {
content: '';
position: absolute;
top: 50%;
right: 8px;
width: 30px;
height: 30px;
margin-top: -15px;
border-radius: 50%;
background: rgba(255, 253, 250, 0.94);
box-shadow: 0 2px 10px rgba(120, 84, 52, 0.2);
}
/* 箭头（右边框 + 下边框旋转 45°） */
.m-scroll-hint::after {
content: '';
position: absolute;
top: 50%;
right: 17px;
width: 9px;
height: 9px;
margin-top: -6px;
border-right: 2.5px solid var(--c-accent);
border-bottom: 2.5px solid var(--c-accent);
transform: rotate(-45deg);
}
@keyframes m-hint-nudge {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(5px); }
}
}
/* 尊重「减少动态效果」的系统偏好
注意：独立顶层块，不嵌在 @media(max-width:900px) 内 ——
嵌套 @media 在 ArkWeb（自研内核）下支持情况无法验证，全文件禁止嵌套。 */
@media (prefers-reduced-motion: reduce) {
.m-scroll-hint { animation: none; }
}
/* ==========================================================================
23. 极窄屏（≤350px）主标题再降一档
--------------------------------------------------------------------------
仅 platform（「多模态大模型的超级枢纽」12 字）与 partnership
（「把产品力做成商业护城河」11 字）在 320px 下仍会甩出 1 字孤字：
此时容器 272px，12 字需字号 ≤22.6px，而 §20.1 的 clamp(22px,7.2vw,32px)
在 320px 算出 23px（276px）刚好超出。
故对 ≤350px 单独降档为 clamp(19px, 6.8vw, 24px)：
320px → 21.8px，12 字 = 262px < 272px 可放下
主流屏（≥360px）不受影响，仍走 §20.1 的档位。
注意：独立顶层块，不嵌套在任何 @media 内（ArkWeb 兼容性约束）。
========================================================================== */
@media (max-width: 350px) {
.h1:not(.hero__title) {
font-size: 21px;
font-size: clamp(19px, 6.8vw, 24px);
}
}
/* ==========================================================================
24. 页脚收口（放在文件末尾，确保覆盖前面所有页脚相关规则）
--------------------------------------------------------------------------
前面的 §10 页脚块与 §11 触控热区治理互相拉锯：
§10 想把页脚链接压到 30px，但 §11「Apple HIG 44px」的通用热区规则
又把 .footer__col a 顶回 44px，导致改了等于没改。
此处用 .footer__col ul li a（特异性 0,4,0）+ 文件末尾源序，一次性锁定。
目标（用户要求）：页脚更短、字更小、信息密度更高。
-------------------------------------------------------------------------- */
@media (max-width: 900px) {
/* 链接列表：36px 行高。
曾试过 30px，但验收脚本 verify-mobile.js 的热区下限是 36px（84 条失败），
故回到 36px —— 相比原来的 44px 仍明显压缩，且满足可访问性要求。 */
.footer__col ul li a {
display: block;
min-height: 36px;
line-height: 36px;
font-size: 12px;
padding: 0;
color: var(--m-ink-2);
}
/* 列表项不再有额外下间距 */
.footer__col ul li { margin-bottom: 0; }
/* 品牌列正文（公司简介 / 联系方式）里的邮箱、电话保持 inline，
否则会各占一行，把联系区撑成 7 行 */
.footer__col p a {
display: inline;
min-height: 0;
line-height: 1.5;
font-size: 12px;
}
/* 「国家级专精特新“小巨人”企业。」这类完整词组不拆行
（components.css:2282 把 .nw 统一降级为 normal，在页脚会造成破句）。
⚠️ 必须用 html:lang(zh-CN) 限定中文页！
英文页页脚的 .nw 是 118 字符长句
（"a national-level “Little Giant” enterprise recognized for ...innovation."），
若一并 nowrap 会横向撑破 329px —— 回归实测 en/index.html @360x800 即因此
报出 35 条溢出。中文该词组 14 字 × 12px ≈ 182px，容器 272px(320屏)
放得下，nowrap 才安全。 */
html:lang(zh-CN) .footer__col .footer__line .nw { white-space: nowrap; }
/* 页脚底部版权 / 备案：字号再降一档，压缩行数 */
.footer__bottom { font-size: 12px; }
.footer__legal,
.footer__beian { min-height: 26px; font-size: 11.5px; }
}
/* ==========================================================================
25. 标题换行统一收口（全站 524 个标题扫描后制定）
--------------------------------------------------------------------------
扫描：14 页 × 390/320 两档，共 524 个 h1~h4，自动标记孤字与破句，
发现 21 处。归类后需修的是三类：
A. 法务页（privacy / terms）.legal-doc h2 —— 序号 + 长句，窄屏机械断行
甩出「围」「息」「据）」「性质」等 1–2 字孤字，是本次最严重的一类。
实测最长标题「八之一、工程样机、样品与技术资料的使用限制」约 21 字：
390px 容器 342px → 需字号 ≤16.3px
320px 容器 272px → 需字号 ≤13.0px
故用 clamp(13px, 4.1vw, 16px)，两端都能整句一行放下。
B. .h2 —— 实测 24.2px 时「桌面 AI 智能时间与音频终端系列」总宽 341px，
贴着 342px 容器边界被拆成「…智能时间 / 与音频终端系列」（以「与」
开头，破句）。降到 22px → 约 310px，可一行放下。
C. .h4 —— components.css:1347 的 text-wrap:balance 只给了 h1/h2/h3，
h4 缺失，此处补齐。
注：index/partnership 的 .h1 带
的换行属刻意设计的语义断行
（§20.1 已明确 .h1 保留
），扫描器会误报为破句，不在本次修改范围。
========================================================================== */
@media (max-width: 900px) {
/* A. 法务页标题 */
.legal-doc h2,
.legal-doc .h2 {
font-size: 16px; /* 静态兜底 */
font-size: clamp(13px, 4.1vw, 16px);
line-height: 1.45;
text-wrap: balance;
}
/* B. 通用二级标题
必须同时写 .sec-head .h2 —— products 的 h2 在 .sec-head 容器内，
components.css 的 `.sec-head .h2{font-size:...}` 特异性 (0,2,0)
高于单类 .h2 (0,1,0)，只写 .h2 会被它顶掉（实测 390px 下仍是原值）。 */
.h2,
.sec-head .h2 {
font-size: 22px; /* 静态兜底 */
font-size: clamp(18px, 5.6vw, 22px);
}
/* ⚠️ 不要给 .h3 加 text-wrap:pretty —— 实测会让情况恶化。
加 pretty 后全站问题从 7 处涨到 21 处：Chinese 长标题出现
「国际儿童数据安全防 / 火墙」「护眼台灯俯视拍学专用控制 / 方案」
这类孤字。pretty 对中文的断行优化不稳定，此处保持 balance 即可。 */
/* C. 四级标题补齐 */
.h4 { text-wrap: balance; }
}