/* 全局样式重置和基础设置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #667eea;
    --secondary-color: #764ba2;
    --accent-color: #f093fb;
    --text-primary: #2d3748;
    --text-secondary: #718096;
    --background: #f7fafc;
    --white: #ffffff;
    --shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    --shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.15);
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --gradient-accent: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --border-radius: 12px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--background);
    overflow-x: hidden;
}

/* 背景粒子效果 */
.particles-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

/* 宇宙科技装饰元素 */
.particles-container::before {
    content: '';
    position: absolute;
    top: 10%;
    right: 10%;
    width: 150px;
    height: 150px;
    background: 
        radial-gradient(circle at 30% 30%, rgba(102, 126, 234, 0.6) 0%, transparent 40%),
        radial-gradient(circle at 70% 70%, rgba(240, 147, 251, 0.5) 0%, transparent 50%),
        conic-gradient(from 0deg, transparent 0deg, rgba(79, 172, 254, 0.3) 90deg, transparent 180deg, rgba(102, 126, 234, 0.3) 270deg, transparent 360deg);
    border-radius: 50%;
    animation: cosmicOrb 8s ease-in-out infinite, orbitalRotate 20s linear infinite;
    z-index: 3;
}

.particles-container::after {
    content: '';
    position: absolute;
    bottom: 15%;
    left: 15%;
    width: 120px;
    height: 120px;
    background: 
        radial-gradient(ellipse at center, rgba(240, 147, 251, 0.5) 0%, transparent 60%),
        linear-gradient(45deg, transparent 30%, rgba(79, 172, 254, 0.3) 50%, transparent 70%),
        conic-gradient(from 180deg, transparent 0deg, rgba(102, 126, 234, 0.2) 120deg, transparent 240deg, rgba(240, 147, 251, 0.25) 360deg);
    border-radius: 50%;
    animation: cosmicOrb 6s ease-in-out infinite reverse, pulseGlow 4s ease-in-out infinite;
    z-index: 3;
}

.particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, rgba(102, 126, 234, 0.9) 0%, rgba(102, 126, 234, 0.3) 70%, transparent 100%);
    border-radius: 50%;
    opacity: 0.8;
    animation: cosmicFloat 8s ease-in-out infinite, twinkle 3s ease-in-out infinite;
    box-shadow: 0 0 15px rgba(102, 126, 234, 0.6),
                0 0 30px rgba(102, 126, 234, 0.4),
                0 0 45px rgba(102, 126, 234, 0.2);
}

.particle:nth-child(even) {
    background: radial-gradient(circle, rgba(240, 147, 251, 0.9) 0%, rgba(240, 147, 251, 0.3) 70%, transparent 100%);
    box-shadow: 0 0 15px rgba(240, 147, 251, 0.6),
                0 0 30px rgba(240, 147, 251, 0.4),
                0 0 45px rgba(240, 147, 251, 0.2);
    animation: cosmicFloat 10s ease-in-out infinite, twinkle 4s ease-in-out infinite;
}

.particle:nth-child(3n) {
    background: radial-gradient(circle, rgba(79, 172, 254, 0.9) 0%, rgba(79, 172, 254, 0.3) 70%, transparent 100%);
    box-shadow: 0 0 15px rgba(79, 172, 254, 0.6),
                0 0 30px rgba(79, 172, 254, 0.4),
                0 0 45px rgba(79, 172, 254, 0.2);
    animation: cosmicFloat 12s ease-in-out infinite, twinkle 2s ease-in-out infinite;
}

.particle:nth-child(4n) {
    width: 3px;
    height: 3px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, transparent 100%);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8),
                0 0 20px rgba(255, 255, 255, 0.4);
    animation: cosmicFloat 6s ease-in-out infinite, rapidTwinkle 1.5s ease-in-out infinite;
}

/* 微粒子效果 */
.particle.micro-particle {
    width: 2px;
    height: 2px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, transparent 100%);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.8),
                0 0 16px rgba(255, 255, 255, 0.4);
    animation: microFloat 4s ease-in-out infinite, rapidTwinkle 1s ease-in-out infinite;
}

/* 能量粒子效果 */
.particle.energy-particle {
    width: 8px;
    height: 8px;
    background: 
        radial-gradient(circle, rgba(102, 126, 234, 1) 0%, rgba(102, 126, 234, 0.5) 50%, transparent 100%),
        radial-gradient(circle, rgba(240, 147, 251, 0.8) 0%, transparent 70%);
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.8),
                0 0 40px rgba(102, 126, 234, 0.6),
                0 0 60px rgba(102, 126, 234, 0.4);
    animation: energyFloat 6s ease-in-out infinite, energyPulse 2s ease-in-out infinite;
}

.particle:nth-child(1) { top: 20%; left: 10%; animation-delay: 0s; }
.particle:nth-child(2) { top: 60%; left: 80%; animation-delay: 2s; }
.particle:nth-child(3) { top: 80%; left: 20%; animation-delay: 4s; }
.particle:nth-child(4) { top: 30%; left: 70%; animation-delay: 1s; }
.particle:nth-child(5) { top: 70%; left: 50%; animation-delay: 3s; }
.particle:nth-child(6) { top: 10%; left: 40%; animation-delay: 5s; }
.particle:nth-child(7) { top: 50%; left: 90%; animation-delay: 1.5s; }
.particle:nth-child(8) { top: 90%; left: 60%; animation-delay: 3.5s; }
.particle:nth-child(9) { top: 15%; left: 60%; animation-delay: 2.5s; }
.particle:nth-child(10) { top: 85%; left: 30%; animation-delay: 4.5s; }
.particle:nth-child(11) { top: 40%; left: 15%; animation-delay: 1.2s; }
.particle:nth-child(12) { top: 65%; left: 85%; animation-delay: 3.8s; }
.particle:nth-child(13) { top: 25%; left: 45%; animation-delay: 0.8s; }
.particle:nth-child(14) { top: 75%; left: 75%; animation-delay: 2.2s; }
.particle:nth-child(15) { top: 5%; left: 25%; animation-delay: 4.8s; }
.particle:nth-child(16) { top: 95%; left: 55%; animation-delay: 1.8s; }
.particle:nth-child(17) { top: 35%; left: 5%; animation-delay: 0.3s; }
.particle:nth-child(18) { top: 55%; left: 95%; animation-delay: 2.8s; }
.particle:nth-child(19) { top: 45%; left: 35%; animation-delay: 4.3s; }
.particle:nth-child(20) { top: 85%; left: 65%; animation-delay: 1.3s; }
.particle:nth-child(21) { top: 12%; left: 75%; animation-delay: 3.3s; }
.particle:nth-child(22) { top: 88%; left: 15%; animation-delay: 0.6s; }
.particle:nth-child(23) { top: 22%; left: 88%; animation-delay: 2.6s; }
.particle:nth-child(24) { top: 78%; left: 12%; animation-delay: 4.6s; }
.particle:nth-child(25) { top: 62%; left: 42%; animation-delay: 1.6s; }
.particle:nth-child(26) { top: 38%; left: 58%; animation-delay: 3.6s; }

