/* ============================================================================
SHMD UI · 视觉升级层 v2
----------------------------------------------------------------------------
加载顺序：styles.css -> solutions.css -> shmd-ui.css（本文件必须最后）
设计约束：全站直角（无圆角）、宽屏、纯静态、无在线字体/图片依赖。
本文件只做「覆盖 + 增强」，删除本文件的 即可完全回到旧版。
----------------------------------------------------------------------------
升级原理（针对「色彩太素」）：
1. 彩度分层：大面积仍是低彩度中性色，小面积改用高彩度品牌色/青色/琥珀色
2. 中性色加冷调：所有灰都带 250 色相的蓝，消除灰扑扑观感
3. 建立 4 级高度阶梯（hairline / e-1 / e-2 / e-3）+ 品牌光晕
4. 首屏加入网格底纹 + 双色径向光，解决「纯色平铺」
5. 分区之间用渐变过渡线，替代硬切
6. 动效克制：滚动揭示 + 吸顶毛玻璃 + 悬停微抬升，全部遵循 reduced-motion
========================================================================= */
/* ==========================================================================
1. Design Tokens
========================================================================== */
:root {
/* --- 中性色阶（统一 250 色相，带冷调，最高彩度仅 0.032）--- */
--n-0: oklch(1 0 0);
--n-25: oklch(0.988 0.004 250);
--n-50: oklch(0.972 0.006 250);
--n-100: oklch(0.945 0.008 250);
--n-200: oklch(0.900 0.011 250);
--n-300: oklch(0.820 0.014 250);
--n-400: oklch(0.680 0.017 250);
--n-500: oklch(0.580 0.019 250);
--n-600: oklch(0.470 0.020 250);
--n-700: oklch(0.360 0.024 250);
--n-800: oklch(0.270 0.032 250);
--n-900: oklch(0.200 0.040 251);
--n-950: oklch(0.152 0.040 252);
/* --- 品牌蓝阶（彩度从 0.03 提升到 0.145，真正「有颜色」）--- */
--b-200: oklch(0.870 0.060 244);
--b-300: oklch(0.780 0.100 243);
--b-400: oklch(0.670 0.130 245);
--b-500: oklch(0.590 0.150 247);
--b-600: oklch(0.520 0.145 250);
--b-700: oklch(0.440 0.130 251);
--b-800: oklch(0.330 0.100 252);
--b-900: oklch(0.235 0.068 253);
--b-950: oklch(0.175 0.052 253);
/* --- 强调色（高彩度，只用于小面积）--- */
--c-cyan: oklch(0.760 0.120 215); /* 冷色高光，用于渐变第二停靠点 */
--c-cyan-2:oklch(0.860 0.090 210);
--c-amber: oklch(0.790 0.155 68); /* 暖色强调，替代原 #f3a077 */
--c-amber-2:oklch(0.860 0.130 76);
/* --- 语义别名 --- */
--brand: var(--b-600);
--brand-strong: var(--b-700);
--brand-bright: var(--b-500);
--ink: var(--n-900);
--ink-soft: var(--n-700);
--muted: var(--n-500);
--line: var(--n-200);
--hairline: oklch(0.235 0.068 253 / 0.10); /* 冷调发丝线，替代纯灰 */
--hairline-2: oklch(0.235 0.068 253 / 0.16);
--surface: var(--n-0);
--surface-1: var(--n-25);
--surface-2: var(--n-50);
--surface-deep: var(--b-950);
/* --- 渐变 --- */
--grad-brand: linear-gradient(135deg, var(--b-600) 0%, var(--b-500) 52%, var(--c-cyan) 100%);
--grad-deep: linear-gradient(158deg, oklch(0.175 0.048 253) 0%, oklch(0.225 0.058 249) 52%, oklch(0.198 0.050 246) 100%);
--grad-accent:linear-gradient(90deg, var(--c-cyan), var(--c-amber));
/* --- 高度阶梯（冷调阴影，避免灰脏）--- */
--e-1: 0 1px 2px rgb(19 39 62 / .05), 0 1px 3px rgb(19 39 62 / .05);
--e-2: 0 2px 4px -1px rgb(19 39 62 / .07), 0 10px 22px -8px rgb(19 39 62 / .11);
--e-3: 0 4px 10px -3px rgb(19 39 62 / .09), 0 22px 48px -16px rgb(19 39 62 / .18);
--e-4: 0 8px 18px -6px rgb(19 39 62 / .12), 0 36px 72px -24px rgb(19 39 62 / .24);
--glow-brand: 0 0 0 1px oklch(0.520 0.145 250 / .22), 0 14px 38px -12px oklch(0.520 0.145 250 / .38);
--glow-cyan: 0 0 40px -6px oklch(0.760 0.120 215 / .28);
/* --- 排版 --- */
--font-sans: "MiSans", "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", sans-serif;
/* --- 节奏 --- */
--space-section: clamp(72px, 7vw, 112px);
/* --- 浮栏专用栏位 ---
.contact-rail 是 position:fixed 贴在视口右下角（由 script.js 注入）。
正文容器若铺到视口右边缘，最右一截会被浮栏压住——实测 320px 下每行被遮
约 2~3 个字，1440px 下也仍有 44px 落在浮栏底下。
这里给浮栏预留一条右侧栏位：栏位宽度 = 浮栏宽 + 右边距 + 2px 余量。
容器宽度同步扣掉栏位，并把扣下来的空间全部记在 margin-right 上，
这样正文右边界停在栏位左侧，浮栏与正文不再重叠。 */
--rail-lane: 74px; /* 54 按钮 + 2 边框 + 16 右边距 + 2 余量 */
--container: min(1460px, calc(100% - 56px - var(--rail-lane)));
/* --- 动效 --- */
--dur-fast: 160ms;
--dur: 260ms;
--dur-slow: 520ms;
--ease-out: cubic-bezier(.22, .61, .36, 1);
--ease-emph: cubic-bezier(.16, 1, .3, 1);
/* --- 兼容旧变量名（styles.css 内部仍在引用）--- */
--blue: var(--b-600);
--blue-dark: var(--b-950);
--blue-deep: var(--b-950);
--gray-bg: var(--n-50);
--white: var(--n-0);
--body: var(--font-sans);
}
/* ==========================================================================
2. Base
========================================================================== */
html { background: var(--surface); -webkit-text-size-adjust: 100%; }
body {
color: var(--ink);
background: var(--surface);
font-family: var(--font-sans);
font-feature-settings: "kern" 1, "liga" 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 1.7;
}
::selection { background: var(--b-600); color: var(--n-0); }
/* 标题统一收紧字距 + 平衡换行，这是「精致感」最便宜的一招 */
h1, h2, h3, .brand-en, .about-side span, .contact-visual-mark {
letter-spacing: -0.02em;
text-wrap: balance;
}
h1, h2 { text-wrap: balance; }
p { text-wrap: pretty; text-underline-offset: 3px; }
/* 数字统一等宽，避免跳动 */
.hero-proof strong, .fact-grid strong, .about-side span, .product-caption span, .method-grid span, .process-item > span {
font-variant-numeric: tabular-nums;
}
.page-width { width: var(--container); }
/* 把预留的栏位记在右侧：margin-left 保持 auto，因此左侧留白不变，
只有右边多出让给浮栏的那一截。页头与移动菜单是顶部/浮层，不在浮栏范围内。 */
.page-width:not(.header-inner):not(.topbar-inner):not(.mobile-nav),
.detail-layout,
.related {
margin-right: var(--rail-lane);
}
/* 键盘焦点：2px 琥珀 + 冷色外发光，比原来的纯色描边清晰 */
:focus-visible {
outline: 2px solid var(--c-amber);
outline-offset: 3px;
box-shadow: 0 0 0 5px oklch(0.790 0.155 68 / .16);
}
/* ==========================================================================
3. 顶栏 + 导航（滚动后吸顶毛玻璃）
========================================================================== */
.topbar {
color: oklch(0.880 0.014 240);
font-size: 12.5px;
letter-spacing: .04em;
transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.topbar-inner { border-bottom-color: oklch(1 0 0 / .10); }
.site-header { transition: background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
.header-inner { border-bottom-color: oklch(1 0 0 / .14); }
/* 吸顶状态：固定在顶部 + 毛玻璃 + 底部渐变发丝线 */
.site-header.is-stuck {
position: fixed;
top: 0;
z-index: 40;
background: oklch(0.152 0.040 252 / .82);
-webkit-backdrop-filter: saturate(1.3) blur(16px);
backdrop-filter: saturate(1.3) blur(16px);
box-shadow: 0 1px 0 oklch(1 0 0 / .06), 0 18px 40px -28px rgb(0 0 0 / .7);
}
.site-header.is-stuck .header-inner { min-height: 72px; border-bottom-color: transparent; }
.site-header.is-stuck .brand-en { font-size: 28px; }
.topbar.is-hidden { opacity: 0; transform: translateY(-100%); pointer-events: none; }
.brand-en {
font-weight: 800;
letter-spacing: .02em;
background: linear-gradient(180deg, #fff 0%, oklch(0.870 0.030 235) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
transition: font-size var(--dur) var(--ease-out);
}
/* 页脚品牌：深色底上走琥珀实色，不套用首屏的白色渐变 */
.footer-brand .brand-en {
background: none;
-webkit-background-clip: initial;
background-clip: initial;
color: var(--c-amber);
}
/* 导航下划线：琥珀 → 青色渐变，比纯橙更有层次 */
.primary-nav a { font-size: 15.5px; letter-spacing: .01em; }
.primary-nav a::after {
height: 3px;
background: var(--grad-accent);
transition: transform var(--dur) var(--ease-emph);
}
.header-phone strong { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
/* ==========================================================================
4. 首屏（最关键的一屏）
========================================================================== */
.suction-hero {
position: relative;
padding-block: 190px 76px;
isolation: isolate;
/* 多层背景：底部强调线 + 右上青色光 + 左下品牌光 + 底色渐变 */
background-image:
linear-gradient(90deg, transparent 0%, oklch(0.760 0.120 215 / .50) 26%, oklch(0.790 0.155 68 / .60) 62%, transparent 100%),
radial-gradient(1120px 640px at 88% 4%, oklch(0.590 0.150 247 / .26), transparent 62%),
radial-gradient(900px 580px at 4% 98%, oklch(0.520 0.145 250 / .24), transparent 60%),
radial-gradient(680px 420px at 66% 112%, oklch(0.760 0.120 215 / .14), transparent 70%),
var(--grad-deep);
background-repeat: no-repeat;
background-size: 100% 1px, auto, auto, auto, auto;
background-position: bottom left, 0 0, 0 0, 0 0, 0 0;
}
/* 工程网格底纹：向底部渐隐 */
.suction-hero::before {
position: absolute;
inset: 0;
z-index: -1;
background-image:
repeating-linear-gradient(0deg, oklch(1 0 0 / .055) 0 1px, transparent 1px 72px),
repeating-linear-gradient(90deg, oklch(1 0 0 / .055) 0 1px, transparent 1px 72px);
-webkit-mask-image: radial-gradient(130% 100% at 50% 0%, #000 20%, transparent 78%);
mask-image: radial-gradient(130% 100% at 50% 0%, #000 20%, transparent 78%);
content: '';
transform: translate3d(0, var(--hero-shift, 0px), 0);
}
.suction-hero-copy h1 { letter-spacing: -.035em; line-height: 1.13; margin: 22px 0 26px; }
.suction-hero-copy h1 span {
background: linear-gradient(100deg, var(--c-amber-2) 0%, var(--c-amber) 55%, oklch(0.740 0.140 42) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.suction-hero-copy > p:not(.section-kicker) { color: oklch(0.855 0.020 235); line-height: 1.9; }
.section-kicker {
display: inline-flex;
align-items: center;
gap: 9px;
letter-spacing: .16em;
font-size: 11.5px;
font-weight: 700;
}
.section-kicker::before { width: 22px; height: 2px; background: currentColor; content: ''; opacity: .7; }
.section-kicker.light { color: var(--c-amber-2); }
.suction-keywords {
border-top-color: oklch(1 0 0 / .14);
color: oklch(0.800 0.020 235);
letter-spacing: .04em;
}
.suction-keywords span { position: relative; padding-left: 14px; }
.suction-keywords span::before { position: absolute; top: .62em; left: 0; width: 6px; height: 6px; background: var(--c-cyan); content: ''; }
/* 首屏图卡：抬升 + 品牌光晕 + 工程角标 */
.suction-hero-image {
position: relative;
background: linear-gradient(160deg, oklch(0.965 0.008 250), oklch(0.930 0.012 248));
border: 1px solid oklch(1 0 0 / .16);
box-shadow: var(--e-4), var(--glow-cyan);
}
.suction-hero-image::before,
.suction-hero-image::after {
position: absolute;
width: 26px;
height: 26px;
border: 2px solid var(--c-amber);
content: '';
pointer-events: none;
z-index: 2;
}
.suction-hero-image::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.suction-hero-image::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
.suction-hero-image figcaption {
gap: 6px;
padding: 18px 24px 20px;
border-top: 1px solid oklch(0.152 0.040 252 / .12);
color: oklch(0.400 0.030 248);
background: linear-gradient(180deg, oklch(0.988 0.004 250), oklch(0.960 0.009 250));
}
.suction-hero-image figcaption span { color: var(--ink); font-weight: 600; font-size: 14.5px; }
.suction-hero-image small { color: var(--muted); letter-spacing: .02em; }
/* ==========================================================================
5. 通用按钮
========================================================================== */
.hero-button, .light-button, .copy-wechat {
position: relative;
border: 0;
letter-spacing: .01em;
transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out), background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
/* 主按钮：品牌渐变 + 顶部内高光（这一条内高光是质感的关键） */
.hero-button {
min-height: 50px;
padding: 13px 24px;
color: var(--n-0);
background: var(--grad-brand);
box-shadow: inset 0 1px 0 oklch(1 0 0 / .22), var(--e-2);
}
.hero-button:hover, .hero-button:focus-visible {
background: var(--grad-brand);
box-shadow: inset 0 1px 0 oklch(1 0 0 / .30), var(--glow-brand);
transform: translateY(-1px);
}
.hero-button:active { transform: translateY(0); }
.light-button {
min-height: 48px;
padding: 12px 22px;
color: var(--n-0);
background: linear-gradient(135deg, var(--b-600), var(--b-500));
box-shadow: inset 0 1px 0 oklch(1 0 0 / .20), var(--e-2);
}
.light-button:hover, .light-button:focus-visible {
background: linear-gradient(135deg, var(--c-amber), oklch(0.740 0.140 46));
box-shadow: inset 0 1px 0 oklch(1 0 0 / .28), 0 14px 34px -14px oklch(0.790 0.155 68 / .55);
transform: translateY(-1px);
}
/* 次级按钮：发丝边框 + 悬停青色描边 */
.suction-secondary {
padding-block: 12px;
border-bottom-color: oklch(0.760 0.120 215 / .55);
color: oklch(0.900 0.016 235);
transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), gap var(--dur) var(--ease-out);
}
.suction-secondary:hover, .suction-secondary:focus-visible { color: var(--n-0); border-bottom-color: var(--c-cyan); gap: 12px; }
/* ==========================================================================
6. 区块与标题
========================================================================== */
.section { padding-block: var(--space-section); }
/* 相邻区块交替底色，避免连续两大片纯白 */
.section + .section { background: var(--surface-1); }
.section + .section + .section { background: var(--surface); }
.section-title { margin-bottom: 46px; }
.section-title h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.22; letter-spacing: -.028em; }
/* 标题下划线：左对齐时靠左，居中时居中（修正原实现的居中 bug） */
.section-title h2::after { width: 56px; height: 3px; margin: 20px 0 0; background: var(--grad-accent); }
.section-title.centered h2::after { margin-inline: auto; }
.section-title > p:last-child { font-size: 16.5px; line-height: 1.8; color: var(--muted); }
.section-heading h2 { font-size: clamp(28px, 3vw, 42px); letter-spacing: -.028em; }
.editorial-section { position: relative; padding-block: var(--space-section); }
.editorial-section + .editorial-section { padding-top: 0; }
/* 区块之间的渐变过渡线，替代硬切 */
.editorial-section::before {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--hairline-2) 18%, var(--hairline-2) 82%, transparent);
content: '';
}
/* ==========================================================================
7. 卡片系统（统一：发丝边框 + e-1 → 悬停 e-3 + 顶部强调线生长）
========================================================================== */
.product-card, .case-card, .culture-card, .service-card, .industry-block,
.info-panel, .related-grid a, .process-item, .suction-industry {
position: relative;
border-color: var(--hairline);
box-shadow: var(--e-1);
transition: box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out),
transform var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.product-card:hover, .case-card:hover, .culture-card:hover, .service-card:hover,
.industry-block:hover, .related-grid a:hover {
border-color: oklch(0.520 0.145 250 / .30);
box-shadow: var(--e-3);
transform: translateY(-3px);
}
/* 产品卡：图片区加冷底色阶，标签改成实色小签 */
.product-image { background: linear-gradient(165deg, oklch(0.975 0.007 250), oklch(0.940 0.011 249)); }
.concept-label {
bottom: 10px; left: 10px;
padding: 3px 9px;
color: oklch(0.330 0.100 252) !important;
background: oklch(1 0 0 / .88) !important;
border: 1px solid var(--hairline);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
letter-spacing: .06em;
}
.product-caption { padding: 17px 18px 19px; border-top: 1px solid var(--hairline); }
.product-caption h3 { font-size: 19px; letter-spacing: -.015em; }
.product-card:hover .product-caption { background: var(--n-25); }
/* 分类筛选：药丸改为直角 + 选中态用品牌渐变 */
.category-tab {
border-color: var(--hairline);
background: var(--n-0);
color: var(--n-600);
box-shadow: var(--e-1);
transition: all var(--dur) var(--ease-out);
}
.category-tab:hover { border-color: oklch(0.520 0.145 250 / .35); color: var(--b-700); transform: translateY(-1px); }
.category-tab.is-active {
border-color: transparent;
background: var(--grad-brand);
color: var(--n-0);
box-shadow: inset 0 1px 0 oklch(1 0 0 / .22), var(--e-2);
}
/* 图标徽标：替换原来的硬阴影，改渐变方块 + 内高光 + 琥珀短线 */
.card-heading > .icon-badge {
border: 0 !important;
background: linear-gradient(150deg, var(--b-700), var(--b-900)) !important;
box-shadow: inset 0 1px 0 oklch(1 0 0 / .18), var(--e-1) !important;
}
.card-heading > .icon-badge::after { background: var(--c-amber) !important; }
.home-support-list .icon-badge, .solution-method .icon-badge {
background: linear-gradient(150deg, oklch(0.330 0.100 252), oklch(0.235 0.068 253)) !important;
box-shadow: inset 0 1px 0 oklch(1 0 0 / .14) !important;
}
/* 行业九宫格 */
.suction-industry-grid { border-color: var(--hairline); background: var(--n-0); box-shadow: var(--e-1); }
.suction-industry { border-color: var(--hairline); box-shadow: none; }
.suction-industry:hover { background: var(--n-25); transform: none; box-shadow: inset 0 -2px 0 var(--c-amber); }
.suction-industry-icon { color: var(--b-600); }
/* 信息面板 / 流程格 */
.process-grid { border-color: var(--hairline); background: var(--hairline); box-shadow: var(--e-1); }
.process-item { border-color: var(--hairline); box-shadow: none; background: var(--n-0); }
.process-item > span { color: var(--b-600); letter-spacing: .08em; }
a.process-item:hover { background: var(--n-25); box-shadow: inset 3px 0 0 var(--c-amber); transform: none; }
.info-panel {
padding: 28px 26px 30px;
border-top: 3px solid transparent;
background: linear-gradient(180deg, var(--n-25), var(--n-50));
background-clip: padding-box;
}
.info-panel::before {
position: absolute;
top: -3px; right: 0; left: 0;
height: 3px;
background: var(--grad-accent);
content: '';
}
/* 服务卡 */
.service-card { padding: 30px 28px 28px; }
.service-card-icon { border-color: oklch(0.520 0.145 250 / .35); background: oklch(0.520 0.145 250 / .06); }
.service-card li::before, .industry-copy li::before { background: var(--c-amber); }
/* 相关产品 */
.related-grid img { background: linear-gradient(165deg, var(--n-50), var(--n-100)); }
.related-grid span { border-top: 1px solid var(--hairline); }
.related-grid a:hover { transform: translateY(-3px); }
/* 案例卡 */
.case-card:hover .case-caption { color: var(--b-700); }
.case-caption { border-top: 1px solid var(--hairline); }
/* ==========================================================================
8. 深色区块（不再是纯色平铺）
========================================================================== */
.about-band, .quality-strip, .solution-method, .service-detail-band,
.home-support, .site-footer, .about-facts, .detail-banner {
position: relative;
background-image:
radial-gradient(880px 480px at 88% -12%, oklch(0.590 0.150 247 / .20), transparent 62%),
radial-gradient(700px 420px at 2% 106%, oklch(0.760 0.120 215 / .10), transparent 68%),
var(--grad-deep);
background-repeat: no-repeat;
}
.about-band::after, .site-footer::after {
position: absolute;
top: 0; right: 0; left: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--c-cyan) 30%, var(--c-amber) 68%, transparent);
content: '';
opacity: .55;
}
.about-side { border-left-color: oklch(1 0 0 / .12); }
.about-side span { color: oklch(0.930 0.020 240); background: linear-gradient(180deg, #fff, oklch(0.820 0.030 240)); -webkit-background-clip: text; background-clip: text; }
.about-side small { color: var(--c-amber-2); }
/* 质量流程条 */
.quality-strip { padding-block: 70px; }
.quality-steps { color: oklch(0.880 0.016 235); }
.quality-steps svg { color: var(--c-amber); }
.quality-steps span { padding: 5px 12px; border: 1px solid oklch(1 0 0 / .14); background: oklch(1 0 0 / .04); }
/* 方法/清单格 */
.method-grid { background: oklch(1 0 0 / .12); }
.method-grid article { background: transparent; }
.method-grid article:hover { background: oklch(1 0 0 / .05); }
.service-checklist { background: oklch(1 0 0 / .16); }
.service-checklist div { background: transparent; }
.service-checklist div:hover { background: oklch(1 0 0 / .05); }
/* 大数字 */
.fact-grid strong { font-size: clamp(30px, 4vw, 48px); letter-spacing: -.03em; line-height: 1.06; }
.fact-grid > div { border-right-color: oklch(1 0 0 / .18); }
.fact-grid span { color: oklch(0.840 0.020 235); }
/* ==========================================================================
9. 详情页
========================================================================== */
.detail-banner { border-bottom: 0; min-height: 440px; }
.detail-banner::after {
position: absolute; bottom: 0; right: 0; left: 0; height: 2px;
background: var(--grad-accent); content: ''; opacity: .85;
}
.breadcrumb { color: oklch(0.800 0.020 235); letter-spacing: .02em; }
.breadcrumb a:hover { color: var(--c-amber-2); }
.detail-image {
padding: 16px;
border-color: var(--hairline);
background: linear-gradient(165deg, var(--n-0), var(--n-50));
box-shadow: var(--e-3);
}
.detail-image::before {
position: absolute; top: -1px; left: -1px; width: 28px; height: 28px;
border-top: 2px solid var(--c-amber); border-left: 2px solid var(--c-amber); content: '';
}
.detail-tag { top: 28px; left: 28px; background: var(--grad-brand); letter-spacing: .10em; }
.detail-tags span { border-color: var(--hairline); background: var(--n-25); color: var(--b-700); font-weight: 600; }
.text-button { color: var(--b-700); transition: color var(--dur) var(--ease-out), gap var(--dur) var(--ease-out); }
.text-button:hover { color: var(--c-amber); gap: 12px; }
.site-cta {
padding: 40px 44px;
border-color: var(--hairline);
background: linear-gradient(120deg, var(--n-50), var(--n-25) 60%, oklch(0.520 0.145 250 / .05));
box-shadow: var(--e-1);
}
/* ==========================================================================
10. 页脚 + 侧边栏
========================================================================== */
.site-footer { padding-block: 68px 24px; }
.footer-top { border-bottom-color: oklch(1 0 0 / .12); }
.footer-links h3 { color: var(--c-amber-2); font-size: 14px; letter-spacing: .10em; }
.footer-links a, .footer-links p { color: oklch(0.780 0.018 235); }
.footer-links a { transition: color var(--dur-fast) var(--ease-out), padding-left var(--dur) var(--ease-out); }
.footer-links a:hover { color: var(--n-0); padding-left: 4px; }
.footer-bottom { border-top-color: oklch(1 0 0 / .10); }
.contact-rail { border-color: oklch(1 0 0 / .12); box-shadow: var(--e-3); }
.rail-button { background: oklch(0.175 0.052 253 / .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.rail-button:hover, .rail-button[aria-expanded="true"] { background: var(--b-600); }
.rail-panel { border-color: var(--hairline); box-shadow: var(--e-4); }
.rail-panel .rail-phone-number { color: var(--b-600); }
.copy-wechat { background: var(--grad-brand); box-shadow: inset 0 1px 0 oklch(1 0 0 / .20); }
.copy-wechat:hover { box-shadow: inset 0 1px 0 oklch(1 0 0 / .28), var(--glow-brand); }
.back-top { border-color: oklch(1 0 0 / .18); box-shadow: var(--e-2); transition: background var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.back-top:hover { background: var(--b-600); transform: translateY(-2px); }
/* FAQ */
.faq-list { border-top-color: var(--hairline); }
.faq-list details { border-bottom-color: var(--hairline); }
.faq-list details[open] { background: var(--n-25); }
.faq-list summary { letter-spacing: -.012em; }
.faq-list summary:hover { color: var(--b-700); }
/* ==========================================================================
12. 内页（应用行业页 solutions.css 自有设计，此处只做氛围与层次统一）
========================================================================== */
/* 应用行业页首屏：与首页首屏同样的光与强调线，消除「首页精致、内页发平」的落差 */
.sector-hero {
position: relative;
background-image:
linear-gradient(90deg, transparent 0%, oklch(0.760 0.120 215 / .45) 26%, oklch(0.790 0.155 68 / .55) 62%, transparent 100%),
radial-gradient(1080px 600px at 90% 2%, oklch(0.590 0.150 247 / .24), transparent 62%),
radial-gradient(860px 520px at 2% 100%, oklch(0.520 0.145 250 / .22), transparent 60%),
var(--grad-deep);
background-repeat: no-repeat;
background-size: 100% 1px, auto, auto, auto;
background-position: bottom left, 0 0, 0 0, 0 0;
}
.sector-hero-visual {
border-color: oklch(1 0 0 / .16);
box-shadow: var(--e-4), var(--glow-cyan);
}
.sector-image-label { border-top: 1px solid oklch(1 0 0 / .10); letter-spacing: .06em; }
/* 粘性行业索引条：加冷调阴影与选中态强调线 */
.sector-index-wrap { border-bottom-color: var(--hairline); box-shadow: 0 8px 24px -18px rgb(19 39 62 / .45); }
.sector-index nav a.is-active { border-bottom-color: var(--c-amber); }
/* 行业章节与案例块：统一到卡片高度阶梯 */
.sector-story:nth-child(odd) { background: var(--n-25); }
.application-study, .sector-scene figure {
border: 1px solid var(--hairline);
box-shadow: var(--e-1);
}
.study-conditions span { border-color: var(--hairline); background: var(--n-0); color: var(--b-700); }
.sector-scene figcaption { border-top-color: var(--hairline); background: var(--n-0); }
.sector-product { border-left-color: var(--hairline); }
.sector-product:hover, .sector-product:focus-visible { background: var(--n-25); }
/* 联系页视觉块与深色方法带 */
.contact-visual, .sector-method {
background-image:
radial-gradient(880px 480px at 88% -12%, oklch(0.590 0.150 247 / .20), transparent 62%),
radial-gradient(700px 420px at 2% 106%, oklch(0.760 0.120 215 / .10), transparent 68%),
var(--grad-deep);
background-repeat: no-repeat;
}
/* ==========================================================================
13. 动效（JS 未加载时全部可见，无 JS 也不损失内容）
========================================================================== */
@media (prefers-reduced-motion: no-preference) {
html[data-ui="on"] .ui-reveal {
opacity: 0;
transform: translate3d(0, 16px, 0);
transition: opacity var(--dur-slow) var(--ease-emph), transform var(--dur-slow) var(--ease-emph);
transition-delay: var(--reveal-delay, 0ms);
}
html[data-ui="on"] .ui-reveal.is-in { opacity: 1; transform: none; }
}
/* ==========================================================================
12. 响应式（必须重申，因为本层在最后加载，会覆盖 styles.css 的媒体查询）
========================================================================== */
@media (max-width: 1100px) {
:root { --container: min(100% - 40px - var(--rail-lane), 940px); }
.site-header.is-stuck { top: 0; }
}
/* 平板档（721–1100px）浮栏同步收窄：54px 的浮栏在 768px 上要占掉近 10% 宽度，
收窄后栏位从 74px 降到 56px，正文宽度回收 18px。 */
@media (min-width: 721px) and (max-width: 1100px) {
:root { --rail-lane: 56px; }
.contact-rail { right: 8px; }
.rail-button { width: 44px; min-height: 50px; padding: 6px; }
.rail-button > svg, .rail-button > img { width: 21px; height: 21px; }
}
@media (max-width: 720px) {
/* 移动端浮栏收窄到 44px + 右边距 8px */
:root { --rail-lane: 56px; --container: min(100% - 32px - var(--rail-lane), 620px); --space-section: 64px; }
.suction-hero { padding-block: 128px 52px; background-size: 100% 1px, auto, auto, auto, auto; }
.suction-hero::before { background-size: auto, auto; }
.suction-hero-image::before, .suction-hero-image::after { width: 20px; height: 20px; }
.section-title h2::after { margin-top: 16px; }
/* 移动端顶栏是白底深字，吸顶时改为白玻璃 */
.site-header.is-stuck { background: oklch(1 0 0 / .88); box-shadow: 0 1px 0 var(--hairline), 0 12px 28px -22px rgb(19 39 62 / .5); }
/* 白底顶栏上不能再走白色渐变字，否则品牌名不可见 */
.site-header .brand-en {
background: none;
-webkit-background-clip: initial;
background-clip: initial;
color: var(--ink);
}
.topbar { display: none; }
.quality-steps span { padding: 4px 9px; font-size: 13px; }
.category-tab { box-shadow: none; }
.product-card:hover, .case-card:hover, .culture-card:hover, .service-card:hover, .related-grid a:hover { transform: none; }
/* 移动端菜单是覆盖在内容之上的浮层，需要抬升到 e-3 才不会与下层读起来「同层」 */
.menu-open .mobile-nav { border-color: var(--hairline); box-shadow: var(--e-4); }
.menu-open .site-header .menu-toggle { border-color: oklch(0.520 0.145 250 / .45); color: var(--b-700); }
}
/* ≤380px：极窄屏上 44px 的浮栏占掉约 14% 宽度，腾出的栏位会把正文挤得很窄。
这里同时收窄浮栏本身与两侧留白（32px → 20px），把正文宽度尽量还给内容。 */
@media (max-width: 380px) {
:root { --rail-lane: 46px; --container: min(100% - 20px - var(--rail-lane), 620px); }
.contact-rail { right: 2px; }
.rail-button { width: 40px; min-height: 48px; padding: 5px 3px; gap: 3px; }
.rail-button span { font-size: 10px; }
.rail-button > svg, .rail-button > img { width: 20px; height: 20px; }
.rail-panel { width: min(228px, calc(100vw - 62px)); padding: 16px; }
/* 首屏标题原设计断在「专注真空吸盘 / 贴合每一次抓取。」两行；
让出栏位后 320px 会断到「抓 / 取」之间，微调字级保住整句。 */
.suction-hero-copy h1 { font-size: 31px; }
/* CTA 盒自身还有 22px 内边距，叠上栏位后正文只剩 ~160px，
标题会涨到 5 行、徽标独占一行。这里同步收内边距与字级，回到 3 行以内。 */
.site-cta { padding: 22px 16px; }
.site-cta h2 { font-size: 20px; }
}
/* ==========================================================================
13. 图标（已静态化，不再依赖脚本）
--------------------------------------------------------------------------
页面里的图标现在直接写在 HTML 里，是内联