/* roulang page: index */
:root {
      --primary-cobalt: #0F2B48;
      --secondary-orange: #FF6B00;
      --industrial-slate: #4A5568;
      --bg-body: #F8FAFC;
    }
    body {
      background-color: var(--bg-body);
      color: #1E293B;
      font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    }
    .badge-pill {
      background: linear-gradient(135deg, rgba(255, 107, 0, 0.12) 0%, rgba(15, 43, 72, 0.08) 100%);
      border: 1px solid rgba(255, 107, 0, 0.25);
    }
    .hero-stage-bg {
      background-image: radial-gradient(circle at 50% 20%, rgba(255, 107, 0, 0.08) 0%, rgba(15, 43, 72, 0.03) 50%, transparent 80%);
    }
    .industrial-grid {
      background-image: linear-gradient(to right, rgba(15, 43, 72, 0.04) 1px, transparent 1px),
                        linear-gradient(to bottom, rgba(15, 43, 72, 0.04) 1px, transparent 1px);
      background-size: 40px 40px;
    }
    .dark-industrial-grid {
      background-image: linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
                        linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
      background-size: 32px 32px;
    }
    .faq-collapse {
      transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    }