/* ============================================
   奥腾智能科技官网 - 深色科技风格
   Autron Tech Official Website
   ============================================ */

/* CSS Variables */
:root {
    --bg-primary: #0a0e27;
    --bg-secondary: #0f1333;
    --bg-card: #131740;
    --bg-card-hover: #1a1f52;
    --bg-overlay: rgba(10, 14, 39, 0.85);
    --color-primary: #1e90ff;
    --color-primary-light: #4da6ff;
    --color-primary-dark: #0a6ecc;
    --color-accent: #e63946;
    --color-accent-light: #ff4d5a;
    --color-text: #e8eaf6;
    --color-text-secondary: #9ea3c4;
    --color-text-muted: #6b70a0;
    --color-border: rgba(30, 144, 255, 0.15);
    --color-border-hover: rgba(30, 144, 255, 0.4);
    --font-en: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-cn: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 20px rgba(30, 144, 255, 0.15);
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);
    --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, monospace;
    /* ========== 响应式 Token System（产品区） ========== */
    /* 字号梯度 — 4 档 */
    --fs-display:  clamp(1.5rem,  2.5vw, 2rem);     /* L1 卡片标题、弹窗标题 */
    --fs-title:    clamp(1.05rem, 1.4vw, 1.2rem);   /* 产品卡名、list 行标题 */
    --fs-body:     clamp(0.85rem, 1vw,   0.95rem);  /* 描述、meta */
    --fs-caption:  clamp(0.7rem,  0.85vw,0.78rem);  /* 标签、序号 */
    /* 间距梯度 — 4 档 */
    --sp-block:    clamp(36px, 6vw,   60px);  /* section 内大块间距 */
    --sp-card:     clamp(16px, 2.5vw, 24px);  /* 卡片内 padding */
    --sp-row:      clamp(10px, 1.5vw, 14px);  /* list 行 padding */
    --sp-inline:   clamp(8px,  1.2vw, 14px);  /* 行内 gap */
    /* 触摸 hit area */
    --hit-min: 44px;
}

/* Reset & Base */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
    /* 根字号弹性：480px 屏 14px → 1200px 屏 16px，所有 rem 自然缩放 */
    font-size: clamp(14px, calc(13px + 0.25vw), 16px);
}

body {
    font-family: var(--font-cn);
    background-color: var(--bg-primary);
    color: var(--color-text);
    line-height: 1.7;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover {
    color: var(--color-primary-light);
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 clamp(16px, 3vw, 32px);
}

/* ============================================
   Animations
   ============================================ */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

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

@keyframes slideDown {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

@keyframes gridScroll {
    from { background-position: 0 0; }
    to { background-position: 40px 40px; }
}

.animate-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   Navigation
   ============================================ */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 16px 0;
    background: transparent;
    transition: all var(--transition);
}

.navbar.scrolled {
    background: rgba(10, 14, 39, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
}

.nav-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--color-text);
    text-decoration: none;
}

.logo-icon {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-en);
    font-weight: 900;
    font-size: 22px;
    color: #fff;
    letter-spacing: -1px;
}

.logo-img {
    height: 40px;
    width: auto;
    margin-right: 10px;
    border-radius: 6px;
    background: #fff;
    padding: 4px 6px;
    box-sizing: content-box;
    object-fit: contain;
}

.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.logo-cn {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
}

.logo-en {
    font-family: var(--font-en);
    font-size: 9px;
    font-weight: 600;
    color: var(--color-text-muted);
    letter-spacing: 1.2px;
    white-space: nowrap;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
}

.nav-link {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    transition: all var(--transition);
    position: relative;
}

.nav-link:hover,
.nav-link.active {
    color: var(--color-text);
    background: rgba(30, 144, 255, 0.1);
}

.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 2px;
    background: var(--color-primary);
    border-radius: 1px;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}

/* ===== 语言切换下拉器（右上角，桌面端 + 手机端） ===== */
.nav-logo { order: 1; }
.nav-menu { order: 2; }
.lang-switcher {
    order: 3;
    position: relative;
    margin-left: 16px;
    flex-shrink: 0;
}
.lang-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px 6px 12px;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: 50px;
    color: var(--color-text-secondary);
    font-family: var(--font-cn);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    min-height: 32px;
    transition: all 0.3s var(--ease-out-expo);
    white-space: nowrap;
}
.lang-trigger:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: rgba(30, 144, 255, 0.06);
}
.lang-icon { width: 14px; height: 14px; flex-shrink: 0; }
.lang-current { letter-spacing: 0.02em; }
.lang-arrow {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    transition: transform 0.3s var(--ease-out-expo);
}
.lang-switcher.open .lang-arrow { transform: rotate(180deg); }
.lang-switcher.open .lang-trigger {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: rgba(30, 144, 255, 0.08);
}

.lang-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 160px;
    background: var(--bg-card);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 5px;
    list-style: none;
    margin: 0;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 0.22s var(--ease-out-expo),
                transform 0.28s var(--ease-out-expo);
    z-index: 1001;
}
.lang-switcher.open .lang-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.lang-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: 13px;
    transition: background 0.2s var(--ease-out-expo),
                color 0.2s var(--ease-out-expo);
    user-select: none;
}
.lang-option:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--color-text);
}
.lang-option.active {
    color: var(--color-primary);
    font-weight: 600;
}
.lang-check {
    width: 14px;
    height: 14px;
    opacity: 0;
    color: var(--color-primary);
    flex-shrink: 0;
}
.lang-option.active .lang-check { opacity: 1; }

@media (max-width: 768px) {
    .nav-container { justify-content: flex-start; }
    .nav-logo { flex: 1 1 auto; min-width: 0; }
    .lang-switcher {
        order: 2;
        margin-left: auto;
        margin-right: 8px;
    }
    .lang-trigger {
        padding: 5px 8px 5px 10px;
        font-size: 12px;
        min-height: 30px;
        gap: 5px;
    }
    .nav-toggle { order: 3; }
    .lang-menu {
        right: 0;
        min-width: 150px;
    }
}


.nav-toggle span {
    width: 24px;
    height: 2px;
    background: var(--color-text);
    border-radius: 1px;
    transition: all var(--transition);
}

.nav-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.nav-toggle.active span:nth-child(2) {
    opacity: 0;
}

.nav-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* ============================================
   Hero Section
   ============================================ */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 30%, rgba(30, 144, 255, 0.12) 0%, transparent 60%),
                radial-gradient(ellipse at 80% 70%, rgba(230, 57, 70, 0.06) 0%, transparent 50%),
                var(--bg-primary);
}

