/* roulang page: index */
:root {
            --brand-orange: #FF5500;
            --brand-neon: #00E599;
            --brand-dark: #0D1117;
            --brand-surface: #161B22;
        }
        body {
            color: #0F172A;
            background-color: #FFFFFF;
            overflow-x: hidden;
        }
        .text-gradient {
            background: linear-gradient(135deg, #FF5500 0%, #FF8A00 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .text-neon-gradient {
            background: linear-gradient(135deg, #00E599 0%, #00B377 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .hero-mesh {
            background: radial-gradient(circle at 80% 20%, rgba(255, 85, 0, 0.12) 0%, transparent 40%),
                        radial-gradient(circle at 20% 80%, rgba(0, 229, 153, 0.08) 0%, transparent 40%),
                        #0D1117;
        }
        .glass-card {
            background: rgba(22, 27, 34, 0.85);
            backdrop-filter: blur(12px);
            border: 1px solid #30363D;
        }
        .custom-shadow {
            box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.07);
        }
        .pulse-dot {
            box-shadow: 0 0 0 0 rgba(0, 229, 153, 0.7);
            animation: pulse-ring 1.8s infinite cubic-bezier(0.66, 0, 0, 1);
        }
        @keyframes pulse-ring {
            to {
                box-shadow: 0 0 0 10px rgba(0, 229, 153, 0);
            }
        }