/* roulang page: index */
:root {
            --primary: #4F46E5;
            --brand-violet: #8B5CF6;
            --accent-green: #34D399;
            --accent-amber: #FBBF24;
            --bg-light: #F8FAFC;
            --bg-dark: #020617;
            --text-main: #0F172A;
            --text-muted: #64748B;
            --border-color: #E2E8F0;
        }

        body {
            font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
            background-color: var(--bg-light);
            color: var(--text-main);
            overflow-x: hidden;
        }

        .badge-pulse {
            box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7);
            animation: pulse-ring 2s infinite cubic-bezier(0.66, 0, 0, 1);
        }

        @keyframes pulse-ring {
            0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7); }
            70% { box-shadow: 0 0 0 10px rgba(52, 211, 153, 0); }
            100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
        }

        .glass-card {
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(16px);
            border: 1px solid rgba(226, 232, 240, 0.8);
        }

        .dark-glass-card {
            background: rgba(15, 23, 42, 0.75);
            backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        .hero-bg-overlay {
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.88) 0%, rgba(79, 70, 229, 0.82) 50%, rgba(139, 92, 246, 0.75) 100%),
                        url('/assets/images/a78304dbfade2ac2.webp') center/cover no-repeat;
        }

        .cinema-bg-overlay {
            background: linear-gradient(180deg, rgba(2, 6, 23, 0.95) 0%, rgba(15, 23, 42, 0.92) 100%),
                        url('/assets/images/708f32b71a99dda7.png') center/cover no-repeat;
        }