/* =========================
   RESET & BASE
========================= */
* {margin:0; padding:0; box-sizing:border-box;}
body{font-family:'Poppins', sans-serif; background:#0f0f0f; color:white; line-height:1.6; scroll-behavior:smooth;}
a{text-decoration:none; color:white; transition:0.3s;}
img{display:block; max-width:100%; border-radius:10px;}

/* =========================
   HEADER
========================= */
header {
    display: flex;
    justify-content: space-between; /* desktop: logo a sinistra, nav a destra */
    align-items: center;
    position: fixed;
    top:0; left:0;
    width:100%;
    padding:15px 30px;
    background:rgba(0,0,0,0.85);
    z-index:1000;
    transition:0.4s;
}
header.scrolled {background:#000;}
.logo img {
    height:100px; /* logo grande */
    transition: transform 0.3s;
}
.logo img:hover {transform: scale(1.1);}
.menu-toggle {
    display:none;
    font-size:28px;
    cursor:pointer;
    position:absolute;
    right:30px;
}
nav {
    display:flex;
    gap:30px;
    position:relative;
}
nav a {
    color:#fff;
    font-weight:500;
    position:relative;
}
nav a::after {
    content:'';
    position:absolute;
    width:0;
    height:2px;
    background:#fff; /* bianco */
    bottom:-5px;
    left:0;
    transition:0.3s;
}
nav a:hover::after {width:100%;}
nav.show {
    display:flex;
    flex-direction:column;
    background:#111;
    position:absolute;
    top:70px;
    right:0;
    width:220px;
    padding:20px;
    border-radius:10px;
}

/* =========================
   HERO SECTIONS
========================= */
.hero, .hero-video{
    position:relative;
    height:100vh;
    display:flex; justify-content:center; align-items:center;
    overflow:hidden;
}
.hero {background-size:cover; background-position:center;}
.hero-video video {position:absolute; width:100%; height:100%; object-fit:cover;}
.overlay {position:absolute; width:100%; height:100%; background:rgba(0,0,0,0.6);}
.hero-text {position:absolute; text-align:center; z-index:2; animation:fadeUp 1.5s ease forwards;}
.hero-text h1 {font-size:60px; letter-spacing:5px; margin-bottom:15px; text-transform:uppercase;}
.hero-text p {font-size:20px; color:#ccc;}

/* =========================
   CARDS PRODOTTI
========================= */
.cards {
    display:flex; flex-wrap:wrap; justify-content:center; gap:30px;
    margin:50px 20px;
}
.card {
    background:#111;
    padding:20px;
    border-radius:15px;
    width:250px;
    text-align:center;
    transition:0.4s;
    box-shadow:0 5px 20px rgba(0,0,0,0.5);
}
.card:hover {transform:translateY(-10px) scale(1.05);}
.card img {border-radius:10px; margin-bottom:15px; transition:0.3s;}
.card img:hover {filter:brightness(1.1);}

/* =========================
   BUTTONS
========================= */
button {
    margin-top:15px;
    padding:12px 25px;
    background:#222; /* scuro */
    border:1px solid #fff;
    border-radius:30px;
    color:#fff;
    cursor:pointer;
    font-weight:600;
    letter-spacing:1px;
    transition:0.3s;
}
button:hover {
    background:#fff;
    color:#000;
    transform:scale(1.05);
}

/* =========================
   EXTRA IMAGES
========================= */
.images-section {
    margin:50px 20px;
    text-align:center;
}
.images-section h2 {margin-bottom:30px; font-size:28px; color:#fff;}
.extra-images {
    display:flex; justify-content:center; gap:20px; flex-wrap:wrap;
}
.extra-images img {
    width:250px;
    border-radius:15px;
    box-shadow:0 5px 20px rgba(0,0,0,0.5);
    transition:0.3s;
}
.extra-images img:hover {
    transform:scale(1.05);
    filter:brightness(1.1);
}

/* =========================
   FADE-IN ANIMATION
========================= */
.fade-in {
    opacity:0;
    transform:translateY(40px);
    transition:1s ease-out;
}
.fade-in.show {
    opacity:1;
    transform:translateY(0);
}
@keyframes fadeUp{
    from {opacity:0; transform:translateY(-40px);}
    to {opacity:1; transform:translateY(0);}
}

/* =========================
   FOOTER
========================= */
footer {
    background:#0a0a0a;
    padding:60px 20px;
    text-align:center;
}
footer .social {
    margin-bottom:25px;
}
footer .social a {
    color:#fff;
    font-size:28px;
    margin:0 15px;
    transition:0.3s;
}
footer .social a:hover {color:#ccc; transform:scale(1.3) rotate(-5deg);}
footer p {margin-top:10px; color:#aaa; font-size:14px;}
footer a {color:#fff;}

/* =========================
   FORM ISCRIZIONE / SUBSCRIBE
========================= */
.subscribe-section {
    background:#111;
    padding:60px 20px;
    text-align:center;
    border-top:2px solid #222;
}
.subscribe-section h2 {font-size:32px; margin-bottom:20px; color:#fff;}
.subscribe-section p {font-size:18px; color:#ccc; margin-bottom:30px;}
.subscribe-section form {
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
}
.subscribe-section form input[type="email"] {
    padding:12px 20px;
    border-radius:30px;
    border:none;
    width:280px;
    max-width:90%;
    outline:none;
    font-size:16px;
}
.subscribe-section form button {
    padding:12px 25px;
    background:#222;
    border:1px solid #fff;
    border-radius:30px;
    color:#fff;
    cursor:pointer;
    font-weight:600;
    letter-spacing:1px;
    font-size:16px;
    transition:0.3s;
}
.subscribe-section form button:hover {background:#fff; color:#000; transform:scale(1.05);}
#subscribe-message {margin-top:15px; color:#fff; font-size:16px;}

/* =========================
   SEZIONE VOTAZIONI (B/N)
========================= */
.voting-section {
    background:#000; padding:60px 20px; text-align:center; border-top:2px solid #333;
}
.voting-section h2 {font-size:32px; margin-bottom:20px; color:#fff;}
.voting-section p {font-size:18px; color:#ccc; margin-bottom:30px;}
.voting-cards {display:flex; flex-wrap:wrap; justify-content:center; gap:30px;}
.voting-card {
    background:#111; padding:20px; border-radius:15px; width:250px; text-align:center;
    box-shadow:0 5px 20px rgba(0,0,0,0.5); transition:0.3s;
}
.voting-card:hover {transform:translateY(-8px) scale(1.03);}
.voting-card img {border-radius:10px; margin-bottom:15px; transition:0.3s;}
.voting-card img:hover {filter:brightness(1.1);}
.voting-card button {
    margin-top:10px; padding:12px 25px; background:#222; border:1px solid #fff; border-radius:30px;
    color:#fff; cursor:pointer; font-weight:600; letter-spacing:1px; transition:0.3s;
}
.voting-card button:hover {background:#fff; color:#000; transform:scale(1.05);}
.vote-count {margin-top:10px; font-size:16px; color:#fff;}
.drop-section {margin-top:50px;}
.drop-section h3 {font-size:28px; margin-bottom:20px; color:#fff;}
.drop-section button {
    margin:10px; padding:12px 25px; background:#222; border:1px solid #fff; border-radius:30px;
    color:#fff; cursor:pointer; font-weight:600; transition:0.3s;
}
.drop-section button:hover {background:#fff; color:#000; transform:scale(1.05);}
#drop-result {margin-top:15px; font-size:16px; color:#fff;}

/* =========================
   CONTENUTO TESTO
========================= */
.content {
    max-width:900px;
    margin:80px auto 50px auto;
    padding:0 20px;
}
.content h2 {font-size:32px; margin-bottom:20px; color:#fff; text-align:center;}
.content p {font-size:18px; margin-bottom:20px; text-align:justify; color:#eee;}

/* =========================
   RESPONSIVE
========================= */
@media(max-width:1024px){
    .hero-text h1{font-size:50px;}
    .hero-text p{font-size:18px;}
    .cards{gap:20px;}
    .voting-cards{gap:20px;}
    .voting-card{width:220px;}
}
@media(max-width:768px){
    header {justify-content:center;}
    .menu-toggle{display:block;}
    nav{display:none;}
    .cards{flex-direction:column;align-items:center;}
    .voting-cards{flex-direction:column;align-items:center;}
    .drop-section button{width:80%; max-width:220px;}
    .hero-text h1{font-size:40px;}
    .hero-text p{font-size:16px;}
    .content h2{font-size:28px;}
    .content p{font-size:16px;}
}
@media(max-width:480px){
    .hero-text h1{font-size:32px;}
    .hero-text p{font-size:14px;}
    button{padding:10px 20px;}
    .extra-images img{width:180px;}
    .voting-card{width:200px;}
    .drop-section button{width:90%;}
    .subscribe-section form input[type="email"]{width:180px;}
    .subscribe-section form button{padding:8px 15px; font-size:14px;}
    .subscribe-section h2{font-size:24px;}
    .subscribe-section p{font-size:14px;}
}