/* Hero Illustration Styles */
.hero-illustration-container {
    position: relative;
    width: 100%;
    max-width: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: float 6s ease-in-out infinite;
}

.hero-illustration {
    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: contain;
    filter: drop-shadow(0 25px 50px rgba(79, 70, 229, 0.25));
    border-radius: 20px;
}

/* Specific tweaks for phone screenshot */
.illustration-screenshot {
    max-width: 550px;
    /* Limit width to typical phone size + padding */
    margin: 0 auto;
    /* Center in the grid column */
}

.illustration-screenshot .hero-illustration {
    max-height: 1100px;
    /* Allow it to be taller */
    border-radius: 40px;
    /* More rounded for phone look */
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-15px);
    }

    100% {
        transform: translateY(0px);
    }
}

@media (max-width: 768px) {
    .hero-illustration-container {
        margin-top: 2rem;
        max-width: 100%;
    }

    .hero-illustration {
        max-height: 350px;
    }
}