:root {
    --color-navy-50: oklch(0.97 0.01 260);
    --color-navy-100: oklch(0.92 0.02 260);
    --color-navy-200: oklch(0.84 0.04 260);
    --color-navy-300: oklch(0.74 0.06 260);
    --color-navy-400: oklch(0.62 0.08 260);
    --color-navy-500: oklch(0.50 0.10 260);
    --color-navy-600: oklch(0.40 0.11 260);
    --color-navy-700: oklch(0.32 0.11 260);
    --color-navy-800: oklch(0.26 0.10 260);
    /* base ≈ #001A57 */
    --color-navy-900: oklch(0.21 0.09 260);
    --color-navy-950: oklch(0.16 0.08 260);

    --main-0: oklch(1.00 0.00 260);
    --main-50: var(--color-neutral-50);
    --main-100: var(--color-neutral-100);
    --main-200: var(--color-neutral-200);
    --main-300: var(--color-neutral-300);
    --main-400: var(--color-neutral-400);
    --main-500: var(--color-neutral-500);
    --main-600: var(--color-neutral-600);
    --main-700: var(--color-neutral-700);
    --main-800: var(--color-neutral-800);
    --main-900: var(--color-neutral-900);
    --main-950: var(--color-neutral-950);
    --main-1000: oklch(0.00 0.00 260);

    --primary-50: var(--color-navy-50);
    --primary-100: var(--color-navy-100);
    --primary-200: var(--color-navy-200);
    --primary-300: var(--color-navy-300);
    --primary-400: var(--color-navy-400);
    --primary-500: var(--color-navy-500);
    --primary-600: var(--color-navy-600);
    --primary-700: var(--color-navy-700);
    --primary-800: var(--color-navy-800);
    --primary-900: var(--color-navy-900);
    --primary-950: var(--color-navy-950);

    --secondary-50: var(--color-gray-50);
    --secondary-100: var(--color-gray-100);
    --secondary-200: var(--color-gray-200);
    --secondary-300: var(--color-gray-300);
    --secondary-400: var(--color-gray-400);
    --secondary-500: var(--color-gray-500);
    --secondary-600: var(--color-gray-600);
    --secondary-700: var(--color-gray-700);
    --secondary-800: var(--color-gray-800);
    --secondary-900: var(--color-gray-900);
    --secondary-950: var(--color-gray-950);

    --accent-50: var(--color-cyan-50);
    --accent-100: var(--color-cyan-100);
    --accent-200: var(--color-cyan-200);
    --accent-300: var(--color-cyan-300);
    --accent-400: var(--color-cyan-400);
    --accent-500: var(--color-cyan-500);
    --accent-600: var(--color-cyan-600);
    --accent-700: var(--color-cyan-700);
    --accent-800: var(--color-cyan-800);
    --accent-900: var(--color-cyan-900);
    --accent-950: var(--color-cyan-950);

    --warning-50: var(--color-orange-50);
    --warning-100: var(--color-orange-100);
    --warning-200: var(--color-orange-200);
    --warning-300: var(--color-orange-300);
    --warning-400: var(--color-orange-400);
    --warning-500: var(--color-orange-500);
    --warning-600: var(--color-orange-600);
    --warning-700: var(--color-orange-700);
    --warning-800: var(--color-orange-800);
    --warning-900: var(--color-orange-900);
    --warning-950: var(--color-orange-950);

    --info-50: var(--color-cyan-50);
    --info-100: var(--color-cyan-100);
    --info-200: var(--color-cyan-200);
    --info-300: var(--color-cyan-300);
    --info-400: var(--color-cyan-400);
    --info-500: var(--color-cyan-500);
    --info-600: var(--color-cyan-600);
    --info-700: var(--color-cyan-700);
    --info-800: var(--color-cyan-800);
    --info-900: var(--color-cyan-900);
    --info-950: var(--color-cyan-950);

    --success-50: var(--color-green-50);
    --success-100: var(--color-green-100);
    --success-200: var(--color-green-200);
    --success-300: var(--color-green-300);
    --success-400: var(--color-green-400);
    --success-500: var(--color-green-500);
    --success-600: var(--color-green-600);
    --success-700: var(--color-green-700);
    --success-800: var(--color-green-800);
    --success-900: var(--color-green-900);
    --success-950: var(--color-green-950);

    --danger-50: var(--color-red-50);
    --danger-100: var(--color-red-100);
    --danger-200: var(--color-red-200);
    --danger-300: var(--color-red-300);
    --danger-400: var(--color-red-400);
    --danger-500: var(--color-red-500);
    --danger-600: var(--color-red-600);
    --danger-700: var(--color-red-700);
    --danger-800: var(--color-red-800);
    --danger-900: var(--color-red-900);
    --danger-950: var(--color-red-950);

    --pending-50: var(--color-orange-50);
    --pending-100: var(--color-orange-100);
    --pending-200: var(--color-orange-200);
    --pending-300: var(--color-orange-300);
    --pending-400: var(--color-orange-400);
    --pending-500: var(--color-orange-500);
    --pending-600: var(--color-orange-600);
    --pending-700: var(--color-orange-700);
    --pending-800: var(--color-orange-800);
    --pending-900: var(--color-orange-900);
    --pending-950: var(--color-orange-950);

}

