@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@500;600;700&display=swap');

        :root {
            --deep-blue: #0f172a;
            --electric-blue: #2563eb;
            --vivid-cyan: #06b6d4;
            --emerald-bright: #10b981;
            --amber-glow: #f59e0b;
            --slate-cool: #64748b;
            --surface-white: #ffffff;
            --surface-soft: #f8fafc;
            --border-subtle: #e2e8f0;
            --shadow-card: 0 12px 40px -12px rgba(0, 0, 0, 0.06);
            --shadow-elevated: 0 24px 56px -16px rgba(37, 99, 235, 0.14);
            --radius-xl: 1.25rem;
            --radius-2xl: 1.75rem;
            --radius-3xl: 2.25rem;
            --transition-smooth: 0.35s cubic-bezier(0.22, 1, 0.36, 1);
        }

        body {
            font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
            background-color: #fafbfc;
            color: #0f172a;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            overflow-x: hidden;
        }

        /* 创意光晕网格背景 */
        .hero-aurora {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            overflow: hidden;
        }
        .hero-aurora .orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(100px);
            opacity: 0.13;
            animation: floatOrb 18s ease-in-out infinite;
        }
        .hero-aurora .orb-1 {
            width: 620px;
            height: 620px;
            background: radial-gradient(circle, #2563eb 0%, transparent 70%);
            top: -180px;
            right: -100px;
            animation-delay: 0s;
        }
        .hero-aurora .orb-2 {
            width: 480px;
            height: 480px;
            background: radial-gradient(circle, #10b981 0%, transparent 70%);
            bottom: -140px;
            left: -80px;
            animation-delay: -7s;
        }
        .hero-aurora .orb-3 {
            width: 360px;
            height: 360px;
            background: radial-gradient(circle, #7c3aed 0%, transparent 70%);
            top: 40%;
            left: 50%;
            animation-delay: -12s;
            opacity: 0.08;
        }
        @keyframes floatOrb {
            0%,
            100% {
                transform: translate(0, 0) scale(1);
            }
            25% {
                transform: translate(60px, -50px) scale(1.08);
            }
            50% {
                transform: translate(-30px, 30px) scale(0.94);
            }
            75% {
                transform: translate(-55px, -25px) scale(1.05);
            }
        }

        /* 卡片通用样式 */
        .card-elevated {
            background: #ffffff;
            border: 1px solid #e8ecf1;
            border-radius: var(--radius-2xl);
            box-shadow: var(--shadow-card);
            transition: var(--transition-smooth);
            position: relative;
            overflow: hidden;
        }
        .card-elevated:hover {
            transform: translateY(-5px);
            border-color: #cbd5e1;
            box-shadow: var(--shadow-elevated);
        }
        .card-elevated::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, #2563eb40, #10b98140, transparent);
            opacity: 0;
            transition: opacity 0.4s ease;
        }
        .card-elevated:hover::after {
            opacity: 1;
        }

        /* 渐变文字 */
        .text-gradient-brand {
            background: linear-gradient(135deg, #2563eb 0%, #0d9488 55%, #06b6d4 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .text-gradient-warm {
            background: linear-gradient(135deg, #ea580c 0%, #f59e0b 50%, #eab308 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .text-gradient-emerald {
            background: linear-gradient(135deg, #059669 0%, #10b981 50%, #34d399 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* 主按钮 */
        .btn-primary-glow {
            background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
            box-shadow: 0 8px 28px -6px rgba(37, 99, 235, 0.4);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            z-index: 1;
        }
        .btn-primary-glow::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
            opacity: 0;
            transition: opacity 0.3s ease;
            z-index: -1;
            border-radius: inherit;
        }
        .btn-primary-glow:hover {
            box-shadow: 0 14px 36px -6px rgba(37, 99, 235, 0.55);
            transform: translateY(-3px);
        }
        .btn-primary-glow:hover::before {
            opacity: 1;
        }

        /* 状态指示器动画 */
        .pulse-dot {
            animation: pulseDot 2.2s ease-in-out infinite;
        }
        @keyframes pulseDot {
            0%,
            100% {
                box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
            }
            50% {
                box-shadow: 0 0 0 14px rgba(16, 185, 129, 0);
            }
        }

        /* 创意统计数字滚动 */
        .stat-number {
            font-family: 'Space Grotesk', 'Plus Jakarta Sans', monospace;
            font-weight: 700;
            letter-spacing: -0.03em;
        }

        /* 速度对比条 */
        .speed-bar-glow {
            background: linear-gradient(90deg, #2563eb 0%, #06b6d4 60%, #10b981 100%);
            background-size: 200% 100%;
            animation: shimmerBar 3s ease-in-out infinite;
            border-radius: 999px;
        }
        @keyframes shimmerBar {
            0%,
            100% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
        }

        /* 隐私守护六边形网格 */
        .hex-icon-wrap {
            width: 56px;
            height: 56px;
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition-smooth);
        }

        /* 全球节点涟漪 */
        .node-ripple {
            animation: rippleOut 2.5s ease-out infinite;
        }
        @keyframes rippleOut {
            0% {
                box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.45);
            }
            100% {
                box-shadow: 0 0 0 28px rgba(37, 99, 235, 0);
            }
        }

        /* 分割线装饰 */
        .divider-dot-pattern {
            height: 4px;
            background-image: radial-gradient(circle, #cbd5e1 1.2px, transparent 1.2px);
            background-size: 12px 4px;
            background-repeat: repeat-x;
            border: none;
            opacity: 0.7;
        }

        /* 滚动条美化 */
        ::-webkit-scrollbar {
            width: 6px;
        }
        ::-webkit-scrollbar-track {
            background: #f1f5f9;
        }
        ::-webkit-scrollbar-thumb {
            background: #94a3b8;
            border-radius: 999px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #64748b;
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .hero-aurora .orb {
                filter: blur(70px);
            }
            .hero-aurora .orb-1 {
                width: 350px;
                height: 350px;
                top: -100px;
                right: -60px;
            }
            .hero-aurora .orb-2 {
                width: 280px;
                height: 280px;
                bottom: -80px;
                left: -40px;
            }
            .card-elevated:hover {
                transform: translateY(-3px);
            }
        }