/* ======== 1. DESIGN TOKEN (:root) - V3 (Premium) ======== */

:root {

    /* Colori: Moderni e Professionali */

    --color-brand-primary: #0033A0; /* Blu profondo (es. Accenture) */

    --color-brand-secondary: #00BFFF; /* Ciano brillante (Tech) */

    --color-brand-accent: #FFD700; /* Oro/Giallo per CTA "Premium" */

    /* Colori: Testo */

    --color-text-heading: #121212; /* Quasi nero */

    --color-text-body: #333333; /* Grigio scuro leggibile */

    --color-text-inverse: #FFFFFF;

    --color-text-subtle: #555555;

    /* Colori: Sfondo */

    --color-bg-primary: #FFFFFF;

    --color-bg-secondary: #f4f7fa; /* Grigio chiarissimo (più pulito) */

    --color-bg-dark: #0a1931; /* Blu notte per sezioni d'impatto */

    --color-border: #e0e0e0;

    /* Tipografia */

    --font-family-heading: 'Montserrat', sans-serif;

    --font-family-body: 'Lora', serif;

    /* Spaziatura */

    --spacing-xs: 0.5rem;

    --spacing-sm: 1rem;

    --spacing-md: 1.5rem;

    --spacing-lg: 3rem;

    --spacing-xl: 5rem;

    /* Varie */

    --border-radius-main: 8px;

    --transition-main: all 0.3s ease-in-out;

    --box-shadow-light: 0 4px 12px rgba(0, 0, 0, 0.05);

    --box-shadow-medium: 0 8px 30px rgba(0, 0, 0, 0.1);

}



/* ======== 2. RESET GLOBALE E STILI BASE ======== */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

    font-size: 16px;

}



body {

    font-family: var(--font-family-body);

    color: var(--color-text-body);

    background-color: var(--color-bg-primary);

    line-height: 1.7;

    overflow-x: hidden;

}



.container {

    width: 90%;

    max-width: 1200px;

    margin: 0 auto;

}



img {

    max-width: 100%;

    height: auto;

    display: block;

}



/* ======== 3. TIPOGRAFIA E UTILITY ======== */

h1, h2, h3, h4, h5 {

    font-family: var(--font-family-heading);

    color: var(--color-text-heading);

    font-weight: 700;

    line-height: 1.2;

    margin-bottom: var(--spacing-md);

}



h1 { font-size: 3.5rem; letter-spacing: -1px; }

h2 { font-size: 2.75rem; letter-spacing: -0.5px; }

h3 { font-size: 1.5rem; } /* Rimpicciolito per un look più pulito */



p {

    margin-bottom: var(--spacing-md);

}



.lead {

    font-size: 1.25rem;

    color: var(--color-text-subtle);

    font-weight: 400;

}



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

.section-padding { padding: var(--spacing-xl) 0; }

.section-heading {

    text-align: center;

    margin-bottom: var(--spacing-lg);

    max-width: 800px;

    margin-left: auto;

    margin-right: auto;

}

.section-heading h2 {

    color: var(--color-brand-primary);

}

.section-heading p {

    font-size: 1.15rem;

    color: var(--color-text-subtle);

}



/* ======== 4. HEADER / NAVIGAZIONE ======== */

.main-header {

    background-color: var(--color-bg-primary);

    border-bottom: 1px solid var(--color-border);

    padding: var(--spacing-sm) 0;

    position: sticky;

    top: 0;

    z-index: 1000;

    box-shadow: var(--box-shadow-light);

}



.main-header .container {

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.logo {

    font-family: var(--font-family-heading);

    font-size: 1.75rem;

    font-weight: 700;

}

.logo a {

    text-decoration: none;

    color: var(--color-text-heading);

}

.logo-accent {

    color: var(--color-brand-primary);

}

.main-header nav ul {

    list-style: none;

    display: flex;

    gap: var(--spacing-md);

    margin: 0;

    align-items: center;

}

.main-header nav a {

    font-family: var(--font-family-heading);

    color: var(--color-text-subtle);

    font-size: 0.9rem;

    font-weight: 700;

    text-decoration: none;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    transition: var(--transition-main);

    position: relative;

    padding-bottom: var(--spacing-xs);

}

.main-header nav a::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    width: 0;

    height: 3px;

    background-color: var(--color-brand-secondary);

    transition: var(--transition-main);

}

.main-header nav a:hover,

.main-header nav a.active {

    color: var(--color-text-heading);

}

.main-header nav a:hover::after,

.main-header nav a.active::after {

    width: 100%;

}



/* * FIX 1: Il blocco per .nav-contact-link è stato rimosso. 

 * Ora 'Contatti' userà gli stili di '.main-header nav a'

 */





/* ======== 5. BOTTONI (Premium) ======== */