.hero-particles {
    position: absolute;
    inset: 0;
}

.hero-grid-overlay {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(30, 144, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(30, 144, 255, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    animation: gridScroll 20s linear infinite;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 900px;
    padding: 0 24px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(30, 144, 255, 0.1);
    border: 1px solid rgba(30, 144, 255, 0.2);
    border-radius: 50px;
    padding: 8px 20px;
    font-size: 13px;
    color: var(--color-primary-light);
    margin-bottom: 32px;
    animation-delay: 0.2s;
}

.badge-dot {
    width: 8px;
    height: 8px;
    background: var(--color-primary);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.hero-title {
    font-size: clamp(2rem, 8vw, 4.5rem);
    font-weight: 900;
    line-height: 1.15;
    margin-bottom: clamp(16px, 2.5vw, 24px);
    letter-spacing: -1px;
}

.title-line {
    display: block;
}

.title-accent {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: var(--color-text-secondary);
    margin-bottom: 48px;
    letter-spacing: 4px;
    animation-delay: 0.4s;
}

.hero-stats {
    display: flex;
    justify-content: center;
    gap: 48px;
    margin-bottom: 48px;
    animation-delay: 0.6s;
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-family: var(--font-en);
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1;
}

.stat-suffix {
    font-family: var(--font-en);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary-light);
}

.stat-label {
    display: block;
    font-size: 13px;
    color: var(--color-text-muted);
    margin-top: 6px;
}

.hero-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    animation-delay: 0.8s;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    border: none;
    text-decoration: none;
}

.btn-primary {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: #fff;
    box-shadow: 0 4px 15px rgba(30, 144, 255, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(30, 144, 255, 0.4);
    color: #fff;
}

.btn-outline {
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-border-hover);
}

.btn-outline:hover {
    background: rgba(30, 144, 255, 0.1);
    border-color: var(--color-primary);
    color: var(--color-primary-light);
}

.hero-scroll-hint {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--color-text-muted);
    font-size: 12px;
    animation: float 3s ease-in-out infinite;
}

.scroll-arrow {
    width: 20px;
    height: 20px;
    border-right: 2px solid var(--color-text-muted);
    border-bottom: 2px solid var(--color-text-muted);
    transform: rotate(45deg);
}

/* ============================================
   Sections Common
   ============================================ */
.section {
    padding: clamp(60px, 10vw, 100px) 0;
    position: relative;
}

.section-header {
    text-align: center;
    margin-bottom: clamp(36px, 6vw, 60px);
}

.section-tag {
    font-family: var(--font-en);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 4px;
    color: var(--color-primary);
    text-transform: uppercase;
}

.section-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    margin-top: 12px;
    color: var(--color-text);
}

.section-line {
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    border-radius: 2px;
    margin: 16px auto 0;
}

.section-desc {
    color: var(--color-text-secondary);
    margin-top: 16px;
    font-size: 15px;
}

/* ============================================
   About Section
   ============================================ */
.about {
    background: var(--bg-secondary);
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.about-image {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4/3;
    box-shadow: var(--shadow-lg);
}

.about-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.about-image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: linear-gradient(transparent, rgba(10, 14, 39, 0.9));
    color: var(--color-text-secondary);
    font-size: 13px;
}

.about-heading {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--color-text);
}

.about-text {
    color: var(--color-text-secondary);
    margin-bottom: 16px;
    font-size: 15px;
    line-height: 1.8;
}

.about-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 24px;
}

.about-feature-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.feature-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background: rgba(30, 144, 255, 0.1);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-feature-item h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 2px;
}

.about-feature-item p {
    font-size: 12px;
    color: var(--color-text-muted);
    line-height: 1.5;
}

/* ============================================
   Advantages Section
   ============================================ */
.advantages {
    background: var(--bg-primary);
}

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

.advantage-card {
    background: var(--bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 32px 24px;
    text-align: center;
    transition: all var(--transition);
    position: relative;
    overflow: hidden;
}

.advantage-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    transform: scaleX(0);
    transition: transform var(--transition);
}

.advantage-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-border-hover);
    box-shadow: var(--shadow-glow);
}

.advantage-card:hover::before {
    transform: scaleX(1);
}

.advantage-number {
    font-family: var(--font-en);
    font-size: 3rem;
    font-weight: 900;
    color: rgba(30, 144, 255, 0.08);
    position: absolute;
    top: 12px;
    right: 16px;
    line-height: 1;
}

.advantage-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    background: rgba(30, 144, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}

.advantage-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--color-text);
}

.advantage-card p {
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.7;
}

/* Certifications */
.certifications {
    margin-top: 60px;
    text-align: center;
}

.cert-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 24px;
    color: var(--color-text);
}

.cert-grid {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.cert-item {
    background: var(--bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 16px 28px;
    transition: all var(--transition);
}

.cert-item:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-glow);
}

.cert-badge {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-primary-light);
}

/* ============================================
   Products Section
   ============================================ */
.products {
    background: var(--bg-secondary);
}

/* ============================================
   产品中心 - 金字塔式分级（L1 大类卡片 → L2 详情视图）
   ============================================ */

/* L1：大类入口卡片 */
.category-cards {
    display: grid;
    /* 桌面默认 3 列；768-1024 段 minmax(280px) 自动 2-3 列；768- 切换为横向 1 列 */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--sp-card);
    margin-bottom: var(--sp-block);
}
.category-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--sp-card) calc(var(--sp-card) * 1.15);
    background: var(--bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: transform 0.35s var(--ease-out-expo),
                border-color 0.3s var(--ease-out-expo),
                box-shadow 0.35s var(--ease-out-expo);
    overflow: hidden;
    min-height: clamp(180px, 22vw, 220px);
}
.category-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(30, 144, 255, 0.08), transparent 60%);
    opacity: 0;
    transition: opacity 0.3s var(--ease-out-expo);
    pointer-events: none;
}
.category-card:hover {
    transform: translateY(-6px);
    border-color: var(--color-primary);
    box-shadow: 0 12px 40px rgba(30, 144, 255, 0.18);
}
.category-card:hover::before {
    opacity: 1;
}
.category-card-icon {
    font-size: clamp(32px, 4vw, 44px);
    line-height: 1;
    margin-bottom: clamp(12px, 1.8vw, 18px);
    filter: drop-shadow(0 4px 12px rgba(30, 144, 255, 0.25));
}
.category-card-body {
    flex: 1;
    margin-bottom: clamp(14px, 2vw, 20px);
    min-width: 0;
}
.category-card-title {
    font-size: var(--fs-display);
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 6px;
    letter-spacing: 0.5px;
    line-height: 1.25;
}
.category-card-sub {
    font-size: var(--fs-body);
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.55;
}
.category-card-meta {
    display: flex;
    align-items: baseline;
    gap: 6px;
    color: var(--color-primary);
}
.category-card-count {
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 700;
    font-family: var(--font-en, inherit);
    line-height: 1;
}
.category-card-unit {
    font-size: var(--fs-body);
    color: var(--color-text-secondary);
}
.category-card-arrow {
    position: absolute;
    bottom: clamp(18px, 2vw, 28px);
    right: clamp(18px, 2vw, 28px);
    font-size: clamp(18px, 2.4vw, 22px);
    color: var(--color-primary);
    transition: transform 0.3s var(--ease-out-expo);
}
.category-card:hover .category-card-arrow {
    transform: translateX(6px);
}

