/* =============================================================
   BOOMMAX - 首页样式 (boommax.css)
   风格：Premium Industrial Dark + Gold Accent + 3D/玻璃质感
   配色：
     --bmx-bg      #05060a  深空黑
     --bmx-bg-2   #0c0e16  次级背景
     --bmx-surface #14172180  玻璃面板
     --bmx-gold    #ca8a04  CTA 金
     --bmx-gold-l  #facc15  亮金
     --bmx-blue    #4d7cff  科技蓝点缀
     --bmx-text    #f5f5f4
     --bmx-muted   #a8a29e
   ============================================================= */

:root {
    --bmx-bg: #05060a;
    --bmx-bg-2: #0c0e16;
    --bmx-gold: #ca8a04;
    --bmx-gold-l: #facc15;
    --bmx-blue: #4d7cff;
    --bmx-text: #f5f5f4;
    --bmx-muted: #a8a29e;
    --bmx-line: rgba(255, 255, 255, 0.08);
    --bmx-glass: rgba(20, 23, 33, 0.6);
    /* 渐变背景 token（§ MASTER：金辉主导氛围层，沿用现有色相，不新增色相）*/
    --bmx-bg-3: #0a0c12;                       /* 渐变中段值（介于 bg 与 bg-2 之间）*/
    --bmx-glow-gold: rgba(202, 138, 4, 0.09);  /* 金辉氛围主光 */
    --bmx-glow-gold-s: rgba(202, 138, 4, 0.05);/* 金辉弱光（点缀/收尾）*/
    --bmx-glow-blue: rgba(77, 124, 255, 0.06); /* 科技蓝点缀 */
    --bmx-max: 1280px;
    --bmx-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

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

html { scroll-behavior: smooth; overflow-x: hidden; /* 兜底：禁止横向滚动，移动端任何 100vw/固定宽都不会出现左右滚动条 */ }

body.bmx-page {
    font-family: var(--bmx-font);
    /* 底层纵向多段渐变：钉在视口（fixed），与 .bmx-grain 协同；
       首页 hero 的 .bmx-hero-bg 是更高 z-index 的 fixed 层会盖住此渐变，不影响视频。
       中段微抬升至 --bmx-bg-3，打破纯黑单色，营造空气感。 */
    background:
        linear-gradient(180deg,
            var(--bmx-bg) 0%,
            var(--bmx-bg-3) 35%,
            var(--bmx-bg) 70%,
            var(--bmx-bg-2) 100%);
    background-attachment: fixed;
    color: var(--bmx-text);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

body.bmx-no-scroll { overflow: hidden; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* 全局可见焦点环（WCAG 2.4.7 / 设计规范 §三）：仅键盘聚焦时显示金色 ring */
.bmx-page :focus-visible {
    outline: 2px solid var(--bmx-gold-l);
    outline-offset: 2px;
    border-radius: 4px;
}
/* 部分圆形元素（按钮/标签）用 box-shadow ring 更贴合形状 */
.bmx-page .bmx-btn:focus-visible,
.bmx-page .bmx-lang-toggle:focus-visible,
.bmx-page .bmx-filter-chip:focus-visible,
.bmx-page .bmx-view-tab:focus-visible,
.bmx-page .bmx-dl-tab:focus-visible,
.bmx-page .bmx-3d-btn:focus-visible,
.bmx-page .bmx-gallery-thumb:focus-visible,
.bmx-page .bmx-faq-q:focus-visible,
.bmx-page .bmx-faq-nav-link:focus-visible,
.bmx-page .bmx-burger:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.45), 0 0 0 2px var(--bmx-gold-l);
}

.bmx-container {
    max-width: var(--bmx-max);
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* 渐变背景纹理：金辉主导氛围层（§ MASTER：Premium Industrial Dark + Gold Accent）。
   4 个金辉节点 + 1 个蓝晕，均匀分布，使滚动到任何位置都有微妙光感。
   强度 ≤ 0.09，不影响文字对比度（正文仍 AAA）。 */
.bmx-grain {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(circle at 15% 12%, var(--bmx-glow-gold), transparent 38%),
        radial-gradient(circle at 85% 22%, var(--bmx-glow-gold-s), transparent 42%),
        radial-gradient(circle at 50% 60%, var(--bmx-glow-gold-s), transparent 45%),
        radial-gradient(circle at 80% 88%, var(--bmx-glow-blue), transparent 40%);
}

/* =============================================================
   导航栏
   ============================================================= */
.bmx-nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    /* 只过渡颜色/阴影/边框，避免 padding 改变导致文档布局抖动（§五 "hover 不引起布局位移"） */
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    padding: 1.25rem 0;
}
.bmx-nav.is-scrolled {
    background: rgba(5, 6, 10, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--bmx-line);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    /* 用 transform 视觉收紧内距，而非改 padding（不触发 reflow） */
    padding: 0.85rem 0;
}
.bmx-nav-inner {
    display: flex; align-items: center; justify-content: space-between;
    max-width: var(--bmx-max); margin: 0 auto; padding: 0 1.5rem;
    min-width: 0; /* 允许 flex 子项收缩，避免窄屏右侧按钮簇溢出视口 */
}
.bmx-logo {
    font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em;
    display: flex; align-items: center; gap: 0.5rem;
    min-width: 0; flex-shrink: 1;
}
.bmx-logo-mark {
    width: 36px; height: 36px; border-radius: 9px;
    background: linear-gradient(135deg, var(--bmx-gold), var(--bmx-gold-l));
    display: grid; place-items: center; color: #1a1408;
    font-weight: 900; box-shadow: 0 4px 20px rgba(202, 138, 4, 0.4);
}
.bmx-nav-links { display: flex; align-items: center; gap: 2rem; list-style: none; }
.bmx-nav-links a {
    font-size: 0.92rem; font-weight: 500; color: var(--bmx-muted);
    transition: color 0.2s ease; position: relative;
}
.bmx-nav-links a:hover, .bmx-nav-links a.active { color: var(--bmx-text); }
.bmx-nav-links a.active::after {
    content: ''; position: absolute; bottom: -6px; left: 0; right: 0; height: 2px;
    background: var(--bmx-gold-l); border-radius: 2px;
}

.bmx-lang-toggle {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.45rem 0.9rem; border: 1px solid var(--bmx-line);
    border-radius: 999px; font-size: 0.8rem; font-weight: 600;
    color: var(--bmx-text); transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.bmx-lang-toggle:hover { border-color: var(--bmx-gold); background: rgba(202, 138, 4, 0.1); }

.bmx-btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.85rem 1.6rem; border-radius: 999px;
    font-weight: 600; font-size: 0.95rem; cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, color 0.25s ease, border-color 0.25s ease, background 0.25s ease; white-space: nowrap;
}
.bmx-btn-primary {
    background: linear-gradient(135deg, var(--bmx-gold), var(--bmx-gold-l));
    color: #1a1408; box-shadow: 0 8px 30px rgba(202, 138, 4, 0.35);
}
.bmx-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(202, 138, 4, 0.5); }
.bmx-btn-ghost {
    border: 1px solid var(--bmx-line); color: var(--bmx-text); background: var(--bmx-glass);
    backdrop-filter: blur(10px);
}
.bmx-btn-ghost:hover { border-color: var(--bmx-gold); color: var(--bmx-gold-l); }