@keyframes cosmicFloat {
    0%, 100% { 
        transform: translateY(0px) translateX(0px) rotate(0deg); 
        opacity: 0.8; 
    }
    25% { 
        transform: translateY(-30px) translateX(10px) rotate(90deg); 
        opacity: 1; 
    }
    50% { 
        transform: translateY(-15px) translateX(-10px) rotate(180deg); 
        opacity: 0.6; 
    }
    75% { 
        transform: translateY(-25px) translateX(15px) rotate(270deg); 
        opacity: 1; 
    }
}

@keyframes twinkle {
    0%, 100% { 
        opacity: 0.8; 
        transform: scale(1);
    }
    50% { 
        opacity: 1; 
        transform: scale(1.3);
    }
}

@keyframes rapidTwinkle {
    0%, 100% { 
        opacity: 0.6; 
        transform: scale(0.8);
    }
    50% { 
        opacity: 1; 
        transform: scale(1.5);
    }
}

@keyframes microFloat {
    0%, 100% { 
        transform: translateY(0px) translateX(0px) rotate(0deg); 
        opacity: 0.9; 
    }
    33% { 
        transform: translateY(-15px) translateX(8px) rotate(120deg); 
        opacity: 1; 
    }
    66% { 
        transform: translateY(-8px) translateX(-5px) rotate(240deg); 
        opacity: 0.7; 
    }
}

@keyframes energyFloat {
    0%, 100% { 
        transform: translateY(0px) translateX(0px) rotate(0deg) scale(1); 
        opacity: 0.8; 
    }
    25% { 
        transform: translateY(-40px) translateX(20px) rotate(90deg) scale(1.2); 
        opacity: 1; 
    }
    50% { 
        transform: translateY(-20px) translateX(-15px) rotate(180deg) scale(0.8); 
        opacity: 0.6; 
    }
    75% { 
        transform: translateY(-35px) translateX(25px) rotate(270deg) scale(1.1); 
        opacity: 1; 
    }
}

@keyframes energyPulse {
    0%, 100% { 
        box-shadow: 0 0 20px rgba(102, 126, 234, 0.8),
                    0 0 40px rgba(102, 126, 234, 0.6),
                    0 0 60px rgba(102, 126, 234, 0.4);
    }
    50% { 
        box-shadow: 0 0 30px rgba(240, 147, 251, 1),
                    0 0 60px rgba(240, 147, 251, 0.8),
                    0 0 90px rgba(240, 147, 251, 0.6);
    }
}

@keyframes cosmicOrb {
    0%, 100% { 
        opacity: 0.6;
        transform: scale(1) rotate(0deg);
    }
    50% { 
        opacity: 1;
        transform: scale(1.2) rotate(180deg);
    }
}

@keyframes pulseGlow {
    0%, 100% { 
        box-shadow: 0 0 20px rgba(240, 147, 251, 0.3),
                    0 0 40px rgba(240, 147, 251, 0.2);
    }
    50% { 
        box-shadow: 0 0 40px rgba(240, 147, 251, 0.6),
                    0 0 80px rgba(240, 147, 251, 0.4);
    }
}

@keyframes scanLines {
    0% { 
        transform: translateY(0);
        opacity: 1;
    }
    100% { 
        transform: translateY(-100px);
        opacity: 0.5;
    }
}

@keyframes dataFlow {
    0% { 
        background-position: 0 0, 0 0, 0 0;
    }
    100% { 
        background-position: 200px 200px, -300px 300px, 250px -250px;
    }
}

@keyframes simpleRays {
    0% { 
        opacity: 0.6;
        transform: scale(1);
    }
    50% { 
        opacity: 1;
        transform: scale(1.02);
    }
    100% { 
        opacity: 0.8;
        transform: scale(1);
    }
}

/* 太阳脉冲动画 */
@keyframes sunPulse {
    0%, 100% { 
        transform: scale(1);
        opacity: 0.9;
    }
    50% { 
        transform: scale(1.2);
        opacity: 1;
    }
}

/* 行星轨道动画 - 基于真实比例调整 */
@keyframes orbit-mercury {
    0% { 
        transform: rotate(0deg) translateX(40px) rotate(0deg);
    }
    100% { 
        transform: rotate(360deg) translateX(40px) rotate(-360deg);
    }
}

@keyframes orbit-venus {
    0% { 
        transform: rotate(0deg) translateX(55px) rotate(0deg);
    }
    100% { 
        transform: rotate(360deg) translateX(55px) rotate(-360deg);
    }
}

@keyframes orbit-earth {
    0% { 
        transform: rotate(0deg) translateX(70px) rotate(0deg);
    }
    100% { 
        transform: rotate(360deg) translateX(70px) rotate(-360deg);
    }
}

@keyframes orbit-mars {
    0% { 
        transform: rotate(0deg) translateX(85px) rotate(0deg);
    }
    100% { 
        transform: rotate(360deg) translateX(85px) rotate(-360deg);
    }
}

@keyframes orbit-jupiter {
    0% { 
        transform: rotate(0deg) translateX(110px) rotate(0deg);
    }
    100% { 
        transform: rotate(360deg) translateX(110px) rotate(-360deg);
    }
}

