/* ==========================================================================
   风格 7：赛博光纤穿梭风 (Neon Grid & Light Speed Theme)
   ========================================================================== */

:root {
    --primary-color: #00F2FE !important;
    --secondary-color: #7928CA !important;
    --text-dark: #F8FAFC !important;
    --text-light: #94A3B8 !important;
    --border-color: rgba(0, 242, 254, 0.15) !important;
    --bg-gradient-start: #06070B !important;
    --bg-gradient-end: #0B0F19 !important;
    --white: #0E1320 !important;
}

/* 1. 全局深色赛博背景 */
html, body {
    background-color: #06070B !important;
    color: #F8FAFC !important;
}

body {
    background-image: 
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(0, 242, 254, 0.15), transparent),
        radial-gradient(circle at 10% 25%, rgba(121, 40, 202, 0.12), transparent 40%),
        radial-gradient(circle at 90% 65%, rgba(0, 242, 254, 0.1), transparent 45%),
        linear-gradient(180deg, #06070B 0%, #0B0F19 50%, #06070B 100%) !important;
}

/* 2. 赛博滚动条 */
body::-webkit-scrollbar-track {
    background: rgba(6, 7, 11, 0.9) !important;
}
body::-webkit-scrollbar-thumb {
    background: rgba(0, 242, 254, 0.45) !important;
    border: 2px solid rgba(6, 7, 11, 0.6) !important;
}
body::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 242, 254, 0.8) !important;
}

/* 3. 导航栏 (Navbar) */
.navbar {
    background: rgba(6, 7, 11, 0.85) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(0, 242, 254, 0.16) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
}

.logo span {
    color: #FFFFFF !important;
    text-shadow: 0 0 12px rgba(0, 242, 254, 0.4);
}

.nav-links a {
    color: #94A3B8 !important;
    transition: all 0.25s ease !important;
}

.nav-links a:hover,
.nav-links a.active {
    color: #00F2FE !important;
    text-shadow: 0 0 10px rgba(0, 242, 254, 0.6) !important;
}

.btn-login {
    background: linear-gradient(135deg, #00F2FE 0%, #4FACFE 50%, #7928CA 100%) !important;
    color: #06070B !important;
    font-weight: 700 !important;
    border-radius: 20px !important;
    box-shadow: 0 0 16px rgba(0, 242, 254, 0.4) !important;
    transition: all 0.3s ease !important;
}

.btn-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(0, 242, 254, 0.7), 0 0 40px rgba(121, 40, 202, 0.4) !important;
    color: #000000 !important;
}

/* 4. 首屏 Hero 区域 & 透视网格 */
.hero-section {
    background: transparent !important;
    position: relative;
}

.hero-section::before {
    background: transparent !important;
    background-image: 
        linear-gradient(rgba(0, 242, 254, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 242, 254, 0.05) 1px, transparent 1px) !important;
    background-size: 40px 40px !important;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 20%, transparent 80%) !important;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 20%, transparent 80%) !important;
}

.hero-title {
    background: linear-gradient(135deg, #FFFFFF 25%, #00F2FE 70%, #7928CA 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 0 35px rgba(0, 242, 254, 0.25)) !important;
}

.hero-subtitle {
    color: #94A3B8 !important;
}

.client-support-text {
    color: #CBD5E1 !important;
    text-shadow: 0 0 10px rgba(0, 242, 254, 0.2);
}

.private-client-text {
    color: #E2E8F0 !important;
    background: rgba(0, 242, 254, 0.08) !important;
    border: 1px solid rgba(0, 242, 254, 0.25) !important;
    box-shadow: 0 0 20px rgba(0, 242, 254, 0.1) !important;
}

.client-logo {
    background: rgba(14, 19, 30, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

.client-logo:hover {
    border-color: #00F2FE !important;
    box-shadow: 0 0 20px rgba(0, 242, 254, 0.45) !important;
    transform: translateY(-4px) !important;
}

.client-item span {
    color: #94A3B8 !important;
}

.device-frame {
    background: #090B10 !important;
    border: 1px solid rgba(0, 242, 254, 0.22) !important;
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.85), 0 0 40px rgba(0, 242, 254, 0.18) !important;
}

.device-wrapper:hover .device-frame {
    box-shadow: 0 50px 110px rgba(0, 0, 0, 0.95), 0 0 60px rgba(0, 242, 254, 0.35) !important;
    border-color: rgba(0, 242, 254, 0.5) !important;
}

.device-badge {
    background: rgba(14, 18, 28, 0.88) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(0, 242, 254, 0.3) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 242, 254, 0.2) !important;
}

.device-badge span {
    color: #F8FAFC !important;
}

.device-badge svg {
    color: #00F2FE !important;
    stroke: #00F2FE !important;
}

/* 5. 功能特性 (Features) */
.features-section {
    background: transparent !important;
}

.section-tag {
    color: #00F2FE !important;
    text-shadow: 0 0 10px rgba(0, 242, 254, 0.4);
}

.section-title {
    color: #FFFFFF !important;
}

.section-title .highlight {
    background: linear-gradient(135deg, #00F2FE 0%, #7928CA 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.section-subtitle {
    color: #94A3B8 !important;
}

.feature-card {
    background: rgba(14, 19, 30, 0.65) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(0, 242, 254, 0.12) !important;
    position: relative;
    overflow: hidden;
    transition: all 0.35s ease !important;
}

.feature-card:hover {
    background: rgba(18, 25, 40, 0.85) !important;
    border-color: rgba(0, 242, 254, 0.35) !important;
    transform: translateY(-6px) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 25px rgba(0, 242, 254, 0.2) !important;
}

.feature-icon {
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.15) 0%, rgba(121, 40, 202, 0.25) 100%) !important;
    border: 1px solid rgba(0, 242, 254, 0.35) !important;
    color: #00F2FE !important;
    box-shadow: 0 0 20px rgba(0, 242, 254, 0.2) !important;
}

