/* roulang page: index */
:root {
      --primary-forest: #0A381E;
      --primary-electric: #00FF87;
      --primary-mint: #10B981;
      --accent-orange: #F97316;
      --bg-dark: #070E0A;
      --bg-light: #F8FAFC;
      --text-dark: #0F172A;
      --text-muted: #64748B;
      --border-glow: rgba(16, 185, 129, 0.25);
    }
    
    html {
      scroll-behavior: smooth;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
    }
    
    body {
      background-color: #F8FAFC;
      color: var(--text-dark);
      overflow-x: hidden;
    }

    .glass-card {
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(16, 185, 129, 0.15);
    }

    .dark-card {
      background: rgba(13, 27, 18, 0.85);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(0, 255, 135, 0.15);
    }

    .glow-border {
      box-shadow: 0 0 25px rgba(0, 255, 135, 0.12);
    }

    .badge-pulse::before {
      content: '';
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: #00FF87;
      margin-right: 6px;
      box-shadow: 0 0 8px #00FF87;
      animation: pulse 1.8s infinite;
    }

    @keyframes pulse {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.4); opacity: 0.6; }
    }

    details summary::-webkit-details-marker {
      display: none;
    }

    .hero-bg {
      background-image: linear-gradient(180deg, rgba(7, 14, 10, 0.82) 0%, rgba(10, 56, 30, 0.92) 100%), url('/assets/images/f0dd5d872a749d5f.png');
      background-size: cover;
      background-position: center;
    }