@keyframes orbit-saturn {
    0% { 
        transform: rotate(0deg) translateX(135px) rotate(0deg);
    }
    100% { 
        transform: rotate(360deg) translateX(135px) rotate(-360deg);
    }
}

@keyframes orbit-uranus {
    0% { 
        transform: rotate(0deg) translateX(160px) rotate(0deg);
    }
    100% { 
        transform: rotate(360deg) translateX(160px) rotate(-360deg);
    }
}

@keyframes orbit-neptune {
    0% { 
        transform: rotate(0deg) translateX(185px) rotate(0deg);
    }
    100% { 
        transform: rotate(360deg) translateX(185px) rotate(-360deg);
    }
}

@keyframes hologramGrid {
    0% { 
        background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
        opacity: 0.6;
    }
    50% { 
        opacity: 1;
    }
    100% { 
        background-position: 200px 200px, -300px 300px, 250px -250px, 100px 100px, -120px 120px;
        opacity: 0.8;
    }
}

/* 主容器 */
.container {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* 头部导航 */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: 1rem 2rem;
    z-index: 1000;
    transition: var(--transition);
}

.header.scrolled {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: var(--shadow);
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
}

.logo-img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 8px;
}

.nav {
    display: flex;
    gap: 2rem;
}

.nav-link {
    text-decoration: none;
    color: var(--text-primary);
    font-weight: 500;
    transition: var(--transition);
    position: relative;
}

.nav-link:hover {
    color: var(--primary-color);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gradient-primary);
    transition: var(--transition);
}

.nav-link:hover::after {
    width: 100%;
}

/* 主要内容区域 */
.main-content {
    flex: 1;
    padding-top: 80px;
}

/* 英雄区域 */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 2rem;
    background: 
        radial-gradient(ellipse at top, rgba(15, 23, 42, 0.9) 0%, rgba(2, 6, 23, 0.95) 100%),
        linear-gradient(135deg, rgba(6, 14, 33, 0.8) 0%, rgba(15, 23, 42, 0.9) 25%, rgba(30, 41, 59, 0.8) 50%, rgba(51, 65, 85, 0.7) 75%, rgba(71, 85, 105, 0.6) 100%);
    position: relative;
    overflow: hidden;
}

/* 科技扫描线效果 */
.hero .tech-scan-lines {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(0deg, 
            transparent 0px, 
            transparent 2px, 
            rgba(102, 126, 234, 0.03) 2px, 
            rgba(102, 126, 234, 0.03) 4px
        ),
        repeating-linear-gradient(90deg, 
            transparent 0px, 
            transparent 2px, 
            rgba(240, 147, 251, 0.025) 2px, 
            rgba(240, 147, 251, 0.025) 4px
        );
    animation: scanLines 20s linear infinite;
    pointer-events: none;
    z-index: 2;
}

/* 数据流效果 */
.hero .data-streams {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(45deg, transparent 0%, transparent 48%, rgba(79, 172, 254, 0.12) 49%, rgba(79, 172, 254, 0.12) 51%, transparent 52%, transparent 100%),
        linear-gradient(-45deg, transparent 0%, transparent 48%, rgba(102, 126, 234, 0.1) 49%, rgba(102, 126, 234, 0.1) 51%, transparent 52%, transparent 100%),
        linear-gradient(135deg, transparent 0%, transparent 48%, rgba(240, 147, 251, 0.08) 49%, rgba(240, 147, 251, 0.08) 51%, transparent 52%, transparent 100%);
    background-size: 200px 200px, 300px 300px, 250px 250px;
    animation: dataFlow 15s linear infinite;
    pointer-events: none;
    z-index: 3;
}

/* 简洁射线效果 */
.hero .simple-rays {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        /* 主射线 */
        linear-gradient(45deg, transparent 0%, transparent 49%, rgba(102, 126, 234, 0.15) 49.5%, rgba(102, 126, 234, 0.15) 50.5%, transparent 51%, transparent 100%),
        /* 次射线 */
        linear-gradient(-45deg, transparent 0%, transparent 49.2%, rgba(240, 147, 251, 0.1) 49.5%, rgba(240, 147, 251, 0.1) 50.5%, transparent 50.8%, transparent 100%);
    animation: simpleRays 30s linear infinite;
    pointer-events: none;
    z-index: 4;
}

/* 太阳系轨道系统 */
.hero .solar-system {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 800px;
    height: 800px;
    margin: -400px 0 0 -400px;
    pointer-events: none;
    z-index: 3;
    opacity: 0.8;
}

/* 太阳 */
.solar-system .sun {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    background: 
        radial-gradient(circle, rgba(255, 204, 0, 1) 0%, rgba(255, 165, 0, 0.9) 50%, rgba(255, 69, 0, 0.7) 100%);
    border-radius: 50%;
    box-shadow: 0 0 40px rgba(255, 204, 0, 1),
                0 0 80px rgba(255, 165, 0, 0.8),
                0 0 120px rgba(255, 69, 0, 0.6);
    animation: sunPulse 4s ease-in-out infinite;
}

/* 行星基础样式 */
.solar-system .planet {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transform-origin: center;
}

/* 水星 - 灰色小行星 */
.planet.mercury {
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    background: radial-gradient(circle, rgba(169, 169, 169, 1) 0%, rgba(105, 105, 105, 0.9) 100%);
    animation: orbit-mercury 8s linear infinite;
    box-shadow: 0 0 15px rgba(169, 169, 169, 0.9),
                0 0 30px rgba(169, 169, 169, 0.6);
}

/* 金星 - 金黄色 */
.planet.venus {
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    background: radial-gradient(circle, rgba(255, 198, 73, 1) 0%, rgba(255, 140, 0, 0.9) 100%);
    animation: orbit-venus 12s linear infinite;
    box-shadow: 0 0 20px rgba(255, 198, 73, 0.9),
                0 0 40px rgba(255, 198, 73, 0.6);
}

/* 地球 - 蓝绿色 */
.planet.earth {
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    background: radial-gradient(circle, rgba(100, 149, 237, 1) 0%, rgba(34, 139, 34, 0.9) 50%, rgba(30, 144, 255, 1) 100%);
    animation: orbit-earth 16s linear infinite;
    box-shadow: 0 0 25px rgba(100, 149, 237, 0.9),
                0 0 50px rgba(100, 149, 237, 0.6);
}

