.phone-mockup {
        width: 280px;
        height: 580px;
        position: relative;
    }
    .phone-mockup {
        width: 280px;
        height: 570px;
        perspective: 1000px;
        transform-style: preserve-3d;
        transition: all 0.5s ease-in-out;
    }

    /* Optional hover animation */
    .phone-mockup:hover {
        transform: scale(1.02) rotateY(2deg);
    }

    /* For the subtle rotation effect */
    .rotate-y-1 {
        transform: rotateY(1deg);
    }

    .rotate-z-1 {
        transform: rotateZ(0.5deg);
    }

    /* Animation for screen reflection */
    @keyframes screenGlow {
        0% { opacity: 0.5; }
        50% { opacity: 0.7; }
        100% { opacity: 0.5; }
    }
        
    .animate-blob {
        animation: blob 7s infinite;
    }
    
    .animation-delay-2000 {
        animation-delay: 2s;
    }
    
    .animation-delay-4000 {
        animation-delay: 4s;
    }
    
    @keyframes blob {
        0% {
            transform: translate(0px, 0px) scale(1);
        }
        33% {
            transform: translate(30px, -50px) scale(1.1);
        }
        66% {
            transform: translate(-20px, 20px) scale(0.9);
        }
        100% {
            transform: translate(0px, 0px) scale(1);
        }
    }
    .delay-100 { animation-delay: 100ms; }
    .delay-200 { animation-delay: 200ms; }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }

    @keyframes slideUp {
        from { opacity: 0; transform: translateY(50px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .grid-lines {
        background-image: linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
                          linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
        background-size: 40px 40px;
        height: 100%;
        width: 100%;
    }
    @keyframes float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-8px); }
    }
    
    .animate-float {
        animation: float 3s ease-in-out infinite;
    }
    html {
        scroll-behavior: smooth;
      }

      .feature-card-hover:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 30px -10px rgba(99, 102, 241, 0.15);
    }

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

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

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

    .animate-blob {
        animation: blob 12s ease-in-out infinite;
    }