/* =========================================
   RESET & BASE
   ========================================= */
* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
    /* Font di sistema principale per velocità estrema (Zero Dipendenze) */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
}

body { 
    background-color: #f4f7f6; 
    color: #333; 
    line-height: 1.6; 
}

a { 
    text-decoration: none; 
    color: inherit; 
    -webkit-tap-highlight-color: transparent; /* Rimuove il flash blu al tocco su mobile */
}

/* =========================================
   HEADER SNELLO (Mobile & Desktop)
   ========================================= */
.main-header { 
    background: #1a1a1a; 
    color: #fff; 
    display: flex; 
    align-items: center; 
    padding: 12px 15px; 
    height: 75px; /* Altezza fissa e pulita */
}

.main-header .logo-img { 
    width: 50px; 
    height: 50px; 
    flex-shrink: 0; /* Impedisce al logo di rimpicciolirsi */
    margin-right: 10px;
}

.main-header .brand-name { 
    flex-grow: 1; 
    text-align: center; /* Centra il testo nello spazio rimanente */
    font-size: clamp(0.9rem, 4vw, 1.3rem); /* Il testo si adatta automaticamente allo schermo! */
    font-weight: 800; 
    text-transform: uppercase; 
    white-space: nowrap; /* Forza il testo su un'unica riga */
    letter-spacing: 0.5px;
    /* Spinge leggermente indietro per compensare lo spazio del logo a sinistra e centrare visivamente */
    transform: translateX(-15px); 
}

/* =========================================
   PRIMA SEZIONE: HERO (Impostazione base Mobile)
   ========================================= */
.hero-section {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    overflow: hidden; /* Taglia gli angoli dell'immagine se sbordano */
    margin-bottom: 25px;
    display: flex;
    flex-direction: column; /* Su mobile: Elementi impilati verticalmente */
}

.hero-text {
    padding: 25px 20px;
    text-align: center;
}

.hero-text h1 {
    font-size: 1.6rem;
    line-height: 1.2;
    color: #28a745;
    margin-bottom: 12px;
}

.hero-text p {
    font-size: 1rem;
    color: #444;
}

.hero-image {
    width: 100%;
    /* Rimuove lo spazio bianco fantasma sotto le immagini */
    font-size: 0; 
}

.hero-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

/* =========================================
   VERSIONE DESKTOP (Schermi più larghi di 768px)
   ========================================= */
@media (min-width: 768px) {
    .hero-section {
        flex-direction: row-reverse; /* Magia! Mette il testo a DESTRA e l'immagine a SINISTRA */
        align-items: center;
    }
    
    .hero-text {
        flex: 1; /* Prende metà spazio */
        padding: 40px;
        text-align: left; /* Testo allineato a sinistra su PC */
    }
    
    .hero-image {
        flex: 1; /* Prende metà spazio */
    }
    
    .main-header .brand-name {
        transform: translateX(-25px); /* Regolazione centraggio per schermi grandi */
    }
}

/* =========================================
   MAIN CONTENT (Vuoto per ora, ma preparato)
   ========================================= */
main { 
    padding: 20px 15px; 
    max-width: 800px; 
    margin: 0 auto; 
}

/* Spazio vitale per impedire che l'ultimo testo finisca dietro la barra */
.bottom-spacer { 
    height: 90px; 
}

/* Classi base per i futuri contenuti del main (basate sul tuo scheletro originale) */
.dashboard-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 15px; 
    margin-bottom: 30px; 
}
.card { 
    background: #fff; 
    padding: 15px; 
    border-radius: 12px; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); 
    text-align: center; 
}
.card h3 { 
    font-size: 0.9rem; 
    color: #666; 
    margin-bottom: 5px; 
}
.card .value { 
    font-size: 1.8rem; 
    font-weight: bold; 
    color: #28a745; 
}
.card .trend { 
    font-size: 0.8rem; 
    color: #28a745; 
    margin-top: 5px; 
}

.seo-box { 
    background: #fff; 
    padding: 20px; 
    border-radius: 12px; 
    margin-bottom: 20px; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); 
}
.seo-box h2 { 
    font-size: 1.4rem; 
    margin-bottom: 10px; 
    color: #1a1a1a; 
}
.faq-item { 
    margin-top: 15px; 
    border-bottom: 1px solid #eee; 
    padding-bottom: 15px; 
}
.faq-item h3 { 
    font-size: 1.1rem; 
    margin-bottom: 5px; 
}

/* =========================================
   BOTTOM NAVIGATION BAR
   ========================================= */
.bottom-nav { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    background: #ffffff; 
    display: flex; 
    justify-content: space-around; 
    align-items: center; 
    padding: 10px 0; 
    /* Supporto per la safe area degli iPhone con notch/dynamic island */
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1); 
    z-index: 900; 
}
.nav-item { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    color: #888; 
    font-size: 0.75rem; 
    font-weight: 500; 
    transition: color 0.2s; 
    flex: 1; 
}
.nav-item .icon { 
    width: 24px; 
    height: 24px; 
    margin-bottom: 4px; 
}
.nav-item.active, .nav-item:hover { 
    color: #28a745; 
}