.bmx-burger { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.bmx-burger span { width: 24px; height: 2px; background: var(--bmx-text); transition: 0.3s; border-radius: 2px; }
.bmx-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.bmx-burger.is-open span:nth-child(2) { opacity: 0; }
.bmx-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 移动菜单 */
.bmx-mobile-nav {
    position: fixed; inset: 0; z-index: 99;
    background: rgba(5, 6, 10, 0.98); backdrop-filter: blur(20px);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2rem; opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.bmx-mobile-nav.is-open { opacity: 1; pointer-events: all; }
.bmx-mobile-nav a { font-size: 1.5rem; font-weight: 600; }

/* =============================================================
   Mega Menu（桌面端下拉）+ 移动端折叠子菜单
   ============================================================= */
/* 顶栏下拉触发项 */
.bmx-nav-has-mega { position: relative; }
.bmx-nav-has-mega > a {
    display: inline-flex; align-items: center; gap: 0.3rem;
}
/* 不可见悬停桥接：用伪元素覆盖触发链接到下拉面板之间的视觉间隙，
   避免鼠标缓慢移动经过间隙时 :hover 丢失导致下拉收起。不改 li 尺寸，不影响与其他菜单项的对齐。 */
.bmx-nav-has-mega::after {
    content: ''; position: absolute; top: 100%; left: 0; right: 0;
    height: 0.6rem; /* 与下拉面板 top 偏移一致 */
}
.bmx-nav-caret {
    transition: transform 0.25s ease;
}
.bmx-nav-has-mega:hover .bmx-nav-caret,
.bmx-nav-has-mega:focus-within .bmx-nav-caret { transform: rotate(180deg); }

/* 下拉面板：默认隐藏（仅 transform/opacity，不触发 reflow） */
/* top: calc(100% + 0.6rem) 与 ::after 桥接区高度一致，视觉间隙由 ::after 填补可 hover 区域 */
.bmx-mega {
    position: absolute; top: calc(100% + 0.6rem); left: 50%;
    transform: translate(-50%, 8px) scale(0.97);
    transform-origin: top center;
    min-width: 560px;
    padding: 0.85rem;
    background:
        radial-gradient(circle at 0% 0%, rgba(202,138,4,0.10), transparent 45%),
        radial-gradient(circle at 100% 100%, rgba(77,124,255,0.08), transparent 45%),
        rgba(12, 14, 22, 0.94);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 20px;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(202, 138, 4, 0.06);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.24s ease, transform 0.24s ease, visibility 0.24s ease;
    z-index: 200;
}
/* hover 或键盘 focus 触发显示（无 JS 依赖） */
.bmx-nav-has-mega:hover .bmx-mega,
.bmx-nav-has-mega:focus-within .bmx-mega {
    opacity: 1; visibility: visible; pointer-events: all;
    transform: translate(-50%, 0) scale(1);
}
.bmx-mega-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem;
}
.bmx-mega-item {
    display: flex; flex-direction: column;
    border-radius: 14px; overflow: hidden;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    border: 1px solid transparent;
    background: rgba(20, 23, 33, 0.6);
}
.bmx-mega-item:hover, .bmx-mega-item:focus-visible {
    transform: translateY(-3px);
    border-color: rgba(202, 138, 4, 0.35);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
    outline: none;
}
.bmx-mega-cover {
    position: relative; display: block;
    width: 100%; aspect-ratio: 16 / 10;
    overflow: hidden; background: rgba(5, 6, 10, 0.5);
}
.bmx-mega-cover img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.4s ease;
}
.bmx-mega-item:hover .bmx-mega-cover img { transform: scale(1.08); }
.bmx-mega-item-name {
    display: block; padding: 0.6rem 0.75rem;
    font-size: 0.86rem; font-weight: 600; color: var(--bmx-text);
    line-height: 1.3;
}
.bmx-mega-item:hover .bmx-mega-item-name { color: var(--bmx-gold-l); }
.bmx-mega-all {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    margin-top: 0.5rem; padding: 0.75rem 0.95rem;
    border-radius: 12px;
    background: linear-gradient(90deg, rgba(202,138,4,0.10), rgba(202,138,4,0.02));
    border: 1px solid rgba(202, 138, 4, 0.18);
    font-size: 0.85rem; font-weight: 600; color: var(--bmx-gold-l);
    transition: background 0.2s ease, color 0.2s ease;
}
.bmx-mega-all:hover, .bmx-mega-all:focus-visible {
    background: linear-gradient(90deg, rgba(202,138,4,0.18), rgba(202,138,4,0.06));
    color: var(--bmx-gold); outline: none;
}

