@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

:root {
    --dark-bg: #1a1a2e;
    --csport-blue: #0BA6FF;
}

body {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    background-color: var(--dark-bg);
    color: #fff;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden; /* Evita lo scroll orizzontale */
}

/* Intro Screen */
#intro-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--dark-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 1;
    transition: opacity 1s ease-out;
}

#intro-screen.fade-out {
    opacity: 0;
    pointer-events: none;
}

#intro-text {
    font-size: clamp(2em, 4vw, 4em); /* Reattivo con limiti */
    color: #fff;
    opacity: 0;
    animation: fadeInText 1.5s ease-in-out forwards;
    text-align: center;
    padding: 0 20px;
}

.highlight-csport {
    color: var(--csport-blue);
}

@keyframes fadeInText {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fixed Logo (Always visible and centered) */
.fixed-logo {
    position: fixed;
    top: 5vmin; /* Reattivo alla viewport */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    font-weight: 700;
    /* MODIFICATO: Reso il font-size un po' più grande */
    font-size: clamp(1.4em, 2.5vw, 2em); /* Reattivo con limiti */
    color: #fff;
    z-index: 500;
}

.fixed-logo img {
    /* MODIFICATO: Resa l'altezza un po' più grande */
    height: clamp(35px, 5vw, 45px); /* Reattivo con limiti */
    margin-right: 15px;
    /* AGGIUNTO: Border radius di 12px */
    border-radius: 12px; 
}

/* Panel Container for ScrollTrigger Sections */
#panel-container {
    width: 100%;
    height: 100vh; /* Mantieni 100vh per lo scroll orizzontale */
    display: flex;
    flex-wrap: nowrap;
}

/* Section Styling (Panels) */
.panel {
    width: 100vw;
    height: 100vh; /* Essenziale per il pinning di ScrollTrigger */
    min-height: 100vh; /* Assicura che ogni pannello abbia almeno l'altezza della viewport */
    flex-shrink: 0;
    display: flex; 
    justify-content: center; 
    align-items: center; 
    position: relative;
    box-sizing: border-box; /* Include padding nel calcolo dell'altezza */
    overflow: hidden; /* Evita scrollbar interne se il contenuto è troppo grande */
}

.section-content-wrapper {
    max-width: 1200px;
    width: 100%;
    height: 100%; /* Permette al flexbox di distribuire lo spazio */
    max-height: 100%; /* Impedisce overflow in altezza */
    padding: clamp(4vh, 8vmin, 8vh) 5% clamp(2vh, 4vmin, 4vh); 
    box-sizing: border-box;
    text-align: center;
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Centra il contenuto all'interno del wrapper */
    gap: 2vh; 
    flex-grow: 1; 
}

.section-title {
    font-size: clamp(2em, 3.5vw, 3.5em); /* Reattivo con limiti */
    line-height: 1.2;
    margin-bottom: 0; /* Gestito dal gap del parent */
    color: #fff;
    text-align: center;
}

/* --- Section 1: Phone Mockup --- */
.phone-elements-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Centra telefono e cerchio verticalmente */
    height: auto; 
    min-height: 30vh; 
    max-height: 60vh; 
    width: 100%;
    margin-bottom: 0; 
}

.circle-bg-1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40vmin; 
    height: 40vmin; 
    max-width: 450px; 
    max-height: 450px; 
    z-index: 1;
}
.circle-bg-1 svg {
    width: 100%;
    height: 100%;
    display: block;
}

.phone-mockup-container {
    position: relative;
    z-index: 2;
    width: 20vmin; 
    max-width: 250px; 
    height: fit-content; 
    display: flex; 
    justify-content: center;
    align-items: center;
    margin-bottom: 0; 
}

.phone-mockup-container img {
    width: 100%;
    height: auto; 
    display: block;
}

/* Bottani di download */
.download-buttons {
    display: flex; 
    flex-direction: row; 
    justify-content: center;
    flex-wrap: wrap; 
    gap: 0.8rem; 
}
.download-buttons button + button {
    margin-left: 0; 
}


/* --- Section 2: Tablet Mockup --- */
.tablet-mockup-container {
    width: 60vmin; 
    max-width: 800px; 
    height: fit-content; 
}

.tablet-mockup-container img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- Section 3: Contact Form (Glassmorphism) --- */
.contact-form-glass {
    position: relative;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: clamp(15px, 3vw, 30px); 
    backdrop-filter: blur(15px) saturate(180%);
    -webkit-backdrop-filter: blur(15px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    max-width: 800px; 
    width: 90%; 
    overflow: hidden;
    z-index: 0;
    margin: 0 auto; 
    text-align: left; 
}

.glass-sphere {
    position: absolute;
    border-radius: 50%;
    z-index: -1;
}

.glass-sphere.s1 {
    width: clamp(120px, 25vmin, 250px); 
    height: clamp(120px, 25vmin, 250px); 
    top: -40px; left: -60px; 
}

.glass-sphere.s2 {
    width: clamp(100px, 20vmin, 200px); 
    height: clamp(100px, 20vmin, 200px); 
    bottom: -50px; right: -50px; 
}

.form-content {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.5vw, 15px); 
    text-align: left; 
}

