body { font-family: 'Inter', sans-serif; scroll-behavior: smooth; }
    .gradient-bg { background: linear-gradient(120deg, #3B82F6, #6D28D9); }

    /* Fade animation */
    .fade-section {
      opacity: 0;
      filter: blur(20px);
      transform: translateY(20px);
      transition: all 0.5s ease-out;
    }
    .fade-section.show {
      opacity: 1;
      filter: blur(0);
      transform: translateY(0);
    }

    /* Navbar */
    header {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
    }

    .card {
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 14px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
      padding: 1.5rem;
      transition: all .25s ease;
    }
    .card:hover {
      box-shadow: 0 4px 14px rgba(0,0,0,0.08);
      transform: translateY(-2px);
    }

    /* ✅ Kotak scroll internal */
    .scroll-box {
      max-height: 600px;
      overflow-y: auto;
      padding-right: 0.75rem;
      scrollbar-width: thin;
      scrollbar-color: #93c5fd #f3f4f6;
    }

    .scroll-box::-webkit-scrollbar {
      width: 8px;
    }
    .scroll-box::-webkit-scrollbar-track {
      background: #f3f4f6;
      border-radius: 8px;
    }
    .scroll-box::-webkit-scrollbar-thumb {
      background: #93c5fd;
      border-radius: 8px;
    }
    .scroll-box::-webkit-scrollbar-thumb:hover {
      background: #3b82f6;
    }
    
/* 🔹 Floating Widget */
.floating-widget {
  position: fixed;
  bottom: 25px;
  right: 25px;
  z-index: 60;
}
.widget-button {
  background: transparent;
  border: none;
  cursor: pointer;
  transition: transform .25s ease;
}
.widget-button:hover { transform: scale(1.1); }

.widget-card {
  position: absolute;
  background: #ffffffee;
  backdrop-filter: blur(10px);
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  padding: 10px 14px;
  color: #1e3a8a;
  font-weight: 600;
  font-size: 14px;
  opacity: 0;
  transform: translateY(10px);
  transition: all .35s ease-out;
}
.widget-card:hover {
  background: #f0f9ff;
  color: #2563eb;
}
.widget-card-top { bottom: 90px; right: 0; }
.widget-card-left { bottom: 0; right: 70px; }

[x-show="openWidget"].widget-card {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
/* 🔹 Testimoni Section */
#testimoni .bg-white {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#testimoni .bg-white:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(59,130,246,0.1);
}

/* 🔹 Animasi gambar hero mengambang */
@keyframes floatHero {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-12px); }
  100% { transform: translateY(0px); }
}

.hero-float {
  animation: floatHero 3s ease-in-out infinite;
}

html {
  scroll-behavior: smooth;
}