/* =====================================================================
   ANTAILIX — DESIGN SYSTEM
   =====================================================================
   Tutte le classi iniziano con ax- e si applicano ai moduli Divi
   scrivendole nel campo "Classe CSS" (Avanzate → ID e classi CSS).
   Non serve toccare questo file per costruire le pagine.

   INDICE
     1. Variabili (palette, tipografia, spazi)
     2. Tipografia
     3. Bottoni
     4. Sistema di stato — la X del logo
     5. Hero
     6. Card e griglie
     7. Mega menu
     8. Utilita'
     9. Responsive
    10. Footer globale
    11. Template pagina Solution
    12. Hero delle pagine indice
    13. Pagina 404
    14. Home
    15. Logo cliccabile
    16. Pagine interne
    17. Platform
    18. Font serviti dal nostro server
    19. Pagine legali
    20. Correzioni mobile
    21. Home piu' corta sul telefono
    22. Home su telefono — secondo giro
    23. Hero della home: solo il video
    24. Global reach per continenti
    25. Solutions in una pagina sola
    26. Home dopo l'accorpamento delle Solutions
    27. Hero senza foto: piu' basso
    28. Linea del tempo, riferimenti, contatto
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. VARIABILI
   Se un giorno cambia un colore del brand, si cambia QUI e basta.
   --------------------------------------------------------------------- */
:root {
  /* palette ufficiale, presa dal logo */
  --ax-navy:        #0F3557;   /* C100 M80 Y40 K33 */
  --ax-navy-deep:   #0A2740;   /* variante piu' scura per i fondi */
  --ax-blue:        #126295;   /* C93 M61 Y19 K3  */
  --ax-sky:         #81CFF2;   /* C45 M2 Y1 K0    */

  /* sistema di stato — dal gradiente della X */
  --ax-crit:        #CB2027;
  --ax-warn:        #E7BC20;
  --ax-ok:          #0B7A3B;   /* schiarito da #064B27, illeggibile su schermo */

  /* neutri */
  --ax-ink:         #0F3557;
  --ax-muted:       #637C92;
  --ax-line:        #E1E6EA;
  --ax-bg:          #FFFFFF;
  --ax-bg-alt:      #F5F8FA;

  /* testo su fondo scuro */
  --ax-on-dark:     #C6DBEA;
  --ax-on-dark-dim: #8FA9BF;

  /* tipografia — i font si impostano in Divi → Opzioni tema → Generale */
  --ax-font-mono:   ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --ax-tracking:    -0.02em;

  /* ritmo verticale */
  --ax-space-s:     clamp(16px, 2vw, 24px);
  --ax-space-m:     clamp(32px, 4vw, 56px);
  --ax-space-l:     clamp(56px, 7vw, 104px);

  --ax-radius:      4px;
  --ax-ease:        cubic-bezier(.22,.61,.36,1);
}


/* ---------------------------------------------------------------------
   2. TIPOGRAFIA
   --------------------------------------------------------------------- */

/* I titoli respirano meglio con crenatura negativa. Divi non lo fa da solo. */
body h1, body h2, body h3, body h4,
body .et_pb_module h1, body .et_pb_module h2,
body .et_pb_module h3, body .et_pb_module h4 {
  letter-spacing: var(--ax-tracking);
  line-height: 1.12;
}
body h5, body h6 { letter-spacing: -0.01em; line-height: 1.25; }

/* Sopratitolo monospaziato: l'elemento che da' al sito il tono "tecnico". */
.ax-eyebrow,
.ax-eyebrow p {
  font-family: var(--ax-font-mono) !important;
  font-size: 12px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  color: var(--ax-blue);
  font-weight: 500;
  line-height: 1.4;
  display: inline-block;
  margin: 0 0 14px;
}
.ax-dark .ax-eyebrow, .ax-dark .ax-eyebrow p { color: var(--ax-sky); }

/* Paragrafo introduttivo, piu' grande del corpo. */
.ax-lead, .ax-lead p {
  font-size: clamp(17px, 1.7vw, 20px) !important;
  line-height: 1.7 !important;
  color: var(--ax-muted);
  max-width: 62ch;
}
.ax-dark .ax-lead, .ax-dark .ax-lead p { color: var(--ax-on-dark); }

/* Numeri, codici, sigle tecniche. */
.ax-mono, .ax-mono p {
  font-family: var(--ax-font-mono) !important;
  letter-spacing: 0.04em;
}


/* ---------------------------------------------------------------------
   3. BOTTONI
   Applicare la classe al modulo Pulsante di Divi.
   --------------------------------------------------------------------- */
.ax-btn.et_pb_button,
.ax-btn .et_pb_button {
  border-radius: var(--ax-radius) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  padding: 13px 26px !important;
  transition: all .22s var(--ax-ease) !important;
  border-width: 1px !important;
}
/* Divi aggiunge una freccia al passaggio del mouse: la togliamo, e' datata. */
.ax-btn.et_pb_button:after,
.ax-btn .et_pb_button:after { display: none !important; }

.ax-btn--primary.et_pb_button { background: var(--ax-blue) !important; color: #fff !important; border-color: var(--ax-blue) !important; }
.ax-btn--primary.et_pb_button:hover { background: var(--ax-navy) !important; border-color: var(--ax-navy) !important; }

.ax-btn--sky.et_pb_button { background: var(--ax-sky) !important; color: var(--ax-navy) !important; border-color: var(--ax-sky) !important; font-weight: 600 !important; }
.ax-btn--sky.et_pb_button:hover { background: #fff !important; border-color: #fff !important; }

.ax-btn--ghost.et_pb_button { background: transparent !important; color: var(--ax-navy) !important; border-color: var(--ax-line) !important; }
.ax-btn--ghost.et_pb_button:hover { border-color: var(--ax-blue) !important; color: var(--ax-blue) !important; }

.ax-btn--light.et_pb_button { background: transparent !important; color: #fff !important; border-color: rgba(255,255,255,.32) !important; }
.ax-btn--light.et_pb_button:hover { background: #fff !important; color: var(--ax-navy) !important; border-color: #fff !important; }


/* ---------------------------------------------------------------------
   4. SISTEMA DI STATO — la X del logo
   Rosso / giallo / verde non sono decorazione: sono la scala di severita'
   di una piattaforma di monitoring, ed e' gia' dentro il vostro marchio.
   --------------------------------------------------------------------- */

.ax-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--ax-font-mono);
  font-size: 12.5px;
  letter-spacing: 0.05em;
  color: var(--ax-muted);
  white-space: nowrap;
}
.ax-dark .ax-status { color: var(--ax-on-dark-dim); }

.ax-status .ax-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
  box-shadow: 0 0 0 4px rgba(15,53,87,.07);
}
.ax-dark .ax-status .ax-dot { box-shadow: 0 0 0 4px rgba(255,255,255,.07); }

.ax-status--ok   .ax-dot { background: var(--ax-ok); }
.ax-status--warn .ax-dot { background: var(--ax-warn); }
.ax-status--crit .ax-dot { background: var(--ax-crit); animation: ax-pulse 1.9s ease-in-out infinite; }

@keyframes ax-pulse { 0%,100% { opacity: 1 } 50% { opacity: .32 } }

/* Rispetta chi ha disattivato le animazioni nel sistema operativo. */
@media (prefers-reduced-motion: reduce) {
  .ax-status--crit .ax-dot { animation: none; }
}

/* Etichette piene, per badge e tag. */
.ax-badge {
  display: inline-block;
  font-family: var(--ax-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 2px;
  color: #fff;
  background: var(--ax-navy);
}
.ax-badge--crit { background: var(--ax-crit); }
.ax-badge--warn { background: var(--ax-warn); color: #4A3C00; }
.ax-badge--ok   { background: var(--ax-ok); }

/* Barra col gradiente della X. Da mettere in cima alle sezioni chiave. */
.ax-severity-bar {
  display: block;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, var(--ax-crit), var(--ax-warn), var(--ax-ok));
}
/* Variante da applicare a una Riga o Sezione Divi: la barra si disegna sopra. */
.ax-topbar { position: relative; }
.ax-topbar:before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--ax-crit), var(--ax-warn), var(--ax-ok));
  z-index: 5;
}


/* ---------------------------------------------------------------------
   5. HERO
   --------------------------------------------------------------------- */

/* Velo scuro sopra immagine o video di sfondo. Senza, il testo bianco
   non raggiunge il contrasto minimo di accessibilita'. */
.ax-hero { position: relative; }
.ax-hero:before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg,
              rgba(10,39,64,.96) 0%,
              rgba(10,39,64,.86) 42%,
              rgba(10,39,64,.35) 100%);
}
.ax-hero > .et_pb_row, .ax-hero .et_pb_row { position: relative; z-index: 2; }

/* Sulla home il velo era volutamente leggero: a tenere il contrasto delle
   scritte ci pensava il pannello di vetro. Tolto quello, il lavoro torna
   al velo — scuro in basso, dove stanno titolo e bottoni, e leggero in
   alto, dove il video ha le sue scritte e va lasciato respirare. */
.ax-home-hero:before {
  background: linear-gradient(180deg,
              rgba(10,39,64,.26) 0%,
              rgba(10,39,64,.50) 44%,
              rgba(10,39,64,.86) 100%) !important;
}
.ax-home-hero h1,
.ax-home-hero .ax-lead p { text-shadow: 0 2px 18px rgba(7,24,40,.60); }

/* Hero delle pagine interne: velo dal basso, piu' leggero in alto. */
.ax-hero--page:before {
  background: linear-gradient(0deg,
              rgba(10,39,64,.97) 8%,
              rgba(10,39,64,.55) 70%,
              rgba(10,39,64,.50) 100%);
}

/* Video hero mostrato PER INTERO (non ritagliato), come richiesto.
   Su desktop riempie; su mobile il fotogramma resta integro dentro
   un campo navy, che diventa una scelta grafica e non un difetto. */
.ax-video-full .et_pb_section_video_bg video,
.ax-video-full video {
  object-fit: cover;
}
@media (max-width: 980px) {
  .ax-video-full .et_pb_section_video_bg,
  .ax-video-full .et_pb_section_video_bg video {
    object-fit: contain !important;
    background: var(--ax-navy-deep);
  }
}

/* Briciole di pane sopra il titolo delle pagine interne. */
.ax-crumb, .ax-crumb p {
  font-family: var(--ax-font-mono) !important;
  font-size: 11.5px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
  color: var(--ax-sky) !important;
  margin-bottom: 16px !important;
}


/* ---------------------------------------------------------------------
   6. CARD E GRIGLIE
   --------------------------------------------------------------------- */

.ax-card {
  background: #fff;
  border: 1px solid var(--ax-line);
  border-radius: var(--ax-radius);
  padding: var(--ax-space-s);
  transition: all .25s var(--ax-ease);
}
.ax-card:hover {
  border-color: var(--ax-sky);
  box-shadow: 0 18px 40px rgba(15,53,87,.08);
  transform: translateY(-2px);
}
.ax-dark .ax-card {
  background: rgba(129,207,242,.05);
  border-color: rgba(129,207,242,.22);
}
.ax-dark .ax-card:hover { background: rgba(129,207,242,.11); border-color: var(--ax-sky); }

