/*
Theme Name: EC-Solutions Blueprint Pro
Author: Tuo Nome
Description: Tema premium Apple-style per sistemi a spirale.
Version: 2.5
*/

:root {
    /* Palette Apple-Industrial */
    --primary-blue: #0071e3;    /* Blu iconico Apple */
    --deep-blue: #00448a;
    --dark-grey: #1d1d1f;      /* Grigio scuro Apple */
    --light-grey: #f5f5f7;     /* Sfondo Apple */
    --white: #ffffff;
    --glass: rgba(255, 255, 255, 0.7);
    
    /* Layout & Design System */
    --radius: 28px;            /* Bordi super arrotondati */
    --transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

/* 1. Reset & Global Styles */
* {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden; /* Evita lo scroll laterale */
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
    background-color: var(--light-grey);
    color: var(--dark-grey);
    line-height: 1.5;
}

/* CONTAINER COMPLETAMENTE FULL-PAGE (Sbloccato dai 1200px) */
.container {
    width: 100%;
    max-width: 100% !important; /* Forza l'estensione a tutto schermo */
    padding-left: 4% !important;  /* Margine laterale fluido ed elegante */
    padding-right: 4% !important;
    margin: 0 auto;
}

/* 2. Header Moderno (Glassmorphism Full-Width) */
.site-header {
    background: var(--glass);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    padding: 20px 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    transition: all 0.4s ease-in-out;
}

.header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.brand-main {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--dark-grey);
    text-decoration: none;
}

.brand-sub {
    font-size: 0.65rem;
    letter-spacing: 2px;
    color: var(--primary-blue);
    text-transform: uppercase;
    display: block;
    margin-top: -4px;
}


/* --- GESTIONE LOGO IMAGE --- */

.logo-img {
    height: 45px; /* Altezza ottimale per il tuo header */
    width: auto;
    display: block;
    transition: var(--transition);
}

/* Di base (header trasparente) mostriamo il logo Light e nascondiamo il Dark */
.site-header .logo-dark {
    display: none;
}

.site-header .logo-light {
    display: block;
}

/* Quando l'header è SCROLLED (bianco), invertiamo la visibilità */
.site-header.header-scrolled .logo-light {
    display: none;
}

.site-header.header-scrolled .logo-dark {
    display: block;
}

/* Fix per Mobile: se il menu è attivo, l'header di solito è scuro o il logo deve vedersi bene */
@media (max-width: 768px) {
    .logo-img {
        height: 35px; /* Leggermente più piccolo su mobile */
    }
}

.main-navigation ul {
    list-style: none;
    display: flex;
    gap: 30px;
    margin: 0;
    padding: 0;
}

.main-navigation a {
    text-decoration: none;
    color: var(--dark-grey);
    font-size: 0.9rem;
    font-weight: 500;
    transition: var(--transition);
    opacity: 0.8;
}

.main-navigation a:hover {
    opacity: 1;
    color: var(--primary-blue);
}

.nav-cta {
    background: var(--dark-grey);
    color: white !important;
    padding: 8px 18px;
    border-radius: 20px;
    opacity: 1 !important;
}

/* 3. Hero Section (Full Height & Full Width) */
.hero-swiper-container {
    height: 100vh;
    width: 100vw;
}

.heroSwiper {
    width: 100%;
    height: 100%;
}

.hero-slide {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hero-bg-img {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
    transition: transform 8s ease-out;
}

/* Effetto Zoom cinematico dello slider */
.swiper-slide-active .hero-bg-img {
    transform: scale(1.08);
}

.hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 100%);
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
}

.slide-badge {
    display: inline-block;
    padding: 6px 16px;
    background: var(--primary-blue);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 25px;
    color: var(--white);
}

/* Tipografia Hero Fluida ed Enorme */
.hero-content h1 {
    font-size: clamp(2.8rem, 7vw, 6rem) !important;
    font-weight: 700;
    margin: 0;
    letter-spacing: -3px;
    line-height: 1.05;
    color: var(--white);
}

.hero-tagline {
    font-size: clamp(1.1rem, 2.2vw, 1.8rem) !important;
    font-weight: 400;
    margin: 20px auto 40px;
    max-width: 900px;
    color: var(--white);
    opacity: 0.9;
}

/* Personalizzazione Controlli Swiper */
.swiper-pagination-bullet {
    background: white !important;
    opacity: 0.5;
}
.swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--primary-blue) !important;
    width: 25px;
    border-radius: 5px;
}
.swiper-button-next, .swiper-button-prev {
    color: white !important;
    transform: scale(0.6);
    opacity: 0.3;
    transition: 0.3s;
}
.swiper-button-next:hover, .swiper-button-prev:hover {
    opacity: 1;
}

