/*
Theme Name: Red Growth
Theme URI: http://example.com/red-growth
Author: Red Growth Agency
Description: 专为小红书流量增长业务定制的暗黑风格主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: red-growth
*/

/* ==================== 1. 全局设置 ==================== */
:root {
    /* 背景：高级深空灰 */
    --bg-dark: #0e0e12; 
    
    /* 卡片背景：微亮透明 */
    --bg-card: rgba(255, 255, 255, 0.05); 
    
    /* 边框：增加亮度 */
    --border-light: rgba(255, 255, 255, 0.15); 
    
    /* 强调色 */
    --accent-red: #FF2442;
    
    /* 文本颜色 */
    --text-white: #ffffff;
    --text-gray: #b0b0b5; /* 稍微提亮 */
    
    --gradient-main: linear-gradient(135deg, #FF2442 0%, #ff4757 100%);
}

html { scroll-behavior: smooth; margin-top: 0 !important; }

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

body { 
    font-family: 'Outfit', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, "Microsoft YaHei", sans-serif;
    background-color: var(--bg-dark); /* 这里调用上面的颜色变量 */
    color: var(--text-white);
    line-height: 1.6;
    padding-top: 0; 
    overflow-x: hidden;
}

/* 修改后的全屏线性光幕，彻底消除交界线 */
body::before {
    content: '';
    position: fixed; /* 固定在屏幕上，无论怎么滚动，光都在 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* 强制铺满整个屏幕高度 */
    background: linear-gradient(to bottom, 
        rgba(255, 36, 66, 0.15) 0%,   /* 顶部：红色浓度 15% */
        rgba(255, 36, 66, 0.02) 60%,  /* 中间：红色浓度变淡 */
        rgba(14, 14, 18, 0) 100%      /* 底部：完全透明，融入背景 */
    );
    
    pointer-events: none; /* 确保鼠标能穿透光层点击下面的按钮 */
    z-index: 0;
}

img { width: 100%; height: 100%; object-fit: cover; display: block; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 30px; position: relative; z-index: 2; }

/* 粒子背景 */
#particle-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

/* 滚动显现动效 */
.reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.reveal.active { opacity: 1; transform: translateY(0); }
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
a { text-decoration: none; color: inherit; transition: 0.3s; }
ul { list-style: none; }

/* ==================== 2. 导航栏 ==================== */
nav { position: fixed; top: 0; width: 100%; z-index: 1000; padding: 20px 0; background: rgba(5, 5, 5, 0.8); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border-light); transition: 0.3s; }
/* WordPress Admin Bar 适配 */
body.admin-bar nav { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar nav { top: 46px; } }

.nav-inner { display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 24px; font-weight: 900; letter-spacing: 1px; }
.logo i { color: var(--accent-red); margin-right: 8px; }
.nav-links { display: flex; gap: 30px; }
.nav-links a { font-size: 14px; font-weight: 500; color: var(--text-gray); position: relative; }
.nav-links a:hover { color: #fff; }
.nav-links a::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background: var(--accent-red); transition: 0.3s; }
.nav-links a:hover::after { width: 100%; }
.btn-gradient { padding: 10px 25px; background: var(--gradient-main); border-radius: 50px; font-weight: 700; font-size: 14px; box-shadow: 0 0 20px rgba(255, 36, 66, 0.4); transition: 0.3s; color: #fff; }
.btn-gradient:hover { transform: translateY(-2px) scale(1.05); }

/* ==================== 3. 通用板块样式 ==================== */
.section { padding: 120px 0; border-bottom: 1px solid rgba(255,255,255,0.02); position: relative; z-index: 2; }
.section-title { text-align: center; margin-bottom: 70px; }
.section-title p { color: var(--accent-red); font-weight: 700; letter-spacing: 4px; font-size: 14px; margin-bottom: 10px; text-transform: uppercase; }
.section-title h2 { font-size: 48px; font-weight: 700; }

/* ==================== 4. Hero 首屏 ==================== */
.hero { padding: 180px 0 100px; position: relative; z-index: 2; } 
.hero-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: center; }

