@charset "utf-8";
/* CSS Document */


        blockquote,body,button,code,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
        body,button,input,select,textarea{font:16px/1.5 Tahoma,Arial,SimSun;font-family:"Microsoft YaHei"}
        button,input,select,textarea{font-size:100%}
        h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}
        ol,ul{list-style:none}
        em,i,strong{font-style:normal;font-weight:400}
        fieldset,img{border:0}
        table{border-collapse:collapse;border-spacing:0}
        body,html{width:100%;height:100%;color:#333}
        a{text-decoration:none;color:inherit}
        a:hover{text-decoration:none}
        .clear{clear:both}
        .clearfix:after{content:"​";display:block;height:0;clear:both}
        .left{float:left}
        .right{float:right}



:root {
    --primary-color: #6C5CE7; /* 电竞主色：科技紫 */
    --secondary-color: #00CEC9; /* 电竞副色：电光蓝 */
    --text-color: #2D3436; /* 正文颜色：深灰 */
    --light-gray: #F8F9FF; /* 背景色：淡紫蓝背景 */ 
    --border-color: #6C5CE7; /* 边框主色：科技紫 */
    --base-font-size: 16px; /* 基础字号 */
    --accent-color: #FD79A8; /* 游戏点缀：电光粉 */
    --dark-bg: #5A4FCF; /* 底部渐变深色端（深紫） */
    --download-btn-primary: #FF6B35; /* 下载按钮主色（活力橙） */
    --download-btn-secondary: #F7931E; /* 下载按钮副色（明亮橙黄） */
    --download-btn-shadow-primary: rgba(255, 107, 53, 0.6); /* 阴影颜色与按钮统一 */
    --download-btn-shadow-hover: rgba(247, 147, 30, 0.7); /* 悬停阴影 */
    --neon-pink: #FD79A8; /* 电光粉 */
    --lime-yellow: #FDCB6E; /* 能量黄 */
}

/* 电竞游戏发光效果 */
.neon-glow {
    text-shadow: 0 0 5px var(--primary-color), 0 0 10px var(--primary-color), 0 0 15px var(--primary-color);
}

.neon-border {
    border: 2px solid var(--primary-color);
    box-shadow: 0 0 10px var(--primary-color), inset 0 0 10px rgba(108, 92, 231, 0.1);
}

/* 游戏能量条动画 */
@keyframes energyPulse {
    0%, 100% { 
        box-shadow: 0 0 20px var(--primary-color), 0 0 40px var(--primary-color), 0 0 60px var(--primary-color);
        transform: scale(1);
    }
    50% { 
        box-shadow: 0 0 30px var(--secondary-color), 0 0 60px var(--secondary-color), 0 0 90px var(--secondary-color);
        transform: scale(1.02);
    }
}

/* 游戏手柄图标动画 */
@keyframes gamepadFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    25% { transform: translateY(-10px) rotate(2deg); }
    50% { transform: translateY(-5px) rotate(0deg); }
    75% { transform: translateY(-15px) rotate(-2deg); }
}

/* 像素风格闪烁效果 */
@keyframes pixelBlink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.3; }
}

/* 进度条加载动画 */
@keyframes progressLoad {
    0% { width: 0%; }
    100% { width: 100%; }
}

.gaming-effect {
    animation: energyPulse 3s ease-in-out infinite;
}

.gamepad-icon {
    animation: gamepadFloat 4s ease-in-out infinite;
}

.pixel-effect {
    animation: pixelBlink 2s ease-in-out infinite;
}

/* 街机风格按钮动画 */
@keyframes neonPulse {
    0%, 100% { 
        box-shadow: 0 0 5px var(--primary-color), 0 0 10px var(--primary-color), 0 0 15px var(--primary-color);
    }
    50% { 
        box-shadow: 0 0 10px var(--neon-pink), 0 0 20px var(--neon-pink), 0 0 30px var(--neon-pink);
    }
}

.arcade-pulse {
    animation: neonPulse 2s ease-in-out infinite;
}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--text-color);line-height:1.6;font-size:var(--base-font-size)}
.hero{min-height:90vh;background:linear-gradient(135deg,var(--primary-color) 0%,var(--secondary-color) 100%);background-size:cover;background-position:center;background-repeat:no-repeat;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;color:#FFFFFF;position:relative;overflow:hidden}


/* 背景动效样式 */
@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    25% { background-position: 100% 25%; }
    50% { background-position: 100% 100%; }
    75% { background-position: 0% 75%; }
    100% { background-position: 0% 50%; }
}