/* Numerino progressivo in cima alle card. */
.ax-num, .ax-num p {
  font-family: var(--ax-font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  color: var(--ax-muted) !important;
  margin: 0 0 10px !important;
}
.ax-dark .ax-num, .ax-dark .ax-num p { color: var(--ax-sky) !important; }

/* Griglia a filo, separata da linee sottili invece che da spazi. */
.ax-grid-hairline .et_pb_column {
  border-right: 1px solid var(--ax-line);
  border-bottom: 1px solid var(--ax-line);
  padding: var(--ax-space-s);
  margin-bottom: 0 !important;
}
.ax-dark .ax-grid-hairline .et_pb_column { border-color: rgba(129,207,242,.18); }

/* Numeroni delle statistiche. */
.ax-stat, .ax-stat h2, .ax-stat h3 {
  font-size: clamp(32px, 4.2vw, 50px) !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
  color: var(--ax-navy);
}
.ax-stat-label, .ax-stat-label p {
  font-family: var(--ax-font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  color: var(--ax-muted) !important;
  margin-top: 10px !important;
}


/* ---------------------------------------------------------------------
   7. MEGA MENU
   Rifiniture sul mega menu nativo di Divi: intestazioni di colonna
   monospaziate e sottolineate, voci piu' arieggiate.
   --------------------------------------------------------------------- */

#top-menu li.mega-menu > ul > li > a,
.et-menu li.mega-menu > ul > li > a {
  font-family: var(--ax-font-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.09em !important;
  line-height: 1.45 !important;
  text-transform: uppercase;
  color: var(--ax-blue) !important;
  font-weight: 500 !important;
  padding-bottom: 10px !important;
  margin-bottom: 14px !important;
  border-bottom: 1px solid var(--ax-line) !important;

  /* Le quattro intestazioni hanno lunghezze molto diverse: "Media & Broadcast"
     sta su una riga, "Environment & Critical Infrastructure" su tre. Senza
     un'altezza minima comune le righe divisorie finiscono a quote diverse e
     le colonne partono sfalsate. Questo le allinea tutte. */
  display: block !important;
  box-sizing: border-box;
  min-height: 58px;
}

/* Il mega menu di Divi ha un filetto azzurro di serie in cima: lo portiamo
   sul ciano del brand e lo rendiamo un po' piu' sottile. */
#top-menu li.mega-menu > ul,
.et-menu li.mega-menu > ul {
  border-top-color: var(--ax-sky) !important;
  border-top-width: 2px !important;
  padding-top: 26px !important;
  padding-bottom: 22px !important;
}

#top-menu li.mega-menu ul li li a,
.et-menu li.mega-menu ul li li a {
  font-size: 14.5px !important;
  line-height: 1.45 !important;
  padding: 7px 0 !important;
  transition: all .16s var(--ax-ease) !important;
}
#top-menu li.mega-menu ul li li a:hover,
.et-menu li.mega-menu ul li li a:hover {
  color: var(--ax-blue) !important;
  padding-left: 5px !important;
  opacity: 1 !important;
}

/* Voce "Book a Demo": nel menu diventa un pulsante.
   Lo script di struttura le ha gia' assegnato la classe .nav-cta */
#top-menu li.nav-cta > a,
.et-menu li.nav-cta > a {
  background: var(--ax-blue);
  color: #fff !important;
  padding: 10px 20px !important;
  border-radius: var(--ax-radius);
  transition: background .22s var(--ax-ease);
  opacity: 1 !important;
}
#top-menu li.nav-cta > a:hover,
.et-menu li.nav-cta > a:hover { background: var(--ax-navy); }
#top-menu li.nav-cta > a:after,
.et-menu li.nav-cta > a:after { display: none !important; }


/* ---------------------------------------------------------------------
   8. UTILITA'
   --------------------------------------------------------------------- */

.ax-dark { background: var(--ax-navy) !important; color: #fff; }
.ax-dark h1, .ax-dark h2, .ax-dark h3, .ax-dark h4, .ax-dark h5, .ax-dark h6 { color: #fff !important; }
.ax-dark p, .ax-dark li { color: var(--ax-on-dark); }

.ax-deep { background: var(--ax-navy-deep) !important; }
.ax-alt  { background: var(--ax-bg-alt) !important; }

.ax-hairline-top    { border-top: 1px solid var(--ax-line); }
.ax-hairline-bottom { border-bottom: 1px solid var(--ax-line); }
.ax-dark.ax-hairline-top, .ax-dark .ax-hairline-top { border-color: rgba(129,207,242,.18); }

.ax-narrow { max-width: 780px; margin-left: auto; margin-right: auto; }

/* Focus visibile da tastiera: obbligatorio per l'accessibilita',
   Divi non lo garantisce su tutti gli elementi. */
a:focus-visible, button:focus-visible,
.et_pb_button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--ax-sky);
  outline-offset: 3px;
}


/* ---------------------------------------------------------------------
   9. HEADER GLOBALE (Theme Builder)
   Si aggancia da solo al modulo Menu dentro .et-l--header: nessuna classe
   da scrivere nei moduli. Verificato sul sito reale.
   --------------------------------------------------------------------- */

.et-l--header{
  position: sticky; top: 0; z-index: 500;
  background: #fff;
  border-bottom: 1px solid var(--ax-line);
}
/* la barra di amministrazione di WordPress occupa i primi pixel */
.admin-bar .et-l--header{ top: 32px }
@media (max-width: 782px){ .admin-bar .et-l--header{ top: 46px } }

.et-l--header .et_pb_section{ padding: 0 !important; background: transparent !important }
.et-l--header .et_pb_row{
  width: 92% !important; max-width: 1400px !important;
  padding: 16px 0 !important; margin: 0 auto !important;
}

/* logo a sinistra, menu spinto a destra */
.et-l--header .et_pb_menu_inner_container{ display: flex; align-items: center; gap: 36px }
.et-l--header .et_pb_menu__logo-wrap,
.et-l--header .et_pb_menu__logo{ width: auto !important; max-width: none !important; margin: 0 !important }
/* Il marchio nella barra: 54px su una barra alta 109, cioè metà esatta.
   A 40px ne occupava poco più di un terzo e in mezzo a tanto spazio
   bianco sembrava rimpicciolito per sbaglio. */
.et-l--header .et_pb_menu__logo img{
  height: 54px !important; max-height: 54px; width: auto !important; display: block;
}
.et-l--header .et_pb_menu__menu{ margin-left: auto; padding: 0 }

.et-l--header .et-menu > li{ margin-right: 26px !important; padding-bottom: 0 !important }
.et-l--header .et-menu > li:last-child{ margin-right: 0 !important }
.et-l--header .et-menu > li > a{
  font-size: 15px; font-weight: 500; color: var(--ax-navy); opacity: 1;
}
.et-l--header .et-menu > li > a:hover{ color: var(--ax-blue); opacity: 1 }

@media (max-width: 980px){
  .et-l--header .et_pb_row{ padding: 12px 0 !important }
  .et-l--header .et_pb_menu__logo img{ height: 38px !important; max-height: 38px }
}


/* ---------------------------------------------------------------------
   10. RESPONSIVE
   --------------------------------------------------------------------- */

@media (max-width: 980px) {
  .ax-grid-hairline .et_pb_column { border-right: 0; }
  .ax-hero:before {
    background: linear-gradient(180deg, rgba(10,39,64,.82) 0%, rgba(10,39,64,.95) 100%);
  }
}

@media (max-width: 767px) {
  .ax-status { font-size: 11.5px; }
  .ax-eyebrow, .ax-eyebrow p { font-size: 11px !important; }
}


/* ---------------------------------------------------------------------
   11. FOOTER GLOBALE (Theme Builder)
   Generato dallo shortcode [ax_footer], che legge il Main Menu.
   Aggiungi una voce in Aspetto -> Menu e compare anche qui, da sola.
   --------------------------------------------------------------------- */

.et-l--footer .et_pb_section{ background: var(--ax-navy-deep) !important; padding: 0 !important }
.et-l--footer .et_pb_row{
  width: 92% !important; max-width: 1400px !important;
  padding: clamp(48px,6vw,76px) 0 34px !important; margin: 0 auto !important;
}

.ax-footer{ color: var(--ax-on-dark) }

/* Divi mette il pallino di elenco a qualsiasi <ul> dentro un modulo Testo.
   Qui gli elenchi sono navigazione, non elenchi puntati: via i marcatori. */
.ax-footer ul, .ax-footer ol{ list-style: none !important; padding: 0 !important; margin: 0 !important }
.ax-footer li{ list-style: none !important; list-style-type: none !important; padding-left: 0 !important }
.ax-footer li:before, .ax-footer li::before, .ax-footer li::marker{ content: none !important; display: none !important }

.ax-footer__grid{
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 40px;
}

/* marchio */
.ax-footer__brand img{ height: 34px; width: auto; display: block; margin-bottom: 20px }
/* se in libreria c'e' solo il logo a colori, lo portiamo a bianco pieno:
   e' esattamente la versione monocromatica prevista dal brand book */
.ax-footer__brand img.ax-invert{ filter: brightness(0) invert(1) }
.ax-footer__brand p{
  font-size: 14px; line-height: 1.7; color: var(--ax-on-dark-dim); max-width: 34ch; margin: 0;
}

/* colonne di link */
.ax-footer__col h6{
  font-family: var(--ax-font-mono);
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 500; margin: 0 0 16px;
}
.ax-footer__col h6 a{ color: var(--ax-sky); text-decoration: none }
.ax-footer__col ul{ list-style: none; margin: 0; padding: 0 }
.ax-footer__col li{ margin: 0 }
.ax-footer__col a{
  display: block; font-size: 14px; line-height: 1.45;
  color: var(--ax-on-dark); padding: 5px 0;
  text-decoration: none; transition: color .16s var(--ax-ease);
}
.ax-footer__col ul a:hover{ color: #fff }

/* riga legale */
.ax-footer__bottom{
  margin-top: clamp(40px,5vw,64px); padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; flex-wrap: wrap;
  font-family: var(--ax-font-mono); font-size: 12px; letter-spacing: .03em;
  color: #7793A9;
}
.ax-footer__legal{ list-style: none; display: flex; gap: 22px; margin: 0; padding: 0 }
.ax-footer__legal a{ color: #7793A9; text-decoration: none; transition: color .16s var(--ax-ease) }
.ax-footer__legal a:hover{ color: #fff }

@media (max-width: 1080px){
  .ax-footer__grid{ grid-template-columns: 1fr 1fr 1fr; gap: 34px }
  .ax-footer__brand{ grid-column: 1 / -1 }
}
@media (max-width: 700px){
  .ax-footer__grid{ grid-template-columns: 1fr 1fr }
  .ax-footer__bottom{ flex-direction: column; align-items: flex-start; text-align: left }
}


/* ---------------------------------------------------------------------
   12. TEMPLATE PAGINA SOLUTION (Theme Builder — Custom Body)
   Un solo template per tutte e 13 le Solutions. L'hero non contiene
   un'immagine fissa: legge il titolo e l'immagine in evidenza della
   pagina. Impostare l'immagine in evidenza e' l'unica cosa da fare.
   Il modulo Post Title porta la classe ax-page-hero.
   --------------------------------------------------------------------- */

/* La prima sezione esce dai margini di Divi e va a tutta pagina. */
.et-l--body .et_pb_section_0_tb_body{ padding: 0 !important; background: transparent !important }
.et-l--body .et_pb_section_0_tb_body > .et_pb_row{
  width: 100% !important; max-width: none !important;
  padding: 0 !important; margin: 0 !important;
}
.et-l--body .et_pb_section_0_tb_body .et_pb_column{
  padding: 0 !important; margin: 0 !important; width: 100% !important;
}

.ax-page-hero.et_pb_post_title{
  min-height: clamp(360px, 54vh, 560px);
  display: flex; align-items: flex-end;
  position: relative; margin: 0 !important; padding: 0 !important;
  background-color: var(--ax-navy-deep);   /* fondo quando manca la foto */
  background-size: cover; background-position: center;
}

/* Due veli sovrapposti invece di uno.
   Il primo sale dal basso e garantisce il contrasto del titolo.
   Il secondo entra da sinistra in diagonale e da' peso al lato del testo,
   lasciando respirare il soggetto della foto sulla destra. */
.ax-page-hero.et_pb_post_title:before{
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(0deg,
      rgba(10,39,64,.95) 0%, rgba(10,39,64,.72) 34%,
      rgba(10,39,64,.18) 72%, rgba(10,39,64,.30) 100%),
    linear-gradient(96deg,
      rgba(10,39,64,.80) 0%, rgba(10,39,64,.34) 46%, rgba(10,39,64,0) 78%);
}

/* Filo col gradiente della X sul bordo inferiore: chiude l'hero e
   ripete la firma del marchio su ogni pagina. */
.ax-page-hero.et_pb_post_title:after{
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; z-index: 3;
  background: linear-gradient(90deg, var(--ax-crit), var(--ax-warn), var(--ax-ok));
}

.ax-page-hero .et_pb_title_container{
  position: relative; z-index: 2;
  width: 92%; max-width: 1400px;
  margin: auto auto 0 !important;              /* incolla il titolo in basso */
  padding: 0 0 clamp(44px, 5.5vw, 80px) !important;
  max-height: none !important;
}
.ax-page-hero .entry-title{
  color: #fff !important;
  font-size: clamp(32px, 4.6vw, 60px);
  line-height: 1.06; letter-spacing: -0.02em;
  max-width: 20ch; margin: 0;
  padding-left: 22px;
  border-left: 3px solid var(--ax-sky);        /* asta verticale a filo del testo */
  text-shadow: 0 2px 24px rgba(10,39,64,.5);   /* rete di sicurezza sui punti chiari */
}

@media (max-width: 767px){
  .ax-page-hero.et_pb_post_title{ min-height: clamp(300px, 48vh, 420px) }
  .ax-page-hero .entry-title{ padding-left: 16px; max-width: 16ch }
}

/* Messa a fuoco verticale per le foto il cui soggetto non sta al centro.
   Le immagini sono esportate a 2560x860 (2.98:1); su schermi molto larghi
   l'hero e' ancora piu' schiacciato e taglia sopra e sotto, quindi qui
   spostiamo il punto di ancoraggio. La classe ax-page-<slug> la aggiunge
   il child theme al tag body. */
.ax-page-satellite-operations    .ax-page-hero{ background-position: center 72% }
.ax-page-energy-utilities        .ax-page-hero{ background-position: center 62% }
.ax-page-critical-infrastructure .ax-page-hero{ background-position: center 60% }
.ax-page-smart-cities            .ax-page-hero{ background-position: center 60% }

/* --- PAGINE INDICE: hero senza foto ----------------------------------
   Le pagine di navigazione (Solutions, Platform, i quattro gruppi...)
   non hanno una foto: rappresentare "una panoramica" con un'immagine
   sarebbe arbitrario. Prendono invece gli archi del marchio, ingranditi
   fuori scala e appena accennati, piu' la riga di stato.
   Il child theme mette ax-hero-plain sul body quando la pagina non ha
   immagine in evidenza: la distinzione e' automatica, non c'e' nulla da
   impostare pagina per pagina.
   Niente riga di indicatori qui: i pallini di stato restano un gesto
   esclusivo della home. Ripetuti su otto pagine diventerebbero fregio.
   Tutto in CSS: zero immagini da caricare, zero peso. */

.ax-hero-plain .ax-page-hero.et_pb_post_title{
  background-color: var(--ax-navy-deep);
  background-image:
    radial-gradient(circle at 104% 50%, transparent 0 400px, rgba(129,207,242,.16)  400px 416px, transparent 416px),
    radial-gradient(circle at 104% 50%, transparent 0 520px, rgba(129,207,242,.11)  520px 531px, transparent 531px),
    radial-gradient(circle at 104% 50%, transparent 0 648px, rgba(129,207,242,.075) 648px 656px, transparent 656px),
    radial-gradient(circle at 104% 50%, transparent 0 790px, rgba(129,207,242,.05)  790px 796px, transparent 796px),
    radial-gradient(circle at 104% 50%, transparent 0 946px, rgba(129,207,242,.035) 946px 951px, transparent 951px),
    radial-gradient(circle at 100% 50%, rgba(18,98,149,.60) 0%, rgba(10,39,64,0) 66%);
}
/* qui il velo serve solo a sinistra: non c'e' una foto da domare */
.ax-hero-plain .ax-page-hero.et_pb_post_title:before{
  background: linear-gradient(96deg, rgba(10,39,64,.92) 0%, rgba(10,39,64,.55) 44%, rgba(10,39,64,0) 76%);
}

@media (max-width: 767px){
  .ax-hero-plain .ax-page-hero.et_pb_post_title{ background-position: 60% center }
}

/* --- MOBILE ---------------------------------------------------------
   Su telefono l'hero e' quasi quadrato (circa 393x409), mentre la foto e'
   larga 2,98:1. Con background-size:cover il browser riempie in altezza e
   taglia i lati: si vede solo il 32% centrale della larghezza.
   Per la maggior parte delle foto va bene, perche' il soggetto e' diffuso
   (monitor, rack, tralicci). Dove invece il soggetto e' una persona sul
   bordo destro, o una fila di antenne, spostiamo il punto di ancoraggio
   orizzontale. Sono numeri, si ritoccano in un secondo. */
@media (max-width: 767px){
  .ax-page-industrial-ot-scada     .ax-page-hero{ background-position: 65% center }
  .ax-page-building-management     .ax-page-hero{ background-position: 82% center }
  .ax-page-satellite-operations    .ax-page-hero{ background-position: 42% center }
  .ax-page-energy-utilities        .ax-page-hero{ background-position: 50% center }
  .ax-page-critical-infrastructure .ax-page-hero{ background-position: 40% center }
  .ax-page-smart-cities            .ax-page-hero{ background-position: 55% center }
}

/* corpo della pagina */
.et-l--body .et_pb_section_1_tb_body{ padding: clamp(48px,6vw,88px) 0 !important }
.et-l--body .et_pb_section_1_tb_body > .et_pb_row{ width: 92% !important; max-width: 1400px !important }

/* =====================================================================
   13. PAGINA 404
   =====================================================================
   Markup generato dallo shortcode [ax_404] (functions.php, sezione 7),
   messo in un modulo Testo dentro il template "404 Page" del Theme
   Builder. Stessa grammatica degli hero delle pagine indice: archi del
   marchio, velo diagonale, filo di stato in basso. */

/* La fascia deve toccare i bordi: annulliamo la gabbia della riga Divi.
   Nel Theme Builder conviene comunque azzerare i padding di sezione e
   riga, cosi' funziona anche sui browser senza :has(). */
.et-l--body .et_pb_section:has(.ax-404){ padding: 0 !important }
.et-l--body .et_pb_row:has(.ax-404){
  width: 100% !important; max-width: none !important;
  padding: 0 !important; margin: 0 !important;
}
.et-l--body .et_pb_module:has(.ax-404){ margin-bottom: 0 !important }

.ax-404{
  position: relative;
  min-height: clamp(500px, 66vh, 680px);
  display: flex; align-items: center; overflow: hidden;
  width: 100vw; margin-left: calc(50% - 50vw);
  background-color: var(--ax-navy-deep);
  /* gli stessi archi degli hero indice: cinque cerchi concentrici che
     escono dal bordo destro, piu' un alone blu */
  background-image:
    radial-gradient(circle at 104% 50%, transparent 0 400px, rgba(129,207,242,.16)  400px 416px, transparent 416px),
    radial-gradient(circle at 104% 50%, transparent 0 520px, rgba(129,207,242,.11)  520px 531px, transparent 531px),
    radial-gradient(circle at 104% 50%, transparent 0 648px, rgba(129,207,242,.075) 648px 656px, transparent 656px),
    radial-gradient(circle at 104% 50%, transparent 0 790px, rgba(129,207,242,.05)  790px 796px, transparent 796px),
    radial-gradient(circle at 104% 50%, transparent 0 946px, rgba(129,207,242,.035) 946px 951px, transparent 951px),
    radial-gradient(circle at 100% 50%, rgba(18,98,149,.55) 0%, rgba(10,39,64,0) 66%);
}
.ax-404:before{
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(96deg, rgba(10,39,64,.92) 0%, rgba(10,39,64,.5) 46%, rgba(10,39,64,0) 78%);
}
/* filo di stato: critico -> avviso -> normale, come su tutti gli hero */
.ax-404:after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px; z-index:3;
  background: linear-gradient(90deg, var(--ax-crit), var(--ax-warn), var(--ax-ok));
}

.ax-404__wrap{ position:relative; z-index:2; width:92%; max-width:1400px; margin:0 auto }

/* --- simbolo: archi del marchio interrotti -------------------------- */
/* Sta dietro al testo, a filigrana. L'arco piu' esterno e' tratteggiato
   e rosso: e' il segnale che si perde. */
.ax-404__mark{
  position:absolute; right:16%; top:50%; transform:translateY(-50%);
  z-index:1; width:410px; opacity:.42; pointer-events:none;
}
.ax-404__mark svg{ width:100%; height:auto; display:block }

/* --- targhetta 404 -------------------------------------------------- */
.ax-404__badge{
  display:inline-flex; align-items:center; gap:9px;
  background: var(--ax-crit); color:#fff;
  font-family: var(--ax-font-mono);
  font-size:13px; font-weight:700; letter-spacing:.16em;
  padding:7px 14px; border-radius:3px; margin-bottom:22px;
}
.ax-404__badge i{ width:7px; height:7px; border-radius:50%; background:#fff; opacity:.9 }

.ax-404__title{
  color:#fff !important;
  font-size: clamp(38px, 5.4vw, 68px); line-height:1.02; letter-spacing:-.03em;
  margin:0; padding-left:24px; border-left:3px solid var(--ax-sky);
}
.ax-404__lead{
  color:#A9C2D6; font-size:19px; line-height:1.7;
  max-width:54ch; margin:26px 0 0; padding-left:27px;
}

/* --- riga di log ---------------------------------------------------- */
/* Non e' decorazione: mostra il percorso che il visitatore ha davvero
   chiesto. Su un sito di monitoraggio, dire cosa e' successo e' il
   messaggio giusto. */
.ax-404__log{
  margin:38px 0 0; padding:16px 20px;
  border:1px solid rgba(129,207,242,.22); border-left:3px solid var(--ax-crit);
  background: rgba(129,207,242,.045);
  font-family: var(--ax-font-mono);
  font-size:13.5px; color:#8FA9BF;
  display:inline-flex; align-items:center; gap:14px; flex-wrap:wrap;
  max-width:100%; word-break:break-all;
}
.ax-404__log b{ color:#fff; font-weight:500 }
.ax-404__code{ color: var(--ax-crit); font-weight:600 }
.ax-404__dot{
  width:8px; height:8px; border-radius:50%; background: var(--ax-crit);
  box-shadow: 0 0 0 4px rgba(203,32,39,.18); flex:0 0 auto;
}

/* --- bottoni -------------------------------------------------------- */
/* Qui sono link veri, non moduli Divi: le regole della sezione 3 non
   li prendono, quindi li vestiamo sul posto. */
.ax-404__cta{ display:flex; gap:14px; margin:40px 0 0; padding-left:27px; flex-wrap:wrap }
.ax-404 .ax-btn{
  display:inline-flex; align-items:center; padding:14px 28px; border-radius:4px;
  font-size:15px; font-weight:500; text-decoration:none;
  border:1px solid transparent; transition: all .18s ease;
}
.ax-404 .ax-btn--sky{ background: var(--ax-sky); color: var(--ax-navy); font-weight:600 }
.ax-404 .ax-btn--sky:hover{ background:#fff; color: var(--ax-navy) }
.ax-404 .ax-btn--ghost{ border-color: rgba(255,255,255,.32); color:#fff }
.ax-404 .ax-btn--ghost:hover{ border-color:#fff; background: rgba(255,255,255,.08); color:#fff }

/* --- tablet e telefono ---------------------------------------------- */
/* Il simbolo si sposta in alto a destra e si smorza: sotto i 900px
   finirebbe sotto al testo e sporcherebbe la lettura. */
@media (max-width: 900px){
  .ax-404{ min-height:0; padding: 96px 0 72px; align-items:flex-start }
  .ax-404__mark{ top:9%; right:-4%; transform:none; width:190px; opacity:.20 }
  .ax-404__lead{ font-size:17px }
  .ax-404__log{ font-size:12px; gap:10px; padding:14px 16px }
}
@media (max-width: 600px){
  /* sul telefono il simbolo finirebbe dietro al titolo: lo alziamo,
     lo sporgiamo dal bordo e lo smorziamo ancora */
  .ax-404__mark{ top:1%; right:-12%; width:170px; opacity:.16 }
  .ax-404__title{ padding-left:16px }
  .ax-404__lead,
  .ax-404__cta{ padding-left:19px }
  .ax-404 .ax-btn{ width:100%; justify-content:center }
}







/* AX-LOGO-CSS-START */
/* ---------------------------------------------------------------------
   15. LOGO CLICCABILE
   Il link attorno al logo non deve cambiare l'aspetto dell'header:
   serve solo la manina e un fuoco visibile da tastiera.
   --------------------------------------------------------------------- */
.ax-logo-link { display: block; line-height: 0; }
.ax-logo-link img { transition: opacity .2s var(--ax-ease); }
.ax-logo-link:hover img { opacity: .8; }
.ax-logo-link:focus-visible { outline: 2px solid var(--ax-sky); outline-offset: 4px; }
/* AX-LOGO-CSS-END */












/* AX-HOME-START — non modificare questa riga: serve al riaggiornamento */
/* ---------------------------------------------------------------------
   14. HOME
   Classi usate solo dalla homepage. Tutto il resto della home usa le
   classi gia' presenti nelle sezioni 1-13 (ax-eyebrow, ax-lead, ax-card,
   ax-grid-hairline, ax-stat, ax-dark, ax-alt...).
   --------------------------------------------------------------------- */

/* --- 14.1 HERO -------------------------------------------------------
   IL VIDEO NON SI RITAGLIA MAI.
   Divi, di suo, ingrandisce il video di sfondo finche' copre la sezione:
   cosi' le scritte dentro al video finirebbero fuori dai bordi. Qui lo
   riportiamo a "contain" e diamo alla sezione lo stesso rapporto del
   video (16:9), cosi' su desktop combacia al pixel e non restano bande.

   Su telefono il fotogramma resta intero in cima e il testo scende sotto:
   la sezione ha un'imbottitura alta quanto il video (56.25vw = 9/16). */
/* Altezza dell'header globale: serve per far combaciare l'hero con la
   finestra. Se un giorno l'header cambia altezza, si cambia questo numero. */
:root { --ax-header-h: 109px; }

@media (min-width: 981px) {
  .ax-home-hero {
    /* L'hero finisce esattamente dove finisce la finestra: header + hero
       riempiono la prima schermata, senza che il video sbordi sotto. */
    height: max(560px, calc(100vh - var(--ax-header-h)));
    display: flex;
    flex-direction: column;
    justify-content: center;          /* blocco centrato nel video */
    padding-top: 3vw !important;
    /* piu' spazio sotto: sotto c'e' la barra di stato, il blocco resta
       centrato nello spazio che le sta sopra */
    padding-bottom: calc(3vw + 46px) !important;
  }
  /* Da amministratore connesso, WordPress aggiunge la sua barra in alto:
     32px che altrimenti spingono l'hero sotto il bordo dello schermo.
     Il visitatore non la vede, quindi vale solo per noi. */
  body.admin-bar .ax-home-hero {
    height: max(560px, calc(100vh - var(--ax-header-h) - 32px));
  }
}

/* Il blocco titolo + testo + bottoni + stato sta unito: Divi mette
   imbottiture generose su ogni riga, qui le azzeriamo e teniamo solo
   le distanze decise a mano. */
.ax-home-hero .et_pb_row {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.ax-home-hero .et_pb_module { margin-bottom: 0 !important; }
.ax-home-hero .ax-hero__copy { margin-bottom: 30px !important; }
.ax-home-hero .ax-btn-row .et_pb_button_module_wrapper { margin-bottom: 0 !important; }
.ax-home-hero .et_pb_section_video_bg { background: var(--ax-navy-deep); }
.ax-home-hero .et_pb_section_video_bg video {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
  min-width: 0 !important; min-height: 0 !important;
  max-width: none;
  transform: none !important;
  /* Su desktop l'hero e' alto quanto la finestra, quindi il video riempie
     e perde un po' sopra e sotto.

     Il 35% valeva per il filmato di prima, che teneva le scritte in alto.
     Il filmato IBC 2026 e' costruito simmetrico: i titoli cominciano al
     15% dell'inquadratura e la firma «ONE PLATFORM. COMPLETE CONTROL.»
     finisce all'85%. Al 35% quasi tutto il taglio finiva sul fondo e si
     mangiava la firma. Centrato, il taglio si divide in parti uguali:
     su una finestra normale restano una quarantina di pixel di margine
     sopra il primo titolo e sotto l'ultima riga. */
  object-fit: cover !important;
  object-position: center 50% !important;
}
@media (max-width: 980px) {
  /* Su telefono il fotogramma resta INTERO in cima e il testo scende sotto:
     lo schermo e' verticale, riempirlo taglierebbe via mezza inquadratura. */
  .ax-home-hero {
    padding-top: calc(56.25vw + 26px) !important;
  }
  .ax-home-hero .et_pb_section_video_bg video {
    object-fit: contain !important;
    object-position: top center !important;
  }
}

/* Velo attenuato: il video ha scritte sue, e un velo pesante le spegneva.
   Scende solo nella meta' bassa, dove sta il testo. Sopra e' trasparente.
   Per compensare, il testo ha un'ombra morbida: e' quella che tiene il
   contrasto quando sotto passa un fotogramma chiaro. */
.ax-home-hero:before {
  background: linear-gradient(to top,
              rgba(7,28,46,.55) 0%,
              rgba(7,28,46,.18) 26%,
              rgba(7,28,46,0)   52%);
}

/* --- 14.1b IL PANNELLO ------------------------------------------------
   Titolo, testo e bottoni stanno dentro un rettangolo di vetro: fondo
   navy semitrasparente e sfocatura, cosi' il video continua a leggersi
   sotto ma le scritte hanno una forma riconoscibile che le contiene.
   Sul bordo alto il filo a tre colori del marchio. */
/* Il riquadro di vetro e' stato tolto su richiesta della direzione
   (agosto 2026). Del pannello resta solo la misura: la colonna del testo
   non deve superare gli 820 px, altrimenti sul video le righe diventano
   troppo lunghe da leggere. Niente fondo, niente bordo, niente filo. */
.ax-home-hero .ax-hero__panel {
  position: relative;
  width: 92% !important;
  max-width: 820px !important;
  padding: 0 !important;
}

/* --- 14.1c BARRA DI STATO A FILO DEL FONDO ----------------------------
   I pallini escono dal pannello e vanno su fondo pieno: si leggono
   sempre, qualunque fotogramma passi sotto. Esclusiva della home. */
@media (min-width: 981px) {
  .ax-home-hero .ax-live-bar {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 4;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 13px clamp(20px,3vw,48px) !important;
    background: rgba(7,28,46,.94);
    border-top: 1px solid rgba(129,207,242,.18);
  }
  .ax-home-hero .ax-live-bar .et_pb_column {
    width: 100% !important;
    max-width: 1400px;
    margin: 0 auto !important;
  }
}
.ax-home-hero h1 {
  color: #fff !important;
  max-width: 20ch;
  margin: 0 auto 18px;
  text-shadow: 0 2px 30px rgba(4,18,30,.9), 0 1px 4px rgba(4,18,30,.7);
}
.ax-home-hero .ax-lead, .ax-home-hero .ax-lead p {
  color: #DCEAF4 !important;
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0 !important;
  text-shadow: 0 1px 18px rgba(4,18,30,.9);
}

.ax-home-hero .et_pb_button { backdrop-filter: blur(2px); }

/* --- 14.2 STATUS LIVE — esclusivo della home -------------------------
   Riga di stato sotto i bottoni dell'hero. Dentro ci vanno gli
   shortcode [ax_status]. I numeri si cambiano dal modulo Testo. */
.ax-live p {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px clamp(18px, 2.6vw, 38px);
  margin: 0 !important;
}
.ax-live__lab {
  font-family: var(--ax-font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #7FA3BE;
}
.ax-live .ax-status { font-size: 12.5px; color: #B7CEDF; text-shadow: 0 1px 10px rgba(4,18,30,.85); }
.ax-live .ax-status b, .ax-live .ax-status strong { color: #fff; font-weight: 500; }
.ax-live .ax-live__note {
  font-family: var(--ax-font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #7FA3BE;
  margin-left: auto;   /* si appoggia a destra della barra */
}

/* --- 14.3 BOTTONI IN RIGA -------------------------------------------
   Da mettere sulla COLONNA che contiene due moduli Pulsante. */
.ax-btn-row .et_pb_button_module_wrapper { display: inline-block !important; margin: 0 6px 10px !important; }
.ax-btn-row { text-align: center; }
/* Divi allinea i bottoni con una classe che li rimette in colonna: la scavalchiamo. */
.ax-btn-row .et_pb_button_module_wrapper.et_pb_button_alignment_right,
.ax-btn-row .et_pb_button_module_wrapper.et_pb_button_alignment_left,
.ax-btn-row .et_pb_button_module_wrapper.et_pb_button_alignment_center { display: inline-block !important; }

/* --- 14.4 TESTATA DI SEZIONE ----------------------------------------
   Riga a due colonne: titolo a sinistra, testo di apertura a destra,
   allineati in basso come nei riferimenti (skyline, mosaic). */
@media (min-width: 981px) {
  .ax-head .et_pb_column { display: flex; flex-direction: column; justify-content: flex-end; }
  /* La colonna dei bottoni non deve diventare flex, altrimenti i due
     pulsanti si impilano invece di stare affiancati. */
  .ax-head .et_pb_column.ax-btn-row { display: block; }
}

/* --- 14.5 AUGEX AL CENTRO -------------------------------------------- */
.ax-orb-core {
  width: clamp(190px, 19vw, 250px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--ax-navy), var(--ax-navy-deep));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
}
.ax-orb-core:before, .ax-orb-core:after {
  content: ""; position: absolute; inset: -26px; border-radius: 50%;
  border: 1px solid var(--ax-line);
}
.ax-orb-core:after { inset: -58px; border-color: rgba(15,53,87,.07); }
.ax-orb-core h3, .ax-orb-core h2 {
  color: #fff !important;
  font-size: clamp(28px, 3vw, 40px) !important;
  margin: 0 !important;
}
.ax-orb-core p {
  font-family: var(--ax-font-mono);
  font-size: 11px !important;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ax-sky) !important;
  margin: 8px 0 0 !important;
}
/* Le card dei quattro gruppi. */
.ax-orb-card {
  background: #fff;
  border: 1px solid var(--ax-line);
  padding: clamp(20px, 2vw, 28px) !important;
  position: relative;
  height: 100%;
}
.ax-orb-card:before {
  content: ""; position: absolute; top: 0; left: 0; width: 34px; height: 2px;
  background: var(--ax-blue);
}
.ax-orb-card h4 { margin: 0 0 10px !important; font-size: 17px !important; }
/* La card in evidenza: Environmental. Filo a tre colori per tutta la larghezza. */
.ax-orb-card--focus { border-color: rgba(18,98,149,.4); box-shadow: 0 18px 44px -28px rgba(15,53,87,.4); }
.ax-orb-card--focus:before {
  width: 100%;
  background: linear-gradient(90deg, var(--ax-ok), var(--ax-warn), var(--ax-crit));
}

/* --- 14.6 ELENCHI DI LINK --------------------------------------------
   Le liste puntate dentro un modulo Testo diventano un indice a filo. */
.ax-linklist ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.ax-linklist li {
  border-top: 1px solid var(--ax-line);
  padding: 12px 0 !important;
  margin: 0 !important;
  font-size: 15px;
  line-height: 1.4;
}
.ax-linklist li:first-child { border-top: 0; }
.ax-linklist a { color: var(--ax-ink); transition: color .2s var(--ax-ease); }
.ax-linklist a:hover { color: var(--ax-blue); }
.ax-linklist strong a, .ax-linklist a strong { color: var(--ax-navy); }
.ax-dark .ax-linklist li { border-color: rgba(129,207,242,.18); }
.ax-dark .ax-linklist a { color: var(--ax-on-dark); }

/* --- 14.7 MAPPA ------------------------------------------------------
   Cornice "software" attorno al video (o all'SVG provvisorio). */
.ax-map { border: 1px solid var(--ax-line); background: #fff; padding: 8px; position: relative; }
.ax-map__bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px 14px; flex-wrap: wrap; }
.ax-map__dots { display: flex; gap: 6px; }
.ax-map__dots i { width: 8px; height: 8px; border-radius: 50%; }
.ax-map__dots i:nth-child(1) { background: var(--ax-ok); }
.ax-map__dots i:nth-child(2) { background: var(--ax-warn); }
.ax-map__dots i:nth-child(3) { background: var(--ax-crit); }
.ax-map__title {
  font-family: var(--ax-font-mono); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ax-navy);
}
.ax-map__note {
  margin-left: auto; font-family: var(--ax-font-mono); font-size: 11.5px;
  letter-spacing: .04em; color: var(--ax-muted);
}
.ax-map__canvas {
  position: relative; overflow: hidden; aspect-ratio: 21/9;
  background: linear-gradient(160deg, var(--ax-navy-deep), #071C2E 60%, var(--ax-navy));
}
.ax-map__canvas svg, .ax-map__canvas video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.ax-map__ring { animation: ax-ring 2.4s ease-out infinite; transform-origin: 690px 215px; }
@keyframes ax-ring { 0% { transform: scale(.4); opacity: .9 } 100% { transform: scale(1.5); opacity: 0 } }
@media (prefers-reduced-motion: reduce) { .ax-map__ring { animation: none; opacity: .35 } }
.ax-map__legend { position: absolute; left: 20px; bottom: 18px; display: flex; gap: 20px; z-index: 3; }
.ax-map__legend .ax-status { color: #A8C4D8; text-transform: uppercase; font-size: 11.5px; }
@media (max-width: 980px) {
  .ax-map__canvas { aspect-ratio: 4/3; }
  .ax-map__note { margin-left: 0; width: 100%; padding-top: 4px; }
}

/* --- 14.8 PAESI E BANDIERE -------------------------------------------
   Bandiere SVG servite dal nostro server (flag-icons, licenza MIT):
   stesso aspetto su Mac, Windows e Android. */
.ax-big, .ax-big p {
  font-size: clamp(48px, 6.5vw, 92px) !important;
  letter-spacing: -.04em !important;
  line-height: .9 !important;
  color: var(--ax-navy) !important;
  margin: 0 0 10px !important;
}
/* Appesa di lato a un numero alto 92 px, l'etichetta spariva: si leggeva
   «50+» e poi subito il titolo, come se la frase fosse monca. Sotto il
   numero, e con il colore del marchio invece del grigio, si legge. */
.ax-big small {
  display: block;
  margin: 10px 0 0;
  vertical-align: baseline;
  font-family: var(--ax-font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ax-navy);
}
.ax-countries {
  display: flex; flex-wrap: wrap; gap: 1px;
  background: var(--ax-line); border: 1px solid var(--ax-line);
}
.ax-country {
  background: #fff; display: flex; align-items: center; gap: 10px;
  padding: 13px 18px; font-size: 14.5px; color: var(--ax-ink);
  flex: 1 1 auto; min-width: 180px;
}
.ax-country img { width: 22px; height: 16px; object-fit: cover; display: block; box-shadow: 0 0 0 1px rgba(15,53,87,.09); }
.ax-country em {
  font-style: normal; font-family: var(--ax-font-mono); font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ax-muted); margin-left: auto;
}
.ax-country--more { background: var(--ax-bg-alt); color: var(--ax-blue); font-weight: 600; justify-content: center; }

/* --- 14.9 FOCUS AMBIENTALE ------------------------------------------- */
.ax-focus-badge {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--ax-line); padding: 9px 16px;
  font-family: var(--ax-font-mono); font-size: 11.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ax-navy); margin-bottom: 24px;
}
.ax-focus-badge:before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ax-crit); box-shadow: 0 0 0 4px rgba(203,32,39,.16);
}

/* --- 14.10 BANDA FINALE ---------------------------------------------- */
.ax-cta { position: relative; overflow: hidden; }
.ax-cta:before {
  content: ""; position: absolute; right: -6%; top: -60%; width: 52%; aspect-ratio: 1;
  border-radius: 50%; border: 1px solid rgba(129,207,242,.16);
  box-shadow: 0 0 0 60px rgba(129,207,242,.04); pointer-events: none;
}
.ax-cta .et_pb_row { position: relative; z-index: 2; }
@media (min-width: 981px) { .ax-cta .ax-btn-row { text-align: right; } }

/* --- 14.11 MOBILE ---------------------------------------------------- */
@media (max-width: 980px) {
  .ax-home-hero h1 { max-width: none; }
  /* Su telefono il testo sta sul navy sotto al video: la colonna prende
     tutta la larghezza disponibile. */
  .ax-home-hero .ax-hero__panel {
    width: 100% !important;
    max-width: none !important;
  }
  .ax-home-hero .ax-live-bar {
    margin-top: 30px !important;
    padding-top: 18px !important;
    border-top: 1px solid rgba(129,207,242,.28);
  }
  .ax-live__note { margin-left: 0 !important; }
  .ax-btn-row, .ax-cta .ax-btn-row { text-align: left; }
  .ax-orb-core:after { display: none; }
  .ax-orb-core { margin: 10px auto 30px; }
  .ax-country { min-width: 100%; }
}
/* AX-HOME-END */

/* AX-INNER-START — non modificare questa riga: serve al riaggiornamento */
/* ---------------------------------------------------------------------
   16. PAGINE INTERNE — indici di gruppo e casi d'uso
   L'hero di queste pagine arriva gia' dal template del Theme Builder:
   qui c'e' solo quello che sta sotto.
   --------------------------------------------------------------------- */

/* --- 16.1 CARD DELLE SOLUZIONI FIGLIE --------------------------------
   Ogni card e' una COLONNA Divi: dentro un modulo Immagine e un modulo
   Testo. La foto e' quella in evidenza della pagina figlia, quindi si
   aggiorna da sola se un giorno la si cambia. */
.ax-cards .et_pb_column {
  background: #fff;
  border: 1px solid var(--ax-line);
  transition: border-color .25s var(--ax-ease), box-shadow .25s var(--ax-ease);
  margin-bottom: 26px !important;
}
.ax-cards .et_pb_column:hover {
  border-color: rgba(18,98,149,.42);
  box-shadow: 0 22px 50px -32px rgba(15,53,87,.45);
}
.ax-cards .et_pb_image { margin-bottom: 0 !important; }
.ax-cards .et_pb_image .et_pb_image_wrap { display: block; width: 100%; }
.ax-cards .et_pb_image img {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-bottom: 1px solid var(--ax-line);
}
.ax-cards .ax-fcard__body { padding: 24px 26px 26px !important; }
.ax-cards .ax-fcard__body h3 { margin: 0 0 8px !important; font-size: 21px !important; }
.ax-cards .ax-fcard__body p { margin: 0 0 14px !important; font-size: 14.5px; }
.ax-cards .ax-fcard__body .ax-go {
  font-size: 14px; font-weight: 600; color: var(--ax-blue);
}
.ax-cards .ax-fcard__body a:hover .ax-go { color: var(--ax-navy); }
.ax-cards .ax-kicker, .ax-cards .ax-kicker p {
  font-family: var(--ax-font-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;
  color: var(--ax-muted) !important;
  margin: 0 0 10px !important;
}

/* --- 16.2 PASTIGLIE DI COLLEGAMENTO ---------------------------------- */
.ax-pills p { margin: 0 !important; display: flex; flex-wrap: wrap; gap: 10px; }
.ax-pills a {
  display: inline-block;
  border: 1px solid var(--ax-line);
  background: #fff;
  padding: 10px 18px;
  font-size: 14.5px;
  color: var(--ax-navy);
  transition: all .2s var(--ax-ease);
}
.ax-pills a:hover { border-color: var(--ax-blue); color: var(--ax-blue); }
.ax-alt .ax-pills a { background: #fff; }

/* --- 16.3 ETICHETTE DELLA PIATTAFORMA (banda scura) ------------------- */
.ax-chips p { margin: 0 !important; display: flex; flex-wrap: wrap; gap: 9px; }
.ax-chips span {
  display: inline-flex; align-items: center;
  border: 1px solid rgba(129,207,242,.3);
  padding: 9px 15px;
  font-family: var(--ax-font-mono);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ax-on-dark);
}

/* --- 16.4 ARGOMENTO ASSORBITO ----------------------------------------
   Le quattro Use Cases accorpate vivono come sezione dentro le cinque
   rimaste: linea sottile sopra, per dire "questo e' un di piu'". */
.ax-also {
  border-top: 1px solid var(--ax-line);
  margin-top: 46px !important;
  padding-top: 40px !important;
}
.ax-also h3 { margin: 0 !important; font-size: 22px !important; }

/* --- 16.5 MOBILE ------------------------------------------------------ */
@media (max-width: 980px) {
  .ax-cards .et_pb_column { margin-bottom: 20px !important; }
}
/* AX-INNER-END */

/* AX-PLAT-START — non modificare questa riga: serve al riaggiornamento */
/* ---------------------------------------------------------------------
   17. PLATFORM
   --------------------------------------------------------------------- */

/* --- 17.1 SCHERMATA DELLA PIATTAFORMA --------------------------------
   Usa la stessa cornice della mappa (sezione 14.7). Qui solo il
   riquadro di attesa e l'immagine, quando ci sara'. */
.ax-shot .ax-map__canvas { display: flex; align-items: center; justify-content: center; }
.ax-shot .ax-map__canvas img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ax-shot__empty {
  position: relative;
  font-family: var(--ax-font-mono);
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(129,207,242,.65);
  border: 1px solid rgba(129,207,242,.3);
  padding: 12px 18px;
}

/* --- 17.2 RIQUADRO IN EVIDENZA (AugeX nell'indice Platform) ---------- */
.ax-feat {
  position: relative;
  border: 1px solid rgba(18,98,149,.35) !important;
  background: #fff;
  padding: 34px clamp(24px,2.6vw,34px) 30px !important;
  margin-bottom: 26px !important;
}
.ax-feat:before {
  content: "";
  position: absolute; top: -1px; left: -1px; right: -1px; height: 3px;
  background: linear-gradient(90deg, var(--ax-ok), var(--ax-warn), var(--ax-crit));
}
.ax-feat h3 { font-size: 27px !important; margin: 0 0 10px !important; }

/* --- 17.3 INDICE A FILO ("The rest of the platform") ----------------- */
.ax-list p { margin: 0 !important; }
.ax-list a.ax-row {
  display: flex; align-items: baseline; gap: 26px;
  padding: 18px 0;
  border-bottom: 1px solid var(--ax-line);
  color: var(--ax-ink);
  transition: color .2s var(--ax-ease);
}
.ax-list a.ax-row:first-of-type { border-top: 1px solid var(--ax-line); }
.ax-list a.ax-row:hover { color: var(--ax-blue); }
.ax-list a.ax-row b {
  font-family: var(--ax-font-display, inherit);
  font-weight: 600; font-size: 19px; letter-spacing: -.02em; white-space: nowrap;
}
.ax-list a.ax-row em { font-style: normal; font-size: 14.5px; color: var(--ax-muted); flex: 1; }
.ax-list a.ax-row i { font-style: normal; font-size: 14px; font-weight: 600; color: var(--ax-blue); }

@media (max-width: 780px) {
  .ax-list a.ax-row { flex-direction: column; gap: 6px; }
  .ax-list a.ax-row b { white-space: normal; }
}
/* AX-PLAT-END */

/* AX-FONTS-START — non modificare questa riga: serve al riaggiornamento */
/* ---------------------------------------------------------------------
   18. FONT SERVITI DAL NOSTRO SERVER
   I due font del marchio stanno in assets/fonts/ e non vengono piu'
   chiesti a Google. Due motivi: la pagina carica prima, e sotto GDPR
   chiamare fonts.googleapis.com significa mandare l'indirizzo IP del
   visitatore a un terzo senza averlo chiesto.

   Solo il sottoinsieme latino e i pesi che usiamo davvero: 124 KB in
   tutto contro i circa 400 KB che scaricava prima.
   --------------------------------------------------------------------- */

/* --- Space Grotesk: titoli ------------------------------------------- */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/space-grotesk-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/space-grotesk-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/space-grotesk-latin-700-normal.woff2') format('woff2');
}

/* --- Inter: testo ---------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-latin-600-normal.woff2') format('woff2');
}
/* AX-FONTS-END */


/* ---------------------------------------------------------------------
   19. PAGINE LEGALI
   Privacy Policy, Cookie Policy, Legal Notice. Testo lungo che nessuno
   legge per piacere: colonna stretta, righe alte, titoli separati da un
   filo. La classe si scrive sul modulo Testo, dentro la riga .ax-narrow.
   --------------------------------------------------------------------- */
/* AX-LEGAL-START */

.et_pb_text.ax-legal {
  max-width: 720px;
}

.et_pb_text.ax-legal p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--ax-ink);
  margin-bottom: 1.1em;
}

.et_pb_text.ax-legal h3 {
  font-size: clamp(19px, 2.1vw, 23px);
  line-height: 1.25;
  letter-spacing: var(--ax-tracking);
  color: var(--ax-navy);
  margin: 2.1em 0 0.8em;
  padding-top: 1.9em;
  border-top: 1px solid var(--ax-line);
}

/* Il primo titolo non ha bisogno del filo: sopra c'e' gia' il sommario. */
.et_pb_text.ax-legal h3:first-of-type {
  border-top: 0;
  padding-top: 0;
  margin-top: 1.4em;
}

/* Data di aggiornamento: piccola, monospaziata, come le etichette di stato. */
.et_pb_text.ax-legal .ax-legal__date {
  font-family: var(--ax-font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ax-muted);
  margin-bottom: 2em;
}

.et_pb_text.ax-legal .ax-legal__lead {
  font-size: clamp(18px, 1.9vw, 21px);
  line-height: 1.6;
}

/* Riquadro coi dati societari. */
.et_pb_text.ax-legal .ax-legal__block {
  background: var(--ax-bg-alt);
  border-left: 2px solid var(--ax-sky);
  padding: 20px 24px;
  line-height: 1.7;
}

.et_pb_text.ax-legal .ax-legal__list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.6em;
}

.et_pb_text.ax-legal .ax-legal__list li {
  position: relative;
  padding: 10px 0 10px 22px;
  border-top: 1px solid var(--ax-line);
  font-size: 15px;
  line-height: 1.6;
}

.et_pb_text.ax-legal .ax-legal__list li:last-child {
  border-bottom: 1px solid var(--ax-line);
}

.et_pb_text.ax-legal .ax-legal__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 1.15em;
  width: 6px;
  height: 1px;
  background: var(--ax-sky);
}

/* Finalita' e base giuridica: due colonne a filo, non una tabella pesante. */
.et_pb_text.ax-legal .ax-legal__table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.6em;
}

.et_pb_text.ax-legal .ax-legal__table td {
  border-top: 1px solid var(--ax-line);
  padding: 14px 0;
  vertical-align: top;
  font-size: 15px;
  line-height: 1.6;
}

.et_pb_text.ax-legal .ax-legal__table tr:last-child td {
  border-bottom: 1px solid var(--ax-line);
}

.et_pb_text.ax-legal .ax-legal__table td:first-child {
  width: 42%;
  padding-right: 28px;
  font-weight: 600;
  color: var(--ax-navy);
}

.et_pb_text.ax-legal a {
  color: var(--ax-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- 19.1 MOBILE ------------------------------------------------------ */

@media (max-width: 640px) {
  .et_pb_text.ax-legal .ax-legal__table td,
  .et_pb_text.ax-legal .ax-legal__table td:first-child {
    display: block;
    width: 100%;
    padding-right: 0;
  }
  .et_pb_text.ax-legal .ax-legal__table td:first-child {
    border-top: 1px solid var(--ax-line);
    padding-bottom: 2px;
  }
  .et_pb_text.ax-legal .ax-legal__table td + td {
    border-top: 0;
    padding-top: 0;
    color: var(--ax-muted);
  }
}

/* AX-LEGAL-END */

/* AX-LEGAL2-START */

/* Colonna del testo legale centrata nella pagina: la riga resta larga
   1400 (Divi la impone con un selettore che vince su .ax-narrow), quindi
   a centrare il blocco ci pensa il modulo. */
.et_pb_text.ax-legal {
  margin-left: auto;
  margin-right: auto;
}

/* --- Elenco a filo: anche le righe SENZA link -------------------------
   .ax-list stilava solo gli <a>. Le righe di sola descrizione (Services,
   Partners, News & Events) sono <span> e restavano testo continuo,
   incollato riga a riga. Stesse regole, senza hover. */
.ax-list span.ax-row {
  display: flex;
  align-items: baseline;
  gap: 26px;
  padding: 18px 0;
  border-bottom: 1px solid var(--ax-line);
  color: var(--ax-ink);
}
.ax-list span.ax-row:first-of-type { border-top: 1px solid var(--ax-line); }
.ax-list span.ax-row b {
  font-family: var(--ax-font-display, inherit);
  font-weight: 600; font-size: 19px; letter-spacing: -.02em; white-space: nowrap;
}
.ax-list span.ax-row em { font-style: normal; font-size: 14.5px; color: var(--ax-muted); flex: 1; }

@media (max-width: 780px) {
  .ax-list span.ax-row { flex-direction: column; gap: 6px; }
  .ax-list span.ax-row b { white-space: normal; }
}

/* AX-LEGAL2-END */

/* ---------------------------------------------------------------------
   20. CORREZIONI MOBILE
   --------------------------------------------------------------------- */
/* AX-MOBILE-START */

/* --- 20.1 VIDEO DELL'HERO SU TELEFONO ---------------------------------
   La sezione 5 chiedeva object-fit: contain sotto i 980px per mostrare
   il fotogramma intero. Non bastava: Divi dimensiona l'elemento <video>
   con width/height inline calcolati in JavaScript per coprire la
   sezione, quindi a 393px il video era largo 1226 e ne restava visibile
   solo la striscia centrale — le scritte del filmato tagliate ai lati.
   Qui annulliamo quelle misure inline: larghezza piena, fotogramma
   intero in cima, campo navy sotto, testo che scende. */
@media (max-width: 980px) {
  .ax-video-full .et_pb_section_video_bg video,
  .ax-video-full video {
    width: 100% !important;
    height: 100% !important;
    left: 0 !important;
    top: 0 !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: 50% 0% !important;
    background: var(--ax-navy-deep);
  }
  .ax-video-full .et_pb_section_video_bg {
    background: var(--ax-navy-deep);
  }
  /* MediaElement avvolge il video in due contenitori con misure inline. */
  .ax-video-full .mejs-container,
  .ax-video-full .mejs-mediaelement {
    width: 100% !important;
    height: 100% !important;
    left: 0 !important;
    margin: 0 !important;
  }
}

/* --- 20.2 BERSAGLIO DEL MENU -----------------------------------------
   L'hamburger misurava 32×32: sotto la soglia di 44px sotto la quale
   il dito sbaglia. Cresce l'area sensibile, non l'icona. */
@media (max-width: 980px) {
  .et_mobile_nav_menu,
  .et_mobile_nav_menu .mobile_menu_bar {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* AX-MOBILE-END */

/* ---------------------------------------------------------------------
   21. HOME PIU' CORTA SUL TELEFONO
   La home misurava 11.313 px a 393 px di larghezza: tredici schermate.
   Non c'era contenuto inutile — c'erano griglie da tre o quattro colonne
   che sul telefono diventavano una colonna sola. Qui le rimettiamo a due,
   dove il testo lo consente. Niente di questo tocca il desktop.
   --------------------------------------------------------------------- */
/* AX-COMPACT-START */

@media (max-width: 980px) {

  /* --- 21.1 PAESI A DUE COLONNE --------------------------------------
     Era min-width: 100% (sezione 14): un paese per riga, diciannove righe
     per 1.560 px. A due colonne diventano dieci righe. */
  .ax-country {
    min-width: calc(50% - 1px);
    padding: 10px 12px;
    font-size: 13.5px;
    gap: 8px;
  }
  .ax-country em { font-size: 9.5px; letter-spacing: .08em; }
  .ax-country img { width: 20px; height: 14px; }

  /* --- 21.2 GRIGLIE A QUARTI: DUE PER RIGA ---------------------------
     Vale per «Inside the core», l'indice Solutions e i numeri della
     company. Le griglie a terzi restano impilate: hanno testi piu' lunghi. */
  .ax-grid-hairline { display: flex; flex-wrap: wrap; }
  .ax-grid-hairline .et_pb_column_1_4 {
    width: 50% !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    padding: 18px 14px 18px 0;
    border-top: 1px solid var(--ax-line);
  }
  .ax-dark .ax-grid-hairline .et_pb_column_1_4 { border-top-color: rgba(129,207,242,.18); }
  .ax-grid-hairline .et_pb_column_1_4:nth-child(2n) { padding-right: 0; padding-left: 14px; }
  .ax-grid-hairline .et_pb_column_1_4 h4 { font-size: 16px; }
  .ax-grid-hairline .et_pb_column_1_4 p  { font-size: 13.5px; line-height: 1.5; }
  .ax-grid-hairline .et_pb_column_1_4 .ax-stat,
  .ax-grid-hairline .et_pb_column_1_4 .ax-stat h2,
  .ax-grid-hairline .et_pb_column_1_4 .ax-stat h3 { font-size: 30px; }

  /* --- 21.3 INDICE SOLUTIONS: SOLO I QUATTRO GRUPPI -------------------
     Le tredici voci figlie valevano 1.385 px. Sul telefono restano i
     quattro gruppi, cliccabili, piu' il bottone verso l'indice completo.
     Le card attorno ad AugeX non sono toccate: quelle sono la mappa del
     prodotto e devono restare leggibili per intero. */
  body.home .ax-grid-hairline .ax-linklist ul { display: none; }
  body.home .ax-grid-hairline .ax-linklist h4 { margin-bottom: 0; }
  body.home .ax-grid-hairline .ax-linklist h4 a { color: var(--ax-ink); text-decoration: none; }
  body.home .ax-grid-hairline .ax-linklist h4 a::after { content: " →"; color: var(--ax-blue); }

  /* Righe che esistono solo sul telefono (il bottone «See all»). */
  .ax-only-phone { display: block; }

  /* --- 21.4 RESPIRO TRA LE SEZIONI -----------------------------------
     Da 56 a 40 px sopra e sotto. Restano fuori l'hero, la banda finale e
     il footer, che hanno un ritmo loro. */
  #page-container .et_pb_section:not(.ax-hero):not(.ax-home-hero):not(.ax-cta):not([class*="_tb_header"]):not([class*="_tb_footer"]) {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  /* --- 21.5 LE CARD ATTORNO AD AUGEX — DISATTIVATO -------------------
     Provato e misurato: a due colonne le card sono larghe 151 px e i nomi
     delle soluzioni vanno su due righe («Environmental Monitoring & Early
     Warning» su tre). Si guadagnano 345 px, il 3% della pagina, al prezzo
     della leggibilita' proprio dove il visitatore sceglie dove andare.
     Il codice resta qui: per attivarlo, togliere i commenti. Serve anche
     la classe ax-orb-row sulle due righe, gia' messa in antailix-home.php.

     .ax-orb-row { display: flex; flex-wrap: wrap; }
     .ax-orb-row .et_pb_column_1_2 {
     width: 50% !important;
     margin-right: 0 !important;
     margin-bottom: 0 !important;
     }
     .ax-orb-row .ax-orb-card { padding: 16px 12px; }
     .ax-orb-row .ax-orb-card h4 { font-size: 15px; line-height: 1.25; }
     .ax-orb-row .ax-orb-card li a { font-size: 12.5px; line-height: 1.4; }
     ------------------------------------------------------------------ */
}

/* Sul desktop le righe riservate al telefono non esistono. Scritta come
   min-width e non come regola secca: cosi' non puo' piu' scavalcare, per
   ordine nel foglio, la regola che le accende sotto i 980 px. */
@media (min-width: 981px) { .ax-only-phone { display: none; } }

/* AX-COMPACT-END */

/* ---------------------------------------------------------------------
   22. HOME SU TELEFONO — SECONDO GIRO
   Quattro punti visti su iPhone e decisi insieme: i bottoni dell'hero,
   la sezione AugeX che ripeteva l'indice, il focus ambientale che si
   srotolava come una sezione qualunque, e le soluzioni come riquadri.
   Tutto dentro la media query: il desktop non cambia di una virgola.
   --------------------------------------------------------------------- */
/* AX-HOME2-START */

@media (max-width: 980px) {

  /* --- 22.1 I DUE BOTTONI DELL'HERO -----------------------------------
     Sul desktop .ax-btn-row li affianca. Sul telefono restavano affiancati
     in 378 px: larghi 172 e 153, con 12 px in mezzo e il gruppo spostato a
     sinistra (6 px di qua, 35 di la'). Sotto i 980 px vanno in colonna,
     a tutta larghezza, ben staccati. */
  .ax-btn-row .et_pb_button_module_wrapper,
  .ax-btn-row .et_pb_button_module_wrapper.et_pb_button_alignment_left,
  .ax-btn-row .et_pb_button_module_wrapper.et_pb_button_alignment_right,
  .ax-btn-row .et_pb_button_module_wrapper.et_pb_button_alignment_center {
    display: block !important;
    margin: 0 0 12px !important;
  }
  .ax-btn-row .et_pb_button_module_wrapper:last-child { margin-bottom: 0 !important; }
  .ax-btn-row .et_pb_button_module_wrapper { text-align: center; }
  /* Larghezza sul contenuto, non sullo schermo: a tutta larghezza erano
     due barre che schiacciavano il pannello di vetro. */
  .ax-btn-row .et_pb_button {
    display: inline-block;
    width: auto;
    min-width: 210px;
    text-align: center;
  }

  /* --- 22.2 AUGEX: IL NUCLEO, NON L'ELENCO ----------------------------
     L'orbita di quattro card elencava gli stessi tredici nomi che la
     sezione Solutions ripete due schermate piu' sotto. Sul telefono
     sparisce e lascia il posto al nucleo con i quattro verbi della
     piattaforma e ai quattro domini come porte. */
  .ax-orb-row,
  .ax-orb-core-row { display: none !important; }

  .ax-mcore {
    background: var(--ax-navy-deep);
    color: #fff;
    padding: 26px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .ax-mcore::after {
    content: "";
    position: absolute;
    inset: auto -40% -70% -40%;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(129,207,242,.22), transparent);
  }
  .ax-mcore h3 {
    margin: 0;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -.02em;
    color: #fff;
  }
  .ax-mcore p {
    margin: 8px 0 0;
    font-family: var(--ax-font-mono);
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ax-sky);
  }
  .ax-mverbi {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 16px;
    position: relative;
    z-index: 1;
  }
  .ax-mverbi span {
    font-family: var(--ax-font-mono);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ax-on-dark);
    border: 1px solid rgba(129,207,242,.3);
    padding: 5px 9px;
  }

  .ax-mdomini {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--ax-line);
    border: 1px solid var(--ax-line);
    border-top: 0;
  }
  .ax-mdomini a {
    background: #fff;
    padding: 14px 12px;
    text-decoration: none;
    color: var(--ax-ink);
    display: block;
  }
  .ax-mdomini a b {
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.01em;
  }
  .ax-mdomini a em {
    display: block;
    font-style: normal;
    font-family: var(--ax-font-mono);
    font-size: 9.5px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ax-muted);
    margin-top: 6px;
  }
  /* Il dominio ambientale porta il segno del focus, come nei riquadri. */
  .ax-mdomini a:nth-child(4) { box-shadow: inset 3px 0 0 var(--ax-crit); }

  /* --- 22.3 SPECIAL FOCUS: UNA SCHEDA, NON UNA SEZIONE -----------------
     Su desktop e' a due colonne. Impilata diventava indistinguibile dal
     resto: qui la chiudiamo in una scheda col filo rosso della scala di
     severita', immagine sotto il titolo, tre fatti a filo, bottone in
     fondo a tutta larghezza (quello di sopra e' nascosto). */
  .ax-focus > .et_pb_row {
    background: #fff;
    border: 1px solid var(--ax-line);
    border-left: 3px solid var(--ax-crit);
    padding: 20px 16px !important;
    margin-bottom: 0;
    width: 92%;
  }
  .ax-focus > .et_pb_row + .et_pb_row {
    border-top: 0;
    padding-top: 0 !important;
  }
  .ax-focus .ax-focus-badge {
    border: 0;
    padding: 0 0 0 16px;
    margin-bottom: 14px;
    font-size: 10.5px;
    color: var(--ax-crit);
    position: relative;
  }
  .ax-focus .ax-focus-badge:before { position: absolute; left: 0; top: 6px; }
  .ax-focus h2 { font-size: 21px; line-height: 1.2; }
  .ax-focus .et_pb_image { margin: 0 0 16px; }
  .ax-focus .ax-lead p { font-size: 14px; line-height: 1.55; }
  /* I tre fatti diventano righe: etichetta a sinistra, spiegazione accanto. */
  .ax-focus .ax-grid-hairline .et_pb_column {
    width: 100% !important;
    margin: 0 !important;
    border-top: 1px solid var(--ax-line);
    padding: 10px 0;
  }
  .ax-focus .ax-grid-hairline h4 {
    display: inline;
    font-size: 13.5px;
    margin-right: 8px;
  }
  .ax-focus .ax-grid-hairline p {
    display: inline;
    font-size: 13.5px;
    color: var(--ax-muted);
  }
  .ax-focus .ax-only-phone .et_pb_button { display: block; width: 100%; text-align: center; }

  /* --- 22.4 SOLUTIONS: QUATTRO RIQUADRI --------------------------------
     Due per riga, con il conteggio delle soluzioni. Il gruppo ambientale
     tiene il filo rosso, cosi' la scheda qui sopra e questi riquadri si
     parlano. Vale solo per la sezione dell'indice: le altre griglie a
     quarti della home restano come sono. */
  .ax-solutions-index .ax-grid-hairline .et_pb_column_1_4 {
    width: calc(50% - 5px) !important;
    margin: 0 10px 10px 0 !important;
    padding: 0 !important;
    border-top: 0;
  }
  .ax-solutions-index .ax-grid-hairline .et_pb_column_1_4:nth-child(2n) { margin-right: 0 !important; }
  .ax-solutions-index .ax-linklist {
    background: #fff;
    border: 1px solid var(--ax-line);
    padding: 16px 14px;
    min-height: 116px;
  }
  .ax-solutions-index .ax-grid-hairline .et_pb_column_1_4:nth-child(4) .ax-linklist {
    border-left: 3px solid var(--ax-crit);
  }
  .ax-solutions-index .ax-linklist h4 { font-size: 14.5px; line-height: 1.25; margin: 0; }
  .ax-solutions-index .ax-linklist h4 a { color: var(--ax-ink); text-decoration: none; }
  .ax-solutions-index .ax-linklist h4 a::after { content: ""; }
  .ax-solutions-index .ax-linklist .ax-count {
    display: block;
    font-family: var(--ax-font-mono);
    font-size: 9.5px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ax-muted);
    margin: 8px 0 0;
  }

  /* Elementi che sul telefono non servono. */
  .ax-no-phone { display: none !important; }
}

/* Il conteggio esiste solo sul telefono: sul desktop sotto il titolo
   ci sono gia' le voci per esteso. */
@media (min-width: 981px) { .ax-count { display: none; } }

/* AX-HOME2-END */

/* ---------------------------------------------------------------------
   23. HERO DELLA HOME: SOLO IL VIDEO
   Agosto 2026, richiesta della direzione: la prima schermata resta al
   filmato e basta. Via il pannello col titolo, il testo e i bottoni; via
   la barra di stato coi pallini; via il velo scuro, che esisteva solo
   per far leggere le scritte e senza scritte non ha più ragione d'essere.

   I moduli restano nella pagina, sono soltanto nascosti: per rimettere
   tutto com'era basta cancellare questo blocco, senza rilanciare niente.
   --------------------------------------------------------------------- */
/* AX-HERO-SOLOVIDEO-START */

/* Via il pannello: titolo, testo e bottoni. La barra di stato coi pallini
   RESTA — è il segno della home e sta sotto il filmato, non sopra. */
.ax-home-hero .ax-hero__panel { display: none !important; }

/* Niente velo: senza scritte da far leggere, il filmato si vede com'è. */
.ax-home-hero:before { display: none !important; }

@media (min-width: 981px) {
  /* I padding servivano a fare spazio al pannello. Il video riempie la
     finestra e la barra resta incollata al fondo, come prima. */
  .ax-home-hero { padding: 0 !important; }
}

@media (max-width: 980px) {
  /* Su telefono il fotogramma resta intero in cima: il video è 1920x1080,
     quindi a tutta larghezza occupa 56.25vw. Quello spazio glielo riserva
     il padding, e la barra di stato scorre subito sotto. */
  .ax-home-hero {
    height: auto !important;
    padding: 56.25vw 0 0 !important;
  }
  .ax-home-hero .ax-live-bar {
    margin-top: 0 !important;
    padding-top: 14px !important;
  }
}

/* AX-HERO-SOLOVIDEO-END */

/* ---------------------------------------------------------------------
   24. GLOBAL REACH PER CONTINENTI
   Da 19 paesi provvisori a 56 località vere (agosto 2026). Con questi
   numeri l'elenco piatto non si legge più: lo shortcode ax_countries
   raggruppa, e qui ogni continente diventa una fascia con la sua griglia.
   La forma è quella scelta insieme: vedere tutto in un colpo d'occhio è
   parte del messaggio, quindi niente scorrimento laterale.
   --------------------------------------------------------------------- */
/* AX-REACH-START */

/* Il contenitore raggruppato non è più la griglia: lo sono le fasce. */
.ax-countries--grouped {
  display: block;
  background: none;
  border: 0;
  gap: 0;
}

.ax-cgroup {
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ax-line);
}
.ax-cgroup:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }

.ax-cgroup__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-family: var(--ax-font-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ax-navy);
}
.ax-cgroup__head span { font-size: 10px; color: var(--ax-muted); }

