.animated-illustration {
    position: relative;
    width: 100%;
    height: 400px;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    overflow: hidden;
}

@media (max-width: 768px) {
    .animated-illustration {
        height: 300px;
    }
    .blob {
        width: 250px;
        height: 250px;
    }
    .blob-2 {
        width: 200px;
        height: 200px;
    }
    .animated-illustration .main-icon {
        font-size: 5rem;
    }
    .animated-illustration .float-icon {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }
}
.blob {
    position: absolute;
    width: 320px;
    height: 320px;
    background: linear-gradient(135deg, var(--primary) 0%, rgba(24, 91, 157, 0.5) 100%);
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    animation: morph 8s ease-in-out infinite;
    z-index: 1;
    opacity: 0.15;
}
.blob-2 {
    position: absolute;
    width: 250px;
    height: 250px;
    background: linear-gradient(135deg, var(--secondary) 0%, rgba(212, 175, 55, 0.2) 100%);
    animation: morph 6s ease-in-out infinite reverse;
    z-index: 1;
    opacity: 0.25;
}
.animated-illustration .main-icon {
    font-size: 8rem;
    color: var(--primary);
    z-index: 2;
    animation: float-main 4s ease-in-out infinite;
    text-shadow: 0 10px 20px rgba(10, 54, 99, 0.2);
}
.animated-illustration .float-icon {
    position: absolute;
    font-size: 2rem;
    color: var(--secondary);
    z-index: 2;
    background: white;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}
.fi-1 { top: 10%; left: 10%; animation: float 5s ease-in-out infinite 0.5s; }
.fi-2 { top: 20%; right: 5%; animation: float 4s ease-in-out infinite 1.5s; color: var(--primary); }
.fi-3 { bottom: 15%; left: 15%; animation: float 6s ease-in-out infinite 2.5s; color: #E74C3C; }

@keyframes morph {
    0%, 100% { border-radius: 40% 60% 70% 30% / 40% 40% 60% 50%; }
    34% { border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%; }
    67% { border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%; }
}
@keyframes float-main {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}
@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(5deg); }
}