/* 4. Bento Grid (Totalmente Full-Width & Immersiva) */
.bento-grid-section {
    padding: 5vw 0; /* Margini fluidi verticali */
}

.apple-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 75vh 45vh; /* Altezze basate sullo schermo per massima immersione */
    gap: 30px; /* Spazio elegante tra i blocchi */
}

.apple-card {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    padding: 60px;
    color: white;
    text-decoration: none;
    transition: var(--transition);
    border: 1px solid rgba(0,0,0,0.03);
}

.apple-card:hover {
    transform: translateY(-8px) scale(1.005);
    box-shadow: 0 40px 80px rgba(0,0,0,0.12);
}

.apple-card.tall {
    grid-row: span 2;
}

.apple-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.1) 70%);
    z-index: 1;
}

.card-content {
    position: relative;
    z-index: 2;
}

.card-category {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--primary-blue);
    margin-bottom: 12px;
    display: block;
}

.apple-card h2 {
    font-size: clamp(2rem, 3.5vw, 3rem);
    margin: 10px 0;
    font-weight: 600;
    line-height: 1.1;
}

.apple-card p {
    font-size: clamp(1rem, 1.3vw, 1.25rem);
    opacity: 0.85;
}

/* 5. Info Card (Immagine di sfondo con Overlay Professionale) */
.info-glass {
    padding: 5vw 0; /* Aumentato leggermente per dare più respiro */
}

.glass-card {
    position: relative;
    /* Richiamo l'immagine dalla tua cartella img */
    background-image: url('img/EC_SOLUTIONS_BACKGROUND.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    border-radius: var(--radius);
    padding: 120px 60px;
    text-align: center;
    overflow: hidden; /* Importante per contenere l'overlay */
    box-shadow: 0 40px 100px rgba(0,0,0,0.3);
    z-index: 1;
}

/* Overlay scuro per contrasto testi */
.glass-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* Gradiente dal blu al nero per un look tech */
    background: linear-gradient(135deg, rgba(0, 113, 227, 0.7) 0%, rgba(29, 29, 31, 0.85) 100%);
    z-index: -1;
}

.glass-card h2 {
    font-size: clamp(2.2rem, 4.5vw, 4rem);
    letter-spacing: -2px;
    line-height: 1.1;
    margin-bottom: 20px;
    color: var(--white);
    position: relative;
}

.glass-card p {
    font-size: clamp(1.1rem, 1.8vw, 1.5rem);
    max-width: 800px;
    margin: 0 auto 40px;
    color: rgba(255, 255, 255, 0.9);
    position: relative;
}

/* 6. Pulsante (Adattato per risaltare sull'immagine) */
.glass-card .btn-apple {
    background: var(--white) !important; /* Passiamo al bianco per staccare dal fondo scuro */
    color: var(--dark-grey) !important;
    padding: 18px 38px;
    border-radius: 40px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    display: inline-block;
    transition: var(--transition);
    border: none;
    position: relative;
}

.glass-card .btn-apple:hover {
    background: var(--primary-blue) !important;
    color: var(--white) !important;
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 15px 30px rgba(0,113,227,0.4);
}


/* ==========================================================================
   PULSANTI APPLE-STYLE (Universali)
   ========================================================================== */

/* 1. Stile Base (Quello che vedi nella Hero) */
.btn-apple {
    display: inline-block !important;
    padding: 14px 32px !important;
    background-color: var(--white) !important; /* Bianco di base */
    color: var(--dark-grey) !important;         /* Testo scuro */
    border-radius: 40px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 1.05rem !important;
    transition: var(--transition) !important;
    border: 2px solid var(--white) !important;
    margin-top: 25px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    cursor: pointer;
}

.btn-apple:hover {
    transform: scale(1.05) translateY(-3px);
    background-color: var(--primary-blue) !important;
    border-color: var(--primary-blue) !important;
    color: var(--white) !important;
    box-shadow: 0 15px 30px rgba(0, 113, 227, 0.4);
}

/* 2. Variante specifica per la Card Blu (Pulsante Nero) */
.glass-card .btn-apple {
    background-color: var(--dark-grey) !important;
    border-color: var(--dark-grey) !important;
    color: var(--white) !important;
}

.glass-card .btn-apple:hover {
    background-color: var(--white) !important;
    border-color: var(--white) !important;
    color: var(--dark-grey) !important;
}



