/* Reset e Stili Base */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Courier New", Courier, monospace;
        }

       body {
            /* Sfondo Sfumato Bianco stile "Sky Tech" originale */
            background: radial-gradient(circle at center, #ffffff 0%, #f4f5f7 70%, #eaecee 100%);
            color: #2c2c2c;
            /* CORREZIONE 1: Fissa l'altezza massima al 100% dello schermo senza eccezioni */
            height: 100vh; 
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            margin: 0;
            padding: 0;
        }

        /* Navbar molto vicina al limite superiore (Invariata) */
        .navbar {
            background-color: transparent !important;
            padding: 0.25rem 2rem 0 2rem; 
            margin-top: 0;
            margin-bottom: 0;
            flex-shrink: 0;
        }

        /* Centratura verticale perfetta senza sforare lo schermo */
        .main-wrapper {
            flex: 1;
            display: flex;
            align-items: center; 
            justify-content: center;
            padding: 1rem 2rem; /* Ridotto leggermente il padding verticale */
            /* CORREZIONE 2: Cambiato da min-height a height fissa calcolata */
            height: calc(100vh - 50px); 
            /* CORREZIONE 3: Include i padding nel calcolo dell'altezza, impedendo sbalzi */
            box-sizing: border-box; 
            overflow: hidden; /* Taglia qualsiasi millimetro fantasma in eccesso */
        }

        .navbar-brand {
            font-weight: 700;
            letter-spacing: -0.02em;
            color: #2c2c2c !important;
        }

        /* Bottoni della Navbar ereditano il colore del testo */
        .btn-outline-dark {
            color: #2c2c2c !important;
            border-color: #2c2c2c !important;
            border-radius: 4px;
        }
        .btn-outline-dark:hover {
            background-color: #2c2c2c !important;
            color: #ffffff !important;
        }
        .btn-dark {
            background-color: #2c2c2c !important;
            border-color: #2c2c2c !important;
            color: #ffffff !important;
            border-radius: 4px;
        }
        .btn-dark:hover {
            background-color: #1a1a1a !important;
            border-color: #1a1a1a !important;
        }

        /* Layout Principale a Due Colonne */
        .main-wrapper {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem;
        }

        .container-hero {
            max-width: 1200px;
            width: 100%;
            display: grid;
            grid-template-columns: 1.1fr 0.9fr; 
            gap: 4rem;
            align-items: center;
        }

        /* Colonna Sinistra: Testo */
        .content-left {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .content-left h1 {
            font-size: 2.8rem;
            font-weight: 700;
            line-height: 1.2;
            letter-spacing: -0.02em;
            color: #2c2c2c;
        }

        .content-left p {
            font-size: 1.15rem;
            line-height: 1.6;
            opacity: 0.9;
        }

        .content-left ul {
            padding-left: 0;
        }

        .content-left li {
            font-size: 1.05rem;
            line-height: 1.5;
            margin-bottom: 0.5rem;
        }

        /* Colonna Destra: Mockup Smartphone */
        .content-right {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* Contenitore Smartphone Realistico */
        .phone-mockup {
            width: 320px;
            height: 640px;
            background: #2c2c2c;
            border: 12px solid #3a3a3a;
            border-radius: 40px;
            box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.12);
            overflow: hidden;
            position: relative;
        }

        /* Isola dinamica dello smartphone */
        .phone-mockup::before {
            content: '';
            position: absolute;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            width: 50px;
            height: 5px;
            background: #2c2c2c;
            border-radius: 15px;
            z-index: 10;
        }

        /* L'iframe che carica il biglietto da visita */
        .phone-mockup iframe {
            width: 100%;
            height: 100%;
            border: none;
            background: #ffffff;
        }

        /* Forza i testi delle modali e i loro input ad usare lo stesso stile */
        .modal {
            color: #2c2c2c !important;
        }
        .modal * {
            font-family: "Courier New", Courier, monospace;
        }

        /* Ottimizzazione per Tablet e Smartphone */
        @media (max-width: 768px) {
            .container-hero {
                grid-template-columns: 1fr;
                gap: 3rem;
                text-align: center;
            }

            .content-left h1 {
                font-size: 2.2rem;
            }

            .phone-mockup {
                width: 280px;
                height: 560px;
            }
            
            .content-left ul {
                text-align: left;
                display: inline-block;
                margin: 0 auto;
            }
        }
        /* Ottimizzazione Responsiva per Tablet e Smartphone */
        

        @media (max-width: 991px) {
            body {
                height: auto; /* Permette al body di allungarsi su mobile */
            }
            
            .main-wrapper {
                flex-direction: column;
                height: auto; /* Annulla l'altezza calcolata del PC */
                padding: 2rem 1rem;
                overflow: visible; /* Permette lo scorrimento standard su smartphone */
            }

            .container-hero {
                grid-template-columns: 1fr;
                gap: 2.5rem;
                text-align: center;
            }

            .content-right {
                order: -1; /* Telefono in cima su mobile */
                margin-bottom: 1.5rem;
            }
        }




        /* Stile della Select aggiornato per ospitare la freccia custom */
.custom-theme-select {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: #495057;
    background-color: #ffffff !important; /* Forza lo sfondo bianco */
    background-image: none !important;    /* Rimuove la freccia nativa di Bootstrap */
    border: 2px solid #e9ecef;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.25s ease-in-out;
    padding-left: 1.5rem; 
    padding-right: 2.5rem; /* Spazio per la freccia a destra */
    position: relative;
    z-index: 2;
    display: block; /* Ripristinato block per mantenere la centratura del testo */
    text-align: center;
}

/* Hover sulla Select */
.custom-theme-select:hover {
    border-color: #6c757d;
    background-color: #f8f9fa !important;
    transform: translateY(-1px);
}

/* Focus sulla Select */
.custom-theme-select:focus {
    border-color: #212529;
    color: #212529;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    outline: 0;
}

/* Creazione della freccia personalizzata */
.custom-theme-select::after {
    content: "";
    position: absolute;
    right: 1.2rem;
    top: 50%;
    transform: translateY(-50%); /* Centra perfettamente in verticale */
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #495057; /* Colore della freccia */
    transition: transform 0.25s ease-in-out;
    pointer-events: none;
}

/* Rotazione della freccia quando aperta verso il basso */
.custom-theme-select.menu-open::after {
    transform: translateY(-50%) rotate(180deg);
}

/* Quando si apre verso l'alto, la freccia punta verso l'alto anziché verso il basso di default */
.custom-theme-select.menu-open-up::after {
    transform: translateY(-50%) rotate(180deg);
}

/* Stile per l'opzione attualmente attiva nella lista */
.custom-dropdown-options li.active {
    background-color: #e9ecef;
    color: #212529;
    font-weight: 700;
}


/* Contenitore della lista opzioni */
.custom-dropdown-options {
    position: absolute;
    left: 0;
    right: 0;
    background-color: #ffffff;
    border: 2px solid #212529;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 8px 0;
    margin: 0;
    list-style: none;
    z-index: 10;
    max-height: 260px;
    overflow-y: auto;
    
    /* Gestione della chiusura fluida */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out, visibility 0.2s;
}

/* Classi di posizionamento (gestite via JS) */
.custom-dropdown-options.open-down {
    top: 110%;
    bottom: auto;
}

.custom-dropdown-options.open-up {
    bottom: 110%;
    top: auto;
}

/* Classe per mostrare la lista in modo fluido */
.custom-dropdown-options.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Stile per il titolo fisso dentro la tendina */
.custom-dropdown-options .dropdown-title {
    padding: 0.6rem 1.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: #6c757d;
    border-bottom: 1px solid #e9ecef;
    margin-bottom: 5px;
    pointer-events: none; /* Impedisce il click */
    background-color: #fafafa;
}

/* Singola opzione custom valida */
.custom-dropdown-options li:not(.dropdown-title) {
    padding: 0.6rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: #495057;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease;
}

.custom-dropdown-options li:not(.dropdown-title):hover {
    background-color: #f8f9fa;
    color: #212529;
}


/* Box contenitore di sicurezza Turnstile */
.turnstile-secure-box {
    background-color: #fcfdfe !important;
    border: 1px solid #e9ecef !important;
    transition: all 0.3s ease;
}

/* Modifiche permesse sui parametri esterni del widget di Cloudflare */
.cf-turnstile {
    min-height: 65px;
    display: inline-block;
    transition: transform 0.2s ease;
}

/* Effetto zoom discreto al passaggio del mouse */
.turnstile-secure-box:hover .cf-turnstile {
    transform: scale(1.01);
}