/* 移动端折叠子菜单 */
.bmx-mobile-group { width: 100%; display: flex; flex-direction: column; align-items: center; }
.bmx-mobile-toggle {
    background: none; border: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-size: 1.5rem; font-weight: 600; color: var(--bmx-text);
    font-family: inherit; padding: 0;
}
.bmx-mobile-toggle .bmx-nav-caret { transition: transform 0.25s ease; }
.bmx-mobile-toggle.is-open .bmx-nav-caret { transform: rotate(180deg); }
.bmx-mobile-sub {
    display: flex; flex-direction: column; align-items: center; gap: 0.85rem;
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height 0.3s ease, opacity 0.25s ease, margin 0.25s ease;
    width: 100%;
}
.bmx-mobile-sub.is-open {
    max-height: 600px; opacity: 1; margin: 0.85rem 0;
}
.bmx-mobile-sub a {
    font-size: 1rem; font-weight: 400; color: var(--bmx-muted);
}
.bmx-mobile-sub a:hover, .bmx-mobile-sub a:focus-visible { color: var(--bmx-text); }

/* 锚点跳转预留固定导航高度，避免被遮挡 */
.bmx-card[id], [id]:target { scroll-margin-top: 100px; }

/* =============================================================
   Hero
   结构：.bmx-hero-bg（fixed 全屏背景层，钉在视口）
        ├ .bmx-hero-video      逐帧雪碧图（最底）
        ├ .bmx-hero-video-mask 暗色渐变遮罩
        └ .bmx-hero-overlay    径向暗角（融合边缘）
        .bmx-hero（文字层，z-index:2，滚走；背景持续播放完整动画）
   ============================================================= */
