/* roulang page: index */
:root {
            --bg-color: #0B0E14;
            --accent-cyan: #00F2FF;
            --accent-purple: #8A2BE2;
            --text-primary: #ffffff;
            --text-secondary: #a0aec0;
            --card-bg: rgba(255, 255, 255, 0.05);
        }
        body { background-color: var(--bg-color); color: var(--text-primary); font-family: 'Inter', sans-serif; }
        .glass-card { background: var(--card-bg); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; transition: all 0.3s ease; }
        .glass-card:hover { border-color: var(--accent-cyan); transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0, 242, 255, 0.1); }
        .gradient-text { background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        .btn-primary { background: linear-gradient(90deg, #00F2FF, #8A2BE2); color: white; padding: 12px 24px; border-radius: 8px; font-weight: bold; transition: transform 0.2s; }
        .btn-primary:hover { transform: scale(1.05); }
        .nav-link { color: var(--text-secondary); transition: color 0.3s; }
        .nav-link:hover { color: var(--accent-cyan); }