/* ─── Base ─── */
      html,
      body {
        margin: 0;
        padding: 0;
        background-color: #f8f9fa;
        color: #0f0f11;
        font-family: "Inter", sans-serif;
        -ms-overflow-style: none;
        scrollbar-width: none;
      }

      ::-webkit-scrollbar {
        display: none;
      }

      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        font-family: "Outfit", sans-serif;
        font-weight: 700;
      }

      /* ─── fadeUp animation ─── */
      @keyframes fadeUp {
        from {
          opacity: 0;
          transform: translateY(40px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .fade-up {
        opacity: 0;
        transform: translateY(40px);
        transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
          transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
      }

      .fade-up.visible {
        opacity: 1;
        transform: translateY(0);
      }

      /* ─── Stagger delays ─── */
      .delay-1 {
        transition-delay: 0.1s;
      }
      .delay-2 {
        transition-delay: 0.2s;
      }
      .delay-3 {
        transition-delay: 0.3s;
      }
      .delay-4 {
        transition-delay: 0.4s;
      }
      .delay-5 {
        transition-delay: 0.5s;
      }
      .delay-6 {
        transition-delay: 0.6s;
      }

      /* ─── Counter animation ─── */
      @keyframes countPulse {
        0%,
        100% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.05);
        }
      }

      .counter-animate {
        animation: countPulse 0.3s ease-out;
      }

      /* ─── Hero gradient overlay ─── */
      .hero-gradient {
        background: linear-gradient(
          135deg,
          #001f55 0%,
          #001133 40%,
          #001a44 70%,
          #001f55 100%
        );
        position: relative;
        overflow: hidden;
      }

      .hero-gradient::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(
            ellipse at 20% 80%,
            rgba(255, 66, 29, 0.08) 0%,
            transparent 50%
          ),
          radial-gradient(
            ellipse at 80% 20%,
            rgba(255, 255, 255, 0.04) 0%,
            transparent 50%
          );
        pointer-events: none;
      }

      .hero-gradient::after {
        content: "";
        position: absolute;
        inset: 0;
        background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        pointer-events: none;
      }

      /* ─── Glassmorphism card ─── */
      .glass-card {
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.5);
      }

      .glass-card-strong {
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        border: 1px solid rgba(255, 255, 255, 0.6);
      }

      /* ─── Value card hover ─── */
      .value-card {
        transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
          box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
      }

      .value-card:hover {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 20px 60px rgba(0, 31, 85, 0.12),
          0 8px 24px rgba(0, 31, 85, 0.08);
      }

      /* ─── Team card hover ─── */
      .team-card {
        transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
          box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
      }

      .team-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 16px 48px rgba(0, 31, 85, 0.1),
          0 6px 20px rgba(0, 31, 85, 0.06);
      }

      .team-card:hover .team-avatar {
        transform: scale(1.08);
        box-shadow: 0 8px 30px rgba(0, 31, 85, 0.2);
      }

      .team-avatar {
        transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
          box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
      }

      /* ─── Mission/Vision card icon pulse ─── */
      .mv-card:hover .mv-icon {
        transform: scale(1.1) rotate(3deg);
      }

      .mv-icon {
        transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
      }

      /* ─── Stat item separator ─── */
      .stat-item:not(:last-child)::after {
        content: "";
        position: absolute;
        right: 0;
        top: 20%;
        height: 60%;
        width: 1px;
        background: rgba(255, 255, 255, 0.15);
      }

      @media (max-width: 768px) {
        .stat-item:not(:last-child)::after {
          display: none;
        }
      }

      /* ─── Floating decorative shapes ─── */
      @keyframes floatSlow {
        0%,
        100% {
          transform: translateY(0) rotate(0deg);
        }
        50% {
          transform: translateY(-12px) rotate(3deg);
        }
      }

      @keyframes floatSlowReverse {
        0%,
        100% {
          transform: translateY(0) rotate(0deg);
        }
        50% {
          transform: translateY(12px) rotate(-3deg);
        }
      }

      .float-slow {
        animation: floatSlow 6s ease-in-out infinite;
      }

      .float-slow-reverse {
        animation: floatSlowReverse 7s ease-in-out infinite;
      }

      /* ─── Section divider ─── */
      .section-label {
        letter-spacing: 0.25em;
      }

      /* ─── Story image ─── */
      .story-image {
        transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
      }

      .story-image:hover {
        transform: scale(1.03);
      }

      /* ─── Blinking Dot ─── */
      .blink-ring {
        animation: blink-ring 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
        transform-origin: center center;
      }

      @keyframes blink-ring {
        0% {
          transform: scale(1);
          opacity: 0.75;
        }
        75%, 100% {
          transform: scale(2.5);
          opacity: 0;
        }
      }

      /* ─── 3D Stat Cards ─── */
      .stat-card-container {
        perspective: 1500px;
        transform-style: preserve-3d;
        transform: rotateY(-15deg) rotateX(10deg);
        transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
        will-change: transform;
      }
      
      .stat-card {
        transform-style: preserve-3d;
        transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
        will-change: transform, box-shadow;
      }

      .stat-card-light {
        background-color: #ffffff;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8), 
                    0 15px 35px -10px rgba(0, 0, 0, 0.1),
                    1px 2px 0 #e2e8f0, 2px 4px 0 #cbd5e1, 3px 6px 0 #94a3b8;
      }

      .stat-card-dark {
        background-color: #001f55;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 
                    0 15px 35px -10px rgba(0, 31, 85, 0.4),
                    1px 2px 0 #001133, 2px 4px 0 #000a1f, 3px 6px 0 #00040a;
      }

      .stat-card > .stat-value {
        transform: translateZ(40px);
        transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
        display: block;
      }

      .stat-card > .stat-label {
        transform: translateZ(20px);
        transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
        display: block;
      }

      /* ─── Reduced motion ─── */
      @media (prefers-reduced-motion: reduce) {
        .fade-up {
          opacity: 1;
          transform: none;
          transition: none;
        }
        .float-slow,
        .float-slow-reverse {
          animation: none;
        }
        .value-card:hover,
        .team-card:hover {
          transform: none;
        }
        .stat-card > .stat-value,
        .stat-card > .stat-label {
          transform: none;
        }
      }


/* ─── Horizontal Fade Animations ─── */
@keyframes fadeRight {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeLeft {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.fade-right {
  opacity: 0;
  animation: fadeRight 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.fade-left {
  opacity: 0;
  animation: fadeLeft 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}