/* ============================================================
文件：style.css
说明：瑞琦科技全站公共样式
版本：8.22（第 48 轮 海外上线版 v1 第一批收尾：导航新增「快捷联系簇」`.nav-quick`（WhatsApp / Email
         两个图标入口，href 由 js/main.js 的 `[data-external]` 解析器赋值）+ 语言切换 `.lang-switch`
         的 hover 可见性补强。沿用第 45 轮的精密仪器语言（`--hair` 发丝线、`--radius-sm` 微倒角）。
         ⛔ 仍是**文末追加块**：不改动上方任何原规则，可整块独立回滚。）沿承 8.21（第 45 轮「精密仪器」视觉层：用户选定方向 = 精密仪器（大面积留白 + 极细线框 + 等宽数字 +
         单色蓝）× 零外部依赖 × 范围「共享样式 + 首页」。本轮**只做共享层**（文末追加块
         `PRECISION-INSTR-45`，不改动上方任何原规则）：① 圆角令牌收敛 16/10/8/999 → **4/3/3/2**
         （本站最大的一根杠杆 —— 全站 `var(--radius-card)` 23 处 / `--radius-btn` 5 处 /
         `--radius-pill` 4 处一起跟随，无需逐组件改）；② 新增发丝线令牌 `--hair*` 与技术小标字距
         `--track`；③ 等宽数字 `tabular-nums`（读数成列对齐、变化不跳动）；④ `.section-header .tag`
         由药丸改为**与门户页同款的技术标签**（透明底 + 左侧 2px 竖线 + 大写 0.14em）—— 门户页早就由
         `category-page.css` 用这套口径，本轮把内容页拉齐；⑤ 卡片/按钮去重投影，改以发丝线为骨架。
         ⛔ 纯 CSS、无外部脚本/字体；`js/main.js` 未动（仍 v8.9.49）。）沿承 8.20（第 44 轮 页眉 logo 去底色补丁：页眉 logo 改用透明 PNG（见 js/main.js 8.9.49）后，
         `.brand-group .logo-img` 上那句 `border-radius: 10px` 与 `filter: drop-shadow(...)` 已无意义 ——
         它们本是把旧 logo **自带的不透明白底**裁圆、投影、糊成一张「小卡片」用的；logo 变透明后，
         圆角成了空操作，投影则开始**沿字标轮廓描出一圈灰晕**。故在文件末尾追加块将二者置零/置
          `none`（不改动 178 行原规则，保留其历史）。仅影响页眉品牌区；页脚与其余样式未动。
         另：同轮把页脚 logo 尺寸 36/32/28 → **44/38/32**（透明版没有白底衬托后，36px 下字标仅约
         11px 偏小），同样在文末追加覆盖、不动原规则。两处均为文末追加块，可独立回滚。）沿承 8.19（第 37 轮「还剩多久」重写：用户反馈「延迟还是很久，实在影响观感」。实测同级切换时
         旧 flyout 要 ~350ms 才消失（第 35 轮那套静止 180ms 判意图本身慢，慢速走线还会误判成
         「已换行」把目标 flyout 提前收掉）。本轮把意图判定交给 js/main.js 的 RICH.bindHoverIntent
         （按位移方向：朝右＝奔向右侧 flyout，钉 .sub-pin + 挂 .nav-transit；竖直/向左＝真换行），
         于是关闭方向可以直接**快关**，不再需要第 34 轮那条 800ms 宽限；另收紧一级→二级面板。
         实测：A 350ms→~130ms、面板 216ms→~130ms、走线 10/25/45/70/110ms × 4 种起点全过）
         8.18（多级下拉「同级切换要快」：第 34 轮为治「斜向走位断层」加的 800ms 关闭宽限期是
         全局的，换行时旧 flyout 也照吃满 → 用户反馈「在同级另一个框打开之后，上一个框还
         显示一会儿才消失」。但纯 CSS 分不清「鼠标还在走向自己 flyout 的途中（必然掠过相邻
         同级行）」与「鼠标已真心停在同级另一行」——跑测台实测：任何短于 ~700ms 的宽限都会
         让走线途中的目标 flyout 淡到 0。故改由 js/main.js 的 RICH.bindHoverIntent() 做意图
         判定：鼠标持续移动时什么都不动（沿用 800ms 宽限），一旦在另一行上静止 >180ms 就给
         上一行挂 .sub-close-fast，由本文件末尾第 35 轮块让它 ~120ms 快速淡出；另把一级→
         二级面板的关闭宽限由 320ms 收到 180ms）
         8.17（多级下拉「悬停断层」修复：二级→三级 flyout 与二级行之间有一条 6px
         水平间隙，斜向走位会在到达 flyout 左边缘**之前**就跌出上级行下边界，
         :hover 被相邻同级行抢走、其 flyout（同 z-index、DOM 更靠后）又盖在目标
         flyout 之上 → 目标 flyout 收起，得重新拉一次下拉。修法＝透明桥（只跨过那
         6px，⛔ 不加宽，否则会盖住下方同级行右端）+ 关闭方向 800ms 宽限期 + 鼠标
         离开面板即隐藏 flyout，三条互补（详见文件末尾 NAV-HOVER-FIX 段）；整块
         限定 @media (min-width:769px)，≤768px 走 JS .open 手风琴不受影响）
         8.16（全站文字对比度达标：按 WCAG AA 4.5:1 复核 636 页，修掉 7 类根因——
         ① 主按钮白字落在渐变浅端 #4facfe 上仅 2.42:1 → 渐变改为
            #1668c4 → #0b4a8f（浅端 5.51:1，深端 8.79:1，全色标达标）；
         ② 深色 hero 面包屑"容器 opacity × 链接 alpha"双重衰减仅 3.15:1 →
            去掉容器 opacity，链接改 rgba(255,255,255,0.82)；
         ③ --color-gray-400 #adb5bd 在浅底仅 2.07:1、④ --color-gray-600 #6c757d
            在 gray-100 上仅 4.45:1 → 两者在本站只作前景色用，整体下压明度；
         ⑤ 导航副标 .brand-name-en 仅 4.06:1 → 提高前景 alpha。
         色号取自科技/仪器行业通行蓝：LinkedIn #0a66c2、Merck/PayPal #003087、
         三星副蓝 #0066b3、Abbott/美敦力 #0066b1，保持品牌原有蓝调不换色系）
         8.15（页脚文字对比度达标：.footer-bottom / .footer-contact-item 去掉与颜色叠加的
         容器 opacity，避免"淡出×淡色"双重衰减导致文字低于 WCAG AA 4.5:1）
         8.14（移动端表格可读性：≤768px 时 .spec-table / .comp-table 改为自身横向滚动 +
         单元格 min-width:76px，列多不再挤压换行、页面级不产生横向滚动）
         8.13（标题层级规范化：全站 h3~h6 选择器回填升级变体 h3→h2 等，样式不变）
         8.12（设计令牌统一：圆角体系 8/10/16、三级阴影、补中日韩字体栈）
============================================================ */

/* ★ Font Awesome CDN 加载 ★ */

:root {
    --color-primary: #0a2647;
    --color-primary-light: #1a3a6b;
    --color-accent: #0066b3;
    --color-accent-light: #e6f0fa;
    --color-white: #ffffff;
    --color-gray-100: #f8f9fa;
    --color-gray-200: #e9ecef;
    /* v8.16 对比度：原 gray-400 #adb5bd 在浅底仅 2.07:1、gray-600 #6c757d 在
       gray-100 上仅 4.45:1，均不足 WCAG AA 4.5:1。两者在本站只用作 color:
       （前景色/占位图标），从不用作背景或描边，因此整体下压明度即可安全修复，
       不会波及页面底色与边框层次 */
    --color-gray-400: #5f6b7a;
    --color-gray-600: #565f68;
    --color-gray-800: #212529;
    --color-shadow: rgba(0, 0, 0, 0.08);

    /* 圆角统一体系：小件 8 / 控件 10 / 卡片 16（原 4px 与 12px 反差过大，观感"半成品"） */
    --radius-btn: 10px;
    --radius-card: 16px;
    --radius-pill: 999px;

    /* 阴影三级体系：替换零散的一次性阴影，让层次关系一致 */
    --shadow-sm: 0 1px 2px rgba(10, 38, 71, 0.06);
    --shadow-md: 0 6px 20px rgba(10, 38, 71, 0.08);

    --transition: 0.3s ease;

    /* 字体栈：补中日韩回退，避免中文落到系统默认字体造成字重与行高跳动 */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                   'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
                   'Source Han Sans SC', 'Noto Sans CJK SC',
                   'Helvetica Neue', Arial, sans-serif;

    --max-width: 1200px;
    --nav-height: 72px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    color: var(--color-gray-800);
    line-height: 1.6;
    background-color: var(--color-white);
}

a {
    text-decoration: none;
    color: inherit;
}
ul {
    list-style: none;
}
img {
    max-width: 100%;
    display: block;
}

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
导航栏
============================================================ */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--nav-height);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    z-index: 1000;
    transition: box-shadow var(--transition);
}

.navbar.scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.navbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

/* ============================================================
★ 品牌区（Logo + 中英文名称组合）
============================================================ */
.nav-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.brand-group {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 20px 6px 8px;
    background: rgba(10, 38, 71, 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 60px;
    border: 1px solid rgba(10, 38, 71, 0.08);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: default;
}

.brand-group:hover {
    background: rgba(10, 38, 71, 0.10);
    box-shadow: 0 8px 32px rgba(0, 102, 179, 0.15);
    transform: translateY(-2px);
}

.brand-group .logo-img {
    height: 40px;
    width: auto;
    border-radius: 10px;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.10));
}