.feature-title {
    color: #F8FAFC !important;
}

.feature-desc {
    color: #94A3B8 !important;
}

/* 6. 套餐价格 (Pricing) */
.pricing-section {
    background: transparent !important;
}

.pricing-mode-selector {
    background: rgba(14, 19, 30, 0.85) !important;
    border: 1px solid rgba(0, 242, 254, 0.2) !important;
    border-radius: 16px !important;
    box-shadow: 0 0 25px rgba(0, 242, 254, 0.1) !important;
}

.mode-btn {
    border-radius: 12px !important;
}

.mode-btn.active {
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.18) 0%, rgba(121, 40, 202, 0.25) 100%) !important;
    border: 1px solid rgba(0, 242, 254, 0.45) !important;
    box-shadow: 0 0 15px rgba(0, 242, 254, 0.25) !important;
}

.mode-title {
    color: #E2E8F0 !important;
}

.mode-btn.active .mode-title {
    color: #00F2FE !important;
    text-shadow: 0 0 8px rgba(0, 242, 254, 0.5) !important;
}

.mode-desc {
    color: #64748B !important;
}

.mode-btn.active .mode-desc {
    color: #94A3B8 !important;
}

.pricing-card {
    background: rgba(14, 19, 30, 0.72) !important;
    backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    border-radius: 24px !important;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.pricing-card:hover {
    transform: translateY(-8px) !important;
    border-color: rgba(0, 242, 254, 0.35) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7), 0 0 30px rgba(0, 242, 254, 0.2) !important;
}

.pricing-card.featured {
    background: linear-gradient(rgba(14, 19, 30, 0.95), rgba(14, 19, 30, 0.95)) padding-box,
                linear-gradient(135deg, #00F2FE, #7928CA, #FF007A, #00F2FE) border-box !important;
    border: 2px solid transparent !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 35px rgba(0, 242, 254, 0.3) !important;
}

.pricing-card.featured:hover {
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9), 0 0 50px rgba(0, 242, 254, 0.5) !important;
    transform: translateY(-8px) !important;
}

.pricing-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.pricing-title {
    color: #FFFFFF !important;
}

.price-symbol {
    color: #00F2FE !important;
}

.price-amount {
    color: #FFFFFF !important;
    text-shadow: 0 0 15px rgba(0, 242, 254, 0.3) !important;
}

.pricing-features {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.feature-item {
    color: #CBD5E1 !important;
}

.feature-item .arrow-icon,
.pricing-card.featured .feature-item .arrow-icon {
    color: #00F2FE !important;
    filter: drop-shadow(0 0 6px rgba(0, 242, 254, 0.5)) !important;
}

.support-label {
    color: #CBD5E1 !important;
}

.support-detail {
    color: #64748B !important;
}

.support-badge {
    background: rgba(0, 242, 254, 0.15) !important;
    color: #00F2FE !important;
    border: 1px solid rgba(0, 242, 254, 0.3) !important;
}

.pricing-btn {
    border: 1px solid rgba(0, 242, 254, 0.35) !important;
    background: rgba(0, 242, 254, 0.08) !important;
    color: #00F2FE !important;
    border-radius: 14px !important;
    font-weight: 700 !important;
    box-shadow: 0 0 15px rgba(0, 242, 254, 0.15) !important;
    transition: all 0.3s ease !important;
}

.pricing-btn:hover {
    background: rgba(0, 242, 254, 0.2) !important;
    border-color: #00F2FE !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 25px rgba(0, 242, 254, 0.45) !important;
    transform: translateY(-2px) !important;
}

.pricing-btn.primary {
    background: linear-gradient(135deg, #00F2FE 0%, #4FACFE 50%, #7928CA 100%) !important;
    color: #06070B !important;
    border: none !important;
    font-weight: 800 !important;
    box-shadow: 0 0 25px rgba(0, 242, 254, 0.45) !important;
}

.pricing-btn.primary:hover {
    box-shadow: 0 0 35px rgba(0, 242, 254, 0.75), 0 0 50px rgba(121, 40, 202, 0.4) !important;
    transform: translateY(-2px) !important;
    color: #000000 !important;
}

/* 7. 常见问题 (FAQ) */
.faq-section {
    background: transparent !important;
}

.faq-illustration {
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.1) 0%, rgba(121, 40, 202, 0.15) 100%) !important;
    border: 1px solid rgba(0, 242, 254, 0.2) !important;
}