.hero h1{font-size:4rem;margin-bottom:0.5rem;margin-top:-1rem;color:#F0F4F8;font-weight:900;letter-spacing:2px;text-shadow:2px 2px 4px rgba(0,0,0,0.3);position:relative;z-index:2}
.hero-logo{display:flex;align-items:center;justify-content:center;margin-bottom:1rem;gap:1rem;margin-top:1rem}
.logo-image{height:150px;opacity:0.9;filter:drop-shadow(0 4px 8px rgba(0,0,0,0.2))}
.subtitle{font-size:2rem;font-weight: 600;margin-bottom:1.3rem;text-shadow:1px 1px 2px rgba(0,0,0,0.2)}
.hero-features{display:flex;justify-content:center;gap:1.5rem;margin:2rem 0;/*flex-wrap:nowrap;*/ flex-wrap:wrap; max-width:900px;margin:2rem auto;/*overflow-x:auto*/}
.hero-feature{display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(255,255,255,0.15);backdrop-filter:blur(8px);padding:1.1rem 1.8rem;border-radius:1.2rem;width:130px;height:90px;border:1px solid rgba(255,255,255,0.4);transition:all 0.3s ease;flex-shrink:0;text-decoration:none;color:inherit;cursor:pointer;box-shadow: 0 4px 15px rgba(0,0,0,0.1)}
.hero-feature:hover{transform:translateY(-3px);background:rgba(255,255,255,0.25);border-color:rgba(255,255,255,0.6);box-shadow:0 8px 25px rgba(255,255,255,0.2)}
.hero-feature-icon{font-size:2.3rem;margin-bottom:0.5rem;transition:transform 0.3s ease;filter:brightness(1.5);text-shadow:0 2px 8px rgba(0,0,0,0.6);color:#FFFFFF}
.hero-feature:hover .hero-feature-icon{transform:scale(1.2)}
.hero-feature span{font-size:1.05rem;font-weight:700;color:white;transition:color 0.3s ease;text-align:center;line-height:1.2;white-space:nowrap}
.hero-feature:hover span{color:rgba(255,255,255,0.95)}
.cta-primary{display:inline-block;background:linear-gradient(135deg,var(--download-btn-primary),var(--download-btn-secondary));color:white;padding:1.2rem 7rem;border-radius:2rem;text-decoration:none;font-size:2rem;font-weight:700;transition:all 0.4s ease;box-shadow:0 8px 30px var(--download-btn-shadow-primary), 0 0 20px var(--download-btn-shadow-primary);position:relative;overflow:hidden;border:3px solid rgba(255,255,255,0.7);text-shadow: 0 2px 4px rgba(0,0,0,0.3)}
.cta-primary:hover{transform:translateY(-8px) scale(1.08);box-shadow:0 20px 50px var(--download-btn-shadow-hover), 0 0 40px var(--download-btn-shadow-hover);border-color:rgba(255,255,255,1);background:linear-gradient(135deg,var(--download-btn-secondary),var(--download-btn-primary))}
.cta-primary::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(
        120deg,transparent,rgba(255,255,255,0.5),transparent
    );transition:0.6s}
.cta-primary:hover::before{left:100%}
.download-tip {color:#ebebebdc;font-size:0.9rem;margin-top:0.9rem;opacity:0.8}

.features{padding:4rem 2rem;background:var(--light-gray)}
.section-title{text-align:center;color:var(--text-color);margin-bottom:5rem;font-size:2rem;font-weight:700;position:relative}
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;max-width:1200px;margin:0 auto}
.feature-card{background:white;padding:2rem;border-radius:1rem;text-align:center;transition:all 0.3s ease;box-shadow:0 4px 6px rgba(0,0,0,0.1);border-top:4px solid var(--primary-color);position:relative;overflow:hidden}
.feature-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,rgba(37,99,235,0.05),transparent);opacity:0;transition:opacity 0.3s ease}
.feature-card:hover{transform:translateY(-5px);box-shadow:0 8px 20px rgba(37,99,235,0.15)}
.feature-card h3{margin-bottom:1rem;color:var(--text-color);font-size:1.3rem;font-weight:600;transition:color 0.3s ease}
.feature-card:hover::before{opacity:1}
.feature-icon{font-size:2.5rem;margin-bottom:1rem;color:var(--primary-color);transition:transform 0.3s ease;filter:brightness(1);text-shadow:0 1px 3px rgba(0,0,0,0.3)}
.feature-card:hover .feature-icon{transform:scale(1.1);color:var(--neon-pink)}
.feature-card p{color:var(--text-color);font-size:0.9rem;opacity:0.8;line-height:1.6;margin-bottom:0}
.feature-card:hover h3{color:var(--primary-color)}
.feature-card:hover p{color:var(--text-color)}
.features-download{text-align:center;margin-top:3rem}
.feature-download{display:inline-block;background:linear-gradient(135deg,var(--download-btn-primary), var(--download-btn-secondary));color:white;padding:1rem 4rem;border-radius:1rem;text-decoration:none;font-size:1.5rem;font-weight:600;transition:all 0.4s ease;box-shadow: 0 4px 20px var(--download-btn-shadow-primary), 0 0 15px var(--download-btn-shadow-primary);min-width:120px}
.feature-download:hover{transform:translateY(-5px) scale(1.05);box-shadow: 0 10px 35px var(--download-btn-shadow-hover), 0 0 30px var(--download-btn-shadow-hover);background:linear-gradient(135deg,var(--download-btn-secondary), var(--download-btn-primary))}
.download-desc{color:var(--text-color);font-size:0.9rem;margin-top:0.8rem;opacity:0.8}
.testimonials{padding:4rem 2rem;background:white}
.testimonials-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.8rem;max-width:1200px;margin:0 auto}
.testimonial-card{background:var(--light-gray);padding:2rem;border-radius:1rem;text-align:center;transition:all 0.3s ease;border:1px solid transparent;position:relative;overflow:hidden}
.testimonial-card:hover{transform:translateY(-3px);background:white;border-color:var(--border-color);box-shadow:0 8px 20px rgba(37,99,235,0.1)}
.testimonial-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,rgba(37,99,235,0.05),transparent);opacity:0;transition:opacity 0.3s ease}
.testimonial-card:hover::before{opacity:1}
.testimonial-card p{color:var(--text-color);font-size:0.9rem;line-height:1.6;margin-bottom:1rem}
.user-avatar{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem}
.testimonial-card:nth-child(1) .user-avatar{background:var(--primary-color)}
.testimonial-card:nth-child(2) .user-avatar{background:var(--secondary-color)}
.testimonial-card:nth-child(3) .user-avatar{background:var(--accent-color)}
.testimonial-card:nth-child(4) .user-avatar{background:var(--lime-yellow)}
.testimonial-card:nth-child(5) .user-avatar{background:var(--neon-pink)}
.testimonial-card:nth-child(6) .user-avatar{background:var(--accent-color)}
.avatar-letter{color:white;font-size:1.5rem;font-weight:bold}
.user {
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary-color);
    font-style: normal;
    margin-top: 0.8rem;
}
.rating{color:#FFD700;margin-bottom:1rem;font-size:1.2rem}
.faq-container {
    max-width: 800px;
    margin: 0 auto;
}
.faq{padding:4rem 2rem;background:var(--light-gray);margin:0 auto}
.faq-item{background:white;margin:0 auto 1rem;border-radius:0.5rem;padding:1.3rem;max-width:800px;cursor:pointer;transition:all 0.3s ease;border-left:4px solid var(--primary-color)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height 0.3s ease;opacity:0}
.faq-item.active{background:#fff;box-shadow:0 4px 15px rgba(37,99,235,0.1)}
.faq-item.active .faq-answer{max-height:unset;opacity:1;margin-top:1rem;font-size: 1rem;}
.faq-question{position:relative;padding-right:2rem;font-weight:bold;color:var(--primary-color);font-size:1.1rem}
.faq-question::after{content:'+';position:absolute;right:0;top:50%;transform:translateY(-50%);transition:transform 0.3s ease;color:var(--primary-color);font-size:1.5rem}
.faq-item.active .faq-question::after{transform:translateY(-50%) rotate(45deg)}
.faq-item:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(37,99,235,0.1)}
.download-options{text-align:center;margin-top:3rem;margin-bottom:5rem;display:flex;justify-content:center;gap:6rem;flex-wrap:wrap}
.download-btn-group{display:flex;flex-direction:column;align-items:center;gap:1rem;     filter: brightness();
    text-shadow: unset;}
.download-btn {
    display: inline-block;
    background: linear-gradient(135deg, var(--download-btn-primary), var(--download-btn-secondary));
    color: white;
    padding: 1rem 3.6rem;
    border-radius: 2rem;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 600;
    transition: all 0.4s ease;
    box-shadow: 0 4px 20px var(--download-btn-shadow-primary), 0 0 15px var(--download-btn-shadow-primary);
    min-width: 150px;
}

.download-btn:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 10px 35px var(--download-btn-shadow-hover), 0 0 30px var(--download-btn-shadow-hover);
    background: linear-gradient(135deg, var(--download-btn-secondary), var(--download-btn-primary));
}
.download-btn-1{
    display: inline-block;
    background: linear-gradient(45deg, #9CA3AF, #6B7280);
    color: white;
    padding: 1rem 3rem;
    border-radius: 2rem;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 600;
    transition: all 0.4s ease;
    box-shadow: 0 4px 15px rgba(156, 163, 175, 0.3);
    min-width: 150px;
}
.download-btn-1:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 10px 30px rgba(107, 114, 128, 0.5);
    background: linear-gradient(45deg, #6B7280, #9CA3AF);
}
.platform-desc {
    color: var(--text-color);
    font-size: 0.85rem;
    margin: 0;
    opacity: 0.7;
}

/* 粒子动效 */
.hero-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.particle {
    position: absolute;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    animation: float 8s ease-in-out infinite;
}

.particle:nth-child(1) {
    width: 8px;
    height: 8px;
    top: 20%;
    left: 10%;
    animation-delay: 0s;
    animation-duration: 10s;
}

.particle:nth-child(2) {
    width: 12px;
    height: 12px;
    top: 60%;
    left: 20%;
    animation-delay: 2s;
    animation-duration: 12s;
}

.particle:nth-child(3) {
    width: 6px;
    height: 6px;
    top: 40%;
    left: 70%;
    animation-delay: 4s;
    animation-duration: 8s;
}

.particle:nth-child(4) {
    width: 10px;
    height: 10px;
    top: 80%;
    left: 80%;
    animation-delay: 6s;  
    animation-duration: 14s;
}

.particle:nth-child(5) {
    width: 4px;
    height: 4px;
    top: 15%;
    left: 60%;
    animation-delay: 1s;
    animation-duration: 9s;
}

.particle:nth-child(6) {
    width: 14px;
    height: 14px;
    top: 70%;
    left: 5%;
    animation-delay: 3s;
    animation-duration: 11s;
}

@keyframes float {
    0%, 100% { 
        transform: translateY(0px) translateX(0px) scale(1); 
        opacity: 0.3; 
    }
    25% { 
        transform: translateY(-30px) translateX(20px) scale(1.2); 
        opacity: 0.7; 
    }
    50% { 
        transform: translateY(-60px) translateX(-10px) scale(0.8); 
        opacity: 0.5; 
    }
    75% { 
        transform: translateY(-45px) translateX(25px) scale(1.1); 
        opacity: 0.6; 
    }
}

/* 几何图形动效 */
.hero-shapes {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.hero-shape {
    position: absolute;
    border: 2px solid rgba(255, 255, 255, 0.2);
    animation: shapeFloat 15s ease-in-out infinite;
}

.hero-shape:nth-child(1) {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    top: 25%;
    left: 85%;
    animation-delay: 0s;
}

.hero-shape:nth-child(2) {
    width: 60px;
    height: 60px;
    top: 70%;
    left: 15%;
    animation-delay: 5s;
    transform: rotate(45deg);
}

.hero-shape:nth-child(3) {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    top: 45%;
    right: 25%;
    animation-delay: 10s;
}

@keyframes shapeFloat {
    0%, 100% { 
        transform: translateY(0px) translateX(0px) rotate(0deg); 
        opacity: 0.3; 
    }
    25% { 
        transform: translateY(-20px) translateX(15px) rotate(90deg); 
        opacity: 0.6; 
    }
    50% { 
        transform: translateY(-40px) translateX(-20px) rotate(180deg); 
        opacity: 0.4; 
    }
    75% { 
        transform: translateY(-30px) translateX(10px) rotate(270deg); 
        opacity: 0.5; 
    }
}

/* 背景装饰图片样式 */
.hero-bg-images {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.bg-image {
    position: absolute;
    opacity: 0.15;
    transition: all 0.3s ease;
    filter: brightness(1.2) contrast(0.8);
}

.bg-image-1 {
    width: 200px;
    height: auto;
    top: 15%;
    left: 5%;
    animation: bgFloat1 12s ease-in-out infinite;
}

.bg-image-2 {
    width: 180px;
    height: auto;
    top: 60%;
    right: 8%;
    animation: bgFloat2 15s ease-in-out infinite;
}

.bg-image-3 {
    width: 160px;
    height: auto;
    top: 35%;
    right: 25%;
    animation: bgFloat3 10s ease-in-out infinite;
}

@keyframes bgFloat1 {
    0%, 100% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
        opacity: 0.15;
    }
    33% {
        transform: translateY(-15px) translateX(10px) rotate(2deg);
        opacity: 0.25;
    }
    66% {
        transform: translateY(-25px) translateX(-5px) rotate(-1deg);
        opacity: 0.2;
    }
}

@keyframes bgFloat2 {
    0%, 100% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
        opacity: 0.15;
    }
    40% {
        transform: translateY(-20px) translateX(-8px) rotate(-2deg);
        opacity: 0.22;
    }
    80% {
        transform: translateY(-10px) translateX(12px) rotate(1deg);
        opacity: 0.18;
    }
}

@keyframes bgFloat3 {
    0%, 100% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
        opacity: 0.15;
    }
    50% {
        transform: translateY(-18px) translateX(6px) rotate(1.5deg);
        opacity: 0.28;
    }
}