[data-theme="dark"] {
    --main-0: oklch(0.00 0.00 260);    
    --main-50: var(--color-neutral-950);
    --main-100: var(--color-neutral-900);
    --main-200: var(--color-neutral-800);
    --main-300: var(--color-neutral-700);
    --main-400: var(--color-neutral-600);
    --main-500: var(--color-neutral-500);
    --main-600: var(--color-neutral-400);
    --main-700: var(--color-neutral-300);
    --main-800: var(--color-neutral-200);
    --main-900: var(--color-neutral-100);
    --main-950: var(--color-neutral-50);
    --main-1000: oklch(1.00 0.00 260);

    --danger-50: var(--color-red-950);
    --danger-100: var(--color-red-900);
    --danger-200: var(--color-red-800);
    --danger-300: var(--color-red-700);
    --danger-400: var(--color-red-600);
    --danger-500: var(--color-red-500);
    --danger-600: var(--color-red-400);
    --danger-700: var(--color-red-300);
    --danger-800: var(--color-red-200);
    --danger-900: var(--color-red-100);
    --danger-950: var(--color-red-50);

    --accent-50: var(--color-cyan-950);
    --accent-100: var(--color-cyan-900);
    --accent-200: var(--color-cyan-800);
    --accent-300: var(--color-cyan-700);
    --accent-400: var(--color-cyan-600);
    --accent-500: var(--color-cyan-500);
    --accent-600: var(--color-cyan-400);
    --accent-700: var(--color-cyan-300);
    --accent-800: var(--color-cyan-200);
    --accent-900: var(--color-cyan-100);
    --accent-950: var(--color-cyan-50);
}