/* 通用 hidden class（替代 [hidden] 属性，iOS Safari 旧版兼容性更好） */
.is-hidden { display: none !important; }

/* L2：分类详情视图 */
.category-detail {
    animation: detailFadeIn 0.35s ease;
}
@keyframes detailFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.category-detail-header {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--color-border);
}
.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px 8px 10px;
    min-height: 36px;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: 50px;
    color: var(--color-text-secondary);
    font-size: var(--fs-body);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    font-family: var(--font-cn);
}
.back-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.category-detail-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
    letter-spacing: 0.5px;
}
.category-detail-count {
    font-size: 13px;
    color: var(--color-text-muted);
    padding: 4px 12px;
    background: rgba(30, 144, 255, 0.1);
    border-radius: 50px;
}

/* 视图切换按钮组（网格 / 列表） */
.view-toggle {
    display: inline-flex;
    margin-left: auto;
    background: var(--bg-card);
    border: 1px solid var(--color-border);
    border-radius: 50px;
    padding: 4px;
    gap: 2px;
}
.view-btn {
    min-width: 34px;
    height: 30px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: 50px;
    transition: all var(--transition);
}
.view-btn:hover:not(.active) {
    color: var(--color-text);
    background: rgba(255, 255, 255, 0.04);
}
.view-btn.active {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: #fff;
    box-shadow: 0 2px 8px rgba(30, 144, 255, 0.3);
}
.view-btn,
.view-btn.active {
    transition: background 0.4s var(--ease-out-expo),
                color 0.3s var(--ease-out-expo),
                box-shadow 0.3s var(--ease-out-expo);
}

/* list-mode 下，把容器从 grid 变成 flex 列 */
.product-grid.list-mode {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 列表行（list 视图的紧凑卡片） */
.product-list-row {
    position: relative;
    display: grid;
    /* 桌面 4 列：图 / 主标+副标 / 产能 / 箭头 */
    grid-template-columns: 64px 1fr 140px 28px;
    column-gap: var(--sp-inline);
    align-items: center;
    padding: var(--sp-row) calc(var(--sp-row) + 4px) var(--sp-row) calc(var(--sp-row) + 8px);
    min-height: var(--hit-min);
    background: var(--bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    overflow: hidden;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s var(--ease-out-expo),
                transform 0.5s var(--ease-out-expo),
                border-color 0.25s var(--ease-out-expo),
                background 0.25s var(--ease-out-expo);
}
.product-list-row.visible {
    opacity: 1;
    transform: translateY(0);
}
/* 左侧 accent 竖条 */
.product-list-row::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--color-primary);
    transform: scaleY(0);
    transform-origin: center;
    transition: transform 0.3s var(--ease-out-expo);
}
.product-list-row:hover {
    border-color: var(--color-border-hover);
    background: var(--bg-card-hover);
}
.product-list-row:hover::before {
    transform: scaleY(1);
}
.plr-image {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: linear-gradient(135deg, #0d1130 0%, #131838 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.plr-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.plr-emoji {
    font-size: 28px;
    opacity: 0.5;
}
.plr-main {
    min-width: 0;
}
.plr-title {
    font-size: var(--fs-title);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
}
.plr-sub {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--fs-caption);
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
}
.plr-model {
    font-family: var(--font-en);
    color: var(--color-text-secondary);
    font-weight: 500;
}
/* 副标里的 capacity（窄屏才显示，桌面端走右侧独立列） */
.plr-capacity-inline {
    display: none;
    color: var(--color-text-muted);
}
/* 桌面端独立 capacity 列 */
.plr-capacity {
    text-align: right;
    overflow: hidden;
}
.plr-capacity-tag {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: var(--fs-caption);
    font-family: var(--font-mono);
    font-weight: 500;
    color: var(--color-text-secondary);
    background: rgba(30, 144, 255, 0.08);
    border: 1px solid rgba(30, 144, 255, 0.15);
    white-space: nowrap;
    letter-spacing: 0.02em;
}
.plr-arrow {
    font-size: 22px;
    color: var(--color-text-muted);
    line-height: 1;
    text-align: center;
    transition: transform var(--transition), color var(--transition);
}
.product-list-row:hover .plr-arrow {
    color: var(--color-primary);
    transform: translateX(3px);
}

/* ===== L2 同级分类切换 chip（kamioj filter-pill 滑动背景） ===== */
.category-tabs {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px;
    margin-bottom: var(--sp-card);
    background: var(--bg-card);
    border: 1px solid var(--color-border);
    border-radius: 50px;
    /* 横滑容器（移动端会用到） */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none; /* Firefox */
    scroll-behavior: smooth;
}
.category-tabs::-webkit-scrollbar { display: none; } /* Chrome/Safari */
.cat-tabs-pill {
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 0;
    width: 0;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    border-radius: 50px;
    box-shadow: 0 2px 12px rgba(30, 144, 255, 0.35);
    transition: left 0.5s var(--ease-out-expo),
                width 0.5s var(--ease-out-expo),
                opacity 0.3s var(--ease-out-expo);
    z-index: 1;
    opacity: 0;
    pointer-events: none;
}
.cat-tab {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    min-height: 34px;
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    font-family: var(--font-cn);
    font-size: var(--fs-body);
    font-weight: 500;
    cursor: pointer;
    border-radius: 50px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color 0.3s var(--ease-out-expo);
}
.cat-tab:hover:not(.active) {
    color: var(--color-text);
}
.cat-tab.active {
    color: #fff;
    font-weight: 600;
}
.cat-tab-icon {
    font-size: 14px;
    line-height: 1;
}
.cat-tab-count {
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.1);
    color: inherit;
    opacity: 0.85;
    margin-left: 2px;
    letter-spacing: 0.02em;
}
.cat-tab.active .cat-tab-count {
    background: rgba(255, 255, 255, 0.2);
    opacity: 1;
}

