.hero-right img {
    animation:float 6s ease-in-out infinite;
}

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

/*PARTICULES FUTURISTES*/

.particles {
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    pointer-events:none;
    overflow:hidden;
}

.particles span {
    position:absolute;
    width:2px;
    height:2px;
    background:#6C3BFF;
    border-radius:50%;
    opacity:0.6;
    animation:particleMove linear infinite;
}

@keyframes particleMove {
    from {
        transform:translateY(100vh);
        opacity:0;
    }
    to {
        transform:translateY(-10vh);
        opacity:1;
    }
}

/*Howitworks*/

.how-step {
    opacity:0;
    transform:translateY(30px);
    animation:fadeUp 0.6s cubic-bezier(0.4,0,0.2,1) forwards;
}

@keyframes fadeUp {
    to {
        opacity:1;
        transform:translateY(0);
    }
}

.how-container {
    position:relative;
}


.how-step:nth-child(1){ animation-delay:0.1s; }
.how-step:nth-child(2){ animation-delay:0.3s; }
.how-step:nth-child(3){ animation-delay:0.5s; }

.how-container::before {
    content:"";
    position:absolute;
    width:60%;
    height:1px;
    background:linear-gradient(90deg, transparent, #6C3BFF, transparent);
    top:50%;
    left:20%;
    z-index:-1;
}

/*Device Section*/

.device {
    opacity:0;
    transform:translateY(20px);
    animation:fadeUp 0.6s ease forwards;
}

.device:nth-child(1){ animation-delay:0.1s; }
.device:nth-child(2){ animation-delay:0.2s; }
.device:nth-child(3){ animation-delay:0.3s; }
.device:nth-child(4){ animation-delay:0.4s; }
.device:nth-child(5){ animation-delay:0.5s; }

/*Final CTA*/
.final-cta {
    animation:fadeUp 1s ease;
}

/*IMAGE / LOGO FLOAT (déjà partiel)*/

.hero-right img {
    animation:float 6s ease-in-out infinite;
}

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