/* 7. Footer */
.site-footer {
    background: var(--white);
    padding: 100px 0 40px;
    border-top: 1px solid rgba(0,0,0,0.05);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 50px;
    margin-bottom: 80px;
}

.footer-info h4 {
    font-size: 1.3rem;
    margin-bottom: 25px;
}

.footer-bottom {
    border-top: 1px solid rgba(0,0,0,0.05);
    padding-top: 40px;
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: #86868b;
}

.blueprint-tag {
    font-family: monospace;
    color: var(--primary-blue);
    font-weight: bold;
}

/* Animazione di entrata */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

.reveal-text {
    animation: fadeInUp 1.2s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

/* Stato iniziale dell'Header (On Top - Trasparente) */
.site-header {
    background: transparent !important;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    border-bottom: 1px solid rgba(255, 255, 255, 0);
}

/* Stato durante lo Scroll */
.site-header.header-scrolled {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding: 12px 0;
}

.site-header.header-scrolled .brand-main,
.site-header.header-scrolled .main-navigation a {
    color: var(--dark-grey);
}

.site-header .brand-main,
.site-header .main-navigation a {
    color: #ffffff;
    transition: color 0.3s ease;
}



/* Classe per il titolo H2 */
.name-title {
    font-size: clamp(2.5rem, 5vw, 4rem); /* Grandezza fluida stile Apple */
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #1d1d1f; /* Nero Apple */
    margin-bottom: 20px;
}

/* Classe specifica per evidenziare E e C */
.brand-highlight {
    color: var(--primary-blue, #0071e3); /* Usa la tua variabile blu o il blu Apple */
}

/* --- RESPONSIVE ENGINE (Totalmente Fluido) --- */

/* Hamburger Menu per Mobile */
.mobile-menu-toggle {
    display: none;
    cursor: pointer;
    z-index: 2000;
}

.mobile-menu-toggle span {
    display: block;
    width: 25px;
    height: 2px;
    margin: 6px 0;
    background: #ffffff;
    transition: var(--transition);
}

.header-scrolled .mobile-menu-toggle span {
    background: var(--dark-grey);
}

@media (max-width: 1024px) {
    .apple-grid {
        grid-template-columns: 1fr; /* Passa a colonna singola su Tablet/Mobile */
        grid-template-rows: auto;
        gap: 20px;
    }
    
    .apple-card.tall {
        grid-row: span 1;
        height: 55vh;
    }
    
    .apple-card {
        height: 45vh;
        padding: 40px;
    }
}

@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: block; /* Mostra l'hamburger */
    }

    .main-navigation {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        height: 100vh;
        background: var(--white);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: var(--transition);
        box-shadow: -10px 0 30px rgba(0,0,0,0.1);
    }

    .main-navigation.active {
        right: 0;
    }

    .main-navigation ul {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    .main-navigation a {
        color: var(--dark-grey) !important;
        font-size: 1.6rem;
    }
    
    
    @media (max-width: 768px) {
    /* ... altre tue regole (position, width, ecc.) ... */

    .main-navigation a {
        color: var(--dark-grey) !important;
        font-size: 1.6rem;
    }

    /* 👇 INSERISCI QUESTO BLOCCO QUI 👇 */
    .main-navigation a.nav-cta {
        background-color: var(--dark-grey) !important; /* Sfondo scuro per il bottone */
        color: var(--white) !important;                /* Testo bianco per contrasto */
        padding: 12px 28px !important;                 /* Spazio interno per dargli forma */
        border-radius: 30px !important;                /* Angoli arrotondati stile Apple */
        display: inline-block !important;
        text-align: center;
        margin-top: 10px;                              /* Distacca leggermente il tasto dagli altri link */
        box-shadow: 0 4px 15px rgba(0,0,0,0.15);       /* Leggera ombra per farlo risaltare */
    }

    .main-navigation a.nav-cta:hover {
        opacity: 0.9;
    }
}

@media (max-width: 768px) {
    
    /* 1. Forza il layout a passare da riga a colonna */
    .bento-card.wide-card .card-inner.flex-row {
        flex-direction: column !important;
        height: auto !important; /* Evita che la card abbia un'altezza fissa bloccata */
        gap: 24px; /* Crea uno spazio pulito tra il testo e l'immagine */
    }

    /* 2. Ridistribuisce lo spazio al testo */
    .bento-card.wide-card .text-side {
        width: 100% !important;
        padding: 0; /* Resetta eventuali padding interni aggressivi */
    }

    /* 3. Gestisce l'immagine in modo che non si schiacci o esca dai bordi */
    .bento-card.wide-card .image-side {
        width: 100% !important;
        height: 250px; /* Imposta un'altezza fissa ottimale per il mobile */
        border-radius: 12px; /* Opzionale: arrotonda i bordi dell'immagine se serve */
        overflow: hidden;
    }

    /* 4. Fa in modo che l'immagine si comporti da sfondo (ritaglio intelligente) */
    .bento-card.wide-card .image-side img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; /* Taglia l'immagine senza distorcerla */
        object-position: center;
    }
}

    .glass-card {
        padding: 60px 20px;
    }
}


