/* Casi studio della home: slider orizzontale (js/usecase-slider.js), con un
   riquadro scuro per ogni caso che mostra il risultato. Ripreso dalla pagina
   agenzie del branch SEO (ott 2026): fondo scuro, palline di colore sfocate
   che si muovono dietro, etichetta squadrata; niente vetro. Ogni riquadro ha
   palline di una tinta sola, e le tinte si alternano da un caso all'altro:
   arancio, viola, giallo, arancio, viola, verde.
   Su telefono le palline restano ferme. */
.agt-casi { margin-top: 120px; }
.agt-casi .section-title.section-small-wrap,
.agt-casi .header.umanoidi,
.agt-casi .heading-10 { width: 100%; max-width: 980px; }
.agt-casi .header.umanoidi { gap: 18px; }
.agt-casi .header.umanoidi .heading-10 { margin: 0; }
.agt-casi .header.umanoidi .max-width-48ch { max-width: 620px; }
.agt-prova { position: relative; overflow: hidden; isolation: isolate; color: #fff; border: 0 !important; }
.agt-prova--c1 { background: #1a1a1a !important; --p1: rgba(254,74,34,0.55); --p2: rgba(254,74,34,0.22); --p3: rgba(254,74,34,0.32); }
.agt-prova--c2 { background: #1a1a1a !important; --p1: rgba(139,92,255,0.55); --p2: rgba(139,92,255,0.22); --p3: rgba(139,92,255,0.35); }
.agt-prova--c3 { background: #1a1a1a !important; --p1: rgba(255,208,38,0.5); --p2: rgba(255,208,38,0.2); --p3: rgba(255,208,38,0.3); }
.agt-prova--c4 { background: #1a1a1a !important; --p1: rgba(139,92,255,0.55); --p2: rgba(139,92,255,0.22); --p3: rgba(139,92,255,0.35); }
.agt-prova--c5 { background: #1a1a1a !important; --p1: rgba(254,74,34,0.55); --p2: rgba(254,74,34,0.22); --p3: rgba(254,74,34,0.32); }
.agt-prova--c7 { background: #1a1a1a !important; --p1: rgba(37,211,102,0.5); --p2: rgba(37,211,102,0.2); --p3: rgba(37,211,102,0.3); }
.agt-prova__luci { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.agt-prova__luci i { position: absolute; border-radius: 50%; filter: blur(44px); }
.agt-prova__luci i:nth-child(1) { width: 220px; height: 220px; top: -70px; right: -40px; background: var(--p1); animation: agt-pallina-1 7s ease-in-out infinite alternate; }
.agt-prova__luci i:nth-child(2) { width: 180px; height: 180px; bottom: -60px; left: 5%; background: var(--p2); animation: agt-pallina-2 8s ease-in-out infinite alternate; }
.agt-prova__luci i:nth-child(3) { width: 140px; height: 140px; top: 25%; left: 45%; background: var(--p3); animation: agt-pallina-3 6s ease-in-out infinite alternate; }
.agt-prova__corpo { position: relative; z-index: 1; }
.agt-prova,
.agt-prova .text-size-large,
.agt-prova .text-size-regular { color: #fff !important; }
.agt-anim--caso.agt-prova { padding: 22px; }
.agt-caso { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; height: 100%; padding: 18px 20px; }
.agt-caso__tag { font-size: 12px; font-weight: 700; color: #fff; background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.35); border-radius: 6px; padding: 4px 10px; }
.agt-caso__num { font-family: 'Helvetica Now Display', 'Satoshi', sans-serif; font-size: 56px; line-height: 1; color: #fff !important; text-shadow: 0 6px 24px rgba(0,0,0,0.18); }
.agt-caso__unita { font-size: 14px; color: rgba(255,255,255,0.92); max-width: 260px; }
@media (max-width: 767px) {
  .agt-prova,
  .agt-prova * { animation: none !important; }
  .agt-casi { margin-top: 80px; }
}
@keyframes agt-pallina-1 { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-60px, 40px) scale(1.15); } 100% { transform: translate(-120px, 10px) scale(0.95); } }
@keyframes agt-pallina-2 { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(80px, -50px) scale(1.2); } 100% { transform: translate(160px, -10px) scale(1); } }
@keyframes agt-pallina-3 { 0% { transform: translate(0, 0) scale(0.9); } 50% { transform: translate(-50px, -30px) scale(1.25); } 100% { transform: translate(40px, 30px) scale(1); } }

/* Le schede dei casi sono chiare sempre, anche prima che la pagina diventi
   bianca (entrando dal basso sono riquadri chiari sul nero): farle sfumare
   da scure a chiare insieme al resto, con la ruota dei servizi ancora sullo
   schermo, appesantiva il passaggio. Sfumano solo i titoli sul fondo. */
.home-chiaro .slider01_comp .feature-slide.magix { background: #f9f9f9; border: 1px solid rgba(0, 0, 0, 0.06); }
.home-chiaro .slider01_comp .feature-slide-title-2 { color: #1a1a1a; }
.home-chiaro .slider01_comp .feature-description-2 { color: #454643; }

/* Il blocco bianco della home (casi di successo) usa la stessa
   .integration-section delle pagine servizio, per avere le varianti chiare
   dello slider; qui si tolgono i margini pensati per quelle pagine: lo
   spazio lo da' la sezione dentro, e il padding laterale .page-padding. */
.integration-section.home-chiaro { margin-top: 0 !important; }
/* su telefono resta il padding di 15px delle .integration-section, che li'
   azzerano quello dei contenitori interni */
@media (min-width: 769px) {
  .integration-section.home-chiaro { padding-left: 0 !important; padding-right: 0 !important; }
}

/* Riquadro del risultato: nello slider il contenitore dell'immagine e' alto
   200px fissi (150 su telefono), e quando la frase sotto il numero andava a
   capo i testi uscivano dal riquadro. Qui l'altezza segue il contenuto, con
   quella misura come minimo; numero un po' piu' piccolo; etichetta e frase sotto ben leggibili, con
   l'etichetta staccata dal numero. */
.agt-casi .slider01_comp .feature-slide-image-wrap-2 { height: auto; }
.agt-casi .feature-slide-image-2.agt-anim--caso { height: auto; padding: 16px; }
.agt-casi .agt-caso { height: auto; min-height: 168px; gap: 6px; padding: 16px 20px; }
.agt-casi .agt-caso__tag { font-size: 13px; line-height: 1.3; padding: 5px 11px; margin-bottom: 8px; }   /* senza line-height prendeva i 30px della pagina: etichetta alta e larga */
.agt-casi .agt-caso__num { font-size: 44px; }
.agt-casi .agt-caso__unita { max-width: none; font-size: 16px; line-height: 1.35; }   /* su una riga dove ci sta: riquadri alti uguali */
@media (max-width: 767px) {
  .agt-casi .feature-slide-image-2.agt-anim--caso { padding: 12px; }
  .agt-casi .agt-caso { min-height: 168px; padding: 12px 16px; }   /* alto quanto serve a due righe: riquadri uguali */
  .agt-casi .agt-caso__num { font-size: 32px; }
  .agt-casi .agt-caso__unita { font-size: 14px; }
}

/* ---------- Come lavoriamo e domande frequenti, su fondo chiaro ----------
   Nella home anche queste due sezioni stanno nel blocco bianco: sono marcate
   data-bg-chiaro e js/bg-mode.js mette loro .bg-light insieme al velo.
   Il riquadro di Come lavoriamo resta scuro, con il suo disegno: sul bianco
   rende molto di piu' (scelta di Mario). Le domande frequenti invece passano
   a testi scuri, insieme al velo (vedi bg-mode.js). */

/* niente fondo proprio (era #080808 come la pagina): sfumando insieme al velo
   la sezione diventava scura prima del resto */
#faqs[data-bg-chiaro] { background-color: transparent !important; }
#faqs[data-bg-chiaro].bg-light h2.white,
#faqs[data-bg-chiaro].bg-light .accordion-title,
#faqs[data-bg-chiaro].bg-light strong { color: #1a1a1a !important; }
#faqs[data-bg-chiaro].bg-light p.white { color: #454643 !important; }
#faqs[data-bg-chiaro].bg-light .accordion-icon-plus,
#faqs[data-bg-chiaro].bg-light .accordion-icon-minus { background-color: #1a1a1a !important; border-color: #1a1a1a !important; }
#faqs[data-bg-chiaro].bg-light .accordion-divider { background-color: rgba(0, 0, 0, 0.1); }

/* Ingresso dei casi di successo: titolo, poi slider, poi barra, uno dopo
   l'altro (stessa animazione .hn-fade delle altre sezioni della home). */
.agt-casi .hn-fade--2.servizi-fadein { transition-delay: 0.12s; }   /* piu specifica della regola .hn-fade nella pagina */
.agt-casi .hn-fade--3.servizi-fadein { transition-delay: 0.24s; }
/* barra e frecce stanno sul fondo della sezione, che taglia quello che
   esce (overflow hidden): partendo 60px piu' in basso erano fuori, tagliate,
   e l'ingresso non partiva mai. Compaiono solo in dissolvenza. */
.agt-casi .uc-progress-wrap.servizi-fadein { transform: none; }

/* ---------- Passaggio chiaro-scuro della home (js/bg-mode.js) ----------
   Mentre il fondo cambia, html ha .bg-cambio: nelle sezioni sullo schermo
   (.bg-sfuma) testi, fondi e bordi sfumano in 400 ms insieme al velo (a 4
   scalini se lo scroll e' veloce, .bg-veloce); nel resto della pagina
   cambiano di colpo. Restano fuori gli elementi che hanno gia' una loro
   transizione di transform (navbar, barra in basso, slider, ingressi).
   Prima queste regole le aggiungeva lo script al caricamento, e aggiungere
   un foglio di stile obbligava a ricalcolare gli stili di tutta la pagina:
   un compito da oltre 200 ms su telefono, prima del contenuto principale. */
.bg-cambio *:not(.bg-sfuma):not(.bg-sfuma *):not(.bg-mode-velo){transition-property:transform,opacity!important}
.bg-cambio .bg-sfuma:not(.bg-mode-velo,.navbar,.brand-link,.right-nav-2,.nav-fondo__barra,.nav-menu-2,.nav-cta-consulenza,.nav-dropdown-menu,.cta-sticky-bottom,.uc-slider-track,.servizi-fadein),.bg-cambio .bg-sfuma *:not(.bg-mode-velo,.navbar,.brand-link,.right-nav-2,.nav-fondo__barra,.nav-menu-2,.nav-cta-consulenza,.nav-dropdown-menu,.cta-sticky-bottom,.uc-slider-track,.servizi-fadein){transition:color 400ms ease,background-color 400ms ease,border-color 400ms ease,box-shadow 400ms ease,fill 400ms ease,stroke 400ms ease,filter 400ms ease!important}
.bg-cambio.bg-veloce .bg-sfuma:not(.bg-mode-velo,.navbar,.brand-link,.right-nav-2,.nav-fondo__barra,.nav-menu-2,.nav-cta-consulenza,.nav-dropdown-menu,.cta-sticky-bottom,.uc-slider-track,.servizi-fadein),.bg-cambio.bg-veloce .bg-sfuma *:not(.bg-mode-velo,.navbar,.brand-link,.right-nav-2,.nav-fondo__barra,.nav-menu-2,.nav-cta-consulenza,.nav-dropdown-menu,.cta-sticky-bottom,.uc-slider-track,.servizi-fadein){transition:color 400ms steps(4, jump-end),background-color 400ms steps(4, jump-end),border-color 400ms steps(4, jump-end),box-shadow 400ms steps(4, jump-end),fill 400ms steps(4, jump-end),stroke 400ms steps(4, jump-end),filter 400ms steps(4, jump-end)!important}