/* 固定背景层：fixed 钉在视口，覆盖整页滚动，让逐帧动画播满 120 帧 */
.bmx-hero-bg {
    /* 用 inset:0 而非 100vw/100vh：100vw 在含滚动条的浏览器会把滚动条宽度算进去，
       导致窄屏出现横向滚动条抖动；inset:0 基于 fixed 视口尺寸更安全。 */
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    z-index: 0; pointer-events: none; overflow: hidden;
    background: var(--bmx-bg);
}
.bmx-hero {
    position: relative; min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    background: transparent; /* 背景由 .bmx-hero-bg 提供 */
    z-index: 2; /* 文字层在固定背景之上 */
}
/* 滚动驱动逐帧背景（雪碧图）。雪碧图 15 列 × 8 行。 */
.bmx-hero-video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    background-image: var(--bmx-sprite, none);
    background-repeat: no-repeat;
    /* 雪碧图放大到容器的 15 倍宽 × 8 倍高，使百分比定位能精确命中每格 */
    background-size: 1500% 800%;
    background-position: 0% 0%;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
/* 视频暗色遮罩：整页统一半透明压暗，既透出视频氛围，
   又保证浮于其上的所有 section 文字可读。fixed 跟随视口。 */
.bmx-hero-video-mask {
    position: absolute; inset: 0; z-index: 1;
    background: rgba(5, 6, 10, 0.38);
    pointer-events: none;
}
.bmx-hero-overlay {
    position: absolute; inset: 0; z-index: 3;
    /* 轻微暗角，让边缘自然融入，中间区域保持视频可见 */
    background: radial-gradient(ellipse at center, transparent 55%, rgba(5,6,10,0.6) 100%);
    pointer-events: none;
}
.bmx-hero-content {
    position: relative; z-index: 3; text-align: center; padding: 0 1.5rem;
    max-width: 900px;
    perspective: 800px; /* 让 H1 逐词 rotateX 入场有透视感 */
}
.bmx-hero-content h1 { transform-style: preserve-3d; }
.bmx-word { display: inline-block; } /* H1 逐词 span（JS 动态生成） */
.bmx-hero-eyebrow {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.4rem 1rem; border: 1px solid var(--bmx-line); border-radius: 999px;
    background: var(--bmx-glass); backdrop-filter: blur(10px);
    font-size: 0.8rem; font-weight: 500; color: var(--bmx-gold-l);
    margin-bottom: 1.75rem;
}
.bmx-hero-eyebrow .dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--bmx-gold-l);
    box-shadow: 0 0 10px var(--bmx-gold-l); animation: bmx-pulse 2s ease-in-out infinite;
}
@keyframes bmx-pulse { 0%,100%{opacity:1;} 50%{opacity:0.4;} }