/* 桌面端默认隐藏 dropdown（手机端会显示） */
.category-dropdown { display: none; }
.category-picker { display: none; }

/* ===== 手机端分类下拉触发按钮（H1 全部 + H2 当前选中 双层结构） ===== */
.category-dropdown {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    padding: 14px 16px 12px;
    background: var(--bg-card);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    color: var(--color-text);
    cursor: pointer;
    margin-bottom: 18px;
    transition: border-color 0.3s var(--ease-out-expo),
                transform 0.15s var(--ease-out-expo);
    font-family: var(--font-cn);
    text-align: left;
}
.category-dropdown:active {
    transform: scale(0.985);
    border-color: var(--color-border-hover);
}
.cat-dd-top {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
}
.cat-dd-grid-icon {
    font-size: 16px;
    color: var(--color-primary);
    line-height: 1;
    flex-shrink: 0;
}
.cat-dd-label {
    flex: 1;
    letter-spacing: 0.02em;
}
.cat-dd-total {
    font-family: var(--font-mono);
    color: var(--color-primary);
    background: rgba(30, 144, 255, 0.12);
    padding: 3px 11px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
    letter-spacing: 0.04em;
}
.cat-dd-arrow {
    color: var(--color-primary);
    transition: transform 0.3s var(--ease-out-expo);
    flex-shrink: 0;
}
.category-dropdown.open .cat-dd-arrow {
    transform: rotate(180deg);
}
.cat-dd-current {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 4px 0 26px;  /* 缩进 26px 跟 H1 grid-icon 对齐 */
    margin-top: 8px;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
    font-size: 13px;
    color: var(--color-text-secondary);
}
.cat-dd-cur-icon {
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
}
.cat-dd-cur-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cat-dd-cur-count {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--color-text-muted);
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

/* Bottom sheet picker */
.category-picker {
    position: fixed;
    inset: 0;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--ease-out-expo);
}
.category-picker[hidden] {
    display: none !important;
}
.category-picker.open {
    opacity: 1;
    pointer-events: auto;
}
.cat-picker-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.cat-picker-sheet {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-secondary);
    border-radius: 22px 22px 0 0;
    padding: 10px 0 calc(20px + env(safe-area-inset-bottom, 0));
    transform: translateY(100%);
    transition: transform 0.4s var(--ease-out-expo);
    max-height: 75vh;
    max-height: 75dvh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.5);
}
.category-picker.open .cat-picker-sheet {
    transform: translateY(0);
}
.cat-picker-handle {
    width: 40px;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    margin: 0 auto 14px;
}
.cat-picker-title {
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
    padding: 0 20px 14px;
    border-bottom: 1px solid var(--color-border);
    letter-spacing: 0.04em;
}
.cat-picker-list {
    overflow-y: auto;
    list-style: none;
    padding: 8px 0;
    -webkit-overflow-scrolling: touch;
    margin: 0;
}
.cat-picker-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 22px;
    cursor: pointer;
    transition: background 0.2s var(--ease-out-expo);
    user-select: none;
}
.cat-picker-item:active {
    background: rgba(255, 255, 255, 0.04);
}
.cat-picker-item.active {
    background: rgba(30, 144, 255, 0.1);
}
.cat-pi-icon {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
    width: 28px;
    text-align: center;
}
.cat-pi-name {
    flex: 1;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text);
}
.cat-picker-item.active .cat-pi-name {
    color: var(--color-primary);
    font-weight: 600;
}
.cat-pi-count {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--color-text-muted);
    background: rgba(255, 255, 255, 0.05);
    padding: 3px 10px;
    border-radius: 50px;
}
.cat-pi-check {
    font-size: 18px;
    color: var(--color-primary);
    opacity: 0;
    width: 18px;
    text-align: center;
}
.cat-picker-item.active .cat-pi-check {
    opacity: 1;
}

/* 旧 L2 二级分类容器（已不用，保留兼容） */
.category-level-2 {
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 28px;
    transition: all 0.3s ease;
}

.filter-btn {
    background: var(--bg-card);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    padding: 10px 22px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    font-family: var(--font-cn);
}

.filter-btn:hover {
    border-color: var(--color-border-hover);
    color: var(--color-text);
}

.filter-btn.active {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    border-color: var(--color-primary);
    color: #fff;
    box-shadow: 0 4px 15px rgba(30, 144, 255, 0.3);
}

/* L2 二级分类 chip 样式 */
.level-2-btn {
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 50px;
    background: rgba(30, 144, 255, 0.08);
    border-color: rgba(30, 144, 255, 0.2);
}
.level-2-btn:hover {
    background: rgba(30, 144, 255, 0.15);
    border-color: rgba(30, 144, 255, 0.4);
}
.level-2-btn.active {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    border-color: var(--color-primary);
    color: #fff;
    box-shadow: 0 2px 12px rgba(30, 144, 255, 0.3);
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 24px;
}

/* ============================================
   Product Card — 借鉴 kamioj 的卡片视觉系统
   ============================================ */
.product-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    /* 入场态：fade-in + up，IntersectionObserver 加 .visible 后归位 */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s var(--ease-out-expo),
                transform 0.6s var(--ease-out-expo),
                border-color 0.3s var(--ease-out-expo);
    will-change: transform;
}
.product-card.visible {
    opacity: 1;
    transform: translateY(0);
}
.product-card:hover {
    border-color: var(--color-border-hover);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 24px rgba(30, 144, 255, 0.15);
}
/* 3D tilt 内层（JS 跟随鼠标 perspective rotation） */
.p-card-inner {
    transform-style: preserve-3d;
    transition: transform 0.4s var(--ease-out-expo);
    will-change: transform;
}

.product-card-image {
    position: relative;
    aspect-ratio: 16 / 10;
    /* iOS Safari < 15.4 / 旧 Webview fallback：避免容器塌成 0 高度 */
    min-height: 180px;
    overflow: hidden;
    background: linear-gradient(135deg, #0d1130 0%, #131838 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
@supports (aspect-ratio: 1) {
    .product-card-image { min-height: 0; }
}
.product-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02);
    transition: transform 0.7s var(--ease-out-expo);
}
.product-card:hover .product-card-image img {
    transform: scale(1.08);
}

