/* ==========================================
   VARIABILI GLOBALI
   ========================================== */
:root {
    --colore-sfondo: #050505;
    --colore-testo: #F4F4F4;
    --colore-accento: #FF007F; 
    --font-display: 'Anton', sans-serif;
    --font-corpo: 'Space Grotesk', sans-serif;
}

/* ==========================================
   RESET E CURSORE CUSTOM
   ========================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    cursor: none; 
}

body {
    background-color: var(--colore-sfondo);
    color: var(--colore-testo);
    font-family: var(--font-corpo);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

::selection {
    background-color: var(--colore-accento);
    color: var(--colore-testo);
}

.cursore-inversione {
    position: fixed;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    background-color: var(--colore-accento);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    mix-blend-mode: difference;
    transition: width 0.2s, height 0.2s;
}

/* ==========================================
   NAVBAR FLUTTUANTE
   ========================================== */
.nav-pillola {
    max-width: 1200px; 
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(20, 20, 20, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 10px 10px 10px 24px;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 95%;
    z-index: 1000;
}

.testo-logo {
    font-family: var(--font-display);
    font-size: 1.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--colore-testo);
}

.nav-links {
    display: flex;
    gap: 25px;
}

.nav-links a {
    color: var(--colore-testo);
    text-decoration: none;
    font-family: var(--font-corpo);
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    transition: color 0.2s ease;
}

.nav-links a:hover {
    color: var(--colore-accento);
}

.gruppo-destra-nav {
    display: flex;
    align-items: center;
    gap: 15px; /* Spazio tra email, avatar e bottone */
}

.copia-email-header {
    font-family: var(--font-corpo);
    font-size: 0.9rem;
    color: #888;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.copia-email-header:hover {
    color: var(--colore-testo);
}

.avatar-profilo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--colore-accento);
}

/* IL BOTTONE BIANCO NELLA NAVBAR (Che si era perso) */
.bottone-primario {
    font-family: var(--font-corpo);
    font-weight: 700;
    background-color: var(--colore-testo);
    color: var(--colore-sfondo);
    padding: 14px 28px;
    border-radius: 100px;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.9rem;
    transition: transform 0.2s ease;
}

.bottone-primario:hover {
    transform: scale(1.05); /* Effetto pop all'hover */
}

/* ==========================================
   SEZIONE EROE
   ========================================== */
.sezione-eroe {
    padding-bottom: 6vh; 
    position: relative;
    height: 112vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.contenitore-titolo-eroe {
    text-align: center;
    z-index: 2;
    pointer-events: none; /* Essenziale per il cursore raggi X */
}

.testo-gigante {
    font-family: var(--font-display);
    font-size: clamp(3rem, 12vw, 13rem); 
    line-height: 1; 
    text-transform: uppercase;
    margin: 0;
    display: block;
}

.testo-vuoto {
    color: transparent;
    -webkit-text-stroke: 2px var(--colore-testo);
}

/* NASTRO SCORREVOLE */
.nastro-scorrevole {
    bottom: 5%; 
    position: absolute;
    left: -10%;
    width: 120%;
    background-color: var(--colore-accento);
    padding: 15px 0;
    transform: rotate(-3deg);
    display: flex;
    overflow: hidden;
    z-index: 10;
    box-shadow: 0 0 40px rgba(255, 0, 127, 0.4);
}

.testo-nastro {
    font-family: var(--font-corpo);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--colore-sfondo);
    text-transform: uppercase;
    white-space: nowrap;
    animation: scorri-sinistra 15s linear infinite;
}