.glitch-text { position: relative; font-size: 72px; line-height: 1; font-weight: 800; margin-bottom: 25px; color: #fff; }
.text-gradient { background: var(--gradient-main); -webkit-background-clip: text; color: transparent; }
.hero-text p { font-size: 20px; color: var(--text-gray); margin-bottom: 40px; max-width: 600px; }

.hero-visual { position: relative; height: 500px; perspective: 1000px; }
.card-main { width: 90%; height: 100%; top: 0; right: 0; border-radius: 20px; background: url('/wp-content/uploads/2025/12/Gemini_Generated_Image_ak3ljnak3ljnak3l_cleanup.jpg') center/cover; border: 1px solid var(--border-light); box-shadow: 0 0 50px rgba(255,36,66,0.1); }
.card-float { position: absolute; bottom: 50px; left: -20px; width: 240px; background: rgba(30, 30, 35, 0.95); backdrop-filter: blur(15px); padding: 20px; border-left: 4px solid var(--accent-red); border-radius: 10px; box-shadow: 0 20px 40px rgba(0,0,0,0.4); animation: float 6s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }

/* ==================== 5. Logo 墙 ==================== */
.logos-section { padding: 40px 0; background: rgba(255,255,255,0.01); border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); position: relative; z-index: 2;}
.logos-grid { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 30px; opacity: 0.5; transition: 0.3s; }
.logos-grid:hover { opacity: 1; }
.logo-item { font-size: 20px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 10px; cursor: default; }

/* ==================== 6. 核心业务 (卡片+图标完整修复版) ==================== */
.cards-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; perspective: 1000px; }

/* 1. 卡片外壳 (使用新的毛玻璃样式) */
.glass-card {
    background: rgba(40, 40, 45, 0.6); 
    backdrop-filter: blur(12px); 
    -webkit-backdrop-filter: blur(12px);
    
    border: 1px solid rgba(255, 255, 255, 0.15); 
    border-radius: 24px;
    padding: 40px 30px;
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    transform: translateZ(0);
    transition: all 0.3s ease;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}

.glass-card:hover {
    background: rgba(50, 50, 60, 0.8);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 10px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.2);
    transform: translateY(-5px);
}

/* 2. 图标盒子 */
.card-icon-box {
    width: 70px;
    height: 70px;
    background: rgba(255, 36, 66, 0.1); 
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--accent-red); 
    margin-bottom: 25px;
    transition: 0.3s;
    transform: translateZ(20px);
}

/* 3. 悬停时的图标特效 */
.glass-card:hover .card-icon-box {
    transform: translateZ(40px) scale(1.1);
    background: var(--accent-red); 
    color: #fff; 
    box-shadow: 0 0 20px var(--accent-red); 
}

