[x-cloak] { display: none !important; }
        
        html {
            scroll-behavior: smooth;
        }
        
        .gradient-bg {
            background: radial-gradient(circle at top right, rgba(2, 132, 199, 0.15) 0%, rgba(14, 165, 233, 0.05) 40%, transparent 70%);
        }
        
        .dark .gradient-bg {
            background: radial-gradient(circle at top right, rgba(2, 132, 199, 0.25) 0%, rgba(14, 165, 233, 0.15) 40%, transparent 70%);
        }
        
        .service-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            display: flex;
            flex-direction: column;
            height: 100%;
        }
        
        .service-card-content {
            flex-grow: 1;
        }
        
        /* .service-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
        } */
        
        .swiper {
            width: 100%;
            height: 100%;
        }
        
        .swiper-slide {
            display: flex;
            justify-content: center;
            align-items: center;
            /* height: 700px; */
        }

        
        
        .map-container {
            height: 400px;
            width: 100%;
            border-radius: 0.75rem;
            overflow: hidden;
            /* z-index: 10; */
        }
        
        
        .dark .dark\:bg-dark-900 {
            background-color: #0f172a;
        }
        
        .dark .dark\:bg-dark-800 {
            background-color: #1e293b;
        }
        
        .mobile-menu {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
            z-index: 1000;
        }
        
        .mobile-menu.open {
            max-height: 34rem;
        }
        
        .project-card {
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        
        .project-image {
            /* height: 220px; */
            background-size: cover;
            background-position: center;
        }
        
        .project-content {
            flex-grow: 1;
        }
        
        .leaflet-container {
            background-color: #f8fafc !important;
        }
        
        .dark .leaflet-container {
            background-color: #1e293b !important;
        }
        
        .leaflet-control-attribution {
            background-color: rgba(255, 255, 255, 0.8) !important;
            color: #333 !important;
            font-size: 11px;
            padding: 2px 5px;
        }
        
        .dark .leaflet-control-attribution {
            background-color: rgba(30, 41, 59, 0.8) !important;
            color: #cbd5e1 !important;
        }
        
        .contact-card {
            transition: transform 0.3s ease;
        }
        
        .contact-card:hover {
            transform: translateY(-3px);
        }


        .process-step::before {
            content: '';
            position: absolute;
            top: 40px;
            left: 24px;
            height: calc(100% - 40px);
            width: 2px;
            background: #7dd3fc;
            z-index: -1;
        }
        .dark .process-step::before {
            background: #0369a1;
        }

        #mailFitnessForm label {
        transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
        }
        #mailFitnessForm label:hover { transform: translateY(-1px); }
        #mailFitnessForm input:focus-visible + span,
        #mailFitnessForm label:focus-within {
        outline: 2px solid rgb(2 132 199 / .6);
        outline-offset: 2px;
        border-radius: .5rem;
        }

        /* Progressbar smoother */
        #mailFitnessBar { transition: width .25s ease; }

        #hostingFitnessForm label {
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
#hostingFitnessForm label:hover { transform: translateY(-1px); }
#hostingFitnessForm input:focus-visible + span,
#hostingFitnessForm label:focus-within {
  outline: 2px solid rgb(2 132 199 / .6);
  outline-offset: 2px;
  border-radius: .5rem;
}

/* Progressbar smoother */
#hostingFitnessBar { transition: width .25s ease; }
        
@keyframes bounce-with-pause {
  0%, 10%, 20%, 100% {
    transform: translateY(0);
  }
  5%, 15% {
    transform: translateY(-25%);
  }
}

.bounce-pause {
  animation: bounce-with-pause 5s ease-in-out infinite;
}
#not-found .chip{ @apply inline-flex items-center gap-1 px-3 py-1.5 rounded-full border border-gray-200 dark:border-gray-700 bg-white/70 dark:bg-dark-800/70 text-sm hover:bg-gray-50 dark:hover:bg-dark-700 transition; }
#not-found .glitch-layer{ position:absolute; inset:0; color:transparent; -webkit-text-stroke: 2px rgba(14,165,233,.8); text-stroke: 2px rgba(14,165,233,.8); }
  /* Glitch effect (prefers-reduced-motion respected in JS) */
  #not-found .glitch{ text-shadow: 0 10px 30px rgba(0,0,0,.15); }
  @keyframes glitchShiftA{ 0%,100%{ transform: translate(0,0) } 20%{ transform: translate(2px,-1px) } 40%{ transform: translate(-2px,1px) } 60%{ transform: translate(1px,2px) } 80%{ transform: translate(-1px,-2px) } }
  @keyframes glitchShiftB{ 0%,100%{ transform: translate(0,0) } 25%{ transform: translate(-3px,2px) } 50%{ transform: translate(3px,-2px) } 75%{ transform: translate(-2px,-1px) } }

.chip{font-size:.8rem;padding:.35rem .6rem;border-radius:.8rem;border:1px solid #e2e8f0;color:#475569}
  .bt-msg{max-width:88%}
  .bt-ai{background:rgba(99,102,241,.08)}
  .bt-user{background:rgba(2,6,23,.05)}
  .dark .bt-ai{background:rgba(99,102,241,.14)}
  .dark .bt-user{background:rgba(255,255,255,.03)}