/* ==========================================================================

    STILI RESPONSIVE UNIFICATI

    ========================================================================== */



/* --- 1. Stili di Base per Desktop (> 768px) --- */

.menu-toggle {

     display: none;

}



/* ==========================================================================

    1. RESPONSIVE HOMEPAGE (page-index)

    ========================================================================== */

@media (max-width: 992px) {



/* ==========================================================================

   1. RESPONSIVE HOMEPAGE (page-index)

   ========================================================================== */

@media (max-width: 992px) {

   

    /* ===== FIX DEFINITIVO E FUNZIONANTE ===== */



    /* 1. Usa l'altezza corretta (questa parte è corretta) */

    .intro-screen, .hero-section.interactive-hero {

       height: 100svh;

       min-height: 100svh;

    }

    

    .hero-section {

    	height: 100svh;

    }



    /* 2. Usa Flexbox per centrare (questa parte è corretta) */

    .hero-section.interactive-hero {

       padding-top: 0;

       padding-bottom: 0;

       display: flex;

       align-items: center;

       justify-content: center;

    }



    /* 3. MODIFICA CHIAVE: Rendi il contenuto più compatto e spostalo in alto */

    .hero-content-container {

        padding: 1rem !important;

        margin-top: 0svh !important; /* Sposta il blocco verso l'alto del 15% dell'altezza dello schermo */

    }

    

    .hero-title-redesigned {

        font-size: 2.5rem !important; /* Riduciamo leggermente per guadagnare spazio */

        margin-bottom: 1rem !important;

    }

    

    .hero-subtitle {

        line-height: 1.4 !important;

        margin-bottom: 1.5rem !important;

    }

    

    /* ======================================================= */





   body {

        font-size: 0.95rem;

        cursor: auto !important;

   }

   .container {

        width: 90%;

        padding-left: 0;

        padding-right: 0;

   }

   

}







     body {

          font-size: 0.95rem;

          cursor: auto !important;

     }

     .container {

          width: 92%;

          padding-left: 0;

          padding-right: 0;

     }

     .custom-cursor-dot,

     .custom-cursor-outline {

          display: none !important;

     }

     .site-header {
          padding: calc(var(--spacing-unit) * 0.30) 0;
          padding-top: calc(var(--spacing-unit) * 0.30 + env(safe-area-inset-top, 0px));
          padding-top: calc(var(--spacing-unit) * 0.30 + constant(safe-area-inset-top, 0px)); /* legacy iOS */
     }

     .header-container {

          flex-wrap: nowrap;

          justify-content: space-between;

          align-items: center;

     }

     .logo .logo-image {

          max-height: 30px;

     }

     .lang-switcher {

          display: none;

     }

     .menu-toggle {
          display: block;
          order: 3;
          position: relative;
          z-index: 2102;
          width: 28px;
          height: 22px; /* area compatta per evitare salti */
     }

     /* Barre hamburger in posizione assoluta per evitare spostamenti durante la rotazione */
     .menu-toggle span {
          position: absolute;
          left: 0;
          width: 100%;
          height: 3px;
          margin: 0;
          border-radius: 2px;
          background-color: var(--color-text-primary);
          transition: transform .25s ease, opacity .2s ease, background-color .2s ease;
          transform-origin: center;
     }
     .menu-toggle span:nth-child(1) { top: 2px; }
     .menu-toggle span:nth-child(2) { top: 9.5px; }
     .menu-toggle span:nth-child(3) { top: 17px; }





     

     .site-header:not(.scrolled) .menu-toggle span {

          background-color: var(--color-background-main);

     }

     .main-navigation {

          display: flex;

          flex-direction: column;

          justify-content: center;

          align-items: flex-start;

          position: fixed;

          top: 0;

          right: 0;

          width: 61.5vw;

          max-width: 386px;

          height: 100vh;

          padding: 4rem 2rem;

          background-color: rgba(13, 17, 23, 0.8);

          backdrop-filter: blur(15px);

          -webkit-backdrop-filter: blur(15px);

          z-index: 2000; /* above header */

          opacity: 0;

          visibility: hidden;

          transform: translateX(100%);

          transition: all 0.6s cubic-bezier(0.86, 0, 0.07, 1);

     }

    .main-navigation.active {

          opacity: 1;

          visibility: visible;

          transform: translateX(0);

     }

     /* Prevent body from scrolling when menu is open */
     body.toggled { overflow: hidden; }

     /* Safety: show panel when body has toggled class (JS fallback) */
     body.toggled .main-navigation {
          opacity: 1 !important;
          visibility: visible !important;
          transform: translateX(0) !important;
     }

     .main-navigation ul {

          flex-direction: column;

          width: 100%;

          padding: 0;

          margin: 0;

          text-align: left;

     }

     .main-navigation ul li {

          opacity: 0;

          transform: translateX(40px);

          transition: transform 0.4s ease, opacity 0.4s ease;

     }

     .main-navigation.active ul li {

          opacity: 1;

          transform: translateX(0);

     }

     /* Fallback when only body.toggled is present */
     body.toggled .main-navigation ul li {
          opacity: 1 !important;
          transform: translateX(0) !important;
     }

     .main-navigation a {

          color: var(--color-background-main);

          font-size: clamp(1.2rem, 3.2vw, 1.8rem); /* FIX: scala bene anche >480px */

          font-weight: 600;

          display: block;

          padding: 0.6rem 0; /* prima 0.8rem */

     }

     /* Unified mobile nav look across all pages */
     body .main-navigation a { color: #fff !important; opacity: 1 !important; }
     body .main-navigation ul li a.active {
          color: #fff !important;
          background-color: rgba(255,255,255,0.18) !important;
          border-radius: 20px;
          padding: 0.6rem 1rem;
     }
     body .main-navigation ul li a:hover { color: #fff; background-color: rgba(255,255,255,0.12); }

     .main-navigation.active li:nth-child(1) { transition-delay: 0.25s; }

     .main-navigation.active li:nth-child(2) { transition-delay: 0.3s; }

     .main-navigation.active li:nth-child(3) { transition-delay: 0.35s; }

     .main-navigation.active li:nth-child(4) { transition-delay: 0.4s; }

     .main-navigation.active li:nth-child(5) { transition-delay: 0.45s; }

     .main-navigation .cta-nav {

          margin-top: 2rem;

          margin-left: 0;

          text-align: center;

          width: 100%;

          max-width: 100%;

     }

     .main-navigation.active + .lang-switcher {

          display: flex;

          position: fixed;

          bottom: 2rem;

          right: 2rem;

          z-index: 2101;

          opacity: 0;

          animation: fadeInLang 0.5s ease 0.6s forwards;

     }

     @keyframes fadeInLang {

          to { opacity: 1; }

     }



     /* Remove sibling-dependent hamburger animation in favor of body.toggled rules */

     /* Mirror hamburger animation when using body.toggled fallback */
     body.toggled .menu-toggle span { background-color: #fff !important; }
     body.toggled .menu-toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
     body.toggled .menu-toggle span:nth-child(2) { opacity: 0; transform: scaleX(0.5); }
     body.toggled .menu-toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

     /* Show language switcher on fallback, same placement */
     body.toggled .lang-switcher {
          display: flex !important;
          position: fixed;
          bottom: 2rem; right: 2rem;
          z-index: 2101;
          opacity: 1;
     }

     /* Ensure hamburger remains clickable above panel when open */
     body.toggled .menu-toggle { position: relative; z-index: 2102; }

     .hero-title-redesigned {

          font-size: 3rem;

     }

     .layout-container {

          grid-template-columns: 1fr !important;

          gap: 0;

     }

     .layout-container.layout-reversed .layout-text { order: 1; }

     .layout-container.layout-reversed .layout-visual { order: 2; }

     .layout-text {

          position: sticky;

          top: 80px;

          z-index: 3;

          padding-bottom: 2rem;

          background-color: var(--color-background-main);

     }

     .card-stack-container {

          padding-top: 2rem;

     }

     .card-stack-item {

          position: sticky;

          top: 200px;

          transform: none !important;

          opacity: 1 !important;

          margin-bottom: 2rem;

          transition: transform 0.3s ease-out, opacity 0.3s ease-out;

          padding: 24px;

     }

     .hero-subtitle {

          font-size: 1.0rem;

     }

     .hero-description {

          font-size: 1rem;

     }

     body.page-index .layout-text .section-title {

          font-size: 1.5rem !important;

     }

     .hero-content-container {

          padding: 0rem !important;

     }

     .btn-hero {

          font-size: 0.9rem !important;

          padding: calc(var(--spacing-unit) * 0.6) calc(var(--spacing-unit) * 2.2);

     }

     body.page-index .layout-text .section-intro {

          font-size: 1.15rem;

          margin-bottom: 0.5rem !important;

          padding: 0.5rem 1rem !important;

          margin-top: -0.9rem;

          font-size: 1.0rem !important;

     }

     body.page-index .btn.btn-secondary {

          font-size: 0.9rem !important;

          padding: 0.2rem 1rem !important;

     }

     body.page-index .teaser-icon-placeholder {

          padding: 10px;

          margin-bottom: -3px;

     }

     body.page-index .teaser-icon-placeholder svg {

          width: 24px;

          height: 24px;

     }

     .key-service-item h3 {

          font-size: 1.0rem !important;

          margin-bottom: 0.5rem !important;

     }

     .layout-text {

          padding-bottom: 1rem !important;

     }

     body.page-index .layout-text {

          top: 52px !important;

     }

     body.page-index .key-value-item h4 {

          display: block ruby;

          font-size: 1.1rem;

     }

    

     h4 { font-size: 1.1rem; }



     .layout-text {

          position: relative;

          z-index: 2;

          background-color: var(--color-background-main);

     }

     .layout-visual {

          z-index: 1;

     }



    .key-value-item p {

    font-size: 0.95rem;

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

    line-height: 1.6;

    }





    /* --- Mobile Styles for Located in Italy Widget (max-width: 992px) --- */

    @media (max-width: 992px) {

        .located-widget {

            /* Usiamo !important per forzare l'applicazione degli stili */

            top: auto !important;

            bottom: 3.2rem !important;

            right: 1rem !important;

            left: auto !important;

            transform: none !important;

            

            /* Forziamo le dimensioni del cerchio */

            min-width: 50px !important;

            min-height: 50px !important;

            width: 50px !important;

            height: 50px !important;

            padding: 0.4rem !important;

            border-radius: 50% !important;

            

            /* Aggiungiamo overflow per sicurezza */

            overflow: hidden;

        }



        .hero-marquee {

            padding: 0.4rem !important; /* Riduce il padding per mobile */

        }







        /* Regola ancora più specifica per nascondere il testo */

        .located-widget .located-text {

            display: none !important;

        }







        /* Regola specifica per l'icona del mappamondo */

        .located-widget .located-icon {

            width: 48px !important;

            height: 48px !important;

            margin: 0 !important;

            box-shadow: none !important;

            background: none !important;

        }

        

    #globe-icon {

        width: 100%; /* Make globe fill the icon container */

        height: 100%;

    }

    }



}



@media (max-width: 480px) {

     .hero-title-redesigned { font-size: 2.5rem; }

     .section-title { font-size: 1.6rem; }


}



/* ==========================================================================

    2. RESPONSIVE SERVIZI (page-servizi)

    ========================================================================== */

@media (max-width: 992px) {

     body.page-servizi {

          background-color: #111418;

     }

     .page-servizi .site-footer {

          margin-top: 0;

     }

     .page-servizi .showcase-nav-container,

     .page-servizi #services-particles-bg,

     .page-servizi #services-progress-bar {

          display: none !important;

     }

     .page-servizi .showcase-wrapper {

          position: static !important;

          height: auto !important;

          display: block !important;

     }

    /* VERSIONE MOBILE CORRETTA SERVIZI */

    #services-showcase {

        height: auto !important;

    }

    .page-servizi .services-hero-intro {

        position: static !important;

        height: auto !important;

        padding: 6rem 1rem 4rem 1rem;

    }

    .page-servizi .services-main-title {

        font-size: clamp(2.8rem, 6vw, 4.5rem);

        font-weight: 700;

        line-height: 1.2;

        margin-bottom: 1.5rem;

        color: transparent;

        background: linear-gradient(120deg, #bbdefb, #ffffff, #82b1ff, #ffffff, #bbdefb);

        background-size: 400% auto;

        -webkit-background-clip: text;

        background-clip: text;

        -webkit-text-fill-color: transparent;

        animation: shimmer 3s linear infinite alternate;

        transition: transform 0.2s ease-out;

    }

    .page-servizi .showcase-panels-container {

        display: block !important;

        padding: 0 1rem 4rem 1rem;

        opacity: 1 !important;

        visibility: visible !important;

        transform: none !important;

    }

    .page-servizi .service-panel {

        position: static !important;

        width: 100% !important;

        height: auto !important;

        opacity: 1 !important;

        visibility: visible !important;

        transform: none !important;

        background-color: #1e242c;

        border-radius: 12px;

        margin-bottom: 1.5rem;

    }

    .page-servizi .panel-content {

        padding: 2rem 1.5rem;

    }

    /* Animazione reveal-on-scroll compatibile mobile */

    .service-panel.reveal-on-scroll {

        opacity: 0;

        transform: translateY(30px);

        transition: opacity 0.8s ease-out, transform 0.8s ease-out;

    }

    .service-panel.reveal-on-scroll.is-visible {

        opacity: 1;

        transform: translateY(0);

    }

    .key-service-item p {

    font-size: 0.95rem;

    }

}



/* --- NUOVO: Animazione di entrata per i servizi --- */

@keyframes fadeInUp {

     from {

          opacity: 0;

          transform: translateY(30px);

     }

     to {

          opacity: 1;

          transform: translateY(0);

     }

}

.service-panel.reveal-on-scroll {

     opacity: 0;

     animation: fadeInUp 0.8s ease-out forwards;

     animation-timeline: view();

     animation-range-start: entry 10%;

     animation-range-end: cover 20%;

}



/* ==========================================================================

    3. RESPONSIVE CHI SONO (page-chi-sono)

    ========================================================================== */

@media (max-width: 992px) {

     .page-title-hero {

          font-size: 3rem !important;

     }

     .hero-subtitle-about {

          font-size: 1.1rem;

     }

     .journey-content { height: auto !important; }

     .journey-section { padding-top: 60px; padding-bottom: 60px; }

     .timeline::after { left: 30px; }

     .timeline-item {
          position: -webkit-sticky !important; /* Safari iOS */
          position: sticky !important;

          top: 150px !important;

          width: 100%;

          left: 0 !important;

          padding-left: 60px;

          padding-right: 15px;

          margin-bottom: 0;

          opacity: 0.3;

          transition: opacity 0.4s ease;

          transform: translateZ(0);

          will-change: opacity;

     }

     .timeline-content h3 {

          font-size: 1.4rem;

     }

     .timeline-item.is-focused { opacity: 1 !important; }

     .timeline-item::after { left: 20px; right: auto; }
     .timeline-item:nth-child(even)::after { left: 20px; right: auto; }

     .bento-grid {

          grid-template-columns: 1fr;

          gap: 20px;

     }

     .bento-box.box-soft-skills,

     .bento-box.box-cybersecurity {

          grid-column: auto;

     }

     .pills-container {

          justify-content: center;

     }

}



/* ==========================================================================

    4. RESPONSIVE CONTATTI (page-contatti)

    ========================================================================== */

/* (Nessuna regola specifica presente in questo snippet) */

/* === RESPONSIVE DESIGN === */





/* ==========================================================================

    5. RESPONSIVE PAGINE LEGALI (page-privacy, page-legal, ecc.)

    ========================================================================== */

/* (Nessuna regola specifica presente in questo snippet) */

 











/* Su schermi più grandi di 992px (desktop)... */

@media (min-width: 993px) {

  /* ...mostra i tag <br> per mandare il testo a capo */

  .desktop-break {

    display: initial;

  }

}



/* Mobile Services Cards */

.mobile-services-container {

    display: none;

    padding: 0 1rem 4rem;

}



@media (max-width: 992px) {

    .mobile-services-container {

        display: block;

    }

    

    .mobile-service-card {

        background-color: #1e242c;

        border-radius: 12px;

        margin-bottom: 1rem;

        overflow: hidden;

        transition: all 0.4s ease;

    }

    

    .card-header {

        display: flex;

        align-items: center;

        padding: 1.5rem;

        cursor: pointer;

    }

    

/*     .service-icon {

        margin-right: 15px;

        background: rgba(255,255,255,0.1);

        border-radius: 8px;

        padding: 8px;

    } */

    

    .service-icon svg {

        width: 24px;

        height: 24px;

        stroke: #bbdefb;

    }



    /* FIX: Icone servizi chiave (index) su mobile più grandi */

    body.page-index .card-stack-item .service-icon svg {

        width: 40px !important;

        height: 40px !important;

        stroke: var(--color-accent) !important;

    }

    

    .card-header h3 {

        flex-grow: 1;

        margin: 0.50rem;

        font-size: 0.95rem;

          color: var(--color-accent);

    }

    

    .expand-icon {

        font-size: 1.5rem;

        font-weight: 300;

        color: #bbdefb;

        transition: transform 0.3s ease;

    }

    

    .card-content {

        max-height: 0;

        overflow: hidden;

        padding: 0 1.5rem;

        transition: all 0.4s ease;

    }

    

    .mobile-service-card.active .card-content {

        max-height: 300px;

        padding: 0 1.5rem 1.5rem;

    }

    

    .mobile-service-card.active .expand-icon {

        transform: rotate(45deg);

    }



    .showcase-panels-container.desktop-only {

        display: none !important;

    }

    /* Hide any element explicitly marked as desktop-only */
    .desktop-only { display: none !important; }



    

/* ==========================================================================

    FIX: Gestione Colore Icona Hamburger

   ========================================================================== */



/* 1. Rende l'icona NERA su pagine specifiche quando si è in cima */

.page-chi-sono .site-header:not(.scrolled) .menu-toggle span,

.page-come-funziona .site-header:not(.scrolled) .menu-toggle span,

.page-preventivo-contatti .site-header:not(.scrolled) .menu-toggle span {

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

}



/* 2. FORZA l'icona a essere BIANCA quando il menu a tendina è aperto */

/* L'uso di !important garantisce che questa regola vinca su tutte le altre. */

body.toggled .menu-toggle span {

    background-color: #fff !important;

}





.main-navigation.active ~ .menu-toggle span {

    background-color: #fff;

}















}





@media (max-width: 992px) {



     .main-navigation ul li a.active {

          color: var(--color-background-main);

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

     }



     .main-navigation ul li a.cta-nav.active {

          background-color: var(--color-accent) !important;

          color: #fff !important;

     }



}





/* ==========================================================================

    NUOVO FIX: Forza la trasparenza dell'header su mobile prima dello scroll

   ========================================================================== */



@media (max-width: 992px) {

    /* 1. Rende l'header trasparente di default su mobile */

    .site-header:not(.scrolled) {

        background-color: transparent !important;

        box-shadow: none !important;

        border-bottom: none !important; /* Rimuove un eventuale bordo inferiore */

        transition: background-color 0.4s ease; /* Aggiunge una transizione fluida */

    }



    /* 2. Applica lo sfondo solido SOLO dopo lo scroll */

    .site-header.scrolled {

        background-color: #ffffff !important; /* Sfondo bianco dopo lo scroll */

        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important; /* Ombra leggera dopo lo scroll */

    }







    /* NUOVI FIX: miglior leggibilita' link su header trasparente */



    .page-index .site-header:not(.scrolled) .main-navigation ul li a,
    .page-servizi .site-header:not(.scrolled) .main-navigation ul li a {
        /* su hero scuro, usa testo bianco */
        color: var(--color-background-main);
        font-weight: 600;
    }



     .main-navigation ul li a:hover {

     color: var(--color-background-main);

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

     }



     .main-navigation .cta-nav:hover, .main-navigation .cta-nav:focus {

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

          color: #fff;

     }

























}

/* ==========================================================================

    FIX: stabilizza la larghezza della tendina subito dopo i 480px
   ========================================================================== */

@media (min-width: 481px) and (max-width: 992px) {
  .main-navigation {

          display: flex;

          flex-direction: column;

          justify-content: center;

          align-items: flex-start;

          position: fixed;

          top: 0;

          right: 0;

          width: clamp(300px, 61.5vw, 386px) !important;

          max-width: 386px;

          height: 100vh;

          padding: 4rem 2rem;

          background-color: rgba(13, 17, 23, 0.8);

          backdrop-filter: blur(15px);

          -webkit-backdrop-filter: blur(15px);

          z-index: 1000;

          opacity: 0;

          visibility: hidden;

          transform: translateX(100%);

          transition: all 0.6s cubic-bezier(0.86, 0, 0.07, 1);

     }
}