html, 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);
        }
         .reveal-up {
            opacity: 0;
            transform: translateY(30px);
        }

        /* Arc Layout Styles */
        .tech-arc-container {
            position: relative;
            height: 400px;
            width: 100%;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: flex-end;
        }
        
        .tech-item {
            position: absolute;
            bottom: -100px;
            left: 50%;
            transform-origin: bottom center;
            height: 500px;
            width: 70px;
            margin-left: -35px;
            pointer-events: none;
            z-index: 10;
        }

        .tech-icon-wrapper {
            width: 70px;
            height: 70px;
            background: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            border: 1px solid #f1f5f9;
            cursor: pointer;
            pointer-events: auto; 
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
        }

        .tech-icon-wrapper:hover {
            transform: scale(1.15);
            border-color: #0ea5e9;
            box-shadow: 0 10px 25px -5px rgba(14, 165, 233, 0.4);
        }

        .tech-icon-wrapper i {
            font-size: 1.75rem;
            color: #64748b; 
            transition: color 0.3s;
        }

        .tech-icon-wrapper:hover i {
            color: #0ea5e9; 
        }

        .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 {
  width: 100%;
  overflow: visible !important;
}

/* Wrapper */
.swiper-wrapper {
  align-items: stretch;
}

/* Slides */
.swiper-slide {
  transition: 
    opacity 0.5s ease,
    transform 0.5s cubic-bezier(0.4,0,0.2,1);
  opacity: 0.45;
  transform: scale(0.88);
  height: auto;
  display: flex;
}

/* Active Slide */
.swiper-slide-active {
  opacity: 1;
  transform: scale(1);
  z-index: 10;
}

/* Card full width */
.card-shell {
  width: 100%;
  transition: all 0.5s ease;
}

/* Premium glow for active card */
.swiper-slide-active .card-shell {
  box-shadow:
    0 40px 80px -20px 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.4);
  border-color: transparent;
}

/* Mobile optimization */
@media (max-width: 640px) {
  .swiper-slide {
    transform: scale(1) !important;
    opacity: 1 !important;
  }
}

    /* 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;
    }

        /* Card Hover Effects */
        .contact-card {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .contact-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            border-color: #0ea5e9;
        }

        /* 3D Map Styles */
        .map-container-3d {
            perspective: 1000px;
            transform-style: preserve-3d;
        }
        .map-plane {
            transform: rotateX(20deg) rotateY(-10deg) scale(0.9);
            transform-origin: center center;
            transition: transform 0.5s ease-out;
        }
        .map-container-3d:hover .map-plane {
            transform: rotateX(10deg) rotateY(-5deg) scale(0.95);
        }
        
        .pin-standing {
            transform: rotateY(10deg) rotateX(-20deg) translateY(-15px);
            transform-origin: bottom center;
            transition: transform 0.5s ease-out;
        }
        .map-container-3d:hover .pin-standing {
            transform: rotateY(5deg) rotateX(-10deg) translateY(-20px);
        }

        .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); }
        }
                /* FAQ Accordion */
        .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;
            opacity: 1;
        }
        .faq-icon {
            transition: transform 0.3s ease;
        }
        .faq-item.active .faq-icon {
            transform: rotate(180deg);
        }
        
           @keyframes float-slow {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
    }
    @keyframes float-fast {
        0%, 100% { transform: translateY(0px) rotate(0deg); }
        50% { transform: translateY(-15px) rotate(5deg); }
    }
    @keyframes slide-right {
        0% { transform: translateX(-50px); opacity: 0; }
        50% { opacity: 1; }
        100% { transform: translateX(150px); opacity: 0; }
    }
    @keyframes pulse-ring {
        0% { transform: scale(0.8); opacity: 0.8; }
        100% { transform: scale(2.5); opacity: 0; }
    }
    @keyframes radar-spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
    .toast {
    position: fixed;
    top: 30px;
    right: 30px;
    z-index: 9999;
    width: 420px;
    max-width: 95%;
    animation: slideIn 0.3s ease;
}

.toast-content {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    overflow: hidden;
    padding: 20px 24px 12px;
}

.toast-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.toast-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.toast-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #22c55e20;
    color: #22c55e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 18px;
}

.toast-header h4 {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.toast-close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #999;
}

.toast-close:hover {
    color: #111;
}

.toast-message {
    margin-top: 12px;
    font-size: 15px;
    color: #555;
}

#toast-stop {
    font-weight: 600;
    cursor: pointer;
    color: #000;
}

.toast-progress {
    height: 4px;
    background: #eee;
    margin-top: 12px;
}

#toast-progress-bar {
    height: 100%;
    width: 100%;
    background: #22c55e;
    transition: width linear;
}

.hidden {
    display: none;
}

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