/* roulang page: index */
:root {
            --bg-primary: #0B0F17;
            --bg-surface: #111827;
            --bg-light: #F8FAFC;
            --text-dark: #0F172A;
            --text-muted: #64748B;
            --brand-green: #00E599;
            --brand-emerald: #10B981;
            --border-subtle: rgba(255, 255, 255, 0.08);
            --border-light: rgba(15, 23, 42, 0.08);
        }

        html {
            scroll-behavior: smooth;
            font-family: -apple-system, BlinkMacSystemFont, "Inter", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
        }

        .font-mono-num {
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        }

        .hero-bg-overlay {
            background: linear-gradient(180deg, rgba(11, 15, 23, 0.85) 0%, rgba(11, 15, 23, 0.98) 100%);
        }

        .dark-card-glow {
            background: rgba(17, 24, 39, 0.8);
            border: 1px solid rgba(255, 255, 255, 0.07);
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .dark-card-glow:hover {
            border-color: rgba(0, 229, 153, 0.4);
            transform: translateY(-2px);
            box-shadow: 0 12px 30px -10px rgba(0, 229, 153, 0.15);
        }

        .light-card {
            background: #FFFFFF;
            border: 1px solid rgba(15, 23, 42, 0.08);
            box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.03);
            transition: all 0.25s ease;
        }
        .light-card:hover {
            border-color: rgba(16, 185, 129, 0.3);
            box-shadow: 0 10px 25px -4px rgba(16, 185, 129, 0.08);
            transform: translateY(-2px);
        }

        .faq-content {
            transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
        }

        .cta-btn-glow {
            box-shadow: 0 0 20px rgba(0, 229, 153, 0.35);
        }
        .cta-btn-glow:hover {
            box-shadow: 0 0 30px rgba(0, 229, 153, 0.55);
        }