/* Griglia che si riempie da sola: quante colonne ci stanno, ci stanno. */
/* I separatori sono bordi sulle celle, non un fondo colorato che
   traspare dalle fessure: così l'ultima riga, quando resta incompleta,
   non mostra un rettangolo grigio ma il fondo della sezione. */
.ax-cgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0;
  background: none;
  border-top: 1px solid var(--ax-line);
  border-left: 1px solid var(--ax-line);
}

/* Dentro la griglia le celle non devono più allargarsi da sole:
   la larghezza la decide la colonna. */
.ax-cgrid .ax-country {
  flex: none;
  min-width: 0;
  background: none;
  border-right: 1px solid var(--ax-line);
  border-bottom: 1px solid var(--ax-line);
  padding: 10px 12px;
  font-size: 12.5px;
  gap: 9px;
}
.ax-cgrid .ax-country b {
  font-weight: 400;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* La sede porta il segno del marchio, non un'etichetta in più. */
.ax-cgrid .ax-country--hq { box-shadow: inset 2px 0 0 var(--ax-sky); }

@media (max-width: 980px) {
  .ax-cgrid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
  .ax-cgrid .ax-country { padding: 9px 10px; font-size: 12px; gap: 8px; }
  .ax-cgroup { margin-bottom: 18px; padding-bottom: 14px; }
}


/* --- 24.1 «MOSTRA TUTTI» SUL TELEFONO ---------------------------------
   Cinquantasei località in due colonne facevano 2.064 px: la sezione più
   lunga della home. Sul telefono restano visibili l'Europa e il bottone;
   il resto arriva a richiesta. Sul desktop il bottone non esiste e si
   vede tutto insieme, che era il punto della sezione. */

.ax-reach-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ax-reach-btn { display: none; }
.ax-reach-btn__less { display: none; }

@media (max-width: 980px) {

  .ax-reach-rest { display: none; }
  .ax-reach-toggle:checked ~ .ax-reach-rest { display: block; }

  .ax-reach-btn {
    display: block;
    margin-top: 14px;
    padding: 14px 18px;
    border: 1px solid var(--ax-navy);
    text-align: center;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ax-navy);
    cursor: pointer;
    user-select: none;
  }
  /* Il fuoco da tastiera deve vedersi: la casella è nascosta, non assente. */
  .ax-reach-toggle:focus-visible ~ .ax-reach-btn {
    outline: 2px solid var(--ax-sky);
    outline-offset: 3px;
  }
  .ax-reach-toggle:checked ~ .ax-reach-btn .ax-reach-btn__more { display: none; }
  .ax-reach-toggle:checked ~ .ax-reach-btn .ax-reach-btn__less { display: inline; }

  /* L'ultimo gruppo visibile non deve avere il filo di chiusura sotto:
     sotto c'è il bottone. */
  .ax-countries--grouped > .ax-cgroup:last-of-type {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
  }
}

