/* ================= HERO ================= */
#hero{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;      /* centro orizzontale */
    justify-content:center;  /* centro verticale */
    text-align:center;
    gap:30px;
    background:radial-gradient(circle at top,#0b1d2a,#05080f);
}

.hero-content .badge{
    display:inline-block;
    padding:8px 18px;
    border-radius:30px;
    background:var(--glass);
    margin-bottom:20px;
}
.hero-content h1{
    font-size:clamp(2.5rem,5vw,4rem);
}
.hero-content span{
    background:linear-gradient(90deg,var(--accent),var(--accent2));
    -webkit-background-clip:text;
    color:var(--accent);
}
.hero-actions{
    justify-content:center;
    margin-top:30px;
    display:flex;
    gap:20px;
}
.hero-visual{
    height:420px;
    border-radius:var(--radius);
    background:var(--glass);
    display:flex;
    align-items:center;
    justify-content:center;
    animation:float 6s ease-in-out infinite;
}
@keyframes float{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-15px)}
}

/* ================= HERO SLIDER ================= */
.hero-visual.slider {
    position: relative;
    overflow: hidden;
}

.hero-visual .slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.2s ease, transform 6s ease;
    transform: scale(1.05);
}

.hero-visual .slide.active {
    opacity: 1;
    transform: scale(1);
}

/* overlay elegante sopra immagini */
.hero-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to left,
        rgba(0,0,0,0.15),
        rgba(0,0,0,0.6)
    );
}