:root {
            /* 默认白天模式（极简轻奢白） */
            --bg-body: #fafafa;
            --bg-header: rgba(255, 255, 255, 0.85);
            --bg-card: #ffffff;
            --bg-card-hover: #ffffff;
            --bg-section-alt: #f1f5f9;
            --bg-scenario: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
            --bg-step: #ffffff;
            
            --text-main: #334155;
            --text-muted: #64748b;
            --text-title: #0f172a;
            --text-subtitle: #94a3b8;
            --border-color: rgba(0, 0, 0, 0.06);
            --border-card-hover: rgba(67, 100, 247, 0.4); 
            
            --hero-gradient: radial-gradient(circle at 50% 20%, rgba(67, 100, 247, 0.06) 0%, rgba(250, 250, 250, 0) 60%);
        }

        [data-theme="dark"] {
            /* 切换为黑夜模式（暗黑科技风） */
            --bg-body: #030712;
            --bg-header: rgba(3, 7, 18, 0.75);
            --bg-card: rgba(17, 24, 39, 0.6);
            --bg-card-hover: rgba(17, 24, 39, 0.9);
            --bg-section-alt: #090d16;
            --bg-scenario: linear-gradient(180deg, rgba(30, 41, 59, 0.4) 0%, rgba(15, 23, 42, 0.4) 100%);
            --bg-step: rgba(30, 41, 59, 0.3);
            
            --text-main: #f3f4f6;
            --text-muted: #9ca3af;
            --text-title: #ffffff;
            --text-subtitle: #6b7280;
            --border-color: rgba(255, 255, 255, 0.05);
            --border-card-hover: rgba(59, 130, 246, 0.5);
            
            --hero-gradient: radial-gradient(circle at 50% 20%, rgba(67, 100, 247, 0.12) 0%, rgba(3, 7, 18, 0) 50%);
        }

        /* 基础重置 - 包含丝滑的颜色过渡 */
        * { margin: 0; padding: 0; box-sizing: border-box; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; }
        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Microsoft Yahei", sans-serif; background-color: var(--bg-body); color: var(--text-main); line-height: 1.65; overflow-x: hidden; }
        a { text-decoration: none; color: #2563eb; } 
        a:hover { color: #1d4ed8; }
        .container { width: 92%; max-width: 1200px; margin: 0 auto; }
        
        /* 导航栏 */
        header { background: var(--bg-header); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 1000; border-bottom: 1px solid var(--border-color); }
        .nav-box { display: flex; justify-content: space-between; align-items: center; height: 80px; }
        
        /* 流体蓝色字体核心特效 (Liquid Cyber Blue Effect) */
        .liquid-blue {
            background: linear-gradient(90deg, #0052d4 0%, #4364f7 25%, #6fb1fc 50%, #4364f7 75%, #0052d4 100%);
            background-size: 200% auto;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-weight: 800;
            animation: shine 4s linear infinite;
            display: inline-block;
        }
        @keyframes shine { to { background-position: 200% center; } }

        .logo { font-size: 24px; font-weight: 800; color: var(--text-title); }
        .logo .blue-logo { font-style: normal; }
        .right-menu { display: flex; align-items: center; gap: 25px; }
        nav ul { display: flex; list-style: none; }
        nav ul li { margin-left: 35px; }
        nav ul li a { color: var(--text-muted); font-size: 15px; font-weight: 500; }
        nav ul li a:hover { color: var(--text-title); }

        .theme-toggle-btn {
            background: var(--bg-step); border: 1px solid var(--border-color); color: var(--text-title);
            padding: 8px 14px; border-radius: 20px; cursor: pointer; font-size: 14px; font-weight: 600;
            display: flex; align-items: center; gap: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.02);
        }
        .theme-toggle-btn:hover { border-color: #4364f7; }

        /* 首屏 Hero */
        .hero { padding: 120px 0 90px; text-align: center; background: var(--hero-gradient); }
        .hero .badge { display: inline-block; background: rgba(67, 100, 247, 0.06); border: 1px solid rgba(67, 100, 247, 0.25); color: #2563eb; padding: 6px 16px; border-radius: 20px; font-size: 13px; font-weight: 600; margin-bottom: 25px; letter-spacing: 1px; }
        .hero h1 { font-size: 50px; color: var(--text-title); line-height: 1.3; margin-bottom: 25px; font-weight: 900; letter-spacing: -1px; }
        .hero p { font-size: 18px; color: var(--text-muted); max-width: 850px; margin: 0 auto 45px; font-weight: 400; }
        
        .btn-group { display: flex; justify-content: center; gap: 20px; }
        .btn { display: inline-block; padding: 15px 38px; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; text-align: center; }
        .btn-primary { background: linear-gradient(135deg, #0052d4 0%, #4364f7 100%); color: #fff; box-shadow: 0 4px 20px rgba(67, 100, 247, 0.25); }
        .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(67, 100, 247, 0.35); }
        .btn-secondary { border: 1px solid var(--border-color); color: var(--text-title); background: rgba(0,0,0,0.01); }
        .btn-secondary:hover { background: rgba(0,0,0,0.04); border-color: #4364f7; }

        /* 通用区块头 */
        .section-header { text-align: center; margin-bottom: 60px; }
        .section-title { font-size: 36px; color: var(--text-title); font-weight: 800; margin-bottom: 15px; letter-spacing: -0.5px; }
        .section-subtitle { color: var(--text-subtitle); font-size: 16px; max-width: 700px; margin: 0 auto; line-height: 1.6; }

        /* -----------------------------------------
           新引入：系统价格卡片区（参照 image_214db9.jpg）
           ----------------------------------------- */
        .pricing { padding: 90px 0; background-color: var(--bg-body); position: relative; }
        .grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
        .pricing-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.02); transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; }
        .pricing-card:hover { transform: translateY(-6px); box-shadow: 0 15px 35px rgba(0,0,0,0.08); }
        
        /* 头部彩卡区，根据图片精准定义 */
        .p-head { padding: 25px 24px; color: #ffffff; text-align: left; position: relative; }
        .p-head h3 { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
        .p-head p { font-size: 13px; opacity: 0.85; }
        
        /* 图片四色标志提取 */
        .pricing-card.c-blue-light .p-head { background: linear-gradient(135deg, #3ca7ec 0%, #3189cb 100%); }
        .pricing-card.c-blue-dark .p-head { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); }
        .pricing-card.c-purple .p-head { background: linear-gradient(135deg, #9333ea 0%, #7e22ce 100%); }
        .pricing-card.c-red .p-head { background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); }

        /* 暗黑模式下彩色头部的微调 */
        [data-theme="dark"] .p-head { opacity: 0.9; }

        /* 价格区域 */
        .p-body { padding: 35px 24px 25px; text-align: center; flex: 1; display: flex; flex-direction: column; }
        .p-price { font-size: 38px; font-weight: 800; color: var(--text-title); margin-bottom: 30px; display: flex; justify-content: center; align-items: baseline; }
        .p-price span { font-size: 22px; font-weight: 500; margin-right: 2px; }
        
        /* 核心配置项列表 */
        .p-features { list-style: none; text-align: left; margin-bottom: 35px; }
        .p-features li { font-size: 14px; color: var(--text-main); margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
        .p-features li .p-icon { color: #2563eb; font-weight: bold; width: 16px; text-align: center; }
        
        /* 立即选购按钮 */
        .p-btn { width: 100%; padding: 13px 0; border-radius: 8px; font-size: 15px; font-weight: 600; border: none; cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 8px; color: #ffffff; transition: opacity 0.2s ease; }
        .p-btn:hover { opacity: 0.9; }
        
        /* 按钮颜色匹配大底 */
        .pricing-card.c-blue-light .p-btn { background: #3ca7ec; }
        .pricing-card.c-blue-dark .p-btn { background: #2563eb; }
        .pricing-card.c-purple .p-btn { background: #9333ea; }
        .pricing-card.c-red .p-btn { background: #dc2626; }

        /* -----------------------------------------
           栏目一：系统特征区 (Features)
           ----------------------------------------- */
        .features { padding: 90px 0; background-color: var(--bg-section-alt); position: relative; }
        .features::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(to right, transparent, var(--border-color), transparent); }
        .features .grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; }
        .feature-card { background: var(--bg-card); border: 1px solid var(--border-color); padding: 40px 30px; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.01); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.4s ease; }
        .feature-card:hover { transform: translateY(-6px); border-color: var(--border-card-hover); background: var(--bg-card-hover); box-shadow: 0 15px 35px rgba(67, 100, 247, 0.08); }
        .feature-card .icon-wrap { width: 56px; height: 56px; background: rgba(67, 100, 247, 0.06); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #2563eb; margin-bottom: 25px; border: 1px solid rgba(67, 100, 247, 0.15); transition: transform 0.3s ease; }
        .feature-card:hover .icon-wrap { transform: scale(1.05) rotate(3deg); }
        .feature-card h3 { font-size: 21px; color: var(--text-title); margin-bottom: 15px; font-weight: 700; letter-spacing: -0.3px; }
        .feature-card p { color: var(--text-muted); font-size: 14px; line-height: 1.6; }

        /* -----------------------------------------
           栏目二：多场景方案区 (Scenarios)
           ----------------------------------------- */
        .scenarios { padding: 90px 0; background-color: var(--bg-body); }
        .scenarios .grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 40px; }
        .scenario-box { background: var(--bg-scenario); border: 1px solid var(--border-color); border-radius: 16px; padding: 40px; box-shadow: 0 4px 15px rgba(0,0,0,0.01); }
        .scenario-box h4 { font-size: 21px; color: var(--text-title); margin-bottom: 20px; display: flex; align-items: center; gap: 10px; font-weight: 700; }
        .scenario-box h4::before { content: ''; width: 4px; height: 18px; background: #4364f7; display: inline-block; border-radius: 2px; }
        .scenario-box ul { list-style: none; }
        .scenario-box ul li { color: var(--text-muted); font-size: 14px; margin-bottom: 14px; display: flex; align-items: flex-start; gap: 8px; line-height: 1.6; }
        .scenario-box ul li strong { color: var(--text-title); font-weight: 600; }
        .scenario-box ul li::before { content: "✓"; color: #2563eb; font-weight: bold; }

        /* -----------------------------------------
           栏目三：部署技术区 (Workflow)
           ----------------------------------------- */
        .workflow { padding: 90px 0; background-color: var(--bg-section-alt); }
        .step-container { display: flex; flex-direction: column; gap: 25px; max-width: 1000px; margin: 0 auto; }
        .step-card { display: flex; background: var(--bg-step); border: 1px solid var(--border-color); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.01); transition: border-color 0.3s ease; }
        .step-card:hover { border-color: var(--border-card-hover); }
        .step-index { background: linear-gradient(135deg, #0052d4 0%, #4364f7 100%); color: #fff; font-size: 38px; font-weight: 900; width: 90px; display: flex; align-items: center; justify-content: center; font-style: italic; }
        .step-detail { padding: 30px 35px; flex: 1; }
        .step-detail h4 { font-size: 20px; color: var(--text-title); margin-bottom: 10px; font-weight: 700; }
        .step-detail p { color: var(--text-muted); font-size: 14px; line-height: 1.6; }

        /* -----------------------------------------
           栏目四：常见答疑区 (FAQ)
           ----------------------------------------- */
        .faq { padding: 90px 0; background-color: var(--bg-body); }
        .faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(480px, 1fr)); gap: 30px; }
        .faq-card { background: var(--bg-card); border: 1px solid var(--border-color); padding: 30px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.01); }
        .faq-card h3 { font-size: 17px; color: var(--text-title); margin-bottom: 15px; display: flex; gap: 10px; font-weight: 700; line-height: 1.4; }
        .faq-card h3::before { content: "Q:"; color: #4364f7; font-weight: bold; }
        .faq-card p { color: var(--text-muted); font-size: 14px; line-height: 1.65; padding-left: 24px; border-left: 1px solid var(--border-color); }

        .cta { padding: 90px 0; text-align: center; background: linear-gradient(180deg, var(--bg-body) 0%, var(--bg-section-alt) 100%); border-top: 1px solid var(--border-color); }
        .cta h2 { font-size: 34px; color: var(--text-title); margin-bottom: 20px; font-weight: 800; }
        .cta p { color: var(--text-muted); margin-bottom: 40px; font-size: 16px; }

        footer { background: var(--bg-body); border-top: 1px solid var(--border-color); padding: 70px 0 40px; color: var(--text-subtitle); font-size: 14px; }
        .footer-grid { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 50px; margin-bottom: 50px; }
        .footer-desc { flex: 1.5; min-width: 300px; }
        .footer-desc p { color: var(--text-muted); margin-top: 15px; line-height: 1.6; }
        .footer-links { flex: 1; min-width: 140px; }
        .footer-links h5 { color: var(--text-title); font-size: 15px; margin-bottom: 20px; font-weight: 600; }
        .footer-links ul { list-style: none; }
        .footer-links ul li { margin-bottom: 12px; }
        .footer-links ul li a { color: var(--text-subtitle); font-size: 14px; }
        .footer-links ul li a:hover { color: var(--text-title); }
        .copyright { text-align: center; padding-top: 40px; border-top: 1px solid var(--border-color); color: var(--text-subtitle); }

        /* ==========================================================================
           3. 移动端自适应完美适配
           ========================================================================== */
        @media (max-width: 992px) {
            .faq-grid { grid-template-columns: 1fr; }
        }
        @media (max-width: 768px) {
            .nav-box { flex-direction: column; height: auto; padding: 15px 0; gap: 15px; }
            .right-menu { flex-direction: column; gap: 12px; width: 100%; }
            nav ul { width: 100%; justify-content: center; }
            nav ul li { margin: 0 10px; }
            
            .hero { padding: 80px 0 60px; }
            .hero h1 { font-size: 32px; line-height: 1.3; }
            .hero p { font-size: 15px; margin-bottom: 30px; }
            .btn-group { flex-direction: column; gap: 12px; padding: 0 20px; }
            .btn { width: 100%; padding: 13px 0; }
            
            .section-header { margin-bottom: 40px; }
            .section-title { font-size: 26px; }
            .grid-4, .features .grid-3, .scenarios .grid-2 { grid-template-columns: 1fr; gap: 20px; }
            .feature-card, .scenario-box { padding: 30px 20px; }
            
            .step-card { flex-direction: column; }
            .step-index { width: 100%; height: 50px; font-size: 26px; }
            .step-detail { padding: 20px; }
        }