/* 5. Identity Section (Vision, Mission, Team) */
.identity-section {
    padding: 5vw 0;
    background-color: var(--white);
}

.identity-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Tre colonne su Desktop */
    gap: 30px;
}

.identity-card {
    position: relative;
    height: 60vh; /* Altezza immersiva */
    border-radius: var(--radius);
    overflow: hidden;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    padding: 40px;
    color: white;
    transition: var(--transition);
}

.identity-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 60%);
    z-index: 1;
}

.identity-card:hover {
    transform: translateY(-10px);
}

.identity-card h2 {
    font-size: 2.2rem;
    font-weight: 600;
    margin: 10px 0;
}

/* Responsive Identity Grid */
@media (max-width: 1024px) {
    .identity-grid {
        grid-template-columns: 1fr; /* Una colonna su Mobile/Tablet */
    }
    .identity-card {
        height: 50vh;
    }
}




/* --- SEZIONE PROCESSO (Engineering Focus) --- */
.process-section {
    padding: 8vw 0;
    background-color: var(--light-grey);
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-header h2 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    letter-spacing: -2px;
    margin-top: 10px;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.process-card {
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}

.process-img-wrapper {
    width: 100%;
    height: 350px; /* Altezza fissa per uniformità */
    overflow: hidden;
    background: #ebebeb; /* Placeholder se l'immagine carica lenta */
}

.process-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Riempie il blocco senza deformarsi */
    transition: transform 0.8s ease;
}

.process-card:hover .process-img-wrapper img {
    transform: scale(1.1); /* Leggero zoom in hover molto Apple */
}

.process-info {
    padding: 40px;
}

.process-info h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--dark-grey);
}

.process-info p {
    font-size: 1rem;
    color: #86868b;
    line-height: 1.6;
}

.process-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px rgba(0,0,0,0.08);
}

/* Responsive per Tablet e Mobile */
@media (max-width: 1024px) {
    .process-grid {
        grid-template-columns: 1fr; /* Una colonna */
        gap: 30px;
    }
    
    .process-img-wrapper {
        height: 450px;
    }
}


.anatomy-section {
    padding: 100px 0;
    background: #1b3d8b; /* Nero profondo per far risaltare l'acciaio */
    color: rgb(255, 255, 255);
    text-align: center;
    overflow: hidden;
}

.anatomy-header h2 {
    font-size: 3.5rem;
    letter-spacing: -2px;
    margin-bottom: 20px;
}

.anatomy-wrapper {
    position: relative;
    max-width: 900px;
    margin: 60px auto;
}

.anatomy-main-img {
    width: 100%;
    height: auto;
    border-radius: 30px;
    filter: brightness(0.8);
}

/* HOTSPOT DOTS */
.hotspot {
    position: absolute;
    cursor: pointer;
    z-index: 10;
}

.pulse {
    width: 20px;
    height: 20px;
    background: var(--primary-blue);
    border-radius: 50%;
    box-shadow: 0 0 0 rgba(0, 113, 227, 0.7);
    animation: pulse-blue 2s infinite;
}

@keyframes pulse-blue {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 113, 227, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 15px rgba(0, 113, 227, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 113, 227, 0); }
}

/* TOOLTIP CONTENT */
.hotspot-content {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    width: 250px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(15px);
    padding: 20px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    text-align: left;
}

.hotspot:hover .hotspot-content {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.hotspot-content h4 {
    margin: 0 0 10px 0;
    font-size: 1.1rem;
    color: var(--primary-blue);
}

.hotspot-content p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.4;
    color: rgba(255,255,255,0.8);
}




/* --- PAGINA AZIENDA PREMIUM --- */

.azienda-hero-modern {
    position: relative;
    height: 85vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: white;
}

.azienda-hero-modern .hero-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
    transform: scale(1.05);
}

.azienda-hero-modern .hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
}

.azienda-hero-modern h1 {
    font-size: clamp(3rem, 7vw, 5.5rem);
    line-height: 1.05;
    letter-spacing: -3px;
    margin: 20px 0;
}

