/* roulang page: index */
:root {
      --primary: #0B192C;
      --accent-orange: #FF5E14;
      --accent-red: #E63946;
      --accent-emerald: #10B981;
      --bg-light: #F8FAFC;
      --text-main: #1E293B;
      --text-muted: #64748B;
      --border-color: #E2E8F0;
    }
    
    html {
      scroll-behavior: smooth;
    }

    body {
      background-color: #FFFFFF;
      color: var(--text-main);
      line-height: 1.75;
      font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    }

    .brand-gradient-text {
      background: linear-gradient(135deg, #FF5E14 0%, #E63946 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .brand-btn-primary {
      background: linear-gradient(135deg, #FF5E14 0%, #E63946 100%);
      color: #FFFFFF;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .brand-btn-primary:hover {
      box-shadow: 0 10px 25px -5px rgba(255, 94, 20, 0.4);
      transform: translateY(-2px);
    }

    .brand-badge {
      background: rgba(255, 94, 20, 0.1);
      color: #FF5E14;
      border: 1px solid rgba(255, 94, 20, 0.2);
    }

    .glow-border {
      position: relative;
    }
    .glow-border::after {
      content: '';
      position: absolute;
      inset: -1px;
      background: linear-gradient(135deg, rgba(255,94,20,0.5), rgba(16,185,129,0.3));
      border-radius: inherit;
      z-index: -1;
      opacity: 0.4;
      transition: opacity 0.3s ease;
    }
    .glow-border:hover::after {
      opacity: 1;
    }

    /* Accordion Custom Styling */
    .faq-item-content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.35s ease-out, opacity 0.3s ease;
      opacity: 0;
    }
    .faq-item.active .faq-item-content {
      max-height: 240px;
      opacity: 1;
    }
    .faq-item.active .faq-icon {
      transform: rotate(180deg);
      color: #FF5E14;
    }

    /* Target Assessment Radio Active Style */
    .eval-choice input:checked + label {
      border-color: #FF5E14;
      background-color: rgba(255, 94, 20, 0.05);
      color: #0B192C;
      font-weight: 600;
    }
