/* roulang page: index */
:root {
      --color-primary: #4f46e5;
      --color-primary-dark: #3730a3;
      --color-cyber-cyan: #06b6d4;
      --color-neon-green: #10b981;
      --color-dark-bg: #0b0f19;
      --color-card-bg: rgba(15, 23, 42, 0.75);
      --color-border: rgba(99, 102, 241, 0.2);
    }
    html {
      scroll-behavior: smooth;
    }
    body {
      background-color: #050811;
      color: #e2e8f0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      overflow-x: hidden;
    }
    .hero-glow {
      background: radial-gradient(circle at 50% 30%, rgba(79, 70, 229, 0.25) 0%, rgba(6, 182, 212, 0.12) 35%, transparent 70%);
    }
    .card-blur {
      background: rgba(15, 23, 42, 0.85);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.08);
    }
    .card-blur:hover {
      border-color: rgba(6, 182, 212, 0.4);
      box-shadow: 0 10px 30px -10px rgba(6, 182, 212, 0.2);
    }
    .badge-neon {
      background: rgba(16, 185, 129, 0.12);
      border: 1px solid rgba(16, 185, 129, 0.3);
      color: #34d399;
    }
    .gradient-text {
      background: linear-gradient(135deg, #ffffff 20%, #a5b4fc 60%, #38bdf8 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .timeline-line::before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 19px;
      width: 2px;
      background: linear-gradient(to bottom, #4f46e5, #06b6d4, transparent);
    }