/* _content/BlazorSSRPortal/App.razor.rz.scp.css */
/* _content/BlazorSSRPortal/Pages/UserPage/MainSite/AboutUs.razor.rz.scp.css */
/* ================================================
   Hero
   ================================================ */

.about-hero[b-sz10bjnp6n] {
    position: relative;
    height: 512px;
    background-image: linear-gradient(90deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.4) 100%), url('/images/About/aboutus.hero-banner.png');
    background-size: cover;
    background-position: center;
    border-radius: 12px;
    overflow: hidden;
    margin: clamp(2rem, 5vw, 3rem) auto;
    max-width: 960px;
}
    .about-hero button[b-sz10bjnp6n] {
        color: var(--mud-palette-primary);
        border-color: var(--mud-palette-primary);
    }

    .about-hero-overlay[b-sz10bjnp6n] {
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(0,0,0,0.1), rgba(0,0,0,0.4));
    }

.about-hero-content[b-sz10bjnp6n] {
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 730px;
    text-align:center;
}

.about-hero-title[b-sz10bjnp6n] {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 900;
    color: var(--mud-palette-surface);
    line-height: 1.2;
}

.about-hero-subtitle[b-sz10bjnp6n] {
    font-size: clamp(1rem, 2.5vw, 1.125rem);
    color: var(--mud-palette-surface);
    line-height: 1.5;
}

/* ================================================
   Why Choose Data and Process? — Custom CSS
   ================================================ */

/* SECTION WRAPPER */
.why-choose-section[b-sz10bjnp6n] {
    background: var(--mud-palette-background);
    padding: clamp(3rem, 8vw, 5rem) 1rem;
}

/* CENTERING CONTAINER */
.why-choose-container[b-sz10bjnp6n] {
    max-width: 72rem;
    margin: 0 auto;
}

/* HEADER */
.why-choose-header[b-sz10bjnp6n] {
    text-align: center;
    margin-bottom: 3rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

    .why-choose-header.in-view[b-sz10bjnp6n] {
        opacity: 1;
        transform: translateY(0);
    }

/* TITLE & SUBTITLE */
.why-choose-title[b-sz10bjnp6n] {
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    font-weight: 700;
    color: var(--mud-palette-primary);
    margin-bottom: 1rem;
}

.why-choose-subtitle[b-sz10bjnp6n] {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    color: var(--mud-palette-text-secondary);
    max-width: 42rem;
    margin: 0 auto;
    line-height: 1.5;
}

/* FEATURE LIST */
.why-choose-list[b-sz10bjnp6n] {
    display: grid;
    gap: 2rem;
}

@media (min-width: 768px) {
    .why-choose-list[b-sz10bjnp6n] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ITEM (con variabile per delay) */
.why-choose-item[b-sz10bjnp6n] {
    --delay: 0s;
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}

    .why-choose-item:nth-child(1)[b-sz10bjnp6n] {
        --delay: 0.2s;
    }

    .why-choose-item:nth-child(2)[b-sz10bjnp6n] {
        --delay: 0.4s;
    }

    .why-choose-item:nth-child(3)[b-sz10bjnp6n] {
        --delay: 0.6s;
    }

    .why-choose-item:nth-child(4)[b-sz10bjnp6n] {
        --delay: 0.8s;
    }

.why-choose-item-title[b-sz10bjnp6n] {
    color: var(--mud-palette-pramary);
    font-size: clamp(1rem, 2.5vw, 1.25rem);
}
/* ICON & CONTENT – stato iniziale */
.why-choose-icon[b-sz10bjnp6n],
.why-choose-content[b-sz10bjnp6n] {
    opacity: 0;
}

/* ICON */
.why-choose-icon[b-sz10bjnp6n] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--mud-palette-text-secondary);
    color: var(--mud-palette-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: bold;
    line-height: 1;
    margin-top: 0.25rem;
}

/* CONTENT */
.why-choose-content[b-sz10bjnp6n] {
    display: flex;
    flex-direction: column;
}

/* IN-VIEW ANIMATIONS */
.why-choose-item.in-view .why-choose-icon[b-sz10bjnp6n] {
    animation: popIn-b-sz10bjnp6n 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) var(--delay) forwards;
}

.why-choose-item.in-view .why-choose-content[b-sz10bjnp6n] {
    animation: fadeSlideUp-b-sz10bjnp6n 0.8s ease-out calc(var(--delay) + 0.1s) forwards;
}