/* PULSANTE CHIAMATA (Centrato verticalmente) */
.call-btn-container { 
    flex: 1.2; 
}
.call-circle { 
    background-color: #25D366; 
    width: 54px; 
    height: 54px; 
    border-radius: 50%; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.5); 
    /* Effetto floating rimosso per perfetto centraggio verticale */
}
.icon-call { 
    width: 26px; 
    height: 26px; 
    color: #fff; 
    fill: #fff; /* Dà più corpo all'icona del telefono */
}

/* =========================================
   BOTTOM SHEET MENUS (Tendine che salgono)
   ========================================= */
.bottom-sheet-overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.6); 
    z-index: 1000; 
    opacity: 0; 
    visibility: hidden; 
    transition: opacity 0.3s ease, visibility 0.3s ease; 
    display: flex; 
    align-items: flex-end; 
}
.bottom-sheet-overlay.active { 
    opacity: 1; 
    visibility: visible; 
}

.bottom-sheet-content { 
    background: #fff; 
    width: 100%; 
    border-radius: 20px 20px 0 0; 
    padding: 25px 20px; 
    /* Supporto iPhone safe area per il menu */
    padding-bottom: calc(25px + env(safe-area-inset-bottom)); 
    transform: translateY(100%); 
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1); 
    max-height: 85vh; 
    overflow-y: auto; 
}
.bottom-sheet-overlay.active .bottom-sheet-content { 
    transform: translateY(0); 
}

.sheet-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    border-bottom: 1px solid #eee; 
    padding-bottom: 15px; 
    margin-bottom: 15px; 
}

/* FONT ELEGANTE: Intestazione del menu a tendina */
.sheet-header h2 { 
    font-size: 1.3rem; 
    color: #1a1a1a; 
    font-family: "Avenir Next", Avenir, "Century Gothic", "Segoe UI", sans-serif;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.close-btn { 
    background: none; 
    border: none; 
    font-size: 2rem; 
    color: #999; 
    cursor: pointer; 
    line-height: 1; 
    padding: 0 10px;
}

.sheet-links { 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
}

/* FONT ELEGANTE: Link del menu a tendina */
.sheet-links a { 
    display: block; 
    font-size: 1.15rem; 
    color: #333; 
    padding: 14px 15px; 
    border-radius: 8px; 
    background: #f8f9fa; 
    border: 1px solid #eee;
    transition: all 0.2s; 
    font-family: "Avenir Next", Avenir, "Century Gothic", "Segoe UI", sans-serif;
    font-weight: 400; 
    letter-spacing: 0.3px;
}
.sheet-links a:active,
.sheet-links a:hover { 
    background: #eef8f0; 
    border-color: #28a745;
    color: #28a745; 
}

/* =========================================
   SEZIONI TESTUALI SEO
   ========================================= */
.seo-text-section {
    background: #ffffff;
    padding: 30px 20px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    margin-bottom: 25px;
}

.seo-text-section h2 {
    font-size: 1.5rem;
    color: #1a1a1a;
    line-height: 1.3;
    margin-bottom: 15px;
    /* Un bel bordo verde a sinistra per dare stile all'H2 */
    border-left: 4px solid #28a745;
    padding-left: 10px;
}

.seo-text-section p {
    font-size: 1.05rem;
    color: #444;
    line-height: 1.7;
    margin-bottom: 15px;
}

.seo-text-section .highlight-text {
    font-size: 1.15rem;
    color: #28a745;
    background: #eef8f0;
    padding: 10px 15px;
    border-radius: 6px;
    display: inline-block;
}

.seo-text-section h3 {
    font-size: 1.15rem;
    color: #1a1a1a;
    margin-top: 22px;
    margin-bottom: 8px;
    font-weight: 700;
}

/* =========================================
   FOOTER AZIENDALE
   ========================================= */
.main-footer {
    background-color: #1a1a1a;
    color: #ffffff;
    padding: 40px 20px;
    /* Extra padding in basso per non far coprire i testi dal menu fisso (bottom-nav) */
    padding-bottom: 110px; 
    text-align: center;
    margin-top: 20px;
}

.footer-brand {
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: #28a745;
    margin-bottom: 10px;
}

.footer-desc {
    font-size: 0.9rem;
    color: #cccccc;
    margin-bottom: 25px;
    line-height: 1.5;
}

.footer-info {
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 25px;
    text-align: left;
    display: inline-block;
    max-width: 400px;
    width: 100%;
}

.footer-info p {
    font-size: 0.9rem;
    color: #eeeeee;
    margin-bottom: 10px;
}

.footer-info p:last-child {
    margin-bottom: 0;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
    font-size: 0.8rem;
    color: #888888;
}

.legal-links {
    margin-top: 10px;
}

.legal-links a {
    color: #bbbbbb;
    transition: color 0.2s;
}

.legal-links a:hover {
    color: #28a745;
}