/* 标题浮标样式 */
.title-badge {
    position: absolute;
    top: -20px;
    right: -60px;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    color: white;
    padding: 8px 20px;
    border-radius: 15px;
    font-size: 20px;
    font-weight: 700;
    box-shadow: 0 4px 12px var(--download-btn-shadow-primary);
    transform: rotate(15deg);
    z-index: 10;
    animation: badgeFloat 3s ease-in-out infinite, energyPulse 2s ease-in-out infinite;
    white-space: nowrap;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

@keyframes badgeFloat {
    0%, 100% {
        transform: rotate(15deg) translateY(0px);
    }
    50% {
        transform: rotate(15deg) translateY(-5px);
    }
}

.hero h1 {
    position: relative;
    display: inline-block;
    animation: neon-glow 3s ease-in-out infinite alternate;
}

@keyframes neon-glow {
    from {
        text-shadow: 0 0 10px var(--primary-color), 0 0 20px var(--primary-color), 0 0 30px var(--primary-color);
    }
    to {
        text-shadow: 0 0 20px var(--secondary-color), 0 0 30px var(--secondary-color), 0 0 40px var(--secondary-color);
    }
}

.title-decoration {
    position: relative;
    display: inline-block;
}


    .bottom-follow-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        z-index: 1001;
        transition: transform 0.3s ease;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25);
    }

    .follow-bar-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        max-width: 1200px;
        margin: 0 auto;
        padding: 12px 20px;
        height: 60px;
    }

    .follow-bar-left {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .follow-bar-logo {
    
        height: 45px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    .follow-bar-text {
        color: #F5F5DC;
        font-size: 25px;
        font-weight: 600;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    }

    .follow-bar-right {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .follow-download-btn {
        background: linear-gradient(135deg, var(--download-btn-primary), var(--download-btn-secondary));
        color: white;
        padding: 12px 24px;
        border-radius: 25px;
        text-decoration: none;
        font-weight: 600;
        font-size: 16px;
        box-shadow: 0 4px 18px var(--download-btn-shadow-primary), 0 0 12px var(--download-btn-shadow-primary);
        transition: all 0.4s ease;
        border: 2px solid rgba(255, 255, 255, 0.9);
        cursor: pointer;
    }

    .follow-download-btn:hover {
        background: linear-gradient(135deg, var(--download-btn-secondary), var(--download-btn-primary));
        transform: translateY(-3px) scale(1.05);
        box-shadow: 0 10px 35px var(--download-btn-shadow-hover), 0 0 25px var(--download-btn-shadow-hover);
        border-color: rgba(255, 255, 255, 1);
    }

    .follow-close-btn {
        background: rgba(255, 255, 255, 0.2);
        color: white;

        width: 16px;
        height: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 16px;
        font-weight: bold;
    }

    .follow-close-btn:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: scale(1.1);
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
        .follow-bar-content {
            padding: 10px 15px;
            height: 55px;
        }
        
        .follow-bar-text {
            font-size: 16px;
        }
        
        .follow-download-btn {
            padding: 6px 16px;
            font-size: 13px;
        }
        
        /* 移动端背景图片调整 */
        .bg-image-1 {
            width: 120px;
            top: 20%;
            left: 2%;
        }
        
        .bg-image-2 {
            width: 100px;
            top: 65%;
            right: 3%;
        }
        
        .bg-image-3 {
            width: 90px;
            top: 40%;
            right: 20%;
        }
    }

    /* 页面内容底部间距，避免被跟随栏遮挡 */
    body {
        padding-bottom: 80px;
    }
    
    /* 首屏logo圆角样式 */
    .hero-logo img,
    .logo-image {
        border-radius: 15px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }
    
    /* 推荐宣传语样式 */
    .promotional-slogans {
        padding: 60px 0;
        background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
        position: relative;
        overflow: hidden;
    }

    .slogans-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .slogan-item {
        margin-bottom: 30px;
        text-align: center;
    }

    .slogan-item:last-child {
        margin-bottom: 0;
    }

    .slogan-item h3 {
        color: var(--color-text-light);
        font-size: 24px;
        font-weight: 600;
        margin: 0;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        animation: fadeInUp 0.6s ease-out;
    }

    .slogan-item:nth-child(1) h3 {
        animation-delay: 0.2s;
    }

    .slogan-item:nth-child(2) h3 {
        animation-delay: 0.4s;
    }

    .slogan-item:nth-child(3) h3 {
        animation-delay: 0.6s;
    }

    @media (max-width: 768px) {
        .slogan-item h3 {
            font-size: 18px;
        }
    }

        .ai-header {
            position: relative;
            width: 100%;
            height: 80px;
            background: #cfe2f9;
        }

        .ai-header-wrapper {
            width: 1167px;
            height: 38px;
            margin: 0 auto;
            padding: 24px 0 18px 0;
			    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: space-between;
        }

        .ai-header .nav-search {
            float: right;
            width: 600px;
            height: 40px;
        }

        .ai-header .nav-search .nav {
            width: 360px;
        }

        .ai-header .nav-search .nav .nav-item {
            float: left;
            width: 72px;
            line-height: 34px;
            text-align: center;
            font-size: 14px;
            color: #333;
            opacity: 1;
        }

        .ai-header .nav-search .nav .nav-item:hover  {
            opacity: 0.8;
        }

        .ai-header .top-searchBox {
            position: relative;
            width: 204px;
            border-radius: 6px;
            overflow: hidden;
        }

        .ai-header .searchBar {
            width: 100%;
            height: 34px;
            position: relative;
            background-color: #fff;
        }

        .ai-header .searchBar input {
            width: 131px;
            height: 34px;
            line-height: 34px;
            padding-left: 10px;
            font-size: 14px;
            color: #333;
            background-color: #fff;
            border: 0px solid #fff;
        }

        .ai-header .searchBar input:hover {
            border-color: #fff;
        }

        .ai-header .searchBar input:focus {
            outline: none;
        }

        .ai-header .searchBar button {
            width: 64px;
            height: 34px;
            line-height: 34px;
            position: absolute;
            right: 0;
            top: 0;
            display: inline-block;
            border: none;
            cursor: pointer;
            background-color: #2f82e9;
            color: #fff;
            padding: 0 0 0 9px;
        }

        .ai-header .searchBar button:hover {
            background-color: #3b8df2;
        }

        .ai-header .searchBar button:active {
            background-color: #2579e1;
        }

        .ai-header .searchBar button:before {
            font-size: 18px;
        }

        .ai-header .searchBar button img {
            float: left;
            width: 14px;
            margin: 10px 5px 0 0;
        }

        .ai-header .searchBar button .search-text {
            float: left;
            font-size: 14px;
        }

        .ai-footer {
            width: 100%;
            line-height: 30px;
            text-align: center;
            padding: 10px 0 100px 0;
            font-size: 14px;
            color: #999;
        }


        .ai-header {
            background: #fff;
        }


        .platform-desc a:hover {
    color: #118c3c;
}
		

 @media (max-width: 767px) {
 .ai-header-wrapper {
    width: 100%;
    height: 38px;
    margin: 0 auto;
    padding: 24px 0 18px 0;
}

.download-options {
    text-align: center;
    margin-top: 3rem;
    margin-bottom: 5rem;
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

 .right{margin-right: 10px; float:right}
 
  }