/* BENTO GRID AZIENDA */
.bento-grid-azienda {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    gap: 25px;
    padding: 100px 0;
}

.bento-card {
    background: #fff;
    border-radius: 30px;
    padding: 40px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    transition: all 0.5s ease;
    border: 1px solid rgba(0,0,0,0.05);
}

.bento-card h2, .bento-card h3 {
    letter-spacing: -1px;
    margin-bottom: 15px;
}

.main-story {
    grid-column: span 2;
    background: #f5f5f7;
    min-height: 450px;
}

.innovation-card {
    background-size: cover;
    background-position: center;
    color: white;
    min-height: 450px;
}

.card-overlay {
    position: absolute;
    top:0; left:0; width:100%; height:100%;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
}

.dark-card {
    background: #1d1d1f;
    color: white;
}

.wide-card {
    grid-column: span 2;
}

.flex-row {
    display: flex;
    align-items: center;
    gap: 40px;
}

.image-side img {
    width: 250px;
    border-radius: 20px;
}

/* QUOTE SEZIONI */
.philosophy-quote {
    padding: 120px 0;
    text-align: center;
    background: white;
}

.quote-wrapper blockquote {
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -1.5px;
    margin-bottom: 30px;
}

.quote-wrapper cite {
    color: var(--primary-blue);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 2px;
}

/* Responsive Mobile */
@media (max-width: 992px) {
    .bento-grid-azienda {
        grid-template-columns: 1fr;
    }
    .main-story, .wide-card {
        grid-column: span 1;
    }
}



/* --- LAYOUT BLUEPRINT HORIZONTAL + MAP --- */

.blueprint-theme {
    background: #000b14 !important; /* Nero/Blu scurissimo */
    color: #fff;
}

/* Griglia 3 colonne */
.blueprint-horizontal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.blueprint-item {
    background: #001a2c;
    border: 1px solid rgba(0, 212, 255, 0.2);
    padding: 30px;
    position: relative;
    overflow: hidden;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Effetto Carta Millimetrata */
.blueprint-grid-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: 
        linear-gradient(rgba(0, 212, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 212, 255, 0.03) 1px, transparent 1px);
    background-size: 15px 15px;
    pointer-events: none;
}

.blueprint-item .coord {
    font-family: 'Courier New', monospace;
    font-size: 10px;
    color: #00d4ff;
    letter-spacing: 2px;
    margin-bottom: 15px;
    display: block;
}

.blueprint-item strong {
    font-size: 1.1rem;
    letter-spacing: 1px;
    color: #fff;
    margin-bottom: 8px;
    display: block;
}

.blueprint-item p {
    color: rgba(255,255,255,0.6) !important;
    font-size: 0.95rem;
    line-height: 1.4;
}

/* Corner Marks */
.corner-mark {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 12px;
    height: 12px;
    border-top: 1px solid #00d4ff;
    border-right: 1px solid #00d4ff;
    opacity: 0.4;
}

/* --- AGGIORNAMENTO PADDING BLUEPRINT --- */

.blueprint-theme {
    background: #000b14 !important;
    /* Aggiungiamo padding generoso sopra e sotto */
    padding: 120px 0 !important; 
}

.blueprint-horizontal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px; /* Aumentato il gap tra i tre box */
    margin-bottom: 60px; /* Aumentato lo spazio tra i box e la mappa */
}

/* Assicuriamoci che il container non stringa troppo i lati su schermi grandi */
.blueprint-theme .container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 40px; /* Padding laterale per non toccare i bordi dello schermo */
}

.map-full-wrapper {
    /* Un piccolo tocco: ombra luminosa azzurra per far staccare la mappa dal fondo nero */
    box-shadow: 0 40px 100px rgba(0, 212, 255, 0.15) !important;
}

/* MAPPA GRANDE SOTTO */
.map-full-wrapper {
    position: relative;
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(0, 212, 255, 0.2);
    box-shadow: 0 30px 60px rgba(0,0,0,0.5);
}

.map-full-wrapper iframe {
    display: block;
    filter: grayscale(1) invert(0.9) contrast(1.2); /* Mappa stile "Blueprint" */
}

/* Overlay per dare un riflesso azzurrato alla mappa */
.map-overlay-blueprint {
    position: absolute;
    top:0; left:0; width:100%; height:100%;
    background: radial-gradient(circle at center, transparent, rgba(0, 26, 44, 0.4));
    pointer-events: none;
    z-index: 1;
}

/* Mobile: una colonna */
@media (max-width: 900px) {
    .blueprint-horizontal-grid {
        grid-template-columns: 1fr;
    }
}


/* --- FOUNDER SECTION STYLE --- */

