body {
  font-family: "Inter", sans-serif;
  background-color: #f8f9fa;
  scroll-behavior: smooth;
}

.hero-gradient {
  background: radial-gradient(
    circle at 70% 50%,
    rgba(59, 130, 246, 0.08) 0%,
    transparent 50%
  );
}

.bento-card {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.bento-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 40px -10px rgb(0 0 0 / 0.05);
}

.code-window {
  box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.15);
}

.glass-nav {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

@media (prefers-reduced-motion: no-preference) {
  .fade-up {
    animation: fadeUp 0.8s ease both;
  }
  @keyframes fadeUp {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}