/* roulang page: index */
:root {
            --primary: #0F172A;
            --emerald-glow: #00DC82;
            --emerald-deep: #059669;
            --accent-orange: #F97316;
            --accent-purple: #6366F1;
            --surface-bg: #F8FAFC;
            --card-border: #E2E8F0;
        }

        body {
            font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
            background-color: var(--surface-bg);
            color: #1E293B;
            line-height: 1.75;
            -webkit-font-smoothing: antialiased;
        }

        .hero-mesh {
            background-image: radial-gradient(circle at 10% 20%, rgba(0, 220, 130, 0.12) 0%, transparent 40%),
                              radial-gradient(circle at 90% 80%, rgba(99, 102, 241, 0.12) 0%, transparent 40%);
        }

        .dark-cyber-grid {
            background-image: linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
                              linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
            background-size: 32px 32px;
        }

        .glow-border:hover {
            box-shadow: 0 10px 30px -10px rgba(0, 220, 130, 0.25);
            border-color: #00DC82;
        }

        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 9999px;
        }

        /* Accordion transition */
        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
            opacity: 0;
        }
        .faq-item.active .faq-answer {
            max-height: 280px;
            opacity: 1;
        }
        .faq-item.active .faq-chevron {
            transform: rotate(180deg);
        }