.brand-titles {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.brand-name-cn {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 6px;
    background: linear-gradient(135deg, #0a2647 0%, #0066b3 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.brand-name-en {
    font-size: 11px;
    font-weight: 300;
    letter-spacing: 3px;
    /* v8.16 对比度：原 rgba(10,38,71,0.6) 落在浅灰导航底上仅 4.06:1，
       提高到 0.75 后 6.41:1，字重字距不变 */
    color: rgba(10, 38, 71, 0.75);
    text-transform: uppercase;
    margin-top: -2px;
}

/* ============================================================
导航栏其余样式
============================================================ */
.nav-links {
    display: flex;
    align-items: center;
    gap: 28px;
}

.nav-links>li {
    position: relative;
}

.nav-links>li>a {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-gray-600);
    transition: color var(--transition);
    letter-spacing: 0.01em;
    padding: 6px 0;
    display: inline-block;
}

.nav-links>li>a:hover {
    color: var(--color-primary);
}

.nav-links>li>a .dropdown-arrow {
    font-size: 0.55rem;
    margin-left: 4px;
    opacity: 0.6;
    transition: transform var(--transition);
}

.nav-links>li:hover>a .dropdown-arrow {
    transform: rotate(180deg);
}

/* ★★★ 联系我们按钮 ★★★ */
.nav-cta {
    background: var(--color-primary);
    color: white !important;
    padding: 10px 20px !important;
    border-radius: var(--radius-btn);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.03em;
    transition: background var(--transition);
}

.nav-cta:hover {
    background: var(--color-primary-light) !important;
}

.lang-switch {
    background: transparent;
    color: var(--color-gray-600);
    padding: 6px 14px;
    border-radius: var(--radius-btn);
    font-weight: 500;
    font-size: 0.8rem;
    border: 1.5px solid var(--color-gray-200);
    transition: all var(--transition);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.lang-switch:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 4px;
    background: none;
    border: none;
}

.hamburger span {
    display: block;
    width: 26px;
    height: 2.5px;
    background: var(--color-primary);
    border-radius: 4px;
    transition: all var(--transition);
    transform-origin: center;
}

.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.hamburger.active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* ============================================================
下拉菜单（横向铺开版）
★ 优化：透明桥接区域防止鼠标移动时菜单消失
============================================================ */
.mega-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    background: var(--color-white);
    border-radius: var(--radius-card);
    padding: 24px 28px;
    width: 90vw;
    max-width: 1100px;
    min-width: 320px;
    box-sizing: border-box;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.12);
    border: 1px solid var(--color-gray-200);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition);
    z-index: 100;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px 28px;
    overflow: visible;
    max-height: none;
}

/* ★★★ 透明桥接区域 — 防止鼠标从导航项移动到下拉菜单时菜单消失 ★★★ */
.mega-menu::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 0;
    width: 100%;
    height: 12px;
    background: transparent;
    z-index: -1;
}

/* ★★★ 三角箭头 ★★★ */
.mega-menu::after {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: var(--color-white);
    border-top: 1px solid var(--color-gray-200);
    border-left: 1px solid var(--color-gray-200);
}

.nav-links>li:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.mega-menu .menu-col {
    margin-bottom: 4px;
}

.mega-menu .menu-col .cat-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: 0.02em;
    border-bottom: 2px solid var(--color-accent);
    padding-bottom: 5px;
    margin-bottom: 8px;
    display: block;
    white-space: normal;
    word-break: break-word;
}

.mega-menu .menu-col ul li a {
    display: block;
    padding: 3px 0 3px 6px;
    font-size: 0.85rem;
    color: var(--color-gray-600);
    transition: all var(--transition);
    line-height: 1.6;
    white-space: normal;
    word-break: break-word;
}

.mega-menu .menu-col ul li a:hover {
    color: var(--color-accent);
    padding-left: 12px;
}

/* ===== 悬停子菜单 ===== */
.mega-menu .menu-col .has-hover-submenu {
    position: relative;
    padding: 2px 0;
}

.mega-menu .menu-col .hover-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 10px 3px 6px;
    font-size: 0.85rem;
    color: var(--color-gray-600);
    cursor: default;
    transition: all var(--transition);
    border-radius: 4px;
}

.mega-menu .menu-col .has-hover-submenu:hover>.hover-trigger {
    color: var(--color-accent);
    background: var(--color-accent-light);
}

.mega-menu .menu-col .hover-trigger .sub-arrow {
    font-size: 0.55rem;
    opacity: 0.5;
    margin-left: 8px;
    transition: transform var(--transition);
}

.mega-menu .menu-col .has-hover-submenu:hover>.hover-trigger .sub-arrow {
    transform: translateX(2px);
    opacity: 0.9;
}

.mega-menu .menu-col .hover-submenu {
    display: none;
    position: absolute;
    left: calc(100% + 6px);
    top: -6px;
    min-width: 160px;
    background: var(--color-white);
    border-radius: var(--radius-card);
    padding: 8px 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--color-gray-200);
    z-index: 200;
}

.mega-menu .menu-col .has-hover-submenu:hover>.hover-submenu {
    display: block;
}

.mega-menu .menu-col .hover-submenu li a {
    display: block;
    padding: 7px 18px;
    font-size: 0.85rem;
    color: var(--color-gray-600);
    transition: all var(--transition);
    white-space: nowrap;
}

.mega-menu .menu-col .hover-submenu li a:hover {
    color: var(--color-accent);
    background: var(--color-accent-light);
}

.mega-menu .menu-col .hover-submenu .has-hover-submenu .hover-submenu {
    left: calc(100% + 6px);
    top: -6px;
    min-width: 140px;
}

/* ============================================================
普通下拉菜单
============================================================ */
.nav-links>li.has-dropdown .dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    background: var(--color-white);
    border-radius: var(--radius-card);
    padding: 10px 0;
    min-width: 200px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
    border: 1px solid var(--color-gray-200);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition);
    z-index: 100;
    list-style: none;
}

.nav-links>li.has-dropdown .dropdown-menu::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: var(--color-white);
    border-top: 1px solid var(--color-gray-200);
    border-left: 1px solid var(--color-gray-200);
}

.nav-links>li.has-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.nav-links>li.has-dropdown .dropdown-menu li {
    display: block;
}

.nav-links>li.has-dropdown .dropdown-menu li a {
    display: block;
    padding: 10px 32px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-gray-600);
    transition: all var(--transition);
    white-space: nowrap;
    text-align: center;
}

.nav-links>li.has-dropdown .dropdown-menu li a:hover {
    color: var(--color-accent);
    background: var(--color-accent-light);
}

.nav-links>li.has-dropdown .dropdown-menu li a.active {
    color: var(--color-accent);
    font-weight: 600;
}

/* ============================================================
★ 全新 Hero 区
============================================================ */
.hero-section {
    min-height: 90vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #0A1628 0%, #1A2A4A 100%);
    position: relative;
    overflow: hidden;
    padding-top: 80px;
}

.hero-bg-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(79, 172, 254, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(79, 172, 254, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: 0;
}

.hero-section .container {
    position: relative;
    z-index: 1;
    width: 100%;
}

.hero-grid-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    min-height: 70vh;
}

.hero-content {
    position: relative;
    z-index: 1;
}

.hero-badge {
    display: inline-block;
    background: rgba(79, 172, 254, 0.15);
    backdrop-filter: blur(4px);
    padding: 6px 18px;
    border-radius: 30px;
    font-size: 0.8rem;
    color: #7fc8ff;
    letter-spacing: 0.06em;
    margin-bottom: 24px;
    border: 1px solid rgba(79, 172, 254, 0.25);
}

.hero-title {
    font-size: clamp(2.8rem, 8vw, 5rem);
    font-weight: 900;
    line-height: 1.1;
    color: #fff;
    margin-bottom: 20px;
}

.hero-title .highlight {
    background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-desc {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.8;
    margin-bottom: 40px;
    max-width: 600px;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 50px;
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(90deg, #1668c4, #0b4a8f);
    border: none;
    padding: 16px 40px;
    border-radius: 60px;
    font-weight: 600;
    font-size: 0.95rem;
    color: #fff;
    box-shadow: 0 8px 32px rgba(22, 104, 196, 0.32);
    transition: all 0.3s;
    cursor: pointer;
}

.btn-primary:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 48px rgba(22, 104, 196, 0.5);
    color: #fff;
}

.btn-outline-light {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 40px;
    border-radius: 60px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s;
    background: transparent;
    cursor: pointer;
}

.btn-outline-light:hover {
    border-color: #4facfe;
    background: rgba(79, 172, 254, 0.10);
    color: #fff;
}

.hero-stats {
    display: flex;
    gap: 50px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 30px;
}

.hero-stats div {
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    letter-spacing: 0.02em;
}

.hero-stats span {
    display: block;
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 2px;
}

/* ============================================================
★ 右侧视觉区域
============================================================ */
.hero-visual {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-visual-icon {
    width: 320px;
    height: 320px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(79, 172, 254, 0.06);
    border-radius: 50%;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(79, 172, 254, 0.10);
    position: relative;
    z-index: 2;
    animation: float 6s ease-in-out infinite;
}

.hero-visual-ring {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    border: 1px solid rgba(79, 172, 254, 0.12);
    animation: spin 20s linear infinite;
    z-index: 1;
}

.hero-visual-ring::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    background: #4facfe;
    border-radius: 50%;
    box-shadow: 0 0 30px rgba(79, 172, 254, 0.6);
}

.hero-visual-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding: 0;
    border-radius: 50%;
    display: block;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-16px); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ============================================================
信任条
============================================================ */
.trust-bar {
    padding: 28px 0;
    background: var(--color-primary);
    color: rgba(255, 255, 255, 0.85);
}

.trust-bar .container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 20px;
    text-align: center;
}

.trust-bar .trust-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
}

.trust-bar .trust-item i {
    font-size: 1.3rem;
    color: var(--color-accent-light);
}

/* ============================================================
区块标题
============================================================ */
.section-header {
    text-align: center;
    margin-bottom: 44px;
}

.section-header .tag {
    display: inline-block;
    background: var(--color-accent-light);
    color: var(--color-accent);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 16px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}

.section-header h2 {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: -0.02em;
}

.section-header p {
    color: var(--color-gray-600);
    font-size: 1.05rem;
    max-width: 560px;
    margin: 8px auto 0;
}