/* 火星 - 红色 */
.planet.mars {
    width: 9px;
    height: 9px;
    margin: -4.5px 0 0 -4.5px;
    background: radial-gradient(circle, rgba(205, 92, 92, 1) 0%, rgba(139, 69, 19, 0.9) 100%);
    animation: orbit-mars 20s linear infinite;
    box-shadow: 0 0 18px rgba(205, 92, 92, 0.9),
                0 0 36px rgba(205, 92, 92, 0.6);
}

/* 木星 - 橙棕色，最大行星 */
.planet.jupiter {
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    background: radial-gradient(circle, rgba(255, 165, 0, 1) 0%, rgba(210, 180, 140, 0.9) 50%, rgba(160, 82, 45, 1) 100%);
    animation: orbit-jupiter 28s linear infinite;
    box-shadow: 0 0 35px rgba(255, 165, 0, 0.9),
                0 0 70px rgba(255, 165, 0, 0.6);
}

/* 土星 - 淡黄色 */
.planet.saturn {
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    background: radial-gradient(circle, rgba(250, 235, 215, 1) 0%, rgba(255, 215, 0, 0.9) 100%);
    animation: orbit-saturn 36s linear infinite;
    box-shadow: 0 0 30px rgba(250, 235, 215, 0.9),
                0 0 60px rgba(250, 235, 215, 0.6);
}

/* 天王星 - 青色 */
.planet.uranus {
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    background: radial-gradient(circle, rgba(64, 224, 208, 1) 0%, rgba(0, 191, 255, 0.9) 100%);
    animation: orbit-uranus 44s linear infinite;
    box-shadow: 0 0 28px rgba(64, 224, 208, 0.9),
                0 0 56px rgba(64, 224, 208, 0.6);
}

/* 海王星 - 深蓝色 */
.planet.neptune {
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    background: radial-gradient(circle, rgba(30, 144, 255, 1) 0%, rgba(0, 0, 139, 0.9) 100%);
    animation: orbit-neptune 52s linear infinite;
    box-shadow: 0 0 28px rgba(30, 144, 255, 0.9),
                0 0 56px rgba(30, 144, 255, 0.6);
}

/* 全息网格效果 */
.hero .hologram-grid {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        /* 六边形网格 */
        radial-gradient(circle at 50px 50px, transparent 20px, rgba(102, 126, 234, 0.04) 21px, rgba(102, 126, 234, 0.04) 22px, transparent 23px),
        radial-gradient(circle at 100px 100px, transparent 15px, rgba(240, 147, 251, 0.035) 16px, rgba(240, 147, 251, 0.035) 17px, transparent 18px),
        radial-gradient(circle at 150px 75px, transparent 18px, rgba(79, 172, 254, 0.03) 19px, rgba(79, 172, 254, 0.03) 20px, transparent 21px),
        /* 连接线 */
        repeating-linear-gradient(30deg, transparent 0px, transparent 48px, rgba(102, 126, 234, 0.02) 49px, rgba(102, 126, 234, 0.02) 51px, transparent 52px, transparent 100px),
        repeating-linear-gradient(150deg, transparent 0px, transparent 48px, rgba(240, 147, 251, 0.015) 49px, rgba(240, 147, 251, 0.015) 51px, transparent 52px, transparent 100px);
    background-size: 200px 200px, 300px 300px, 250px 250px, 100px 100px, 120px 120px;
    animation: hologramGrid 40s linear infinite;
    pointer-events: none;
    z-index: 2;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        /* 密集星空背景 */
        radial-gradient(2px 2px at 20px 30px, #fff, transparent),
        radial-gradient(1px 1px at 40px 70px, rgba(255,255,255,0.8), transparent),
        radial-gradient(3px 3px at 90px 40px, rgba(102, 126, 234, 0.9), transparent),
        radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,0.6), transparent),
        radial-gradient(2px 2px at 160px 30px, rgba(240, 147, 251, 0.8), transparent),
        radial-gradient(1px 1px at 200px 120px, #fff, transparent),
        radial-gradient(2px 2px at 250px 60px, rgba(79, 172, 254, 0.7), transparent),
        radial-gradient(1px 1px at 300px 90px, #eee, transparent),
        radial-gradient(3px 3px at 350px 150px, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 400px 40px, rgba(102, 126, 234, 0.6), transparent),
        radial-gradient(2px 2px at 450px 110px, #ddd, transparent),
        radial-gradient(1px 1px at 500px 70px, rgba(240, 147, 251, 0.7), transparent),
        radial-gradient(2px 2px at 550px 130px, rgba(79, 172, 254, 0.8), transparent),
        radial-gradient(1px 1px at 600px 50px, #fff, transparent),
        /* 星云效果 */
        radial-gradient(ellipse 200px 100px at 25% 25%, rgba(102, 126, 234, 0.08) 0%, transparent 70%),
        radial-gradient(ellipse 150px 200px at 75% 75%, rgba(240, 147, 251, 0.06) 0%, transparent 70%),
        radial-gradient(ellipse 180px 120px at 50% 10%, rgba(79, 172, 254, 0.05) 0%, transparent 70%),
        radial-gradient(ellipse 120px 180px at 10% 60%, rgba(102, 126, 234, 0.04) 0%, transparent 70%),
        radial-gradient(ellipse 160px 140px at 90% 40%, rgba(240, 147, 251, 0.05) 0%, transparent 70%);
    background-repeat: repeat;
    background-size: 150px 150px, 200px 200px, 180px 180px, 250px 250px, 220px 220px,
                     170px 170px, 190px 190px, 210px 210px, 240px 240px, 160px 160px,
                     230px 230px, 180px 180px, 200px 200px, 260px 260px,
                     100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    animation: starfieldMove 60s linear infinite, cosmicPulse 8s ease-in-out infinite alternate;
}

.hero::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1200px;
    height: 1200px;
    margin: -600px 0 0 -600px;
    background: 
        /* 多层旋转星系 */
        conic-gradient(from 0deg, transparent 0deg, rgba(102, 126, 234, 0.15) 30deg, transparent 60deg, rgba(240, 147, 251, 0.12) 90deg, transparent 120deg, rgba(79, 172, 254, 0.15) 150deg, transparent 180deg, rgba(102, 126, 234, 0.1) 210deg, transparent 240deg, rgba(240, 147, 251, 0.13) 270deg, transparent 300deg, rgba(79, 172, 254, 0.12) 330deg, transparent 360deg),
        /* 内层星系臂 */
        conic-gradient(from 45deg, transparent 0deg, rgba(255, 255, 255, 0.03) 20deg, transparent 40deg, rgba(102, 126, 234, 0.08) 80deg, transparent 100deg, rgba(240, 147, 251, 0.06) 140deg, transparent 160deg, rgba(79, 172, 254, 0.08) 200deg, transparent 220deg, rgba(255, 255, 255, 0.04) 260deg, transparent 280deg, rgba(102, 126, 234, 0.07) 320deg, transparent 360deg),
        /* 星系核心 */
        radial-gradient(circle at center, rgba(102, 126, 234, 0.2) 0%, rgba(240, 147, 251, 0.15) 20%, rgba(79, 172, 254, 0.1) 40%, transparent 60%),
        /* 外层光环 */
        radial-gradient(circle at center, transparent 70%, rgba(102, 126, 234, 0.05) 75%, rgba(240, 147, 251, 0.04) 80%, transparent 85%);
    border-radius: 50%;
    opacity: 0.8;
    animation: galaxyRotate 120s linear infinite, galaxyPulse 8s ease-in-out infinite alternate;
}

.hero-content {
    flex: 1;
    max-width: 600px;
    z-index: 2;
    position: relative;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(15px);
    border-radius: 20px;
    padding: 2rem;
    border: 1px solid rgba(102, 126, 234, 0.4);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5),
                0 0 20px rgba(102, 126, 234, 0.2);
}

/* 添加宇宙科技装饰元素 */
.hero-content::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, 
        rgba(102, 126, 234, 0.3) 0%, 
        rgba(240, 147, 251, 0.2) 25%, 
        rgba(79, 172, 254, 0.3) 50%, 
        rgba(102, 126, 234, 0.2) 75%, 
        rgba(240, 147, 251, 0.3) 100%);
    border-radius: 22px;
    z-index: -1;
    animation: borderGlow 4s ease-in-out infinite alternate;
}