/* 图片缺失/加载失败时的 emoji 占位 */
.product-card-emoji {
    font-size: 64px;
    line-height: 1;
    opacity: 0.4;
    filter: drop-shadow(0 4px 16px rgba(30, 144, 255, 0.25));
}
.product-card-image.no-image .product-card-emoji {
    display: block;
}

/* 左上序号 + 右上分类标签 —— 毛玻璃风（深色主题适配） */
.product-card-thumb-meta {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 3;
    pointer-events: none;
}
.product-card-num {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 4px 8px;
    border-radius: 6px;
    letter-spacing: 0.06em;
}
.product-card-category {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 4px 9px;
    border-radius: 6px;
    letter-spacing: 0.04em;
}
/* 左侧 cat 色点 */
.product-card-category::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    margin-right: 6px;
    vertical-align: 1px;
    opacity: 0.85;
}
/* 各 cat 颜色仅作色点不再做填充 */
.category-fire-valve { color: #ff6b7e; }
.category-assembly { color: #5ab1ff; }
.category-inspection { color: #45e0b8; }
.category-auxiliary { color: #ffc347; }
.category-non-standard { color: #b388ff; }
.category-visual { color: #ff9d4d; }
.category-automotive { color: #ffd54d; }

/* hover 时底部黑渐变蒙层 + 上滑 CTA */
.product-card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 24px;
    background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, 0.7) 100%);
    opacity: 0;
    transition: opacity 0.35s var(--ease-out-expo);
    z-index: 2;
    pointer-events: none;
}
.product-card:hover .product-card-overlay {
    opacity: 1;
}
.product-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: #fff;
    color: #1a1a1a;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    transform: translateY(16px);
    transition: transform 0.4s var(--ease-out-expo);
}
.product-card:hover .product-card-cta {
    transform: translateY(0);
}
.product-card-cta svg {
    width: 13px;
    height: 13px;
}

/* 触摸设备禁用 hover 效果（卡片不再 3D tilt，overlay 也不出现） */
@media (hover: none) {
    .product-card:hover .p-card-inner { transform: none !important; }
    .product-card-overlay { display: none; }
}

/* 旧版「色块满填充」cat 类已删除 —— 现在 cat-color 类只设 color（被 ::before 色点、modal-category 边框等用 currentColor 引用） */

.product-card-body {
    padding: var(--sp-card);
}
.product-card-name {
    font-size: var(--fs-title);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 6px;
    line-height: 1.35;
    letter-spacing: -0.01em;
    /* 单行省略 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.product-card-desc {
    font-size: var(--fs-body);
    color: var(--color-text-secondary);
    line-height: 1.55;
    margin-bottom: 12px;
    /* 限两行 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.2em;
}
/* 底部 meta dot 串：型号 · 产能 · 分类（mono + 小圆点分隔） */
.product-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: var(--fs-caption);
    color: var(--color-text-muted);
    letter-spacing: 0.03em;
    flex-wrap: wrap;
}
.product-card-meta .dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.5;
    flex-shrink: 0;
}
.product-card-meta .meta-model {
    color: var(--color-primary-light);
    font-weight: 600;
}

.product-card-link:hover {
    color: var(--color-primary-light);
    gap: 8px;
}

/* ============================================
   Product Modal
   ============================================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition);
    padding: 20px;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: var(--bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    max-width: clamp(720px, 90vw, 1100px);
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    transform: scale(0.9) translateY(20px);
    transition: transform var(--transition);
}

.modal-overlay.active .modal-content {
    transform: scale(1) translateY(0);
}

.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    background: var(--bg-card);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    color: var(--color-text);
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all var(--transition);
}

.modal-close:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
}

.modal-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.modal-image {
    background: #0d1130;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(280px, 36vw, 420px);
}

.modal-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-height: 500px;
}

.modal-info {
    padding: clamp(20px, 3vw, 40px);
}

.modal-category {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 14px;
    border-radius: 50px;
    font-size: var(--fs-caption);
    font-weight: 700;
    margin-bottom: clamp(12px, 1.5vw, 16px);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid currentColor;
    letter-spacing: 0.06em;
}
.modal-category::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.modal-title {
    font-size: var(--fs-display);
    font-weight: 800;
    color: var(--color-text);
    margin-bottom: clamp(14px, 2vw, 20px);
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.modal-params {
    margin-bottom: clamp(18px, 2.5vw, 24px);
}

.modal-param-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: clamp(8px, 1.2vw, 10px) 0;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--fs-body);
}

.modal-param-label {
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.modal-param-value {
    color: var(--color-text);
    font-weight: 600;
    font-family: var(--font-en);
    text-align: right;
    word-break: break-word;
}

.modal-features {
    margin-bottom: clamp(20px, 3vw, 28px);
}

.modal-features h4 {
    font-size: var(--fs-body);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 10px;
}

.modal-feature-list {
    list-style: none;
}

.modal-feature-list li {
    font-size: var(--fs-body);
    color: var(--color-text-secondary);
    padding: 4px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.6;
}

.modal-feature-list li::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--color-primary);
    border-radius: 50%;
    flex-shrink: 0;
}

.modal-inquiry {
    width: 100%;
    justify-content: center;
    min-height: var(--hit-min);
}

/* ============================================
   Contact Section
   ============================================ */
.contact {
    background: var(--bg-primary);
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}

.contact-heading {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-text);
    margin-bottom: 4px;
}

.contact-sub {
    font-family: var(--font-en);
    font-size: 13px;
    color: var(--color-text-muted);
    letter-spacing: 1px;
    margin-bottom: 32px;
}

.contact-items {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 32px;
}

.contact-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.contact-icon {
    width: 44px;
    height: 44px;
    background: rgba(30, 144, 255, 0.1);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    flex-shrink: 0;
}

.contact-item h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 2px;
}

.contact-item p {
    font-size: 13px;
    color: var(--color-text-muted);
}

.contact-social {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.social-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: var(--bg-card);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    transition: border-color 0.25s var(--ease-out-expo);
    flex: 1 1 220px;
    min-width: 0;
}
.social-item:hover {
    border-color: var(--color-border-hover);
}

.social-qr {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    background: #fff;
    padding: 4px;
    box-sizing: border-box;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s var(--ease-out-expo),
                box-shadow 0.25s var(--ease-out-expo);
}
.social-qr.is-clickable {
    cursor: zoom-in;
}
.social-qr.is-clickable:hover {
    transform: scale(1.06);
    box-shadow: 0 6px 20px rgba(30, 144, 255, 0.25);
}
.social-qr img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none; /* 确保 click 事件冒泡到 .social-qr 容器 */
}
.social-qr-placeholder {
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed var(--color-border);
    color: var(--color-text-muted);
}

