@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800;900&display=swap");
      html {
        scroll-behavior: smooth;
      }
      body {
        font-family: "Inter", sans-serif;
        background-color: #0a0a0a;
        color: #ffffff;
      }

.tactical-bg-container {
        position: absolute;
        inset: 0;
        pointer-events: none;
        overflow: hidden;
        z-index: 0;
      }
      .tactical-grid {
        position: absolute;
        inset: 0;
        background-size: 40px 40px;
        background-image: 
          linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
          linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
        opacity: 0.5;
        mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
        -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
      }
      .tactical-scanline {
        position: absolute;
        width: 100%;
        height: 2px;
        background: rgba(220, 38, 38, 0.15);
        box-shadow: 0 0 15px rgba(220, 38, 38, 0.4);
        animation: scanline 8s linear infinite;
        opacity: 0.8;
      }
      @keyframes scanline {
        0% { top: -5%; }
        100% { top: 105%; }
      }
      .tactical-particle {
        position: absolute;
        background: #dc2626;
        border-radius: 50%;
        filter: blur(2px);
        opacity: 0;
        box-shadow: 0 0 10px #dc2626;
        animation: particle-float infinite linear;
      }
      @keyframes particle-float {
        0% { transform: translateY(0) translateX(0); opacity: 0; }
        20% { opacity: 0.4; }
        80% { opacity: 0.4; }
        100% { transform: translateY(-100px) translateX(50px); opacity: 0; }
      }
      .tactical-crosshair {
        position: absolute;
        opacity: 0;
        animation: crosshair-fade ease-in-out infinite;
      }
      @keyframes crosshair-fade {
        0%, 100% { opacity: 0; transform: scale(0.9) rotate(0deg); }
        50% { opacity: 0.05; transform: scale(1) rotate(45deg); }
      }
      .tactical-crosshair-alt {
        position: absolute;
        opacity: 0;
        animation: crosshair-fade-alt ease-in-out infinite;
      }
      @keyframes crosshair-fade-alt {
        0%, 100% { opacity: 0; transform: scale(1.1) rotate(0deg); }
        50% { opacity: 0.03; transform: scale(1) rotate(-45deg); }
      }

.hero-overlay {
        background: linear-gradient(
          0deg,
          rgba(10, 10, 10, 1) 0%,
          rgba(10, 10, 10, 0.4) 50%,
          rgba(10, 10, 10, 0.8) 100%
        );
      }
      .card-dark {
        background-color: #1a1a1a;
        border: 1px solid #333;
      }

@keyframes fadeInUp {
              from { opacity: 0; transform: translateY(30px); }
              to { opacity: 1; transform: translateY(0); }
            }
            .animate-fade-in-up {
              animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            }
            .anim-delay-100 { animation-delay: 100ms; }
            .anim-delay-200 { animation-delay: 200ms; }
            .anim-delay-300 { animation-delay: 300ms; }

.hide-scrollbar::-webkit-scrollbar { display: none; }
  .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
  
  @keyframes fadeUpSection {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .animate-fade-up-section {
    animation: fadeUpSection 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  
  /* Active Card Styles */
  .carousel-card {
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  .carousel-card:not(.is-active) {
    opacity: 0.4;
    transform: scale(0.92);
  }
  .carousel-card.is-active .card-inner {
    background-color: rgba(24, 24, 27, 0.75); 
    border-color: rgba(220, 38, 38, 0.4);
    box-shadow: 0 15px 40px -10px rgba(220,38,38,0.3);
  }
  @media (hover: hover) {
    .carousel-card .card-inner {
      transition: all 0.4s ease;
    }
    .carousel-card:hover .card-inner {
      border-color: rgba(220, 38, 38, 0.6);
      transform: translateY(-4px);
      box-shadow: 0 15px 40px -5px rgba(220,38,38,0.4);
    }
  }

.testi-carousel-container {
            width: 100%;
            position: relative;
            overflow: hidden;
            padding: 1rem 0;
            cursor: grab;
          }
          .testi-carousel-container:active {
            cursor: grabbing;
          }
          .testi-carousel-track {
            display: flex;
            align-items: stretch;
            will-change: transform;
          }
          .testi-carousel-item {
            flex: 0 0 100%;
            min-width: 0;
            padding: 0 1rem;
            display: flex;
          }
          @media (min-width: 768px) {
            .testi-carousel-item {
              flex: 0 0 50%;
            }
          }
          @media (min-width: 1024px) {
            .testi-carousel-item {
              flex: 0 0 33.333333%;
            }
          }
          .testi-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #3f3f46;
            margin: 0 6px;
            cursor: pointer;
            transition: background-color 0.3s ease;
          }
          .testi-dot.active {
            background-color: #f97316;
          }