/* ===== Banner 底色调美化 ===== */

/* 首页 Hero - 蓝紫渐变 */
.hero {
    background: linear-gradient(180deg, 
        #f0f9ff 0%, 
        #e0f2fe 20%, 
        #eef2ff 40%, 
        #faf5ff 60%, 
        #fff1f2 80%, 
        #ffffff 100%
    );
    position: relative;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: -10%;
    width: 50%;
    height: 100%;
    background: radial-gradient(ellipse, rgba(102, 126, 234, 0.08) 0%, transparent 60%);
    filter: blur(60px);
    animation: color-shift 20s ease-in-out infinite;
}

.hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: -10%;
    width: 60%;
    height: 80%;
    background: radial-gradient(ellipse, rgba(124, 58, 237, 0.06) 0%, transparent 70%);
    filter: blur(80px);
    animation: color-shift 25s ease-in-out infinite reverse;
}

@keyframes color-shift {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.1); }
}

/* 在线客服 - 青绿渐变 */
.product-hero.online {
    background: linear-gradient(180deg, 
        #f0fdfa 0%, 
        #ccfbf1 25%, 
        #e0f2fe 50%, 
        #f0f9ff 75%, 
        #ffffff 100%
    );
}

.product-hero.online::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -10%;
    width: 70%;
    height: 80%;
    background: radial-gradient(ellipse, rgba(45, 212, 191, 0.1) 0%, transparent 60%);
    filter: blur(100px);
    animation: float-slow 30s ease-in-out infinite;
}

/* 智能机器人 - 紫粉渐变 */
.product-hero.robots {
    background: linear-gradient(180deg, 
        #faf5ff 0%, 
        #f3e8ff 25%, 
        #fce7f3 50%, 
        #ffe4e6 75%, 
        #ffffff 100%
    );
}

.product-hero.robots::before {
    content: '';
    position: absolute;
    top: -30%;
    left: -20%;
    width: 80%;
    height: 90%;
    background: radial-gradient(ellipse, rgba(168, 85, 247, 0.12) 0%, transparent 70%);
    filter: blur(120px);
}

/* 工单系统 - 蓝绿渐变 */
.product-hero.worker {
    background: linear-gradient(180deg, 
        #eff6ff 0%, 
        #dbeafe 30%, 
        #d1fae5 60%, 
        #f0fdfa 80%, 
        #ffffff 100%
    );
}

.product-hero.worker::before {
    content: '';
    position: absolute;
    top: 0;
    right: -15%;
    width: 60%;
    height: 100%;
    background: radial-gradient(ellipse, rgba(37, 99, 235, 0.08) 0%, transparent 50%);
    filter: blur(80px);
}

/* 远程协助 - 橙黄渐变 */
.product-hero.remote {
    background: linear-gradient(180deg, 
        #fffbeb 0%, 
        #fef3c7 25%, 
        #ffedd5 50%, 
        #fed7aa 75%, 
        #ffffff 100%
    );
}

.product-hero.remote::before {
    content: '';
    position: absolute;
    bottom: -20%;
    left: -10%;
    width: 70%;
    height: 80%;
    background: radial-gradient(ellipse, rgba(251, 191, 36, 0.1) 0%, transparent 60%);
    filter: blur(100px);
}

/* 语音视频 - 红紫渐变 */
.product-hero.rvc {
    background: linear-gradient(180deg, 
        #fdf2f8 0%, 
        #fce7f3 30%, 
        #f3e8ff 60%, 
        #e0e7ff 80%, 
        #ffffff 100%
    );
}

.product-hero.rvc::before {
    content: '';
    position: absolute;
    top: -25%;
    right: -15%;
    width: 75%;
    height: 85%;
    background: radial-gradient(ellipse, rgba(236, 72, 153, 0.1) 0%, transparent 65%);
    filter: blur(120px);
}

/* 内页 Page Hero 通用 */
.page-hero {
    background: linear-gradient(180deg, 
        #f8fafc 0%, 
        #f1f5f9 50%, 
        #e2e8f0 100%
    );
    position: relative;
    overflow: hidden;
}

.page-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -25%;
    width: 80%;
    height: 200%;
    background: linear-gradient(135deg, 
        rgba(37, 99, 235, 0.08) 0%, 
        rgba(124, 58, 237, 0.06) 50%, 
        transparent 100%
    );
    filter: blur(80px);
    animation: gradient-rotate 30s linear infinite;
}

.page-hero::after {
    content: '';
    position: absolute;
    bottom: -50%;
    left: -25%;
    width: 80%;
    height: 200%;
    background: linear-gradient(135deg, 
        rgba(124, 58, 237, 0.06) 0%, 
        rgba(236, 72, 153, 0.04) 50%, 
        transparent 100%
    );
    filter: blur(80px);
    animation: gradient-rotate 25s linear infinite reverse;
}

@keyframes gradient-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Stats Banner 美化 */
.stats-banner {
    background: linear-gradient(135deg, 
        rgba(37, 99, 235, 0.03) 0%, 
        rgba(124, 58, 237, 0.03) 50%, 
        rgba(236, 72, 153, 0.03) 100%
    );
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    position: relative;
}

.stats-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(37, 99, 235, 0.02) 50%, 
        transparent 100%
    );
    animation: shimmer 3s ease-in-out infinite;
}

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

/* 移动端优化 */
@media (max-width: 768px) {
    .hero::before,
    .hero::after,
    .product-hero::before,
    .page-hero::before,
    .page-hero::after {
        filter: blur(60px);
    }
}

/* 可访问性 - 减少动画 */
@media (prefers-reduced-motion: reduce) {
    .hero::before,
    .hero::after,
    .product-hero::before,
    .page-hero::before,
    .page-hero::after,
    .stats-banner::before {
        animation: none;
    }
}