/* 4. 文字内容样式 */
.glass-card h3 { font-size: 24px; margin-bottom: 15px; transform: translateZ(30px); color: #fff; }
.glass-card p { color: var(--text-gray); font-size: 15px; margin-bottom: 20px; line-height: 1.6; transform: translateZ(20px); }
.card-list { transform: translateZ(20px); }
.card-list li { margin-bottom: 8px; color: #ccc; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.card-list li i { color: var(--accent-red); }

/* ==================== 7. SOP 流程 ==================== */
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; position: relative; }
.step-item { text-align: center; position: relative; z-index: 1; transition: 0.3s; }
.step-item:hover { transform: translateY(-10px); }
.step-num { width: 60px; height: 60px; background: #111; border: 1px solid var(--border-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; color: var(--accent-red); font-weight: 700; font-size: 20px; position: relative; transition: 0.3s; box-shadow: 0 0 20px rgba(0,0,0,0.5); }
.step-item:hover .step-num { background: var(--accent-red); color: #fff; box-shadow: 0 0 30px var(--accent-red); border-color: var(--accent-red); }
.step-line { position: absolute; top: 30px; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--border-light), transparent); z-index: 0; }

/* ==================== 8. 达人介绍 ==================== */
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.feature-img-box { position: relative; height: 500px; transform-style: preserve-3d; }
.feature-img-main { width: 85%; height: 90%; border-radius: 20px; overflow: hidden; position: absolute; top: 0; left: 0; border: 1px solid var(--border-light); background: url('/wp-content/uploads/2025/12/Gemini_Generated_Image_ngq1x2ngq1x2ngq1_cleanup.jpg') center/cover; transform: translateZ(10px); }
.feature-img-sub { width: 50%; height: 40%; border-radius: 15px; overflow: hidden; position: absolute; bottom: 0; right: 0; border: 1px solid var(--border-light); box-shadow: -20px -20px 40px rgba(0,0,0,0.8); background: url('/wp-content/uploads/2025/12/Gemini_Generated_Image_firazjfirazjfira_cleanup.jpg') center/cover; transition: 0.5s; transform: translateZ(30px); }
.feature-img-box:hover .feature-img-sub { transform: translateZ(50px) translateY(-20px) translateX(-20px); border-color: var(--accent-red); }

/* ==================== 9. 案例画廊 ==================== */
.gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.gallery-item { height: 380px; border-radius: 24px; overflow: hidden; position: relative; border: 1px solid var(--border-light); }
.gallery-img { width: 100%; height: 100%; transition: 0.8s; filter: grayscale(10%) brightness(0.6); }
.gallery-item:hover .gallery-img { transform: scale(1.1); filter: grayscale(0%) brightness(1); }
.gallery-text { position: absolute; bottom: 0; left: 0; width: 100%; padding: 40px; background: linear-gradient(to top, rgba(0,0,0,0.9), transparent); transform: translateY(20px); opacity: 0; transition: 0.4s; }
.gallery-item:hover .gallery-text { transform: translateY(0); opacity: 1; }
.tag { background: var(--accent-red); padding: 5px 12px; border-radius: 50px; font-size: 12px; font-weight: 700; margin-bottom: 10px; display: inline-block; box-shadow: 0 0 10px var(--accent-red); }

/* ==================== 10. 数据条 ==================== */
.tech-bar { background: rgba(255,255,255,0.02); border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); padding: 80px 0; backdrop-filter: blur(10px); }
.stats-wrapper { display: flex; justify-content: space-around; text-align: center; }
.stat-box h4 { margin: 0 !important; width: auto; line-height: 1; font-size: 56px; font-weight: 900; color: #fff; display: inline-block; background: linear-gradient(to bottom, #fff, #666); -webkit-background-clip: text; color: transparent; }

/* ==================== 11. 新闻/行业洞察 ==================== */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.news-card { background: var(--bg-card); border-radius: 20px; overflow: hidden; border: 1px solid var(--border-light); transition: 0.3s; display: flex; flex-direction: column; }
.news-card:hover { transform: translateY(-10px); border-color: var(--accent-red); box-shadow: 0 10px 40px rgba(255,36,66,0.15); }
.news-img { height: 220px; overflow: hidden; }
.news-img img { transition: 0.5s; }
.news-card:hover .news-img img { transform: scale(1.1); }
.news-content { padding: 30px; flex: 1; display: flex; flex-direction: column; }
.news-meta { font-size: 12px; color: var(--accent-red); margin-bottom: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.news-title { font-size: 20px; font-weight: 700; margin-bottom: 15px; color: #fff; line-height: 1.4; transition: 0.3s; }
.news-card:hover .news-title { color: var(--accent-red); text-shadow: 0 0 20px rgba(255,36,66,0.4); }
.news-excerpt { font-size: 14px; color: var(--text-gray); margin-bottom: 20px; flex: 1; line-height: 1.6; }
.news-link { font-size: 14px; font-weight: 600; color: #fff; display: inline-flex; align-items: center; gap: 5px; margin-top: auto; }
.news-link:hover { gap: 10px; color: var(--accent-red); }

/* ==================== 12. 联系我们 ==================== */
.contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: center; }
.contact-icon { width: 60px; height: 60px; background: rgba(255, 36, 66, 0.1); border-radius: 16px; display: flex; align-items: center; justify-content: center; color: var(--accent-red); font-size: 24px; flex-shrink: 0; transition: 0.3s; border: 1px solid transparent; }
.contact-item:hover .contact-icon { background: var(--accent-red); color: #fff; box-shadow: 0 0 20px var(--accent-red); }
.contact-qr-box { background: rgba(255,255,255,0.02); border: 1px solid var(--border-light); border-radius: 24px; padding: 50px; text-align: center; position: relative; transition: 0.4s; overflow: hidden; }
.contact-qr-box:hover { transform: translateY(-5px); border-color: var(--accent-red); box-shadow: 0 0 50px rgba(255,36,66,0.1); }
.qr-img-wrapper { width: 200px; height: 200px; background: #fff; margin: 0 auto 25px; padding: 10px; border-radius: 12px; overflow: hidden; }
.qr-img-wrapper img { width: 100%; height: 100%; object-fit: contain; }
.contact-qr-box::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: var(--accent-red); box-shadow: 0 0 20px var(--accent-red); opacity: 0.5; animation: scan 3s infinite linear; }
@keyframes scan { 0% { top: 0; } 100% { top: 100%; opacity: 0; } }

/* ==================== 13. FAQ ==================== */
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: flex-start; }
.faq-item { background: var(--bg-card); border-radius: 16px; overflow: hidden; border: 1px solid var(--border-light); transition: 0.3s; }
.faq-item:hover { border-color: var(--accent-red); box-shadow: 0 5px 20px rgba(0,0,0,0.2); }
.faq-summary { padding: 25px; cursor: pointer; font-weight: 600; font-size: 18px; display: flex; justify-content: space-between; align-items: center; list-style: none; }
.faq-summary::-webkit-details-marker { display: none; }
.faq-summary:after { content: '+'; font-size: 24px; color: var(--accent-red); transition: 0.3s; font-weight: 300; }
details[open] .faq-summary:after { content: '-'; transform: rotate(180deg); }
.faq-content { padding: 0 25px 30px; color: var(--text-gray); font-size: 15px; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 20px; line-height: 1.8; }

/* ==================== 14. Footer ==================== */
footer { padding: 50px 0; background: #020202; border-top: 1px solid var(--border-light); text-align: center; font-size: 13px; color: #666; position: relative; z-index: 2; }
.footer-beian { margin-top: 15px; }
.footer-beian a { color: #555; text-decoration: none; transition: 0.3s; border-bottom: 1px solid transparent; }
.footer-beian a:hover { color: var(--accent-red); border-color: var(--accent-red); }

/* ==================== 15. 列表页与分页补充样式 ==================== */
.pagination { margin-top: 60px; text-align: center; }
.nav-links { display: flex; justify-content: center; gap: 10px; } /* 覆盖默认nav-links样式 */
.pagination .page-numbers {
    display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center;
    border: 1px solid var(--border-light); border-radius: 50%; color: var(--text-gray);
    transition: 0.3s;
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover {
    background: var(--accent-red); color: #fff; border-color: var(--accent-red);
}
.pagination .next, .pagination .prev { width: auto; padding: 0 20px; border-radius: 50px; }

/* ==================== 16. 文章详情页排版 (Typography) ==================== */
.entry-content { color: #ccc; font-size: 18px; line-height: 1.8; }
.entry-content p { margin-bottom: 25px; }
.entry-content h2 { color: #fff; font-size: 28px; margin: 50px 0 25px; padding-left: 15px; border-left: 4px solid var(--accent-red); }
.entry-content h3 { color: #fff; font-size: 24px; margin: 40px 0 20px; }
.entry-content a { color: var(--accent-red); border-bottom: 1px solid rgba(255, 36, 66, 0.3); }
.entry-content a:hover { color: #fff; border-color: #fff; }
.entry-content ul, .entry-content ol { margin-bottom: 25px; padding-left: 20px; }
.entry-content li { margin-bottom: 10px; }
.entry-content blockquote {
    background: rgba(255,255,255,0.03);
    border-left: 4px solid var(--accent-red);
    margin: 40px 0; padding: 30px;
    font-style: italic; color: #fff;
    border-radius: 0 10px 10px 0;
}
.entry-content img { max-width: 100%; height: auto; border-radius: 10px; margin: 30px 0; }
.post-navigation a { color: var(--text-gray); font-weight: 700; transition: 0.3s; }
.post-navigation a:hover { color: var(--accent-red); }

/* ==================== 新增设计：Hero 图片（纯净能量屏版） ==================== */
.hero-visual .card-main {
    box-shadow: 
        0 0 50px rgba(255, 36, 66, 0.4), 
        inset 0 0 80px rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(255, 36, 66, 0.3);
    position: relative;
    overflow: hidden;
    border-radius: 16px; 
    filter: brightness(0.9); 
    transition: all 0.5s ease;
}
.hero-visual:hover .card-main {
    box-shadow: 
        0 0 80px rgba(255, 36, 66, 0.6), 
        inset 0 0 40px rgba(0, 0, 0, 0.6);
    filter: brightness(1.1);
    border-color: rgba(255, 36, 66, 0.8);
}
.hero-visual .card-main::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: 
        radial-gradient(circle at center, transparent 50%, rgba(0,0,0,0.6) 100%),
        repeating-linear-gradient(to bottom, transparent 0px, transparent 2px, rgba(0,0,0,0.1) 3px, rgba(0,0,0,0.1) 4px);
    z-index: 2;
    pointer-events: none;
    mix-blend-mode: soft-light; 
}
.card-float { z-index: 10; }

/* ==================== 新增：策略板块图片特效 ==================== */
.cyber-glitch-img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
    position: relative;
    z-index: 2;
    filter: brightness(0.9) contrast(1.1);
    transition: all 0.5s ease;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
.strategy-visual:hover .cyber-glitch-img {
    transform: translateY(-5px) scale(1.01); 
    filter: brightness(1.1) contrast(1.2);   
    box-shadow: 0 20px 60px rgba(255, 36, 66, 0.4); 
}
.glowing-border {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border: 1px solid rgba(255, 36, 66, 0.3); 
    border-radius: 16px;
    z-index: 1;
    transform: translate(10px, 10px); 
    transition: all 0.5s ease;
    pointer-events: none;
}
.strategy-visual:hover .glowing-border {
    transform: translate(0, 0);
    border-color: rgba(255, 36, 66, 0.8);
    box-shadow: inset 0 0 20px rgba(255, 36, 66, 0.2);
}

/* =========================================
   🚀 最终整合修复包 (Mobile Layout + Gallery Hover)
   包含：全局移动端排版修复 + 电脑/手机交互隔离
========================================= */
/* --- Part 1: 通用移动端排版修复 (针对所有手机屏幕) --- */
@media (max-width: 991px) {
    /* 1. 全局容器防溢出 */
    html, body { overflow-x: hidden !important; }
    
    /* 2. 强制单列布局：所有网格变成一竖排 */
    .hero-grid, .feature-grid, .cards-container, 
    .gallery-grid, .contact-grid, .steps-grid, 
    .faq-grid, .news-grid, .grid-3, .grid-4 { 
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
    }

    /* 3. 页面两侧留白 */
    .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
        width: 100% !important;
    }

    /* 4. 图片自适应 */
    img { max-width: 100% !important; height: auto !important; }

    /* 5. Footer 二维码修复 */
    .site-footer .grid-3 { display: flex !important; flex-direction: column !important; }
}

/* --- Part 2: 电脑端交互逻辑 (屏幕 > 992px) --- */
@media (min-width: 992px) {
    /* 电脑默认状态：隐藏黑条，文字下沉 */
    .gallery-text {
        opacity: 0 !important;
        transform: translateY(30px) !important;
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
        background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 100%) !important;
    }

    /* 电脑悬停状态：显示黑条，文字上浮 */
    .gallery-item:hover .gallery-text {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* --- Part 3: 手机端交互逻辑 (屏幕 < 991px) --- */
@media (max-width: 991px) {
    /* 1. 手机案例卡片：强制固定高度，不再用 auto */
    .gallery-item {
        display: block !important;
        width: 100% !important;
        height: 280px !important;  /* 【关键】强制给一个高度，防止压扁 */
        min-height: 280px !important;
        margin-bottom: 30px !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        position: relative !important; /* 确保子元素定位准确 */
        background-color: #1a1a1a !important; /* 万一图片没加载出来，有个背景色 */
    }

    /* 2. 手机图片：绝对定位撑满容器 */
    .gallery-item img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; /* 裁剪图片中间部分，不拉伸变形 */
    }

    /* 3. 手机默认状态：黑条常驻，文字一直显示 */
    .gallery-text {
        opacity: 1 !important;
        transform: translateY(0) !important;
        background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 100%) !important;
        padding: 15px 20px !important;
        bottom: 0 !important;
        position: absolute !important; /* 确保文字浮在图片上面 */
        z-index: 10 !important;
        width: 100% !important;
    }
    
    /* 4. 手机样式微调 */
    .gallery-text p { display: none !important; }
    .gallery-text h3 { 
        font-size: 16px !important; 
        margin-bottom: 5px !important; 
        color: #fff !important; 
    }
}

/* =========================================
   17. 移动端深度优化与修复 (包含防塌陷 + 极简瘦身)
   (Mobile Optimization: Fix Collapse & Reduce Bloat)
========================================= */
@media (max-width: 991px) {
    
    /* --- A. 头部导航栏瘦身 --- */
    nav {
        padding: 10px 0 !important; /* 减小导航栏厚度 */
        background: rgba(14, 14, 18, 0.95) !important; /* 增加背景不透明度，防止文字重叠干扰 */
    }
    .logo {
        font-size: 20px !important; /* Logo 稍微缩小 */
    }

    /* --- B. Hero 首屏去臃肿 --- */
    .hero {
        /* 顶部距离从 180px 大幅减小，内容上移 */
        padding-top: 100px !important; 
        padding-bottom: 40px !important;
    }
    
    /* 巨大的标题字号减小 */
    .glitch-text {
        font-size: 40px !important; /* 原 72px */
        margin-bottom: 5px !important;
    }
    /* 副标题 */
    .hero-text h1 {
        font-size: 26px !important; /* 原 48px */
        margin-bottom: 15px !important;
    }
    /* 描述文字 */
    .hero-text p {
        font-size: 15px !important;
        line-height: 1.5 !important;
        margin-bottom: 25px !important;
        padding-right: 0 !important;
    }
    
    /* 按钮让它并排显示，更省空间 */
    .hero-btns {
        flex-direction: row !important;
        gap: 10px !important;
    }
    .hero-btns a {
        flex: 1; /* 按钮宽度平分 */
        text-align: center;
        padding: 10px 0 !important;
        font-size: 14px !important;
    }

    /* --- C. 图片显示修复与瘦身 --- */
    /* 关键：强制赋予高度，解决“一条线”问题，同时减小高度更紧凑 */
    .hero-visual, .feature-img-box {
        height: 260px !important; /* 从之前的 360px 进一步减小 */
        min-height: 260px !important;
        width: 100% !important;
        margin-top: 20px !important;
        margin-bottom: 30px !important;
        display: block !important;
        perspective: none !important;
    }

    /* 内部的主图卡片 */
    .hero-visual .card-main, .feature-img-main {
        width: 100% !important; 
        height: 100% !important;
        background-size: cover !important;
        background-position: center center !important;
        left: 0 !important;
        transform: none !important;
    }
    
    /* 隐藏所有多余的浮动元素（数据卡片、叠加图），只留一张主图，极致简洁 */
    .card-float, .feature-img-sub {
        display: none !important; 
    }

    /* --- D. 全局板块间距压缩 --- */
    .section {
        padding: 50px 0 !important; /* 从 120px 减小到 50px */
    }
    .section-title {
        margin-bottom: 30px !important;
    }
    .section-title h2 {
        font-size: 28px !important;
    }

    /* --- E. 数据条 (Tech Bar) 改为 2列布局 --- */
    /* 原本是 1列，占地太长。现在改为 2行2列 */
    .stats-wrapper {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 20px !important;
    }
    .stat-box {
        margin-top: 0 !important;
    }
    .stat-box h4 {
        font-size: 32px !important;
    }
    .stat-box div[style*="font-size:13px"] {
        font-size: 12px !important;
        margin-top: 5px !important;
    }
}
/* =========================================
   18. 案例展示改版 (Gallery Update)
   (功能：文字常驻显示 + 悬停图片放大)
========================================= */

/* 1. 强制让文字一直显示 (无论电脑还是手机) */
.gallery-text {
    opacity: 1 !important;
    transform: translateY(0) !important;
    
    /* 调整背景渐变：因为文字常驻，需要深一点的底部阴影来保证文字清晰 */
    background: linear-gradient(to top, 
        rgba(0,0,0,0.9) 0%, 
        rgba(0,0,0,0.6) 40%, 
        transparent 100%
    ) !important;
    
    /* 稍微增加内边距，让文字位置更舒服 */
    padding: 30px !important;
}

/* 2. 鼠标悬停时的特效：图片放大 (Zoom Effect) */
.gallery-item:hover .gallery-img {
    /* 放大 1.1 倍 */
    transform: scale(1.15) !important; 
    
    /* 移除黑白滤镜(如果有)，并稍微变亮，增加通透感 */
    filter: grayscale(0%) brightness(1.1) !important; 
}

/* 3. 鼠标悬停时：外框发光 + 微微上浮 */
.gallery-item:hover {
    transform: translateY(-5px) !important; /* 卡片整体上浮 */
    border-color: var(--accent-red) !important; /* 边框变红 */
    box-shadow: 0 15px 40px rgba(255, 36, 66, 0.2) !important; /* 红色光晕 */
}

/* 4. 优化：让文字标题更大一点，更像封面杂志感 */
.gallery-text h3 {
    font-size: 22px !important;
    font-weight: 800 !important;
    margin-bottom: 8px !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.8); /* 增加文字阴影防背景干扰 */
}
/* ==================== 最终优化版：字号放大 + 平铺布局 ==================== */

/* --------------------------------------------------------
   1. PC端布局 (屏幕宽度 > 991px)
-------------------------------------------------------- */
@media (min-width: 992px) {
    
    /* 1. 隐藏手机版汉堡图标 */
    .mobile-toggle {
        display: none !important;
    }

    /* 2. 调整顶层容器 */
    .nav-inner {
        justify-content: flex-start !important;
        gap: 0 !important;
    }

    /* 3. 菜单条：平铺 + 撑满空间 */
    .nav-links {
        display: flex !important;
        flex-direction: row !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
        background: transparent !important;
        box-shadow: none !important;
        opacity: 1 !important;
        transform: none !important;
        
        flex: 1 !important;             /* 霸占剩余空间 */
        margin-left: 60px !important;   /* 离左边Logo远一点 */
        justify-content: space-between !important; /* 均匀平铺 */
        padding-right: 0 !important;
        align-items: center !important; /* 垂直居中 */
    }

    /* === 4. 关键修改：放大字体 === */
    .nav-links a {
        font-size: 16px !important;    /* 原来是14px，现在改大 */
        font-weight: 600 !important;   /* 稍微加粗一点，更显眼 */
        margin: 0 !important;
    }
    
    /* 同时也把那个红色按钮的字号同步变大，保持协调 */
    .btn-gradient {
        font-size: 16px !important;
        padding: 10px 30px !important; /* 按钮也稍微撑大一点点 */
    }

    /* 隐藏手机端特有的类，保留按钮显示 */
    .mobile-cta {
        display: inline-block !important;
    }
}

/* --------------------------------------------------------
   2. 移动端布局 (屏幕宽度 <= 991px)
   (保持之前的抽屉样式不变)
-------------------------------------------------------- */
@media (max-width: 991px) {
    
    .mobile-toggle {
        display: block !important;
        font-size: 24px;
        color: #fff;
        cursor: pointer;
        z-index: 2000;
        margin-left: auto;
    }

    .nav-links {
        position: fixed !important;
        top: 0 !important;
        right: -100% !important;
        width: 75% !important;
        height: 100vh !important;
        background: rgba(14, 14, 18, 0.98) !important;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 25px !important;
        
        transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
        border-left: 1px solid rgba(255,255,255,0.1);
        box-shadow: -10px 0 40px rgba(0,0,0,0.5) !important;
        z-index: 1500;
    }

    .nav-links.active {
        right: 0 !important;
    }

    .nav-links a {
        font-size: 18px !important;
        width: 100%;
        text-align: center;
        display: block;
        margin: 0 !important;
    }

    .mobile-cta {
        width: 80% !important;
        margin-top: 10px !important;
        padding: 12px 0;
        text-align: center;
    }
}
/* ==================== 隐藏移动端策略板块图片 ==================== */
@media (max-width: 991px) {
    .feature-img-box {
        display: none !important;
    }
}
/* ==================== 移动端：行业动态隐藏图片，仅显文字 ==================== */
@media (max-width: 991px) {
    
    /* 1. 隐藏文章封面图 */
    .news-img {
        display: none !important;
    }

    /* 2. 微调文字容器的内边距，让它看起来不像卡片，更像一个干净的列表 */
    .news-content {
        padding: 20px 15px !important; /*稍微减小一点边距 */
        min-height: auto !important;   /* 取消最小高度限制，让它自适应 */
    }

    /* 3. (可选) 如果你觉得摘要文字也太长占地，想把它也藏掉只留标题，把下面这行的注释取消掉 */
    /* .news-excerpt { display: none !important; } */
}