/* roulang page: index */
:root {
      --primary-gradient: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
      --accent-glow: radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.15), transparent 70%);
      --card-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.08);
      --card-hover-shadow: 0 20px 35px -8px rgba(99, 102, 241, 0.18);
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      color: #0f172a;
      background-color: #f8fafc;
      overflow-x: hidden;
    }
    .custom-gradient-border {
      position: relative;
      background-clip: padding-box;
      border: 1px solid transparent;
    }
    .custom-gradient-border::before {
      content: '';
      position: absolute;
      top: 0; right: 0; bottom: 0; left: 0;
      z-index: -1;
      margin: -1px;
      border-radius: inherit;
      background: linear-gradient(135deg, rgba(99, 102, 241, 0.4), rgba(6, 182, 212, 0.2));
    }
    .badge-pulse {
      box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7);
      animation: pulse-ring 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
    }
    @keyframes pulse-ring {
      0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7); }
      70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(99, 102, 241, 0); }
      100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
    }
    .accordion-content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
      opacity: 0;
    }
    .accordion-content.active {
      opacity: 1;
    }