@theme {
    /* === Base Colors (OKLCH) === */
    --color-main: var(--main-600);
    --color-primary: var(--color-teal-500);
    --color-accent: var(--color-cyan-500);
    --color-secondary: var(--color-gray-500);

    /* === Main Base === */
    --color-main-0: var(--main-0);
    --color-main-50: var(--main-50);
    --color-main-100: var(--main-100);
    --color-main-200: var(--main-200);
    --color-main-300: var(--main-300);
    --color-main-400: var(--main-400);
    --color-main-500: var(--main-500);
    --color-main-600: var(--main-600);
    --color-main-700: var(--main-700);
    --color-main-800: var(--main-800);
    --color-main-900: var(--main-900);
    --color-main-950: var(--main-950);
    --color-main-1000: var(--main-1000);

    /* === Primary === */
    --color-primary-50: var(--primary-50);
    --color-primary-100: var(--primary-100);
    --color-primary-200: var(--primary-200);
    --color-primary-300: var(--primary-300);
    --color-primary-400: var(--primary-400);
    --color-primary-500: var(--primary-500);
    --color-primary-600: var(--primary-600);
    --color-primary-700: var(--primary-700);
    --color-primary-800: var(--primary-800);
    --color-primary-900: var(--primary-900);
    --color-primary-950: var(--primary-950);

    /* === Secondary === */
    --color-secondary-50: var(--color-gray-50);
    --color-secondary-100: var(--color-gray-100);
    --color-secondary-200: var(--color-gray-200);
    --color-secondary-300: var(--color-gray-300);
    --color-secondary-400: var(--color-gray-400);
    --color-secondary-500: var(--color-gray-500);
    --color-secondary-600: var(--color-gray-600);
    --color-secondary-700: var(--color-gray-700);
    --color-secondary-800: var(--color-gray-800);
    --color-secondary-900: var(--color-gray-900);
    --color-secondary-950: var(--color-gray-950);

    /* === Accent === */
    --color-accent-50: var(--accent-50);
    --color-accent-100: var(--accent-100);
    --color-accent-200: var(--accent-200);
    --color-accent-300: var(--accent-300);
    --color-accent-400: var(--accent-400);
    --color-accent-500: var(--accent-500);
    --color-accent-600: var(--accent-600);
    --color-accent-700: var(--accent-700);
    --color-accent-800: var(--accent-800);
    --color-accent-900: var(--accent-900);
    --color-accent-950: var(--accent-950);

    /* === Status Colors === */
    --color-success: var(--color-green-500);
    --color-warning: var(--color-yellow-500);
    --color-danger: var(--color-red-500);
    --color-info: var(--color-cyan-500);
    --color-pending: var(--color-orange-500);
    --color-muted: var(--main-600);

    /* Success */
    --color-success-50: var(--color-green-50);
    --color-success-100: var(--color-green-100);
    --color-success-200: var(--color-green-200);
    --color-success-300: var(--color-green-300);
    --color-success-400: var(--color-green-400);
    --color-success-500: var(--color-green-500);
    --color-success-600: var(--color-green-600);
    --color-success-700: var(--color-green-700);
    --color-success-800: var(--color-green-800);
    --color-success-900: var(--color-green-900);
    --color-success-950: var(--color-green-950);

    /* Warning */
    --color-warning-50: var(--color-yellow-50);
    --color-warning-100: var(--color-yellow-100);
    --color-warning-200: var(--color-yellow-200);
    --color-warning-300: var(--color-yellow-300);
    --color-warning-400: var(--color-yellow-400);
    --color-warning-500: var(--color-yellow-500);
    --color-warning-600: var(--color-yellow-600);
    --color-warning-700: var(--color-yellow-700);
    --color-warning-800: var(--color-yellow-800);
    --color-warning-900: var(--color-yellow-900);
    --color-warning-950: var(--color-yellow-950);

    /* Error */
    --color-danger-50: var(--danger-50);
    --color-danger-100: var(--danger-100);
    --color-danger-200: var(--danger-200);
    --color-danger-300: var(--danger-300);
    --color-danger-400: var(--danger-400);
    --color-danger-500: var(--danger-500);
    --color-danger-600: var(--danger-600);
    --color-danger-700: var(--danger-700);
    --color-danger-800: var(--danger-800);
    --color-danger-900: var(--danger-900);
    --color-danger-950: var(--danger-950);

    /* Info */
    --color-info-50: var(--color-cyan-50);
    --color-info-100: var(--color-cyan-100);
    --color-info-200: var(--color-cyan-200);
    --color-info-300: var(--color-cyan-300);
    --color-info-400: var(--color-cyan-400);
    --color-info-500: var(--color-cyan-500);
    --color-info-600: var(--color-cyan-600);
    --color-info-700: var(--color-cyan-700);
    --color-info-800: var(--color-cyan-800);
    --color-info-900: var(--color-cyan-900);
    --color-info-950: var(--color-cyan-950);

    /* Pending */
    --color-pending-50: var(--color-orange-50);
    --color-pending-100: var(--color-orange-100);
    --color-pending-200: var(--color-orange-200);
    --color-pending-300: var(--color-orange-300);
    --color-pending-400: var(--color-orange-400);
    --color-pending-500: var(--color-orange-500);
    --color-pending-600: var(--color-orange-600);
    --color-pending-700: var(--color-orange-700);
    --color-pending-800: var(--color-orange-800);
    --color-pending-900: var(--color-orange-900);
    --color-pending-950: var(--color-orange-950);

    /* Muted */
    --color-muted-50: var(--main-50);
    --color-muted-100: var(--main-100);
    --color-muted-200: var(--main-200);
    --color-muted-300: var(--main-300);
    --color-muted-400: var(--main-400);
    --color-muted-500: var(--main-500);
    --color-muted-600: var(--main-600);
    --color-muted-700: var(--main-700);
    --color-muted-800: var(--main-800);
    --color-muted-900: var(--main-900);
    --color-muted-950: var(--main-950);

    /* === Additional Colors === */
    --color-dark: var(--color-main-900);
    --color-light: var(--color-main-50);

    /* Break points */
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-2xl: 1400px;
    --breakpoint-3xl: 1600px;
    --breakpoint-4xl: 1800px;
    --breakpoint-5xl: 2000px;
    --breakpoint-6xl: 2400px;
    --breakpoint-7xl: 3840px;
}