.form-content label {
    font-size: clamp(0.8em, 1vw, 1em); 
    font-weight: 600;
    color: #eee;
    margin-bottom: -8px; 
}

.form-content input[type="text"],
.form-content input[type="email"],
.form-content textarea {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: clamp(8px, 1.2vw, 12px); 
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(0.85em, 0.9vw, 0.95em); 
    outline: none;
    transition: border-color 0.3s ease;
}

.form-content input::placeholder,
.form-content textarea::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.form-content input:focus,
.form-content textarea:focus {
    border-color: var(--csport-blue);
}

.form-content textarea {
    min-height: clamp(60px, 10vh, 100px); 
    resize: vertical;
}

.form-content button {
    background-color: var(--csport-blue);
    color: #fff;
    border: none;
    padding: clamp(8px, 1.2vw, 12px) clamp(15px, 2.5vw, 25px); 
    border-radius: 8px;
    font-size: clamp(0.9em, 1vw, 1em); 
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    align-self: flex-start;
    margin-top: clamp(8px, 1.5vw, 15px); 
}

.form-content button:hover {
    background-color: #088cdb;
    transform: translateY(-2px);
}


/* Media Queries */

/* Per schermi più piccoli, impila i bottoni e fissa le dimensioni */
@media (max-width: 768px) { 
    .fixed-logo {
        top: 3vmin; 
        /* MODIFICATO: Aumentato il font-size per mobile */
        font-size: clamp(1.2em, 4vw, 1.8em);
    }
    .fixed-logo img {
        /* MODIFICATO: Aumentata l'altezza per mobile */
        height: clamp(30px, 5vw, 40px);
    }

    .section-title {
        font-size: clamp(1.6em, 6vw, 2.2em); 
        margin-bottom: 0;
    }
    
    .section-content-wrapper {
        padding-top: clamp(4vh, 8vmin, 8vh); 
        padding-bottom: clamp(2vh, 4vmin, 4vh); 
        gap: 1.5vh; 
    }

    .phone-elements-container {
        height: 45vh; 
        min-height: unset; 
        max-height: unset; 
    }

    .phone-mockup-container {
        width: 30vmin; 
        max-width: 250px;
    }
    .circle-bg-1 {
        width: 50vmin; 
        height: 50vmin;
    }

    /* Regola i bottoni di download per schermi più piccoli */
    .download-buttons {
        flex-direction: column; 
        align-items: center; 
        gap: 15px; 
    }
    .download-buttons button {
        width: 180px; 
        height: 50px; 
        flex-shrink: 0; 
        margin-left: 0 !important; 
        margin-right: 0 !important; 
    }

    .contact-form-glass {
        padding: clamp(10px, 4vw, 20px); 
        width: 95%; 
    }
    .form-content label {
        font-size: clamp(0.8em, 2.5vw, 1em); 
    }
    .form-content input[type="text"],
    .form-content input[type="email"],
    .form-content textarea {
        font-size: clamp(0.8em, 2.5vw, 0.9em); 
    }
    .form-content button {
        padding: clamp(8px, 2.5vw, 12px) clamp(15px, 5vw, 25px); 
        font-size: clamp(0.9em, 2.8vw, 1em); 
    }
}

@media (min-width: 769px) { 
    .download-buttons button + button { 
        margin-left: 0.8rem; 
    }
}


@media (orientation: landscape) and (max-height: 600px) {
    .section-title {
        margin-top: 0.5vh; 
        font-size: clamp(1.2em, 2vw, 2em); 
    }
    .section-content-wrapper {
        padding-top: 2vh; 
        padding-bottom: 0.5vh; 
        justify-content: center; 
        gap: 0.2vh; 
    }
    .phone-elements-container {
        height: 35vh; 
        min-height: unset;
        max-height: unset;
    }
    .phone-mockup-container {
        width: clamp(120px, 20vmin, 250px); 
        max-width: 200px; 
    }
    .circle-bg-1 {
        width: 30vmin; 
        height: 30vmin; 
    }
    .download-buttons {
        gap: 0.6rem; 
    }
    .download-buttons button {
        width: 150px; 
        height: 45px; 
    }
    .contact-form-glass {
        padding: clamp(10px, 2vw, 15px); 
    }
    .form-content {
        gap: clamp(8px, 1.2vw, 12px); 
    }
    .form-content input[type="text"],
    .form-content input[type="email"],
    .form-content textarea {
        padding: clamp(7px, 1vw, 10px); 
        font-size: clamp(0.8em, 0.9vw, 0.9em); 
    }
    .form-content textarea {
        min-height: clamp(50px, 8vh, 80px); 
    }
    .form-content button {
        padding: clamp(7px, 1vw, 10px) clamp(12px, 2vw, 20px); 
        font-size: clamp(0.85em, 0.95vw, 0.95em); 
    }
}