.hero-content::after {
    content: '';
    position: absolute;
    top: 10px;
    right: 10px;
    width: 60px;
    height: 60px;
    background: 
        radial-gradient(circle at 30% 30%, rgba(102, 126, 234, 0.6) 0%, transparent 50%),
        radial-gradient(circle at 70% 70%, rgba(240, 147, 251, 0.4) 0%, transparent 50%);
    border-radius: 50%;
    animation: orbitalRotate 15s linear infinite;
    z-index: -1;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    color: #ffffff;
    text-shadow: 0 0 10px rgba(102, 126, 234, 0.5),
                 0 0 20px rgba(102, 126, 234, 0.3),
                 0 0 30px rgba(102, 126, 234, 0.2);
}

.title-line {
    display: block;
    opacity: 0;
    transform: translateY(30px);
    animation: slideInUp 0.8s ease-out forwards;
}

.title-line:nth-child(2) {
    animation-delay: 0.2s;
}

.highlight {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-description {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
    opacity: 0;
    transform: translateY(30px);
    animation: slideInUp 0.8s ease-out 0.4s forwards;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    line-height: 1.6;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    opacity: 0;
    transform: translateY(30px);
    animation: slideInUp 0.8s ease-out 0.6s forwards;
}

.btn {
    padding: 1rem 2rem;
    border: none;
    border-radius: var(--border-radius);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: var(--transition);
}

.btn:hover::before {
    left: 100%;
}

.btn-primary {
    background: var(--gradient-primary);
    color: white;
    box-shadow: var(--shadow);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

.btn-secondary {
    background: white;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.btn-secondary:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-2px);
}

.hero-visual {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.floating-card {
    width: 200px;
    height: 200px;
    background: var(--gradient-primary);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: white;
    box-shadow: var(--shadow-hover);
    animation: floatCard 3s ease-in-out infinite, csgoGlow 4s ease-in-out infinite;
    position: relative;
    padding: 20px;
    border: 2px solid rgba(102, 126, 234, 0.5);
    backdrop-filter: blur(10px);
}

.hero-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 10px;
}

.floating-card::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: var(--gradient-secondary);
    border-radius: 30px;
    z-index: -1;
    opacity: 0.3;
    animation: floatCard 3s ease-in-out infinite reverse;
}

@keyframes slideInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* 宇宙背景动画 */
@keyframes starfieldMove {
    0% { 
        transform: translate(0, 0);
    }
    100% { 
        transform: translate(-200px, -200px);
    }
}

@keyframes cosmicPulse {
    0% { 
        opacity: 0.6;
        transform: scale(1);
    }
    100% { 
        opacity: 0.9;
        transform: scale(1.02);
    }
}

