/* roulang page: index */
:root {
            --primary: #4F46E5;
            --secondary: #06B6D4;
            --accent: #7C3AED;
            --bg-dark: #0F172A;
            --text-main: #0F172A;
            --text-muted: #475569;
            --border: #E2E8F0;
        }
        body { font-family: 'Inter', system-ui, sans-serif; color: var(--text-main); background-color: #F8FAFC; }
        .gradient-text { background: linear-gradient(135deg, var(--primary), var(--secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        .bg-gradient-brand { background: linear-gradient(135deg, var(--primary), var(--secondary)); }
        .card-shadow { box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.04), 0 20px 25px -5px rgba(0, 0, 0, 0.02); }
        .hero-card { border-radius: 24px; transition: transform 0.3s ease; }
        .nav-sticky { position: sticky; top: 0; z-index: 1000; backdrop-filter: blur(10px); background: rgba(255,255,255,0.8); border-bottom: 1px solid var(--border); }
        .section-padding { padding: 4rem 1.5rem; }