/* ============================================================
★ 分类门户页通用样式
============================================================ */
.category-hero {
    padding: calc(var(--nav-height) + 40px) 0 50px;
    background: linear-gradient(135deg, #0A1628 0%, #1A2A4A 100%);
    color: var(--color-white);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.category-hero .hero-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(79, 172, 254, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(79, 172, 254, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}

.category-hero .container {
    position: relative;
    z-index: 1;
}

.category-hero .breadcrumb {
    font-size: 0.85rem;
    /* v8.16 对比度：原「容器 opacity:0.6 × 链接 alpha:0.6」= 0.36，实测仅 3.15:1。
       去掉容器 opacity，淡出只由链接自身颜色表达 */
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 16px;
}
.category-hero .breadcrumb a {
    color: rgba(255, 255, 255, 0.82);
    transition: color var(--transition);
}
.category-hero .breadcrumb a:hover {
    color: #fff;
}
.category-hero .breadcrumb .sep {
    margin: 0 8px;
}

.category-hero h1 {
    font-size: 3.2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
}
.category-hero h1 .highlight {
    background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.category-hero .subtitle {
    font-size: 1.1rem;
    opacity: 0.7;
    max-width: 600px;
    margin: 0 auto 16px;
    letter-spacing: 0.04em;
}
.category-hero p {
    font-size: 1.05rem;
    opacity: 0.85;
    max-width: 740px;
    margin: 0 auto 20px;
    line-height: 1.9;
}

.category-hero .hero-tags {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}
.category-hero .hero-tags span {
    background: rgba(79, 172, 254, 0.12);
    border: 1px solid rgba(79, 172, 254, 0.20);
    padding: 6px 18px;
    border-radius: 30px;
    font-size: 0.8rem;
    color: #7fc8ff;
}

/* ===== 子分类入口网格（无图标版本）===== */
.subcategories {
    padding: 60px 0 80px;
    background: var(--color-white);
}

.subcategories .section-header {
    text-align: center;
    margin-bottom: 44px;
}
.subcategories .section-header .tag {
    display: inline-block;
    background: var(--color-accent-light);
    color: var(--color-accent);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 16px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}
.subcategories .section-header h2 {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--color-primary);
}
.subcategories .section-header p {
    color: var(--color-gray-600);
    font-size: 1.05rem;
    max-width: 560px;
    margin: 8px auto 0;
}

.subcategory-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.subcategory-card {
    background: var(--color-gray-100);
    border-radius: var(--radius-card);
    padding: 28px 20px;
    text-align: center;
    border: 1px solid var(--color-gray-200);
    transition: all var(--transition);
    text-decoration: none;
    color: inherit;
    display: block;
}

.subcategory-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 8px 32px rgba(0, 102, 179, 0.12);
    transform: translateY(-6px);
}

.subcategory-card h4, .subcategory-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 4px;
}

.subcategory-card .sub-desc {
    font-size: 0.85rem;
    color: var(--color-gray-600);
    line-height: 1.6;
    margin-bottom: 8px;
}

.subcategory-card .badge-status {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 12px;
    border-radius: 30px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.badge-status.ready {
    background: #d4edda;
    color: #155724;
}

.badge-status.pending {
    background: #fff3cd;
    color: #856404;
}

/* v8.12：可询价 —— 用于"有货可订、但暂无独立详情页"的品类，替代"陆续上线"以免暴露未完成状态 */
.badge-status.inquiry {
    background: #e2eefb;
    color: #0a4a86;
}

.subcategory-card .arrow-hint {
    display: inline-block;
    margin-top: 10px;
    font-weight: 600;
    color: var(--color-accent);
    font-size: 0.85rem;
    transition: transform var(--transition);
}

.subcategory-card:hover .arrow-hint i {
    transform: translateX(4px);
}

/* ===== 核心优势 ===== */
.advantages {
    padding: 60px 0;
    background: var(--color-gray-100);
}

.advantages .section-header {
    text-align: center;
    margin-bottom: 40px;
}
.advantages .section-header .tag {
    display: inline-block;
    background: var(--color-accent-light);
    color: var(--color-accent);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 16px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}
.advantages .section-header h2 {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--color-primary);
}
.advantages .section-header p {
    color: var(--color-gray-600);
    font-size: 1.05rem;
    max-width: 560px;
    margin: 8px auto 0;
}

.advantages .container-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.advantage-item {
    text-align: center;
    padding: 20px 16px;
    background: var(--color-white);
    border-radius: var(--radius-card);
    border: 1px solid var(--color-gray-200);
    transition: all var(--transition);
}

.advantage-item:hover {
    border-color: var(--color-accent);
    transform: translateY(-4px);
}

.advantage-item .icon {
    font-size: 2.4rem;
    color: var(--color-accent);
    margin-bottom: 12px;
}

.advantage-item h4, .advantage-item h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 4px;
}

.advantage-item p {
    font-size: 0.88rem;
    color: var(--color-gray-600);
    line-height: 1.7;
}

/* ===== CTA 行动号召 ===== */
.cta-section {
    padding: 50px 0;
    background: var(--color-white);
    text-align: center;
    border-top: 1px solid var(--color-gray-200);
}
.cta-section h3, .cta-section h2 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 8px;
}
.cta-section p {
    color: var(--color-gray-600);
    font-size: 1rem;
    margin-bottom: 20px;
}
.cta-section .cta-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* ============================================================
产品类别
============================================================ */
.categories {
    padding: 70px 0;
    background: var(--color-white);
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.category-card {
    background: var(--color-gray-100);
    border-radius: var(--radius-card);
    padding: 24px 16px;
    text-align: center;
    transition: all var(--transition);
    border: 1px solid transparent;
}

.category-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 8px 24px var(--color-shadow);
    transform: translateY(-4px);
}

.category-card .icon {
    font-size: 2.2rem;
    color: var(--color-accent);
    margin-bottom: 8px;
}

.category-card h4, .category-card h3 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-primary);
}

.category-card p {
    font-size: 0.78rem;
    color: var(--color-gray-600);
    margin-top: 4px;
}

/* ============================================================
解决方案
============================================================ */
.solutions {
    padding: 70px 0;
    background: var(--color-gray-100);
}

.solutions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 28px;
}

.solution-card {
    background: var(--color-white);
    border-radius: var(--radius-card);
    padding: 28px 24px;
    border: 1px solid var(--color-gray-200);
    transition: all var(--transition);
}

.solution-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 8px 24px var(--color-shadow);
    transform: translateY(-4px);
}

.solution-card .icon {
    font-size: 2rem;
    color: var(--color-accent);
    margin-bottom: 10px;
}

.solution-card h4, .solution-card h3 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 6px;
}

.solution-card p {
    font-size: 0.9rem;
    color: var(--color-gray-600);
    line-height: 1.7;
}

/* ============================================================
品质保障
============================================================ */
.quality {
    padding: 60px 0 70px;
    background: var(--color-white);
}

.quality-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 28px;
    text-align: center;
}

.quality-item .q-icon {
    font-size: 2.2rem;
    color: var(--color-accent);
    margin-bottom: 8px;
}

.quality-item h4, .quality-item h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
}

.quality-item p {
    font-size: 0.9rem;
    color: var(--color-gray-600);
    margin-top: 4px;
}

/* ============================================================
业务咨询
============================================================ */
.inquiry {
    padding: 70px 0;
    background: var(--color-gray-100);
}

.inquiry-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.inquiry-card {
    background: var(--color-white);
    border-radius: var(--radius-card);
    padding: 32px 24px;
    text-align: center;
    border: 1px solid var(--color-gray-200);
    transition: all var(--transition);
}

.inquiry-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 8px 24px var(--color-shadow);
    transform: translateY(-4px);
}

.inquiry-card .icon {
    font-size: 2.4rem;
    color: var(--color-accent);
    margin-bottom: 12px;
}

.inquiry-card h4, .inquiry-card h3 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 6px;
}

.inquiry-card p {
    font-size: 0.9rem;
    color: var(--color-gray-600);
    margin-bottom: 16px;
    line-height: 1.7;
}

.inquiry-card .btn-outline {
    display: inline-block;
    padding: 10px 28px;
    border: 1.5px solid var(--color-primary);
    border-radius: var(--radius-btn);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--color-primary);
    transition: all var(--transition);
    cursor: pointer;
}

.inquiry-card .btn-outline:hover {
    background: var(--color-primary);
    color: white;
}

/* ============================================================
按钮（通用）
============================================================ */
.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: var(--color-primary);
    padding: 12px 28px;
    border-radius: var(--radius-btn);
    font-weight: 500;
    font-size: 0.95rem;
    transition: all var(--transition);
    border: 1.5px solid var(--color-gray-200);
    cursor: pointer;
}

.btn-secondary:hover {
    border-color: var(--color-primary);
    background: rgba(10, 38, 71, 0.04);
}

/* ============================================================
页脚
============================================================ */
.footer {
    background: var(--color-primary);
    color: rgba(255, 255, 255, 0.8);
    padding: 44px 0 20px;
}

.footer .container {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.2fr;
    gap: 36px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 28px;
}

.footer-brand .logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 1.2rem;
    color: white;
    margin-bottom: 10px;
}

.footer-brand .logo .logo-img {
    height: 36px;
    width: auto;
}

.footer-brand p {
    font-size: 0.9rem;
    line-height: 1.7;
    max-width: 300px;
    opacity: 0.7;
}

.footer-col h4, .footer-col h3 {
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 12px;
}

.footer-col ul {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.footer-col ul a {
    font-size: 0.85rem;
    opacity: 0.7;
    transition: opacity var(--transition);
}

.footer-col ul a:hover {
    opacity: 1;
}

.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.85rem;
    /* v8.15 可读性：原 opacity:0.8 与内部 a 的 rgba(...,0.8) 叠加 → 实际 0.64，
       在深蓝底上仅 4.15:1。去掉容器淡出，联系方式回到单层 0.8（约 8.8:1） */
    line-height: 1.6;
    padding: 4px 0;
}

.footer-contact-item i {
    width: 18px;
    margin-top: 3px;
    color: var(--color-accent-light);
    flex-shrink: 0;
}

.footer-contact-item a {
    color: rgba(255, 255, 255, 0.8);
    transition: color var(--transition);
}

.footer-contact-item a:hover {
    color: white;
}

.social-links {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
}

.social-links a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.6);
    transition: all var(--transition);
    font-size: 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.social-links a:hover {
    background: rgba(255, 255, 255, 0.12);
    color: white;
    transform: translateY(-3px);
}

.social-links .wechat-link {
    position: relative;
}

.social-links .wechat-link .qrcode-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    background: white;
    padding: 12px 10px;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    z-index: 10;
    width: 240px;
}