.social-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.social-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-primary);
}

.social-value {
    font-size: 12.5px;
    color: var(--color-text-muted);
    line-height: 1.4;
}

@media (max-width: 480px) {
    .contact-social {
        flex-direction: column;
        gap: 12px;
    }
    .social-item {
        flex: 1 1 auto;
    }
}

.contact-cta {
    position: sticky;
    top: 100px;
}

.cta-card {
    background: var(--bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 40px;
    position: relative;
    overflow: hidden;
}

.cta-glow {
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(30, 144, 255, 0.08), transparent 60%);
    pointer-events: none;
}

.cta-card h3 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-text);
    margin-bottom: 12px;
    position: relative;
}

.cta-card p {
    color: var(--color-text-secondary);
    margin-bottom: 28px;
    font-size: 14px;
    position: relative;
}

.cta-steps {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.cta-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.step-num {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-en);
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}

.cta-step span:last-child {
    font-size: 12px;
    color: var(--color-text-muted);
}

.cta-step-arrow {
    color: var(--color-text-muted);
    font-size: 18px;
    margin-bottom: 18px;
}

/* ============================================
   Footer
   ============================================ */
.footer {
    background: #060920;
    border-top: 1px solid var(--color-border);
    padding: 60px 0 30px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.footer-desc {
    color: var(--color-text-muted);
    font-size: 14px;
}

.footer-links h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 16px;
}

.footer-links a,
.footer-links span {
    display: block;
    font-size: 13px;
    color: var(--color-text-muted);
    padding: 4px 0;
    transition: color var(--transition);
}

.footer-links a:hover {
    color: var(--color-primary);
}

.footer-bottom {
    border-top: 1px solid var(--color-border);
    padding-top: 24px;
    text-align: center;
}

.footer-bottom p {
    font-size: 12px;
    color: var(--color-text-muted);
}

/* ============================================
   Back to Top
   ============================================ */
