/* roulang page: index */
:root {
      --color-primary: #0F172A;
      --color-accent: #059669;
      --color-accent-light: #10B981;
      --color-amber: #D97706;
      --color-bg-base: #F8FAFC;
      --color-card-border: rgba(226, 232, 240, 0.8);
      --shadow-soft: 0 4px 20px -2px rgba(15, 23, 42, 0.06);
      --shadow-hover: 0 12px 30px -4px rgba(5, 150, 105, 0.15);
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      color: #334155;
      background-color: var(--color-bg-base);
      line-height: 1.8;
      letter-spacing: 0.015em;
      -webkit-font-smoothing: antialiased;
    }

    h1, h2, h3, h4, h5, h6 {
      color: var(--color-primary);
      line-height: 1.3;
      font-weight: 700;
    }

    .glass-nav {
      background: rgba(255, 255, 255, 0.94);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(226, 232, 240, 0.8);
    }

    .hero-bg-overlay {
      background: linear-gradient(135deg, rgba(15, 23, 42, 0.92) 0%, rgba(11, 19, 43, 0.88) 100%),
                  url('/assets/images/93097fb92daeacf8.webp') center/cover no-repeat;
    }

    .dark-section-bg {
      background: linear-gradient(180deg, #0B132B 0%, #0F172A 100%),
                  url('/assets/images/d8455057e6eaa125.webp') center/cover no-repeat;
      background-blend-mode: overlay;
    }

    .gradient-cta-bg {
      background: linear-gradient(135deg, #059669 0%, #0F172A 100%),
                  url('/assets/images/0bd37d992e14a479.webp') center/cover no-repeat;
      background-blend-mode: multiply;
    }

    .card-modern {
      background: #FFFFFF;
      border: 1px solid var(--color-card-border);
      border-radius: 14px;
      box-shadow: var(--shadow-soft);
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .card-modern:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-hover);
      border-color: rgba(16, 185, 129, 0.4);
    }

    .tag-badge {
      display: inline-flex;
      align-items: center;
      padding: 0.25rem 0.75rem;
      font-size: 0.75rem;
      font-weight: 600;
      border-radius: 9999px;
      background-color: rgba(5, 150, 105, 0.1);
      color: #059669;
      border: 1px solid rgba(5, 150, 105, 0.2);
    }

    .badge-amber {
      background-color: rgba(217, 119, 6, 0.1);
      color: #D97706;
      border-color: rgba(217, 119, 6, 0.25);
    }

    details[open] summary svg {
      transform: rotate(180deg);
    }

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

    .custom-scroll::-webkit-scrollbar {
      height: 6px;
    }
    .custom-scroll::-webkit-scrollbar-track {
      background: #f1f5f9;
      border-radius: 8px;
    }
    .custom-scroll::-webkit-scrollbar-thumb {
      background: #cbd5e1;
      border-radius: 8px;
    }
    .custom-scroll::-webkit-scrollbar-thumb:hover {
      background: #94a3b8;
    }