.bmx-hero h1 {
    font-size: clamp(2.5rem, 7vw, 5.5rem); font-weight: 800; line-height: 1.02;
    letter-spacing: -0.03em; margin-bottom: 1.5rem;
}
.bmx-hero h1 .gold {
    background: linear-gradient(135deg, var(--bmx-gold), var(--bmx-gold-l));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bmx-hero p {
    font-size: clamp(1rem, 2vw, 1.25rem); color: var(--bmx-muted);
    max-width: 620px; margin: 0 auto 2.5rem;
}
.bmx-hero-ctas { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

.bmx-scroll-indicator {
    position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
    z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
    color: var(--bmx-muted); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
    transition: opacity 0.3s ease;
}
.bmx-scroll-indicator .line {
    width: 1px; height: 40px; background: linear-gradient(var(--bmx-gold-l), transparent);
    animation: bmx-scroll-anim 2s ease-in-out infinite;
}
@keyframes bmx-scroll-anim { 0%{transform:scaleY(0);transform-origin:top;} 50%{transform:scaleY(1);transform-origin:top;} 51%{transform-origin:bottom;} 100%{transform:scaleY(0);transform-origin:bottom;} }

/* =============================================================
   Section 通用
   ============================================================= */
.bmx-main { position: relative; z-index: 2; }
/* section 默认不透明黑背景。仅 Hero 播放范围内的 stats 区透明，让 fixed 视频透出。 */
/* section 默认背景：section 自身承载可见渐变（不依赖底层 .bmx-grain 透出，
   因 .bmx-main z-index:2 建立层叠上下文会遮挡 z-index:0 的 .bmx-grain）。
   两端 --bmx-bg 无缝衔接相邻区，中段抬升至 --bmx-bg-2，并叠加金色径向辉光
   形成空气感。辉光强度 0.10，对比度仍达 AAA。 */
.bmx-section { position: relative; padding: 7rem 0; z-index: 2;
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, var(--bmx-glow-gold), transparent 70%),
        linear-gradient(180deg, var(--bmx-bg) 0%, var(--bmx-bg-2) 50%, var(--bmx-bg) 100%);
}
/* stats 区位于逐帧背景播放范围内（hero-stage）：透明背景让视频透出继续播放 */
.bmx-section--transparent { background: transparent; }
/* 过渡区：上一段透明（透出 fixed 视频），下一段接不透明实色。
   section 自身背景设为竖向渐变——顶部一段透明让视频透出，
   平滑过渡到底部实色 var(--bmx-bg)，避免硬切。
   （不能用伪元素叠加，因为伪元素会盖在实色背景之上透不出下层） */
.bmx-section--fade-in {
    background: linear-gradient(to bottom,
        transparent 0%,
        var(--bmx-bg) 16rem,
        var(--bmx-bg) 100%);
}
.bmx-section-head { text-align: center; max-width: 720px; margin: 0 auto 4rem; }
.bmx-section-tag {
    display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.15em;
    text-transform: uppercase; color: var(--bmx-gold-l); margin-bottom: 1rem;
}
.bmx-section-head h2 {
    font-size: clamp(2rem, 4.5vw, 3.25rem); font-weight: 800; line-height: 1.1;
    letter-spacing: -0.02em; margin-bottom: 1rem;
}
.bmx-section-head p { color: var(--bmx-muted); font-size: 1.1rem; }

/* =============================================================
   统计数据
   ============================================================= */
.bmx-stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem;
    padding: 3rem 0; border-top: 1px solid var(--bmx-line); border-bottom: 1px solid var(--bmx-line);
}
.bmx-stat { text-align: center; }
.bmx-stat-num {
    font-size: clamp(2.2rem, 5vw, 3.5rem); font-weight: 800;
    background: linear-gradient(135deg, var(--bmx-text), var(--bmx-gold-l));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    line-height: 1;
}
.bmx-stat-label { color: var(--bmx-muted); font-size: 0.9rem; margin-top: 0.5rem; }

