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

body {
    font-family: 'Open Sans', sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f4;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* Evita scroll orizzontale durante le animazioni */
}

/* Tipografia */
h1, h2, h3, h4 {
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 0.8em;
    color: #2c3e50;
    line-height: 1.2;
}

h1.main-logo {
    font-size: 3em;
    color: #27ae60;
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.5em;
}
h2 { font-size: 1.8em; text-align: center; } /* Mobile */
h3 { font-size: 1.5em; } /* Mobile */

p, ul {
    font-size: 1.1em;
    margin-bottom: 1em;
}
ul {
    margin-left: 20px;
    list-style: disc;
}
ul li {
    margin-bottom: 0.5em;
}

/* Sezioni Pitch (Slides) */
.pitch-slide {
    min-height: 100vh; /* Ogni slide occupa l'intera viewport */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
    position: relative;
    overflow: hidden; /* Nasconde le bolle fuori dallo schermo */
    background-color: #f4f4f4; /* Default background */
    color: #333;
    text-align: center;
    transition: background-color 0.5s ease; /* Transizione colore sfondo tra slide */
}

.slide-content {
    width: 90%;
    max-width: 800px; /* Larghezza massima del contenuto centrale */
    position: relative;
    z-index: 2; /* Per stare sopra lo sfondo */
}