/* AX-REACH-END */

/* ---------------------------------------------------------------------
   25. SOLUTIONS IN UNA PAGINA SOLA
   Settembre 2026: le 13 pagine figlie e i 4 indici di gruppo escono di
   scena e diventano quattro sezioni di una pagina unica, ognuna con il
   suo ancoraggio. Qui: lo stacco sotto l'header fisso quando la pagina
   salta a un'ancora, l'indice dei quattro gruppi in cima, e l'elenco
   delle voci con la loro riga di descrizione.
   --------------------------------------------------------------------- */
/* AX-SOL-START */

/* Senza questo, saltando a #industry-energy il titolo finisce sotto
   l'header e sembra che la pagina sia andata nel posto sbagliato. */
.ax-sgroup { scroll-margin-top: calc(var(--ax-header-h) + 16px); }

/* --- 25.1 INDICE DEI QUATTRO GRUPPI ---------------------------------- */

.ax-jumps { display: flex; flex-wrap: wrap; gap: 10px; }
.ax-jump {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1 1 220px;
  padding: 14px 16px;
  border: 1px solid var(--ax-line);
  text-decoration: none;
  color: var(--ax-ink);
  transition: border-color .2s var(--ax-ease), color .2s var(--ax-ease);
}
.ax-jump:hover { border-color: var(--ax-blue); color: var(--ax-blue); }
.ax-jump b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.ax-jump em {
  font-style: normal;
  font-family: var(--ax-font-mono);
  font-size: 9.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ax-muted);
}