/* =============================================================
   产品分类网格 (Bento)
   ============================================================= */
.bmx-products-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
    perspective: 1200px;
    perspective-origin: center top;
}
.bmx-card {
    position: relative; border: 1px solid var(--bmx-line); border-radius: 20px;
    background: var(--bmx-glass); backdrop-filter: blur(12px);
    padding: 2rem; overflow: hidden; cursor: pointer;
    transform-style: preserve-3d;
    /* 注意：base 不给 transform 加 transition，否则会与 GSAP 逐帧写入的
       3D 翻转 transform 冲突，把立体翻转平滑成"无 3D 感"的缓动。
       transform 的 transition 只放在 :hover 上（见下方）。*/
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    min-height: 280px; display: flex; flex-direction: column; justify-content: space-between;
}
.bmx-card::before {
    content: ''; position: absolute; inset: 0; border-radius: 20px; padding: 1px;
    background: linear-gradient(135deg, transparent, rgba(202,138,4,0.4), transparent);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0; transition: opacity 0.3s ease;
}
.bmx-card:hover { transform: translateY(-6px); border-color: transparent; transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
.bmx-card:hover::before { opacity: 1; }
.bmx-card.featured { grid-column: span 2; min-height: 320px; }
/* 网格尾部的最后一张卡片自动占满整行，避免右下角留白 */
.bmx-products-grid > .bmx-card:last-child { grid-column: 1 / -1; min-height: 260px; }

.bmx-card-icon {
    width: 56px; height: 56px; border-radius: 14px;
    background: linear-gradient(135deg, rgba(202,138,4,0.2), rgba(202,138,4,0.05));
    border: 1px solid rgba(202,138,4,0.3);
    display: grid; place-items: center; color: var(--bmx-gold-l); margin-bottom: 1.5rem;
}
.bmx-card-icon svg { width: 28px; height: 28px; }
.bmx-card h3 { font-size: 1.35rem; font-weight: 700; margin-bottom: 0.5rem; }
.bmx-card p { color: var(--bmx-muted); font-size: 0.92rem; }
.bmx-card-arrow {
    margin-top: 1.5rem; display: inline-flex; align-items: center; gap: 0.4rem;
    color: var(--bmx-gold-l); font-size: 0.85rem; font-weight: 600;
    transition: gap 0.25s ease;
}
.bmx-card:hover .bmx-card-arrow { gap: 0.8rem; }
.bmx-card-glow {
    position: absolute; width: 200px; height: 200px; border-radius: 50%;
    background: radial-gradient(circle, rgba(202,138,4,0.15), transparent 70%);
    top: -50px; right: -50px; pointer-events: none;
}

/* =============================================================
   特性 / 工艺区
   ============================================================= */
.bmx-feature-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;
    margin-bottom: 6rem;
}
.bmx-feature-row:last-child { margin-bottom: 0; }
.bmx-feature-row[data-reverse] .bmx-feature-text { order: 2; }

/* 超大背景编号（Why BOOMMAX 视觉锚点，JS 动态注入） */
.bmx-feature-text { position: relative; }
.bmx-feature-num {
    position: absolute; top: -3.5rem; left: -1rem;
    font-size: clamp(6rem, 12vw, 11rem); font-weight: 800; line-height: 1;
    color: var(--bmx-gold); opacity: 0.12; pointer-events: none; z-index: 0;
    letter-spacing: -0.05em; font-variant-numeric: tabular-nums;
}
.bmx-feature-text > h3, .bmx-feature-text > p,
.bmx-feature-text > .bmx-feature-list { position: relative; z-index: 1; }