/* KEYFRAMES */
@keyframes popIn-b-sz10bjnp6n {
    0% {
        opacity: 0;
        transform: scale(0.3) rotate(-60deg);
    }

    60% {
        opacity: 1;
        transform: scale(1.2) rotate(10deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

@keyframes fadeSlideUp-b-sz10bjnp6n {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 

/* ================================================
   CTA Section — Custom CSS (palette MudBlazor)
   ================================================ */
.about-cta-section[b-sz10bjnp6n] {
    padding: clamp(3rem, 8vw, 5rem) 1rem;
    background: var(--mud-palette-background);
}

.about-cta-container[b-sz10bjnp6n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
}

.about-cta-title[b-sz10bjnp6n] {
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.about-cta-text[b-sz10bjnp6n] {
    font-size: clamp(1rem, 2.5vw, 1.125rem);
    color: var(--mud-palette-text-secondary);
    max-width: 42rem;
    margin: 0 auto;
    line-height: 1;
}
/* Stati iniziali nascosti */
.about-cta-title[b-sz10bjnp6n],
.about-cta-text[b-sz10bjnp6n],
.about-cta-buttons[b-sz10bjnp6n] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
/* In-view */
.about-cta-container.in-view .about-cta-title[b-sz10bjnp6n] {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
}

.about-cta-container.in-view .about-cta-text[b-sz10bjnp6n] {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.4s;
}

.about-cta-container.in-view .about-cta-buttons[b-sz10bjnp6n] {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.6s;
}
/* ================================================
   Popup Footer — Custom CSS
   ================================================ */
.popup-footer[b-sz10bjnp6n] {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    color: var(--mud-palette-surface);
    box-shadow: 0 -2px 8px rgba(0,0,0,0.2);
    transform: translateY(100%);
    transition: transform 0.4s ease-out;
    z-index: 1000;
}

    .popup-footer.visible[b-sz10bjnp6n] {
        transform: translateY(0);
    }

    .popup-footer .footer-container[b-sz10bjnp6n] {
        max-width: 72rem;
        margin: 0 auto;
        padding: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1.5rem;
        min-width: 100vw;
    }

    .popup-footer .footer-text[b-sz10bjnp6n] {
        font-size: 1rem;
    }

    .popup-footer .footer-buttons > *[b-sz10bjnp6n] {
        margin-left: 1rem;
        width:10rem;
    }


/* ================================================
   Additional Content
   ================================================ */
.about-content .about-container[b-sz10bjnp6n] {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 1rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.section-block[b-sz10bjnp6n] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.section-title[b-sz10bjnp6n] {
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.section-text[b-sz10bjnp6n] {
    font-size: clamp(1rem, 2.5vw, 1.125rem);
    color: var(--mud-palette-text-secondary);
    line-height: 1.6;
}

/* Mission/Vision/Values */
.value-grid[b-sz10bjnp6n] {
    display: grid;
    gap: 2rem;
}

@media (min-width: 768px) {
    .value-grid[b-sz10bjnp6n] {
        grid-template-columns: repeat(3, 1fr);
    }
   
}

.value-item[b-sz10bjnp6n] {
    border-top: 1px solid var(--mud-palette-divider);
    padding: 1rem 0;
}

.value-label[b-sz10bjnp6n] {
    color: var(--mud-palette-primary);
    font-size: 0.875rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.value-text[b-sz10bjnp6n] {
    color: var(--mud-palette-text-primary);
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Services Overview */
.service-grid[b-sz10bjnp6n] {
    display: grid;
    gap: 2rem;
}

@media (min-width: 768px) {
    .service-grid[b-sz10bjnp6n] {
        grid-template-columns: repeat(4, 1fr);
    }
    
}

.service-card[b-sz10bjnp6n] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.service-icon[b-sz10bjnp6n] {
    font-size: 1.5rem;
    color: var(--mud-palette-primary);
}

.service-title[b-sz10bjnp6n] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.service-desc[b-sz10bjnp6n] {
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.4;
}

/* ==============================================
   Hero Banner — Extracted Styles
   ============================================== */

/* 1. SECTION WRAPPER (fade-in on scroll) */
.about-section[b-sz10bjnp6n] {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

    .about-section.in-view[b-sz10bjnp6n] {
        opacity: 1;
        transform: translateY(0);
    }

/* 2. CARD INTERNA (fade-in + scale) */
.about-card[b-sz10bjnp6n] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    background: var(--mud-palette-surface);
    border-radius: 8px;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

    .about-card.in-view[b-sz10bjnp6n] {
        opacity: 1;
        transform: scale(1);
    }

/* 3. HERO BANNER */
.about-banner[b-sz10bjnp6n] {
    position: relative;
    width: 100%;
    height: 60vh;
    min-height: 300px;
    max-height: 600px;
    background: linear-gradient(90deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.40) 100%), url('/images/About/aboutus.hero-banner.png') center/cover no-repeat;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 1rem;
    box-sizing: border-box;
}

/* 4. TEXT CONTAINERS (fade-in up) */
.about-banner-smalltext-container[b-sz10bjnp6n],
.about-banner-largetext-container[b-sz10bjnp6n],
.about-banner-button-container[b-sz10bjnp6n] {
    width: clamp(280px, 80%, 800px);
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

    .about-banner-smalltext-container.in-view[b-sz10bjnp6n],
    .about-banner-largetext-container.in-view[b-sz10bjnp6n] {
        opacity: 1;
        transform: translateY(0);
    }

    .about-banner-smalltext-container.in-view[b-sz10bjnp6n] {
        transition-delay: 0.3s;
    }

    .about-banner-largetext-container.in-view[b-sz10bjnp6n] {
        transition-delay: 0.5s;
    }

/* 5. Subtitle */
.about-banner-subtitle[b-sz10bjnp6n] {
    color: var(--mud-palette-surface);
    font-size: clamp(0.9rem, 2.5vw, 1.2rem);
    font-weight: 400;
    line-height: 1.4;
    margin-bottom: 0.5rem;
}

/* 6. Title */
.about-banner-title[b-sz10bjnp6n] {
    color: var(--mud-palette-surface);
    font-size: clamp(1.8rem, 5vw, 3rem);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 1rem;
}

/* 7. Button Container (fade-in + pulse) */
.about-banner-button-container[b-sz10bjnp6n] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-surface);
    padding: clamp(0.6rem, 2vw, 1rem) clamp(1rem, 4vw, 2rem);
    border-radius: 24px;
    cursor: pointer;
    animation: buttonPulse-b-sz10bjnp6n 2s ease-in-out 1.7s infinite alternate;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

    .about-banner-button-container.in-view[b-sz10bjnp6n] {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.7s;
    }

/* 8. Button Text */
.about-banner-button[b-sz10bjnp6n] {
    font-size: clamp(0.9rem, 2.5vw, 1.1rem);
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

/* 9. Pulse Keyframes */
@keyframes buttonPulse-b-sz10bjnp6n {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

/* ==============================================
   Responsive Adjustments
   ============================================== */
@media (max-width: 768px) {
    .about-banner[b-sz10bjnp6n] {
        height: 50vh;
        padding: 0 0.5rem;
    }

    .about-banner-smalltext-container[b-sz10bjnp6n],
    .about-banner-largetext-container[b-sz10bjnp6n] {
        transform: translateY(10px);
    }
}

@media (max-width: 480px) {
    .about-banner[b-sz10bjnp6n] {
        height: 45vh;
    }

    .about-banner-subtitle[b-sz10bjnp6n] {
        font-size: 0.85rem;
    }

    .about-banner-title[b-sz10bjnp6n] {
        font-size: 1.6rem;
    }

    .about-banner-button-container[b-sz10bjnp6n] {
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
    }
}
/* ========================================================================== 
   12. OUR TEAM 
   ========================================================================== */

/* Lista dei membri */
.home-team-members[b-sz10bjnp6n] {
    padding: 16px;
    display: inline-flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center; /* dalla sezione di fluidità generale */
}

/* Singolo membro */
.home-team-member[b-sz10bjnp6n] {
    width: 223px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    opacity: 0;
    transform: translateY(20px) rotate(-5deg);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    flex: 1 1 250px; /* dalla sezione di fluidità generale */
    max-width: 100%; /* dalla sezione di fluidità generale */
    align-items: center; /* dalla sezione di fluidità generale */
}

    /* Membro in vista: animazione di entrata */
    .home-team-member.in-view[b-sz10bjnp6n] {
        opacity: 1;
        transform: translateY(0) rotate(0);
    }

    /* Delay progressivi per ogni figlio */
    .home-team-member:nth-child(1).in-view[b-sz10bjnp6n] {
        transition-delay: 0.2s;
    }

    .home-team-member:nth-child(2).in-view[b-sz10bjnp6n] {
        transition-delay: 0.4s;
    }

    .home-team-member:nth-child(3).in-view[b-sz10bjnp6n] {
        transition-delay: 0.6s;
    }

/* Foto del membro */
.home-team-photo[b-sz10bjnp6n] {
    width: 191px;
    height: 191px;
    border-radius: 50%;
    object-fit: cover;
    animation: photoSpin-b-sz10bjnp6n 15s linear infinite;
}

/* Animazione rotazione foto */
@keyframes photoSpin-b-sz10bjnp6n {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Nome del membro */
.home-team-name[b-sz10bjnp6n] {
    color: var(--mud-palette-text-primary);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
}

/* Ruolo e bio */
.home-team-role[b-sz10bjnp6n],
.home-team-bio[b-sz10bjnp6n] {
    color: var(--mud-palette-text-secondary);
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    text-align: center;
}

/* ========================================================================== 
   6. SECTION HEADINGS (per titolo sezione, centrata e max-width 70%)
   ========================================================================== */

/* Contenitore heading sezione */
.home-section-heading[b-sz10bjnp6n] {
    display: flex;
    flex-direction: column;
    align-items: center; /* centra i contenuti orizzontalmente */
    padding: 20px 16px 12px;
    margin: 0 auto; /* centra il blocco nel contenitore padre */
    max-width: 70%; /* limita la larghezza al 70% del genitore */
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

    /* Quando entra in vista */
    .home-section-heading.in-view[b-sz10bjnp6n] {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.2s;
    }

/* Titolo della sezione */
.home-section-title[b-sz10bjnp6n] {
    width: 100%;
    text-align: center; /* allinea il testo al centro */
    color: var(--mud-palette-text-primary);
    font-size: 22px;
    font-weight: 700;
    line-height: 28px;
    opacity: 0;
    animation: titlePopIn-b-sz10bjnp6n 0.8s ease-out forwards;
}

    /* Delay dell’animazione del titolo */
    .home-section-title.in-view[b-sz10bjnp6n] {
        animation-delay: 0.6s;
    }

/* Animazione pop-in titolo */
@keyframes titlePopIn-b-sz10bjnp6n {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    60% {
        opacity: 1;
        transform: scale(1.05);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Our Clients Section */
.clients-section[b-sz10bjnp6n] {
    padding: 60px 20px;
    background: var(--mud-palette-background);
}

.clients-container[b-sz10bjnp6n] {
    max-width: 80%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.clients-header[b-sz10bjnp6n] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    text-align: center;
    margin-bottom: 32px;
}

    .clients-header.in-view[b-sz10bjnp6n] {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.2s;
    }

.clients-subtitle[b-sz10bjnp6n] {
    color: var(--mud-palette-text-secondary);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    max-width: 600px;
    margin-top: 0.5rem;
}

.clients-logos[b-sz10bjnp6n] {
    margin-top: 40px;
    display: inline-flex;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

    .clients-logos.in-view[b-sz10bjnp6n] {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.4s;
    }

.client-item[b-sz10bjnp6n] {
    flex: 1 1 150px;
    max-width: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
}

.client-logo[b-sz10bjnp6n] {
    max-width: 100%;
    max-height: 80px;
    object-fit: contain;
}

@media (max-width: 768px) {
    .clients-container[b-sz10bjnp6n] {
        max-width: 95%;
    }

    .clients-logos[b-sz10bjnp6n] {
        gap: 16px;
    }

    .client-logo[b-sz10bjnp6n] {
        max-height: 60px;
    }
}

/* _content/BlazorSSRPortal/Pages/UserPage/MainSite/ArchivioAIProduct.razor.rz.scp.css */
/* -----------------------------------------------------------
   1. Pagina wrapper: usa background e testo dal tema
      (nessuna animazione qui, ma resta pronta per il “fade-in” dei figli)
----------------------------------------------------------- */
.pagina-wrapper[b-krojjh6dkj] {
    width: 100%;
    height: 100%;
    background: var(--mud-palette-background);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    color: var(--mud-palette-text-primary);
    font-family: Inter, sans-serif;
    max-width: 70%;
    margin: 0 auto;
    overflow-x: hidden; /* evita overflow laterali durante le animazioni */
}

/* -----------------------------------------------------------
   2. Header: sfondo immagine + gradiente, bordi e animazioni
      (manteniamo pulseBg, aggiungiamo leggero zoom e fade-in text)
----------------------------------------------------------- */
.pagina-header[b-krojjh6dkj] {
    width: 100%;
    display: flex;
    align-items: center; /* centra verticalmente */
    justify-content: center; /* centra orizzontalmente */
    height: 70vh; /* l’hero occupa il 70% dell’altezza viewport */
    min-height: 300px; /* almeno 300px in altezza */
    background: linear-gradient(90deg, rgba(0,0,0,0.10), rgba(0,0,0,0.40)), url('/images/ArchivioAI/archivioai.header-background.png') center/cover no-repeat;
    border-radius: 12px;
    overflow: hidden;
    padding: 0 1rem; /* un po’ di spazio orizzontale sui lati */
    box-sizing: border-box;
}
/* slow zoom keyframe per il header */
@keyframes headerZoom-b-krojjh6dkj {
    from {
        background-size: 100% 100%;
    }

    to {
        background-size: 110% 110%;
    }
}

.pagina-header-content[b-krojjh6dkj] {
    width: 100%;
    text-align: center; /* titolo e paragrafo al centro */
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

    .pagina-header-content.in-view[b-krojjh6dkj] {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.3s;
    }

@media (max-width: 480px) {
    .pagina-header[b-krojjh6dkj] {
        height: 50vh;
    }

    .pagina-header-content[b-krojjh6dkj] {
        gap: 0.75rem;
    }
}

.pagina-header-title[b-krojjh6dkj] {
    font-size: clamp(1.5rem,5vw, 2.5rem);
    font-weight: 900;
    line-height: 1.2;
    color: var(--mud-palette-surface);
    margin: 0;
    opacity: 0;
    transform: scale(0.8);
    animation: titlePop-b-krojjh6dkj 1s ease-out forwards 0.5s;
}

    .pagina-header-title.in-view[b-krojjh6dkj] {
        animation-delay: 0.5s;
    }

@keyframes titlePop-b-krojjh6dkj {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    60% {
        opacity: 1;
        transform: scale(1.05);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.pagina-header-subtitle[b-krojjh6dkj] {
    font-size: clamp(0.875rem, 2.5vw, 1.25rem);
    line-height: 1.5;
    color: var(--mud-palette-surface);
    margin: 0 auto;
    max-width: 50rem;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp-b-krojjh6dkj 0.8s ease-out forwards 0.7s;
}

    .pagina-header-subtitle.in-view[b-krojjh6dkj] {
        opacity: 1;
        transform: translateX(0);
        transition-delay: 0.7s;
    }

/* -----------------------------------------------------------
   3. Pulsante “Demo” nell’header
      (bounce-in + pulsazione continua, hover tilt)
----------------------------------------------------------- */
.pagina-demo-button[b-krojjh6dkj] {
    align-self: center;
    padding: 0.75rem 1.5rem;
    margin-top: 1rem;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-surface);
    font-size: clamp(0.875rem, 2.5vw, 1rem);
    font-weight: 700;
    border: none;
    border-radius: 24px;
    cursor: pointer;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp-b-krojjh6dkj 0.8s ease-out forwards 0.9s, demoPulse-b-krojjh6dkj 2s ease-in-out 1.7s infinite alternate;
}

/* pulsazione lenta dopo l’atterraggio */
.pagina-demo-button[b-krojjh6dkj] {
    animation: bounceIn-b-krojjh6dkj 1s ease-out 0.9s both, demoPulse-b-krojjh6dkj 2s ease-in-out 2s infinite alternate;
}

    .pagina-demo-button:hover[b-krojjh6dkj] {
        transform: translateY(-2px) scale(1.05) rotate(-2deg);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

@keyframes bounceIn-b-krojjh6dkj {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }

    70% {
        opacity: 1;
        transform: scale(0.9);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes demoPulse-b-krojjh6dkj {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.05);
    }
}

/* -----------------------------------------------------------
   4. Sezioni generiche: stato iniziale “nascosto”
      e transizione quando entra in viewport, con stagger
----------------------------------------------------------- */
.pagina-section[b-krojjh6dkj] {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    padding: 20px 16px;
    color: var(--mud-palette-text-primary);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

    .pagina-section.in-view[b-krojjh6dkj] {
        opacity: 1;
        transform: translateY(0);
    }

    .pagina-section:nth-of-type(1).in-view[b-krojjh6dkj] {
        transition-delay: 0.2s;
    }

    .pagina-section:nth-of-type(2).in-view[b-krojjh6dkj] {
        transition-delay: 0.4s;
    }

    .pagina-section:nth-of-type(3).in-view[b-krojjh6dkj] {
        transition-delay: 0.6s;
    }

.pagina-section-title[b-krojjh6dkj] {
    color: var(--mud-palette-text-primary);
    font-size: 22px;
    font-weight: 700;
    line-height: 28px;
}

.pagina-section-text[b-krojjh6dkj] {
    color: var(--mud-palette-text-secondary);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

/* -----------------------------------------------------------
   5. Griglie di feature / key-features / steps / ecc.
      (staggered zoom-in on-scroll + hover tilt)
----------------------------------------------------------- */
.pagina-features[b-krojjh6dkj],
.pagina-key-features .pagina-grid[b-krojjh6dkj],
.pagina-how-it-works .pagina-grid[b-krojjh6dkj],
.pagina-advanced-capabilities .pagina-grid[b-krojjh6dkj],
.pagina-use-cases .pagina-grid[b-krojjh6dkj] {
    display: inline-flex;
    gap: 12px;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 16px;
}



/* Card generica: default nascosta e zoom-out */
.pagina-feature[b-krojjh6dkj],
.pagina-key-feature[b-krojjh6dkj],
.pagina-step[b-krojjh6dkj],
.pagina-capability[b-krojjh6dkj],
.pagina-use-case[b-krojjh6dkj] {
    background: var(--mud-palette-surface);
    border-radius: 8px;
    outline: 1px solid var(--mud-palette-divider);
    outline-offset: -1px;
    flex: 1 1 250px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    min-height: 10rem;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

    .pagina-feature.in-view[b-krojjh6dkj],
    .pagina-key-feature.in-view[b-krojjh6dkj],
    .pagina-step.in-view[b-krojjh6dkj],
    .pagina-capability.in-view[b-krojjh6dkj],
    .pagina-use-case.in-view[b-krojjh6dkj] {
        opacity: 1;
        transform: scale(1);
    }
    /* stagger: usa :nth-child su ogni tipo di card */
    .pagina-feature:nth-child(1).in-view[b-krojjh6dkj] {
        transition-delay: 0.2s;
    }

    .pagina-feature:nth-child(2).in-view[b-krojjh6dkj] {
        transition-delay: 0.4s;
    }

    .pagina-feature:nth-child(3).in-view[b-krojjh6dkj] {
        transition-delay: 0.6s;
    }

    .pagina-key-feature:nth-child(1).in-view[b-krojjh6dkj] {
        transition-delay: 0.2s;
    }

    .pagina-key-feature:nth-child(2).in-view[b-krojjh6dkj] {
        transition-delay: 0.4s;
    }

    .pagina-key-feature:nth-child(3).in-view[b-krojjh6dkj] {
        transition-delay: 0.6s;
    }

    .pagina-step:nth-child(1).in-view[b-krojjh6dkj] {
        transition-delay: 0.2s;
    }

    .pagina-step:nth-child(2).in-view[b-krojjh6dkj] {
        transition-delay: 0.4s;
    }

    .pagina-step:nth-child(3).in-view[b-krojjh6dkj] {
        transition-delay: 0.6s;
    }
    /* Hover per tutte le card: tilt e shadow */
    .pagina-feature:hover[b-krojjh6dkj],
    .pagina-key-feature:hover[b-krojjh6dkj],
    .pagina-step:hover[b-krojjh6dkj],
    .pagina-capability:hover[b-krojjh6dkj],
    .pagina-use-case:hover[b-krojjh6dkj] {
        animation: hoverBounce-b-krojjh6dkj 0.5s ease-out forwards;
        box-shadow: 0 12px 24px rgba(0,0,0,0.18);
        will-change: transform, box-shadow;
    }
@keyframes hoverBounce-b-krojjh6dkj {
    0%, 100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-10px) scale(1.05);
    }
}


.pagina-feature-image[b-krojjh6dkj],
.pagina-key-feature-image[b-krojjh6dkj],
.pagina-step-image[b-krojjh6dkj] {
    width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
    /* slow pulse */
    animation: imgPulse-b-krojjh6dkj 10s ease-in-out infinite alternate;
}

/* Slow pulse keyframes (già definito sopra ma ripetuto per contesto) */
@keyframes imgPulse-b-krojjh6dkj {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.03);
    }
}

.pagina-feature-title[b-krojjh6dkj],
.pagina-key-feature-title[b-krojjh6dkj],
.pagina-step-title[b-krojjh6dkj],
.pagina-capability-title[b-krojjh6dkj],
.pagina-use-case-title[b-krojjh6dkj] {
    color: var(--mud-palette-text-primary);
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
}

.pagina-feature-text[b-krojjh6dkj],
.pagina-key-feature-text[b-krojjh6dkj],
.pagina-step-text[b-krojjh6dkj],
.pagina-capability-text[b-krojjh6dkj],
.pagina-use-case-text[b-krojjh6dkj] {
    color: var(--mud-palette-text-secondary);
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
}

/* -----------------------------------------------------------
   6. Video Section
      (fade-in container + slow pan background)
----------------------------------------------------------- */
.pagina-video[b-krojjh6dkj] {
    padding: 16px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

    .pagina-video.in-view[b-krojjh6dkj] {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.2s;
    }

.pagina-video-image[b-krojjh6dkj] {
    width: 100%;
    height: auto;
    border-radius: 12px;
    /* slow pan (se usi immagine come background dietro <video>, 
       altrimenti applichi solo fade-in) */
    animation: videoPan-b-krojjh6dkj 20s linear infinite alternate;
}

@keyframes videoPan-b-krojjh6dkj {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.05);
    }
}

/* -----------------------------------------------------------
   7. Technical Specs (griglia) – Sfondo = Surface, Bordo = Divider
      (slide-in ai lati + fade-in)
----------------------------------------------------------- */
.pagina-specs-grid[b-krojjh6dkj] {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 0;
    padding: 16px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 8px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

    .pagina-specs-grid.in-view[b-krojjh6dkj] {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.3s;
    }

.pagina-spec-item[b-krojjh6dkj] {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 24px;
    align-items: center;
    padding: 12px 0;
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

    .pagina-spec-item:nth-child(1).in-view[b-krojjh6dkj] {
        transition-delay: 0.2s;
    }

    .pagina-spec-item:nth-child(2).in-view[b-krojjh6dkj] {
        transition-delay: 0.4s;
    }

    .pagina-spec-item:nth-child(3).in-view[b-krojjh6dkj] {
        transition-delay: 0.6s;
    }

    .pagina-spec-item:nth-child(4).in-view[b-krojjh6dkj] {
        transition-delay: 0.8s;
    }

    .pagina-spec-item:nth-child(5).in-view[b-krojjh6dkj] {
        transition-delay: 1s;
    }

    .pagina-spec-item.in-view[b-krojjh6dkj] {
        opacity: 1;
        transform: translateX(0);
    }

.pagina-spec-key[b-krojjh6dkj] {
    color: var(--mud-palette-text-secondary);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
}

.pagina-spec-value[b-krojjh6dkj] {
    color: var(--mud-palette-text-primary);
    font-size: 14px;
    font-weight: 500;
}

/* -----------------------------------------------------------
   8. Responsive Specs (colonne singole su tablet/smartphone)
----------------------------------------------------------- */
@media (max-width: 768px) {
    .pagina-specs-grid[b-krojjh6dkj] {
        grid-template-columns: 1fr;
    }

    .pagina-spec-item[b-krojjh6dkj] {
        grid-template-columns: 1fr;
        gap: 8px 0;
        padding: 8px 0;
    }

    .pagina-spec-key[b-krojjh6dkj],
    .pagina-spec-value[b-krojjh6dkj] {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .pagina-spec-key[b-krojjh6dkj],
    .pagina-spec-value[b-krojjh6dkj] {
        font-size: 11px;
    }
}

/* -----------------------------------------------------------
   9. Call to Action (CTA) – Sfondo = Secondary, testo = TextPrimary o Surface
      (fade-in e piccolo bounce on-scroll, flare hover)
----------------------------------------------------------- */
.pagina-cta[b-krojjh6dkj] {
    padding: 30px 40px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    background: var(--mud-palette-secondary);
    border-radius: 24px;
    width: 100%;
    align-items: center;
    margin-bottom: 20px;
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}


    .pagina-cta.in-view[b-krojjh6dkj] {
        opacity: 1;
        transform: translateY(0) scale(1);
        transition-delay: 0.3s;
    }

.pagina-cta-title[b-krojjh6dkj] {
    color: var(--mud-palette-text-primary);
    font-size: 36px;
    font-weight: 900;
    line-height: 45px;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

    .pagina-cta-title.in-view[b-krojjh6dkj] {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.5s;
    }

.pagina-cta-button[b-krojjh6dkj] {
    color: var(--mud-palette-text-primary);
    background-color: var(--mud-palette-surface);
    width: max-content;
    font-size: 20px;
    text-align: center;
    padding: 12px 24px;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-divider);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    /* default: leggero zoom out */
    transform: scale(0.9);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .pagina-cta-button.in-view[b-krojjh6dkj] {
        transform: scale(1);
        transition-delay: 0.7s;
    }

    .pagina-cta-button:hover[b-krojjh6dkj] {
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .pagina-cta-button[b-krojjh6dkj]::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle at center, rgba(255, 255, 255, 0.4), transparent 70%);
        transform: scale(0);
        transition: transform 0.6s ease;
        pointer-events: none;
    }

    .pagina-cta-button:hover[b-krojjh6dkj]::before {
        transform: scale(1);
    }

/* -----------------------------------------------------------
   10. Animazioni generali (keyframes rimasti)
----------------------------------------------------------- */

/* Fade-in da sinistra (usato per header-text) */
@keyframes fadeInLeft-b-krojjh6dkj {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Fade-in da destra (usato per header-subtitle) */
@keyframes fadeInRight-b-krojjh6dkj {
    from {
        opacity: 0;
        transform: translateX(40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Bounce-in per il pulsante demo (ripetuto per contesto) */
@keyframes bounceIn-b-krojjh6dkj {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }

    70% {
        opacity: 1;
        transform: scale(0.9);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Pulsazione sottile del background header (ripetuto) */
@keyframes pulseBg-b-krojjh6dkj {
    0%, 100% {
        background-position: center;
    }

    50% {
        background-position: 52% 48%;
    }
}

/* Zoom-in alle immagini feature (ripetuto) */
@keyframes zoomIn-b-krojjh6dkj {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}



/* FeaturedSolution.css */

/* ===========================
   1. Sezione principale
   =========================== */
.featured-section[b-krojjh6dkj] {
    background-color: var(--mud-palette-background);
    padding: 5rem 1.5rem;
}

.featured-container[b-krojjh6dkj] {
    max-width: 80rem; /* ≈ 5xl */
    margin: 0 auto;
}

/* ===========================
   2. Titolo e sottotitolo
   =========================== */
.featured-heading[b-krojjh6dkj] {
    text-align: center;
    margin-bottom: 4rem;
    opacity: 0;
    transform: translateY(20px);
}

    .featured-heading.in-view[b-krojjh6dkj] {
        animation: fadeInUp-b-krojjh6dkj 0.6s ease-out forwards;
    }

.featured-title[b-krojjh6dkj] {
    margin-bottom: 1rem;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.featured-subtitle[b-krojjh6dkj] {
    color: var(--mud-palette-text-secondary);
    font-size: 1rem;
    line-height: 1.5rem;
}

/* ===========================
   3. Card principale
   =========================== */
.featured-card[b-krojjh6dkj] {
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 1rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    padding: 3rem;
    opacity: 0;
    transform: translateY(40px);
}

    .featured-card.in-view[b-krojjh6dkj] {
        animation: slideInUp-b-krojjh6dkj 0.7s ease-out forwards;
    }

/* ===========================
   4. Griglia interna
   =========================== */
.featured-grid[b-krojjh6dkj] {
    display: grid;
    gap: 3rem;
}

@media (min-width: 768px) {
    .featured-grid[b-krojjh6dkj] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .featured-grid[b-krojjh6dkj] {
        grid-template-columns: 1fr;
    }
}

/* ===========================
   5. Colonna di sinistra
   =========================== */
.featured-col-left[b-krojjh6dkj] {
    display: flex;
    flex-direction: column;
}

/* Icona + titolo prodotto */
.featured-icon-title[b-krojjh6dkj] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.featured-icon-box[b-krojjh6dkj] {
    width: 4rem;
    height: 4rem;
    background: linear-gradient(to bottom right, #6366f1, #8b5cf6);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--mud-palette-surface);
}

.featured-product-name[b-krojjh6dkj] {
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    margin: 0;
}

/* Descrizione principale */
.featured-description[b-krojjh6dkj] {
    color: var(--mud-palette-text-secondary);
    font-size: 1.125rem;
    line-height: 1.75rem;
    margin-bottom: 1.5rem;
}

/* Lista con icona di spunta */
.featured-list[b-krojjh6dkj] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.featured-list-item[b-krojjh6dkj] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    color: var(--mud-palette-text-primary);
}

.featured-check-icon[b-krojjh6dkj] {
    width: 1.25rem;
    height: 1.25rem;
    background-color: #22c55e; /* verde */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-surface);
    font-size: 0.75rem;
    line-height: 1rem;
}

/* Bottone esplora */
.featured-button-container[b-krojjh6dkj] {
    margin-top: 1rem;
}

.featured-button[b-krojjh6dkj] {
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-surface);
    padding: 1rem 2rem;
    border: none;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

    .featured-button:hover[b-krojjh6dkj] {
        background-color: rgba(0, 0, 0, 0.9);
        transform: scale(1.03);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    }

/* ===========================
   6. Colonna di destra
   =========================== */
.featured-col-right[b-krojjh6dkj] {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Riquadro sfumato con grafico */
.featured-gradient-box[b-krojjh6dkj] {
    width: 100%;
    aspect-ratio: 1;
    background: linear-gradient(135deg, rgba(237, 229, 254, 1) 0%, rgba(224, 231, 255, 1) 100%);
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.featured-bar-chart[b-krojjh6dkj] {
    font-size: 3rem;
    animation: float-b-krojjh6dkj 6s ease-in-out infinite;
}

/* Cerchietto sfumato in alto a destra */
.featured-floating-circle[b-krojjh6dkj] {
    position: absolute;
    top: -1rem;
    right: -1rem;
    width: 6rem;
    height: 6rem;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--mud-palette-surface);
    font-size: 1.5rem;
    animation: float-b-krojjh6dkj 6s ease-in-out infinite 1s;
}

/* ===========================
   7. Animazioni
   =========================== */
@keyframes fadeInUp-b-krojjh6dkj {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInUp-b-krojjh6dkj {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float-b-krojjh6dkj {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}
#core-features[b-krojjh6dkj] {
    display: none !important;
}
/* _content/BlazorSSRPortal/Pages/UserPage/MainSite/Home.razor.rz.scp.css */
/* ==========================================================================
   1. CONTAINER & WRAPPER (nessuna animazione)
   ========================================================================== */
.home-container[b-cosh8q0xf7] {
    width: 100%;
    height: 100%;
    background: var(--mud-palette-background);
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.home-wrapper[b-cosh8q0xf7] {
    align-self: stretch;
    min-height: 800px;
    background: var(--mud-palette-background);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

/* ==========================================================================
   2. GENERIC SECTION (nascosta di default, appare con .in-view)
   ========================================================================== */
.home-section[b-cosh8q0xf7] {
    align-self: stretch;
    flex-direction: column;
    display: flex;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    margin-bottom: 4rem;
}

    .home-section.in-view[b-cosh8q0xf7] {
        opacity: 1;
        transform: translateY(0);
    }

    .home-section:nth-child(1).in-view[b-cosh8q0xf7] {
        transition-delay: 0s;
    }

    .home-section:nth-child(2).in-view[b-cosh8q0xf7] {
        transition-delay: 0.2s;
    }

    .home-section:nth-child(3).in-view[b-cosh8q0xf7] {
        transition-delay: 0.4s;
    }

/* ==========================================================================
   3. PADDING ORIZZONTALE & MAIN
   ========================================================================== */
.home-content-padding[b-cosh8q0xf7] {
    flex: 1 1 0;
    padding: 20px 160px;
    justify-content: center;
    align-items: flex-start;
    display: inline-flex;
}

.home-main[b-cosh8q0xf7] {
    flex: 1 1 0;
    overflow: hidden;
    display: inline-flex;
    flex-direction: column;
}

/* ==========================================================================
   4. CARD INTERNA (fade-in e scale-up on-scroll)
   ========================================================================== */
.home-card[b-cosh8q0xf7] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    background: var(--mud-palette-surface);
    border-radius: 8px;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

    .home-card.in-view[b-cosh8q0xf7] {
        opacity: 1;
        transform: scale(1);
    }

/* ==========================================================================
   5. HERO BANNER (responsive, centering, scaling, pulse button)
   ========================================================================== */
.home-banner[b-cosh8q0xf7] {
    position: relative;
    width: 100%;
    height: 60vh;
    min-height: 300px;
    max-height: 600px;
    background: linear-gradient(90deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.40) 100%), url('images/Home/home.bannerBackground.webp') center/cover no-repeat;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 1rem;
    box-sizing: border-box;
}

.home-banner-credit[b-cosh8q0xf7] {
    position: absolute;
    bottom: 12px;
    right: 16px;
    font-size: 0.85rem;
    color: var(--mud-palette-surface);
    opacity: 0.75;
    pointer-events: none; /* non interferisce con il click del bottone */
}

.home-banner-smalltext-container[b-cosh8q0xf7],
.home-banner-largetext-container[b-cosh8q0xf7],
.home-banner-button-container[b-cosh8q0xf7] {
    /* centrate orizzontalmente, width fluida */
    width: clamp(280px, 80%, 800px);
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

    /* testi entrano con fadeInUp */
    .home-banner-smalltext-container.in-view[b-cosh8q0xf7],
    .home-banner-largetext-container.in-view[b-cosh8q0xf7] {
        opacity: 1;
        transform: translateY(0);
    }

    /* delay progressivi */
    .home-banner-smalltext-container.in-view[b-cosh8q0xf7] {
        transition-delay: 0.3s;
    }

    .home-banner-largetext-container.in-view[b-cosh8q0xf7] {
        transition-delay: 0.5s;
    }

/* sottotitolo */
.home-banner-subtitle[b-cosh8q0xf7] {
    color: var(--mud-palette-surface);
    font-size: clamp(0.9rem, 2.5vw, 1.2rem);
    font-weight: 400;
    line-height: 1.4;
    margin-bottom: 0.5rem;
}

/* titolo principale */
.home-banner-title[b-cosh8q0xf7] {
    color: var(--mud-palette-surface);
    font-size: clamp(1.8rem, 5vw, 3rem);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 1rem;
}

/* bottone centrale */
.home-banner-button-container[b-cosh8q0xf7] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-surface);
    padding: clamp(0.6rem,2vw, 1rem) clamp(1rem,4vw, 2rem);
    border-radius: 24px;
    cursor: pointer;
    animation: buttonPulse-b-cosh8q0xf7 2s ease-in-out 1.7s infinite alternate;
    width: 40%;
}

    .home-banner-button-container.in-view[b-cosh8q0xf7] {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.7s;
    }

.home-banner-button[b-cosh8q0xf7] {
    font-size: clamp(0.9rem, 2.5vw, 1.1rem);
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}


@keyframes buttonPulse-b-cosh8q0xf7 {
    0%,100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

@media (max-width: 768px) {
    .home-banner[b-cosh8q0xf7] {
        height: 50vh;
        padding: 0 0.5rem;
    }

    .home-banner-smalltext-container[b-cosh8q0xf7],
    .home-banner-largetext-container[b-cosh8q0xf7] {
        transform: translateY(10px);
    }
}

@media (max-width: 480px) {
    .home-banner[b-cosh8q0xf7] {
        height: 45vh;
    }

    .home-banner-subtitle[b-cosh8q0xf7] {
        font-size: 0.85rem;
    }

    .home-banner-title[b-cosh8q0xf7] {
        font-size: 1.6rem;
    }

    .home-banner-button-container[b-cosh8q0xf7] {
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
    }
}
/* ==========================================================================
   6. SECTION HEADINGS (pop-in & fade-in)
   ========================================================================== */
.home-section-heading[b-cosh8q0xf7] {
    align-self: stretch;
    padding: 20px 16px 12px;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    margin-bottom: 2rem;
}

    .home-section-heading.in-view[b-cosh8q0xf7] {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.2s;
    }

.home-section-title[b-cosh8q0xf7] {
    color: var(--mud-palette-text-primary);
    font-size: 30px;
    font-weight: 700;
    line-height: 28px;
    animation: titlePopIn-b-cosh8q0xf7 0.8s ease-out forwards;
    opacity: 0;
    justify-self: center;
    margin: auto;
    margin-bottom: 4rem;
}

    .home-section-title.in-view[b-cosh8q0xf7] {
        animation-delay: 0.6s;
    }

@keyframes titlePopIn-b-cosh8q0xf7 {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    60% {
        opacity: 1;
        transform: scale(1.05);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ==========================================================================
   7. OUR STRENGTHS INTRO & CARDS
   ========================================================================== */
.home-strengths-intro[b-cosh8q0xf7] {
    align-self: stretch;
    padding: 40px 16px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

    .home-strengths-intro.in-view[b-cosh8q0xf7] {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.2s;
    }

.home-strengths-intro-title[b-cosh8q0xf7] {
    color: var(--mud-palette-text-primary);
    font-size: 36px;
    font-weight: 900;
    line-height: 45px;
    margin-bottom: 4rem;
}

.home-strengths-intro-text[b-cosh8q0xf7] {
    color: var(--mud-palette-text-secondary);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.home-strengths-cards-section[b-cosh8q0xf7] {
    align-self: stretch;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
}

.home-strengths-cards[b-cosh8q0xf7] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem; /* regola lo spazio tra le card */
    justify-items: center; /* opzionale: centra le card nelle celle */
    margin: 0 auto; /* opzionale: centra la griglia nel genitore */
}

.home-strengths-card[b-cosh8q0xf7] {
    padding: 16px;
    background: var(--mud-palette-surface);
    border-radius: 8px;
    outline: 1px solid var(--mud-palette-divider);
    outline-offset: -1px;
    display: inline-flex;
    flex-direction: column;
    gap: 12px;
    min-height: 10rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

    .home-strengths-card.in-view[b-cosh8q0xf7] {
        opacity: 1;
        transform: translateY(0);
    }

    .home-strengths-card:nth-child(1).in-view[b-cosh8q0xf7] {
        transition-delay: 0.2s;
    }

    .home-strengths-card:nth-child(2).in-view[b-cosh8q0xf7] {
        transition-delay: 0.4s;
    }

    .home-strengths-card:nth-child(3).in-view[b-cosh8q0xf7] {
        transition-delay: 0.6s;
    }


/* ==========================================================================
   8. CASE STUDIES
   ========================================================================== */
.home-case-items[b-cosh8q0xf7] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem; /* spazio tra le card */
    margin: 0 auto; /* opzionale: centra la griglia */
    padding: 16px; /* mantieni il padding originale */
}

.home-case-item[b-cosh8q0xf7] {
    flex: 1 1 0;
    min-width: 240px;
    border-radius: 8px;
    display: inline-flex;
    flex-direction: column;
    gap: 16px;
    background: var(--mud-palette-surface);
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

    .home-case-item.in-view[b-cosh8q0xf7] {
        opacity: 1;
        transform: scale(1);
    }

    .home-case-item:nth-child(1).in-view[b-cosh8q0xf7] {
        transition-delay: 0.2s;
    }

    .home-case-item:nth-child(2).in-view[b-cosh8q0xf7] {
        transition-delay: 0.4s;
    }

    .home-case-item:nth-child(3).in-view[b-cosh8q0xf7] {
        transition-delay: 0.6s;
    }

    .home-case-item:nth-child(4).in-view[b-cosh8q0xf7] {
        transition-delay: 0.8s;
    }



.home-case-item-img[b-cosh8q0xf7] {
    width: 100%;
    height: 135px;
    border-radius: 12px;
    object-fit: cover;
    animation: imgPulse-b-cosh8q0xf7 8s infinite ease-in-out alternate;
}

@keyframes imgPulse-b-cosh8q0xf7 {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.03);
    }
}

.home-case-item-title[b-cosh8q0xf7] {
    color: var(--mud-palette-text-primary);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    padding: 10px;
}

.home-case-item-desc[b-cosh8q0xf7] {
    color: var(--mud-palette-text-secondary);
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    padding: 10px;
}

@media (max-width: 768px) {
    .home-case-items[b-cosh8q0xf7] {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   9. PRODUCT SHOWCASE
   ========================================================================== */
.home-product-items[b-cosh8q0xf7] {
    padding: 16px;
    display: inline-flex;
    gap: 40px;
    flex-wrap: wrap;
}

.home-product-item[b-cosh8q0xf7] {
    width: 458px;
    display: inline-flex;
    flex-direction: column;
    gap: 12px;
    background: var(--mud-palette-surface);
    border-radius: 8px;
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

    .home-product-item.in-view[b-cosh8q0xf7] {
        opacity: 1;
        transform: translateX(0);
    }

    .home-product-item:nth-child(1).in-view[b-cosh8q0xf7] {
        transition-delay: 0.2s;
    }

    .home-product-item:nth-child(2).in-view[b-cosh8q0xf7] {
        transition-delay: 0.4s;
    }



.home-product-img[b-cosh8q0xf7] {
    width: 100%;
    height: 458px;
    border-radius: 12px;
    object-fit: cover;
    animation: imgZoom-b-cosh8q0xf7 15s ease-in-out infinite alternate;
}

@keyframes imgZoom-b-cosh8q0xf7 {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.05);
    }
}

.home-product-name[b-cosh8q0xf7] {
    color: var(--mud-palette-text-primary);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}

.home-product-desc[b-cosh8q0xf7] {
    color: var(--mud-palette-text-secondary);
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
}

/* ==========================================================================
   10. VIDEO SECTION
   ========================================================================== */
.home-video-section[b-cosh8q0xf7] {
    padding: 16px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

    .home-video-section.in-view[b-cosh8q0xf7] {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.2s;
    }

.home-video-container[b-cosh8q0xf7] {
    position: relative;
    height: 522px;
    background: var(--mud-palette-text-primary) url('/images/Home/home.videoPoster.webp') no-repeat center/cover;
    border-radius: 12px;
    overflow: hidden;
    animation: videoPan-b-cosh8q0xf7 20s linear infinite alternate;
}

.home-video-player[b-cosh8q0xf7] {
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.home-video-player[b-cosh8q0xf7] {
    display: block; /* rende il video un block-level element */
    max-width: 70%; /* o la larghezza che preferisci */
    width: 100%;
    height: auto;
    object-fit: cover;
    margin: 0 auto; /* centrazione orizzontale */
}

@keyframes videoPan-b-cosh8q0xf7 {
    from {
        background-position: center top;
    }

    to {
        background-position: center bottom;
    }
}

.home-video-play-btn[b-cosh8q0xf7] {
    position: absolute;
    width: 64px;
    height: 64px;
    background: rgba(0,0,0,0.40);
    border-radius: 32px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: playPulse-b-cosh8q0xf7 2s infinite;
}

@keyframes playPulse-b-cosh8q0xf7 {
    0%,100% {
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.1);
    }
}

/* ==========================================================================
   11. CALL TO ACTION
   ========================================================================== */
.home-cta-section[b-cosh8q0xf7] {
    padding: 80px 40px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

    .home-cta-section.in-view[b-cosh8q0xf7] {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.2s;
    }

.home-cta-title[b-cosh8q0xf7] {
    color: var(--mud-palette-text-primary);
    font-size: 36px;
    font-weight: 900;
    line-height: 45px;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

    .home-cta-title.in-view[b-cosh8q0xf7] {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.4s;
    }

.home-cta-button-container[b-cosh8q0xf7] {
    display: inline-flex;
    justify-content: center;
    cursor: pointer;
    animation: buttonPulse-b-cosh8q0xf7 2s ease-in-out infinite alternate;
}

.home-video-section h2[b-cosh8q0xf7] {
    margin-top: 20px;
}

.home-cta-button[b-cosh8q0xf7] {
    height: 48px;
    padding: 0 20px;
    background: var(--mud-palette-secondary);
    border-radius: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--mud-palette-surface);
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    transform: scale(0.95);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .home-cta-button:hover[b-cosh8q0xf7] {
        transform: scale(1.05);
        box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    }

/* ==========================================================================
   12. OUR TEAM
   ========================================================================== */
.home-team-members[b-cosh8q0xf7] {
    padding: 16px;
    display: flex;
    flex-wrap: wrap; /* wrap su più righe */
    justify-content: center; /* centra ogni riga di card */
    gap: 12px; /* spazio orizzontale e verticale */
    /*    max-width: 1000px;*/
    margin: auto;
    justify-content: center;
    justify-items: center;
}

.home-team-member[b-cosh8q0xf7] {
    flex: 0 0 223px; /* larghezza fissa, poi wrappa */
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* animazione di ingresso */
    opacity: 0;
    transform: translateY(20px) rotate(-5deg);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}



    .home-team-member.in-view[b-cosh8q0xf7] {
        opacity: 1;
        transform: translateY(0) rotate(0);
    }

    .home-team-member:nth-child(1).in-view[b-cosh8q0xf7] {
        transition-delay: 0.2s;
    }

    .home-team-member:nth-child(2).in-view[b-cosh8q0xf7] {
        transition-delay: 0.4s;
    }

    .home-team-member:nth-child(3).in-view[b-cosh8q0xf7] {
        transition-delay: 0.6s;
    }

    .home-team-member:nth-child(4).in-view[b-cosh8q0xf7] {
        transition-delay: 0.8s;
    }

    .home-team-member:nth-child(5).in-view[b-cosh8q0xf7] {
        transition-delay: 1.0s;
    }


.home-team-photo[b-cosh8q0xf7] {
    width: 191px;
    height: 191px;
    border-radius: 95.5px;
    object-fit: cover;
}

.home-team-name[b-cosh8q0xf7] {
    color: var(--mud-palette-text-primary);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
}

.home-team-role[b-cosh8q0xf7] {
    font-weight: 800 !important;
    margin-bottom: 10px;
    margin-top: 5px;
}

.home-team-role[b-cosh8q0xf7],
.home-team-bio[b-cosh8q0xf7] {
    color: var(--mud-palette-text-secondary);
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    text-align: center;
}

/* ==========================================================================
   13. FAQ
   ========================================================================== */
.home-faq-items[b-cosh8q0xf7] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.home-faq-item[b-cosh8q0xf7] {
    padding: 7px 15px;
    background: var(--mud-palette-surface);
    border-radius: 12px;
    outline: 1px solid var(--mud-palette-divider);
    outline-offset: -1px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

    .home-faq-item.in-view[b-cosh8q0xf7] {
        opacity: 1;
        transform: translateX(0);
    }

    .home-faq-item:nth-child(1).in-view[b-cosh8q0xf7] {
        transition-delay: 0.2s;
    }

    .home-faq-item:nth-child(2).in-view[b-cosh8q0xf7] {
        transition-delay: 0.4s;
    }

    .home-faq-item:nth-child(3).in-view[b-cosh8q0xf7] {
        transition-delay: 0.6s;
    }

.home-faq-question[b-cosh8q0xf7] {
    color: var(--mud-palette-text-primary);
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
}

/* ==========================================================================
   14. FLUIDITÀ GENERALE & MEDIA QUERIES
   ========================================================================== */
.home-main[b-cosh8q0xf7] {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.home-content-padding[b-cosh8q0xf7] {
    padding: 20px 5%;
}

.home-strengths-cards[b-cosh8q0xf7],
.home-case-items[b-cosh8q0xf7],
.home-product-items[b-cosh8q0xf7],
.home-team-members[b-cosh8q0xf7] {
    flex-wrap: wrap;
    justify-content: center;
}

.home-strengths-card[b-cosh8q0xf7],
.home-case-item[b-cosh8q0xf7],
.home-product-item[b-cosh8q0xf7],
.home-team-member[b-cosh8q0xf7] {
    flex: 1 1 250px;
    max-width: 100%;
    align-items: center;
}

.home-banner[b-cosh8q0xf7] {
    width: 100%;
    aspect-ratio: 16 / 9;
}

.home-video-play-btn[b-cosh8q0xf7] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media (max-width: 1200px) {
    .home-content-padding[b-cosh8q0xf7] {
        padding: 20px 40px;
    }

    .home-banner-largetext-container[b-cosh8q0xf7] {
        top: 30px;
    }

    .home-banner-smalltext-container[b-cosh8q0xf7] {
        top: 267px;
    }
}

@media (max-width: 992px) {
    .home-content-padding[b-cosh8q0xf7] {
        padding: 20px 20px;
    }
}

@media (max-width: 768px) {
    .home-content-padding[b-cosh8q0xf7] {
        padding: 20px;
    }

    .home-strengths-cards[b-cosh8q0xf7] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .home-main[b-cosh8q0xf7] {
        max-width: 95%;
    }
}

/* ==========================================================================
   15. FEATURED SOLUTION
   ========================================================================== */
.featured-section[b-cosh8q0xf7] {
    background-color: var(--mud-palette-background);
    padding: 5rem 1.5rem;
}

.featured-container[b-cosh8q0xf7] {
    max-width: 80rem;
    margin: 0 auto;
}

.featured-heading[b-cosh8q0xf7] {
    text-align: center;
    margin-bottom: 4rem;
    opacity: 0;
    transform: translateY(20px);
}

    .featured-heading.in-view[b-cosh8q0xf7] {
        animation: fadeInUp-b-cosh8q0xf7 0.6s ease-out forwards;
    }

.featured-title[b-cosh8q0xf7] {
    margin-bottom: 1rem;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.featured-subtitle[b-cosh8q0xf7] {
    color: var(--mud-palette-text-secondary);
    font-size: 1rem;
    line-height: 1.5rem;
}

.featured-card[b-cosh8q0xf7] {
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 1rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    padding: 3rem;
    opacity: 0;
    transform: translateY(40px);
}

    .featured-card.in-view[b-cosh8q0xf7] {
        animation: slideInUp-b-cosh8q0xf7 0.7s ease-out forwards;
    }

.featured-grid[b-cosh8q0xf7] {
    display: grid;
    gap: 3rem;
}

@media (min-width: 768px) {
    .featured-grid[b-cosh8q0xf7] {
        grid-template-columns: repeat(2,1fr);
    }
}

@media (max-width: 767px) {
    .featured-grid[b-cosh8q0xf7] {
        grid-template-columns: 1fr;
    }
}

.featured-col-left[b-cosh8q0xf7] {
    display: flex;
    flex-direction: column;
}

.featured-icon-title[b-cosh8q0xf7] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.featured-icon-box[b-cosh8q0xf7] {
    width: 4rem;
    height: 4rem;
    background: linear-gradient(175deg, var(--mud-palette-primary), var(--mud-palette-secondary));
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--mud-palette-surface);
}

.featured-product-name[b-cosh8q0xf7] {
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    margin: 0;
}

.featured-description[b-cosh8q0xf7] {
    color: var(--mud-palette-text-secondary);
    font-size: 1.125rem;
    line-height: 1.75rem;
    margin-bottom: 1.5rem;
}

.featured-list[b-cosh8q0xf7] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.featured-list-item[b-cosh8q0xf7] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    color: var(--mud-palette-text-primary);
    margin-bottom: 1em;
}

.featured-icon[b-cosh8q0xf7] {
    display: inline-flex;
    width: 1.5em;
    height: 1.5em;
    font-size: 1.5em;
    margin-right: 0.5em;
    color: var(--mud-palette-secondary);
}

.featured-check-icon[b-cosh8q0xf7] {
    width: 1.25rem;
    height: 1.25rem;
    background-color: #22c55e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-surface);
    font-size: 0.75rem;
    line-height: 1rem;
}

.featured-button-container[b-cosh8q0xf7] {
    margin-top: 1rem;
}

.featured-button[b-cosh8q0xf7] {
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-surface);
    padding: 1rem 2rem;
    border: none;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

    .featured-button:hover[b-cosh8q0xf7] {
        background-color: rgba(0,0,0,0.9);
        transform: scale(1.03);
        box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    }

.featured-col-right[b-cosh8q0xf7] {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.featured-gradient-box[b-cosh8q0xf7] {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(237,229,254,1) 0%, rgba(224,231,255,1) 100%);
    border-radius: 1rem;
}

.featured-image[b-cosh8q0xf7] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


.featured-bar-chart[b-cosh8q0xf7] {
    font-size: 3rem;
    animation: float-b-cosh8q0xf7 6s ease-in-out infinite;
}

.featured-floating-circle[b-cosh8q0xf7] {
    position: absolute;
    top: -1rem;
    right: -1rem;
    width: 6rem;
    height: 6rem;
    background: linear-gradient(175deg, var(--mud-palette-primary), var(--mud-palette-secondary));
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--mud-palette-surface);
    font-size: 1.5rem;
    animation: float-b-cosh8q0xf7 6s ease-in-out infinite 1s;
}

@keyframes fadeInUp-b-cosh8q0xf7 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInUp-b-cosh8q0xf7 {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float-b-cosh8q0xf7 {
    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}
/* Keyframes per il bounce hover */
@keyframes hoverBounce-b-cosh8q0xf7 {
    0%, 100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-10px) scale(1.05);
    }
}

/* Applichiamo il bounce a strengths, case e product */
.home-strengths-card:hover[b-cosh8q0xf7],
.home-case-item:hover[b-cosh8q0xf7],
.home-product-item:hover[b-cosh8q0xf7] {
    animation: hoverBounce-b-cosh8q0xf7 0.5s ease-out forwards;
    box-shadow: 0 12px 24px rgba(0,0,0,0.18);
}

/* Assicuriamoci che l’elemento sappia subire animazioni di transform */
.home-strengths-card[b-cosh8q0xf7],
.home-case-item[b-cosh8q0xf7],
.home-product-item[b-cosh8q0xf7] {
    will-change: transform, box-shadow;
}


/* FAQ cards */
.faq-card[b-cosh8q0xf7] {
    border: 1px solid var(--mud-palette-divider);
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: box-shadow 0.2s, border-color 0.2s;
}

    .faq-card:hover[b-cosh8q0xf7] {
        box-shadow: 0 4px 12px rgba(0,0,0,0.10);
        border-color: var(--mud-palette-primary);
    }

/* Header row */
.faq-header[b-cosh8q0xf7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: var(--mud-palette-surface);
    cursor: pointer;
}

.faq-question[b-cosh8q0xf7] {
    font-weight: 600;
    font-size: 1rem;
}

.faq-icon[b-cosh8q0xf7] {
    font-size: 1.25rem;
    transition: transform 0.3s;
}

.faq-card[aria-expanded="true"] .faq-icon[b-cosh8q0xf7] {
    transform: rotate(180deg);
}

/* Collapsible content */
.faq-content[b-cosh8q0xf7] {
    max-height: 0;
    overflow: hidden;
    padding: 0 16px;
    background: var(--mud-palette-background);
    transition: max-height 0.4s ease, padding 0.4s ease;
    color: var(--mud-palette-text-secondary);
    line-height: 1.6;
}

.faq-card[aria-expanded="true"] .faq-content[b-cosh8q0xf7] {
    /* regola max-height in base al contenuto, o usa un valore alto */
    max-height: 500px;
    padding: 12px 16px 16px;
}

.faq-content.expanded[b-cosh8q0xf7] {
    max-height: 500px; /* regola in base al contenuto reale */
    padding: 12px 16px 16px;
}
/* Our Clients Section */
.clients-section[b-cosh8q0xf7] {
    padding: 60px 20px;
    background: var(--mud-palette-background);
}

.clients-container[b-cosh8q0xf7] {
    width: 90%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}


.clients-header[b-cosh8q0xf7] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    text-align: center;
}

    .clients-header.in-view[b-cosh8q0xf7] {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.2s;
    }

.clients-subtitle[b-cosh8q0xf7] {
    color: var(--mud-palette-text-secondary);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    max-width: 600px;
    margin-top: 0.5rem;
}

.clients-logos[b-cosh8q0xf7] {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.5rem;
    justify-content: center;
    justify-items: center;
    align-items: center;
    padding: 2rem 0;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

    .clients-logos.in-view[b-cosh8q0xf7] {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.4s;
    }

.client-item[b-cosh8q0xf7] {
    display: flex; /* per centrare il <img> al centro */
    justify-content: center;
    align-items: center;
    padding: 1rem;
    background: var(--mud-palette-surface);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.client-logo[b-cosh8q0xf7] {
    max-width: 100%;
    max-height: 100px;
    object-fit: contain;
}

@media (max-width: 768px) {
    .clients-container[b-cosh8q0xf7] {
        max-width: 95%;
    }

    .clients-logos[b-cosh8q0xf7] {
        gap: 16px;
    }

    .client-logo[b-cosh8q0xf7] {
        max-height: 60px;
    }
}

section[id][b-cosh8q0xf7] {
    scroll-margin-top: 150px;
}

.pagina-section-title[b-cosh8q0xf7] {
    color: var(--mud-palette-text-primary);
    font-size: 40px;
    font-weight: 700;
    line-height: 28px;
    margin-bottom: 50px;
    justify-self: center;
}


/* ========================================================================== 
   Brochure Section 
   ========================================================================== */

/* Sezione brochure – centro orizzontale e padding */
.brochure-section[b-cosh8q0xf7] {
    padding: 2rem 1rem;
    display: flex;
    justify-content: center;
    background: var(--mud-palette-background);
}

/* Card container */
.brochure-card[b-cosh8q0xf7] {
    background: var(--mud-palette-surface);
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    max-width: 700px;
    width: 100%;
    padding: 1.5rem;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    /* Hover effect */
    .brochure-card:hover[b-cosh8q0xf7] {
        transform: translateY(-4px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

.brochure-card[b-cosh8q0xf7] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

    /* Quando JS aggiunge .in-view: fade in & slide up */
    .brochure-card.in-view[b-cosh8q0xf7] {
        opacity: 1;
        transform: translateY(0);
        /* opzionale: ritardo per avere un effetto “stagger” */
        transition-delay: 0.3s;
    }
/* Titolo */
.brochure-title[b-cosh8q0xf7] {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--mud-palette-text-primary);
}

/* Paragrafo descrizione */
.brochure-text[b-cosh8q0xf7] {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 1.25rem;
    color: var(--mud-palette-text-secondary);
}

/* Bottone */
.brochure-button[b-cosh8q0xf7] {
    display: inline-block;
    padding: 0.65rem 1.25rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--mud-palette-surface);
    background: var(--mud-palette-primary);
    border-radius: 0.375rem;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

    /* Hover sul bottone */
    .brochure-button:hover[b-cosh8q0xf7],
    .brochure-button:focus[b-cosh8q0xf7] {
        background: var(--mud-palette-secondary);
        outline: none;
    }

/* Responsive: riduci padding su mobile */
@media (max-width: 480px) {
    .brochure-section[b-cosh8q0xf7] {
        padding: 1.5rem 0.5rem;
    }

    .brochure-card[b-cosh8q0xf7] {
        padding: 1rem;
    }

    .brochure-title[b-cosh8q0xf7] {
        font-size: 1.25rem;
    }

    .brochure-text[b-cosh8q0xf7] {
        font-size: 0.95rem;
    }

    .brochure-button[b-cosh8q0xf7] {
        width: 100%;
        padding: 0.75rem;
    }
}
/* Preview image wrapper */
.brochure-preview[b-cosh8q0xf7] {
    margin-bottom: 1rem;
    overflow: hidden;
    border-radius: 0.5rem;
}

/* L’immagine di anteprima dentro la card */
.brochure-preview-img[b-cosh8q0xf7] {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 0.5rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    transition: transform 0.3s ease;
}

    /* Piccola animazione al passaggio */
    .brochure-preview-img:hover[b-cosh8q0xf7] {
        transform: scale(1.02);
    }

.scroll-top-btn[b-cosh8q0xf7] {
    display: none; /* di default nascosto */
    position: fixed; /* rimane fisso in viewport */
    bottom: 20px; /* distanza da fondo */
    right: 20px; /* distanza da destra */
    width: 45px;
    height: 45px;
    border: none;
    border-radius: 50%;
    background-color: var(--mud-palette-primary);
    color: white;
    font-size: 24px;
    line-height: 45px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    z-index: 2000;
    transition: opacity 0.3s ease;
}

    .scroll-top-btn:hover[b-cosh8q0xf7] {
        opacity: 0.8;
    }

/* _content/BlazorSSRPortal/Pages/UserPage/MainSite/NewsPage.razor.rz.scp.css */
.not-found-page[b-o5f1vyruqz] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 65vh;
    background-color: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    text-align: center;
    padding: 20px;
}

.not-found-content[b-o5f1vyruqz] {
    max-width: 600px;
    border: 2px solid var(--mud-palette-secondary);
    border-radius: 10px;
    padding: 40px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .not-found-content:hover[b-o5f1vyruqz] {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    }

    .not-found-content h1[b-o5f1vyruqz] {
        font-size: 5rem;
        margin: 0;
        color: var(--mud-palette-text-primary);
    }

    .not-found-content p[b-o5f1vyruqz] {
        margin: 20px 0;
        font-size: 1.2rem;
        color: var(--mud-palette-text-primary);
    }

.home-link[b-o5f1vyruqz] {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    color: var(--mud-palette-text-secondary);
    background-color: var(--mud-palette-secondary);
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

    .home-link:hover[b-o5f1vyruqz] {
        background-color: var(--mud-palette-secondary);
        transform: translateY(-3px);
    }
/* _content/BlazorSSRPortal/Shared/Components/Common/LoadingIndicator.razor.rz.scp.css */
.loading-dots-container[b-152i0koorb] {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--mud-palette-background); /* MudBlazor Background Color */
    z-index: 1000;
}

.loading-dots[b-152i0koorb] {
    display: flex;
    gap: 50px; /* Increased gap for a more dynamic effect */
}

    .loading-dots .dot[b-152i0koorb] {
        width: 30px;
        height: 30px;
        background-color: var(--mud-palette-primary); /* MudBlazor Primary Color */
        border-radius: 50%;
        animation: loadingDots-b-152i0koorb 1.2s infinite cubic-bezier(0.5, 0, 0.5, 1), dotShadow-b-152i0koorb 1.2s infinite cubic-bezier(0.5, 0, 0.5, 1); /* Smooth movement and shadow animation */
    }

        .loading-dots .dot:nth-child(1)[b-152i0koorb] {
            animation-delay: 0s, 0s;
        }

        .loading-dots .dot:nth-child(2)[b-152i0koorb] {
            animation-delay: 0.3s, 0.3s;
        }

        .loading-dots .dot:nth-child(3)[b-152i0koorb] {
            animation-delay: 0.6s, 0.6s;
        }

@keyframes loadingDots-b-152i0koorb {
    0%, 60%, 100% {
        transform: translateY(0) scale(0.8); /* Start and end: base position and smaller scale */
        opacity: 0.5;
    }

    30% {
        transform: translateY(-15px) scale(1.1); /* Middle: raised position and larger scale */
        opacity: 1; /* Higher opacity */
    }
}

@keyframes dotShadow-b-152i0koorb {
    0%, 60%, 100% {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Smaller shadow */
    }

    30% {
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* Larger shadow when the dot rises */
    }
}
/* _content/BlazorSSRPortal/Shared/Components/MainSite/CookieConsentBanner.razor.rz.scp.css */
/* ==========================================================================
   1. BANNER: LAYOUT PRINCIPALE
   ========================================================================== */
.cookie-banner[b-6cjvhgrmp4] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.85);
    color: var(--mud-palette-surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    z-index: 1000;
    font-family: inherit;
}

    /* ==========================================================================
   2. BANNER: TESTO E PADDING
   ========================================================================== */
    .cookie-banner p[b-6cjvhgrmp4] {
        margin: 0 0 1rem;
        text-align: center;
        font-size: 0.95rem;
        color: var(--mud-palette-surface);
    }

/* ==========================================================================
   3. BANNER: CONTENITORE BOTTONI
   ========================================================================== */
.cookie-buttons[b-6cjvhgrmp4] {
    display: flex;
    gap: 0.5rem;
}

/* ==========================================================================
   4. BANNER: STILE GENERICO DEI BOTTONI
   ========================================================================== */
.cookie-btn[b-6cjvhgrmp4] {
    padding: 0.6rem 1.25rem;
    font-size: 0.9rem;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s ease-out, transform 0.2s ease-out;
}

    /* ==========================================================================
   5. BANNER: VARIANTI ACCEPT / REJECT / CUSTOMIZE
   ========================================================================== */
    .cookie-btn.accept[b-6cjvhgrmp4] {
        background: var(--mud-palette-primary);
        color: var(--mud-palette-surface);
    }

        .cookie-btn.accept:hover[b-6cjvhgrmp4] {
            background: #357ab8; /* scuro su hover */
        }

    .cookie-btn.reject[b-6cjvhgrmp4] {
        background: #f44336;
        color: var(--mud-palette-surface);
    }

        .cookie-btn.reject:hover[b-6cjvhgrmp4] {
            background: #d32f2f;
        }

    .cookie-btn.customize[b-6cjvhgrmp4] {
        background: transparent;
        border: 1px solid var(--mud-palette-surface);
        color: var(--mud-palette-surface);
    }

        .cookie-btn.customize:hover[b-6cjvhgrmp4] {
            background: var(--mud-palette-surface);
            color: var(--mud-palette-text-primary);
        }

/* ==========================================================================
   6. OPTIONAL: PANNELLO IMPOSTAZIONI (riutilizzo .cookie-settings se serve)
   ========================================================================== */
.cookie-settings[b-6cjvhgrmp4] {
    position: fixed;
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    padding: 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    display: none; /* toggle via JS */
    z-index: 10001;
    max-width: 400px;
    width: 90%;
}

    .cookie-settings h3[b-6cjvhgrmp4] {
        margin-top: 0;
        margin-bottom: 1rem;
        font-size: 1.25rem;
    }

/* ==========================================================================
   7. OPTIONAL: TOGGLE SWITCH NEL PANNELLO IMPOSTAZIONI
   ========================================================================== */
.cookie-settings-toggle[b-6cjvhgrmp4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0.5rem 0;
}

/* ==========================================================================
   8. RESPONSIVE: MOBILE (<480px)
   ========================================================================== */
@media (max-width: 480px) {
    .cookie-banner[b-6cjvhgrmp4] {
        padding: 0.75rem;
    }

    .cookie-buttons[b-6cjvhgrmp4] {
        flex-direction: column;
        width: 100%;
    }

    .cookie-btn[b-6cjvhgrmp4] {
        width: 100%;
        text-align: center;
    }
}
/* _content/BlazorSSRPortal/Shared/Components/MainSite/CookieSettingsPanel.razor.rz.scp.css */
/* ==========================================================================
   1. PANCHINA: LAYOUT PANEL (fixed, centering)
   ========================================================================== */
.cookie-settings-panel[b-2uap80msgy] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

/* ==========================================================================
   2. SFOGO: BACKDROP OSCURO
   ========================================================================== */
.panel-backdrop[b-2uap80msgy] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   3. CONTENUTO: CARD PRINCIPALE
   ========================================================================== */
.panel-content[b-2uap80msgy] {
    position: relative;
    background: var(--mud-palette-surface);
    padding: 2rem 1rem;
    max-width: 400px;
    width: 90%;
    border-radius: 0.75rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    color: var(--mud-palette-text-primary);
    animation: panelFadeIn-b-2uap80msgy 0.3s ease-out forwards;
    opacity: 0;
    transform: translateY(-10px);
}

@keyframes panelFadeIn-b-2uap80msgy {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   4. HEADER: TITOLO E CLOSE BUTTON
   ========================================================================== */
.panel-content .close-btn[b-2uap80msgy] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: none;
    font-size: 1.25rem;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    transition: color 0.2s ease-out;
}

    .panel-content .close-btn:hover[b-2uap80msgy] {
        color: var(--mud-palette-text-primary);
    }

.panel-content h3[b-2uap80msgy] {
    margin: 0 0 0.5rem;
    font-size: 1.5rem;
    font-weight: 600;
}

/* ==========================================================================
   5. DESCRIZIONE
   ========================================================================== */
.panel-content .panel-desc[b-2uap80msgy] {
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
    color: var(--mud-palette-text-secondary);
}

/* ==========================================================================
   6. SETTING ITEM: SWITCH + LABEL
   ========================================================================== */
.setting-item[b-2uap80msgy] {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.setting-label[b-2uap80msgy] {
    font-size: 1rem;
    margin-left: 0.75rem;
    color: var(--mud-palette-text-primary);
}

/* switch styling */
.switch[b-2uap80msgy] {
    position: relative;
    width: 46px;
    height: 24px;
}

    .switch input[b-2uap80msgy] {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider[b-2uap80msgy] {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #CCC;
    border-radius: 34px;
    transition: background-color 0.2s ease-out;
}

    .slider[b-2uap80msgy]::before {
        content: "";
        position: absolute;
        width: 20px;
        height: 20px;
        left: 2px;
        bottom: 2px;
        background: var(--mud-palette-surface);
        border-radius: 50%;
        transition: transform 0.2s ease-out;
    }

.switch input:checked + .slider[b-2uap80msgy] {
    background-color: var(--mud-palette-primary);
}

    .switch input:checked + .slider[b-2uap80msgy]::before {
        transform: translateX(22px);
    }

/* ==========================================================================
   7. AZIONI: BOTTONI SALVA / ANNULLA
   ========================================================================== */
.actions[b-2uap80msgy] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.btn[b-2uap80msgy] {
    padding: 0.6rem 1.2rem;
    font-size: 0.95rem;
    border: none;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: background-color 0.2s ease-out, box-shadow 0.2s ease-out;
}

.btn-primary[b-2uap80msgy] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-surface);
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

    .btn-primary:hover[b-2uap80msgy] {
        background: #357ab8; /* tonalità scura del primary */
    }

.btn-secondary[b-2uap80msgy] {
    background: var(--mud-palette-secondary);
    color: var(--mud-palette-surface);
}

    .btn-secondary:hover[b-2uap80msgy] {
        background: #888; /* tonalità scura del secondary */
    }

/* ==========================================================================
   8. RESPONSIVE (max-width: 480px)
   ========================================================================== */
@media (max-width: 480px) {
    .panel-content[b-2uap80msgy] {
        padding: 1.5rem 1rem;
    }

    .actions .btn[b-2uap80msgy] {
        flex: 1;
        text-align: center;
    }
}
/* _content/BlazorSSRPortal/Shared/Components/PrivateArea/Table.razor.rz.scp.css */
.language-selector-container[b-qosd133g0q] {
    max-width: 300px;
    margin: 20px auto;
    text-align: left;
    color: white;
}

.custom-dropdown[b-qosd133g0q] {
    position: relative;
    display: inline-block;
    width: 100%;
}

.dropdown-toggle[b-qosd133g0q] {
    border: none;
    border-radius: 50px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    color: var(--mud-palette-text-primary);
    box-sizing: border-box;
}

.dropdown-menu[b-qosd133g0q] {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--mud-palette-background);
    border-radius: 8px;
    margin: 0;
    z-index: 1000;
    list-style-type: none;
    display: none;
    transition: all 0.3s ease;
    width: 100%;
    box-sizing: border-box;
}

.custom-dropdown:hover .dropdown-menu[b-qosd133g0q] {
    display: block;
}

.dropdown-item[b-qosd133g0q] {
    padding: 10px 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    transition: background-color 0.3s ease;
    color: var(--mud-palette-text-primary);
    width: 100%;
    box-sizing: border-box;
}

    .dropdown-item:hover[b-qosd133g0q] {
        background-color: gray;
    }

.flag-icon[b-qosd133g0q] {
    width: 35px;
    height: 26.25px;
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle;
}
/* _content/BlazorSSRPortal/Shared/Layouts/MainLayout.razor.rz.scp.css */
.page[b-u0rni84yml] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-u0rni84yml] {
    flex: 1;
}

.sidebar[b-u0rni84yml] {
/*    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);*/
}

.top-row[b-u0rni84yml] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-u0rni84yml]  a, .top-row .btn-link[b-u0rni84yml] {
        white-space: nowrap;
        margin-left: 1.5rem;
    }

    .top-row a:first-child[b-u0rni84yml] {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row:not(.auth)[b-u0rni84yml] {
        display: none;
    }

    .top-row.auth[b-u0rni84yml] {
        justify-content: space-between;
    }

    .top-row a[b-u0rni84yml], .top-row .btn-link[b-u0rni84yml] {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-u0rni84yml] {
        flex-direction: row;
    }

    .sidebar[b-u0rni84yml] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-u0rni84yml] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row[b-u0rni84yml], article[b-u0rni84yml] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* _content/BlazorSSRPortal/Shared/Layouts/NotFoundPage.razor.rz.scp.css */
.not-found-page[b-nyve9zqfv6] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 65vh;
    background-color: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    text-align: center;
    padding: 20px;
}

.not-found-content[b-nyve9zqfv6] {
    max-width: 600px;
    border: 2px solid var(--mud-palette-secondary);
    border-radius: 10px;
    padding: 40px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .not-found-content:hover[b-nyve9zqfv6] {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    }

    .not-found-content h1[b-nyve9zqfv6] {
        font-size: 5rem;
        margin: 0;
        color: var(--mud-palette-text-primary);
    }

    .not-found-content p[b-nyve9zqfv6] {
        margin: 20px 0;
        font-size: 1.2rem;
        color: var(--mud-palette-text-primary);
    }

.home-link[b-nyve9zqfv6] {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    color: var(--mud-palette-text-secondary);
    background-color: var(--mud-palette-secondary);
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

    .home-link:hover[b-nyve9zqfv6] {
        background-color: var(--mud-palette-secondary);
        transform: translateY(-3px);
    }
/* _content/BlazorSSRPortal/Shared/NavBar/LanguageSelector.razor.rz.scp.css */
.language-selector-container[b-nejkxbetr7] {
    max-width: 300px;
    margin: 20px auto;
    text-align: left;
    color: white;
}

.custom-dropdown[b-nejkxbetr7] {
    position: relative;
    display: inline-block;
    width: 100%;
}

.dropdown-toggle[b-nejkxbetr7] {
    border: none;
    border-radius: 50px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    color: var(--mud-palette-text-primary);
    box-sizing: border-box;
}

.dropdown-menu[b-nejkxbetr7] {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--mud-palette-background);
    border-radius: 8px;
    margin: 0;
    z-index: 1000;
    list-style-type: none;
    display: none;
    transition: all 0.3s ease;
    width: 100%;
    box-sizing: border-box;
}

.custom-dropdown:hover .dropdown-menu[b-nejkxbetr7] {
    display: block;
}

.dropdown-item[b-nejkxbetr7] {
    padding: 10px 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    transition: background-color 0.3s ease;
    color: var(--mud-palette-text-primary);
    width: 100%;
    box-sizing: border-box;
}

    .dropdown-item:hover[b-nejkxbetr7] {
        background-color: gray;
    }

.flag-icon[b-nejkxbetr7] {
    width: 35px;
    height: 26.25px;
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle;
}