/* roulang page: index */
:root {
            --color-primary: #0F172A;
            --color-accent-orange: #FF6B00;
            --color-accent-green: #00D26A;
            --color-bg-light: #F8FAFC;
            --color-border: rgba(226, 232, 240, 0.8);
            --radius-card: 20px;
        }

        body {
            font-family: system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
            background-color: var(--color-bg-light);
            color: #1E293B;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        .badge-pulse {
            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: .85; transform: scale(1.03); }
        }

        .custom-glass {
            background: rgba(255, 255, 255, 0.92);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
        }

        .hero-banner-bg {
            background: linear-gradient(135deg, #0F172A 0%, #1E293B 70%, #0F172A 100%);
            position: relative;
        }

        .hero-banner-bg::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: radial-gradient(rgba(255, 107, 0, 0.15) 1px, transparent 1px), radial-gradient(rgba(0, 210, 106, 0.1) 1px, transparent 1px);
            background-size: 32px 32px;
            background-position: 0 0, 16px 16px;
            opacity: 0.6;
            pointer-events: none;
        }

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

        .accordion-content.active {
            max-height: 300px;
            opacity: 1;
        }