.bmx-feature-visual {
    position: relative; aspect-ratio: 4/3; border-radius: 24px; overflow: hidden;
    border: 1px solid var(--bmx-line);
    background: linear-gradient(135deg, var(--bmx-bg-2), #16181f);
}
.bmx-feature-visual img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.bmx-feature-visual::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(202,138,4,0.1), transparent 60%);
}

.bmx-feature-text h3 {
    font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; line-height: 1.15;
    margin-bottom: 1rem; letter-spacing: -0.02em;
}
.bmx-feature-text p { color: var(--bmx-muted); font-size: 1.05rem; margin-bottom: 1.5rem; }
.bmx-feature-list { list-style: none; }
.bmx-feature-list li {
    display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.85rem;
    color: var(--bmx-text);
}
.bmx-feature-list .check {
    flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
    background: rgba(202,138,4,0.15); color: var(--bmx-gold-l);
    display: grid; place-items: center; margin-top: 2px;
}
.bmx-feature-list .check svg { width: 14px; height: 14px; }

/* =============================================================
   CTA 区
   ============================================================= */
.bmx-cta-band {
    position: relative; border-radius: 28px; overflow: hidden;
    padding: 5rem 3rem; text-align: center;
    background: linear-gradient(135deg, #14110a, #1a1607);
    border: 1px solid rgba(202,138,4,0.25);
}
.bmx-cta-band::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(202,138,4,0.2), transparent 60%);
}
.bmx-cta-band > * { position: relative; z-index: 1; }
.bmx-cta-band h2 {
    font-size: clamp(2rem, 4.5vw, 3.5rem); font-weight: 800; margin-bottom: 1rem;
    letter-spacing: -0.02em;
}
.bmx-cta-band p { color: var(--bmx-muted); margin-bottom: 2rem; max-width: 560px; margin-left: auto; margin-right: auto; }

/* =============================================================
   Footer
   ============================================================= */
.bmx-footer {
    position: relative; z-index: 2; border-top: 1px solid var(--bmx-line);
    padding: 4rem 0 2rem;
    /* 顶部叠加横向金辉渐变作为页面收尾的视觉锚点，底色仍为 --bmx-bg-2 */
    background:
        radial-gradient(ellipse 70% 80% at 50% 0%, var(--bmx-glow-gold), transparent 65%),
        linear-gradient(180deg, var(--bmx-bg-2) 0%, var(--bmx-bg) 100%);
}
.bmx-footer-grid {
    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 3rem;
}
.bmx-footer-col h4 { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1.25rem; color: var(--bmx-text); }
.bmx-footer-col ul { list-style: none; }
.bmx-footer-col li { margin-bottom: 0.7rem; }
.bmx-footer-col a { color: var(--bmx-muted); font-size: 0.92rem; transition: color 0.2s; }
.bmx-footer-col a:hover { color: var(--bmx-gold-l); }
.bmx-footer-contact li { display: flex; align-items: flex-start; gap: 0.55rem; }
.bmx-contact-ic { display: inline-flex; flex: 0 0 auto; color: var(--bmx-gold-l); margin-top: 0.1rem; }
.bmx-footer-brand p {
    color: var(--bmx-muted); margin-top: 1rem; font-size: 0.92rem;
    max-width: 100%; /* 不再用固定 320px，防止窄屏超出列宽导致横向滚动 */
    overflow-wrap: break-word; word-break: break-word;
}
.bmx-footer-contact a,
.bmx-footer-contact li { overflow-wrap: anywhere; /* 长 email/WhatsApp 号也能换行 */ }
.bmx-footer-bottom {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 2rem; border-top: 1px solid var(--bmx-line);
    color: var(--bmx-muted); font-size: 0.85rem; flex-wrap: wrap; gap: 1rem;
}

/* =============================================================
   自定义光标
   ============================================================= */
