/* roulang page: index */
:root {
      --primary: #0F52BA;
      --secondary: #00A896;
      --accent: #F77F00;
      --bg-light: #F8FAFC;
      --dark: #0B132B;
      --text: #1E293B;
      --text-muted: #64748B;
    }
    html {
      scroll-behavior: smooth;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      color: var(--text);
      background-color: var(--bg-light);
      overflow-x: hidden;
    }
    .gradient-primary {
      background: linear-gradient(135deg, #0F52BA 0%, #00A896 100%);
    }
    .gradient-accent {
      background: linear-gradient(135deg, #F77F00 0%, #FF9F1C 100%);
    }
    .gradient-card {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
    }
    .card-hover {
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .card-hover:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 30px -10px rgba(15, 82, 186, 0.15);
    }
    .badge-glow {
      box-shadow: 0 0 12px rgba(0, 168, 150, 0.35);
    }