/* Untold Agency — CSS del sito in un file solo (generato da preview/build-export.js: modifica i file sorgente e rigenera) */
/* ===== tokens/fonts.css ===== */
/* Webfont SELF-HOSTED (regola 6/7 di CLAUDE.md, ott. 2026): stessi file woff2 che servivano Google Fonts (sottoinsiemi latin + latin-ext,
   gli unici che servono a italiano e tedesco), copiati in assets/fonts/ — stesso aspetto, nessuna richiesta a server esterni, font-display: swap.
   Famiglie e pesi = l'unione di tutto ciò che le pagine e i blocchi chiedevano:
   Syne 400–800 (titoli, menu) · Poppins 300–800 (testi) · Inter 400–700 (bottoni, footer, card) · Mulish 400 (testo base) · DM Sans 300–500 (menu full-screen, CODE BLOCK 2 Foto & Video)
   IBM Plex Mono 400/600/700 (Performance Marketing) · Montserrat 700 + Roboto 400 (Foto & Video) · DM Mono + JetBrains Mono 400 (Grafica).
   Syne, Inter, Mulish, DM Sans, Montserrat, Roboto, JetBrains Mono sono font variabili: un file per sottoinsieme serve tutti i pesi (come su Google).
   Le pagine precaricano i due file principali (syne-latin, poppins-400-latin) con <link rel="preload"> nel <head>. */