@keyframes scorri-sinistra {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* BOTTONE MOBILE (Nascosto su Desktop) */
.bottone-mobile-fisso {
    display: none; 
}

/* ==========================================
   RESPONSIVE MOBILE
   ========================================== */
@media (max-width: 992px) {
    * { cursor: auto !important; }
    .cursore-inversione { display: none; }
    
    .nav-pillola {
        padding: 15px 24px;
        justify-content: center; /* Centra il logo */
    }

    /* Nascondi i link e la roba di destra su mobile */
    .nav-links, .gruppo-destra-nav { 
        display: none; 
    }

    /* Fai comparire il mega-bottone WhatsApp in basso */
    .bottone-mobile-fisso {
        display: flex;
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        background-color: var(--colore-accento);
        color: var(--colore-testo);
        justify-content: center;
        padding: 18px;
        border-radius: 100px;
        font-family: var(--font-corpo);
        font-weight: 700;
        text-transform: uppercase;
        text-decoration: none;
        z-index: 1000;
        box-shadow: 0 10px 30px rgba(255, 0, 127, 0.4);
    }
    
    .testo-vuoto {
        -webkit-text-stroke: 1px var(--colore-testo);
    }

        

            /* Nascondiamo avatar e bottone dalla navbar, li mettiamo in basso */
            .gruppo-destra-nav { display: none; }

            .bottone-mobile-fisso {
                display: flex;
                position: fixed;
                bottom: 20px;
                left: 50%;
                transform: translateX(-50%);
                width: 90%;
                background-color: var(--colore-accento);
                color: var(--colore-testo);
                justify-content: center;
                padding: 18px;
                border-radius: 100px;
                font-family: var(--font-corpo);
                font-weight: 700;
                text-transform: uppercase;
                text-decoration: none;
                z-index: 1000;
                box-shadow: 0 10px 30px rgba(255, 0, 127, 0.4);
            }

            .nastro-scorrevole { bottom: 25%; }
            .testo-vuoto { -webkit-text-stroke: 1px var(--colore-testo); }
        }

        /* ==========================================
   STILI GLOBALI CONDIVISI
   ========================================== */
.contenitore-centrato {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.titolo-sezione {
    font-family: var(--font-display);
    font-size: clamp(3rem, 8vw, 8rem);
    line-height: 1;
    text-transform: uppercase;
    margin-bottom: 3rem;
}

.text-center { text-align: center; }

/* ==========================================
   SEZIONE PUNTI DI FORZA (Sticky Stacking)
   ========================================== */
.sezione-punti-forza {
    padding: 100px 0 150px 0;
    background-color: var(--colore-sfondo);
    position: relative;
}

.pila-di-carte {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Spazio tra le carte quando non sono staccate */
    padding-bottom: 20vh; /* Spazio extra per permettere l'ultimo scroll */
}

/* La magia dello scroll che si blocca */
.carta-sticky {
    position: sticky;
    top: 100px; /* Si blocca a 100px dal top dello schermo */
    background-color: #111; /* Leggermente più chiaro dello sfondo per staccare */
    border: 2px solid #333;
    border-radius: 20px;
    padding: 60px 40px;
    height: 50vh; /* Altezza fissa */
    display: flex;
    align-items: center;
    box-shadow: 0 -20px 40px rgba(0,0,0,0.8); /* Ombra per quando si impilano */
    transform-origin: top center;
}

/* Sfalsiamo leggermente le carte quando si impilano */
#carta-1 { top: 120px; z-index: 1; }
#carta-2 { top: 140px; z-index: 2; background-color: #1a1a1a; }
#carta-3 { top: 160px; z-index: 3; }

/* La carta fucsia brutalista */
.carta-accento {
    background-color: var(--colore-accento) !important;
    color: var(--colore-sfondo);
    border: none;
}
.carta-accento .numero-carta { color: var(--colore-sfondo); opacity: 0.3; }

.contenuto-carta {
    position: relative;
    width: 100%;
}

.numero-carta {
    font-family: var(--font-display);
    font-size: 8rem;
    position: absolute;
    top: -50px;
    right: 0;
    opacity: 0.1;
    line-height: 1;
}

.contenuto-carta h3 {
    font-family: var(--font-display);
    font-size: 3.5rem;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.contenuto-carta p {
    font-size: 1.2rem;
    max-width: 600px;
    line-height: 1.6;
}

/* ==========================================
   SEZIONE PORTFOLIO E IPHONE MOCKUP
   ========================================== */
.sezione-portfolio {
    padding: 100px 0;
    background-color: var(--colore-sfondo);
}

.griglia-iphone {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 60px;
    margin-top: 80px;
    width: 90%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

/* Il Tuo Codice dell'iPhone Mockup, perfezionato */
.iphone-mockup {
    position: relative;
    width: 320px;          
    height: 650px;         
    background-color: #0a0a0a;
    border: 14px solid #222; 
    border-radius: 50px;   
    overflow: hidden;      
    /* Il glow fucsia di Ompage */
    box-shadow: 0 20px 50px rgba(255, 0, 127, 0.15), 
                inset 0 0 10px rgba(0,0,0,0.5); 
    transition: transform 0.4s ease;
}

/* Effetto interattivo: l'iPhone si alza leggermente se il mouse (o dito) passa sopra */
.iphone-mockup:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px rgba(255, 0, 127, 0.25), 
                inset 0 0 10px rgba(0,0,0,0.5);
}

.dynamic-island {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 30px;
    background-color: #000;
    border-radius: 20px;
    z-index: 10; 
}

.screen-video {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    border-radius: 36px; /* Segue il bordo interno */
    background-color: #111; /* Colore di caricamento */
}

/* ==========================================
   RESPONSIVE MOBILE (Sotto i 992px)
   ========================================== */
@media (max-width: 992px) {
    .carta-sticky {
        position: relative; /* Disattiviamo lo sticky su mobile per non incastrare lo schermo piccolo */
        top: 0 !important;
        height: auto;
        padding: 40px 20px;
        margin-bottom: 20px;
    }
    
    .pila-di-carte { padding-bottom: 50px; }
    
    .contenuto-carta h3 { font-size: 2.5rem; }
    .numero-carta { font-size: 5rem; top: -20px; }
    
    .griglia-iphone { gap: 40px; }
    .iphone-mockup { width: 300px; height: 600px; }
}


/* ==========================================
   SEZIONE PROCESSO (Come Funziona)
   ========================================== */
.sezione-processo {
    padding: 150px 0;
    background-color: var(--colore-sfondo);
    border-top: 1px solid rgba(255,255,255,0.1);
}

.griglia-processo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}

.processo-titolo-colonna {
    position: sticky;
    top: 150px;
    height: max-content;
}

.step-singolo {
    display: flex;
    gap: 30px;
    margin-bottom: 80px;
    padding-top: 30px;
    border-top: 2px solid #333;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Classe aggiunta via JS quando si scrolla */
.step-singolo.visibile {
    opacity: 1;
    transform: translateY(0);
}

.step-numero {
    font-family: var(--font-display);
    font-size: 4rem;
    color: var(--colore-accento);
    line-height: 0.8;
}

.step-testo h3 {
    font-family: var(--font-display);
    font-size: 2rem;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.step-testo p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #aaa; /* Grigio chiaro per leggibilità */
}

/* ==========================================
   SEZIONE METODO (Inversione Cromatica)
   ========================================== */
.sezione-metodo {
    padding: 150px 0;
    /* Inversione totale: Sfondo bianco, testo nero */
    background-color: var(--colore-testo); 
    color: var(--colore-sfondo);
}

.testo-gigante-metodo {
    font-family: var(--font-display);
    font-size: clamp(3rem, 7vw, 7rem);
    line-height: 1;
    text-transform: uppercase;
    margin-bottom: 40px;
}

/* Il tratto brutalista per eccellenza: la cancellatura evidente */
.testo-barrato {
    text-decoration: line-through;
    text-decoration-color: var(--colore-accento);
    text-decoration-thickness: 6px;
    opacity: 0.6;
}

.evidenziatore-fucsia {
    color: var(--colore-accento);
}

.descrizione-metodo {
    font-size: 1.5rem;
    line-height: 1.5;
    max-width: 800px;
    font-weight: 700;
}

/* ==========================================
   SEZIONE FAQ (Accordion)
   ========================================== */
.sezione-faq {
    padding: 150px 0;
    background-color: var(--colore-sfondo);
}

.faq-elemento {
    border-bottom: 2px solid #333;
    /* Rende l'intera riga interattiva col cursore custom */
}

.faq-domanda {
    padding: 40px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: none; /* Cursore custom gestito da JS */
}

.faq-domanda h3 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-right: 20px;
}

.faq-icona {
    font-family: var(--font-display);
    font-size: 3rem;
    color: var(--colore-accento);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    line-height: 0;
}

/* TECNICA GRID ANIMATION: Animare l'altezza senza JS e senza lag */
.faq-risposta-wrapper {
    display: grid;
    grid-template-rows: 0fr; /* Chiuso di default */
    transition: grid-template-rows 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-risposta-interna {
    overflow: hidden; /* Nasconde il testo quando è chiuso */
}

.faq-risposta-interna p {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #aaa;
    padding-bottom: 40px;
    max-width: 800px;
}

/* Stati Attivi aggiunti da JS */
.faq-elemento.attivo .faq-risposta-wrapper {
    grid-template-rows: 1fr; /* Si apre fluidamente all'altezza del contenuto */
}

.faq-elemento.attivo .faq-icona {
    transform: rotate(45deg); /* Trasforma il + in una X */
    color: var(--colore-testo);
}

/* ==========================================
   RESPONSIVE MOBILE (Sotto i 992px)
   ========================================== */
@media (max-width: 992px) {
    .griglia-processo { grid-template-columns: 1fr; gap: 40px; }
    .processo-titolo-colonna { position: relative; top: 0; }
    
    .step-singolo { flex-direction: column; gap: 10px; margin-bottom: 40px; }
    .step-numero { font-size: 3rem; }
    
    .testo-barrato { text-decoration-thickness: 3px; }
    .descrizione-metodo { font-size: 1.2rem; }
    
    .faq-domanda { padding: 25px 0; }
    .faq-domanda h3 { font-size: 1.4rem; }
    .faq-icona { font-size: 2rem; }
}

/* ==========================================
   SEZIONE FOOTER (The Boss CTA)
   ========================================== */
.sezione-boss-footer {
    min-height: 100vh; 
    background-color: var(--colore-sfondo);
    position: relative; /* Serve per l'absolute dell'avatar */
    overflow: hidden; 
    display: flex;
    align-items: flex-end; /* Centra il testo in verticale */
    border-top: 2px solid #222;
}

/* LA MAGIA DELL'AVATAR: Incollato allo schermo a sinistra e in basso */
.footer-avatar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100vh; /* Altezza imponente */
    z-index: 1; /* Sta dietro al testo se per caso si toccano */
}

.avatar-immagine {
    height: 100%;
    width: auto;
    display: block;
    margin: 0;
    padding: 0;
    object-fit: contain;
    object-position: bottom left; /* Ancora l'immagine in basso a sx */
}

/* IL TESTO SPINTI A DESTRA */
.footer-layout {
    display: flex;
    justify-content: flex-end; /* Spinge tutto il blocco a destra */
    width: 100%;
    position: relative;
    z-index: 2; /* Sopra l'avatar */
}

.footer-testo {
    width: 50%; /* Prende solo la metà destra dello schermo */
    display: flex;
    flex-direction: column;
    align-items: flex-start; 
    padding-bottom: 20px;
}

.testo-gigante-footer {
    font-family: var(--font-display);
    font-size: clamp(3rem, 8vw, 8rem);
    line-height: 1;
    color: var(--colore-testo);
    margin-bottom: 40px;
    margin-top: 0;
}

.video-background {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    z-index: -2;
    object-fit: cover;
    filter: grayscale(1) contrast(1.2); /* Lo rende B/W e più cattivo */
}

.overlay-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* Regola l'opacità per leggere il testo */
    z-index: -1;
}

/* Il Bottone Offset Brutalista */
.bottone-offset {
    display: inline-block;
    background-color: var(--colore-accento);
    color: var(--colore-sfondo);
    font-family: var(--font-display);
    font-size: 2rem;
    padding: 20px 40px;
    border: 3px solid var(--colore-sfondo); 
    text-decoration: none;
    position: relative;
    transition: transform 0.1s ease;
    box-shadow: 10px 10px 0px rgba(244, 244, 244, 0.2); 
    cursor: none;
}

.bottone-offset:active {
    transform: translate(5px, 5px);
    box-shadow: 5px 5px 0px rgba(244, 244, 244, 0.2);
}

/* Link Legali nel Footer */
.link-legali {
    margin-top: 60px;
    font-size: 0.8rem;
    color: #666;
    font-family: var(--font-corpo);
}

.copia-email-footer {
    display: inline-block;
    margin-top: 8px;
    color: #888;
    text-decoration: underline;
    transition: color 0.2s ease;
    cursor: none;
}

.copia-email-footer:hover {
    color: var(--colore-testo);
}

.lista-link-privacy {
    display: flex;
    gap: 20px;
    margin-top: 15px;
}

.apri-modale {
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    text-decoration: underline;
    font-family: var(--font-corpo);
    padding: 0;
}
.apri-modale:hover { color: var(--colore-testo); }

/* ==========================================
   MODALI E COOKIE BANNER (Brutalist UI)
   ========================================== */
.overlay-modale {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    z-index: 10000;
    opacity: 0;
    pointer-events: none; /* Disattivato di default */
    transition: opacity 0.3s ease;
}

.overlay-modale.attivo {
    opacity: 1;
    pointer-events: all;
}

.modale-legale {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -40%); /* Parte un po' più in alto */
    width: 90%;
    max-width: 600px;
    background-color: var(--colore-testo); /* Sfondo bianco brutalista */
    color: var(--colore-sfondo); /* Testo nero */
    border: 4px solid var(--colore-sfondo);
    padding: 40px;
    z-index: 10001;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s ease;
    box-shadow: 20px 20px 0px var(--colore-accento); /* Ombra rosa fucsia */
}