/* --- 25.2 TESTATA DI OGNI GRUPPO ------------------------------------- */

/* L'immagine occupa tutta la larghezza della riga e fa da fascia: gli
   originali sono già panoramici (circa 3:1), quindi non si taglia niente.
   Sul telefono si accorcia a 3:2, altrimenti diventa una striscia. */
.ax-sgroup__img { margin-bottom: 0 !important; }
.ax-sgroup__img .et_pb_image { margin-bottom: 0; width: 100%; }
.ax-sgroup__img .et_pb_image .et_pb_image_wrap { display: block; width: 100%; }
.ax-sgroup__img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 1;
  object-fit: cover;
}

.ax-sgroup__head h3 {
  font-size: clamp(23px, 2.6vw, 30px);
  line-height: 1.18;
  letter-spacing: -.02em;
  margin: 0 0 12px;
}
.ax-sgroup__head p { font-size: 15.5px; line-height: 1.6; color: var(--ax-muted); }

/* La testata segue la regola delle altre del sito: titolo a sinistra,
   apertura a destra, allineate in basso. Ci pensa .ax-head. */

/* --- 25.3 LE VOCI ----------------------------------------------------
   Stessa grammatica degli elenchi a filo già in uso: titolo a sinistra,
   descrizione accanto, un filo sottile a separare. Le righe qui non sono
   link — le pagine di dettaglio non esistono più — quindi niente hover
   e niente freccia. */

