/* roulang page: index */
:root {
            --bg-main: #090D12;
            --bg-card: #121820;
            --bg-alt: #1A222D;
            --accent-emerald: #10B981;
            --accent-cyan: #06B6D4;
            --accent-amber: #F59E0B;
            --text-light: #F3F4F6;
            --text-muted: #9CA3AF;
            --border-subtle: rgba(255, 255, 255, 0.08);
            --card-glow: rgba(16, 185, 129, 0.15);
        }

        body {
            background-color: var(--bg-main);
            color: var(--text-light);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            overflow-x: hidden;
            line-height: 1.6;
        }

        .border-glass {
            border: 1px solid var(--border-subtle);
        }

        .glow-hover:hover {
            box-shadow: 0 0 25px var(--card-glow);
            border-color: rgba(16, 185, 129, 0.4);
        }

        .bg-grid-pattern {
            background-size: 36px 36px;
            background-image: 
                linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
        }

        .hero-mask {
            background: linear-gradient(180deg, rgba(9, 13, 18, 0.75) 0%, rgba(9, 13, 18, 0.95) 100%);
        }

        .faq-content {
            transition: max-height 0.35s ease-out, opacity 0.3s ease;
            max-height: 0;
            opacity: 0;
            overflow: hidden;
        }

        .faq-item.active .faq-content {
            max-height: 260px;
            opacity: 1;
        }

        .faq-item.active .faq-chevron {
            transform: rotate(180deg);
        }