/* Reset e Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #000000; /* Sfondo nero puro ripristinato */
    color: #ffffff;
    font-family: 'Arial Black', sans-serif;
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    overflow-x: hidden;
    letter-spacing: 1px;
}

/* Splash Screen */
#splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000000; /* Sfondo nero puro ripristinato */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.8s ease-out;
}

/* Logo caricamento */
#logo-splash {
    width: 100%;
    max-width: 90vw; 
    max-height: 90vh; 
    aspect-ratio: 1 / 1; 
    object-fit: contain;
    animation: pulse 2s infinite;
    flex-shrink: 0;
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(1); opacity: 0.6; }
}

.hidden {
    display: none;
    opacity: 0;
}

/* Hero Section - Testi Centrati */
.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center; 
    text-align: center; 
    padding: 60px 20px; 
    position: relative; 
}

/* Logo Principale: Piccolo e fissato in alto a sinistra */
.hero-logo {
    position: absolute; 
    top: 30px; 
    left: 5%; 
    width: 90px; 
    height: auto !important; 
    object-fit: contain; 
    display: block;
    flex-shrink: 0;
}

/* Testo Sfumato Centrato */
.subtitle-top {
    font-size: 3.5rem; 
    margin-bottom: 40px; 
    background: linear-gradient(to right, #20275c, #285a76, #439d9f, #50a181);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 2px;
    transition: filter 0.4s ease; /* Aggiunge morbidezza all'accensione della luce */
}

/* Effetto Hover sulla scritta (Glow Bianco mantenuto) */
.subtitle-top:hover {
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.6));
    cursor: default; 
}

/* Descrizione: Spessa, contorno bianco e interno vuoto */
.description {
    font-size: 1.8rem; 
    margin-bottom: 140px; /* Spazio aumentato drasticamente (circa 2 cm) */
    line-height: 1.4;
    font-family: 'Arial Black', sans-serif; 
    font-weight: 900; 
    color: transparent; 
    -webkit-text-stroke: 1.5px #ffffff; 
}

/* Form Container */
.form-container {
    display: flex;
    flex-direction: column;
    align-items: center; 
    width: 100%;
}

.email-form {
    display: flex;
    flex-direction: column;
    gap: 25px; 
    width: 100%;
    align-items: center; 
    margin-bottom: 30px; 
}

/* Barre e Pulsanti */
.email-input {
    width: 100%;
    max-width: 380px;
    height: 40px; 
    border-radius: 5px;
    padding: 0 20px;
    border: 2px solid #20275c; 
    background: #111;
    color: white;
    font-family: inherit;
    font-weight: inherit;
    font-style: inherit;
    text-transform: uppercase;
    font-size: 1.1rem;
    outline: none;
    box-shadow: 0 0 10px rgba(32, 39, 92, 0.4); 
    transition: all 0.3s ease;
    text-align: left; 
}

.email-input::placeholder {
    text-transform: uppercase;
}

.email-input:focus {
    box-shadow: 0 0 20px rgba(32, 39, 92, 0.8); 
    background: #000;
}

/* Pulsante: Gradiente Trasparente (effetto vetro sfumato) */
.vip-button {
    width: 100%;
    max-width: 260px; 
    height: 45px; 
    border-radius: 5px;
    /* Sfondo sfumato trasparente con gli stessi 4 colori del titolo */
    background: linear-gradient(to right, rgba(32, 39, 92, 0.6), rgba(40, 90, 118, 0.6), rgba(67, 157, 159, 0.6), rgba(80, 161, 129, 0.6));
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3); /* Bordino bianco per l'effetto vetro */
    font-family: inherit;
    font-weight: inherit;
    font-style: inherit;
    text-transform: uppercase;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 1px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); 
    backdrop-filter: blur(8px); /* Sforca il nero sottostante */
}

.vip-button:hover {
    transform: scale(1.02); 
    /* I colori diventano più intensi e meno trasparenti */
    background: linear-gradient(to right, rgba(32, 39, 92, 0.9), rgba(40, 90, 118, 0.9), rgba(67, 157, 159, 0.9), rgba(80, 161, 129, 0.9));
    border-color: rgba(255, 255, 255, 0.6); /* Il bordo si illumina */
    box-shadow: 0 6px 15px rgba(255, 255, 255, 0.25); /* Piccolo glow bianco */
}

/* Testo Iscrizione - Reso Pulito e Leggibile */
.small-text {
    font-size: 0.70rem;
    max-width: 500px;
    color: #aaaaaa;
    line-height: 1.5;
    text-align: center; 
    text-transform: uppercase; 
    font-family: Arial, sans-serif; 
    font-weight: 400; 
    font-style: normal; 
}