/* Firefox */
/* * {
  scrollbar-width: thin;
  scrollbar-color: var(--primary-500) transparent;
} */

/* WebKit (Chrome, Edge, Safari) */
*::-webkit-scrollbar {
    width: 4px;
    height: 6px;
}

*::-webkit-scrollbar-track {
    background: transparent;
    box-shadow: none;
}

*::-webkit-scrollbar-thumb {
    background-color: var(--main-500);
    border-radius: 9999px;
}

/* Table animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-8px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-fadeIn {
    animation: fadeIn 0.2s ease-out forwards;
}

.animate-slideIn {
    animation: slideIn 0.2s ease-out forwards;
}

[data-logo-track],
[data-news-track] {
    will-change: transform;
}

[data-logo-track] > div {
    flex: 0 0 20%;
}

[data-news-track] > news-card {
    flex: 0 0 100%;
}

@media (min-width: 768px) {
    [data-news-track] > news-card {
        flex-basis: calc((100% - 4rem) / 3);
    }
}

@media (max-width: 640px) {
    [data-logo-track] > div {
        flex-basis: 50%;
    }

    [data-partners-section] > div {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
}

@keyframes heroCaptionSlideIn {
    from {
        opacity: 0;
        transform: translateX(-86px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.hero-caption-item {
    opacity: 0;
    transform: translateX(-86px);
    will-change: opacity, transform;
}

.hero-caption-animate {
    animation: heroCaptionSlideIn 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: var(--hero-caption-delay, 0s);
}

/* Fixed 2-line clamp (prevents card height jump) */
.news-card__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5rem;
    min-height: 3rem;
    max-height: 3rem;
}

/*------------------ Feature Banner ---------------*/
.feature-banner {
    background: url(../images/home/2.jpg) no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
    background-color: #707d9e;
    text-align: center;
  }
  .feature-banner .opacity {
    background: rgba(0,26,87,0.5);
    padding: 74px 0 80px 0;
  }
  .feature-banner .opacity h2 {
    font-size: 42px;
    line-height: 52px;
    text-transform: inherit;
    color: #fff;
    padding: 0 100px;
    margin-bottom: 32px;
  }

  @media (max-width: 640px) {
    .feature-banner {
      background-position: center center;
      background-attachment: fixed;
      min-height: 420px;
    }

    .feature-banner .opacity {
      min-height: 420px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 52px 18px 60px;
      background: rgba(0, 26, 87, 0.42);
    }

    .feature-banner .container {
      width: 100%;
      max-width: 340px;
      margin: 0 auto;
    }

    .feature-banner .opacity h2 {
      padding: 0;
      margin-bottom: 34px;
      font-size: 31px;
      line-height: 1.42;
      font-weight: 800;
      color: #fff;
    }

    .feature-banner .opacity a {
      width: auto;
      min-width: 168px;
      min-height: 48px;
      border-radius: 5px;
      padding: 14px 28px;
      background: #061948;
      font-size: 14px;
      font-weight: 800;
    }
  }

  @keyframes stepSlide {
    0%   { transform: translateX(0); }
    20%  { transform: translateX(-100%); }
    40%  { transform: translateX(-200%); }
    60%  { transform: translateX(-300%); }
    80%  { transform: translateX(-400%); }
    100% { transform: translateX(0); }
  }
  
.animate-step {
    animation: stepSlide 15s steps(5) infinite;
  }