@keyframes galaxyRotate {
    0% { 
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% { 
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes galaxyPulse {
    0% { 
        opacity: 0.4;
        transform: translate(-50%, -50%) scale(0.8);
    }
    100% { 
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

@keyframes borderGlow {
    0% { 
        opacity: 0.5;
        background-size: 200% 200%;
        background-position: 0% 0%;
    }
    100% { 
        opacity: 0.8;
        background-size: 200% 200%;
        background-position: 100% 100%;
    }
}

@keyframes orbitalRotate {
    0% { 
        transform: rotate(0deg) translateX(30px) rotate(0deg);
        opacity: 0.6;
    }
    50% { 
        opacity: 1;
    }
    100% { 
        transform: rotate(360deg) translateX(30px) rotate(-360deg);
        opacity: 0.6;
    }
}

@keyframes csgoGlow {
    0%, 100% { 
        box-shadow: 0 0 20px rgba(102, 126, 234, 0.3),
                    0 0 40px rgba(102, 126, 234, 0.2),
                    0 0 60px rgba(102, 126, 234, 0.1);
    }
    50% { 
        box-shadow: 0 0 30px rgba(240, 147, 251, 0.4),
                    0 0 60px rgba(240, 147, 251, 0.3),
                    0 0 90px rgba(240, 147, 251, 0.2);
    }
}

@keyframes dataStream {
    0% { 
        opacity: 0;
        transform: translateX(-100px);
    }
    50% { 
        opacity: 1;
    }
    100% { 
        opacity: 0;
        transform: translateX(100px);
    }
}

/* 功能特色区域 */
.features {
    padding: 6rem 2rem;
    background: white;
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 3rem;
    color: var(--text-primary);
    position: relative;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: var(--gradient-primary);
    border-radius: 2px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.feature-card {
    background: white;
    padding: 2rem;
    border-radius: var(--border-radius);
    text-align: center;
    box-shadow: var(--shadow);
    transition: var(--transition);
    border: 1px solid rgba(102, 126, 234, 0.1);
}

.feature-card p{
    text-align: left;
}

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-hover);
}

.feature-icon {
    width: 80px;
    height: 80px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2rem;
    color: white;
}

.feature-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.feature-card p {
    color: var(--text-secondary);
    line-height: 1.6;
}

/* 视频介绍区域 */
.video-section {
    padding: 6rem 2rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    position: relative;
}

.video-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>');
}

.video-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.video-section .section-title {
    color: white;
}

.video-section .section-title::after {
    background: white;
}

.video-description {
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 3rem;
    opacity: 0.9;
}

.video-wrapper {
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-hover);
    margin-bottom: 2rem;
}

.video-player {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 比例 */
    background: #000;
}

.video-player video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    cursor: pointer;
    z-index: 10;
    pointer-events: auto;
}

.video-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.play-button {
    width: 100px;
    height: 100px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: white;
    margin-bottom: 1.5rem;
    transition: var(--transition);
    box-shadow: var(--shadow);
}

.play-button:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-hover);
}

.video-info {
    text-align: center;
    color: white;
}

.video-info h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.video-info p {
    opacity: 0.8;
}

.fullscreen-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.7);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.fullscreen-btn:hover {
    background: rgba(0, 0, 0, 0.9);
    transform: scale(1.1);
}

.video-thumbnails {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    margin-top: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.thumbnail {
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius);
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

.thumbnail::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: var(--transition);
}

.thumbnail:hover::before {
    left: 100%;
}

.thumbnail:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.thumbnail.active {
    background: rgba(255, 255, 255, 0.3);
    border-color: white;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.thumbnail-icon {
    width: 40px;
    height: 40px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.5rem;
    font-size: 1.2rem;
    color: white;
    transition: var(--transition);
}

.thumbnail:hover .thumbnail-icon {
    transform: scale(1.1);
    background: var(--gradient-secondary);
}

.thumbnail.active .thumbnail-icon {
    background: var(--gradient-accent);
    box-shadow: 0 4px 15px rgba(79, 172, 254, 0.4);
}

.thumbnail span {
    font-size: 0.9rem;
    font-weight: 500;
    color: white;
    display: block;
    margin-top: 0.5rem;
}


/* 下载区域 */
.download-section {
    padding: 6rem 2rem;
    background: white;
    text-align: center;
}

.download-content h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.download-content .download-subtitle {
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

/* Hero 安装提示链接 */
.hero-install-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: var(--transition);
    border-bottom: 1px solid transparent;
}

.hero-install-hint:hover {
    color: white;
    border-bottom-color: rgba(255, 255, 255, 0.5);
}

.hero-install-hint i {
    color: var(--accent-color);
}

/* 安装重要提示横幅 */
.install-notices {
    position: relative;
    max-width: 960px;
    margin: 0 auto 2.5rem;
    padding: 1.5rem 1.75rem 1.5rem 2rem;
    text-align: left;
    scroll-margin-top: 100px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.12) 100%);
    border: 1px solid rgba(102, 126, 234, 0.25);
    border-radius: var(--border-radius);
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.12);
    animation: noticeFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
    overflow: hidden;
}

.install-notices::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--gradient-primary);
}

.install-notices__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.install-notices__badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--gradient-primary);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    border-radius: 999px;
}

.install-notices__version {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.install-notices__list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

.install-notices__item {
    display: flex;
    gap: 1rem;
    padding: 0 1.25rem;
    animation: noticeItemIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.install-notices__item:nth-child(1) { animation-delay: 0.1s; }
.install-notices__item:nth-child(2) { animation-delay: 0.2s; }
.install-notices__item:nth-child(3) { animation-delay: 0.3s; }

.install-notices__item:not(:last-child) {
    border-right: 1px solid rgba(102, 126, 234, 0.15);
}

.install-notices__item:first-child {
    padding-left: 0;
}

.install-notices__item:last-child {
    padding-right: 0;
}

.install-notices__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary);
    border-radius: 50%;
    color: white;
    font-size: 1.1rem;
}

.install-notices__icon--pulse {
    animation: noticePulse 3s ease-in-out infinite;
}

.install-notices__text h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.install-notices__text p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.install-notices__text code {
    padding: 0.1rem 0.35rem;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 4px;
    font-size: 0.8rem;
    color: var(--primary-color);
}

.install-notices__tag {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.1rem 0.45rem;
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
    font-size: 0.65rem;
    font-weight: 600;
    border-radius: 4px;
    vertical-align: middle;
}

/* 更换路径独立提示 */
.install-notices__path-tip {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px dashed rgba(102, 126, 234, 0.25);
    animation: noticeItemIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.35s both;
}

.install-notices__path-head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.85rem;
}

.install-notices__path-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(102, 126, 234, 0.12);
    border: 1px solid rgba(102, 126, 234, 0.2);
    border-radius: 8px;
    color: var(--primary-color);
    font-size: 0.85rem;
}

.install-notices__path-head h4 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.install-notices__path-flow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.35rem;
}

.install-notices__path-step {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(102, 126, 234, 0.15);
    border-radius: 999px;
    font-size: 0.8rem;
    color: var(--text-primary);
    white-space: nowrap;
}

