/* roulang page: index */
:root {
            --bg-base: #0A0E17;
            --bg-surface: rgba(17, 24, 39, 0.85);
            --border-glow: rgba(99, 102, 241, 0.25);
            --text-main: #F8FAFC;
            --text-sub: #94A3B8;
        }
        body {
            background-color: var(--bg-base);
            color: var(--text-main);
            overflow-x: hidden;
            font-feature-settings: "cv02", "cv03", "cv04", "cv11";
        }
        .glass-panel {
            background: rgba(17, 24, 39, 0.78);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border: 1px solid rgba(255, 255, 255, 0.08);
        }
        .glass-panel-hover {
            transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .glass-panel-hover:hover {
            border-color: rgba(99, 102, 241, 0.45);
            transform: translateY(-4px);
            box-shadow: 0 20px 40px -15px rgba(99, 102, 241, 0.2);
        }
        .hero-mesh {
            background: radial-gradient(circle at 50% 20%, rgba(99, 102, 241, 0.18) 0%, rgba(6, 182, 212, 0.08) 40%, transparent 70%);
        }
        .text-gradient {
            background: linear-gradient(135deg, #FFFFFF 20%, #CBD5E1 60%, #818CF8 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .custom-scroll::-webkit-scrollbar {
            width: 6px;
        }
        .custom-scroll::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.15);
            border-radius: 9999px;
        }