@layer utilities {
  .md\:flex-row {
    @media (width >= 48rem) {
      flex-direction: row;
    }
  }

  .md\:flex-col {
    @media (width >= 48rem) {
      flex-direction: column;
    }
  }

  .gradient-text {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
  }

  .card-hover {
      transition: all 0.3s ease;
  }

  .card-hover:hover {
      transform: translateY(-10px);
      box-shadow: 0 20px 40px rgba(0,0,0,0.1);
  }

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

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

  .blob {
      position: absolute;
      border-radius: 50%;
      filter: blur(60px);
      opacity: 0.3;
      animation: blob 7s infinite;
  }

  @keyframes blob {
      0%, 100% { transform: translate(0, 0) scale(1); }
      33% { transform: translate(30px, -50px) scale(1.1); }
      66% { transform: translate(-20px, 20px) scale(0.9); }
  }

  .navbar-scroll {
      backdrop-filter: blur(10px);
      background: rgba(255, 255, 255, 0.9);
  }

  .dark .navbar-scroll {
      background: rgba(12, 20, 39, 0.9);
  }
}