.install-notices__path-step em {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: var(--gradient-primary);
    color: white;
    font-style: normal;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 50%;
    flex-shrink: 0;
}

.install-notices__path-arrow {
    font-size: 0.6rem;
    color: rgba(102, 126, 234, 0.45);
    flex-shrink: 0;
}

.install-notices__path-note {
    margin: 0.75rem 0 0;
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.install-notices__path-note code {
    padding: 0.1rem 0.35rem;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--primary-color);
}

/* 安装指引 */
.install-guide {
    max-width: 960px;
    margin: 3.5rem auto 0;
    text-align: left;
    animation: noticeFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both;
}

.install-guide__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    margin-bottom: 0.5rem;
}

.install-guide__subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 2rem;
}

.install-guide__steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    position: relative;
}

.install-guide__steps::before {
    content: '';
    position: absolute;
    top: 28px;
    left: 15%;
    right: 15%;
    height: 2px;
    background: linear-gradient(90deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.4), rgba(102, 126, 234, 0.2));
    z-index: 0;
}

.install-guide__step {
    position: relative;
    z-index: 1;
    background: white;
    padding: 1.75rem 1.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    border: 1px solid rgba(102, 126, 234, 0.1);
    transition: var(--transition);
}

.install-guide__step:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.install-guide__step-num {
    width: 56px;
    height: 56px;
    margin: 0 auto 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary);
    color: white;
    font-size: 1.25rem;
    font-weight: 700;
    border-radius: 50%;
}

.install-guide__step h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    text-align: center;
}

.install-guide__step p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.install-guide__step code {
    padding: 0.1rem 0.35rem;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 4px;
    font-size: 0.8rem;
    color: var(--primary-color);
}

.install-guide__more {
    margin-top: 2rem;
    border: 1px solid rgba(102, 126, 234, 0.15);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.install-guide__more summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--primary-color);
    background: rgba(102, 126, 234, 0.04);
    list-style: none;
    transition: var(--transition);
}

.install-guide__more summary::-webkit-details-marker {
    display: none;
}

.install-guide__more summary:hover {
    background: rgba(102, 126, 234, 0.08);
}

.install-guide__chevron {
    transition: transform 0.3s ease;
}

.install-guide__more[open] .install-guide__chevron {
    transform: rotate(180deg);
}

.install-guide__more-body {
    padding: 1.25rem 1.5rem;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
}

.install-guide__more-body p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.install-guide__more-body p:last-child {
    margin-bottom: 0;
}

.install-guide__subsection {
    margin-bottom: 0.75rem;
}

.install-guide__terminal-steps {
    margin: 0.75rem 0 1rem;
    padding-left: 1.25rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.65;
}

.install-guide__terminal-steps li {
    margin-bottom: 0.85rem;
}

.install-guide__terminal-steps li:last-child {
    margin-bottom: 0;
}

.install-guide__terminal-steps strong {
    color: var(--text-primary);
}

.install-guide__terminal-steps code {
    padding: 0.1rem 0.35rem;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 4px;
    font-size: 0.8rem;
    color: var(--primary-color);
}

.install-guide__step-alt {
    display: block;
    margin-top: 0.45rem;
    padding-left: 0.75rem;
    border-left: 2px solid rgba(102, 126, 234, 0.2);
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.install-guide__more-body kbd {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    background: rgba(102, 126, 234, 0.08);
    border: 1px solid rgba(102, 126, 234, 0.2);
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.75rem;
    color: var(--text-primary);
    box-shadow: 0 1px 0 rgba(102, 126, 234, 0.1);
}

.install-guide__code-hint {
    margin: -0.25rem 0 0.75rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.install-guide__code-hint code {
    padding: 0.1rem 0.35rem;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--primary-color);
}

.install-guide__code-wrap {
    position: relative;
    margin: 0.75rem 0 1rem;
}

.install-guide__code {
    display: block;
    padding: 1rem 3rem 1rem 1rem;
    margin: 0;
    background: #1a202c;
    color: #e2e8f0;
    border-radius: 8px;
    font-size: 0.8rem;
    line-height: 1.5;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

.install-guide__copy-btn {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(226, 232, 240, 0.2);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    color: #a0aec0;
    cursor: pointer;
    transition: var(--transition);
}

.install-guide__copy-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #e2e8f0;
    border-color: rgba(226, 232, 240, 0.35);
}

.install-guide__copy-btn--success {
    background: rgba(72, 187, 120, 0.2);
    border-color: rgba(72, 187, 120, 0.4);
    color: #68d391;
}

@keyframes noticeFadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes noticeItemIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes noticePulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(102, 126, 234, 0);
    }
}

.download-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.download-btn {
    padding: 1.5rem 2rem;
    background: white;
    border: 2px solid var(--primary-color);
    border-radius: var(--border-radius);
    color: var(--primary-color);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 180px;
    justify-content: center;
    text-decoration: none;
}

.download-btn:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-5px);
    box-shadow: var(--shadow);
}

/* 页脚 */
.footer {
    background: var(--text-primary);
    color: white;
    padding: 2rem;
    text-align: center;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
}

.footer-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.footer-logo-img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    border-radius: 6px;
}

/* 全屏视频模态框 */
.fullscreen-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
}

.fullscreen-modal.active {
    display: flex;
}

.fullscreen-content {
    position: relative;
    width: 90%;
    height: 90%;
    max-width: 1200px;
}

.close-fullscreen {
    position: absolute;
    top: -50px;
    right: 0;
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    transition: var(--transition);
    z-index: 10001;
}

.close-fullscreen:hover {
    color: var(--primary-color);
    transform: scale(1.1);
}