.back-to-top {
    position: fixed;
    bottom: 32px;
    right: 32px;
    width: 44px;
    height: 44px;
    background: var(--bg-card);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    color: var(--color-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all var(--transition);
    box-shadow: var(--shadow-md);
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* ============================================
   Responsive Design
   ============================================ */
@media (max-width: 1024px) {
    .advantages-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        height: 100vh;
        background: var(--bg-secondary);
        flex-direction: column;
        align-items: flex-start;
        padding: 80px 24px 24px;
        gap: 4px;
        transition: right var(--transition);
        border-left: 1px solid var(--color-border);
        box-shadow: var(--shadow-lg);
    }

    .nav-menu.active {
        right: 0;
    }

    .nav-toggle {
        display: flex;
    }

    .nav-link {
        width: 100%;
        padding: 12px 16px;
    }

    /* 移动端 hero 四宫格统计，告别"挤一排"或"换四行" */
    .hero-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px 24px;
        max-width: 360px;
        margin: 0 auto 32px;
    }
    .hero-stats .stat-item {
        align-items: center;
        text-align: center;
    }
    .stat-number {
        font-size: clamp(1.6rem, 7vw, 2.4rem);
    }
    .hero-actions {
        flex-direction: column;
        align-items: stretch;
        max-width: 320px;
        margin: 0 auto;
        gap: 12px;
    }
    .hero-actions .btn {
        min-height: 48px;       /* 触摸 hit area */
        justify-content: center;
    }

    .about-grid {
        grid-template-columns: 1fr;
    }

    .about-features {
        grid-template-columns: 1fr;
    }

    .advantages-grid {
        grid-template-columns: 1fr;
    }

    .product-grid {
        grid-template-columns: 1fr;
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

    /* ===== 弹窗手机端：全屏覆盖 + 视觉系统重做 ===== */
    .modal-overlay {
        padding: 0;
    }
    .modal-content {
        max-width: 100vw;
        width: 100vw;
        max-height: 100vh;
        max-height: 100dvh;
        height: 100%;
        border-radius: 0;
        border: none;
        display: flex;
        flex-direction: column;
        background: var(--bg-secondary);
    }

    /* 关闭按钮：毛玻璃深色背景，永远清晰可见，独立于图片 */
    .modal-close {
        top: max(14px, env(safe-area-inset-top, 14px));
        right: 14px;
        width: 40px;
        height: 40px;
        background: rgba(15, 19, 51, 0.88);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
        z-index: 20;
    }

    /* 主滚动区 */
    .modal-body {
        grid-template-columns: 1fr;
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        /* 给底部 fixed CTA 留位（按钮高 62px + iOS 安全区） */
        padding-bottom: calc(82px + env(safe-area-inset-bottom, 0));
    }

    /* 图片区：用显式 height 代替 aspect-ratio，告别移动端 Webview 计算不稳定 */
    .modal-image {
        position: relative;
        height: 32vh;
        max-height: 320px;
        min-height: 200px;
        background: linear-gradient(135deg, #0d1130 0%, #161a3e 100%);
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    .modal-image img {
        width: 100%;
        height: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    /* 信息区：清晰视觉层次 + 合理 padding */
    .modal-info {
        padding: 22px 22px 28px;
    }

    /* cat tag：色点风格继承 base，手机端只调字号/间距 */
    .modal-category {
        font-size: 11px;
        padding: 5px 13px;
        margin-bottom: 16px;
    }

    /* 标题：粗大字 + 紧凑行高 */
    .modal-title {
        font-size: 1.3rem;
        line-height: 1.32;
        margin-bottom: 22px;
        font-weight: 800;
        letter-spacing: -0.015em;
        color: var(--color-text);
    }

    /* 参数表：grid 两列 + 合理行距 */
    .modal-params {
        margin-bottom: 26px;
    }
    .modal-param-row {
        display: grid;
        grid-template-columns: 88px 1fr;
        column-gap: 16px;
        padding: 11px 0;
        font-size: 13px;
        align-items: baseline;
    }
    .modal-param-label {
        font-size: 12px;
        color: var(--color-text-muted);
        font-weight: 500;
    }
    .modal-param-value {
        text-align: left;
        word-break: break-word;
        color: var(--color-text);
        font-weight: 600;
    }

    /* features 区：标题清晰 + 列表紧凑 */
    .modal-features {
        margin-bottom: 24px;
    }
    .modal-features h4 {
        font-size: 14px;
        margin-bottom: 14px;
        font-weight: 700;
        color: var(--color-text);
    }
    .modal-feature-list li {
        padding: 6px 0;
        line-height: 1.65;
        font-size: 13px;
    }

    /* 「立即咨询」按钮：视觉强化，渐变 + 深阴影 + 字号字距 */
    .modal-inquiry {
        position: fixed !important;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0;
        border-radius: 0;
        padding: 18px 24px calc(18px + env(safe-area-inset-bottom, 0));
        min-height: 62px;
        font-size: 17px;
        font-weight: 700;
        letter-spacing: 6px;
        z-index: 15;
        background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light)) !important;
        box-shadow: 0 -12px 36px rgba(30, 144, 255, 0.4);
        border: none !important;
        color: #fff !important;
    }
    .modal-inquiry:hover {
        transform: none;
    }

    .cta-steps {
        flex-wrap: wrap;
        gap: 12px;
    }

    .cta-step-arrow {
        display: none;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .section {
        padding: 60px 0;
    }

    /* ===== 产品区移动端规则（768-）：跳过 L1，chip + 列表为唯一形态 ===== */
    /* 1. L1 大卡和返回按钮在手机端不出现 */
    .category-cards { display: none !important; }
    .back-btn { display: none !important; }
    /* 2. detail 容器在手机端永远显示（覆盖 .is-hidden）—— 防 JS 失败时空白
       兼容性：iOS Safari 旧版对属性选择器 [hidden] 有时不稳定，改用 class */
    .category-detail,
    .category-detail.is-hidden {
        display: block !important;
    }
    .category-detail { animation: none; }

    /* 3. detail-header 在手机端简化：cat 名隐藏（chip 已显示），只留 count + 视图切换 */
    .category-detail-header {
        gap: 12px;
        padding-bottom: 0;
        margin-bottom: 12px;
        border-bottom: none;
    }
    .category-detail-title { display: none; }  /* cat 名在 chip 上已经明确 */
    .category-detail-count {
        margin-left: auto;
        font-family: var(--font-mono);
    }
    .filter-btn { white-space: nowrap; flex-shrink: 0; }

    /* L2：强制 list 视图，隐藏 grid/list 切换按钮 */
    .view-toggle { display: none; }

    /* List 行 3 列（藏 capacity 独立列，capacity 转到副标内联） */
    .product-list-row {
        grid-template-columns: 56px 1fr 22px;
        padding: 10px 12px 10px 18px;
    }
    .product-list-row .plr-capacity { display: none; }
    .product-list-row .plr-capacity-inline { display: inline; }
    .plr-image { width: 56px; height: 56px; }
    .plr-arrow { font-size: 18px; }

    /* 手机端分类切换：chip 横滑 → dropdown + bottom sheet picker */
    .category-tabs { display: none !important; }
    .category-dropdown { display: flex; }
    /* picker 容器本身常驻 DOM，靠 opacity / transform 控制显隐 */
    .category-picker {
        display: block;
    }
    .category-picker[hidden] {
        display: none !important;
    }
}

@media (max-width: 480px) {
    /* container/section padding/字号 已由 clamp 自动处理，这里只补无法 clamp 化的离散调整 */

    /* Hero stats 进一步压缩 */
    .hero-stats { gap: 12px 16px; max-width: 320px; }

    /* ===== 产品区极窄屏（480-）===== */
    /* L1：副标隐藏、卡片更紧 */
    .category-card { padding: 14px; gap: 12px; }
    .category-card-sub { display: none; }

    /* L2 详情头：返回按钮 + 标题在手机端已隐藏，只剩 count，无须额外调整 */

    /* List 行更紧（图标 48px、副标可省略产能保留型号） */
    .product-list-row {
        grid-template-columns: 48px 1fr 20px;
        column-gap: 10px;
        padding: 10px 12px 10px 16px;
    }
    .plr-image { width: 48px; height: 48px; }
    .plr-sub { gap: 6px; }
    /* 极窄屏：副标里的 capacity 也隐藏，只保留型号；产能想看要点进详情 */
    .plr-sub .plr-capacity-inline { display: none; }

    /* 弹窗在 480- 进一步压缩：图片更小、padding 更紧 */
    .modal-image {
        height: 28vh;
        max-height: 260px;
        min-height: 180px;
    }
    .modal-info {
        padding: 18px 16px 24px;
    }
    .modal-title {
        font-size: 1.18rem;
        margin-bottom: 18px;
    }
    .modal-param-row {
        grid-template-columns: 78px 1fr;
        padding: 10px 0;
    }
    .modal-inquiry {
        min-height: 58px;
        font-size: 16px;
        letter-spacing: 4px;
    }

    /* iOS 安全区：AI 浮窗 */
    .ai-chat-widget {
        bottom: calc(16px + env(safe-area-inset-bottom, 0));
    }
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--bg-card);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary-dark);
}

/* Selection */
::selection {
    background: rgba(30, 144, 255, 0.3);
    color: #fff;
}

/* ============================================
   AI Chat Widget
   ============================================ */
.ai-chat-widget {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
}
.ai-chat-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #0066ff, #00aaff);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0, 102, 255, 0.4);
    transition: all 0.3s ease;
    position: relative;
}
.ai-chat-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 28px rgba(0, 102, 255, 0.5);
}
.ai-chat-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ff4444;
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 8px;
    line-height: 1.4;
}
.ai-chat-window {
    position: absolute;
    bottom: 70px;
    right: 0;
    width: 380px;
    height: 520px;
    background: #1a1a2e;
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
    display: none;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.ai-chat-window.active {
    display: flex;
    animation: chatSlideUp 0.3s ease;
}
@keyframes chatSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.ai-chat-header {
    padding: 16px;
    background: linear-gradient(135deg, #0066ff, #0044cc);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ai-chat-header-info {
    display: flex;
    align-items: center;
    gap: 12px;
}
.ai-chat-avatar {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #fff;
    padding: 3px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.ai-chat-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.ai-chat-name {
    color: white;
    font-weight: 600;
    font-size: 14px;
}
.ai-chat-status {
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
}
.ai-chat-close {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
.ai-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ai-message {
    max-width: 85%;
}
.ai-bot {
    align-self: flex-start;
}
.ai-user {
    align-self: flex-end;
}
.ai-message-content {
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.5;
}
.ai-bot .ai-message-content {
    background: #2a2a4a;
    color: #e0e0e0;
    border-bottom-left-radius: 4px;
}
.ai-user .ai-message-content {
    background: linear-gradient(135deg, #0066ff, #0044cc);
    color: white;
    border-bottom-right-radius: 4px;
}

/* ===== AI 消息 Markdown 渲染样式 ===== */
.ai-bot .ai-message-content p {
    margin: 0 0 8px;
}
.ai-bot .ai-message-content p:last-child {
    margin-bottom: 0;
}
.ai-bot .ai-message-content h1,
.ai-bot .ai-message-content h2,
.ai-bot .ai-message-content h3,
.ai-bot .ai-message-content h4 {
    margin: 14px 0 8px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.35;
}
.ai-bot .ai-message-content h1:first-child,
.ai-bot .ai-message-content h2:first-child,
.ai-bot .ai-message-content h3:first-child,
.ai-bot .ai-message-content h4:first-child { margin-top: 0; }
.ai-bot .ai-message-content h1 { font-size: 16px; }
.ai-bot .ai-message-content h2 { font-size: 15px; }
.ai-bot .ai-message-content h3 { font-size: 14px; color: #5ab1ff; }
.ai-bot .ai-message-content h4 { font-size: 13px; color: #5ab1ff; }
.ai-bot .ai-message-content strong {
    font-weight: 700;
    color: #ffffff;
}
.ai-bot .ai-message-content em {
    font-style: italic;
    color: #c5cde8;
}
.ai-bot .ai-message-content code {
    background: rgba(255, 255, 255, 0.1);
    padding: 1px 6px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: #ffd07a;
}
.ai-bot .ai-message-content ul,
.ai-bot .ai-message-content ol {
    margin: 6px 0 10px;
    padding-left: 22px;
}
.ai-bot .ai-message-content li {
    margin: 3px 0;
    line-height: 1.55;
}
.ai-bot .ai-message-content ul li::marker { color: #5ab1ff; }
.ai-bot .ai-message-content ol li::marker { color: #5ab1ff; font-weight: 600; }
.ai-bot .ai-message-content hr {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin: 12px 0;
}
.ai-bot .ai-message-content a {
    color: #5ab1ff;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.ai-bot .ai-message-content a:hover { color: #8cc8ff; }
/* 让 message-content 在 markdown 渲染下不挤压 */
.ai-bot .ai-message-content { word-break: break-word; }
.ai-quick-replies {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.ai-quick-btn {
    padding: 5px 12px;
    border-radius: 16px;
    border: 1px solid rgba(0, 102, 255, 0.4);
    background: rgba(0, 102, 255, 0.1);
    color: #66aaff;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}
.ai-quick-btn:hover {
    background: rgba(0, 102, 255, 0.25);
    border-color: #0066ff;
}
.ai-chat-input {
    padding: 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    gap: 8px;
    align-items: center;
}
.ai-chat-input input {
    flex: 1;
    background: #2a2a4a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 8px 16px;
    color: white;
    font-size: 13px;
    outline: none;
}
.ai-chat-input input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}
.ai-chat-input input:focus {
    border-color: #0066ff;
}
.ai-chat-send {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #0066ff, #0044cc);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.ai-chat-send:hover {
    transform: scale(1.1);
}

/* AI Chat Mobile responsive */
@media (max-width: 480px) {
    .ai-chat-window {
        width: calc(100vw - 32px);
        height: calc(100vh - 120px);
        bottom: 70px;
        right: 16px;
    }
}


/* ============================================
   Entrance Loading Animation
   ============================================ */
.entrance-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background: var(--bg-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.8s;
}
.entrance-overlay.fade-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.entrance-logo-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    animation: entranceLogoIn 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes entranceLogoIn {
    0% { opacity: 0; transform: scale(0.7) translateY(20px); }
    60% { opacity: 1; transform: scale(1.05) translateY(-5px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
.entrance-logo-icon {
    width: 96px;
    height: 96px;
    border-radius: 18px;
    background: #fff;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 0 40px rgba(30, 144, 255, 0.4), 0 0 80px rgba(30, 144, 255, 0.15);
    animation: entrancePulse 2s ease-in-out infinite;
}
.entrance-logo-icon img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}
@keyframes entrancePulse {
    0%, 100% { box-shadow: 0 0 40px rgba(30, 144, 255, 0.4), 0 0 80px rgba(30, 144, 255, 0.15); }
    50% { box-shadow: 0 0 60px rgba(30, 144, 255, 0.6), 0 0 120px rgba(30, 144, 255, 0.25); }
}
.entrance-brand {
    text-align: center;
}
.entrance-brand-cn {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: 6px;
    margin-bottom: 8px;
    opacity: 0;
    animation: entranceTextIn 0.6s 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.entrance-brand-en {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-primary);
    letter-spacing: 3px;
    opacity: 0;
    animation: entranceTextIn 0.6s 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    white-space: nowrap;
}
@keyframes entranceTextIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.entrance-line {
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
    margin-top: 20px;
    animation: entranceLineExpand 1s 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes entranceLineExpand {
    from { width: 0; }
    to { width: 200px; }
}
.entrance-tagline {
    font-size: 13px;
    color: var(--color-text-muted);
    letter-spacing: 3px;
    margin-top: 16px;
    opacity: 0;
    animation: entranceTextIn 0.5s 1.2s ease forwards;
}
.entrance-particles-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    overflow: hidden;
}
.entrance-p-dot {
    position: absolute;
    width: 3px; height: 3px;
    background: var(--color-primary);
    border-radius: 50%;
    opacity: 0;
    animation: entDotFloat 2.5s ease-in-out infinite;
}
@keyframes entDotFloat {
    0% { opacity: 0; transform: translateY(0) scale(0); }
    15% { opacity: 0.5; transform: translateY(-20px) scale(1); }
    100% { opacity: 0; transform: translateY(-120px) scale(0.2); }
}

/* ============================================
   Lightbox - 产品图片点击放大
   ============================================ */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 8, 22, 0.92);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 40px;
    cursor: zoom-out;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.lightbox-overlay.active {
    display: flex;
    animation: lightboxFadeIn 0.25s ease;
}
@keyframes lightboxFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.lightbox-overlay img {
    max-width: 92vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
    cursor: default;
    animation: lightboxZoomIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes lightboxZoomIn {
    from { opacity: 0; transform: scale(0.85); }
    to { opacity: 1; transform: scale(1); }
}
.lightbox-close {
    position: absolute;
    top: 24px;
    right: 32px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s;
}
.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.22);
}
.lightbox-hint {
    position: absolute;
    bottom: 24px;
    left: 0;
    right: 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    letter-spacing: 1px;
    pointer-events: none;
}
.modal-image img {
    cursor: zoom-in;
}

/* 关于段宣传片视频 */
.about-image .about-video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    background: #0a0e1c;
    border-radius: inherit;
}