.faq-item {
    background: rgba(14, 19, 30, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

.faq-item:hover {
    border-color: rgba(0, 242, 254, 0.3) !important;
}

.faq-item.active {
    border-color: rgba(0, 242, 254, 0.4) !important;
    box-shadow: 0 0 25px rgba(0, 242, 254, 0.15) !important;
}

.faq-question {
    color: #F8FAFC !important;
}

.faq-icon {
    color: #00F2FE !important;
}

.faq-answer p {
    color: #94A3B8 !important;
}

/* 8. 页脚 (Footer) */
.footer {
    background: rgba(6, 7, 11, 0.95) !important;
    border-top: 1px solid rgba(0, 242, 254, 0.15) !important;
    color: #64748B !important;
}

.footer-brand-simple .logo {
    color: #FFFFFF !important;
}

.footer-slogan {
    color: #64748B !important;
}

.copyright {
    color: #475569 !important;
}


/* 9. 价格滑块与统计展示 (Slider & Stats) */
.price-slider-container {
    background: rgba(14, 19, 30, 0.75) !important;
    border: 1px solid rgba(0, 242, 254, 0.15) !important;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.5) !important;
}

.price-value {
    background: linear-gradient(135deg, #00F2FE 0%, #4FACFE 50%, #7928CA 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.price-labels {
    color: #CBD5E1 !important;
}

.stat-showcase-value {
    color: #FFFFFF !important;
}

.stat-showcase-label {
    color: #94A3B8 !important;
}

/* 10. 用户评价与下载页卡片 (Download & Testimonials) */
.testimonial-card {
    background: rgba(14, 19, 30, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

.testimonial-card:hover {
    border-color: rgba(0, 242, 254, 0.35) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 242, 254, 0.2) !important;
}

.testimonial-name {
    color: #FFFFFF !important;
}

.testimonial-username {
    color: #64748B !important;
}

.testimonial-content {
    color: #94A3B8 !important;
}

.download-hero-section {
    background: transparent !important;
}

.download-intro-section,
.download-official-section,
.download-thirdparty-section,
.testimonials-scroll-section,
.download-faq-section {
    background: transparent !important;
}

.intro-card,
.official-client-card,
.client-download-card,
.thirdparty-platform,
.thirdparty-platform-item {
    background: rgba(14, 19, 30, 0.75) !important;
    border: 1px solid rgba(0, 242, 254, 0.14) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

.intro-card:hover,
.official-client-card:hover,
.client-download-card:hover,
.thirdparty-platform:hover,
.thirdparty-platform-item:hover {
    border-color: rgba(0, 242, 254, 0.4) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6), 0 0 25px rgba(0, 242, 254, 0.25) !important;
}

.intro-card h3,
.official-client-card h4,
.client-info h4,
.thirdparty-category h4,
.platform-name {
    color: #FFFFFF !important;
}

.intro-card p,
.official-client-card p,
.client-desc {
    color: #94A3B8 !important;
}

.tag-mini {
    background: rgba(0, 242, 254, 0.08) !important;
    border: 1px solid rgba(0, 242, 254, 0.25) !important;
    color: #00F2FE !important;
}

.btn-official {
    background: linear-gradient(135deg, #00F2FE 0%, #4FACFE 50%, #7928CA 100%) !important;
    color: #06070B !important;
    font-weight: 700 !important;
    box-shadow: 0 0 20px rgba(0, 242, 254, 0.35) !important;
}

.download-cta-section {
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.12) 0%, rgba(121, 40, 202, 0.22) 100%) !important;
    border-top: 1px solid rgba(0, 242, 254, 0.2) !important;
    border-bottom: 1px solid rgba(0, 242, 254, 0.2) !important;
}

.btn-primary {
    background: linear-gradient(135deg, #00F2FE 0%, #4FACFE 100%) !important;
    color: #06070B !important;
    font-weight: 700 !important;
    box-shadow: 0 0 25px rgba(0, 242, 254, 0.4) !important;
}

.btn-secondary {
    background: rgba(0, 242, 254, 0.08) !important;
    border: 1px solid rgba(0, 242, 254, 0.4) !important;
    color: #00F2FE !important;
}