:root {
            --primary: #c026d3;
            --secondary: #00f2ff;
            --bg: #020205;
            --card-bg: #0a0a0f;
            --text: #f8fafc;
        }
@media (max-width: 768px) {
    .hero-grid {
        flex-direction: column; /* 手机端竖着排 */
        text-align: center;
    }
    .slider-box {
        width: 100%;
        margin-top: 30px;
    }
}
        * { margin: 0; padding: 0; box-sizing: border-box; scroll-behavior: smooth; }
        body { background: var(--bg); color: var(--text); font-family: "PingFang SC", "Microsoft YaHei", sans-serif; overflow-x: hidden; }
        .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

        /* --- 导航栏 --- */
        nav { 
            position: fixed; top: 0; width: 100%; z-index: 1000;
            background: rgba(2, 2, 5, 0.95); backdrop-filter: blur(15px);
            border-bottom: 1px solid rgba(192, 38, 211, 0.2);
            padding: 15px 0;
        }
        .nav-content { display: flex; justify-content: space-between; align-items: center; }
        .logo { font-size: 24px; font-weight: 900; color: #fff; text-decoration: none; font-style: italic; }
        .logo span { color: var(--primary); }
        .nav-links { display: flex; gap: 20px; }
        .nav-links a { text-decoration: none; color: #94a3b8; font-weight: bold; font-size: 13px; transition: 0.3s; }
        .nav-links a:hover { color: var(--primary); }

        /* --- 首页 Hero 区 --- */
        .hero { padding: 140px 0 60px; min-height: 70vh; display: flex; align-items: center; }
        .hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
        .hero-text h1 { font-size: 54px; line-height: 1.1; margin-bottom: 25px; }
        .hero-text h1 span { color: var(--primary); text-shadow: 0 0 20px rgba(217, 70, 239, 0.5); }
        .hero-text p { color: #94a3b8; font-size: 18px; line-height: 1.8; margin-bottom: 35px; }

        /* 按钮组优化：手机端自动纵向堆叠 */
        .hero-btns { display: flex; gap: 15px; flex-wrap: wrap; }

        .slider-box { 
            width: 100%; height: 380px; border-radius: 20px; overflow: hidden; 
            border: 1px solid rgba(255,255,255,0.1); position: relative;
        }
        .slides { display: flex; width: 300%; height: 100%; animation: slideX 12s infinite; }
        .slides img { width: 33.333%; height: 100%; object-fit: cover; }
        @keyframes slideX { 0%, 30% { transform: translateX(0); } 33%, 63% { transform: translateX(-33.33%); } 66%, 96% { transform: translateX(-66.66%); } 100% { transform: translateX(0); } }

        /* --- 核心功能详解 (全内容版) --- */
        #features { padding: 80px 0; background: #05050a; }
        .section-title { text-align: center; margin-bottom: 50px; }
        .section-title h2 { font-size: 32px; color: #fff; position: relative; display: inline-block; padding-bottom: 10px; }
        .section-title h2::after { content: ""; position: absolute; bottom: 0; left: 10%; width: 80%; height: 3px; background: var(--primary); }
        
        .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
        .feature-card { background: var(--card-bg); padding: 30px; border-radius: 15px; border: 1px solid rgba(255,255,255,0.03); transition: 0.3s; }
        .feature-card:hover { border-color: var(--primary); transform: translateY(-5px); }
        .feature-card h3 { color: var(--primary); margin-bottom: 12px; font-size: 20px; }
        .feature-card p { color: #94a3b8; font-size: 14px; line-height: 1.7; margin-bottom: 15px; }
        .feature-card ul { list-style: none; color: #475569; font-size: 12px; line-height: 1.8; }
        .feature-card ul li span { color: var(--secondary); font-weight: bold; }

        /* --- 内核注入实时监控 (丰富版) --- */
        #inject { padding: 80px 0; border-top: 1px solid rgba(255,255,255,0.03); }
        .inject-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
        .inject-info h2 { font-size: 28px; color: var(--secondary); margin-bottom: 20px; }
        .inject-info p { color: #94a3b8; line-height: 1.8; margin-bottom: 15px; }
        
        .code-window { 
            background: #000; border: 1px solid var(--secondary); border-radius: 12px; height: 320px; 
            overflow: hidden; padding: 25px; font-family: monospace; font-size: 13px; color: #10b981;
            position: relative;
        }
        .code-window::before { content: "● 核心内核底层注入监控系统 v4.2.0"; position: absolute; top:0; left:0; width:100%; background: rgba(0,242,255,0.1); padding: 8px 20px; font-size: 12px; color: var(--secondary); z-index: 10; }
        .code-run { margin-top: 25px; animation: codeMove 15s linear infinite; }
        @keyframes codeMove { 0% { transform: translateY(0); } 100% { transform: translateY(-60%); } }

        /* --- 版本对比表 (全内容版) --- */
        #compare { padding: 80px 0; background: #05050a; }
        .table-box { width: 100%; overflow-x: auto; border-radius: 15px; border: 1px solid rgba(255,255,255,0.05); }
        table { width: 100%; border-collapse: collapse; background: var(--card-bg); min-width: 800px; }
        th, td { padding: 20px; text-align: center; border: 1px solid rgba(255,255,255,0.02); }
        th { background: #11111a; color: var(--primary); font-size: 16px; }
        .highlight { color: var(--secondary); font-weight: bold; }

        /* --- 支持设备 (丰富版) --- */
        #platforms { padding: 80px 0; background: #020205; }
        .plat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }
        .plat-card { background: var(--card-bg); padding: 35px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.03); }
        .plat-card h3 { color: var(--primary); margin-bottom: 15px; text-align: center; border-bottom: 1px solid #1a1a20; padding-bottom: 10px; }
        .plat-card ul { list-style: none; color: #94a3b8; font-size: 14px; line-height: 2.2; }
        .plat-card ul li::before { content: "✓"; color: var(--primary); margin-right: 10px; font-weight: bold; }

        /* --- 部署指引 --- */
        #setup { padding: 80px 0; background: #05050a; }
        .setup-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
        .step-card { position: relative; padding: 30px; background: rgba(255,255,255,0.02); border-radius: 15px; border-left: 4px solid var(--secondary); }
        .step-num { position: absolute; top: -15px; right: 20px; font-size: 40px; font-weight: 900; color: rgba(0,242,255,0.05); }
        .step-card h4 { color: #fff; margin-bottom: 10px; font-size: 18px; }
        .step-card ol { padding-left: 20px; color: #64748b; font-size: 13px; line-height: 1.8; }

        /* --- 协议说明与免责声明 (全内容版) --- */
        footer { background: #000; padding: 60px 0 30px; border-top: 1px solid rgba(192, 38, 211, 0.2); }
        .footer-flex { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 40px; }
        .disclaimer { background: #07070a; padding: 30px; border-radius: 12px; font-size: 12px; color: #475569; line-height: 2.2; text-align: justify; border: 1px solid rgba(255,255,255,0.03); }
        .disclaimer h5 { color: #94a3b8; margin-bottom: 10px; font-size: 14px; border-bottom: 1px solid #111; display: inline-block; }

        .btn { padding: 15px 35px; border-radius: 8px; font-weight: 900; text-decoration: none; display: inline-block; transition: 0.3s; font-size: 14px; text-align: center; cursor: pointer; }
        .btn-main { background: var(--primary); color: #fff; box-shadow: 0 10px 20px rgba(192, 38, 211, 0.2); }

        /* 响应式适配 */
        @media (max-width: 968px) {
            .hero-grid, .inject-grid, .plat-grid, .setup-grid, .feature-grid { grid-template-columns: 1fr; }
            .nav-links { display: none; }
            .hero-btns { flex-direction: column; }
            .hero-btns .btn { width: 100%; }
            .hero-text h1 { font-size: 36px; }
            .hero-text { text-align: center; }
            .hero-btns { justify-content: center; }
        }
        /* ===== 轮播图核心样式 - 严格参考原网站尺寸 ===== */
.banner-image {
    flex: 1;
    display: flex;
    align-items: flex-start;
    margin-top: 50px;
    overflow: hidden; /* 必须隐藏超出部分 */
}

.slider-wrapper {
    width: 100%;
    border-radius: var(--radius); /* 使用你定义的 12px */
    overflow: hidden;
    position: relative;
    background: #000;
}

.slider-track {
    display: flex;
    width: 300%; /* 三张图，所以是 300% */
    animation: bannerSlide 12s infinite ease-in-out;
}

.slider-track img {
    width: 33.3333%; /* 每张图占 track 的三分之一，即容器的 100% */
    display: block;
    object-fit: cover;
}

/* 轮播动画：0-30%看第一张，33-63%看第二张... */
@keyframes bannerSlide {
    0%, 30% { transform: translateX(0); }
    33%, 63% { transform: translateX(-33.3333%); }
    66%, 96% { transform: translateX(-66.6666%); }
    100% { transform: translateX(0); }
}

/* ===== 响应式适配 - 对齐你提供的 1024px 逻辑 ===== */
@media (max-width: 1024px) {
    .banner-image {
        width: 100vw !important;
        margin-left: 0 !important;
        margin-top: 20px !important;
        transform: none !important;
    }
    
    .slider-wrapper {
        border-radius: 0; /* 手机端图片通常填满屏幕边框 */
    }

    .slider-track img {
        width: 33.3333%;
        height: auto; /* 手机端高度自适应，或改为 50vh 等固定高度 */
        object-fit: cover;
    }
}