.modale-legale.attivo {
    opacity: 1;
    pointer-events: all;
    transform: translate(-50%, -50%); /* Cade al centro perfettamente */
}

.modale-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--colore-sfondo);
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.modale-header h3 {
    font-family: var(--font-display);
    font-size: 2rem;
    margin: 0;
}

.chiudi-modale {
    background: none; border: none;
    font-size: 3rem;
    color: var(--colore-sfondo);
    cursor: pointer;
    line-height: 0.5;
}

.modale-corpo p {
    margin-bottom: 15px;
    font-size: 1.1rem;
    line-height: 1.5;
}

/* Banner Cookie */
.banner-cookie {
    position: fixed;
    bottom: -100%; /* Nascosto di default */
    left: 20px;
    width: calc(100% - 40px);
    max-width: 500px;
    background-color: #111;
    border: 2px solid var(--colore-accento);
    padding: 20px;
    z-index: 9998;
    display: flex;
    flex-direction: column;
    gap: 15px;
    transition: bottom 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 -10px 30px rgba(0,0,0,0.5);
}

.banner-cookie.visibile {
    bottom: 20px; /* Sale dallo schermo */
}

.banner-cookie p { font-size: 0.9rem; line-height: 1.4; color: #ccc;}

/* ==========================================
   RESPONSIVE MOBILE (Sotto i 992px)
   ========================================== */
@media (max-width: 992px) {
    .sezione-boss-footer { 
        height: auto;
        padding-top: 50px; 
        flex-direction: column; /* Su mobile impiliamo da zero */
        justify-content: flex-end;
    }
    
    .footer-layout { 
        justify-content: center;
        padding-bottom: 50px;
    }

    .footer-testo {
        width: 100%;
        align-items: center; /* Centra testo su mobile */
        text-align: center;
    }
    
    .testo-gigante-footer { font-size: 4.5rem; }
    .bottone-offset { font-size: 1.5rem; padding: 15px 30px; }
    .lista-link-privacy { justify-content: center; }
    
    /* Su mobile l'avatar non è absolute, si appoggia in fondo */
    .footer-avatar { 
        position: relative;
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
    }
    .avatar-immagine { 
        max-height: 50vh; 
        object-position: bottom center; 
    }
}