.founder-section {
    background: #fff;
    padding: 120px 0;
}

.grid-2-founder {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr; /* Foto leggermente più stretta del testo */
    gap: 60px;
    align-items: center;
}

/* Card Immagine */
.founder-card-img {
    position: relative;
    border-radius: 30px;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    box-shadow: 0 30px 60px rgba(0,0,0,0.1);
}

.founder-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(0.2) contrast(1.1); /* Look professionale Apple */
    transition: transform 0.8s ease;
}

.founder-card-img:hover img {
    transform: scale(1.05);
}

.founder-overlay {
    position: absolute;
    bottom: 0; left: 0; width: 100%;
    padding: 40px;
    background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
}

.founder-role {
    color: #fff;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Card Testo */
.founder-card-text h2 {
    font-size: 4rem;
    letter-spacing: -3px;
    margin: 10px 0 30px;
    color: #1d1d1f;
}

.founder-bio {
    font-size: 1.6rem;
    line-height: 1.4;
    color: #424245;
    font-style: italic;
    margin-bottom: 40px;
    position: relative;
}

.founder-bio::before {
    content: '“';
    position: absolute;
    top: -20px; left: -30px;
    font-size: 5rem;
    color: var(--primary-blue);
    opacity: 0.2;
}

.founder-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    border-top: 1px solid #e5e5e5;
    padding-top: 40px;
}

.detail-item strong {
    display: block;
    color: var(--primary-blue);
    font-size: 0.8rem;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.detail-item p {
    font-size: 1rem;
    color: #86868b;
}

/* Responsive */
@media (max-width: 900px) {
    .grid-2-founder {
        grid-template-columns: 1fr;
    }
    .founder-card-text h2 { font-size: 3rem; }
}












/* ==========================================================================
   TEMPLATES PRODOTTI (NUOVI & USATI) - COMPLETO
   ========================================================================== */

/* 1. LAYOUT COMUNE HERO */
.prodotto-hero-visual {
    position: relative;
    height: 80vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #2923d5;
}

.hero-img-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
    transition: transform 1.2s ease;
}

.hero-content {
    position: relative;
    z-index: 10;
    width: 100%;
}

.hero-text-wrapper {
    max-width: 850px;
}

/* Stile Testi Hero */
.prodotto-hero-visual h1 {
    font-size: clamp(3rem, 7vw, 5.5rem);
    line-height: 1.05;
    letter-spacing: -3px;
    margin: 20px 0;
    font-weight: 700;
}

.prodotto-hero-visual p {
    font-size: 1.4rem;
    line-height: 1.5;
    max-width: 650px;
    opacity: 0.8;
}

/* 2. SPECIFICHE VERSIONE NUOVI (DEEP BLUE GRADIENT) */
.nuovi .prodotto-hero-visual {
    background-color: #000b14; /* Fondo scuro di sicurezza */
    color: var(--white);
    position: relative;
    overflow: hidden;
}

/* Overlay Verticale: protegge Header e valorizza il Titolo */
.nuovi .prodotto-hero-visual::before {
    content: '';
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    /* Gradiente: Scuro (Header) -> Blu Tech -> Bianco (Bottom) */
    background: linear-gradient(
        to bottom, 
        rgba(0, 11, 20, 0.85) 0%, 
        rgba(0, 113, 227, 0.5) 50%, 
        rgba(255, 255, 255, 1) 100%
    );
    z-index: 2;
}