.ax-slist .ax-row { cursor: default; }
.ax-slist .ax-row b { min-width: 240px; }
.ax-slist .ax-row em { font-size: 14.5px; line-height: 1.55; }

@media (max-width: 980px) {
  .ax-sgroup__img img { aspect-ratio: 3 / 2; }
  .ax-slist .ax-row b { min-width: 0; }
  .ax-jump { flex: 1 1 calc(50% - 5px); padding: 12px 13px; }
  .ax-jump b { font-size: 13.5px; }
}

/* AX-SOL-END */

/* ---------------------------------------------------------------------
   26. HOME DOPO L'ACCORPAMENTO DELLE SOLUTIONS
   Settembre 2026. Tre decisioni prese guardando le anteprime:
   · l'orbita di AugeX resta espansa, perché è la figura che spiega il
     prodotto — ma le tredici voci non sono più link: cliccabile è solo
     il titolo del gruppo, che porta al suo punto nella pagina Solutions;
   · l'indice in fondo smette di fare il sommario e diventa quattro
     porte, ognuna con la frase che apre quel gruppo;
   · niente ancoraggi per le singole voci: tredici indirizzi da tenere
     allineati ai nomi non valevano il guadagno.
   --------------------------------------------------------------------- */
/* AX-HOME3-START */

/* --- 26.1 LE VOCI DELL'ORBITA, ORA TESTO ----------------------------
   Erano <a> e prendevano lo stile dei link. Ora sono testo semplice e
   devono leggersi come tali: stesso corpo, colore attenuato, nessun
   invito a cliccare. */
.ax-orb-card li {
  color: var(--ax-muted);
  cursor: default;
}
.ax-orb-card li strong { color: var(--ax-navy); font-weight: 600; }
/* Il titolo del gruppo, invece, è l'unica cosa che porta da qualche parte. */
.ax-orb-card h4 a {
  color: var(--ax-navy);
  text-decoration: none;
  transition: color .2s var(--ax-ease);
}
.ax-orb-card h4 a:hover { color: var(--ax-blue); }
.ax-orb-card h4 a::after {
  content: " →";
  font-size: .8em;
  color: var(--ax-blue);
  white-space: nowrap;
}

/* --- 26.2 LE QUATTRO PORTE ------------------------------------------- */

.ax-door__lead {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ax-muted);
}
.ax-door h4 { margin-bottom: 4px; }
.ax-door .ax-count { margin-bottom: 12px; }

@media (max-width: 980px) {
  /* Sul telefono le porte restano riquadri corti: titolo e conteggio.
     La frase la si legge nella pagina Solutions, che è a un tocco. */
  .ax-door .ax-door__lead { display: none; }
  .ax-door .ax-count { margin-bottom: 0; }
  .ax-orb-card li { font-size: 12.5px; line-height: 1.4; }
}

/* AX-HOME3-END */

/* ---------------------------------------------------------------------
   27. HERO SENZA FOTO: PIÙ BASSO
   Le pagine senza immagine in evidenza ricevono la fascia navy con gli
   archi del marchio. Nata per reggere una fotografia, a 486 px senza
   foto è una distesa di blu con dentro solo il titolo: il contenuto
   comincia sotto la piega e la pagina sembra vuota prima di iniziare.
   Qui si accorcia a poco più di un terzo. Le pagine che un domani
   avranno una foto non hanno la classe ax-hero-plain e restano alte.
   --------------------------------------------------------------------- */
/* AX-HEROPLAIN-START */

.ax-hero-plain .ax-page-hero.et_pb_post_title {
  min-height: clamp(190px, 22vh, 260px);
}
/* Il titolo respira meno, in proporzione. */
.ax-hero-plain .ax-page-hero .et_pb_title_container {
  padding: 0 0 clamp(26px, 3vw, 40px) !important;
}
.ax-hero-plain .ax-page-hero .entry-title {
  font-size: clamp(30px, 4.4vw, 52px);
}

@media (max-width: 767px) {
  .ax-hero-plain .ax-page-hero.et_pb_post_title {
    min-height: clamp(150px, 26vh, 200px);
  }
}

/* AX-HEROPLAIN-END */

/* ---------------------------------------------------------------------
   28. LINEA DEL TEMPO, RIFERIMENTI, CONTATTO
   Contenuti aggiunti a settembre 2026 dai documenti aziendali.
   --------------------------------------------------------------------- */
/* AX-STORIA-START */

/* --- 28.1 LA LINEA DEL TEMPO ----------------------------------------
   Stessa grammatica degli elenchi a filo, ma l'anno è una data e va
   letto come tale: monospaziato, blu, largo sempre uguale così gli anni
   si incolonnano. */
.ax-timeline .ax-row { align-items: baseline; }
.ax-timeline .ax-row b {
  font-family: var(--ax-font-mono);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ax-blue);
  min-width: 84px;
  white-space: nowrap;
}
.ax-timeline .ax-row em {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ax-ink);
}
/* L'ultima riga è il presente: si stacca dalle altre. */
.ax-timeline .ax-row:last-of-type b { color: var(--ax-navy); }
.ax-timeline .ax-row:last-of-type em { font-weight: 500; }

/* --- 28.2 LA RIGA DEI RIFERIMENTI ------------------------------------
   Sotto le bandiere: dice chi sono i clienti per categoria, senza nomi.
   Deve leggersi come una nota, non come un paragrafo qualsiasi. */
.ax-refline p {
  margin: 0;
  padding-top: 22px;
  border-top: 1px solid var(--ax-line);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ax-muted);
  max-width: 92ch;
}

/* --- 28.3 L'INDIRIZZO NELLA SCHEDA DI CONTATTO ------------------------ */
.ax-feat__mail p { margin: 14px 0 0; }
.ax-feat__mail a {
  font-size: 17px;
  font-weight: 600;
  color: var(--ax-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 980px) {
  .ax-timeline .ax-row b { min-width: 0; }
  .ax-timeline .ax-row em { font-size: 14px; }
  .ax-refline p { font-size: 13.5px; padding-top: 18px; }
}

/* AX-STORIA-END */

/* AX-MAPPA-START — non modificare questa riga: serve al riaggiornamento */
/* =====================================================================
   29. LA MAPPA DELLA HOME, CON IL FILMATO VERO
   =====================================================================
   Finché nella cornice c'era il disegno vettoriale, il 21:9 andava bene:
   il disegno si adattava a qualunque forma. Il filmato no: è la ripresa
   di uno schermo, 16:10, e dentro un 21:9 con object-fit:cover perde
   quasi metà dell'altezza — via le Alpi e via la Sicilia.

   Quindi la cornice prende la forma del filmato solo quando un filmato
   c'è davvero. Il disegno vettoriale, se un giorno tornasse, resta 21:9.
   Le schermate di Platform non sono toccate: hanno la loro proporzione
   scritta nel modulo, e quella vince su questa regola.
   --------------------------------------------------------------------- */
.ax-map__canvas:has(video) { aspect-ratio: 16 / 10; }

@media (max-width: 980px) {
  .ax-map__canvas:has(video) { aspect-ratio: 16 / 10; }
}

/* La legenda dei pallini serviva a spiegare il disegno. Sul filmato vero
   si sovrappone alla firma di Google Maps, che deve restare visibile: la
   sezione la spegne dal modulo (legend="no"), questa regola è la rete di
   sicurezza se qualcuno la riaccende. */
.ax-map__canvas:has(video) .ax-map__legend {
  background: rgba(7, 28, 46, .72);
  padding: 7px 12px;
  border-radius: 2px;
  backdrop-filter: blur(2px);
}
/* AX-MAPPA-END */

/* AX-LOGO-AUGEX-START — non modificare questa riga: serve al riaggiornamento */
/* =====================================================================
   30. IL MARCHIO AUGEX AL POSTO DELLA SCRITTA
   =====================================================================
   Nel cerchio dell'orbita e nel blocco per telefono c'era «AugeX»
   scritto in Inter. Ora c'è il marchio vero. Resta dentro l'h3, così
   la gerarchia dei titoli non cambia e chi non vede le immagini legge
   comunque «AugeX» dal testo alternativo.

   La misura è in percentuale del cerchio, non in pixel: il cerchio è
   fluido (da 190 a 250px) e il marchio lo segue.
   --------------------------------------------------------------------- */
.ax-orb-core h3:has(.ax-logo-augex),
.ax-mcore h3:has(.ax-logo-augex) { line-height: 0; }

/* La misura NON è una percentuale del contenitore: il titolo che lo
   contiene è una casella flessibile che si stringe sul contenuto, e
   finché l'immagine non è arrivata quel contenuto è largo zero — una
   percentuale di zero fa zero, e il marchio non compariva. Qui la
   misura è la stessa formula del cerchio (clamp 190→250) moltiplicata
   per 0,8: non dipende da nessuno, nemmeno dal caricamento. */
.ax-logo-augex {
  display: block;
  width: clamp(152px, 15.2vw, 200px);
  height: auto;
  margin: 0 auto;
}

/* Nel blocco scuro del telefono il cerchio non c'è: il marchio si misura
   sulla larghezza dello schermo, con un tetto perché non diventi enorme
   sui telefoni grandi. */
.ax-mcore .ax-logo-augex { width: clamp(200px, 62vw, 260px); }

/* Il titolo dentro il cerchio è una casella flessibile: senza una
   larghezza esplicita si stringe sul contenuto, e una percentuale
   calcolata su una larghezza che non c'è vale zero — il marchio
   spariva. Con width:100% la percentuale si misura sul cerchio. */
.ax-orb-core h3 { width: 100% !important; }

/* La didascalia «Monitoring core» è stata tolta (settembre 2026): il
   marchio parla da sé e quella riga portava via solo spazio. Le regole
   che la vestivano restano più su, innocue, per il giorno in cui
   servisse rimetterla. Senza didascalia il marchio è centrato nel
   cerchio, quindi può crescere. */

/* Se il file del marchio manca, lo shortcode torna alla scritta: le
   diamo lo stesso peso che aveva il titolo, così non si nota il salto. */
.ax-logo-testo { font-weight: 600; letter-spacing: -.02em; }
/* AX-LOGO-AUGEX-END */

/* AX-HERO-INQUADRATURA-START — non modificare questa riga */
/* =====================================================================
   31. IL FILMATO DELLA HOME: L'INQUADRATURA
   =====================================================================
   Perché la firma finale del filmato spariva, e perché object-position
   da solo non bastava a rimetterla.

   Divi non mette il <video> nudo dentro la sezione: lo avvolge in quattro
   contenitori di MediaElement.js (mejs-container, mejs-inner,
   mejs-mediaelement, mediaelementwrapper) e con il suo JavaScript li
   dimensiona a copertura — su una finestra da 1728px diventano alti 964,
   mentre la sezione è alta 791. Il nostro «height: 100%» sul video si
   misurava quindi su 964, non su 791: il video restava alto 964,
   ancorato in alto, e i 173 pixel di troppo venivano tagliati TUTTI dal
   fondo. Object-fit e object-position non avevano niente da tagliare —
   il video riempiva esattamente il suo contenitore — quindi spostare
   l'inquadratura non cambiava nulla. Ecco perché la firma «ONE PLATFORM.
   COMPLETE CONTROL.», che sta all'85% dell'inquadratura, sparirà sempre
   finché il taglio pesa per intero sul fondo.

   Qui riportiamo tutta la catena alla misura della sezione. Da quel
   momento è il video a ritagliarsi da solo, in parti uguali sopra e
   sotto, e object-position torna a comandare davvero.
   --------------------------------------------------------------------- */
@media (min-width: 981px) {

  .ax-home-hero .et_pb_section_video_bg .mejs-container,
  .ax-home-hero .et_pb_section_video_bg .mejs-inner,
  .ax-home-hero .et_pb_section_video_bg .mejs-mediaelement,
  .ax-home-hero .et_pb_section_video_bg mediaelementwrapper {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    /* IMPORTANTE. Divi centra il filmato alla vecchia maniera: lo mette a
       metà e poi lo tira indietro di mezza larghezza con un margine
       negativo scritto direttamente nel tag (margin-left: -856px su una
       finestra da 1728). Se azzeriamo «left» senza azzerare anche quel
       margine, il -856 resta e il filmato scivola tutto a sinistra: si
       vede solo su metà pagina. Il margine va a zero insieme a left. */
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    background: transparent !important;
  }

  /* Il 57% serviva a compensare la barra di stato, che copriva gli ultimi
     25px del filmato. Tolta la barra (settembre 2026) non c'è più niente
     da compensare: l'inquadratura torna al centro esatto e il taglio si
     divide in parti uguali sopra e sotto. */
  .ax-home-hero .et_pb_section_video_bg video {
    object-position: center 50% !important;
  }
}
/* AX-HERO-INQUADRATURA-END */

/* AX-RIQUADRI-START — non modificare questa riga */
/* =====================================================================
   32. DUE CORREZIONI DI INQUADRATURA
   ===================================================================== */

/* --- 32.1 LA MAPPA: IL FILMATO ERA CENTRATO, LA REGISTRAZIONE NO -----
   Il riquadro e il filmato combaciavano al pixel; quello che sembrava
   spostato era il contenuto della registrazione, che portava con sé una
   banda nera di 80px a sinistra e 48 in basso — resti della finestra
   catturata. La banda è stata tolta dal file (ora 1648×1032) e il
   riquadro prende la proporzione esatta del filmato, così non si ritaglia
   più nemmeno un pixel. */
.ax-map__canvas:has(video) { aspect-ratio: 1648 / 1032; }

@media (max-width: 980px) {
  .ax-map__canvas:has(video) { aspect-ratio: 1648 / 1032; }
}

/* --- 32.2 PLATFORM: UNA CORNICE SOLA ---------------------------------
   Nel riquadro in evidenza «AugeX Platform» la schermata arrivava con la
   sua cornice — barra, pallini, bordo — dentro un riquadro che era già
   una cornice. Due scatole una dentro l'altra. Qui la schermata perde la
   propria e resta l'immagine, centrata nella metà destra del riquadro.
   Vale SOLO dentro .ax-feat: altrove la cornice serve, perché lì la
   schermata sta su fondo nudo e senza bordo galleggerebbe. */
.ax-feat .ax-shot {
  border: 0 !important;
  background: none !important;
  padding: 0 !important;
}
.ax-feat .ax-shot .ax-map__bar { display: none !important; }

/* Il riquadro non è più diviso in due metà: il testo sta in alto,
   centrato, e la schermata sotto a tutta larghezza. Nella metà destra
   l'immagine veniva 496px — troppo poco per una schermata di software,
   dove il punto è proprio riuscire a leggere cosa c'è scritto. */
@media (min-width: 981px) {
  .ax-feat.et_pb_row {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
  }
  .ax-feat.et_pb_row > .et_pb_column {
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
  }
  /* Lo stacco fra le parole e l'immagine. */
  .ax-feat.et_pb_row > .et_pb_column + .et_pb_column { margin-top: 32px !important; }
  .ax-feat.et_pb_row > .et_pb_column .et_pb_module:last-child { margin-bottom: 0 !important; }
}

/* Il testo al centro, su telefono come su schermo grande. Il titolo
   vuole la sua riga: Divi lo allinea a sinistra per conto suo e non
   eredita l'allineamento della colonna. */
.ax-feat.et_pb_row > .et_pb_column:first-child { text-align: center; }
.ax-feat.et_pb_row > .et_pb_column:first-child .et_pb_text,
.ax-feat.et_pb_row > .et_pb_column:first-child h2,
.ax-feat.et_pb_row > .et_pb_column:first-child h3,
.ax-feat.et_pb_row > .et_pb_column:first-child h4 { text-align: center !important; }
.ax-feat.et_pb_row > .et_pb_column:first-child .et_pb_button_module_wrapper { text-align: center !important; }

/* Una riga lunga quanto il riquadro non si legge: il paragrafo resta
   dentro una misura sensata e si tiene al centro da solo. */
.ax-feat.et_pb_row > .et_pb_column:first-child p {
  max-width: 68ch;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* AX-RIQUADRI-END */

/* AX-LOGO-PAGINA-START — non modificare questa riga */
/* =====================================================================
   33. IL MARCHIO IN CIMA A PLATFORM
   =====================================================================
   Fra la fascia blu del titolo e le prime parole c'erano 245px di bianco
   vuoto. Adesso ci sta il marchio del prodotto, allineato alla colonna
   come tutto il resto della pagina: nasce dove nasce il testo, non
   galleggia al centro.

   Qui serve la versione con la scritta navy ([ax_logo tone="ink"]):
   quella bianca su questo fondo lascerebbe vedere il solo esagono.
   --------------------------------------------------------------------- */
.ax-logo-row .ax-logo-augex {
  width: clamp(280px, 30vw, 420px);
  max-width: 100%;
  margin: 0 auto;       /* centrato nella colonna */
}
.ax-logo-row .et_pb_text { line-height: 0; text-align: center; }

@media (max-width: 980px) {
  .ax-logo-row .ax-logo-augex { width: clamp(220px, 60vw, 340px); }
}
/* AX-LOGO-PAGINA-END */

/* AX-ATTACCO-START — non modificare questa riga */
/* =====================================================================
   34. L'ATTACCO FRA LA FASCIA DEL TITOLO E LA PAGINA
   =====================================================================
   Fra la fascia blu col nome della pagina e la prima cosa che si legge
   c'erano 178px di bianco. Non venivano da un posto solo, ed è il motivo
   per cui cambiare l'imbottitura della sezione non bastava mai:

     88px   la sezione del modello del Theme Builder che contiene tutto
     34px   la riga dentro quella sezione
     56px   l'imbottitura della prima sezione della pagina vera
     ----
     178px

   Le prime due sono strutturali: valgono per ogni pagina che usa quel
   modello, e sono spazio a vuoto — servivano quando la fascia del titolo
   non c'era. Qui vanno a zero, e l'unico stacco che resta è quello della
   pagina, portato a 46px. La fascia e il contenuto tornano a essere due
   cose attaccate invece che due isole.

   Vale per TUTTE le pagine interne in un colpo solo, perché il modello
   del Theme Builder è uno.
   --------------------------------------------------------------------- */
/* Due accortezze nella scrittura di queste due righe.

   La specificità serve tutta: Divi scrive le regole del Theme Builder
   premettendo «body #page-container», quindi una classe sola perde.

   E si parte dalla fascia, non dal numero della sezione: Divi numera le
   sezioni (et_pb_section_1_tb_body e così via), ma quel numero vuol dire
   cose diverse su pagine diverse — sulla home la sezione numero uno è il
   filmato. Con «la sezione che viene subito dopo quella che contiene la
   fascia del titolo» la regola tocca solo le pagine che la fascia ce
   l'hanno davvero, e la home resta fuori da sola. */
html body #page-container .et_pb_section:has(.ax-page-hero) + .et_pb_section {
  padding-top: 0 !important;
}
html body #page-container .et_pb_section:has(.ax-page-hero) + .et_pb_section > .et_pb_row:first-child {
  padding-top: 0 !important;
}