/* Sfondi delle Slide (Immagini Hero Sections) */
/* Useremo immagini chiare o con overlay scuro per leggibilità */
.bg-problem { background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('../img/problem-bg.jpg') no-repeat center center/cover; color: #fff; }
.bg-solution { background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('../img/solution-bg.jpg') no-repeat center center/cover; color: #fff; }
.bg-tech { background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('../img/tech-bg.jpg') no-repeat center center/cover; color: #fff; }
.bg-bizmodel { background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('../img/business-bg.jpg') no-repeat center center/cover; color: #fff; }
.bg-market { background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('../img/market-bg.jpg') no-repeat center center/cover; color: #fff; }
.bg-impact { background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('../img/sustainability-bg.jpg') no-repeat center center/cover; color: #fff; }
.bg-proscons { background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('../img/proscons-bg.jpg') no-repeat center center/cover; color: #fff; }
.bg-team { background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('../img/team-bg.jpg') no-repeat center center/cover; color: #fff; }
.bg-conclusione { background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('../img/conclusion-bg.jpg') no-repeat center center/cover; color: #fff; }
.bg-qna { background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('../img/qna-bg.jpg') no-repeat center center/cover; color: #fff; }


/* Stili e Animazioni delle "Nuvolette" (Bubble Cards) */
.bubble-card {
    background-color: rgba(255, 255, 255, 0.95); /* Sfondo quasi bianco, leggermente trasparente */
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    opacity: 0; /* Inizialmente nascosta */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* Transizione fluida */
    margin: 20px auto; /* Spazio tra le bolle e centraggio */
    text-align: left; /* Testo all'interno delle bolle allineato a sinistra */
    color: #333; /* Colore testo all'interno delle bolle */
    max-width: 100%; /* Assicura che la bolla non fuoriesca su mobile */
    box-sizing: border-box; /* Include padding e bordo nella larghezza */
}

/* Direzioni di Apparizione */
.bubble-card.from-left {
    transform: translateX(-100px); /* Parte da sinistra */
}
.bubble-card.from-right {
    transform: translateX(100px); /* Parte da destra */
}

/* Stato visibile (attivato da JS) */
.bubble-card.is-visible {
    opacity: 1;
    transform: translateX(0); /* Arriva alla posizione finale */
}

/* Pulsante "Passa alla Prossima Slide" */
.next-slide-btn {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #27ae60; /* Verde Green Flow */
    color: #fff;
    border: none;
    padding: 12px 25px;
    border-radius: 50px; /* Pulsante a pillola */
    font-size: 1.1em;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: background-color 0.3s ease, transform 0.2s ease;
    z-index: 10; /* Per essere sopra altri elementi */
}

.next-slide-btn:hover {
    background-color: #229a54;
    transform: translateX(-50%) scale(1.05);
}

/* ------------------------------------------- */
/* Stili specifici per la sezione Q&A Interattiva */
/* ------------------------------------------- */
#slide-qna .slide-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh; /* La sezione Q&A occupa l'intera altezza della viewport */
    position: relative; /* Per posizionamento assoluto delle bolle */
    padding-top: 50px; /* Spazio per evitare che le bolle stacchino troppo in alto */
    padding-bottom: 100px; /* Spazio per il pulsante se fosse fisso o scorrevole */
    overflow: hidden; /* Assicura che le bolle in transizione non causino scrollbar */
}

/* Bolla iniziale "Domande e Risposte" e bolla finale "Grazie" */
.qna-intro-bubble,
.qna-final-bubble {
    position: absolute; /* Posiziona al centro */
    width: 90%;
    max-width: 800px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0; /* Nascosto di default */
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    z-index: 10;
    text-align: center;
    /* Stili specifici */
    background-color: rgba(255, 255, 255, 0.98);
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
    padding: 40px;
    border-radius: 20px;
}
.qna-intro-bubble.is-visible,
.qna-final-bubble.is-visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.qna-intro-bubble.is-leaving,
.qna-final-bubble.is-leaving {
    opacity: 0;
    transform: translate(-50%, -150%) scale(0.8); /* Esce verso l'alto */
    pointer-events: none; /* Disabilita click durante l'uscita */
}

/* Contenitore di ogni coppia Domanda/Risposta */
.qna-item-wrapper {
    position: absolute; /* Posiziona le domande/risposte una sopra l'altra */
    width: 90%;
    max-width: 800px;
    height: auto; /* Adatta all'altezza del contenuto */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centra */
    opacity: 0; /* Inizialmente nascosto */
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    display: flex !important; /* Forza la visualizzazione come flexbox quando gestito da JS */
    flex-direction: column;
    align-items: center; /* Centra le bolle all'interno del wrapper */
    z-index: 1; /* Di default sotto le bolle attive */
    /* Nascondi il wrapper per default - il JS lo gestirà */
    visibility: hidden; /* Aggiunto per nascondere meglio prima di JS */
    pointer-events: none; /* Disabilita click quando nascosto */
}

.qna-item-wrapper.is-active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    z-index: 5;
    visibility: visible; /* Rendi visibile quando attivo */
    pointer-events: auto; /* Abilita click quando attivo */
}

.qna-item-wrapper.is-leaving {
    opacity: 0;
    transform: translate(-50%, -150%) scale(0.8); /* Esce verso l'alto */
    pointer-events: none; /* Disabilita click durante l'uscita */
}

/* Stili per le bolle di domanda e risposta all'interno del wrapper */
.qna-item-wrapper .bubble-card {
    position: relative;
    width: 100%; /* Le bolle interne prendono tutta la larghezza del wrapper */
    margin-bottom: 20px; /* Spazio tra domanda e risposta e tra coppie */
    opacity: 0; /* Sovrascritto per apparire con JS */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* Transizione per le singole bolle D/R */
}

/* Direzioni di Apparizione per le singole bolle D/R all'interno del wrapper */
.qna-item-wrapper .qna-question.from-left {
    transform: translateX(-50px);
}
.qna-item-wrapper .qna-answer.from-right {
    transform: translateX(50px);
}
.qna-item-wrapper .bubble-card.is-visible {
    opacity: 1;
    transform: translateX(0);
}


/* Stili specifici per la domanda e la risposta */
.qna-question {
    background-color: rgba(255, 255, 255, 0.98);
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    border-left: 5px solid #27ae60;
    padding-left: 25px;
    text-align: left; /* Assicura allineamento testo */
}
.qna-question h4 {
    color: #2c3e50;
    font-size: 1.2em; /* Riduci dimensione titolo domanda */
    margin-bottom: 0.5em;
}

.qna-answer {
    background-color: rgba(230, 255, 230, 0.98); /* Sfondo più chiaro per le risposte */
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    border-left: 5px solid #3498db;
    padding-left: 25px;
    margin-top: 10px;
    text-align: left; /* Assicura allineamento testo */
}

/* Pulsante per la prossima domanda specifico della Q&A */
.next-qna-btn {
    background-color: #3498db;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    transition: background-color 0.3s ease;
    align-self: center; /* Centra il pulsante all'interno del suo contenitore flex */
}

.next-qna-btn:hover {
    background-color: #2980b9;
}


/* Media Queries per Desktop */
@media (min-width: 768px) {
    h1.main-logo { font-size: 4.5em; }
    h2 { font-size: 2.5em; }
    h3 { font-size: 2em; }
    p, ul { font-size: 1.2em; }

    .pitch-slide {
        padding: 60px 40px;
    }

    .bubble-card {
        padding: 40px;
        margin: 30px auto;
        max-width: 900px; /* Aumenta leggermente la larghezza per desktop */
    }

    /* Stili specifici Q&A per desktop */
    .qna-item-wrapper .bubble-card {
        max-width: 60%; /* Le singole bolle D/R occupano il 60% della larghezza del wrapper */
    }
    .qna-item-wrapper .qna-question {
        margin-right: auto; /* Allinea domande a sinistra */
    }
    .qna-item-wrapper .qna-answer {
        margin-left: auto; /* Allinea risposte a destra */
    }
    .qna-intro-bubble,
    .qna-final-bubble {
        max-width: 800px;
    }
}