/* latin-ext */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/syne-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/syne-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/syne-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/syne-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/syne-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/syne-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/syne-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/syne-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/syne-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/syne-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/poppins-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/poppins-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/poppins-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/poppins-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/poppins-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/poppins-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/poppins-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/poppins-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/poppins-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/poppins-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/poppins-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/poppins-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/mulish-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/mulish-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/dm-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/dm-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/dm-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/dm-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/dm-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/dm-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/montserrat-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/montserrat-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/roboto-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/roboto-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/dm-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/dm-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== tokens/colors.css ===== */
:root {
  /* Global colors (Elementor kit) */
  --color-primary: #FFFFFF;    /* Principale */
  --color-secondary: #D1D1D1;  /* Secondario */
  --color-text: #FFFFFF;       /* Testo */
  --color-accent: #0A0A0A;     /* In risalto */

  /* Page background — flat, no gradient, no pattern */
  --bg-page: #0E0F12;

  /* Grid sections (.u-section-grid): radial overlay on top of the grid image, full opacity —
     centre #0E0F129C → solid #0E0F12 at 50%, so the grid glows in the middle and dissolves before every edge */
  --grid-overlay-center: #0E0F129C;
  --grid-overlay-edge: #0E0F12;
  --grid-overlay: radial-gradient(at center center, #0E0F129C 0%, #0E0F12 50%);

  /* Brand gradient (used across many components) */
  --brand-orange: #FC7B1B;
  --brand-red: #CE004E;
  --brand-pink: #FA099B;
  --brand-blue: #136CE2;
  --gradient-brand: linear-gradient(135deg, #FC7B1B 0%, #CE004E 35%, #FA099B 65%, #136CE2 100%);
  --gradient-text: linear-gradient(90deg, #fc7b1b 0%, #ce004e 30%, #fa099b 70%, #136ce2 90%); /* .ua-grad (Global block 2), cookie card title */
  --gradient-scrollbar: linear-gradient(180deg, #FC7B1B, #CE004E, #FA099B, #136CE2);

  /* Header / navigation — fixed dark glass bar with neon line */
  --color-header-bg: rgba(15, 15, 15, .6);
  --color-nav-hover: #EE09C5;      /* hover colour + underline pointer */
  --color-dropdown-bg: rgba(15, 15, 15, .85);
  --color-dropdown-bg-mobile: rgba(15, 15, 15, .92);
  --color-dropdown-text: #FFFFFF;
  --color-dropdown-border: rgba(255, 255, 255, .14);
  --color-hamburger: #FFFFFF;
  --header-line-gradient: linear-gradient(90deg, transparent 0%, #FF8C00 20%, #FF0000 40%, #FF00CC 60%, #0055FF 80%, transparent 100%);
  --header-line-shadow: 0 -5px 15px rgba(255, 50, 100, .5);

  /* Buttons — liquid glass */
  --button-bg: rgba(14, 15, 18, .25);
  --button-bg-hover: rgba(14, 15, 18, .15);
  --button-glow: linear-gradient(90deg, #FC7B1B, #CE004E, #FA099B, #136CE2);

  /* Footer */
  --color-footer-gradient-end: #F2295B; /* second colour of the footer radial gradient */
  --footer-overlay: radial-gradient(at bottom left, #0E0F129C 0%, #0E0F12 50%); /* over Grid-10-1.png, full opacity */
  /* strip: the 4 Untold brand colours, soft transparent ends (same family as the header neon line) */
  --footer-strip-gradient: linear-gradient(90deg, transparent 0%, #FF8C00 20%, #FF0000 40%, #FF00CC 60%, #0055FF 80%, transparent 100%);
  --footer-strip-shadow: 0 0 15px rgba(255, 50, 100, .4);
  --color-footer-border: rgba(255, 255, 255, .2);
  --social-instagram: #E1306C;
  --social-facebook: #1877F2;
  --social-whatsapp: #25D366;
  --social-tiktok: #000000;
  --social-linkedin: #0A66C2;

  /* Global code */
  --color-scrollbar-track: #050510;
  --color-loader-bg: #0e0f12;
  --color-cookie-text: #c9ccd3;
  --color-cookie-border: rgba(255, 255, 255, .14);
  --color-cookie-accent: #fa099b;
}

/* ===== tokens/typography.css ===== */
:root {
  /* Families (loaded in tokens/fonts.css) */
  --font-syne: 'Syne', sans-serif;
  --font-poppins: 'Poppins', sans-serif;
  --font-inter: 'Inter', sans-serif;
  --font-mulish: 'Mulish', sans-serif;

  /* Global typography (Elementor kit) */
  --type-primary-family: var(--font-syne);     /* Principale */
  --type-primary-weight: 700;
  --type-primary-transform: uppercase;
  --type-secondary-family: var(--font-syne);   /* Secondario */
  --type-secondary-weight: 600;
  --type-text-family: var(--font-poppins);     /* Testo */
  --type-text-weight: 400;
  --type-accent-family: var(--font-syne);      /* In risalto */
  --type-accent-weight: 500;
  --type-accent-transform: uppercase;
  --type-body-family: var(--font-mulish);      /* body text */
  --type-body-size: 22px;
  --type-body-line-height: 1.6;

  /* Navigation */
  --nav-item-family: var(--font-syne);
  --nav-item-size: 18px;
  --nav-item-size-tablet: 12px;
  --nav-item-weight: 700;
  --nav-item-line-height: 1.1em;
  --nav-item-letter-spacing: -0.5px;
  --nav-item-padding-mobile: 45px;             /* vertical padding per item on mobile */
  --nav-dropdown-size: 14px;
  --nav-dropdown-size-mobile: 18px;
  --nav-dropdown-weight: 500;
  --nav-dropdown-letter-spacing: 1px;

  /* Buttons */
  --button-family: var(--font-inter);
  --button-size: 14px;
  --button-weight: 700;
  --button-letter-spacing: 1px;

  /* Footer */
  --footer-heading-family: var(--font-inter);
  --footer-heading-size: 22px;
  --footer-heading-size-mobile: 20px;
  --footer-heading-weight: 700;
  --footer-heading-line-height: 1.1em;
  --footer-heading-letter-spacing: -0.5px;
  --footer-text-family: var(--font-poppins);
  --footer-text-size: 14px;
  --footer-text-weight: 300;
  --footer-text-line-height: 1.4em;
  --footer-list-size: 16px;
  --footer-list-gap: 15px;
  --footer-copyright-size: 14px;
  --footer-copyright-weight: 700;
}

/* ===== tokens/layout.css ===== */
:root {
  /* Container */
  --container-max: 1400px;
  --container-padding: 0;

  /* Breakpoints — reference only: custom properties cannot be used inside @media,
     so header.css / footer.css hard-code the same values. */
  --bp-mobile: 768px;    /* mobile: up to 768px */
  --bp-tablet: 1024px;   /* tablet: 769px – 1024px */
  --bp-desktop: 1025px;  /* desktop: from 1025px */

  /* Header */
  --header-min-height: 90px;
  --header-blur: 10px;
  --header-line-width: 85%;
  --header-line-height: 3px;
  --dropdown-radius: 0 0 20px 20px;
  --dropdown-shadow: 0 18px 50px rgba(0, 0, 0, .6);

  /* Buttons — liquid glass */
  --button-radius: 2rem;
  --button-padding: 15px 40px;
  --button-blur: 4px;
  --button-ease: cubic-bezier(0.175, 0.885, 0.32, 2.2);

  /* Grid sections — raster grid applied per section (never on the body), cover / no-repeat / center */
  --grid-section-image: url("/wp-content/uploads/2025/12/Grid-10-1-2.png");

  /* Footer — a different grid image: bottom left, contain, no-repeat, attachment fixed */
  --footer-bg-image: url("/wp-content/uploads/2025/12/Grid-10-1.png");
  --footer-strip-height: 5px;
  --footer-strip-width: 32%;
  --footer-content-max: 1560px;
  --footer-content-padding: 100px 15px 30px;
  --footer-content-padding-tablet: 50px 15px 30px;
  --footer-content-gap: 100px;
  --footer-content-gap-tablet: 50px;
  --footer-columns-max: 900px;
  --footer-columns-gap: 60px;
  --footer-columns-gap-tablet: 35px;
  --footer-mascot-width: 200px;
  --footer-mascot-left: 33px;          /* from the content block's left edge (15px padding + 18px, as on the live site) */
  --footer-mascot-peek: 200px;         /* natural distance of the image top above the footer's bottom edge, before the scroll effect (240 → 200 with Testa-sotto.webp: the head stays below the social icons, user request 2026-10-09) */
  --footer-mascot-peek-mobile: 180px;  /* ≤1024px: also becomes the content block's bottom padding */
  --social-icon-size: 22px;
}

/* ===== global/base.css ===== */
/* Site-wide base — page background, default body type, headings, links, container, sections, typography presets */
html { background: var(--bg-page); }
body { overflow-x: clip !important; } /* niente scroll laterale (marquee, card volanti). clip, MAI hidden: body{overflow-x:hidden} (nei blocchi live incollati) rende il body uno scroll-container e rompe ogni position:sticky — l'!important serve proprio a battere quei blocchi verbatim */
/* MOBILE (ott. 2026): rete di sicurezza per iOS ≤ 15 / browser senza overflow: clip — lì hidden sul body si propaga allo schermo
   (html non ha overflow proprio), quindi il body non diventa uno scroll-container e gli sticky restano intatti. Le cause vere degli
   sbordi sono corrette nelle pagine; questa regola resta solo come paracadute. */
@supports not (overflow-x: clip) { body { overflow-x: hidden !important; } }
/* MOBILE: niente ingrandimento automatico del testo di iOS/Android col telefono in orizzontale (dimensioni = quelle del CSS) */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* MOBILE: zone sicure dell'iPhone (barra Home in basso, notch/Dynamic Island in orizzontale) per gli elementi fissati ai bordi dello schermo:
   pappagallo e card dei cookie (global block 4) non finiscono sotto la barra Home. max(): dove la zona sicura è 0 i valori restano quelli di prima. */
#ub-fab#ub-fab { bottom: max(16px, calc(env(safe-area-inset-bottom, 0px) + 8px)); right: max(16px, env(safe-area-inset-right, 0px)); }
#ub-card#ub-card { bottom: max(20px, calc(env(safe-area-inset-bottom, 0px) + 10px)); right: max(20px, env(safe-area-inset-right, 0px)); }
@media (max-width: 480px) { #ub-card#ub-card { left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); bottom: max(12px, calc(env(safe-area-inset-bottom, 0px) + 8px)); } }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg-page);            /* flat #0E0F12 — no gradient, no pattern, no grid on the body */
  color: var(--color-text);
  font-family: var(--type-body-family);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line-height);
  -webkit-font-smoothing: antialiased;
}
/* Raw headings follow the Hello Elementor theme reset (the live site's theme): family and colour inherit from the surrounding
   block, weight 500, line-height 1.2. Elementor applies the Principale preset only to its Heading widgets, so page headings set
   Syne 700 uppercase themselves (or use .u-type-primary); headings inside verbatim HTML blocks (cookie card, team modal, level
   cards, FAQ) either style themselves or inherit their block's Poppins — exactly as on the live site. */
h1, h2, h3, h4, h5, h6 {
  margin-block: .5rem 1rem;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.2;
  color: inherit;
}
a { color: var(--color-text); }
a:hover { color: var(--color-nav-hover); }
img { max-width: 100%; height: auto; }
/* Icone SVG in linea al posto di Font Awesome (stessa resa del font: alte 1em, larghe quanto il viewBox, linea di base come i glifi) */
.ua-fa { display: inline-block; height: 1em; width: auto; overflow: visible; vertical-align: -.125em; }
/* Paragraphs follow the Hello Elementor theme reset (verbatim blocks may zero UA margins with a `*` reset; the element rule still wins) */
p { margin-block-start: 0; margin-block-end: .9rem; }

/* Sections bleed edge to edge; only the inner container is constrained (never put a background on .u-container) */
.u-section { position: relative; width: 100%; box-sizing: border-box; }
.u-container { max-width: var(--container-max); padding: var(--container-padding); margin-left: auto; margin-right: auto; }

/* Grid section: Grid-10-1-2.png (cover, no-repeat, center) with the radial overlay layered on top at full opacity.
   The grid glows faintly in the middle and dissolves into flat #0E0F12 before reaching any edge. */
.u-section-grid {
  background-color: var(--bg-page);
  background-image: var(--grid-overlay), var(--grid-section-image);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

/* Global typography presets (Elementor kit) */
.u-type-primary   { font-family: var(--type-primary-family);   font-weight: var(--type-primary-weight);   text-transform: var(--type-primary-transform); }
.u-type-secondary { font-family: var(--type-secondary-family); font-weight: var(--type-secondary-weight); }
.u-type-text      { font-family: var(--type-text-family);      font-weight: var(--type-text-weight); }
.u-type-accent    { font-family: var(--type-accent-family);    font-weight: var(--type-accent-weight);    text-transform: var(--type-accent-transform); }

/* FAQ statiche (regola 1 di CLAUDE.md, preview/build-faq.js): un pannello per categoria dentro .ufaq-list. display: contents → le domande
   restano figlie dirette della lista per il layout, identico a quando le creava lo script; il pannello non attivo ha l'attributo hidden. */
.ufaq-panel { display: contents; }
.ufaq-panel[hidden] { display: none; }

/* ===== global/scrollbar.css ===== */
/* GLOBAL CSS — neon scrollbar, verbatim from the brief */

/* 1. Larghezza della barra */
::-webkit-scrollbar {
    width: 16px; /* Aumentato leggermente per far vedere meglio l'effetto tubo */
}

/* 2. Binario (Sfondo scuro) */
::-webkit-scrollbar-track {
    background: #050510; 
    /* Opzionale: un'ombra interna nel binario per dare profondità */
    box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
}

/* 3. Il "Neon" (Cursore) */
::-webkit-scrollbar-thumb {
    /* Il tuo gradiente (Base del colore) */
    background: linear-gradient(180deg, 
        #FC7B1B, 
        #CE004E, 
        #FA099B, 
        #136CE2);
        
    border-radius: 20px; /* Molto arrotondato */
    
    /* BORDO INVISIBILE: Mantiene l'effetto galleggiamento */
    border: 3px solid #050510; 
    
    /* --- IL TRUCCO NEON --- */
    /* Inseriamo un bagliore BIANCO all'interno per simulare il gas neon acceso */
    box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.9);
}

/* 4. Effetto Hover (Si "accende" di più) */
::-webkit-scrollbar-thumb:hover {
    /* Invertiamo o illuminiamo i colori */
    background: linear-gradient(180deg, 
        #136CE2, 
        #FA099B, 
        #CE004E, 
        #FC7B1B);
    
    /* Aumentiamo il bagliore interno quando lo tocchi */
    box-shadow: inset 0 0 8px rgba(255, 255, 255, 1);
}

/* ===== components/core/button.css ===== */
/* Button — components/core/Button.jsx · LIQUID GLASS UNTOLD (every button on the site) */
.ua-button {
  --c-color-1: #FC7B1B;
  --c-color-2: #CE004E;
  --c-color-3: #FA099B;
  --c-color-4: #136CE2;

  position: relative;
  isolation: isolate;
  overflow: visible;
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font-family: var(--button-family);
  font-size: var(--button-size);
  font-weight: var(--button-weight);
  letter-spacing: var(--button-letter-spacing);
  text-transform: uppercase;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  /* dark glass: site colour at 25% */
  background: var(--button-bg);
  -webkit-backdrop-filter: blur(var(--button-blur));
  backdrop-filter: blur(var(--button-blur));
  border: none;
  border-radius: var(--button-radius);
  padding: var(--button-padding);
  box-shadow:
    /* soft white shadow below */
    0 8px 15px rgba(255, 255, 255, 0.08),
    0 2px 5px rgba(255, 255, 255, 0.05),
    /* inner glass reflections */
    inset 2px 2px 1px 0 rgba(255, 255, 255, 0.25),
    inset -1px -1px 1px 1px rgba(255, 255, 255, 0.1);
  transition: all 0.4s var(--button-ease);
}
/* Untold glow, invisible by default */
.ua-button::before {
  content: "";
  position: absolute;
  top: -4px; left: -4px; right: -4px; bottom: -4px;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--c-color-1), var(--c-color-2), var(--c-color-3), var(--c-color-4));
  filter: blur(16px);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s var(--button-ease);
}
.ua-button:hover::before,
.ua-button:active::before { opacity: 1; }
.ua-button:hover,
.ua-button:active {
  color: #ffffff;
  transform: scale(0.95);
  background: var(--button-bg-hover); /* glass gets lighter */
}

/* ===== components/layout/header.css ===== */
/* ============================================================
   HEADER UNTOLD — menu full-screen "mdw-menu-145" (template MDW
   elementor-5435) ricreato IDENTICO nella struttura/effetti, con
   voci, logo e contatti Untold. Barra fissa trasparente con
   hamburger a 3 linee; overlay #0E0F12 (sfondo del sito, richiesta utente
   2026-10-09 — mai il beige #CED1BF del template) con clip-path reveal,
   pannello immagini 40% che cambia al hover delle voci, colonna
   contenuti 690px, close a X animata. Stili RICOSTRUITI puliti.
   ============================================================ */
/* DM Sans è caricato via <link> dal componente Header.jsx (niente @import: bloccherebbe tutte le regole del file finché il CDN non risponde) */

/* ---------- barra fissa: LIQUID GLASS (design dell'utente — CLAUDE.md) ---------- */
.ua-header {
  position: fixed;
  top: -80px;                         /* bleed 80px: la banda superiore non sfocata del filtro resta fuori schermo */
  left: 0;
  right: 0;
  z-index: 9998;                      /* sotto l'overlay del menu (9999) */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 105px 70px 25px;           /* 80 di bleed + 25 → barra visibile 90px con il logo a 40px */
  /* fallback vetro scuro: Safari/Firefox non eseguono filtri SVG in backdrop-filter e scartano la dichiarazione url() */
  background: rgba(15, 15, 15, .6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  /* liquid glass: frost + mappa di spostamento #ua-glass-filter (renderizzata nascosta in Header.jsx) */
  background: hsl(0 0% 0% / .1);
  backdrop-filter: url(#ua-glass-filter) saturate(1.2);
  box-shadow:
    inset 0 -1px 0 0 rgba(255, 255, 255, .22),
    inset 0 -8px 14px -10px rgba(255, 255, 255, .16),
    inset 0 -18px 24px -18px rgba(0, 0, 0, .45),
    inset 1px 0 0 0 rgba(255, 255, 255, .06),
    inset -1px 0 0 0 rgba(255, 255, 255, .06),
    0 10px 30px -10px rgba(0, 0, 0, .45);
}
/* linea neon sotto la barra: 85%, centrata, 3px, gradiente brand, glow verso l'alto */
.ua-header::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: var(--header-line-width, 85%);
  height: var(--header-line-height, 3px);
  transform: translateX(-50%);
  background: var(--header-line-gradient, linear-gradient(90deg, transparent 0%, #FF8C00 20%, #FF0000 40%, #FF00CC 60%, #0055FF 80%, transparent 100%));
  box-shadow: var(--header-line-shadow, 0 -5px 15px rgba(255, 50, 100, .5));
  pointer-events: none;
}
.ua-header__logo { display: block; line-height: 0; }
.ua-header__logo img { height: 40px; width: auto; display: block; } /* 30 → 40px (richiesta utente 2026-10-09) */

/* hamburger: 3 divider, hover = le linee scivolano fuori e rientrano da sinistra */
.ua-header__burger {
  width: 33px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.ua-header__burger span {
  position: relative;
  display: block;
  width: 100%;
  height: 1px;
  background: #FFFFFF;
  transition: 0.8s cubic-bezier(0.24, 0.43, 0.15, 0.97);
}
.ua-header__burger span:nth-child(2) { transition-delay: 0.15s; }
.ua-header__burger span:nth-child(3) { transition-delay: 0.3s; }
.ua-header__burger span::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background: #FFFFFF;
  right: calc(100% + 20px);
  top: 0;
}
.ua-header__burger:hover span { transform: translateX(calc(100% + 20px)); }

/* ---------- overlay full screen ---------- */
.ua-m145 {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: row;
  background: #0E0F12;
  clip-path: inset(100% 0 0 0);
  will-change: clip-path;
  transition: 0s;
}
/* apertura/chiusura: clip-path guidato INLINE (!important) da Header.jsx — su alcune pagine
   la cascata via classe su body non aggiorna il computed style di questo fixed element */
body.menu-active { overflow: hidden; }

/* pannello immagini 40%: pool nascosto + wrapper dei cloni con reveal */
.ua-m145__pool { display: none; }
.ua-m145__images { position: relative; width: 40%; overflow: hidden; }
.ua-m145__images .ua-m145__img {
  position: absolute;
  inset: 0;
  clip-path: inset(100% 0 0 0);
  transition: 0.6s;
}
.ua-m145__images .ua-m145__img.mdw-showing { clip-path: inset(0 0 0 0); }
.ua-m145__images img {
  width: 100%;
  height: 100vh;
  object-fit: cover;
  display: block;
  transform: scale(1.2);
  transition: 1.2s;
}
.ua-m145__images .ua-m145__img.mdw-showing img { transform: scale(1); }

/* colonna contenuti 60% */
.ua-m145__content {
  width: 60%;
  height: 100vh;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  display: flex;
}
.ua-m145__content::-webkit-scrollbar { display: none; }
.ua-m145__inner {
  width: 690px;
  max-width: 100%;
  margin: auto;
  padding: 15px;
}
.ua-m145__label {
  margin: 0 0 20px 0;
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.3em;
  letter-spacing: -0.03em;
  color: #86858C;
  text-transform: none;
}
.ua-m145__label--mt { margin: 30px 0 0 0; }

/* liste voci: due colonne 50/50 */
.ua-m145__links { display: flex; flex-direction: row; }
.ua-m145__links ul { list-style: none; margin: 0; padding: 0; width: 50%; }
.ua-m145__links li { position: relative; }
.ua-m145__links li:not(:first-child) { margin-top: 11px; }
.ua-m145__links li:not(:last-child) { padding-bottom: 11px; }
.ua-m145__links a {
  display: flex;
  align-items: center;
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  font-size: 30px;
  line-height: 1em;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  text-decoration: none;
}
.ua-m145__icon {
  position: absolute;
  overflow: hidden;
  display: inline-flex;
  line-height: 0;
}
.ua-m145__icon svg {
  height: 22px;
  width: 22px;
  transform: translate(-120%, 120%);
  transition: transform 0.5s cubic-bezier(0.24, 0.43, 0.15, 0.97);
}
.ua-m145__text { display: flex; transition: transform 0.5s cubic-bezier(0.24, 0.43, 0.15, 0.97); }
.ua-m145__links li:not(.mdw-active):hover .ua-m145__text { transform: translateX(45px); }
.ua-m145__links li:not(.mdw-active):hover .ua-m145__icon svg { transform: translate(0, 0); }
.ua-m145__links li.mdw-active .ua-m145__text { position: relative; }
.ua-m145__links li.mdw-active .ua-m145__text::before {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  height: 1px;
  width: 100%;
  background: currentColor;
  transition: 0.2s;
}

/* contatti / policy: underline animata */
.ua-m145__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.ua-m145__row--mt { margin-top: 30px; }
.ua-m145__row a {
  position: relative;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.3em;
  letter-spacing: -0.03em;
  color: #FFFFFF;
  text-decoration: none;
}
.ua-m145__row a.ua-m145__plain { font-weight: 400; }
.ua-m145__row a::before {
  content: "";
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.8s cubic-bezier(0.24, 0.43, 0.15, 0.97);
}
.ua-m145__row a:hover::before { transform: scaleX(1); transform-origin: left; }
.ua-m145__vdiv { width: 2px; height: 20px; background: #FFFFFF; }

/* social — bottone "Btn" di Uiverse.io (vinodjangid07), valori LETTERALI (richiesta utente 2026-10-09).
   Classi rinominate nel namespace del menu (.Btn → .ua-m145__soc, .svgContainer → .ua-m145__soc-svg, .BG → .ua-m145__soc-bg);
   unica variabile: il colore di .BG = colore originale di ogni social. Glifi Font Awesome bianchi a 21px (= svg 1.6em del button 13.33px). */
.ua-m145__social { display: flex; flex-direction: row; gap: 30px; margin-top: 20px; }
.ua-m145__soc {
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background-color: transparent;
  position: relative;
  isolation: isolate;                /* tiene .BG (z-index -1) dentro il bottone */
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.3s;
  text-decoration: none;
}
.ua-m145__soc-svg {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  letter-spacing: 0.8px;
  border-radius: 10px;
  transition: all 0.3s;
  border: 1px solid rgba(156, 156, 156, 0.466);
}
.ua-m145__soc-svg i, .ua-m145__soc-svg svg { font-size: 21px; line-height: 1; color: #FFFFFF; } /* svg = icone in linea (ex Font Awesome) */
.ua-m145__soc-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--soc-bg, #053eff);
  z-index: -1;
  border-radius: 10px;
  pointer-events: none;
  transition: all 0.3s;
}
.ua-m145__soc:hover .ua-m145__soc-bg,
.ua-m145__soc:focus-visible .ua-m145__soc-bg {
  transform: rotate(35deg);
  transform-origin: bottom;
}
.ua-m145__soc:hover .ua-m145__soc-svg,
.ua-m145__soc:focus-visible .ua-m145__soc-svg {
  background-color: rgba(214, 214, 214, 0.466);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.ua-m145__soc:focus-visible { outline: none; }
.ua-m145__soc--instagram { --soc-bg: radial-gradient(circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%); }
.ua-m145__soc--facebook { --soc-bg: #1877F2; }
.ua-m145__soc--whatsapp { --soc-bg: #25D366; }
.ua-m145__soc--tiktok { --soc-bg: linear-gradient(135deg, #25F4EE 0%, #FE2C55 100%); } /* i colori del logo: il nero del brand sparirebbe sul fondo #0E0F12 */
.ua-m145__soc--linkedin { --soc-bg: #0A66C2; }

/* close */
.ua-m145__close {
  position: absolute;
  top: 40px;
  right: 70px;
  width: 25px;
  height: 25px;
  background: #0E0F12;
  border: 0;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.ua-m145__close span {
  position: relative;
  display: block;
  width: 141.4%;
  height: 1px;
  background: #FFFFFF;
  transition: 0.8s cubic-bezier(0.24, 0.43, 0.15, 0.97);
}
.ua-m145__close span:nth-child(1) { transform: rotate(45deg); transform-origin: top left; }
.ua-m145__close span:nth-child(2) { transform: rotate(-45deg); transform-origin: bottom left; transition-delay: 0.15s; }
.ua-m145__close span::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background: #FFFFFF;
  right: calc(100% + 20px);
  top: 0;
}
.ua-m145__close span:nth-child(2)::before { right: unset; left: calc(100% + 20px); }
.ua-m145__close:hover span:nth-child(1) { transform: rotate(45deg) translateX(calc(100% + 20px)); }
.ua-m145__close:hover span:nth-child(2) { transform: rotate(-45deg) translateX(calc(-100% - 20px)); }

/* entrance a scalare */
.ua-m145__links li,
.ua-m145__links .ua-m145__langblock,
.ua-m145__inner > *:not(.ua-m145__links) {
  transform: translateY(40px);
  opacity: 0;
}
.ua-m145.is-open .ua-m145__links li,
.ua-m145.is-open .ua-m145__links .ua-m145__langblock,
.ua-m145.is-open .ua-m145__inner > *:not(.ua-m145__links) {
  transform: translateY(0);
  opacity: 1;
  transition: 1s ease calc(var(--d, 0) * 0.1s);
}

/* ---------- tablet ---------- */
@media (max-width: 1024px) {
  .ua-header { padding: 98px 20px 18px; }   /* 80 bleed + 18 → barra visibile 70px */
  .ua-header__logo img { height: 34px; }
  .ua-m145__close { top: 20px; right: 20px; }
}
@media (max-width: 1400px) and (min-width: 768px) {
  .ua-m145__inner { width: 590px; }
  .ua-m145__links li:not(:first-child) { margin-top: 10px; }
  .ua-m145__links li:not(:last-child) { padding-bottom: 10px; }
}

/* ---------- mobile ---------- */
@media (max-width: 767px) {
  .ua-m145__images { display: none; }
  .ua-m145__content { width: 100%; }
  .ua-m145__inner { padding: 15px 5px; }
  .ua-m145__links { gap: 10px; flex-direction: column; }
  .ua-m145__links ul { width: 100%; }
  .ua-m145__links a { font-size: 24px; justify-content: space-between; }
  .ua-m145__links li:last-child { padding-bottom: 10px; }
  .ua-m145__icon { position: absolute; right: 0; }
  .ua-m145__icon svg { height: 12px; width: 12px; transform: translate(0, 0); }
  .ua-m145__text { transform: translate(0) !important; }
  .ua-m145__links li.mdw-active .ua-m145__text::before { display: none; }
  .ua-m145__links li::before,
  .ua-m145__links li::after {
    content: "";
    position: absolute;
    height: 1px;
    width: 100%;
    background: #FFFFFF;
    bottom: 0;
    transform-origin: right;
    transition: transform 0.8s cubic-bezier(0.24, 0.43, 0.15, 0.97);
  }
  .ua-m145__links li::before { opacity: 0.5; }
  .ua-m145__links li::after { transform: scaleX(0); }
  .ua-m145__links li:hover::after { transform: scaleX(1); transform-origin: left; }
  .ua-m145__row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .ua-m145__vdiv { display: none; }
  .ua-m145__social { gap: 20px; }
}

/* Cambio lingua a tendina (ott. 2026, richiesta utente): nel menu nella prima colonna, sotto Home / Team / Chi siamo / Contattaci;
   nel footer a destra della barra in basso (footer.css). <details> nativo: pulsante = bandiera tonda + sigla + freccia; tendina
   verticale di vetro scuro con le tre lingue (bandiera, sigla, nome). Lingua attiva evidenziata, le altre #86858C con bandiera
   desaturata, a colori e bianche al passaggio. Selettori a due classi: battono i link generici del menu (.ua-m145__links a).
   .ua-m145__langblock ha z-index 3: la tendina passa sopra i blocchi che seguono (anche loro con il transform d'entrata). */
.ua-m145__col { width: 50%; display: flex; flex-direction: column; }
.ua-m145__links .ua-m145__col > ul { width: 100%; }
.ua-m145__langblock { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; }
.ua-m145__langblock .ua-m145__label--mt { margin-top: 40px; }
.ua-langdrop { position: relative; margin-top: 16px; }
.ua-langdrop > summary { list-style: none; }
.ua-langdrop > summary::-webkit-details-marker { display: none; }
.ua-langdrop .ua-langdrop__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px 0 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .08);
  color: #FFFFFF;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
  letter-spacing: .12em;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .25s ease;
}
.ua-langdrop .ua-langdrop__btn:hover, .ua-langdrop[open] > .ua-langdrop__btn { background: rgba(255, 255, 255, .11); }
.ua-langdrop .ua-langdrop__btn:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.ua-langdrop__current { display: inline-flex; align-items: center; gap: 8px; }
.ua-langdrop__btn .ua-langdrop__name, .ua-langdrop__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ua-langdrop__chev { flex: none; width: 10px; height: 7px; color: #86858C; transition: transform .25s ease; }
.ua-langdrop[open] .ua-langdrop__chev { transform: rotate(180deg); }
.ua-langdrop__flag {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .18);
  transition: filter .2s ease, opacity .2s ease;
}
.ua-langdrop__flag svg { display: block; width: 100%; height: 100%; }
.ua-langdrop__list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 5;
  width: 180px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-radius: 16px;
  background: rgba(14, 15, 18, .86);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 40px rgba(0, 0, 0, .55);
}
.ua-langdrop[open] .ua-langdrop__list { animation: ua-langdrop-in .2s ease; }
@keyframes ua-langdrop-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.ua-langdrop .ua-langdrop__opt {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  height: 36px;
  padding: 0 12px 0 8px;
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
  letter-spacing: .12em;
  color: #86858C;
  text-decoration: none;
  transition: color .2s ease, background-color .2s ease;
}
.ua-langdrop__opt .ua-langdrop__flag { filter: grayscale(1) brightness(.85); opacity: .6; }
.ua-langdrop__opt .ua-langdrop__name { margin-left: auto; font-weight: 400; letter-spacing: 0; }
.ua-langdrop .ua-langdrop__opt:hover { color: #FFFFFF; background: rgba(255, 255, 255, .06); }
.ua-langdrop .ua-langdrop__opt:focus-visible { color: #FFFFFF; outline: 2px solid rgba(255, 255, 255, .7); outline-offset: -2px; }
.ua-langdrop .ua-langdrop__opt.is-current { color: #FFFFFF; background: rgba(255, 255, 255, .10); }
.ua-langdrop__opt:hover .ua-langdrop__flag, .ua-langdrop__opt:focus-visible .ua-langdrop__flag, .ua-langdrop__opt.is-current .ua-langdrop__flag { filter: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ua-langdrop[open] .ua-langdrop__list { animation: none; } }
@media (max-width: 767px) {
  .ua-m145__col { width: 100%; }
  .ua-m145__langblock { margin-bottom: 20px; }
  .ua-m145__langblock .ua-m145__label--mt { margin-top: 20px; }
}

/* ---------- MOBILE / TOUCH (ott. 2026, richiesta utente — desktop con mouse invariato) ----------
   · Bersagli touch ≥ 44×44 senza cambiare l'aspetto: padding + margine negativo uguale (logo, hamburger), padding con posizione
     compensata (X del menu), area invisibile ::after (cambio lingua). Basati sul tipo di dispositivo, non sulla larghezza (iPad Pro
     orizzontale = 1366px ma touch).
   · Menu: altezze = schermo visibile (100% dell'overlay fixed invece di 100vh: sui telefoni 100vh è più alto dello schermo quando la
     barra degli indirizzi è visibile e le ultime voci finivano sotto); lo scroll interno non passa alla pagina sotto
     (overscroll-behavior + guardia touch in layout.js); la pagina resta bloccata da body.menu-active. */
.ua-m145__content { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
  .ua-m145__content { height: 100%; }
  .ua-m145__images img { height: 100%; }
}
@media (hover: none) and (pointer: coarse) {
  /* vetro della barra sui touch: il filtro SVG di spostamento come backdrop-filter si ricalcola a ogni frame di scroll ed è il punto più
     pesante della pagina sui telefoni Android di fascia media → stesso vetro sfocato (blur 10px) che iPhone/Safari mostrano già oggi */
  .ua-header { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .ua-header__logo { padding-block: 5px; margin-block: -5px; }
  .ua-header__burger { box-sizing: content-box; padding: 11px 6px; margin: -11px -6px; }
  .ua-m145__close { box-sizing: content-box; padding: 10px; top: 30px; right: 60px; }
  .ua-langdrop .ua-langdrop__btn, .ua-langdrop .ua-langdrop__opt { position: relative; }
  .ua-langdrop .ua-langdrop__btn::after, .ua-langdrop .ua-langdrop__opt::after { content: ""; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; }
  .ua-m145__soc { position: relative; }
}
@media (hover: none) and (pointer: coarse) and (max-width: 1024px) { .ua-m145__close { top: 10px; right: 10px; } }

/* ===== components/layout/footer.css ===== */
/* Footer — components/layout/Footer.jsx
   Background: Grid-10-1.png, bottom left, contain, no-repeat, attachment fixed (≤1024px Elementor switches fixed → scroll; mirrored here),
   with the radial overlay on top (full opacity, anchored bottom left: #0E0F129C 0% → #0E0F12 50%) — the overlay scrolls with the
   footer so the grid is faintly readable only near the bottom-left corner and fully dissolved by the top edge and the right side. */
.ua-footer {
  position: relative;
  overflow: hidden;                       /* clips the mascot peeking from the bottom edge */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0;
  background-image: var(--footer-overlay), var(--footer-bg-image);
  background-position: bottom left, bottom left;
  background-size: 100% 100%, contain;
  background-repeat: no-repeat, no-repeat;
  background-attachment: scroll, fixed;
}

/* 5px glow strip, 50% wide: the 4 Untold brand colours fading out at both ends (never a hard line).
   Scroll-linked (Footer.jsx): centred when the footer enters the viewport, slides left as you reach the page
   bottom until its left edge touches the site's left edge; returns toward centre on scroll up. */
.ua-footer__strip {
  width: var(--footer-strip-width);
  height: var(--footer-strip-height);
  background-image: var(--footer-strip-gradient);
  box-shadow: var(--footer-strip-shadow);
  will-change: transform;
}

/* Content block. The first colour of its radial gradient is not in the brief: `--footer-gradient-start` is left
   undefined on purpose → the declaration is invalid → no gradient renders (matches the screenshot). Define it to reveal. */
.ua-footer__content {
  position: relative;
  width: 100%;
  max-width: var(--footer-content-max);
  box-sizing: border-box;
  padding: var(--footer-content-padding);
  display: flex;
  flex-direction: column;
  gap: var(--footer-content-gap);
  background-image: radial-gradient(at top center, var(--footer-gradient-start) 0%, var(--color-footer-gradient-end) 100%);
}

/* Row: brand column (flexible) + links block (max 900px) */
.ua-footer__columns { display: flex; align-items: flex-start; gap: var(--footer-columns-gap); width: 100%; }
.ua-footer__col { min-width: 0; box-sizing: border-box; }
.ua-footer__col--brand { flex: 1 1 0; min-width: 300px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; } /* min 300px (riga social 5 × 38 + 4 × 24 = 286px): sui laptop la colonna non si schiaccia — cede spazio il blocco link */
.ua-footer__links { flex: 0 1 var(--footer-columns-max); width: 100%; max-width: var(--footer-columns-max); display: flex; align-items: flex-start; gap: var(--footer-columns-gap); }
.ua-footer__col--pages { width: 40%; }
.ua-footer__col--services { width: 40%; }
.ua-footer__col--office { width: 70%; }

/* Brand column */
.ua-footer__logo-link { display: block; width: 55%; min-width: min(100%, 200px); line-height: 0; }
.ua-footer__col-logo { display: block; width: 100%; height: auto; }
.ua-footer__text {
  width: 70%;
  min-width: min(100%, 300px);
  margin: 30px 0 40px;
  font-family: var(--footer-text-family);
  font-size: var(--footer-text-size);
  font-weight: var(--footer-text-weight);
  line-height: var(--footer-text-line-height);
  color: var(--color-text);
}
/* Social — lo stesso bottone "Btn" di Uiverse.io (vinodjangid07) del menu, valori LETTERALI (CLAUDE.md):
   quadrato .BG nel colore del brand dietro il contenitore trasparente; hover = BG ruota 35° dal basso + vetro smerigliato. */
.ua-footer__social { list-style: none; margin: 15px 0 0; padding: 0; display: flex; gap: 24px; }
.ua-footer__social li { display: flex; }
.ua-footer__soc {
  width: 38px;                       /* più piccoli del menu (45px), richiesta utente 2026-10-09 */
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background-color: transparent;
  position: relative;
  isolation: isolate;                /* tiene .BG (z-index -1) dentro il bottone */
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.3s;
  text-decoration: none;
}
.ua-footer__soc-svg {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  letter-spacing: 0.8px;
  border-radius: 10px;
  transition: all 0.3s;
  border: 1px solid rgba(156, 156, 156, 0.466);
}
.ua-footer__soc-svg i, .ua-footer__soc-svg svg { font-size: 18px; line-height: 1; color: #FFFFFF; } /* svg = icone in linea (ex Font Awesome) */
.ua-footer__soc-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--soc-bg, var(--soc-fallback, #053eff));
  z-index: -1;
  border-radius: 10px;
  pointer-events: none;
  transition: all 0.3s;
}
.ua-footer__soc:hover .ua-footer__soc-bg,
.ua-footer__soc:focus-visible .ua-footer__soc-bg {
  transform: rotate(35deg);
  transform-origin: bottom;
}
.ua-footer__soc:hover .ua-footer__soc-svg,
.ua-footer__soc:focus-visible .ua-footer__soc-svg {
  background-color: rgba(214, 214, 214, 0.466);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.ua-footer__soc:focus-visible { outline: none; }
.ua-footer__soc--instagram { --soc-bg: radial-gradient(circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%); }
.ua-footer__soc--facebook { --soc-bg: #1877F2; }
.ua-footer__soc--whatsapp { --soc-bg: #25D366; }
.ua-footer__soc--tiktok { --soc-bg: linear-gradient(135deg, #25F4EE 0%, #FE2C55 100%); } /* colori del logo: il nero sparirebbe sul fondo */
.ua-footer__soc--linkedin { --soc-bg: #0A66C2; }

/* Link columns */
.ua-footer__heading {
  margin: 0 0 20px;
  font-family: var(--footer-heading-family);
  font-size: var(--footer-heading-size);
  font-weight: var(--footer-heading-weight);
  line-height: var(--footer-heading-line-height);
  letter-spacing: var(--footer-heading-letter-spacing);
  text-transform: uppercase;
  color: var(--color-primary);
}
.ua-footer__address {
  margin: 0 0 var(--footer-list-gap);
  white-space: pre-line;
  font-family: var(--footer-text-family);
  font-size: var(--footer-list-size);
  font-weight: 400;
  line-height: 1.5;
}
.ua-footer__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--footer-list-gap);
  font-family: var(--footer-text-family);
  font-size: var(--footer-list-size);
  font-weight: 400;
  line-height: 1.4;
}
.ua-footer__list a { display: inline-flex; align-items: center; gap: 12px; color: var(--color-text); text-decoration: none; }
.ua-footer__list a:hover { color: var(--color-nav-hover); }
.ua-footer__list i, .ua-footer__list svg { font-size: 20px; width: 22px; text-align: center; }

/* Bottom bar */
.ua-footer__bottom { border-top: 1px solid var(--color-footer-border); padding-top: 30px; text-align: center; }
.ua-footer__copyright {
  margin: 0;
  font-family: var(--footer-heading-family);
  font-size: var(--footer-copyright-size);
  font-weight: var(--footer-copyright-weight);
  line-height: 1.1em;
  text-transform: uppercase;
  color: var(--color-primary);
}
/* Logo SAR Group piccolo a sinistra del copyright, link a sargroupsolutions.it (richiesta utente, ott. 2026).
   Logo e testo restano centrati come prima; se il testo va a capo (telefono) resta accanto al logo, allineato a sinistra. */
.ua-footer__legal { display: flex; align-items: center; justify-content: center; gap: 12px; }
.ua-footer__sar { flex: 0 0 auto; display: block; line-height: 0; transition: opacity .2s ease; }
.ua-footer__sar:hover { opacity: .8; }
.ua-footer__sar img { display: block; width: auto; height: 28px; }
.ua-footer__legal .ua-footer__copyright { min-width: 0; text-align: left; }

/* Mascot "Testa sotto" — the 200px image widget of the live footer: absolute, bottom-left of the content block,
   hanging past the bottom edge (the footer clips it). The wrapper keeps the natural position — the box Elementor
   measures — while Footer.jsx moves the <img> with the scroll effect (Direction Up · Speed 2.4 · Viewport 14–57%). */
.ua-footer__mascot {
  position: absolute;
  left: var(--footer-mascot-left);
  top: calc(100% - var(--footer-mascot-peek));
  width: var(--footer-mascot-width);
  z-index: 1;
  line-height: 0;
  pointer-events: none;
}
.ua-footer__mascot img { display: block; width: 100%; height: auto; will-change: transform; }

/* ---------- MOBILE / TOUCH (ott. 2026, richiesta utente — desktop con mouse invariato) ----------
   background-attachment: fixed non funziona su iOS Safari (ed Elementor lo spegneva ≤1024px): su telefoni, tablet e ogni schermo
   touch (anche iPad Pro orizzontale) la griglia diventa lo strato ::before, mosso da layout.js con translate3d (--ua-fgrid-y) al 50%
   (telefono) / 60% (tablet) del movimento del fixed desktop: sale e si posa nell'angolo in basso a sinistra mentre arrivi a fondo
   pagina. L'overlay radiale resta sopra (::after), ancorato al footer come prima; a fondo pagina l'aspetto è quello di prima. */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
  .ua-footer { isolation: isolate; background-image: none; }
  .ua-footer::before, .ua-footer::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
  .ua-footer::before { background: var(--footer-bg-image) left bottom / contain no-repeat; transform: translate3d(0, var(--ua-fgrid-y, 0px), 0); }
  .ua-footer::after { background: var(--footer-overlay) left bottom / 100% 100% no-repeat; }
}
/* Bersagli touch ≥ 44×44 senza cambiare l'aspetto: area invisibile ::after attorno a link, icone social e logo SAR Group */
@media (hover: none) and (pointer: coarse) {
  .ua-footer__list a, .ua-footer__sar { position: relative; }
  .ua-footer__list a::after, .ua-footer__sar::after { content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 44px; min-height: 100%; transform: translateY(-50%); }
  .ua-footer__soc::after { content: ""; position: absolute; inset: -3px; }
  .ua-footer .ua-langdrop .ua-langdrop__btn::after { top: -4px; bottom: -4px; }
}

/* Tablet & mobile — up to 1024px: everything stacks at 100% and centres; the mascot peeks from the bottom edge, centred */
@media (max-width: 1024px) {
  .ua-footer { background-attachment: scroll, scroll; }
  .ua-footer__content { padding: var(--footer-content-padding-tablet); padding-bottom: var(--footer-mascot-peek-mobile); gap: var(--footer-content-gap-tablet); }
  .ua-footer__columns, .ua-footer__links { flex-direction: column; align-items: center; gap: var(--footer-columns-gap-tablet); max-width: none; }
  .ua-footer__col--brand { flex: none; min-width: 0; }
  .ua-footer__col, .ua-footer__col--brand, .ua-footer__col--pages, .ua-footer__col--services, .ua-footer__col--office { width: 100%; text-align: center; align-items: center; }
  .ua-footer__logo-link { margin-left: auto; margin-right: auto; }
  .ua-footer__text { margin-left: auto; margin-right: auto; }
  .ua-footer__social { justify-content: center; }
  .ua-footer__list a { justify-content: center; }
  .ua-footer__mascot { left: 50%; margin-left: calc(var(--footer-mascot-width) / -2); top: calc(100% - var(--footer-mascot-peek-mobile)); }
}
/* Mobile — up to 768px */
@media (max-width: 768px) {
  .ua-footer__heading { font-size: var(--footer-heading-size-mobile); }
  .ua-footer__social { gap: 20px; }   /* come il menu su mobile */
}

/* Cambio lingua a tendina (ott. 2026, richiesta utente): nella colonna Ufficio, sotto il numero di telefono, allineato a sinistra
   come le righe sopra (≤1024px centrato come tutta la colonna). Mai nella barra in basso. La tendina si apre verso l'alto, sopra email
   e telefono: il footer ha overflow hidden e taglierebbe ciò che esce sotto. Stile della tendina in header.css (.ua-langdrop). */
.ua-footer__lang { display: flex; margin-top: 20px; }
.ua-footer .ua-langdrop { margin-top: 0; }
.ua-footer .ua-langdrop__list { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; text-align: left; }
.ua-footer .ua-langdrop[open] .ua-langdrop__list { animation-name: ua-langdrop-up; }
@keyframes ua-langdrop-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 1024px) {
  .ua-footer__lang { justify-content: center; }
  .ua-footer .ua-langdrop__list { left: 50%; margin-left: -90px; }
}


/* Testo per i lettori di schermo (regola SEO/AEO, ott. 2026): global/scroll-text.js divide titoli e testi in parole/lettere animate
   (aria-hidden) e lascia qui una copia intera del testo originale, invisibile ma letta come frase normale. !important: le regole di
   pagina sugli span (es. ".titolo span { display:inline-block; gradiente }") non devono mai renderla visibile. */
.u-sr { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }