/* ------------------- 颜色变量更新 ------------------- */
        :root {
            --primary-orange: #FF8C00;    
            --deep-orange: #CC6600;       
            --dark-text-color: #333;      
            --white-glow: #ffffff;        
            --pain-red: #E74C3C;          
            --gain-green: #2ECC71;        
            --cube-color: rgba(255, 170, 0, 0.2); 
            --transparent-bg: rgba(255, 255, 255, 0); 
            --tech-orange-start: #FFD700; 
            --tech-orange-mid: #ffd200;   
            --tech-orange-end: #ffa800;   
            --tech-orange-glow: rgba(255, 215, 0, 0.6); 
        }
        
        /* ------------------- Banner 容器 ------------------- */
        .banner-container {
            position: relative;
            z-index: 10; 
            width: 100%; 
            height:600px; 
            overflow: hidden;
            
            background-color: #ffe6c7; 
            
            /* 注意：背景图路径 '/image/banner.png' 需替换为实际图片路径 */
            background: url('../img/banner.png') no-repeat center top / cover #fffdf3; 
        }

        /* Canvas 用于绘制动态效果 */
        #circuit-board-canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 11; 
            
            background: transparent; 
            backdrop-filter: none; 
        }
        
        /* ------------------- THREE.JS 容器样式 【相对于1280px容器定位】 ------------------- */
        #three-cube-container {
            position: absolute;
            
            /* 容器尺寸：600px x 600px */
            width: 600px;
            height: 600px;
            
            /* 相对于1280px的banner-content容器定位 */
            top: 65%; /* 垂直居中 */
            right: 300px; /* 距离banner-content右侧0px */
            
            /* 垂直居中调整 */
            transform: translateY(-50%);
            
            z-index: 12; /* 降低层级，使其显示在背景图片之下 */
            opacity: 0.9; 
            pointer-events: auto; /* 修改为auto，允许鼠标事件触发 */
            
            border: none;
        }

        /* ------------------- 内容层 (居中布局核心) ------------------- */
        .banner-content-wrapper {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 15; 
        }
        
        /* 居中内容容器 */
        .banner-content {
            width: 1280px; 
            height: 100%;
            margin: 0 auto; 
            display: flex;
            flex-direction: column;
            /*justify-content: center;*/
            align-items: flex-start; 
            
            /* 添加相对定位，使内部绝对定位元素能相对于此容器定位 */
            position: relative;
            
            padding-left: 0; 
            box-sizing: border-box;
            
            color: var(--dark-text-color); 
        }
        /* 背景容器*/
        .baner-Imgbackground{
            width:900px;
            height:592px;
            overflow: hidden;
            background: url('../img/sucai.png') no-repeat bottom ; 
            position: absolute;
            right: 0px;
            bottom: 0px;
            z-index: 14; /* 设置比three-cube-container更高的层级，使背景在正方体之上 */
        }
        /* ------------------- 文本样式 (保持不变) ------------------- */
        .main-title {
            font-size: 2.8em;
            font-weight: 900; 
            color: #000000; 
            margin-bottom: 5px;
            
            white-space: nowrap;
            overflow: hidden;
            letter-spacing: 0.08em; 
            
            opacity: 0; 
            animation: fadeIn 1s ease-out 0.5s forwards; 
        }
        
        .subtitle {
            font-size: 1.2em;
            color: var(--dark-text-color); 
            opacity: 0; 
            animation: fadeIn 1s ease-out 3s forwards; 
            margin-bottom: 30px;
            position: relative; 
            
            text-shadow: 0 0 5px rgba(255, 140, 0, 0.5); 
        }

        .subtitle::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -15px; 
            width: 100%; 
            height: 2px;
            
            background: linear-gradient(to right, 
                                        var(--primary-orange), 
                                        rgba(255, 140, 0, 0.5), 
                                        transparent);
            opacity: 0;
            animation: fadeIn 1s ease-out 3.5s forwards; 
            box-shadow: 0 0 10px var(--primary-orange); 
        }
        
        @keyframes fadeIn {
            to { opacity: 1; }
        }

        /* ------------------- 列表和按钮样式 (保持不变) ------------------- */
        .feature-list {
            display: flex;
            text-align: left;
            margin-bottom: 30px;
            opacity: 0;
            animation: fadeIn 1.5s ease-out 3.5s forwards; 
            color: var(--dark-text-color); 
            gap: 60px; 
        }

        .feature-list > div {
            line-height: 1.8;
        }
        .feature-list h3 {
            font-size: 1.1em;
            color: var(--primary-orange); 
            border-left: 3px solid var(--primary-orange);
            padding-left: 8px;
            margin-top: 0;
            font-weight: 700;
        }
        
        .feature-list li {
            list-style: none;
            position: relative;
            font-size: 0.9em;
            padding: 8px 15px 8px 30px; 
            margin-bottom: 10px;
            border-radius: 4px;
            overflow: hidden; 
            cursor: pointer;
            transition: all 0.3s ease-in-out; 
            z-index: 1; 
        }
        
        .feature-list li {
            z-index: 2; 
        }

        .feature-list .pain-points li {
            background-color: var(--transparent-bg); 
            box-shadow: none; 
            border: 1px solid rgba(0, 0, 0, 0.1); 
            transition: all 0.3s; 
        }
        
        .feature-list .pain-points li:hover,
        .feature-list .pain-points li.linked-hover { /* 联动样式 */
            background-color: rgba(255, 140, 0, 0.1); 
            border-color: var(--primary-orange); 
            box-shadow: 0 0 5px rgba(255, 140, 0, 0.4); 
            font-weight: 500;
        }

        .feature-list .empowerment li {
            background-color: var(--transparent-bg); 
            border: 1px solid rgba(0, 0, 0, 0.1); 
            box-shadow: none;
            transition: all 0.4s ease;
        }
        
        .feature-list .empowerment li::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 0; 
            z-index: -1; 
            background: linear-gradient(
                to top, 
                var(--tech-orange-end) 0%,     
                var(--tech-orange-mid) 50%,    
                rgba(255, 215, 0, 1) 80%,    
                transparent 100% 
            );
            
            transition: height 0.4s ease-out;
            border-radius: 4px; 
            box-shadow: inset 0 0 15px rgba(255, 215, 0, 0.3); 
        }
        
        .feature-list .empowerment li.hovered::after,
        .feature-list .empowerment li:hover::after,
        .feature-list .empowerment li.linked-hover::after { 
            height: 100%; 
        }

        .feature-list .empowerment li.hovered,
        .feature-list .empowerment li:hover,
        .feature-list .empowerment li.linked-hover { 
            box-shadow: 0 5px 20px var(--tech-orange-glow); 
            border-color: var(--tech-orange-end); 
            background-color: transparent; 
            color: #c66200; 
        }
        .feature-list .empowerment li:hover .empowerment-icon::before,
        .feature-list .empowerment li.linked-hover .empowerment-icon::before { 
            color: white; 
            text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
        }

        .pain-point-icon, .empowerment-icon {
            position: absolute;
            left: 5px; 
            top: 50%;
            transform: translateY(-50%);
            width: 18px;
            height: 18px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 3; 
        }
        .pain-point-icon {
            background-color: var(--pain-red);
            box-shadow: 0 0 5px rgba(231, 76, 60, 0.5); 
        }
        .pain-point-icon::before, .pain-point-icon::after {
            content: '';
            position: absolute;
            background-color: white;
            opacity: 0.9;
        }
        .pain-point-icon::before { width: 2px; height: 12px; transform: rotate(45deg); }
        .pain-point-icon::after { width: 2px; height: 12px; transform: rotate(-45deg); }
        .empowerment-icon {
            background-color: var(--gain-green);
            box-shadow: 0 0 5px rgba(46, 204, 113, 0.5); 
        }
        .empowerment-icon::before {
            content: '✓';
            color: white;
            font-size: 12px;
            font-weight: 900;
            line-height: 1; 
            text-shadow: 0 0 3px rgba(255, 255, 255, 0.8); 
        }
        
        .water-button {
            position: relative;
            padding: 12px 35px; 
            font-size: 1.1em;
            color: var(--deep-orange); 
            background: transparent;
            border: 2px solid var(--primary-orange); 
            text-decoration: none;
            overflow: hidden; 
            transition: all 0.4s ease-in-out, transform 0.2s ease-out; 
            z-index: 15;
            cursor: pointer;
            font-weight: 500;
            border-radius: 5px;
            box-shadow: 0 5px 15px rgba(255, 140, 0, 0.4); 
            opacity: 0;
            animation: fadeIn 1s ease-out 4s forwards; 
            margin-top:-20px
        }
        .water-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -2px; 
            width: calc(100% + 4px); 
            height: 100%;
            background: var(--primary-orange); 
            transform: translateY(100%); 
            transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1); 
            z-index: -1;
        }
        .water-button:hover {
            color: #ffffff; 
            border-color: var(--deep-orange);
            transform: translateY(-2px) scale(1.02); 
            box-shadow: 0 8px 20px rgba(255, 140, 0, 0.6); 
        }
        .water-button:hover::before {
            transform: translateY(0); 
        }
        
        .visual-decoration {
            position: absolute;
            right: 0%; 
            top: 50%;
            transform: translateY(-50%);
            width: 450px; 
            height: 450px; 
            z-index: 0; 
            background: radial-gradient(circle at center, rgba(255, 140, 0, 0.3) 0%, rgba(255, 140, 0, 0.1) 50%, transparent 70%); 
            border-radius: 50%; 
        }
        .visual-decoration::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            border: 1px solid rgba(255, 140, 0, 0.5); 
            border-radius: 50%;
            animation: pulse 4s infinite ease-out; 
        }
        @keyframes pulse {
            0% { transform: scale(0.8); opacity: 0.5; }
            50% { transform: scale(1.05); opacity: 0.2; }
            100% { transform: scale(0.8); opacity: 0.5; }
        }