/* Titoli e Testi per contrasto su Blu */
.nuovi .prodotto-hero-visual h1 {
    color: var(--white);
    text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.nuovi .prodotto-hero-visual h1 span {
    color: #00d4ff; /* Un azzurro più brillante per risaltare sul blu */
}

.nuovi .hero-text-wrapper p {
    color: rgba(255, 255, 255, 0.9);
}

/* Badge Apple-style su fondo scuro */
.nuovi .label {
    background: rgba(255, 255, 255, 0.15);
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Rimuoviamo o nascondiamo il vecchio gradiente bottom se non più necessario */
.hero-bottom-gradient-light {
    display: none; 
}


/* ==========================================================================
   VERSIONE USATI / SECOND LIFE (DARK)
   ========================================================================== */

/* 1. HERO VISUAL - OVERLAY & GRADIENT */
.usati .prodotto-hero-visual.dark {
    background: #000810; /* Fondo ultra-dark di sicurezza */
    position: relative;
    overflow: hidden;
    min-height: 80vh;
    display: flex;
    align-items: center;
}

/* Overlay Verticale: Protegge l'Header e si fonde con la sezione successiva */
.usati .prodotto-hero-visual.dark::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Gradiente: Blu quasi nero (Header) -> Blu Indaco (Centro) -> Blu Industriale (Bottom) */
    background: linear-gradient(
        to bottom, 
        rgba(0, 8, 16, 0.92) 0%,      /* Protezione totale Logo e Menu */
        rgba(13, 51, 90, 0.5) 50%,    /* Tono corporate Second Life */
        #0d335a 100%                  /* Match perfetto con .process-section-dark */
    );
    z-index: 2;
}

/* Overlay opzionale rimosso o azzerato per favorire il gradiente principale */
.usati .prodotto-hero-visual.dark::after {
    display: none; 
}

.usati .hero-img-bg {
    filter: brightness(0.7) grayscale(0.2) contrast(1.1);
    z-index: 1;
    transition: transform 10s ease-out;
}

.usati .hero-content {
    position: relative;
    z-index: 10; /* Testo sopra gli overlay */
}

/* 2. SEZIONE PROCESSO DARK */
.process-section-dark {
    background: #0d335a; /* Blu profondo industriale */
    padding: 100px 0;
}

.section-intro-center {
    text-align: center;
    margin-bottom: 60px;
}

.text-white {
    color: #ffffff !important;
}

/* 3. DARK CARDS (Apple Industrial Style) */
.dark-card {
    background: rgba(29, 29, 31, 0.7) !important; /* Grigio Apple con Glassmorphism */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--radius);
    padding: 40px;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) !important;
    position: relative;
}

.dark-card h3 {
    color: #ffffff !important;
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.dark-card p {
    color: #a1a1a6 !important; /* Grigio chiaro per massima leggibilità */
    line-height: 1.6;
}

.dark-card .spec-icon {
    filter: brightness(1.2);
    margin-bottom: 20px;
    display: inline-block;
}

/* Hover Effect raffinato */
.dark-card:hover {
    transform: translateY(-12px) scale(1.02);
    background: rgba(37, 37, 41, 0.9) !important;
    border-color: rgba(0, 212, 255, 0.5) !important; /* Tocco ciano elettrico */
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}

/* --- LABELS & TYPO --- */
.label-blue {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(0, 113, 227, 0.2);
    color: #5ac8fa;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(90, 200, 250, 0.3);
    margin-bottom: 25px;
}


/* FIX LEGGIBILITÀ HERO DARK */

/* Forza il bianco su tutti i paragrafi della hero scura */
.prodotto-hero-visual.dark .hero-text-wrapper p,
.usati .hero-text-wrapper p {
    color: rgba(255, 255, 255, 0.8) !important; /* Bianco al 80% per un look Apple raffinato */
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    line-height: 1.6;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* Protezione extra per la lettura */
}

/* Assicuriamoci che anche il titolo sia bianco puro */
.prodotto-hero-visual.dark h1,
.usati h1 {
    color: #ffffff !important;
}

/* Miglioriamo il contrasto della label superiore visibile nello screenshot */
.usati .label-blue, 
.usati .rigenerazione-label {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
}



/* 4. SEZIONE SPECS (NUOVI) */
.tech-specs {
    background: #fff;
    padding: 100px 0;
}

.section-intro-center {
    text-align: center;
    margin-bottom: 60px;
}

.section-intro-center h2 {
    font-size: 3rem;
    letter-spacing: -1.5px;
}

.specs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.spec-card {
    background: #f5f5f7;
    padding: 50px 40px;
    border-radius: 30px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.spec-card:hover {
    transform: translateY(-10px);
    background: #fff;
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
}

.spec-icon {
    font-size: 3rem;
    margin-bottom: 25px;
    display: block;
}

.spec-card h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: #1d1d1f;
}

.spec-card p {
    color: #86868b;
    line-height: 1.6;
}

/* 5. RESPONSIVE */
@media (max-width: 1024px) {
    .specs-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .prodotto-hero-visual { height: 60vh; }
    .specs-grid { grid-template-columns: 1fr; }
    .prodotto-hero-visual h1 { font-size: 2.8rem; }
    .nuovi .prodotto-hero-visual::before {
        background: rgba(255,255,255,0.85);
    }
}


/* --- SEZIONE GRIGLIA PRODOTTI --- */
.products-grid-section {
    padding: 100px 0 !important; /* Dà aria sopra e sotto la griglia */
    background-color: #fbfbfd;
}

.section-header-center {
    text-align: center;
    margin-bottom: 70px;
}

.section-header-center h2 {
    font-size: 40px;
    font-weight: 600;
    letter-spacing: -1px;
    color: #1d1d1f;
}

/* --- GRIGLIA --- */
.products-bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    align-items: stretch;
}

