/* roulang page: index */
:root {
            --color-jade-deep: #0B2019;
            --color-jade-dark: #06140F;
            --color-jade-night: #040D0A;
            --color-mint: #00DC82;
            --color-platinum: #E5E7EB;
            --color-rock-bg: #F4F6F5;
            --font-tabular: tabular-nums;
        }

        body {
            background-color: var(--color-rock-bg);
            color: #374A43;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
        }

        .num-tabular {
            font-variant-numeric: tabular-nums;
        }

        .header-glass {
            background: rgba(255, 255, 255, 0.94);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }

        .dark-glass {
            background: rgba(11, 32, 25, 0.75);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(0, 220, 130, 0.15);
        }

        .card-shadow {
            box-shadow: 0 4px 20px -2px rgba(11, 32, 25, 0.05);
            transition: all 0.25s ease;
        }
        .card-shadow:hover {
            box-shadow: 0 14px 30px -4px rgba(11, 32, 25, 0.12);
            transform: translateY(-3px);
        }

        .badge-pulse {
            position: relative;
        }
        .badge-pulse::before {
            content: '';
            position: absolute;
            left: -12px;
            top: 50%;
            transform: translateY(-50%);
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background-color: #00DC82;
            box-shadow: 0 0 0 0 rgba(0, 220, 130, 0.7);
            animation: pulse-ring 2s infinite;
        }

        @keyframes pulse-ring {
            0% {
                box-shadow: 0 0 0 0 rgba(0, 220, 130, 0.6);
            }
            70% {
                box-shadow: 0 0 0 8px rgba(0, 220, 130, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(0, 220, 130, 0);
            }
        }

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