#fullscreenVideo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 响应式设计 */
@media (max-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .header {
        padding: 1rem;
    }
    
    .nav {
        display: none;
    }
    
    .hero {
        flex-direction: column;
        text-align: center;
        padding: 1rem;
    }
    
    .hero::after {
        width: 400px;
        height: 400px;
        margin: -200px 0 0 -200px;
        opacity: 0.3;
    }
    
    .hero-content {
        padding: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .hero-content::after {
        width: 40px;
        height: 40px;
        top: 5px;
        right: 5px;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .btn {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
    
    .floating-card {
        width: 150px;
        height: 150px;
        font-size: 3rem;
        margin-top: 2rem;
    }
    
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .particles-container::before {
        width: 80px;
        height: 80px;
        top: 5%;
        right: 5%;
    }
    
    .particles-container::after {
        width: 60px;
        height: 60px;
        bottom: 10%;
        left: 10%;
    }
    
    .particle {
        width: 4px;
        height: 4px;
    }
    
    .particle:nth-child(4n) {
        width: 2px;
        height: 2px;
    }
    
    .download-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .download-btn {
        width: 100%;
        max-width: 300px;
    }

    .install-notices {
        padding: 1.25rem 1rem 1.25rem 1.25rem;
    }

    .install-notices__list {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .install-notices__item {
        padding: 0;
        border-right: none !important;
    }

    .install-notices__item:not(:last-child) {
        padding-bottom: 1.25rem;
        border-bottom: 1px solid rgba(102, 126, 234, 0.15);
    }

    .install-notices__path-flow {
        flex-direction: column;
        align-items: stretch;
    }

    .install-notices__path-step {
        white-space: normal;
    }

    .install-notices__path-arrow {
        display: none;
    }

    .install-guide__steps {
        grid-template-columns: 1fr;
    }

    .install-guide__steps::before {
        display: none;
    }
    
    .fullscreen-content {
        width: 95%;
        height: 95%;
    }
}

@media (max-width: 480px) {
    .hero::after {
        width: 300px;
        height: 300px;
        margin: -150px 0 0 -150px;
        opacity: 0.2;
    }
    
    .hero-content {
        padding: 1rem;
    }
    
    .hero-content::after {
        width: 30px;
        height: 30px;
        top: 3px;
        right: 3px;
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-description {
        font-size: 1rem;
    }

    .hero-install-hint {
        font-size: 0.8rem;
        text-align: center;
        justify-content: center;
    }

    .install-notices__text h3 {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.35rem;
    }

    .install-notices__tag {
        margin-left: 0;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .floating-card {
        width: 120px;
        height: 120px;
    }
    
    .particles-container::before {
        width: 60px;
        height: 60px;
        top: 3%;
        right: 3%;
    }
    
    .particles-container::after {
        width: 50px;
        height: 50px;
        bottom: 8%;
        left: 8%;
    }
    
    .particle {
        width: 3px;
        height: 3px;
    }
    
    .particle:nth-child(4n) {
        width: 1.5px;
        height: 1.5px;
    }
    
    .play-button {
        width: 80px;
        height: 80px;
        font-size: 2rem;
    }
}

/* 滚动动画 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

/* 加载动画 */
.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Logo 样式优化 */
.logo-img {
    transition: var(--transition);
}

.logo-img:hover {
    transform: scale(1.1);
}

.hero-logo {
    transition: var(--transition);
}

.hero-logo:hover {
    transform: scale(1.05);
}

.footer-logo-img {
    transition: var(--transition);
}

.footer-logo-img:hover {
    transform: scale(1.1);
}

/* 功能卡片图标优化 */
.feature-icon i {
    transition: var(--transition);
}

.feature-card:hover .feature-icon i {
    transform: scale(1.1);
}

/* 回到顶部按钮 */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: var(--gradient-primary);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    transition: var(--transition);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.8);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    justify-content: center;
}

.back-to-top:hover {
    transform: translateY(-5px) scale(1.1);
    box-shadow: var(--shadow-hover);
    background: var(--gradient-secondary);
}

.back-to-top:active {
    transform: translateY(-2px) scale(1.05);
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.back-to-top i {
    transition: var(--transition);
}

.back-to-top:hover i {
    transform: translateY(-2px);
}

/* 响应式logo调整 */
@media (max-width: 768px) {
    .logo-img {
        width: 35px;
        height: 35px;
    }
    
    .hero-logo {
        width: 80%;
        height: 80%;
    }
    
    .footer-logo-img {
        width: 25px;
        height: 25px;
    }
    
    .back-to-top {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
        font-size: 1rem;
    }
    
    .video-thumbnails {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.8rem;
        margin-top: 1.5rem;
    }
    
    .thumbnail {
        padding: 0.8rem;
    }
    
    .thumbnail-icon {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }
    
    .thumbnail span {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .video-thumbnails {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.6rem;
    }
    
    .thumbnail {
        padding: 0.6rem;
    }
    
    .thumbnail-icon {
        width: 30px;
        height: 30px;
        font-size: 0.9rem;
    }
    
    .thumbnail span {
        font-size: 0.75rem;
    }
}

/* 进度模态框样式 */
.progress-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    backdrop-filter: blur(5px);
}

.progress-content {
    background: var(--white);
    border-radius: var(--border-radius);
    padding: 2rem;
    width: 90%;
    max-width: 500px;
    box-shadow: var(--shadow-hover);
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e2e8f0;
}

.progress-header h3 {
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.close-btn {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
}

.close-btn:hover {
    background: #f1f5f9;
    color: var(--text-primary);
}

.progress-body {
    text-align: center;
}

.progress-bar-container {
    position: relative;
    margin-bottom: 1rem;
}

.progress-bar {
    width: 100%;
    height: 20px;
    background: #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.progress-fill {
    height: 100%;
    background: var(--gradient-primary);
    border-radius: 10px;
    transition: width 0.3s ease;
    position: relative;
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: progressShimmer 2s infinite;
}

@keyframes progressShimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
    text-shadow: 0 1px 2px rgba(255,255,255,0.8);
}

.progress-message {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    min-height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.progress-actions {
    margin-top: 1rem;
}

.progress-actions .btn {
    padding: 0.75rem 2rem;
    font-size: 1rem;
    border-radius: var(--border-radius);
    border: none;
    cursor: pointer;
    transition: var(--transition);
    background: var(--gradient-primary);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.progress-actions .btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .progress-content {
        padding: 1.5rem;
        margin: 1rem;
    }
    
    .progress-header h3 {
        font-size: 1.1rem;
    }
    
    .progress-actions .btn {
        padding: 0.6rem 1.5rem;
        font-size: 0.9rem;
    }
}