/* Features Section - Allineata a sinistra con linea continua */
.features {
    padding: 50px 0; 
    max-width: 800px;
    width: 85%; /* Mantiene il blocco al centro senza incollarlo ai bordi dello schermo */
    margin: 80px auto; 
    border-left: 1px solid #ffffff; /* LA LINEA BIANCA FINA */
}

.feature-item {
    display: flex;
    flex-direction: column; 
    align-items: flex-start; /* Allinea tutto a sinistra */
    text-align: left; /* Testo a sinistra */
    margin-bottom: 70px; 
    padding-left: 30px; /* Crea lo spazio tra la linea bianca e il testo */
}

.feature-item:last-child {
    margin-bottom: 0; /* Toglie lo spazio vuoto sotto l'ultimo elemento per chiudere bene la linea */
}

.feature-title {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Allinea il titolo a sinistra */
    gap: 15px; 
    margin-bottom: 15px; 
    font-size: 1.8rem; /* Titoli più grandi come richiesto */
}

.feature-description {
    color: #ffffff;
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 600px; 
    font-family: Arial, sans-serif; 
    font-weight: 600;
    text-transform: uppercase; 
    font-style: italic;
}

/* Titoli della timeline vuoti all'interno e con contorno colorato */
.color-unlock { 
    color: transparent; 
    -webkit-text-stroke: 1.5px #285a76; 
}

.color-your { 
    color: transparent; 
    -webkit-text-stroke: 1.5px #439d9f; 
}

.color-night { 
    color: transparent; 
    -webkit-text-stroke: 1.5px #50a181; 
}

.dot-neon {
    height: 18px;
    width: 18px;
    background-color: #285a76; 
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    box-shadow: 0 0 10px #285a76;
    animation: flash 1.5s infinite;
}

@keyframes flash {
    0% { opacity: 1; }
    50% { opacity: 0.2; }
    100% { opacity: 1; }
}

/* Contorni colorati per le descrizioni (Profondità) */
.desc-1 {
    text-shadow: 0px 0px 6px rgba(40, 90, 118, 0.8), 0px 0px 1px #285a76;
}

.desc-2 {
    text-shadow: 0px 0px 6px rgba(67, 157, 159, 0.8), 0px 0px 1px #439d9f;
}

.desc-3 {
    text-shadow: 0px 0px 6px rgba(80, 161, 129, 0.8), 0px 0px 1px #50a181;
}

/* Effetto testo che svanisce nel nulla per la Feature 3 */
.fade-out-text {
    /* Crea la sfumatura: parte bianco solido e finisce completamente trasparente */
    background: linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none; /* Rimuove l'alone colorato per permettere al testo di sparire davvero nel nero */
    display: inline-block; /* Aiuta il browser a calcolare bene la sfumatura sulla riga */
    padding-right: 5px; /* Previene che l'ultimo puntino venga tagliato di netto */
}


/* ========================================= */
/* UNICO BLOCCO OTTIMIZZAZIONE MOBILE        */
/* ========================================= */
@media (max-width: 768px) {
    
    /* 1. TITOLO - "Unlock" sopra e "your night" sotto, centrati */
    .subtitle-top {
        font-size: 2.8rem !important; /* Molto più grande ora che è su due righe */
        line-height: 1.1;
        text-align: center;
        display: block !important;
        white-space: pre-line !important; /* Permette il ritorno a capo */
        -webkit-text-stroke: 0px !important;
        filter: none !important;
        text-shadow: none !important;
        margin-bottom: 25px !important;
    }

    /* 2. DESCRIZIONE "NIGHTLIFE" */
    .description {
        font-size: 1.3rem;
        margin-bottom: 40px !important; 
    }

    /* 3. BOX EMAIL E TUTTO CIÒ CHE SEGUE - Abbassato di 1cm */
    .form-container {
        margin-top: 45px !important; /* Sposta in giù il box email e tutto il resto */
    }

    /* 4. SPAZIO TRA TESTO ISCRIZIONE E FEATURES (1.5CM) */
    .small-text {
        margin-bottom: 52px !important; 
        display: block;
        padding: 0 10px; /* Evita che il testo tocchi i bordi dello schermo */
    }

    /* 5. FORM E BOTTONI */
    .vip-button {
        max-width: 220px !important; 
        height: 40px !important;     
        font-size: 0.75rem !important; 
    }

    .email-input {
        max-width: 260px !important;
        height: 40px !important;
    }

    /* 6. LOGO E HERO */
    .hero-logo {
        width: 60px;
        top: 15px;
        left: 15px;
    }

    .hero {
        min-height: auto; 
        padding-top: 100px; 
    }

    .features {
        width: 85%;
        margin-top: 0;
    }
}