.social-links .wechat-link .qrcode-tooltip img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.social-links .wechat-link .qrcode-tooltip .tooltip-text {
    display: block;
    font-size: 0.8rem;
    color: #333;
    text-align: center;
    margin-top: 6px;
}

.social-links .wechat-link .qrcode-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: white;
}

.social-links .wechat-link:hover .qrcode-tooltip {
    display: block;
}

.footer-bottom {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 14px 24px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.8rem;
    /* v8.15 可读性：原 opacity:0.5 与 color 0.6 叠加后实际只有 0.3 不透明度，
       在 --color-primary 底上仅 2.6:1（AA 需 4.5:1）。去掉容器整体淡出，只保留颜色透明度 */
    color: rgba(255, 255, 255, 0.6);
}

.footer-bottom a {
    opacity: 0.6;
    transition: opacity var(--transition);
}
.footer-bottom a:hover {
    opacity: 1;
}

/* ============================================================
WhatsApp 图标样式
============================================================ */
.fa-whatsapp {
    color: #25D366;
}

.social-links .fa-whatsapp {
    font-size: 1.2rem;
}

.social-links a[title="WhatsApp"]:hover .fa-whatsapp {
    color: #1ebe5a;
}

/* ============================================================
产品详情页
============================================================ */
.product-detail {
    padding: 40px 0 60px;
    background: var(--color-white);
}
.product-detail .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
}
.product-image {
    position: relative;
}
.product-image .main-image {
    background: var(--color-gray-100);
    border-radius: var(--radius-card);
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-gray-200);
    overflow: hidden;
}
.product-image .main-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-width: 400px;
}
.product-image .main-image i {
    font-size: 8rem;
    color: var(--color-gray-400);
    opacity: 0.4;
}
.product-image .badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: var(--color-accent);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 4px 14px;
    border-radius: 50px;
    letter-spacing: 0.04em;
}
.product-info .product-category {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}
.product-info h1, .product-info .product-title {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: -0.02em;
    margin-bottom: 12px;
}
.product-info .subtitle {
    font-size: 1.05rem;
    color: var(--color-gray-600);
    margin-bottom: 16px;
    line-height: 1.7;
}
.product-info .divider {
    height: 1px;
    background: var(--color-gray-200);
    margin: 20px 0;
}
.product-info .key-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 24px;
    margin-bottom: 20px;
}
.product-info .key-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--color-gray-600);
}
.product-info .key-features li i {
    color: var(--color-accent);
    font-size: 0.9rem;
    width: 18px;
}
.product-info .action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 8px;
}

/* ============================================================
产品标签页（Tabs）
============================================================ */
.product-tabs {
    padding: 0 0 60px;
    background: var(--color-white);
}
.product-tabs .tabs-nav {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--color-gray-200);
    margin-bottom: 32px;
}
.product-tabs .tabs-nav button {
    background: none;
    border: none;
    padding: 12px 28px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-gray-600);
    cursor: pointer;
    transition: all var(--transition);
    position: relative;
    font-family: var(--font-family);
}
.product-tabs .tabs-nav button::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-accent);
    opacity: 0;
    transition: opacity var(--transition);
}
.product-tabs .tabs-nav button.active {
    color: var(--color-primary);
}
.product-tabs .tabs-nav button.active::after {
    opacity: 1;
}
.product-tabs .tabs-nav button:hover {
    color: var(--color-primary);
}
.product-tabs .tab-panel {
    display: none;
    animation: fadeIn 0.4s ease;
}
.product-tabs .tab-panel.active {
    display: block;
}
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.product-tabs .tab-panel h3, .product-tabs .tab-panel h2 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 12px;
}
.product-tabs .tab-panel p {
    color: var(--color-gray-600);
    line-height: 1.8;
    margin-bottom: 16px;
}
.product-tabs .tab-panel ul {
    list-style: disc;
    padding-left: 24px;
    color: var(--color-gray-600);
    line-height: 1.8;
}
.product-tabs .tab-panel ul li {
    margin-bottom: 4px;
}

/* ============================================================
规格参数表
============================================================ */
.spec-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    margin-top: 12px;
}
.spec-table th,
.spec-table td {
    padding: 10px 16px;
    text-align: left;
    border-bottom: 1px solid var(--color-gray-200);
}
.spec-table th {
    background: var(--color-gray-100);
    font-weight: 600;
    color: var(--color-primary);
}
.spec-table tr:hover td {
    background: var(--color-gray-100);
}

/* ============================================================
相关产品
============================================================ */
.related-products {
    padding: 60px 0 80px;
    background: var(--color-gray-100);
}
.related-products .section-header {
    text-align: center;
    margin-bottom: 40px;
}
.related-products .section-header h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: -0.02em;
}
.related-products .section-header p {
    color: var(--color-gray-600);
    font-size: 1rem;
    margin-top: 4px;
}
.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
}
.related-card {
    background: var(--color-white);
    border-radius: var(--radius-card);
    padding: 24px 16px;
    text-align: center;
    border: 1px solid var(--color-gray-200);
    transition: all var(--transition);
}
.related-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 8px 24px var(--color-shadow);
    transform: translateY(-4px);
}
.related-card .icon {
    font-size: 2.4rem;
    color: var(--color-accent);
    margin-bottom: 10px;
}
.related-card h4, .related-card h3 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-primary);
}
.related-card p {
    font-size: 0.8rem;
    color: var(--color-gray-600);
    margin-top: 4px;
}
.related-card .related-link {
    display: inline-block;
    margin-top: 10px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-accent);
    transition: color var(--transition);
}
.related-card .related-link:hover {
    color: var(--color-primary);
}

/* ============================================================
通知框
============================================================ */
.notice-box {
    background: var(--color-gray-100);
    padding: 16px 20px;
    border-radius: var(--radius-card);
    margin-top: 16px;
    border-left: 4px solid var(--color-accent);
}
.notice-box p {
    margin: 0;
    font-size: 0.92rem;
    color: var(--color-gray-700);
}

/* ============================================================
联系我们页面
============================================================ */
.contact-info {
    padding: 60px 0;
    background: var(--color-white);
}
.contact-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.contact-info-card {
    background: var(--color-gray-100);
    border-radius: var(--radius-card);
    padding: 32px 24px;
    text-align: center;
    border: 1px solid var(--color-gray-200);
    transition: all var(--transition);
}
.contact-info-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 8px 24px var(--color-shadow);
    transform: translateY(-4px);
}
.contact-info-card .icon {
    font-size: 2.4rem;
    color: var(--color-accent);
    margin-bottom: 12px;
}
.contact-info-card h4, .contact-info-card h3 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 6px;
}
.contact-info-card p {
    font-size: 0.95rem;
    color: var(--color-gray-600);
    line-height: 1.7;
}
.contact-info-card a {
    color: var(--color-accent);
    transition: color var(--transition);
}
.contact-info-card a:hover {
    color: var(--color-primary);
}

/* ============================================================
业务咨询类型
============================================================ */
.inquiry-types {
    padding: 60px 0 40px;
    background: var(--color-gray-100);
}
.inquiry-types-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.inquiry-type-card {
    background: var(--color-white);
    border-radius: var(--radius-card);
    padding: 32px 24px;
    text-align: center;
    border: 1px solid var(--color-gray-200);
    transition: all var(--transition);
    cursor: pointer;
}
.inquiry-type-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 8px 24px var(--color-shadow);
    transform: translateY(-4px);
}
.inquiry-type-card .icon {
    font-size: 2.6rem;
    color: var(--color-accent);
    margin-bottom: 12px;
}
.inquiry-type-card h4, .inquiry-type-card h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 6px;
}
.inquiry-type-card p {
    font-size: 0.9rem;
    color: var(--color-gray-600);
    line-height: 1.7;
}
.inquiry-type-card .arrow-link {
    display: inline-block;
    margin-top: 12px;
    font-weight: 600;
    color: var(--color-accent);
    transition: color var(--transition);
}
.inquiry-type-card .arrow-link i {
    transition: transform var(--transition);
}
.inquiry-type-card .arrow-link:hover i {
    transform: translateX(4px);
}

/* ============================================================
页面 Hero（通用）
============================================================ */
.page-hero {
    padding: calc(var(--nav-height) + 40px) 0 50px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    color: var(--color-white);
    text-align: center;
}
.page-hero .hero-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(79, 172, 254, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(79, 172, 254, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}
.page-hero .container {
    position: relative;
    z-index: 1;
}
.page-hero .breadcrumb {
    font-size: 0.85rem;
    /* v8.16 对比度：同上，去掉容器 opacity 与链接 alpha 的双重衰减 */
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 16px;
}
.page-hero .breadcrumb a {
    color: rgba(255, 255, 255, 0.82);
    transition: color var(--transition);
}
.page-hero .breadcrumb a:hover {
    color: #fff;
}
.page-hero .breadcrumb .sep {
    margin: 0 8px;
}
.page-hero h1 {
    font-size: 2.8rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
}
.page-hero h1 .highlight {
    background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.page-hero .subtitle {
    font-size: 1.1rem;
    opacity: 0.7;
    max-width: 600px;
    margin: 0 auto 8px;
}
.page-hero p {
    font-size: 1.05rem;
    opacity: 0.85;
    max-width: 740px;
    margin: 0 auto 16px;
    line-height: 1.9;
}

/* ============================================================
产品分类卡片链接样式
============================================================ */
.category-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: all var(--transition);
    border-radius: var(--radius-card);
}

.category-card-link:hover .category-card {
    border-color: var(--color-accent);
    box-shadow: 0 8px 24px var(--color-shadow);
    transform: translateY(-4px);
}

.category-card-link .category-card {
    transition: all var(--transition);
    height: 100%;
}

.category-card-link .category-card {
    background: var(--color-gray-100);
    border-radius: var(--radius-card);
    padding: 24px 16px;
    text-align: center;
    border: 1px solid transparent;
    height: 100%;
}

/* ============================================================
磨口规格选择器（套装页面专用）
============================================================ */
.joint-selector {
    background: var(--color-gray-100);
    border-radius: var(--radius-card);
    padding: 16px 20px;
    margin: 12px 0 8px 0;
    border: 1px dashed var(--color-gray-300);
}
.joint-selector p { margin: 0; font-weight: 600; font-size: 0.9rem; color: var(--color-primary); }
.joint-selector .joint-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 6px;
}
.joint-selector .joint-options span {
    display: inline-block;
    padding: 2px 14px;
    border-radius: 30px;
    font-size: 0.8rem;
    font-weight: 600;
    background: var(--color-white);
    border: 1.5px solid var(--color-gray-200);
    color: var(--color-gray-600);
}
.joint-selector .joint-options span.recommended {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background: var(--color-accent-light);
}
.joint-selector .joint-options span .rec-label {
    font-weight: 400;
    font-size: 0.6rem;
    color: var(--color-gray-500);
}
.joint-selector .joint-standards {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-top: 8px;
    font-size: 0.7rem;
    color: var(--color-gray-500);
    border-top: 1px solid var(--color-gray-200);
    padding-top: 8px;
}
.joint-selector .joint-standards strong {
    color: var(--color-gray-700);
}