/* L'unico stacco che resta, ed è questo. Il contenuto della pagina non
   sta appeso al modulo che lo ospita: Divi gli mette attorno un altro
   involucro, .et-l--post, e le sezioni vere sono figlie di quello — è
   il motivo per cui una regola scritta sul modulo non becca niente.

   La home e le pagine con l'immagine a tutta larghezza restano fuori:
   lì la prima sezione È l'immagine, e un'imbottitura la staccherebbe
   dal bordo dello schermo. */
html body #page-container .et-l--post .et_pb_section:first-child:not(.ax-home-hero):not(.ax-hero) {
  padding-top: 46px !important;
}

@media (max-width: 980px) {
  html body #page-container .et-l--post .et_pb_section:first-child:not(.ax-home-hero):not(.ax-hero) {
    padding-top: 30px !important;
  }
}
/* AX-ATTACCO-END */

/* AX-APERTURA-START — non modificare questa riga */
/* --- 34.1 LA FOTOGRAFIA D'APERTURA DELLE PAGINE ----------------------
   Sta subito sotto la fascia del titolo ed è la prima cosa che si vede.
   Eredita la cornice delle fasce di Solutions (3:1, 3:2 su telefono):
   una proporzione sola per tutte le fotografie del sito, così le pagine
   si somigliano anche quando le foto sono diverse. */
.ax-pagetop { margin-bottom: 0 !important; }
.ax-pagetop .et_pb_image { margin-bottom: 0 !important; }
/* AX-APERTURA-END */

/* AX-TIMEBAND-START — non modificare questa riga */
/* =====================================================================
   35. LA FASCIA DEGLI ANNI — apertura di Company
   =====================================================================
   Quattordici tappe, quattordici esagoni, e i colori non sono scelti a
   occhio: sono campionati uno per uno dall'anello del marchio AugeX,
   girando dall'alto in senso orario. La storia dell'azienda percorre lo
   spettro del suo stesso logo, dal rosso al magenta, e il 2026 chiude il
   giro dove il logo lo ricomincia.

   L'esagono è quello del marchio — punta in alto, stessa proporzione —
   quindi la fascia non introduce una forma nuova nel sito: usa quella
   che c'era già.

   Fondo chiaro e non navy: sopra c'è la fascia blu del titolo, e navy su
   navy fa una macchia sola.
   --------------------------------------------------------------------- */
.ax-tb {
  position: relative;
  aspect-ratio: 3 / 1;
  background: var(--ax-alt, #F5F8FA);
  border: 1px solid var(--ax-line);
  padding: clamp(22px, 3vw, 38px) clamp(20px, 3vw, 44px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ax-tb__eyebrow {
  display: block;
  font-family: var(--ax-font-mono);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ax-blue);
  margin-bottom: 10px;
}
.ax-tb__claim {
  margin: 0 !important;
  font-size: clamp(19px, 2.3vw, 30px);
  line-height: 1.15;
  letter-spacing: -.02em;
  font-weight: 600;
  color: var(--ax-navy) !important;
  max-width: 26ch;
}

/* --- L'asse: gli esagoni a zigzag su una linea ------------------------
   Lo zigzag non è un vezzo: con quattordici tappe su una riga sola gli
   anni non entrerebbero dentro le forme. Alternandoli sopra e sotto,
   ogni esagono ha il doppio dello spazio e la riga resta leggibile. */
.ax-tb__axis {
  position: relative;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: clamp(96px, 13vw, 158px);
}
.ax-tb__axis:before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: rgba(15,53,87,.18);
}
.ax-tb__step {
  position: relative;
  flex: 1 1 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.ax-tb__hex {
  --ax-hex-w: clamp(38px, 5vw, 62px);
  position: absolute;
  width: var(--ax-hex-w);
  height: calc(var(--ax-hex-w) * 1.155);   /* esagono regolare, punta in alto */
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: var(--ax-hex, var(--ax-blue));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ax-font-mono);
  font-size: clamp(10px, 1.15vw, 14px);
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ax-hex-testo, #fff);
  transition: transform .25s var(--ax-ease, ease);
}
.ax-tb__step--su  .ax-tb__hex { bottom: 50%; margin-bottom: -6px; }
.ax-tb__step--giu .ax-tb__hex { top: 50%;    margin-top: -6px; }
.ax-tb__hex:hover { transform: scale(1.08); }

/* L'ultima tappa è oggi, e si vede dalla misura: nessun segno in più,
   che sulla linea sembrava una macchia. */
.ax-tb__step--oggi .ax-tb__hex { --ax-hex-w: clamp(46px, 6.2vw, 76px); }

@media (max-width: 980px) {
  /* Quattordici esagoni su un telefono diventano illeggibili: la fascia
     si scorre di lato, con le forme alla loro misura. La linea del tempo
     distesa, quella che si legge davvero, sta due schermate più sotto. */
  .ax-tb { aspect-ratio: auto; padding-bottom: 22px; }
  .ax-tb__axis {
    overflow-x: auto;
    justify-content: flex-start;
    gap: 6px;
    height: 132px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .ax-tb__step { flex: 0 0 62px; scroll-snap-align: center; }
  .ax-tb__hex { --ax-hex-w: 52px; font-size: 12px; }
  .ax-tb__step--oggi .ax-tb__hex { --ax-hex-w: 58px; }
  .ax-tb__claim { max-width: none; }
}
/* AX-TIMEBAND-END */

/* AX-NASTRO-START — non modificare questa riga */
/* =====================================================================
   36. IL NASTRO DEI PAESI, E LA SEQUENZA SENZA NUMERI
   ===================================================================== */

/* --- 36.1 IL NASTRO ---------------------------------------------------
   In home la griglia completa dei paesi occupava mezza schermata. Il
   nastro dice la stessa cosa — «sono tanti» — in una riga sola, e la
   griglia intera vive dove ha senso vederla tutta: dentro Company,
   sezione Partners.

   L'elenco è scritto due volte: l'animazione trascina il nastro di metà
   della sua larghezza e riparte, quindi la seconda copia entra dove esce
   la prima e il giro non ha cuciture. */
.ax-ribbon {
  position: relative;
  overflow: hidden;
  padding: 6px 0;
  /* sfumature ai bordi: il nastro entra ed esce invece di tagliarsi */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ax-ribbon__track {
  display: flex;
  width: max-content;
  animation: ax-ribbon-scorre var(--ax-ribbon-durata, 60s) linear infinite;
}
.ax-ribbon__half { display: flex; }
@keyframes ax-ribbon-scorre {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
/* Col puntatore sopra si ferma: chi vuole leggere un nome deve poterlo
   fare senza rincorrerlo. */
.ax-ribbon:hover .ax-ribbon__track { animation-play-state: paused; }

.ax-ribbon .ax-country {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 22px 0 0;
  margin: 0 22px 0 0;
  border-right: 1px solid var(--ax-line);
  white-space: nowrap;
}
.ax-ribbon .ax-country img { width: 22px; height: 16px; object-fit: cover; flex: none; }
.ax-ribbon .ax-country b {
  font-size: 14.5px; font-weight: 500; color: var(--ax-ink, var(--ax-navy));
}
.ax-ribbon .ax-country em {
  font-family: var(--ax-font-mono); font-style: normal;
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ax-blue);
}

/* Chi ha chiesto al sistema di ridurre le animazioni non deve inseguire
   niente: il nastro si ferma e si scorre a mano. */
@media (prefers-reduced-motion: reduce) {
  .ax-ribbon { overflow-x: auto; }
  .ax-ribbon__track { animation: none; }
  .ax-ribbon__half:last-child { display: none; }
}

/* L'invito che porta all'elenco completo. */
.ax-ribbon-cta p { margin: 0 !important; }
.ax-ribbon-cta a {
  font-family: var(--ax-font-mono);
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ax-blue);
  border-bottom: 1px solid rgba(18,98,149,.35);
  padding-bottom: 3px;
}
.ax-ribbon-cta a:hover { border-bottom-color: var(--ax-blue); }

/* --- 36.2 LA SEQUENZA AL POSTO DEI NUMERI -----------------------------
   «Discover, Monitor, Correlate, Act» sono quattro fasi in ordine, e il
   numerino era l'unica cosa che lo diceva. Tolto quello, l'ordine lo
   mostra la posizione: una linea che attraversa le quattro caselle, con
   un nodo all'inizio di ciascuna. Stesso linguaggio della fascia degli
   anni — il sito ci guadagna in coerenza invece di perdere un pezzo. */
.ax-seq { position: relative; }
.ax-seq:before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--ax-line);
}
.ax-seq .et_pb_column {
  position: relative;
  padding-top: calc(var(--ax-space-s) + 10px) !important;
}
.ax-seq .et_pb_column:before {
  content: "";
  position: absolute;
  top: -4px;
  left: var(--ax-space-s);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ax-blue);
}
.ax-dark .ax-seq:before { background: rgba(129,207,242,.28); }
.ax-dark .ax-seq .et_pb_column:before { background: var(--ax-sky); }

/* I numerini se ne vanno da tutto il sito: tolti dai contenuti, e questa
   è la rete di sicurezza per le pagine non ancora ricostruite. */
.ax-num { display: none !important; }
/* AX-NASTRO-END */

/* AX-GEO-START — non modificare questa riga */
/* =====================================================================
   37. LA MAPPA DELLA SEDE
   =====================================================================
   Finché nessuno la chiede non parte nessuna richiesta verso Google:
   quello che si vede è una scheda nostra, con l'indirizzo. Il riquadro
   tiene la proporzione delle fotografie del sito, così quando la mappa
   arriva non fa saltare la pagina.
   --------------------------------------------------------------------- */