.btn {

    display: inline-block;

    font-family: var(--font-family-heading);

    font-weight: 700;

    font-size: 1rem;

    padding: var(--spacing-md) var(--spacing-lg);

    border-radius: var(--border-radius-main);

    border: 2px solid transparent;

    cursor: pointer;

    text-align: center;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    transition: var(--transition-main);

    text-decoration: none;

}

.btn-primary {

    background-color: var(--color-brand-primary);

    color: var(--color-text-inverse);

    border-color: var(--color-brand-primary);

}

.btn-primary:hover {

    background-color: #00227a;

    border-color: #00227a;

    transform: translateY(-3px);

    box-shadow: var(--box-shadow-medium);

}

.btn-secondary {

    background-color: transparent;

    color: var(--color-brand-primary);

    border-color: var(--color-brand-primary);

}

.btn-secondary:hover {

    background-color: var(--color-brand-primary);

    color: var(--color-text-inverse);

    transform: translateY(-3px);

}



/* ======== 6. SEZIONE HERO (Con immagine di sfondo) ======== */

.hero-section {

    position: relative;

    padding: var(--spacing-xl) 0;

    min-height: 70vh;

    display: flex;

    align-items: center;

    color: var(--color-text-inverse);

    background-size: cover;

    background-position: center;

    background-attachment: fixed; /* Effetto parallasse */

}

/* Overlay scuro per leggibilità */

.hero-section::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg, rgba(0, 33, 90, 0.85) 0%, rgba(0, 10, 40, 0.7) 100%);

    z-index: 1;

}

.hero-section .container {

    position: relative;

    z-index: 2;

}

.hero-content {

    max-width: 1000px;

}

.hero-content h1 {

    color: var(--color-text-inverse);

    font-size: 4rem;

}

.hero-content .lead {

    color: rgba(255, 255, 255, 0.9);

    font-size: 1.4rem;

    margin-bottom: var(--spacing-lg);

}

.hero-buttons {

    margin-top: var(--spacing-md);

    display: flex;

    gap: var(--spacing-md);

}

/* Sovrascriviamo i bottoni per il contesto scuro */

.hero-section .btn-primary {

    background-color: var(--color-brand-accent);

    color: var(--color-text-heading);

    border-color: var(--color-brand-accent);

}

.hero-section .btn-primary:hover {

    background-color: #ffd000;

    border-color: #ffd000;

}

.hero-section .btn-secondary {

    color: var(--color-text-inverse);

    border-color: var(--color-text-inverse);

}

.hero-section .btn-secondary:hover {

    background-color: var(--color-text-inverse);

    color: var(--color-text-heading);

}



/* ======== 7. CARD (Features / Servizi) ======== */

.grid-container-3col {

    display: grid;

    grid-template-columns: 1fr;

    gap: var(--spacing-md);

}

.acc-card {

    background-color: var(--color-bg-primary);

    border-radius: var(--border-radius-main);

    box-shadow: var(--box-shadow-light);

    overflow: hidden;

    height: 100%;

    display: flex;

    flex-direction: column;

    transition: var(--transition-main);

}

.acc-card:hover {

    transform: translateY(-10px);

    box-shadow: var(--box-shadow-medium);

}



/* * FIX 2 (Desktop): Modifica per le immagini dei collaboratori 

 * Rimuove l'altezza fissa e il taglio (cover)

 */

.acc-card-image {

    width: 100%;

    height: auto; /* 400px !important; */ /* (auto) Forza un'altezza fissa per evitare il collasso */

    object-fit: initial;

}



.acc-card-body {

    padding: var(--spacing-lg);

    display: flex;

    flex-direction: column;

    flex-grow: 1;

}

.acc-card-title {

    color: var(--color-brand-primary);

    margin-bottom: var(--spacing-sm);

}

.acc-card-description {

    color: var(--color-text-subtle);

    font-family: var(--font-family-body);

    flex-grow: 1;

    margin-bottom: var(--spacing-md);

}

.acc-card-link {

    font-family: var(--font-family-heading);

    font-weight: 700;

    color: var(--color-brand-primary);

    text-decoration: none;

    text-transform: uppercase;

    font-size: 0.9rem;

}

.acc-card-link::after {

    content: ' \2192'; /* Freccia destra */

    transition: var(--transition-main);

}

.acc-card-link:hover::after {

    padding-left: 5px;

}



/* ======== 8. SEZIONE VALUE-PROP / ABOUT (Con immagine) ======== */

.grid-container-2col {

    display: grid;

    grid-template-columns: 1fr;

    gap: var(--spacing-lg);

}

.value-prop-image {

    border-radius: var(--border-radius-main);

    object-fit: cover;

    height: auto; /*100%;*/

    min-height: 400px;

    box-shadow: var(--box-shadow-medium);

}

.value-prop-list ul {

    list-style: none;

    margin: 0;

    padding: 0;

}

.value-prop-list li {

    font-family: var(--font-family-body);

    font-size: 1.1rem;

    color: var(--color-text-body);

    position: relative;

    padding-left: var(--spacing-lg);

    margin-bottom: var(--spacing-md);

}