/* ============================================================
自定义选项标签（套装组件清单用）
============================================================ */
.custom-option-tag {
    display: inline-block;
    font-size: 0.55rem;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 30px;
    background: var(--color-accent-light);
    color: var(--color-accent);
    margin-left: 2px;
    border: 1px solid rgba(0,102,179,0.12);
    white-space: nowrap;
}
.custom-option-tag.recommended {
    background: #d4edda;
    color: #155724;
    border-color: rgba(21,87,36,0.15);
}
.custom-option-tag.optional {
    background: #e8f4fd;
    color: #0b5e8a;
    border-color: rgba(11,94,138,0.12);
}
.custom-option-tag.gb {
    background: #e3f2fd;
    color: #0d47a1;
    border-color: rgba(13,71,161,0.12);
}
.custom-option-tag.iso {
    background: #fce4ec;
    color: #c62828;
    border-color: rgba(198,40,40,0.12);
}
.custom-option-tag.astm {
    background: #fff3e0;
    color: #e65100;
    border-color: rgba(230,81,0,0.12);
}

/* ============================================================
响应式
============================================================ */
@media (max-width: 1100px) {
    .mega-menu {
        width: 92vw;
        max-width: 1000px;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px 24px;
        padding: 20px 24px;
    }
}

@media (max-width: 1024px) {
    .hero-grid-layout {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }
    .hero-desc {
        margin-left: auto;
        margin-right: auto;
    }
    .hero-buttons {
        justify-content: center;
    }
    .hero-stats {
        justify-content: center;
    }

    .hero-visual-icon {
        width: 240px;
        height: 240px;
    }
    .hero-visual-ring {
        width: 300px;
        height: 300px;
    }
    .hero-visual-icon img {
        padding: 0;
    }

    .product-detail .container {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .product-image .main-image {
        aspect-ratio: 4/3;
    }
    .contact-info-grid {
        grid-template-columns: 1fr 1fr;
    }
    .inquiry-types-grid {
        grid-template-columns: 1fr 1fr;
    }
    .inquiry-grid {
        grid-template-columns: 1fr 1fr;
    }
    .footer .container {
        grid-template-columns: 1fr 1fr;
    }

    .subcategory-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .advantages .container-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .nav-links {
        position: fixed;
        top: var(--nav-height);
        left: 0;
        width: 100%;
        background: #ffffff; /* 2026-10-23 手机端下拉：原 rgba(255,255,255,0.98) 有 2% 透光且无 backdrop-blur，
                                首页 hero 大号白字透上来呈灰影、整块菜单发花 ⇒ 改纯白不透明 */
        flex-direction: column;
        padding: 20px 24px 28px;
        gap: 12px;
        transform: translateY(-120%);
        transition: transform 0.4s ease;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
        z-index: 999;
        border-bottom: 1px solid var(--color-gray-200);
        max-height: calc(100vh - var(--nav-height));
        overflow-y: auto;
    }
    .nav-links.open {
        transform: translateY(0);
    }
    .nav-links>li {
        width: 100%;
    }
    .nav-links>li>a {
        font-size: 1rem;
        width: 100%;
        text-align: center;
        padding: 10px 0;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
    }

    .nav-cta {
        width: 100%;
        text-align: center;
        padding: 12px 20px !important;
    }

    .nav-links>li.has-dropdown .dropdown-menu {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        box-shadow: none;
        border: none;
        border-radius: 0;
        padding: 0 0 8px 20px;
        min-width: unset;
        width: 100%;
        background: transparent;
        display: none;
        transition: none;
    }
    .nav-links>li.has-dropdown .dropdown-menu::before {
        display: none;
    }
    .nav-links>li.open .dropdown-menu {
        display: block;
    }
    .nav-links>li.has-dropdown .dropdown-menu li a {
        padding: 6px 12px;
        font-size: 0.9rem;
        text-align: center;
        color: var(--color-gray-600);
        white-space: normal;
    }
    .nav-links>li.has-dropdown .dropdown-menu li a:hover {
        background: transparent;
        color: var(--color-accent);
    }

    .mega-menu {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        box-shadow: none;
        border: none;
        border-radius: 0;
        padding: 0 0 8px 12px;
        min-width: unset;
        width: 100%;
        background: transparent;
        display: none;
        transition: none;
        grid-template-columns: 1fr;
        gap: 6px;
        max-height: none;
        overflow: visible;
    }
    .mega-menu::before {
        display: none;
    }
    .mega-menu::after {
        display: none;
    }
    .nav-links>li.open .mega-menu {
        display: grid;
    }
    .mega-menu .menu-col .cat-title {
        font-size: 0.88rem;
        margin-top: 6px;
    }
    .mega-menu .menu-col ul li a {
        font-size: 0.85rem;
        padding: 4px 0 4px 8px;
    }
    .mega-menu .menu-col .has-hover-submenu {
        position: static;
    }
    .mega-menu .menu-col .hover-trigger {
        cursor: pointer;
        padding: 4px 8px;
        font-size: 0.85rem;
    }
    .mega-menu .menu-col .has-hover-submenu.open>.hover-trigger .sub-arrow {
        transform: rotate(90deg);
    }
    .mega-menu .menu-col .hover-submenu {
        position: static;
        display: none !important;
        box-shadow: none;
        border: none;
        padding: 0 0 4px 16px;
        min-width: unset;
        background: transparent;
        border-radius: 0;
    }
    .mega-menu .menu-col .has-hover-submenu.open>.hover-submenu {
        display: block !important;
    }
    .mega-menu .menu-col .hover-submenu li a {
        padding: 4px 8px;
        font-size: 0.82rem;
        white-space: normal;
    }
    .mega-menu .menu-col .hover-submenu .has-hover-submenu .hover-submenu {
        left: auto;
        top: auto;
        min-width: unset;
        padding-left: 16px;
    }
    .hamburger {
        display: flex;
    }

    .hero-section {
        min-height: auto;
        padding: calc(var(--nav-height) + 40px) 0 50px;
    }
    .hero-title {
        font-size: 2.2rem;
    }
    .hero-desc {
        font-size: 1rem;
    }
    .hero-stats {
        gap: 20px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .hero-stats span {
        font-size: 22px;
    }

    .hero-visual-icon {
        width: 200px;
        height: 200px;
    }
    .hero-visual-ring {
        width: 250px;
        height: 250px;
    }
    .hero-visual-icon img {
        padding: 16px;
    }

    .trust-bar .container {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .categories-grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }
    .solutions-grid {
        grid-template-columns: 1fr;
    }
    .inquiry-grid {
        grid-template-columns: 1fr;
    }
    .quality-grid {
        grid-template-columns: 1fr 1fr;
    }
    .breadcrumb {
        padding: calc(var(--nav-height) + 12px) 0 12px;
    }
    .product-info h1, .product-info .product-title {
        font-size: 1.8rem;
    }
    .product-info .key-features {
        grid-template-columns: 1fr;
    }
    .product-tabs .tabs-nav {
        flex-wrap: wrap;
    }
    .product-tabs .tabs-nav button {
        padding: 10px 16px;
        font-size: 0.8rem;
    }
    .spec-table,
    .comp-table {
        font-size: 0.8rem;
        /* 窄屏：列数多时（全站最多 9 列）不要靠挤压换行硬塞，
           改为表格自身横向滚动 + 单元格保底宽度，保证列头不折成 3~4 行。
           列数少时自然宽度仍不足 100%，表格照常撑满，不产生滚动条。 */
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }
    .spec-table th,
    .spec-table td,
    .comp-table th,
    .comp-table td {
        padding: 6px 10px;
        min-width: 76px;
    }
    .related-grid {
        grid-template-columns: 1fr 1fr;
    }
    .contact-info-grid {
        grid-template-columns: 1fr;
    }
    .inquiry-types-grid {
        grid-template-columns: 1fr;
    }
    .footer .container {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
    .nav-logo .logo-img {
        height: 32px;
    }
    .footer-brand .logo .logo-img {
        height: 32px;
    }

    .brand-group {
        padding: 4px 14px 4px 6px;
        gap: 8px;
    }
    .brand-group .logo-img {
        height: 32px;
    }
    .brand-name-cn {
        font-size: 16px;
        letter-spacing: 4px;
    }
    .brand-name-en {
        font-size: 9px;
        letter-spacing: 2px;
    }

    .category-hero h1 {
        font-size: 2.2rem;
    }
    .category-hero p {
        font-size: 0.95rem;
    }
    .category-hero .subtitle {
        font-size: 0.95rem;
    }
    .subcategory-grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
    .subcategory-card {
        padding: 22px 16px;
    }
    .advantages .container-grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
    .category-hero .hero-tags span {
        font-size: 0.7rem;
        padding: 4px 12px;
    }
    .cta-section h3, .cta-section h2 {
        font-size: 1.3rem;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 1.8rem;
    }
    .hero-desc {
        font-size: 0.95rem;
    }
    .hero-buttons {
        flex-direction: column;
        width: 100%;
    }
    .hero-buttons .btn-primary,
    .hero-buttons .btn-outline-light {
        width: 100%;
        justify-content: center;
    }
    .hero-stats {
        gap: 12px;
    }
    .hero-stats span {
        font-size: 18px;
    }
    .hero-stats div {
        font-size: 12px;
    }

    .hero-visual-icon {
        width: 150px;
        height: 150px;
    }
    .hero-visual-ring {
        width: 190px;
        height: 190px;
    }
    .hero-visual-icon img {
        padding: 12px;
    }

    .categories-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .category-card {
        padding: 16px 10px;
    }
    .quality-grid {
        grid-template-columns: 1fr;
    }
    .btn-primary,
    .btn-secondary {
        width: 100%;
        justify-content: center;
    }
    .product-info h1, .product-info .product-title {
        font-size: 1.5rem;
    }
    .product-image .main-image i {
        font-size: 5rem;
    }
    .related-grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }
    .action-buttons {
        flex-direction: column;
        width: 100%;
    }
    .nav-logo .logo-img {
        height: 28px;
    }
    .footer-brand .logo .logo-img {
        height: 28px;
    }

    .brand-group {
        padding: 3px 10px 3px 4px;
        gap: 6px;
    }
    .brand-group .logo-img {
        height: 26px;
    }
    .brand-name-cn {
        font-size: 14px;
        letter-spacing: 3px;
    }
    .brand-name-en {
        font-size: 8px;
        letter-spacing: 1.5px;
    }

    .nav-cta {
        padding: 10px 16px !important;
        font-size: 0.85rem;
    }

    .category-hero h1 {
        font-size: 1.8rem;
    }
    .category-hero p {
        font-size: 0.88rem;
    }
    .subcategory-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .subcategory-card {
        padding: 18px 12px;
    }
    .subcategory-card h4, .subcategory-card h3 {
        font-size: 0.85rem;
    }
    .subcategory-card .sub-desc {
        font-size: 0.7rem;
    }
    .advantages .container-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .advantage-item .icon {
        font-size: 1.6rem;
    }
    .advantage-item h4, .advantage-item h3 {
        font-size: 0.85rem;
    }
    .advantage-item p {
        font-size: 0.75rem;
    }
    .cta-section .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    .cta-section .cta-buttons .btn-primary,
    .cta-section .cta-buttons .btn-secondary {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
}
/* ============================================================
★ v8.12 排版精致化（追加覆盖，置于末尾以确保生效）
   —— 大标题收紧字距并使用平衡换行，避免中文标题末行孤字；
      正文使用 pretty 换行，减少英文单词被硬断的情况。
      旧浏览器不支持 text-wrap 时自动忽略，不影响布局。
============================================================ */
h1, h2, h3 {
    letter-spacing: -0.02em;
    text-wrap: balance;
}
h4 {
    letter-spacing: -0.01em;
}
p, li {
    text-wrap: pretty;
}
/* 中文环境下的西文+中文混排：让系统优先使用本机中文字体，
   避免 Inter 缺失字形时回退到衬线体造成字重跳变 */
body {
    font-family: var(--font-family);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===== NAV-HOVER-FIX-START（第 34 轮，只追加块）===== */
/* 多级下拉悬停断层修复（第 34 轮）
   【症状】鼠标从上级滑向下级时经过一条既不在上级盒子内、也不在下级盒子内的
          空隙，:hover 链断掉 → 下拉瞬间收起，要重新拉一次。
   【实测】_archive/probe-nav-hover.js（真实鼠标逐步走线；⛔ 不能用程序化 click
          或直接改 class 代替，那不走命中测试）
          · 一级→二级 间隙 8px：.mega-menu 有 ::before 桥压住 → 走线能过；
            .dropdown-menu 只有 12px 三角箭头、只压住中间一小段；
          · 二级→三级 水平间隙 6px：**完全没有桥接** → 斜向走位一跌出上级行下边界，
            :hover 就交给相邻同级行（同级行 top 紧贴上级 bottom），而该行的 flyout
            与目标 flyout 同为 z-index:200、DOM 更靠后 → 盖在目标 flyout 之上 →
            目标 flyout 再也拿不回 :hover，只能吃关闭宽限期、到期即收起。
   【做法】三条互补（纯 CSS，不用 JS 定时器）：
          ① 桥：flyout 向左补 12px 透明 ::before，刚好跨过那 6px 间隙。
             ⚠️ 桥**不宜再宽**：实测桥宽 ≥20px 就会盖住下方同级行的右端，鼠标从
             上方竖直下来时打不开下一行的子菜单（x=440 车道失守，80px 更明显）。
          ② 宽限期：开合由 display 换成 opacity + visibility，**关闭方向挂
             800ms transition-delay** —— 斜向走位即使中途跌出上级行，也能在窗口
             内走回 flyout 上自动"复活"。淡出必须**排在宽限期之后**
             （opacity 0.20s 延迟 0.60s，共 800ms），否则 200ms 就淡没了，
             用户以为已经消失、其实还能回来 → 观感上仍是 bug。
             ⚠️ 宽限期实测标定：人把鼠标从上级挪到下级（约 170px 斜向）正常约
             150–250ms、慢速拖拽约 400–600ms；600ms 会漏、800ms 才稳（45ms/步
             慢动作走线连测 3 次全过）。代价：切换同级行时旧 flyout 会多留 ≤0.8s。
          ③ 面板守卫：鼠标整体离开 .mega-menu 时**立刻**隐藏 flyout。否则面板
             320ms 就收起、而 flyout 因 800ms 宽限期仍 visible → 会"飘"在已收起的
             面板外（旧的 display:none 方案不会有这个问题）。
   ⚠️ 整块限定桌面端：≤768px 的导航是 JS .open 手风琴（display !important 切换），
      若把 visibility:hidden 落到移动端，展开的子菜单会变成不可见。
   ⚠️ 纯追加块，未改动上方任何既有规则（_archive/verify-style-navfix.js 反证）。 */
@media (min-width: 769px) {

    /* ---- ① 二级→三级（及更深）：向左 12px 透明桥，只跨过那 6px 间隙 ----
       ⚠️ 别加宽：≥20px 会盖住下方同级行右端（实测 x=440 竖直下来打不开下一行）。 */
    .mega-menu .menu-col .hover-submenu::before {
        content: '';
        position: absolute;
        top: 0;
        left: -12px;
        width: 12px;
        height: 100%;
        background: transparent;
    }

    /* ---- ② 一级→二级：整宽透明桥（原三角箭头只压住中间 12px） ---- */
    .nav-links>li.has-dropdown .dropdown-menu::after {
        content: '';
        position: absolute;
        top: -10px;
        left: 0;
        width: 100%;
        height: 10px;
        background: transparent;
    }

    /* ---- ③ 三级及更深 flyout：关闭方向 800ms 宽限期 ----
       ⚠️ 淡出排在宽限期之后（opacity 0.20s 延迟 0.60s，共 800ms），见上方说明。 */
    .mega-menu .menu-col .hover-submenu {
        display: block;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.20s ease 0.60s, visibility 0s linear 0.80s;
    }

    .mega-menu .menu-col .has-hover-submenu:hover>.hover-submenu {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.12s ease, visibility 0s linear 0s;
    }

    /* ---- ④ 鼠标整体离开面板 → flyout 立刻隐藏（防止宽限期内"飘"在面板外） ---- */
    .mega-menu:not(:hover) .menu-col .hover-submenu {
        visibility: hidden;
        transition: none;
    }

    /* ---- ⑤ 一级→二级面板：关闭方向 320ms 宽限期（斜向走位更稳） ---- */
    .mega-menu,
    .nav-links>li.has-dropdown .dropdown-menu {
        transition: opacity 0.16s ease 0.16s, visibility 0s linear 0.32s, transform 0.22s ease 0.10s;
    }

    .nav-links>li:hover .mega-menu,
    .nav-links>li.has-dropdown:hover .dropdown-menu {
        transition: opacity 0.14s ease, visibility 0s linear 0s, transform 0.22s ease;
    }
}
/* ===== NAV-HOVER-FIX-END ===== */

/* ===== NAV-HOVER-FIX2-START（第 35 轮，只追加块）===== */
/* 第 35 轮「同级切换要快」。全部都在第 34 轮块的规则之后追加，不改动上面任何一行。
   ① 一级→二级 面板：关闭方向宽限期 320ms → 180ms。大面板滞留最惹眼；而面板与导航项之间
      有第 34 轮的整宽透明桥，水平/竖直穿越都不靠宽限期兜底，所以可以放心收短。 */
@media (min-width: 769px) {
    .mega-menu,
    .nav-links>li.has-dropdown .dropdown-menu {
        transition: opacity 0.14s ease 0.06s, visibility 0s linear 0.18s, transform 0.20s ease 0.04s;
    }
}
/* ② 二级→三级 flyout：JS（RICH.bindHoverIntent）判定「鼠标已停在同级另一行」后，给**离开的那一行**
   挂 .sub-close-fast。⛔ 这里必须用 @keyframes 动画而不是改 transition —— 类的挂载时机在「已经失去
   :hover」之后，那时关闭方向的那条 transition 早已按第 34 轮的 600ms 延迟启动，中途改 transition
   并不会让在途的过渡改道（实测：仍要等到 800ms 才消失）。动画则是在类挂上的瞬间重新开始，才真的快。
   animation-fill-mode: forwards 把终态（透明 + hidden）按住；该行一旦重新被悬停，规则因 :not(:hover)
   失配而整体失效，动画撤销，恢复第 34 轮的打开行为。 */
@media (min-width: 769px) {
    @keyframes richtechSubFastOut {
        from { opacity: 1; visibility: visible; }
        to   { opacity: 0; visibility: hidden; }
    }
    .mega-menu .menu-col .has-hover-submenu.sub-close-fast:not(:hover) > .hover-submenu {
        animation: richtechSubFastOut 0.13s ease forwards;
    }
}
/* ===== NAV-HOVER-FIX2-END ===== */


/* ===== NAV-HOVER-FIX3-START（第 37 轮，只追加块）===== */
/* 第 37 轮「延迟还是很久，影响观感」。全部在第 34/35 轮块之后追加，不改动上面任何一行。
   实测基线（_archive/probe-nav-lag37.js，1440px）：
     · 二级→三级 flyout 同级切换：旧框 ~170ms 内仍 opacity 1.00，~350ms 才隐 ← 用户抱怨项
     · 一级→二级面板切换：~216ms
     · 斜向走线：45ms/步就淡到 0.13、70/110ms/步直接断（旧探针只看 visibility 才没暴露）
   根因：第 34 轮的 800ms 关闭宽限是给「斜向走线途中必经相邻同级行」兜底的，代价是普通换行时
         旧 flyout 也照吃满；且宽限一过，走线途中的目标 flyout 仍会淡掉。
   本轮：意图判定改由 js/main.js 的 RICH.bindHoverIntent（第 37 轮重写）按**位移方向**给出——
         朝右（奔向右侧三级 flyout）给该行挂 .sub-pin、给面板挂 .nav-transit；竖直/向左＝真换行。
         于是关闭方向可以**直接快关**，不再需要那条 800ms 宽限。
    实测（同探针）：A 350ms→~130ms；B 216ms→~130ms；走线 10/25/45/70/110ms × 4 种起点全过。
   ⚠️ 未采用「拓宽二级→三级那块 12px 透明桥」的做法：桥是**命中测试**层面的遮挡，会把下方同级行
      右端的 hover 一并吃掉（那一行是整行铺底高亮），肉眼可见「悬停在 A 行却高亮 B 行」。
      .sub-pin / .nav-transit 只改显示、不动命中测试，故无此副作用。
   ⚠️ 第 35 轮那个 .sub-close-fast + richtechSubFastOut 动画块仍留在下面（不改动已有块），但第 37
      轮后已无任何代码给它挂类，属惰性规则，保留只为兼容可能被缓存的旧 main.js。 */
@media (min-width: 769px) {

    /* ① 二级→三级 flyout：关闭方向改为**默认快关**（取代第 34 轮的 800ms 宽限）。
       宽限期的职责已由 .sub-pin（保持目标 flyout 展开）与 .nav-transit（压住其它行）接管。 */
    .mega-menu .menu-col .hover-submenu {
        transition: opacity 0.10s ease, visibility 0s linear 0.12s;
    }

    /* ② 二级→三级 flyout：打开方向 0.12s → 0.09s */
    .mega-menu .menu-col .has-hover-submenu:hover>.hover-submenu {
        transition: opacity 0.09s ease, visibility 0s linear 0s;
    }

    /* ③ 走线中：只有被钉住的目标行允许展开，其余同级行的 flyout 一律不展开（消「相邻同级行遮盖」） */
    .mega-menu.nav-transit .menu-col .has-hover-submenu:not(.sub-pin):hover>.hover-submenu {
        display: none !important;
    }

    /* ④ 被钉住的目标行：即使当前不悬停也保持展开（走线途中目标 flyout 不会淡掉） */
    .mega-menu .menu-col .has-hover-submenu.sub-pin>.hover-submenu {
        display: block !important;
        opacity: 1;
        visibility: visible;
        transition: opacity 0.09s ease, visibility 0s linear 0s;
    }

    /* ⑤ 一级→二级面板：打开 0.14s / 0.22s → 0.10s / 0.16s */
    .nav-links>li:hover .mega-menu,
    .nav-links>li.has-dropdown:hover .dropdown-menu {
        transition: opacity 0.10s ease, visibility 0s linear 0s, transform 0.16s ease;
    }

    /* ⑥ 一级→二级面板：关闭宽限 180ms → 140ms（面板与导航项之间有整宽透明桥，实测斜向走线
       最小不透明度仍为 1.00，见探针 E 段） */
    .mega-menu,
    .nav-links>li.has-dropdown .dropdown-menu {
        transition: opacity 0.10s ease 0.03s, visibility 0s linear 0.14s, transform 0.14s ease 0.02s;
    }
}
/* ===== NAV-HOVER-FIX3-END ===== */

/* ============================================================
第 44 轮 页眉 logo 去底色补丁（HEADER-LOGO-TRANSPARENT-44）
页眉 logo 由白底 richtech-logo.png 换成透明 richtech-logo-nobg.png（见 js/main.js 8.9.49）。
下方两句原本是为「把旧 logo 自带的不透明白底裁圆 + 投影 + 糊成一张小卡片」而加：
  · border-radius：logo 透明后是空操作；
  · drop-shadow：会沿字标与图形轮廓描出一圈灰晕（实测放大 3 倍可见）。
故在此置零 / 置 none。⛔ 不改动上方第 178 行的原规则，保留其历史与可回滚性。
============================================================ */
.brand-group .logo-img {
    border-radius: 0;
    filter: none;
}
/* ===== HEADER-LOGO-TRANSPARENT-44-END ===== */

/* ============================================================
第 44 轮 页脚 logo 尺寸（FOOTER-LOGO-SIZE-44）
页脚 logo 换成透明版后不再有白底衬托，原 36px 高时「RICHTECH」字标仅约 11px、偏小；
按用户「其他按你建议操作」调大到 44 / 38 / 32px（沿用原有 ≤768 / ≤480 两档断点）。
⛔ 不改动原规则（顶层 36px、@768 的 32px、@480 的 28px），仅在文末覆盖。
============================================================ */
.footer-brand .logo .logo-img { height: 44px; }
@media (max-width: 768px) {
    .footer-brand .logo .logo-img { height: 38px; }
}
@media (max-width: 480px) {
    .footer-brand .logo .logo-img { height: 32px; }
}
/* ===== FOOTER-LOGO-SIZE-44-END ===== */

/* ============================================================
第 45 轮「精密仪器」视觉层（PRECISION-INSTR-45）
方向（用户选定）：精密仪器 —— 大面积留白 + 极细线框 + 等宽数字 + 单色蓝。
约束：零外部依赖（纯 CSS，无脚本/无新字体）；范围＝共享样式 + 首页。
⛔ 不改动上方任何原规则，只做「令牌收敛 + 追加细修」，可整块独立回滚。
============================================================ */

/* ① 圆角收敛 —— 仪器面板是「直角 + 微倒角」，不是圆角卡片。
      这一组是本站最大的一根杠杆：全站 var(--radius-card) 23 处、var(--radius-btn) 5 处、
      var(--radius-pill) 4 处（含另外 3 个 css）会一起跟随。 */
:root {
    --radius-card: 4px;
    --radius-btn: 3px;
    --radius-pill: 2px;

    /* ② 新增令牌：发丝线与技术小标字距 */
    --hair: rgba(10, 38, 71, 0.13);
    --hair-dark: rgba(255, 255, 255, 0.16);
    --track: 0.14em;
}

/* ③ 等宽数字：把「读数」统一成表格数字 —— 成列对齐、数值变化时不跳动 */
.stat-item .number,
.hero-stats span,
.subcategory-card .badge-status,
.cert-item .status,
.pd-spec .pd-spec-value {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ④ 区块小标：药丸 → 技术标签（与门户页 category-page.css 同款口径：透明底 + 左侧竖线 + 大写字距） */
.section-header .tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    color: var(--color-accent);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: var(--track);
    text-transform: uppercase;
    padding: 0 0 0 10px;
    border-radius: 0;
    border-left: 2px solid var(--color-accent);
}

/* ⑤ 卡片：以发丝线为骨架，去掉最重的一层投影（仪器是「线」构成的，不是「浮起」的） */
.subcategory-card {
    border: 1px solid var(--hair);
    box-shadow: none;
}

/* ⑥ 按钮：去重投影，改「平面 + 微倒角」 */
.btn-primary,
.btn-secondary {
    box-shadow: none;
}

/* ⑦ 页脚/导航：用发丝线收边，替代阴影与色块 */
.footer {
    border-top: 1px solid var(--hair-dark);
}
.footer .footer-col h3,
.footer .footer-col h4 {
    letter-spacing: var(--track);
}
/* ===== PRECISION-INSTR-45-END ===== */

/* ============================================================
第 48 轮 海外上线版 v1 第一批收尾（NAV-QUICK-48）
⚠️ 第 49 轮：导航「快捷联系簇」`.nav-quick` 已按用户反馈**整块撤除**（含 js/main.js 的渲染），
   故这里只保留语言切换的 hover 补强。原 `.lang-switch` 规则一行未动。
============================================================ */
.lang-switch:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
    background: var(--color-accent-light);
}

/* ⚠️ 第 49 轮备注：原打算在这里（style.css）覆盖首页的 `.ix-cta` / `.ix-solutions`，但这两个类
   是**首页私有**的（定义在 index.html 的 <style> 内），而页面 <style> 在 style.css 之后加载 ⇒
   写这里会被盖掉（实测：CTA 仍是深色）。故规则已移入**两页私有 <style> 末尾**的 HOME-FIX-49 块。 */


/* ==========================================================================
   S5 提示块样式统一 —— 第 113 轮追加块（纯 CSS，结构零改动）
   说明：tip-box / notice-box / optional-note / data-note / field-hint 五个提示块
         此前各自为政（notice-box 有左竖线，其余三个只写在页内联 style 里）。
         用 html body 前缀（特异性 0,1,2）统一覆盖 —— 跨页面类型生效，且不改任何页面。
   改动：统一左竖线为 3px 强调色、圆角 2px、内边距 14px 18px、正文 .9rem 行高 1.8；
         ⛔ 不改各自的底色与文字色（避免抹掉"提示/注意/可选"的语义差别）。
   ⛔ 回退：整块删除。
   ========================================================================== */
html body .tip-box,
html body .notice-box,
html body .optional-note,
html body .data-note,
html body .field-hint {
    border-left: 3px solid var(--color-accent);
    border-radius: 2px;
    padding: 14px 18px;
    font-size: .9rem;
    line-height: 1.8;
}
html body .tip-box > p:last-child,
html body .notice-box > p:last-child,
html body .optional-note > p:last-child,
html body .data-note > p:last-child,
html body .field-hint > p:last-child { margin-bottom: 0; }
/* ===== S5 追加块结束 ===== */

/* B6 分类卡计数小标 —— 第 117 轮追加块（纯 CSS，结构零改动） */
.sub-count {
    display: inline-block;
    margin-top: 8px;
    padding-left: 8px;
    border-left: 2px solid var(--color-accent);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--color-gray-500);
}

/* ==========================================================================
   A10 FAQ 尾部留白收敛 —— 第 124 轮追加块（纯 CSS，结构零改动）
   依据（Codex A10）：FAQ 内容在中段结束，之后留白偏大。根因：页内联样式
   .faq-page 的 padding 底部 90px，叠加下方「相关页面」块的上留白 44px。
   此处用 body 前缀（0,1,1）覆盖页内 .faq-page（0,1,0），收紧尾部留白。
   ⛔ 回退：整块删除。
   ========================================================================== */
body .faq-page { padding: 110px 0 48px; }
body .faq-page section.related-links, body section.related-links[data-related-links] { padding-top: 28px; }


/* ==========================================================================
   RING-LABEL-INWARD：星图修正（2026-10-04）
   ① 辐射线：01-04 属内环，本就不应与外环连线 ⇒ 隐藏 .radial-line（不改那段的 JS）
   ② 标签内收：环线（外圈虚线）在圆周上，标签朝圆心方向内收 20px 即让开线条
      —— 用 body 前缀（0,2,1）胜过页面内 .ring-node .node-label（0,2,0）
   ⛔ 回退：整块删除。
   ========================================================================== */
.ring-svg .radial-line { display: none; }
body .ring-node .node-label {
    transform: translate(calc(var(--ux, 0) * 8px), calc(var(--uy, 0) * 8px));
}
/* ===== RING-LABEL-INWARD 结束 ===== */


/* ==========================================================================
   RM-GLOBAL：全局 prefers-reduced-motion（P0 无障碍）
   用户开启「减少动态效果」时：所有动画与过渡立即到终态、不做位移。
   ⛔ 不动任何内容可见性 —— 内容永远完整。回退：整块删除。
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .ix-flow-wrap.is-pending .ix-step { opacity: 1; }
}
/* ===== RM-GLOBAL 结束 ===== */


/* ==========================================================================
   DESIGN-TOKENS-P0R2：Design Tokens（P0 二轮 S2）
   ⛔ 只"定义"，不重构、不替换既有取值（任务书：禁止为了整洁大规模重写旧 CSS）。
   取值为任务书指定：间距 4/8/12/16/24/32/48/64(+88)；圆角沿用站内 2–4px 尺度。
   ========================================================================== */
:root {
    /* 间距尺度（4 的倍数） */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 88px;

    /* 圆角（延续站内 2–4px 精密仪器语言） */
    --radius-panel: 4px;
    --radius-card: 3px;
    --radius-button: 3px;

    /* 发丝线 */
    --line-hairline: 1px solid var(--color-gray-200);

    /* 动效（任务书：卡片 hover 160–180ms、下拉 140–170ms） */
    --motion-fast: 150ms;
    --motion-base: 180ms;
    --motion-slow: 320ms;
    --ease-standard: cubic-bezier(.22, 1, .36, 1);
}
/* ===== DESIGN-TOKENS-P0R2 结束 ===== */


/* ==========================================================================
   S5-CERT-CONTAINED：隐藏完整认证展示区块（P0 二轮 S5-1）
   背景：quality 页存在 ISO 9001 / GOST-R / 认证资质 等展示，但**目前无可靠依据**（业务未确认）。
   做法：按任务书要求「优先隐藏完整认证展示区块，不要只删某几个文字」⇒ 整块 display:none。
   ⛔ 不新增任何替代认证、不虚构机构/证书号/标准、不改版式。
   ⛔ 完全可逆：删除本块即恢复。
   ========================================================================== */
body .cert-section { display: none; }
/* ===== S5-CERT-CONTAINED 结束 ===== */


/* ==========================================================================
   PRECISION-INSTR-47 · 2026-10-23 · 手机端导航（整体重写，接替 INSTR-46）
   为什么重写：INSTR-46 只补了折叠逻辑，文字颜色仍走 var() 继承链。在部分手机
        浏览器（X5 / UC / 夸克等第三方内核）上，导航文字会被祖先的 color 或
        -webkit-text-fill-color 覆盖成白字，落在纯白面板上等于「文字隐形」，
        只剩 +/− 与下划线可见 —— 用户真机截图即为此状态。
        本块改为**自包含**：每处文字写死十六进制色，并强制
        -webkit-text-fill-color: currentColor，不再依赖任何继承。
   版面：分类标题 = 细分割线 + 右侧圆形 +/−；展开后条目单列、左缩进、浅分割线。
   ⛔ 仅 @media (max-width:768px) 生效；桌面端三列并排与 hover 行为不受影响。
   ⛔ 文末追加块：不改动上方任何原规则，删掉本块即回滚。
   ========================================================================== */
@media (max-width: 768px) {
    /* ---------- 面板：纯白、独立滚动、文字基线色 ---------- */
    .nav-links {
        padding: 6px 16px 0;
        gap: 4px;
        color: #1f2a37;
        -webkit-text-fill-color: currentColor;
    }
    .nav-links > li > a {
        padding: 4px 0;
        color: #0a2647;
        -webkit-text-fill-color: currentColor;
    }
    .nav-links > li.open > a {
        color: #0066b3;
    }

    /* ⛔⛔ 触屏 hover 粘滞（用户报「点一下二级分栏就整块空白」的真实根因）
       桌面端有两条规则：
         .nav-links>li:hover .mega-menu            { transform: translateX(-50%) translateY(0) }
         .nav-links>li.has-dropdown:hover .dropdown-menu { transform: translateX(-50%) translateY(0) }
       特异度 (0,3,1)，高于移动端 .mega-menu 的 transform:none。而触屏点一下之后，
       li 会**长期保持 :hover 状态**（移动端没有 mouseout），于是位移重新生效：
       面板 position 已经是 static，translateX(-50%) 就把整块**左移自身宽度的一半**
       （375 宽实测 -164px），左对齐的文字被推出屏幕左侧，只剩右对齐的 +/− 和
       > 箭头留在原地 —— 看起来就是「点一下，字全没了」。
       ⇒ 必须在 hover / open 两种状态下都把 transform 钉死。 */
    .nav-links > li:hover > .mega-menu,
    .nav-links > li.open > .mega-menu,
    .nav-links > li.has-dropdown:hover > .mega-menu,
    .nav-links > li.has-dropdown:hover > .dropdown-menu,
    .nav-links > li.open > .dropdown-menu {
        transform: none;
    }

    /* 兜底（用户报「再点下一级还是这样，每一级都有」）：与其逐条枚举桌面端的
       hover 位移规则，不如把导航内**所有下拉层级**（1/2/3/4 级）的 transform
       一次性掐死。触屏粘滞的 :hover 会挂在任意一层 li 上，逐层补太容易漏。
       放在 @media (max-width:768px) 内 ⇒ 桌面端多列布局与悬停动画零影响。 */
    .nav-links .mega-menu,
    .nav-links .mega-menu .menu-col,
    .nav-links .dropdown-menu,
    .nav-links .hover-submenu,
    .nav-links .has-hover-submenu {
        transform: none !important;
    }

    /* ---------- 一级展开后的容器：单列 block（不用 grid，避免列宽异常） ---------- */
    .nav-links > li.open > .mega-menu {
        display: block;
        padding: 0 0 2px 8px;
        gap: 0;
    }
    .nav-links .mega-menu > .menu-col {
        width: 100%;
        margin: 0;
    }

    /* ---------- 分类折叠头 ---------- */
    .nav-links .mega-menu .cat-title {
        display: flex;
        align-items: center;
        position: relative;
        z-index: 2;
        margin: 0;
        padding: 6px 32px 6px 2px;
        border-bottom: 1px solid #dbe3ec;
        font-size: 0.88rem;
        font-weight: 700;
        color: #0a2647;
        -webkit-text-fill-color: currentColor;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .nav-links .mega-menu .cat-title::after {
        content: '+';
        position: absolute;
        right: 2px;
        top: 50%;
        transform: translateY(-50%);
        width: 22px;
        height: 22px;
        line-height: 20px;
        text-align: center;
        border: 1px solid #cfd8e3;
        border-radius: 50%;
        font-size: 0.8rem;
        font-weight: 500;
        color: #6b7280;
        -webkit-text-fill-color: currentColor;
        pointer-events: none;
    }
    .nav-links .mega-menu .cat-title.open {
        border-bottom-color: #9cc4e8;
        color: #0066b3;
    }
    .nav-links .mega-menu .cat-title.open::after {
        content: '\2212';
        border-color: #9cc4e8;
        color: #0066b3;
    }

    /* ---------- 收起 / 展开 ---------- */
    .nav-links .mega-menu .cat-title + ul {
        display: none;
    }
    .nav-links .mega-menu .cat-title.open + ul {
        display: block;
        padding: 2px 0 8px;
    }

    /* ---------- 条目：单列、显式颜色、浅分割线 ---------- */
    .nav-links .mega-menu .cat-title.open + ul > li {
        position: static;
        padding: 0;
    }
    .nav-links .mega-menu .cat-title.open + ul li a,
    .nav-links .mega-menu .cat-title.open + ul .hover-trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        z-index: 2;
        padding: 9px 4px 9px 10px;
        font-size: 0.9rem;
        line-height: 1.45;
        color: #3d4b59;
        -webkit-text-fill-color: currentColor;
        background: none;
        border-bottom: 1px solid #eef2f7;
    }
    .nav-links .mega-menu .cat-title.open + ul .hover-trigger {
        cursor: pointer;
    }
    .nav-links .mega-menu .cat-title.open + ul .hover-trigger .sub-arrow {
        font-size: 0.6rem;
        opacity: 0.45;
        margin-left: 8px;
        color: #8b98a6;
        -webkit-text-fill-color: currentColor;
    }
    .nav-links .mega-menu .cat-title.open + ul > li:last-child > a,
    .nav-links .mega-menu .cat-title.open + ul > li:last-child > .hover-trigger {
        border-bottom: none;
    }

    /* ---------- 三级：内联展开时同样单列 ---------- */
    .nav-links .mega-menu .cat-title.open + ul .hover-submenu li a {
        padding: 8px 4px 8px 22px;
        font-size: 0.86rem;
        color: #566370;
        -webkit-text-fill-color: currentColor;
    }
}
/* ===== PRECISION-INSTR-47 结束 ===== */

/* ===== BRAND-LOCKUP-127：页脚品牌关系短句 =====
   复用 .footer-brand p 的既有字色/行高，只压一档字号并加间距；不新增视觉组件 */
.footer-brand .footer-brand-line {
    margin-top: 10px;
    font-size: 0.82rem;
    line-height: 1.6;
    opacity: 0.6;
}
/* ===== BRAND-LOCKUP-127 结束 ===== */