/* roulang page: index */
:root {
            --primary: #0F172A;
            --primary-light: #1E293B;
            --accent: #0D9488;
            --accent-blue: #2563EB;
            --surface-bg: #F8FAFC;
            --text-main: #0F172A;
            --text-muted: #64748B;
            --border-subtle: #E2E8F0;
        }
        html {
            scroll-behavior: smooth;
        }
        body {
            font-family: var(--font-sans);
            color: #334155;
            background-color: #FFFFFF;
            -webkit-font-smoothing: antialiased;
        }
        .hero-banner-mask {
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.94) 0%, rgba(30, 41, 59, 0.88) 100%);
        }
        .flash-bar-gradient {
            background: linear-gradient(90deg, #0F172A 0%, #134E4A 50%, #0F172A 100%);
        }
        .card-modern {
            background: #FFFFFF;
            border: 1px solid rgba(226, 232, 240, 0.85);
            box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.04);
            transition: all 0.25s ease-out;
        }
        .card-modern:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.08);
            border-color: #CBD5E1;
        }
        .custom-scrollbar::-webkit-scrollbar {
            height: 6px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background-color: #CBD5E1;
            border-radius: 4px;
        }