.value-prop-list li::before {

    content: '\2713'; /* Checkmark */

    color: var(--color-brand-primary);

    position: absolute;

    left: 0;

    top: 2px;

    font-weight: 700;

    font-size: 1.2rem;

}

.value-prop-list li strong {

    color: var(--color-text-heading);

    font-family: var(--font-family-heading);

}



/* ======== 9. SEZIONE CTA (Sfondo scuro) ======== */

.cta-section {

    background-color: var(--color-bg-dark);

    color: var(--color-text-inverse);

    padding: var(--spacing-xl) 0;

    text-align: center;

}

.cta-section h2 {

    color: var(--color-text-inverse);

}

.cta-section p {

    color: rgba(255, 255, 255, 0.8);

    max-width: 600px;

    margin: 0 auto var(--spacing-lg) auto;

    font-size: 1.15rem;

}

.cta-section .btn-primary { /* Bottone speciale "premium" */

    background-color: var(--color-brand-accent);

    color: var(--color-text-heading);

    border-color: var(--color-brand-accent);

}

.cta-section .btn-primary:hover {

    background-color: #ffd000;

    border-color: #ffd000;

}



/* ======== 10. PAGINA CONTATTI ======== */

.contact-form {

    max-width: 700px;

    margin: 0 auto;

    background: var(--color-bg-secondary);

    padding: var(--spacing-lg);

    border-radius: var(--border-radius-main);

}

.form-group {

    margin-bottom: var(--spacing-md);

}

.form-group label {

    display: block;

    font-family: var(--font-family-heading);

    font-weight: 700;

    margin-bottom: var(--spacing-xs);

}

.form-control {

    width: 100%;

    padding: var(--spacing-sm);

    font-family: var(--font-family-body);

    font-size: 1rem;

    border: 1px solid var(--color-border);

    border-radius: var(--border-radius-main);

    transition: var(--transition-main);

}

.form-control:focus {

    outline: none;

    border-color: var(--color-brand-primary);

    box-shadow: 0 0 0 3px rgba(0, 191, 255, 0.3);

}

textarea.form-control {

    min-height: 150px;

    resize: vertical;

}



/* ======== 11. FOOTER ======== */

.main-footer {

    background-color: var(--color-bg-dark);

    color: rgba(255, 255, 255, 0.7);

    padding: var(--spacing-lg) 0;

    margin-top: var(--spacing-xl);

    text-align: center;

    font-family: var(--font-family-body);

    font-size: 0.9rem;

}

.main-footer p {

    margin: 0 0 var(--spacing-xs) 0;

}

.footer-links {

    list-style: none;

    padding: 0;

    margin: 0 0 var(--spacing-sm) 0;

    display: flex;

    justify-content: center;

    gap: var(--spacing-md);

}

.footer-links a {

    color: var(--color-text-inverse);

    text-decoration: none;

    font-weight: 700;

}

.footer-links a:hover {

    color: var(--color-brand-secondary);

}



/* ======== 12. RESPONSIVE ======== */

@media (min-width: 768px) {

    /* Layout per Desktop (tablet e oltre) */

    .grid-container-3col {

        grid-template-columns: repeat(3, 1fr);

    }

    .grid-container-2col {

        grid-template-columns: repeat(2, 1fr);

        align-items: center;

    }

}



@media (max-width: 767px) {

    /* Layout per Mobile (smartphone) */

    h1 { font-size: 2.5rem; }

    h2 { font-size: 2rem; }

    

    /* FIX: BILANCIAMENTO TITOLO MOBILE (ANTI-"e" SOLITARIA) */

    .hero-content h1 { 

        font-size: 2.3rem; /* <-- Ridotto ulteriormente */

        line-height: 1.25; 

        overflow-wrap: break-word; 

        text-wrap: balance; 

    }



    .hero-buttons { 

        flex-direction: column; 

        align-items: stretch; 

    }

    .btn { 

        width: 100%; 

    }

    

    /* (Menu Orizziontale a 2 linee) */

    .main-header .container {

        flex-direction: column;

        gap: var(--spacing-sm);

    }

    .main-header nav {

        width: 100%; 

    }

    .main-header nav ul {

        flex-wrap: wrap; 

        justify-content: center; 

        gap: var(--spacing-sm);

    }

    

    .value-prop-image {

        /* Su mobile, metto l'immagine prima del testo */

        order: -1;

    }



    /* * FIX 3 (Mobile): Risolve la scomparsa delle immagini su mobile

     * Dà un'altezza fissa al contenitore e adatta l'immagine al suo interno

     */

    .acc-card-image {

        height: 220px !important; /* Forza un'altezza fissa per evitare il collasso */

        object-fit: contain;     /* Mostra l'intera immagine, senza tagliarla */

        background-color: var(--color-bg-secondary); /* Sfondo grigio se l'immagine non carica */

    }

}