@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap");

body {
  font-family: "Plus Jakarta Sans", sans-serif;
  background-color: #fcfdfe;
  cursor: none;
}

/* Custom Cursor */
#cursor-dot {
  width: 8px;
  height: 8px;
  background: #0ea5e9;
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transition: transform 0.1s;
}

#cursor-outline {
  width: 40px;
  height: 40px;
  border: 2px solid rgba(14, 165, 233, 0.3);
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.glass-nav {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(14, 165, 233, 0.08);
}

/* Bento Grid Style */
.bento-card {
  background: white;
  border: 1px solid rgba(14, 165, 233, 0.1);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  position: relative;
}

.bento-card:hover {
  border-color: #0ea5e9;
  box-shadow: 0 25px 50px -12px rgba(14, 165, 233, 0.15);
  transform: translateY(-8px);
}

.hero-bg-animate {
  background:
    radial-gradient(
      circle at 20% 30%,
      rgba(56, 189, 248, 0.12) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 70%,
      rgba(99, 102, 241, 0.08) 0%,
      transparent 50%
    );
}

/* Mesh Gradient Background */
.mesh-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.5;
  background-image:
    radial-gradient(at 0% 0%, hsla(199, 98%, 48%, 0.15) 0, transparent 50%),
    radial-gradient(at 50% 0%, hsla(187, 92%, 69%, 0.1) 0, transparent 50%),
    radial-gradient(at 100% 0%, hsla(220, 100%, 70%, 0.15) 0, transparent 50%);
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-20px) rotate(2deg);
  }
}

.float-ui {
  animation: float 6s ease-in-out infinite;
}

.text-gradient {
  background: linear-gradient(to right, #0ea5e9, #6366f1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Marquee Animation */
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.marquee-container {
  overflow: hidden;
  white-space: nowrap;
  display: flex;
}

.marquee-content {
  display: flex;
  animation: marquee 30s linear infinite;
}

/* Hide scrollbar but keep functionality */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}