.ax-geo {
  position: relative;
  aspect-ratio: 21 / 9;
  background:
    linear-gradient(160deg, var(--ax-navy-deep), #071C2E 62%, var(--ax-navy));
  overflow: hidden;
}
/* La griglia sul fondo: una mappa senza mappa. */
.ax-geo:before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(129,207,242,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(129,207,242,.09) 1px, transparent 1px);
  background-size: 46px 46px;
}
.ax-geo__card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: clamp(24px, 3.4vw, 48px);
  max-width: 62ch;
}
.ax-geo__pin {
  width: 15px; height: 15px;
  border-radius: 50% 50% 50% 2px;
  transform: rotate(45deg);
  background: var(--ax-crit, #CB2027);
  box-shadow: 0 0 0 7px rgba(203,32,39,.18);
  margin-bottom: 16px;
}
.ax-geo__testo h4 {
  margin: 0 0 6px !important;
  color: #fff !important;
  font-size: clamp(19px, 2.2vw, 26px);
  letter-spacing: -.02em;
}
.ax-geo__testo p { margin: 0 !important; color: #DCEAF4 !important; font-size: 16px; }
.ax-geo__note {
  font-family: var(--ax-font-mono);
  font-size: 11.5px !important; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ax-sky) !important;
  margin-top: 8px !important;
}
.ax-geo__azioni { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 20px; }
.ax-geo__btn {
  font-family: inherit;
  font-size: 15px; font-weight: 600;
  color: #fff; background: var(--ax-blue);
  border: 0; border-radius: 2px;
  padding: 14px 26px;
  cursor: pointer;
  transition: background .2s var(--ax-ease, ease);
}
.ax-geo__btn:hover { background: #1877B4; }
.ax-geo__link {
  font-family: var(--ax-font-mono);
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ax-sky);
  border-bottom: 1px solid rgba(129,207,242,.4);
  padding-bottom: 3px;
}
.ax-geo__privacy {
  margin: 18px 0 0 !important;
  font-size: 12.5px !important;
  line-height: 1.5;
  color: rgba(220,234,244,.6) !important;
  max-width: 46ch;
}
/* Quando la mappa arriva, copre tutto: la scheda ha finito il suo lavoro. */
.ax-geo iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  z-index: 2;
}

@media (max-width: 980px) {
  .ax-geo { aspect-ratio: 4 / 3; }
  .ax-geo__card { max-width: none; }
  .ax-geo__privacy { font-size: 12px !important; }
}
/* AX-GEO-END */

/* AX-MAILBTN-START — non modificare questa riga */
/* --- 37.1 L'INDIRIZZO EMAIL COME BOTTONE ------------------------------
   Sulla pagina dei contatti scrivere a quell'indirizzo è l'unica azione
   possibile: merita la forma di un'azione, non quella di un link in
   mezzo a un paragrafo. Resta un mailto, quindi si apre il programma di
   posta di chi guarda — nessun modulo, nessun dato che passa da noi. */
.ax-feat--centro { text-align: center; }
.ax-feat--centro p { margin-left: auto !important; margin-right: auto !important; max-width: 62ch; }
.ax-feat__cta { margin-top: 26px !important; max-width: none !important; }

.ax-mailbtn {
  display: inline-block;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: #fff !important;
  background: var(--ax-blue);
  border-radius: 2px;
  padding: 16px 32px;
  text-decoration: none !important;
  transition: background .2s var(--ax-ease, ease), transform .2s var(--ax-ease, ease);
}
.ax-mailbtn:hover { background: #1877B4; transform: translateY(-1px); }
.ax-mailbtn:focus-visible { outline: 2px solid var(--ax-sky); outline-offset: 3px; }

@media (max-width: 980px) {
  .ax-mailbtn { font-size: 15.5px; padding: 15px 24px; word-break: break-word; }
}
/* AX-MAILBTN-END */

/* AX-COOKIENOTE-START — non modificare questa riga */
/* =====================================================================
   38. LA STRISCIA DEI COOKIE
   =====================================================================
   Non blocca niente e non copre il contenuto: sta in fondo, si legge in
   una riga e si chiude. Un avviso, non un cancello — perché con soli
   cookie tecnici non c'è niente da autorizzare.
   --------------------------------------------------------------------- */
.ax-cookienote {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 34px);
  padding: 14px clamp(20px, 4vw, 48px);
  background: rgba(7, 28, 46, .96);
  border-top: 1px solid rgba(129,207,242,.22);
  backdrop-filter: blur(6px);
  transform: translateY(100%);
  transition: transform .3s var(--ax-ease, cubic-bezier(.2,.7,.3,1));
}
.ax-cookienote--su { transform: translateY(0); }

.ax-cookienote p {
  margin: 0 !important;
  flex: 1;
  font-size: 13.5px;
  line-height: 1.55;
  color: #DCEAF4 !important;
}
.ax-cookienote a {
  color: var(--ax-sky) !important;
  border-bottom: 1px solid rgba(129,207,242,.4);
}
.ax-cookienote a:hover { border-bottom-color: var(--ax-sky); }

.ax-cookienote__ok {
  flex: none;
  font-family: inherit;
  font-size: 14px; font-weight: 600;
  color: #fff;
  background: var(--ax-blue);
  border: 0; border-radius: 2px;
  padding: 11px 30px;
  cursor: pointer;
  transition: background .2s var(--ax-ease, ease);
}
.ax-cookienote__ok:hover { background: #1877B4; }
.ax-cookienote__ok:focus-visible { outline: 2px solid var(--ax-sky); outline-offset: 3px; }

@media (max-width: 720px) {
  .ax-cookienote { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px 20px; }
  .ax-cookienote p { font-size: 13px; }
  .ax-cookienote__ok { width: 100%; padding: 13px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .ax-cookienote { transition: none; }
}
/* AX-COOKIENOTE-END */

/* AX-TELEFONO-START — non modificare questa riga */
/* =====================================================================
   39. TRE COSE CHE SUL TELEFONO NON TORNAVANO
   =====================================================================
   Tre difetti diversi, tutti visibili solo sotto i 980 pixel, tutti
   trovati misurando la pagina dentro una finestra da telefono invece
   che a occhio.
   --------------------------------------------------------------------- */

/* --- 39.1 Il nastro dei paesi spariva --------------------------------
   Divi, sui formati piccoli, impone «min-width: calc(50% - 1px)» a certi
   elementi dentro le sue colonne. La regola prendeva in pieno anche le
   nostre bandiere: ognuna diventava larga quasi quattromila pixel, e nel
   nastro — che è largo trecento — non ne entrava piu' nemmeno una. Non
   erano sparite: erano larghe come un palazzo. */
html body #page-container .ax-ribbon .ax-country,
html body #page-container .ax-ribbon__half,
html body #page-container .ax-ribbon__track {
  min-width: 0 !important;
  max-width: none !important;
}
html body #page-container .ax-ribbon .ax-country {
  flex: 0 0 auto !important;
  white-space: nowrap;
}

/* --- 39.2 Il menu usciva dallo schermo -------------------------------
   Diciotto voci fanno novecento pixel di menu dentro una finestra da
   ottocento, e l'intestazione e' appiccicata in alto: il fondo del menu
   non si poteva raggiungere in nessun modo. Ora il menu si ferma
   all'altezza della finestra e scorre per conto suo.
   La misura e' 100dvh dove il browser la conosce — su iOS e' l'unica
   che tiene conto della barra degli indirizzi che appare e scompare. */
@media (max-width: 980px) {

  .et_mobile_menu {
    max-height: calc(100vh - 130px);
    max-height: calc(100dvh - 130px);
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}

/* --- 39.3 La fascia degli anni tagliata ------------------------------
   L'asse degli esagoni si scorre di lato, e per questo ha overflow-x
   automatico. Ma un solo asse impostato in orizzontale porta con se'
   anche il verticale: gli esagoni, che sporgono sopra e sotto la linea,
   facevano comparire una seconda barra di scorrimento e venivano
   tagliati a meta'. Qui il verticale si chiude, l'asse guadagna l'aria
   che gli serve, e le barre grigie spariscono: resta una sfumatura sul
   bordo destro, che e' il modo garbato di dire «continua». */
@media (max-width: 980px) {

  .ax-tb__axis {
    overflow-y: hidden;
    height: 152px;
    padding: 0 2px;
    scrollbar-width: none;
  }
  .ax-tb__axis::-webkit-scrollbar { display: none; }

  .ax-tb { position: relative; }
  .ax-tb:after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 22px;
    width: 34px;
    height: 152px;
    background: linear-gradient( to right, rgba(245,248,250,0), var(--ax-alt, #F5F8FA) );
    pointer-events: none;
  }
}
/* AX-TELEFONO-END */

/* AX-TELEFONO2-START — non modificare questa riga */
/* =====================================================================
   40. IL TELEFONO, SECONDA PASSATA
   =====================================================================
   La fascia del titolo, lo stacco che la segue, il colore delle voci di
   menu e la scheda dell'indirizzo: quattro cose che sul telefono
   funzionavano peggio che sul grande schermo.
   --------------------------------------------------------------------- */

/* --- 40.1 La fascia del titolo, in proporzione allo schermo -----------
   Sul telefono la fascia misurava duecento pixel — quasi quanto sul
   monitor — ma lì e' una striscia larga duemilacinquecento, qui e' un
   riquadro largo trecentonovanta: la stessa altezza, che sul monitor e'
   un accento, sul telefono e' un muro davanti al contenuto.
   Qui scende a poco piu' di centotrenta, e il titolo con lei. */
@media (max-width: 767px) {

  body.ax-hero-plain .ax-page-hero.et_pb_post_title {
    min-height: clamp(112px, 17vh, 146px);
  }
  .ax-page-hero.et_pb_post_title {
    min-height: clamp(150px, 24vh, 200px);
  }
  .ax-page-hero .et_pb_title_container {
    padding: 0 0 18px !important;
  }
  .ax-page-hero .entry-title {
    font-size: 26px;
    padding-left: 14px;
    max-width: 18ch;
  }
}

/* --- 40.2 Lo stacco sotto la fascia -----------------------------------
   Sul monitor lo avevamo tolto mesi fa; sul telefono era rimasto, e per
   una ragione che si vede solo misurando: non lo mette il contenuto, lo
   mettono le imbottiture di Divi — quaranta pixel sotto la fascia,
   quaranta sopra la sezione seguente, quaranta ancora sulla prima
   sezione della pagina. Centoventi pixel di niente.

   Sulla specificita' c'e' poco da fare gli eleganti: Divi scrive le sue
   regole del Theme Builder con !important e con un peso che una classe
   sola non batte. Le classi ripetute qui sotto non sono un refuso: sono
   il modo di pesare piu' di lui senza inseguire i nomi numerati delle
   sezioni, che cambiano da pagina a pagina. */
@media (max-width: 980px) {

  /* la sezione che ospita la fascia: niente aria sopra ne' sotto */
  html body #page-container
  .et_pb_section.et_pb_section.et_pb_section.et_pb_section.et_section_regular:has(.ax-page-hero) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* la sezione che viene subito dopo */
  html body #page-container
  .et_pb_section:has(.ax-page-hero) + .et_pb_section.et_pb_section.et_pb_section.et_section_regular {
    padding-top: 0 !important;
  }

  /* e il contenuto della pagina, che parte con uno stacco misurato */
  html body #page-container .et-l--post
  .et_pb_section.et_pb_section:first-of-type:not(.ax-home-hero):not(.ax-hero) {
    padding-top: 24px !important;
  }
}

/* --- 40.3 Le voci del menu, in blu ------------------------------------
   Nel menu aperto le voci principali e le sottovoci si somigliavano
   troppo: due livelli, un colore solo, e per capire dove finiva uno e
   cominciava l'altro bisognava leggere. Il blu del sito sulle voci di
   primo livello fa il lavoro che faceva la lettura. */
@media (max-width: 980px) {

  .et_mobile_menu > li.menu-item > a {
    color: var(--ax-blue, #126295) !important;
    font-weight: 600 !important;
  }
  .et_mobile_menu > li.menu-item > a:hover {
    color: var(--ax-navy, #0F3557) !important;
  }
  .et_mobile_menu .sub-menu li > a {
    color: var(--ax-navy, #0F3557) !important;
    font-weight: 400 !important;
    opacity: .82;
  }
}

/* --- 40.4 La scheda dell'indirizzo ------------------------------------
   Il riquadro della mappa tiene una proporzione fissa perche' quando la
   mappa arriva non faccia saltare la pagina. Sul telefono pero' quella
   proporzione dava duecento pixel d'altezza a una scheda che ne chiede
   quasi cinquecento: indirizzo e avvertenza finivano fuori dal riquadro,
   e si vedevano solo la riga della provincia e i due pulsanti.
   Finche' la mappa non c'e', qui il riquadro segue il contenuto. Quando
   arriva, riprende la sua proporzione e la scheda si toglie di mezzo. */
@media (max-width: 980px) {

  .ax-geo { aspect-ratio: auto; }
  .ax-geo__card { height: auto; justify-content: flex-start; }

  .ax-geo:has(iframe) { aspect-ratio: 4 / 3; }
  .ax-geo:has(iframe) .ax-geo__card { display: none; }
}
/* AX-TELEFONO2-END */

/* AX-TBSOLO-START — non modificare questa riga */
/* --- 40.5 L'APERTURA DI COMPANY SENZA GLI ANNI -----------------------
   Tolto l'asse degli esagoni, quello che resta non e' una fascia mutila:
   e' un'apertura tipografica. Il riquadro perde la proporzione fissa —
   che serviva a contenere il disegno — e la frase prende la misura che
   le spetta, perche' adesso e' lei la cosa che si guarda.
   --------------------------------------------------------------------- */
.ax-tb--solotesto {
  aspect-ratio: auto;
  padding: clamp(34px, 4.6vw, 62px) clamp(20px, 3vw, 44px);
}
.ax-tb--solotesto .ax-tb__claim {
  font-size: clamp(23px, 3vw, 38px);
  max-width: 22ch;
  margin-top: 4px !important;
}
@media (max-width: 980px) {
  .ax-tb--solotesto { padding: 30px 22px; }
  .ax-tb--solotesto .ax-tb__claim { max-width: none; }
  .ax-tb--solotesto:after { content: none; }
}
/* AX-TBSOLO-END */

/* AX-LENTE-START — non modificare questa riga */
/* =====================================================================
   41. LA LENTE — immagini e filmato a schermo pieno sul telefono
   =====================================================================
   Un rettangolo nero, l'immagine dentro, due pulsanti. Non c'e' altro,
   e non serve altro: il lavoro vero lo fa il dito che scorre.

   Due modi. «Adatta» mostra l'immagine intera, che sul telefono resta
   piccola ma dice dove sono le cose. «Grandezza reale» la porta alla
   sua misura vera e la lascia scorrere come una mappa: e' l'unico modo
   di leggere davvero una schermata nata per un monitor grande.
   --------------------------------------------------------------------- */
.ax-lente {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  background: #04121F;
  display: flex;
  flex-direction: column;
}
.ax-lente[hidden] { display: none !important; }

.ax-lente__barra {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  background: rgba(10,39,64,.9);
  border-bottom: 1px solid rgba(129,207,242,.18);
}
.ax-lente__modo {
  font-family: var(--ax-font-mono, monospace);
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: var(--ax-blue, #126295);
  border: 0; border-radius: 2px;
  padding: 11px 16px;
  cursor: pointer;
}
.ax-lente__chiudi {
  font-size: 30px; line-height: 1;
  color: #DCEAF4; background: none; border: 0;
  padding: 4px 12px;
  cursor: pointer;
}

.ax-lente__scena {
  flex: 1 1 auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ax-lente__scena img { display: block; }

/* adattata: si vede tutta */
.ax-lente[data-modo="fit"] .ax-lente__scena img {
  max-width: 100%;
  max-height: 100%;
  width: auto; height: auto;
}
/* grandezza vera: si scorre */
.ax-lente[data-modo="vero"] .ax-lente__scena {
  align-items: flex-start;
  justify-content: flex-start;
}
.ax-lente[data-modo="vero"] .ax-lente__scena img {
  max-width: none;
  max-height: none;
  width: auto; height: auto;
}

/* Il segno d'angolo sulle immagini che si aprono. Sta sul contenitore,
   non sull'immagine: un <img> non regge gli pseudo-elementi. */
@media (max-width: 980px) {

  .ax-ingrandibile { position: relative; }
  .ax-ingrandibile:after {
    content: "⤢";
    position: absolute;
    right: 10px; bottom: 10px;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; line-height: 1;
    color: #fff;
    background: rgba(10,39,64,.72);
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 2px;
    pointer-events: none;
  }
  .ax-ingrandibile img { cursor: zoom-in; }
}
/* AX-LENTE-END */

/* AX-LENTE2-START — non modificare questa riga */
/* --- 41.1 Il segno sul filmato ----------------------------------------
   Sul filmato il segno va tenuto piu' discosto dal bordo: sotto c'e'
   la pagina che continua, e appiccicato all'angolo sembrerebbe un
   comando del filmato invece che un invito ad aprirlo. */
@media (max-width: 980px) {

  .ax-home-hero.ax-ingrandibile:after,
  .ax-hero.ax-ingrandibile:after {
    right: 14px;
    bottom: 18px;
    width: 34px; height: 34px;
    font-size: 16px;
    z-index: 4;
  }
  .ax-map.ax-ingrandibile:after { right: 8px; bottom: 8px; }
}
/* AX-LENTE2-END */