.bmx-cursor {
    position: fixed; top: 0; left: 0; width: 6px; height: 6px;
    background: var(--bmx-gold-l); border-radius: 50%; pointer-events: none;
    z-index: 9999; transform: translate(-50%, -50%);
    transition: opacity 0.2s;
}
.bmx-cursor-ring {
    position: fixed; top: 0; left: 0; width: 36px; height: 36px;
    border: 1px solid rgba(202,138,4,0.5); border-radius: 50%; pointer-events: none;
    z-index: 9999; transform: translate(-50%, -50%);
    /* 只过渡颜色与 scale，不动画 width/height（§四 仅 transform/opacity） */
    transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.bmx-cursor-ring.is-active {
    transform: translate(-50%, -50%) scale(1.55);
    border-color: var(--bmx-gold-l); background: rgba(202,138,4,0.08);
}

/* =============================================================
   响应式
   ============================================================= */
@media (max-width: 1024px) {
    .bmx-products-grid { grid-template-columns: repeat(2, 1fr); }
    .bmx-card.featured { grid-column: span 2; }
    .bmx-footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

@media (max-width: 768px) {
    .bmx-nav-links { display: none; }
    /* 移动端隐藏导航栏 Contact 按钮（移动菜单内已有 Contact 入口） */
    #nav-cta { display: none; }
    .bmx-burger { display: flex; }
    /* 右侧按钮簇：允许收缩，避免 44px 触控目标把汉堡/语言按钮挤出视口。
       汉堡固定不收缩（保持主控 44×44），语言按钮先让步。 */
    .bmx-nav-inner > div { gap: 0.5rem; min-width: 0; }
    .bmx-lang-toggle { flex-shrink: 1; min-width: 0; min-height: 44px; padding: 0.45rem 0.6rem; }
    .bmx-section { padding: 4.5rem 0; }
    .bmx-feature-row { grid-template-columns: 1fr; gap: 2rem; margin-bottom: 4rem; }
    .bmx-feature-row[data-reverse] .bmx-feature-text { order: 0; }
    .bmx-products-grid { grid-template-columns: 1fr; }
    .bmx-card.featured { grid-column: span 1; }
    .bmx-stats { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
    .bmx-footer-grid { grid-template-columns: 1fr; gap: 2rem; }
    .bmx-footer-col { min-width: 0; /* grid 列可收缩，杜绝横向滚动 */ }
    .bmx-cta-band { padding: 3rem 1.5rem; }
    .bmx-cursor, .bmx-cursor-ring { display: none; }
    /* 移动端触控目标 ≥44px（WCAG 2.5.5）：高度统一 44px；
       汉堡保留 44px 宽度且不收缩，语言按钮在窄屏让步收缩。 */
    .bmx-burger { min-width: 44px; min-height: 44px; justify-content: center; flex-shrink: 0; }
    .bmx-mobile-nav a,
    .bmx-mobile-sub a { min-height: 44px; display: flex; align-items: center; justify-content: center; }
    .bmx-mobile-toggle { min-height: 44px; }
}

/* 小屏手机：收紧导航内边距、语言切换收成纯图标（"RU" 文字隐藏，仍保持 44px 高触控目标） */
@media (max-width: 480px) {
    .bmx-nav-inner { padding: 0 1rem; }
    .bmx-lang-toggle .bmx-lang-label { display: none; }
    .bmx-lang-toggle { padding: 0.45rem 0.7rem; }
}

/* 超窄屏（≤360px，如 iPhone SE / 320px 旧机）：进一步收紧，确保零横向溢出 */
@media (max-width: 360px) {
    .bmx-nav-inner { padding: 0 0.75rem; }
    .bmx-logo { font-size: 1.25rem; }
    .bmx-logo-mark { width: 32px; height: 32px; }
}

@media (max-width: 375px) {
    .bmx-hero-ctas { flex-direction: column; align-items: stretch; }
    .bmx-btn { justify-content: center; }
}

/* 触屏设备隐藏自定义光标 */
@media (pointer: coarse) {
    .bmx-cursor, .bmx-cursor-ring { display: none; }
}

/* 尊重 reduced-motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}