body {
            font-family: 'Inter', sans-serif;
        }
        
        /* Glass effect */
        .glass-nav {
            background-color: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(12px);
        }
        
        /* Dropdown Animation */
        .dropdown-content {
            opacity: 0;
            visibility: hidden;
            transform: translateY(10px);
            transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        }
        
        .group:hover .dropdown-content {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
.bg-grid-slate {
            background-size: 40px 40px;
            background-image: 
                linear-gradient(to right, rgba(226, 232, 240, 0.5) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(226, 232, 240, 0.5) 1px, transparent 1px);
        }
        
        /* Map Marker Pulse */
        .marker-pulse {
            box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.7);
            animation: pulse-blue 2s infinite;
        }
        
        @keyframes pulse-blue {
            0% {
                transform: scale(0.95);
                box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.7);
            }
            70% {
                transform: scale(1);
                box-shadow: 0 0 0 10px rgba(14, 165, 233, 0);
            }
            100% {
                transform: scale(0.95);
                box-shadow: 0 0 0 0 rgba(14, 165, 233, 0);
            }
        }

        /* 3D Map Effects */
        .map-container-3d {
            perspective: 1000px;
            transform-style: preserve-3d;
        }
        .map-plane {
            transform: rotateX(25deg) scale(0.9);
            transform-origin: center center;
            /* box-shadow: removed to help blending */
            transition: transform 0.5s ease-out;
        }
        .map-container-3d:hover .map-plane {
            transform: rotateX(15deg) scale(0.95);
        }
        
        /* Pin "Standing Up" Effect */
        .pin-standing {
            transform: rotateX(-25deg) translateY(-10px); /* Counter-rotate to stand up */
            transform-origin: bottom center;
            transition: transform 0.5s ease-out;
        }
        .map-container-3d:hover .pin-standing {
            transform: rotateX(-15deg) translateY(-15px);
        }
        /* Mobile Accordion Transition */
        .max-h-0 {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
        }
        .max-h-96 {
            max-height: 500px;
            transition: max-height 0.4s ease-in;
        }
       .bg-grid-pattern {
            background-color: #f8fafc;
            background-image: 
                linear-gradient(rgba(59, 130, 246, 0.05) 1px, transparent 1px),
                linear-gradient(90deg, rgba(59, 130, 246, 0.05) 1px, transparent 1px);
            background-size: 40px 40px;
        }
        
        /* Custom class to keep icons upright while rotating in orbit */
        .counter-rotate {
            animation: orbit-reverse 20s linear infinite; /* Match parent duration but reverse */
        }
        .counter-rotate-slow {
             animation: orbit 25s linear infinite;
        }
        .mask-gradient {
            mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
            -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
        }
        
        /* Pause animation on hover for better UX */
        .group:hover .animate-scroll {
            animation-play-state: paused;
        }
        .bg-dot-pattern {
            background-image: radial-gradient(#e5e7eb 1px, transparent 1px);
            background-size: 20px 20px;
        }
         .modal-backdrop {
            background: rgba(15, 23, 42, 0.6);
            backdrop-filter: blur(8px);
        }
        .input-group {
            opacity: 0; /* Hidden initially for GSAP */
        }
        /* Smooth Hover Lift */
        .bento-card {
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        }
        .bento-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
        }
        .pixel-card {
            background-color: #0a0a0a; /* Dark Background */
            border: 1px solid #262626;
            border-radius: 1rem;
            position: relative;
            overflow: hidden;
            transition: border-color 0.3s ease;
        }

        .pixel-card:hover {
            border-color: #404040;
        }

        /* The Pixel Grid Container */
        .pixel-canvas {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            pointer-events: none; /* Let clicks pass through */
            z-index: 0;
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        .pixel-card:hover .pixel-canvas {
            opacity: 1;
        }

        /* Content Layer (Must be above pixels) */
        .card-content {
            position: relative;
            z-index: 10;
        }
.faq-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
            opacity: 0;
        }
        .faq-item.active .faq-content {
            max-height: 200px; /* Adjust based on content */
            opacity: 1;
        }
        .faq-icon {
            transition: transform 0.3s ease;
        }
        .faq-item.active .faq-icon {
            transform: rotate(180deg);
        }
        /* Gradient Mask for the Pixels (Fade out edges) */
        .mask-radial {
            mask-image: radial-gradient(circle at var(--x, 50%) var(--y, 50%), black 0%, transparent 60%);
            -webkit-mask-image: radial-gradient(circle at var(--x, 50%) var(--y, 50%), black 0%, transparent 60%);
        }
         .glass-card {
            background: rgba(255, 255, 255, 0.952);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .glass-card:hover {
            border-color: rgba(90, 90, 90, 0.4);
            transform: translateY(-4px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.267), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
        }

        .icon-glow {
            filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.3));
        }
          .swiper-slide {
      transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.4,0,0.2,1);
      opacity: 0.4;
      transform: scale(0.87);
      height: auto;
    }
    .swiper-slide-active {
      opacity: 1;
      transform: scale(1);
      z-index: 10;
    }

    /* Active card glow shadow */
    .swiper-slide-active .card-shell {
      box-shadow:
        0 32px 64px -12px rgba(14,165,233,0.45),
        0 0 0 1px rgba(14,165,233,0.15),
        inset 0 1px 0 rgba(255,255,255,0.3);
      border-color: transparent;
    }

    /* Texture: grain animation */
    @keyframes grain-shift {
      0%,100% { transform: translate(0,0); }
      20%      { transform: translate(-3%,2%); }
      40%      { transform: translate(2%,-3%); }
      60%      { transform: translate(-2%,3%); }
      80%      { transform: translate(3%,-2%); }
    }
    .tex-grain {
      position: absolute; inset: -50%;
      width: 200%; height: 200%;
      pointer-events: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 200px 200px;
      mix-blend-mode: overlay;
      animation: grain-shift 7s steps(1) infinite;
    }

    /* Texture: diagonal lines */
    .tex-lines {
      background: repeating-linear-gradient(
        -45deg,
        transparent, transparent 8px,
        rgba(255,255,255,0.05) 8px, rgba(255,255,255,0.05) 9px
      );
    }

    /* Texture: top glow line */
    .tex-glow {
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent);
      filter: blur(1px);
    }

    /* Dot pattern */
    .tex-dots {
      background-image: radial-gradient(circle, rgba(255,255,255,0.18) 1px, transparent 1px);
      background-size: 20px 20px;
    }