/* --- CARD PRODOTTO --- */
.product-card {
    background: #fff !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important; /* Toglie la cornice grigia intorno alle foto */
    border: 1px solid #f0f0f2 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
    height: 100%;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* Area Foto */
.product-img {
    width: 100%;
    height: 280px;
    position: relative;
    margin: 0 !important;
}

.product-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.product-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #0071e3;
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}

/* Area Testo (Trafiletto) */
.product-info {
    padding: 35px 25px !important;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra orizzontalmente */
    text-align: center; /* Centra i testi */
}

.product-info .category, 
.product-info .category-alt {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 12px;
    color: #0071e3;
}

.product-info .category-alt { color: #5ac8fa; }

/* Titoli e Paragrafi con altezza minima per evitare sfalsamenti */
.product-info h3 {
    font-size: 24px !important;
    color: #1d1d1f !important;
    margin-bottom: 15px !important;
    min-height: 60px; /* Spazio per 2 righe */
    display: flex;
    align-items: center;
}

.product-info p {
    font-size: 15px;
    color: #86868b;
    line-height: 1.5;
    margin-bottom: 30px;
    min-height: 45px; /* Spazio per la descrizione uguale per tutti */
}

/* Bottone */
.btn-apple-small {
    display: inline-block;
    padding: 12px 28px !important;
    background: #f5f5f7 !important;
    color: #1d1d1f !important;
    border-radius: 22px !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-top: auto; /* Spinge il tasto sempre in fondo */
    transition: 0.3s;
}

.btn-apple-small:hover { background: #e8e8ed !important; color: #0071e3 !important; }

/* --- COLORI VARIANTI --- */
.product-card.dark-card .product-info { background: #1d1d1f !important; }
.product-card.dark-card h3 { color: #fff !important; }
.product-card.dark-card p { color: #a1a1a6 !important; }
.product-card.dark-card .btn-apple-small { background: #333 !important; color: #fff !important; }

.product-card.blue-bg-card .product-info { background: #0071e3 !important; }
.product-card.blue-bg-card h3, .product-card.blue-bg-card p { color: #fff !important; }
.product-card.blue-bg-card .btn-apple-small { background: rgba(255,255,255,0.2) !important; color: #fff !important; }

/* Responsive */
@media (max-width: 1024px) { .products-bento-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .products-bento-grid { grid-template-columns: 1fr; } }









/* --- SEZIONE DUE COLONNE GRANDI --- */
.split-feature-section {
    width: 100%;
    background: #fff;
    padding: 20px; /* Piccolo margine esterno stile Apple */
}

.container-full {
    max-width: 1600px;
    margin: 0 auto;
}

.split-flex {
    display: flex;
    gap: 20px;
}

.split-box {
    position: relative;
    flex: 1;
    height: 600px; /* Altezza grande impattante */
    border-radius: 30px;
    overflow: hidden;
    display: flex;
    align-items: flex-end; /* Testo in basso */
    padding: 50px;
    transition: transform 0.5s ease;
}

/* Immagine di sfondo */
.split-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.8s ease;
    z-index: 1;
}

/* OVERLAY GRADIENT: Dal Blu (sinistra/basso) alla trasparenza */
.split-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(30deg, rgba(0, 113, 227, 0.8) 0%, rgba(0, 113, 227, 0.3) 40%, rgba(0, 0, 0, 0) 100%);
    z-index: 2;
}

/* Contenuto Testuale */
.split-content {
    position: relative;
    z-index: 3;
    max-width: 450px;
    color: #fff;
}

.split-content h2 {
    font-size: 38px;
    font-weight: 600;
    margin: 10px 0 20px 0;
    color: #fff !important;
}

.split-content p {
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 30px;
    color: rgba(255,255,255,0.9);
}

.label-white {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff;
    opacity: 0.8;
}

/* Bottone Light */
.btn-apple-light {
    display: inline-block;
    padding: 14px 30px;
    background: #fff;
    color: #1d1d1f;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s;
}

.btn-apple-light:hover {
    background: #f5f5f7;
    transform: scale(1.05);
}

/* Effetto Hover sulla Box */
.split-box:hover .split-image {
    transform: scale(1.05);
}

/* RESPONSIVE: Impilamento su Mobile */
@media (max-width: 992px) {
    .split-flex {
        flex-direction: column;
    }
    
    .split-box {
        height: 450px;
        padding: 30px;
    }

    .split-content h2 {
        font-size: 28px;
    }
}